/* Inter (variable: weights 100–900 + optical size 14–32), self-hosted. Declaring the full weight
   range makes 400/500/600/700/800 use the real instances instead of synthesized bold. */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Italic-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
body { font-optical-sizing: auto; font-synthesis: none; }

/* Twemoji color font (mozilla/twemoji-colr) so emoji look like Twemoji even inside text boxes,
   placeholders and tooltips. Restricted to emoji code points: letters, digits, arrows, ©/®/™ keep
   their normal font. Rendered messages still use the SVG images (newest emoji set). */
@font-face {
  font-family: 'Twemoji';
  src: url('/fonts/Twemoji.Mozilla.ttf') format('truetype');
  font-display: swap;
  unicode-range: U+200D, U+203C, U+2049, U+2139, U+231A-231B, U+2328, U+23CF, U+23E9-23F3, U+23F8-23FA, U+24C2,
    U+25AA-25AB, U+25FB-25FE, U+2600-26FF, U+2702-27BF, U+2934-2935, U+2B1B-2B1C, U+2B50, U+2B55, U+3030, U+303D,
    U+3297, U+3299, U+FE0F, U+1F000-1FAFF, U+E0020-E007F;
}

/* ==========================================================================
   UnTidl — dark theme modelled on Discord's UI kit
   ========================================================================== */
:root {
  /* UnTidl default: "Graphite Olive" — graphite grays + olive accent (#87A330 · #A1C349 · #CAD593) */
  --bg-1: #25272a;          /* chat (a step lighter than #2A3C24) */
  --bg-2: #1e1f21;          /* sidebar / members */
  --bg-3: #161718;          /* server rail, title bar */
  --bg-4: #1a1b1d;          /* user panel */
  --bg-float: #101112;      /* menus, popouts (a step darker than #243010) */
  --bg-modal: #32462b;
  --bg-input: #2d3033;
  --bg-input-dark: #161718;
  --tint: #c9cfbc;           /* hover / selection / divider tint */
  --tint-rgb: 201, 207, 188;
  --hover: rgba(var(--tint-rgb), .08);
  --hover-2: rgba(var(--tint-rgb), .13);
  --selected: rgba(var(--tint-rgb), .17);
  --msg-hover: rgba(0, 0, 0, .09);
  --line: rgba(var(--tint-rgb), .16);
  --line-soft: rgba(var(--tint-rgb), .08);
  --text: #dfe3d6;
  --text-strong: #f3f5ee;
  --muted: #9ca191;
  --faint: #80857a;
  --icon: #b4b9a9;
  --icon-hover: #e6ecd0;
  --brand: #87a330;
  --brand-hover: #74902a;
  --brand-text: #cad593;
  --on-brand: #17210a;
  --brand-rgb: 135, 163, 48;
  --on-brand-rgb: 23, 33, 10;      /* dark text on the olive accent (white would be too low-contrast) */
  --link: #a1c349;
  --green: #a1c349;
  --green-btn: #5f7f1f;
  --green-btn-hover: #4d6918;
  --green-rgb: 161, 195, 73;
  --green-btn-rgb: 95, 127, 31;
  --red: #f23f43;
  --red-btn: #da373c;
  --red-btn-hover: #a12828;
  --yellow: #f0b232;
  --mention-bg: rgba(240, 178, 50, .1);
  --mention-bar: #f0b132;
  --radius: 8px;
  --font: 'Twemoji', 'Inter', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', monospace;
  --shadow: 0 8px 16px rgba(0, 0, 0, .3);
  --cut: var(--bg-2);
  /* surfaces derived from the base colors */
  --bg-hover: color-mix(in srgb, var(--bg-2) 90%, var(--tint));
  --bg-hover-2: color-mix(in srgb, var(--bg-2) 83%, var(--tint));
  --btn-grey: color-mix(in srgb, var(--bg-1) 72%, var(--tint));
  --btn-grey-hover: color-mix(in srgb, var(--bg-1) 58%, var(--tint));
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg-3);
  color: var(--text);
  font: 16px/1.375 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  user-select: none;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
a { color: var(--link); text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5, p { margin: 0; }
kbd { font: 600 11px var(--font); background: var(--bg-3); border: 1px solid var(--bg-float); border-bottom-width: 2px; border-radius: 4px; padding: 1px 6px; color: var(--text); }
[hidden] { display: none !important; }
.ic { flex-shrink: 0; display: block; }
.ic.red { color: var(--red); }
.grow { flex: 1; }
.mt { margin-top: 16px; }
::selection { background: rgba(var(--brand-rgb), .5); }

::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-thumb { background: var(--bg-float); border: 4px solid transparent; background-clip: padding-box; border-radius: 8px; min-height: 40px; }
::-webkit-scrollbar-track { background: var(--bg-2); border: 4px solid transparent; background-clip: padding-box; border-radius: 8px; }
.thin-scroll::-webkit-scrollbar, .sb-scroll::-webkit-scrollbar, .side-panel::-webkit-scrollbar, .settings-nav::-webkit-scrollbar, .ctx-menu::-webkit-scrollbar { width: 8px; }
.sb-scroll::-webkit-scrollbar-thumb, .side-panel::-webkit-scrollbar-thumb, .settings-nav::-webkit-scrollbar-thumb { border-width: 2px; background-color: transparent; }
.sb-scroll:hover::-webkit-scrollbar-thumb, .side-panel:hover::-webkit-scrollbar-thumb, .settings-nav:hover::-webkit-scrollbar-thumb { background-color: var(--bg-float); }
.sb-scroll::-webkit-scrollbar-track, .side-panel::-webkit-scrollbar-track, .settings-nav::-webkit-scrollbar-track { background: none; }

/* ------------------------------------------------------------------ electron title bar */
#titlebar { height: 32px; flex-shrink: 0; display: flex; align-items: center; background: var(--bg-3); -webkit-app-region: drag; position: relative; z-index: 100; }
.tb-title { padding-left: 12px; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .02em; display: flex; align-items: center; gap: 6px; }
.tb-title .ic { color: var(--brand); }
.tb-controls { margin-left: auto; display: flex; height: 100%; -webkit-app-region: no-drag; }
.tb-controls button { width: 46px; height: 32px; display: grid; place-items: center; color: var(--icon); }
.tb-controls button:hover { background: var(--bg-hover); color: var(--text); }
.tb-controls .tb-close:hover { background: var(--red-btn); color: #fff; }
body.electron #root, body.electron #connecting { height: calc(100% - 32px); }
/* keep popups/modals below the title bar so window buttons stay clickable */
body.electron #layers > .layer:not(#incoming), body.electron #connecting { top: 32px; }
body.electron #connecting { position: fixed; inset: 32px 0 0 0; }
body.electron .settings-layer { top: 32px; }

#root { height: 100%; }

/* ------------------------------------------------------------------ avatar & status */
.avatar { --s: 32px; width: var(--s); height: var(--s); position: relative; flex-shrink: 0; border-radius: 50%; }
.avatar > img, .avatar > .avatar-default { width: 100%; height: 100%; border-radius: 50%; display: block; object-fit: cover; }
/* in voice: a moving picture stands still (the canvas over it) until that person talks */
.avatar > canvas.av-still { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; display: block; pointer-events: none; }
.speaking .avatar > canvas.av-still, .avatar.speaking > canvas.av-still { display: none; }
.avatar > img.frozen { visibility: hidden; }
.speaking .avatar > img.frozen, .avatar.speaking > img.frozen { visibility: visible; }
.avatar-default { display: grid !important; place-items: center; color: #fff; }
.avatar::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid transparent; pointer-events: none; transition: border-color .08s; }
.avatar.speaking::after { border-color: var(--green); }

.status { position: absolute; right: -2px; bottom: -2px; width: max(10px, calc(var(--s) * .3)); height: max(10px, calc(var(--s) * .3)); border-radius: 50%; box-shadow: 0 0 0 max(3px, calc(var(--s) * .08)) var(--cut); background: var(--faint); z-index: 1; }
.status.inline { position: relative; right: auto; bottom: auto; display: inline-block; width: 10px; height: 10px; box-shadow: none; flex-shrink: 0; --cut: var(--bg-float); }
.status.s-online { background: var(--green); }
.status.s-idle { background: radial-gradient(circle at 22% 22%, var(--cut) 0 32%, transparent 33%), var(--yellow); }
.status.s-dnd { background: var(--red); }
.status.s-dnd::after { content: ''; position: absolute; left: 22%; right: 22%; top: 50%; height: 22%; transform: translateY(-50%); background: var(--cut); border-radius: 4px; }
.status.s-offline { background: radial-gradient(circle, var(--cut) 0 30%, transparent 31%), var(--faint); }
.status.s-streaming { background: #593695; }

/* ------------------------------------------------------------------ buttons & inputs */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; min-width: 96px; padding: 2px 16px; border-radius: 4px; font-size: 14px; font-weight: 500; color: #fff; transition: background .17s, color .17s; white-space: nowrap; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-sm { height: 32px; min-width: 60px; padding: 2px 16px; font-size: 14px; }
.btn-block { width: 100%; }
.btn-brand { background: var(--brand); color: var(--on-brand); }
.btn-brand:hover:not(:disabled) { background: var(--brand-hover); }
.btn-green { background: var(--green-btn); }
.btn-green:hover:not(:disabled) { background: var(--green-btn-hover); }
.btn-red { background: var(--red-btn); }
.btn-red:hover:not(:disabled) { background: var(--red-btn-hover); }
.btn-grey { background: var(--btn-grey); }
.btn-grey:hover:not(:disabled) { background: var(--btn-grey-hover); }
.btn-green-outline { border: 1px solid var(--green-btn); color: var(--text); }
.btn-green-outline:hover:not(:disabled) { background: var(--green-btn); color: #fff; }
.btn-red-outline { border: 1px solid var(--red-btn); color: var(--text); }
.btn-red-outline:hover { background: var(--red-btn); color: #fff; }
.btn.icon-only { min-width: 32px; width: 32px; padding: 0; }
.btn-link { color: var(--text); font-size: 14px; font-weight: 500; padding: 2px 4px; display: inline-flex; gap: 6px; align-items: center; }
.btn-link:hover { text-decoration: underline; }

.input { width: 100%; background: var(--bg-input-dark); border: 0; border-radius: 4px; padding: 10px; font-size: 16px; color: var(--text); outline: none; resize: none; user-select: text; }
.input:focus { outline: none; }
.input.big { height: 40px; }
textarea.input { line-height: 1.375; }
select.input { appearance: none; cursor: pointer; background: var(--bg-input-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23b5bac1'%3E%3Cpath d='M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z'/%3E%3C/svg%3E") no-repeat right 8px center; padding-right: 36px; }
.field-label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--icon); margin: 20px 0 8px; }
.field-label:first-child { margin-top: 0; }
.field-label.error { color: #fa777c; }
.field-err { font-weight: 500; font-style: italic; text-transform: none; margin-left: 4px; }
.field-hint { font-size: 14px; color: var(--muted); margin-top: 8px; line-height: 1.3; }
.req { color: var(--red); }
.badge { background: var(--red); color: #fff; font-size: 12px; font-weight: 700; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; display: inline-grid; place-items: center; line-height: 1; }
.live-badge { background: var(--red); color: #fff; font-size: 10px; font-weight: 700; padding: 0 5px; border-radius: 8px; height: 16px; display: inline-grid; place-items: center; letter-spacing: .02em; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); margin: 0 4px 0 8px; }
.dot.green { background: var(--green); }
.dot:first-child { margin-left: 0; }

/* ------------------------------------------------------------------ connecting & toasts */
#updating { position: fixed; left: 50%; top: 12px; transform: translateX(-50%); z-index: 1001; display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 20px; background: var(--bg-float); color: var(--text); font-size: 13px; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,.4); pointer-events: none; white-space: nowrap; }
#updating i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--brand); border-top-color: transparent; animation: updating-spin .8s linear infinite; }
@keyframes updating-spin { to { transform: rotate(360deg); } }
body.electron #updating { top: 44px; }
#refresh-bar { position: fixed; left: 50%; top: 12px; transform: translateX(-50%); z-index: 1001; display: flex; align-items: center; gap: 12px; padding: 7px 8px 7px 16px; border-radius: 20px; background: var(--bg-float); color: var(--text); font-size: 13px; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,.4); white-space: nowrap; }
#refresh-bar button { padding: 5px 14px; border-radius: 14px; background: var(--brand); color: #10140a; font-weight: 700; }
body.electron #refresh-bar { top: 44px; }
#connecting { position: fixed; inset: 0; z-index: 1000; display: grid; place-content: center; justify-items: center; gap: 24px; background: var(--bg-1); transition: opacity .25s; }
#connecting.out { opacity: 0; pointer-events: none; }
.spinner-logo { color: var(--brand); animation: bob 1.4s ease-in-out infinite; }
.connecting-text { font-size: 14px; color: var(--muted); text-transform: uppercase; font-weight: 700; letter-spacing: .04em; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-10px) rotate(6deg); } }

#toasts { position: fixed; left: 50%; top: 32px; transform: translateX(-50%); z-index: 2000; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: var(--bg-float); color: var(--text); padding: 10px 16px; border-radius: 6px; font-size: 14px; box-shadow: var(--shadow); animation: toastIn .2s ease-out; transition: opacity .3s, transform .3s; max-width: 480px; }
.toast.error { background: var(--red-btn); color: #fff; }
.toast.out { opacity: 0; transform: translateY(8px); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }

.tooltip { position: fixed; z-index: 3000; background: var(--bg-float); color: var(--text-strong); font-size: 14px; font-weight: 600; padding: 6px 10px; border-radius: 5px; pointer-events: none; box-shadow: var(--shadow); max-width: 260px; animation: tipIn .1s ease-out; white-space: pre-wrap; }
.tooltip.tip-right { font-size: 16px; padding: 8px 12px; }
@keyframes tipIn { from { opacity: 0; transform: scale(.96); } }

/* ------------------------------------------------------------------ auth */
/* minmax(0, 1fr): the column is the screen width, not the card's content width, so the card
   shrinks on phones; tall cards (saved accounts) scroll instead of being cut off */
.auth { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; position: relative; overflow-x: hidden; overflow-y: auto; padding: 24px 0; }
.auth-bg { position: fixed; inset: 0; background:
  radial-gradient(1200px 600px at 10% 110%, var(--brand) 0, transparent 60%),
  radial-gradient(900px 500px at 100% -10%, var(--link) 0, transparent 55%),
  linear-gradient(135deg, var(--bg-2) 0%, var(--bg-3) 100%); }
.auth-bg::after { content: ''; position: absolute; inset: 0; opacity: .12; background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 28px 28px; }
.auth-card { position: relative; width: 480px; max-width: calc(100% - 32px); background: var(--bg-1); border-radius: 5px; padding: 32px; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .2); display: flex; flex-direction: column; animation: pop .25s ease-out; }
.auth-logo { display: flex; align-items: center; gap: 10px; justify-content: center; color: var(--text-strong); font-weight: 800; font-size: 22px; margin-bottom: 16px; }
.auth-logo .ic { color: var(--brand); }
.auth-card h1 { text-align: center; font-size: 24px; font-weight: 600; color: var(--text-strong); margin-bottom: 8px; }
.auth-sub { text-align: center; color: var(--icon); margin-bottom: 12px; }
.auth-submit { margin-top: 24px; height: 44px; font-size: 16px; }
.auth-switch { margin-top: 8px; font-size: 14px; color: var(--muted); }
.auth-links { margin-top: 6px; font-size: 14px; }
.auth-card .btn-grey.btn-block { height: 40px; }
.auth-verify { text-align: center; }
.auth-verify .field-label { text-align: left; }
.auth-mail { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--brand-rgb), .16); color: var(--brand); }
.auth-code { text-align: center; font-size: 26px !important; letter-spacing: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.auth-code::placeholder { color: var(--faint); opacity: .5; }
.auth-verify-links { display: flex; justify-content: space-between; margin-top: 14px; }
.auth-verify-links a.disabled { color: var(--muted); cursor: default; text-decoration: none; }
.tfa-box { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 14px 16px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line-soft); }
.tfa-box.on { border-color: rgba(var(--green-rgb), .45); }
.tfa-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: var(--bg-3); color: var(--icon); }
.tfa-box.on .tfa-icon { color: var(--green); }
.tfa-text { flex: 1; min-width: 0; }
.tfa-text h5 { margin: 0 0 2px; font-size: 15px; color: var(--text-strong); }
.tfa-text span { font-size: 13px; color: var(--muted); }
@media (max-width: 520px) { .tfa-box { flex-wrap: wrap; } .tfa-box .btn { width: 100%; } }
@media (max-width: 520px) {
  .auth-card { padding: 24px 18px; }
  .auth-card h1 { font-size: 22px; }
  .auth-acc .btn { padding: 0 12px; }
}
@keyframes pop { from { opacity: 0; transform: scale(.96); } }

/* ------------------------------------------------------------------ layout */
.app { display: flex; height: 100%; }
.rail { width: 72px; flex-shrink: 0; background: var(--bg-3); padding: 12px 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; align-items: center; gap: 8px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.sidebar { width: 240px; flex-shrink: 0; background: var(--bg-2); display: flex; flex-direction: column; min-height: 0; }
.sidebar-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.main { flex: 1; min-width: 0; background: var(--bg-1); display: flex; flex-direction: column; }

/* ------------------------------------------------------------------ rail */
.rail-item { position: relative; width: 72px; display: flex; justify-content: center; cursor: pointer; flex-shrink: 0; }
.rail-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--bg-1); display: grid; place-items: center; overflow: hidden; color: var(--text); transition: border-radius .15s ease-out, background .15s ease-out, color .15s; }
.rail-icon img { width: 100%; height: 100%; object-fit: cover; }
.rail-icon .avatar { --s: 48px !important; }
.rail-initials { font-weight: 500; white-space: nowrap; }
.rail-item:hover .rail-icon, .rail-item.active .rail-icon { border-radius: 16px; background: var(--brand); color: var(--on-brand); }
.rail-item:hover .rail-icon.has-img, .rail-item.active .rail-icon.has-img { background: none; }
.rail-icon.home { background: var(--bg-1); color: var(--text); }
.rail-item.active .rail-icon.home, .rail-item:hover .rail-icon.home { background: var(--brand); color: var(--on-brand); }
.rail-icon.green { color: var(--green); }
.rail-item:hover .rail-icon.green { background: var(--green); color: #fff; }
.rail-item.dm .rail-icon { background: none; }
.pill { position: absolute; left: 0; top: 50%; width: 8px; height: 0; margin-top: 0; margin-left: -4px; background: #fff; border-radius: 0 4px 4px 0; transition: height .15s, margin-top .15s; }
.rail-item.unread .pill { height: 8px; margin-top: -4px; }
.rail-item:hover .pill { height: 20px; margin-top: -10px; }
.rail-item.active .pill { height: 40px; margin-top: -20px; }
.rail-item .badge { position: absolute; right: 12px; bottom: -2px; box-shadow: 0 0 0 4px var(--bg-3); min-width: 16px; }
.rail-voice { position: absolute; right: 12px; bottom: -2px; width: 18px; height: 18px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 3px var(--bg-3); }
.rail-sep { width: 32px; height: 2px; border-radius: 1px; background: var(--bg-input); flex-shrink: 0; }

/* ------------------------------------------------------------------ sidebar */
.sb-header { height: 48px; flex-shrink: 0; display: flex; align-items: center; padding: 0 10px; box-shadow: 0 1px 0 rgba(4, 4, 5, .2), 0 1.5px 0 rgba(6, 6, 7, .05), 0 2px 0 rgba(4, 4, 5, .05); position: relative; z-index: 2; }
.sb-header.server { padding: 0 16px; cursor: pointer; font-weight: 600; color: var(--text-strong); transition: background .1s; }
.sb-header.server:hover, .sb-header.server.open { background: var(--hover); }
.sb-header.server.open .ic { transform: rotate(180deg); }
.sb-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-btn { width: 100%; height: 28px; border-radius: 4px; background: var(--bg-3); color: var(--muted); font-size: 14px; text-align: left; padding: 0 6px; font-weight: 500; }
.sb-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 8px 16px; }
.server-scroll { padding: 16px 8px 16px 8px; }
.sb-nav { height: 42px; display: flex; align-items: center; gap: 12px; padding: 0 8px; border-radius: 4px; color: var(--muted); font-weight: 500; cursor: pointer; margin-bottom: 2px; }
.sb-nav:hover { background: var(--hover); color: var(--text); }
.sb-nav.active { background: var(--selected); color: #fff; }
.sb-nav .badge { margin-left: auto; }
.sb-section { display: flex; align-items: center; justify-content: space-between; padding: 18px 8px 4px 10px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); }
.sb-section:hover { color: var(--text); }
.sb-section button { color: var(--icon); }
.sb-section button:hover { color: var(--text); }
.dm-item { height: 42px; display: flex; align-items: center; gap: 12px; padding: 0 8px; border-radius: 4px; color: var(--muted); cursor: pointer; margin: 1px 0; --cut: var(--bg-2); }
.dm-item:hover { background: var(--hover); color: var(--text); --cut: var(--bg-hover); }
.dm-item.active { background: var(--selected); color: #fff; --cut: var(--bg-hover-2); }
.dm-item.unread { color: #fff; }
.dm-item.unread .dm-name { font-weight: 600; }
.dm-text { flex: 1; min-width: 0; }
.dm-name { font-weight: 500; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 20px; }
.dm-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 16px; }
.dm-call { color: var(--green); }
.dm-close { color: var(--icon); opacity: 0; }
.dm-item:hover .dm-close { opacity: 1; }
.dm-close:hover { color: var(--text); }

.cat { display: flex; align-items: center; padding: 16px 8px 4px 0; cursor: pointer; color: var(--muted); }
.cat:first-child { padding-top: 0; }
.cat:hover { color: var(--text); }
.cat-name { flex: 1; display: flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; overflow: hidden; white-space: nowrap; }
.cat-name .ic { transition: transform .1s; }
.cat.collapsed .cat-name .ic { transform: rotate(-90deg); }
.cat button { color: var(--icon); display: none; }
.cat:hover button { display: block; }
.cat button:hover { color: var(--text); }
.ch-item { height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 8px; margin: 1px 0; border-radius: 4px; color: var(--faint); cursor: pointer; position: relative; }
.ch-item:hover { background: var(--hover); color: var(--text); }
.ch-item.active { background: var(--selected); color: #fff; }
.ch-item.unread { color: #fff; }
.ch-item.unread .ch-name { font-weight: 600; }
.ch-item.unread::before { content: ''; position: absolute; left: -8px; width: 8px; height: 8px; border-radius: 0 4px 4px 0; background: #fff; }
.ch-icon { color: var(--faint); display: flex; position: relative; }
/* drag & drop ordering */
.ch-item.dragging, .cat.dragging { opacity: .4; }
.ch-item.drop-before, .cat.drop-before { box-shadow: inset 0 2px 0 var(--brand); }
.ch-item.drop-after, .cat.drop-after { box-shadow: inset 0 -2px 0 var(--brand); }
.cat.drop-into { background: rgba(var(--brand-rgb), .15); border-radius: 4px; color: var(--text-strong); }
.ch-lock { position: absolute; right: -3px; bottom: -2px; display: grid; place-items: center; width: 13px; height: 13px; border-radius: 50%; background: var(--bg-2); }
.ch-item.connected .ch-icon { color: var(--green); }
.ch-name { flex: 1; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-actions { display: none; gap: 4px; }
.ch-actions button { color: var(--icon); }
.ch-actions button:hover { color: var(--text); }
.ch-item:hover .ch-actions, .ch-item.active .ch-actions { display: flex; }
.vc-users { padding: 0 0 6px 36px; }
.vc-user { height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 8px; border-radius: 4px; color: var(--muted); cursor: pointer; font-size: 14px; }
.vc-user:hover { background: var(--hover); color: var(--text); }
.vc-name { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; }
.vc-icons { display: flex; gap: 4px; align-items: center; color: var(--icon); }

.user-panel { height: 52px; flex-shrink: 0; background: var(--bg-4); display: flex; align-items: center; padding: 0 8px; gap: 2px; --cut: var(--bg-4); }
.up-user { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 4px 4px 4px 2px; margin-left: -2px; border-radius: 4px; cursor: pointer; }
.up-user:hover { background: var(--hover-2); --cut: var(--bg-hover-2); }
.up-names { min-width: 0; line-height: 1.2; }
.up-name { font-size: 14px; font-weight: 600; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-sub { font-size: 12px; color: var(--muted); height: 15px; overflow: hidden; position: relative; }
.up-sub span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: transform .2s; }
.up-user:hover .up-sub span { transform: translateY(-100%); }
.up-btn { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 4px; color: var(--icon); flex-shrink: 0; }
.up-btn:hover { background: var(--hover-2); color: var(--text); }
.up-btn.red { color: var(--red); }

.voice-panel { background: var(--bg-4); border-bottom: 1px solid var(--line-soft); padding: 8px; }
.vp-row { display: flex; align-items: center; }
.vp-info { flex: 1; min-width: 0; }
.vp-title { display: flex; align-items: center; gap: 4px; color: var(--green); font-size: 14px; font-weight: 600; }
.vp-where { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-where:hover { color: var(--text); }
.vp-buttons { display: flex; gap: 8px; margin-top: 8px; }
.vp-btn { flex: 1; height: 32px; border-radius: 4px; background: var(--bg-2); display: grid; place-items: center; color: var(--text); }
.vp-btn:hover { background: var(--bg-hover); }
.vp-btn.on { background: var(--green-btn); color: #fff; }

/* ------------------------------------------------------------------ chat header */
.chat-header { height: 48px; flex-shrink: 0; display: flex; align-items: center; padding: 0 8px 0 16px; gap: 8px; box-shadow: 0 1px 0 rgba(4, 4, 5, .2), 0 1.5px 0 rgba(6, 6, 7, .05), 0 2px 0 rgba(4, 4, 5, .05); position: relative; z-index: 2; --cut: var(--bg-1); }
.hdr-left { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.hdr-left h1 { font-size: 16px; font-weight: 600; color: var(--text-strong); white-space: nowrap; }
.hdr-left h1.clickable { cursor: pointer; }
.hdr-icon { color: var(--faint); }
.hdr-divider { width: 1px; height: 24px; background: var(--line); margin: 0 8px; flex-shrink: 0; }
.hdr-topic { font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.hdr-right { display: flex; align-items: center; gap: 4px; }
.hdr-btn { width: 32px; height: 32px; display: grid; place-items: center; color: var(--icon); margin: 0 4px; }
.hdr-btn:hover, .hdr-btn.on { color: var(--text-strong); }

.chat-body { flex: 1; min-height: 0; display: flex; }
.chat-col { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.chat-col.dropping::after { content: 'Drop images to upload'; position: absolute; inset: 16px; border: 2px dashed var(--brand); border-radius: 12px; background: rgba(var(--brand-rgb), .12); display: grid; place-items: center; font-size: 20px; font-weight: 700; color: #fff; z-index: 5; }

/* ------------------------------------------------------------------ messages */
.messages { flex: 1; min-height: 0; overflow-y: scroll; overflow-x: hidden; overflow-anchor: none; }
.messages-inner { display: flex; flex-direction: column; justify-content: flex-end; min-height: 100%; padding-bottom: 24px; }
.load-more { text-align: center; padding: 16px; color: var(--muted); font-size: 14px; }
.welcome { margin: 16px 16px 8px; padding-top: 16px; --cut: var(--bg-1); }
.welcome h1 { font-size: 32px; font-weight: 700; color: var(--text-strong); margin: 8px 0; line-height: 1.25; }
.welcome p { color: var(--muted); }
.welcome p b { color: var(--text); }
.welcome .btn-link { margin-top: 12px; color: var(--link); }
.welcome-icon { width: 68px; height: 68px; border-radius: 50%; background: var(--btn-grey); display: grid; place-items: center; color: #fff; }
.welcome-username { font-size: 24px; color: var(--text-strong); margin: -4px 0 16px; font-weight: 500; }
.welcome-actions { display: flex; gap: 8px; margin-top: 16px; }
.day-divider { display: flex; align-items: center; margin: 24px 16px 8px 16px; height: 0; border-top: 1px solid var(--line); justify-content: center; }
.day-divider span { background: var(--bg-1); padding: 2px 4px; font-size: 12px; font-weight: 600; color: var(--muted); margin-top: -1px; transform: translateY(-50%); }

.msg { position: relative; padding: 2px 48px 2px 72px; min-height: 22px; user-select: text; word-wrap: break-word; }
.msg:hover { background: var(--msg-hover); }
.msg.msg-head { margin-top: 17px; min-height: 44px; }
.msg.mentioned, .msg.replying { background: var(--mention-bg); }
.msg.mentioned::before, .msg.replying::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--mention-bar); }
.msg.replying { background: rgba(var(--brand-rgb), .08); }
.msg.replying::before { background: var(--brand); }
.msg.flash { animation: flash 1.5s ease-out; }
@keyframes flash { 0%, 40% { background: rgba(var(--brand-rgb), .2); } }
.msg.pending .msg-content { color: var(--muted); }
.msg.failed .msg-content { color: var(--red); }
.msg-avatar { position: absolute; left: 16px; top: 2px; cursor: pointer; --cut: var(--bg-1); }
.msg-reply + .msg-avatar { top: 24px; }
.msg-avatar .avatar::after { display: none; }
.msg-avatar:active { transform: translateY(1px); }
.msg-header { font-size: 16px; font-weight: 500; line-height: 22px; display: flex; align-items: baseline; gap: 8px; }
.msg-author { color: var(--text-strong); cursor: pointer; font-weight: 500; }
.msg-author:hover { text-decoration: underline; }
.msg-header time, .sys-text time { font-size: 12px; color: var(--muted); font-weight: 500; }
.msg-hover-time { position: absolute; left: 0; width: 56px; text-align: right; font-size: 11px; color: var(--muted); line-height: 22px; display: none; }
.msg:hover .msg-hover-time { display: block; }
.msg-content { line-height: 1.375; color: var(--text); white-space: pre-wrap; }
.msg-content.jumbo { font-size: 48px; line-height: 1.2; }
.msg-content a { word-break: break-all; }
.edited { font-size: 10px; color: var(--muted); margin-left: 4px; user-select: none; }
.msg-reply { display: flex; align-items: center; gap: 4px; font-size: 14px; color: var(--muted); margin-bottom: 4px; position: relative; cursor: pointer; min-width: 0; --cut: var(--bg-1); }
.msg-reply::before { content: ''; position: absolute; left: -36px; top: 50%; width: 33px; height: 12px; border-left: 2px solid var(--btn-grey); border-top: 2px solid var(--btn-grey); border-top-left-radius: 6px; }
.msg-reply .avatar::after { display: none; }
.msg-reply-name { color: var(--text-strong); font-weight: 500; white-space: nowrap; opacity: .85; }
.msg-reply-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-reply:hover .msg-reply-text { color: var(--text); }
.msg-accessories { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 0; }
.attachment { display: block; border-radius: 8px; overflow: hidden; cursor: zoom-in; max-width: 400px; line-height: 0; }
.attachment img { max-width: 100%; height: auto; display: block; }
.embed-img { max-height: 300px; max-width: 400px; }
.invite-embed { background: var(--bg-2); border-radius: 8px; padding: 16px; width: 432px; max-width: 100%; min-height: 110px; user-select: none; }
.invite-embed h5 { font-size: 12px; font-weight: 700; color: var(--icon); text-transform: uppercase; margin-bottom: 12px; }
.ie-row { display: flex; align-items: center; gap: 16px; }
.ie-icon { width: 50px; height: 50px; border-radius: 16px; background: var(--bg-1); display: grid; place-items: center; overflow: hidden; font-weight: 600; flex-shrink: 0; color: var(--text); }
.ie-icon img { width: 100%; height: 100%; object-fit: cover; }
.ie-icon.bad { color: var(--red); }
.ie-info { flex: 1; min-width: 0; }
.ie-name { font-weight: 600; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ie-name.bad { color: var(--red); }
.ie-sub { font-size: 14px; color: var(--muted); display: flex; align-items: center; white-space: nowrap; }
.ie-sub.center { justify-content: center; margin-top: 8px; }
.reactions { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 0 2px; user-select: none; }
.reaction { height: 24px; display: inline-flex; align-items: center; gap: 6px; padding: 0 6px; border-radius: 8px; background: var(--bg-2); border: 1px solid transparent; font-size: 14px; }
.reaction:hover { border-color: var(--btn-grey); }
.reaction.me { background: rgba(var(--brand-rgb), .15); border-color: var(--brand); }
.reaction .r-count { font-size: 14px; font-weight: 600; color: var(--icon); }
.reaction.me .r-count { color: var(--brand-text); }
.reaction.add { color: var(--icon); opacity: 0; }
.msg:hover .reaction.add { opacity: 1; }
.msg-actions { position: absolute; right: 14px; top: -16px; display: none; background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: 8px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 4px 8px rgba(0, 0, 0, .1); overflow: hidden; z-index: 3; }
.msg:hover .msg-actions { display: flex; }
.msg-actions button { width: 32px; height: 32px; display: grid; place-items: center; color: var(--icon); }
.msg-actions button:hover { background: var(--hover); color: var(--text); }
.msg-actions button.danger:hover { color: var(--red); }
.msg.system { display: flex; align-items: center; gap: 0; padding-left: 72px; min-height: 26px; margin-top: 8px; color: var(--muted); }
.sys-icon { position: absolute; left: 28px; top: 5px; }
.sys-icon.green { color: var(--green); }
.sys-icon.red { color: var(--red); }
.sys-text { font-size: 15px; }
.sys-text .msg-author { color: var(--text-strong); }
.join-call { margin-left: 4px; }
.edit-box { padding: 4px 0; }
.edit-input { width: 100%; background: var(--bg-input); border: 0; border-radius: 8px; padding: 11px 16px; outline: none; resize: none; color: var(--text); line-height: 1.375; max-height: 50vh; }
.edit-hint { font-size: 12px; color: var(--text); margin-top: 4px; }
.skeleton { pointer-events: none; opacity: .6; }
.sk-bar { display: inline-block; height: 14px; border-radius: 7px; background: var(--bg-hover-2); vertical-align: middle; }
.sk-circle { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-hover-2); }

.codeblock { background: var(--bg-2); border: 1px solid var(--bg-3); border-radius: 4px; padding: 8px; margin: 6px 0 0; max-width: 90%; font: 14px/1.125rem var(--mono); white-space: pre-wrap; color: var(--text); overflow-x: auto; }
code.inline { background: var(--bg-2); border: 1px solid var(--bg-3); border-radius: 4px; padding: 0 .2em; font: 85% var(--mono); }
blockquote { margin: 0; padding: 0 8px 0 12px; border-left: 4px solid var(--btn-grey); border-radius: 4px; }
.mention { background: rgba(var(--brand-rgb), .3); color: var(--brand-text); border-radius: 3px; padding: 0 2px; font-weight: 500; cursor: pointer; }
.mention:hover { background: var(--brand); color: var(--on-brand); }
.spoiler { background: var(--bg-3); color: transparent; border-radius: 3px; cursor: pointer; transition: all .1s; }
.spoiler.revealed { background: rgba(255, 255, 255, .1); color: inherit; cursor: text; }

/* ------------------------------------------------------------------ composer */
.composer { padding: 0 16px; flex-shrink: 0; position: relative; }
.composer-box { display: flex; align-items: flex-start; background: var(--bg-input); border-radius: 8px; padding: 0 12px 0 0; }
.composer.has-top .composer-box { border-top-left-radius: 0; border-top-right-radius: 0; }
.composer-btn { width: 40px; height: 44px; display: grid; place-items: center; color: var(--icon); flex-shrink: 0; padding: 0 8px; }
.composer-btn:first-child { width: 56px; padding: 0 16px; }
.composer-btn:hover { color: var(--text); }
#composer-input { flex: 1; background: none; border: 0; outline: none; resize: none; padding: 11px 0; line-height: 22px; max-height: 50vh; color: var(--text); user-select: text; }
#composer-input::placeholder { color: var(--btn-grey-hover); }
#composer-input.photo-only { cursor: default; }
#composer-input.photo-only::placeholder { font-style: italic; }
.composer-blocked { background: var(--bg-input); border-radius: 8px; padding: 12px 16px; color: var(--muted); display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.attach-tray { display: flex; gap: 24px; padding: 20px 10px 10px; background: var(--bg-input); border-radius: 8px 8px 0 0; border-bottom: 1px solid var(--line-soft); overflow-x: auto; }
.attach-item { width: 216px; background: var(--bg-2); border-radius: 4px; padding: 8px; position: relative; flex-shrink: 0; }
.attach-item img { width: 100%; height: 150px; object-fit: contain; border-radius: 3px; display: block; }
.attach-name { font-size: 12px; margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attach-item button { position: absolute; top: -12px; right: -12px; width: 32px; height: 32px; border-radius: 4px; background: var(--bg-1); color: var(--red); display: grid; place-items: center; box-shadow: 0 0 0 1px var(--line); }
.reply-bar { display: flex; align-items: center; justify-content: space-between; background: var(--bg-2); border-radius: 8px 8px 0 0; padding: 8px 16px; font-size: 14px; color: var(--muted); }
.reply-bar b { color: var(--text); font-weight: 600; }
.reply-bar button { color: var(--icon); }
.attach-tray + .reply-bar { border-radius: 0; }
.slow-note { height: 24px; margin-top: -24px; display: flex; align-items: center; justify-content: flex-end; font-size: 12px; color: var(--muted); pointer-events: none; }
.slow-note > span { display: inline-flex; align-items: center; gap: 4px; pointer-events: auto; }
.dur-row { display: flex; gap: 8px; margin-top: 8px; }
.dur-row[hidden] { display: none; }
.dur-row input { flex: 1; min-width: 0; }
.dur-row select { width: 130px; flex-shrink: 0; }
.typing { height: 24px; font-size: 14px; color: var(--text); display: flex; align-items: center; gap: 4px; padding-left: 2px; }
.typing b { font-weight: 700; }
.typing-dots { display: inline-flex; gap: 3px; margin-right: 4px; }
.typing-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--text); animation: dots 1.2s infinite ease-in-out; }
.typing-dots i:nth-child(2) { animation-delay: .15s; }
.typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dots { 0%, 60%, 100% { opacity: .3; transform: scale(.8); } 30% { opacity: 1; transform: scale(1); } }

/* ------------------------------------------------------------------ side panel (members / DM profile) */
.side-panel { width: 240px; flex-shrink: 0; background: var(--bg-2); overflow-y: auto; overflow-x: hidden; --cut: var(--bg-2); }
.side-panel.members { padding: 0 8px 20px; }
.side-panel.dm-profile { width: 340px; background: var(--bg-3); --cut: var(--bg-3); }
.members-h { padding: 24px 8px 4px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); }
.member { height: 42px; display: flex; align-items: center; gap: 12px; padding: 0 8px; border-radius: 4px; cursor: pointer; margin: 1px 0; }
.member:hover { background: var(--hover); --cut: var(--bg-hover); }
.member.offline { opacity: .3; }
.member.offline:hover { opacity: 1; }
.member-text { min-width: 0; flex: 1; }
.member-name { font-weight: 500; color: var(--muted); display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; }
.member:hover .member-name { color: var(--text); }
.member-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; gap: 4px; align-items: center; }
.crown { color: var(--yellow); display: inline-flex; }
.mutual { display: flex; align-items: center; gap: 12px; padding: 6px; border-radius: 4px; cursor: pointer; font-size: 14px; }
.mutual:hover { background: var(--hover); }
.mutual img, .mutual span { width: 32px; height: 32px; border-radius: 12px; object-fit: cover; display: grid; place-items: center; background: var(--bg-1); font-size: 14px; flex-shrink: 0; }

/* ------------------------------------------------------------------ profile card */
.profile-card { width: 340px; background: var(--bg-float); border-radius: 8px; overflow: hidden; --cut: var(--bg-float); user-select: text; }
.side-panel .profile-card { border-radius: 0; background: var(--bg-3); --cut: var(--bg-3); min-height: 100%; }
.pc-banner { height: 60px; background: var(--banner); }
.profile-card.full .pc-banner { height: 120px; }
.pc-avatar { margin: -40px 0 0 16px; width: max-content; border-radius: 50%; padding: 6px; background: var(--cut); position: relative; }
.profile-card.full .pc-avatar { margin-top: -46px; }
.pc-avatar .avatar::after { display: none; }
.pc-body { padding: 0 16px 16px; }
.pc-names { background: var(--bg-2); border-radius: 8px; padding: 12px; margin-top: 12px; }
.side-panel .pc-names, .side-panel .pc-section { background: var(--bg-2); }
.pc-display { font-size: 20px; font-weight: 700; color: var(--text-strong); line-height: 1.2; word-break: break-word; }
.pc-username { font-size: 14px; color: var(--text); display: flex; align-items: center; gap: 6px; }
.pc-owner { color: var(--yellow); display: inline-flex; }
.pc-custom { font-size: 14px; margin-top: 8px; color: var(--text); }
.pc-section { background: var(--bg-2); border-radius: 8px; padding: 12px; margin-top: 8px; }
.pc-section h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--text-strong); margin: 12px 0 6px; }
.pc-section h4:first-child { margin-top: 0; }
.pc-about, .pc-since { font-size: 14px; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.pc-actions:empty { display: none; }
.pc-actions { margin-top: 12px; }
.pc-buttons { display: flex; gap: 8px; margin-bottom: 12px; }
.pc-buttons .btn:first-child:not(.icon-only) { flex: 1; }
.pc-message { width: 100%; background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 8px; padding: 10px 12px; outline: none; font-size: 14px; }
.pc-actions .btn { width: 100%; }
.pc-actions .pc-buttons .btn { width: auto; }

/* ------------------------------------------------------------------ friends */
.friends-header { gap: 0; }
.friends-header .hdr-left { gap: 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.friends-header .hdr-left::-webkit-scrollbar { display: none; }
.friends-header .tab { flex-shrink: 0; white-space: nowrap; }
.tab { padding: 2px 8px; border-radius: 4px; font-size: 16px; font-weight: 500; color: var(--icon); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; margin: 0 4px; }
.tab:hover { background: var(--hover); color: var(--text); }
.tab.active { background: var(--selected); color: #fff; }
.tab.add { background: var(--green-btn); color: #fff; }
.tab.add.active { background: none; color: var(--link); }
.friends { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.friend-search { margin: 16px 20px 8px 30px; position: relative; flex-shrink: 0; }
.friend-search input { width: 100%; height: 34px; background: var(--bg-3); border: 0; border-radius: 4px; padding: 0 36px 0 10px; outline: none; font-size: 15px; }
.friend-search .ic { position: absolute; right: 8px; top: 7px; color: var(--icon); }
.friend-list { flex: 1; overflow-y: auto; padding: 0 20px 16px 30px; }
.list-h { font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--muted); letter-spacing: .02em; margin: 16px 0 8px; }
.friend-row { height: 62px; display: flex; align-items: center; gap: 12px; padding: 0 10px; margin: 0 -10px; border-top: 1px solid var(--line-soft); border-radius: 8px; cursor: pointer; --cut: var(--bg-1); }
.friend-row:hover { background: var(--hover); border-top-color: transparent; --cut: var(--bg-input); }
.friend-row:hover + .friend-row { border-top-color: transparent; }
.friend-text { flex: 1; min-width: 0; }
.friend-name { font-weight: 600; color: var(--text-strong); display: flex; gap: 6px; align-items: baseline; }
.friend-username { font-size: 14px; color: var(--muted); font-weight: 500; opacity: 0; transition: opacity .1s; }
.friend-row:hover .friend-username { opacity: 1; }
.friend-sub { font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.friend-actions { display: flex; gap: 10px; }
.round-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-2); color: var(--icon); display: grid; place-items: center; }
.friend-row:hover .round-btn { background: var(--bg-3); }
.round-btn:hover { color: var(--text); }
.round-btn.green:hover { color: var(--green); }
.round-btn.red:hover { color: var(--red); }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 100%; gap: 16px; color: var(--muted); padding: 32px; }
.empty-art { width: 200px; height: 160px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, var(--bg-hover-2), transparent 70%); color: var(--btn-grey-hover); }
.add-friend { padding: 20px 30px; border-bottom: 1px solid var(--line-soft); flex: 1; display: flex; flex-direction: column; }
.add-friend h2 { font-size: 16px; font-weight: 600; text-transform: uppercase; color: var(--text-strong); margin-bottom: 8px; }
.add-friend > p { font-size: 14px; color: var(--muted); margin-bottom: 16px; }
.add-friend-box { display: flex; align-items: center; background: var(--bg-3); border: 1px solid var(--bg-3); border-radius: 8px; padding: 0 12px; height: 52px; }
.add-friend-box:focus-within { border-color: var(--link); }
.add-friend-box.ok { border-color: var(--green); }
.add-friend-box.err { border-color: var(--red); }
.add-friend-box input { flex: 1; background: none; border: 0; outline: none; font-size: 16px; height: 100%; }
.add-friend-msg { font-size: 14px; margin-top: 8px; }
.add-friend-msg.ok { color: var(--link); }
.add-friend-msg.err { color: #fa777c; }
.add-friend-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: var(--btn-grey); }
.add-friend-empty p { color: var(--muted); font-size: 14px; }
.active-now { width: 360px; flex-shrink: 0; border-left: 1px solid var(--line-soft); padding: 16px; overflow-y: auto; }
.active-now h2 { font-size: 20px; font-weight: 800; color: var(--text-strong); margin: 8px 0 16px; }
.active-empty { text-align: center; padding: 16px; }
.active-empty h4 { font-size: 16px; font-weight: 600; color: var(--text-strong); margin-bottom: 4px; }
.active-empty p { font-size: 14px; color: var(--muted); }
.active-card { background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 8px; padding: 16px; margin-bottom: 8px; cursor: pointer; --cut: var(--bg-2); }
.active-card:hover { background: var(--bg-hover); }
.ac-top { display: flex; gap: 12px; align-items: center; }
.ac-name { font-weight: 600; color: var(--text-strong); }
.ac-sub { font-size: 14px; color: var(--muted); }
.ac-voice { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--muted); }
.ac-avatars { display: flex; }
.ac-avatars .avatar { margin-right: -4px; box-shadow: 0 0 0 2px var(--bg-2); border-radius: 50%; }

/* ------------------------------------------------------------------ voice & calls */
.stage { position: relative; display: flex; flex-direction: column; min-height: 0; background: #000; overflow: hidden; --cut: var(--bg-3); }
.stage::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 0%, var(--bg-2) 0%, var(--bg-float) 70%); pointer-events: none; }
.voice-stage { flex: 1; }
.call-area { flex-shrink: 0; border-bottom: 1px solid #000; }
.call-area.resizing { user-select: none; }
.call-area.resizing * { pointer-events: none; }
.call-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; cursor: ns-resize; z-index: 6; }
.call-resize::after { content: ''; position: absolute; left: 50%; bottom: 3px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: rgba(255, 255, 255, .15); opacity: 0; transition: opacity .15s; }
.call-area:hover .call-resize::after { opacity: 1; }

.stage-top { position: relative; z-index: 5; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 16px; opacity: .92; }
.stage-title { display: flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; font-size: 15px; min-width: 0; }
.stage-title > span:first-of-type { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.stage-title .ic { color: var(--icon); }
.stage-timer { font-size: 13px; font-weight: 600; color: var(--icon); font-variant-numeric: tabular-nums; background: rgba(255, 255, 255, .08); padding: 2px 8px; border-radius: 10px; }
.stage-icon { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; color: var(--text); }
.stage-icon:hover { background: rgba(255, 255, 255, .1); color: #fff; }

.tiles { position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 10px; padding: 10px; --tw: 320px; --th: 180px; }
.tile { position: relative; width: var(--tw); height: var(--th); flex: 0 0 auto; border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--bg-3); isolation: isolate; transition: box-shadow .15s; --av: clamp(40px, calc(var(--th) * .36), 112px); }
.tile-bg { position: absolute; inset: 0; background: linear-gradient(160deg, color-mix(in srgb, var(--tile) 62%, var(--bg-float)), color-mix(in srgb, var(--tile) 34%, #000)); }
.tile-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .08), rgba(0, 0, 0, .25) 75%); }
.tile-avatar { position: absolute; inset: 0; display: grid; place-items: center; }
.tile-avatar .avatar { --s: var(--av) !important; width: var(--av); height: var(--av); /* (--s: frames are sized from it, so they match the size the tile gives the picture) */ box-shadow: 0 4px 24px rgba(0, 0, 0, .35); }
.tile-avatar .avatar::after { inset: -4px; border-width: 3px; }
.tile::after { content: ''; position: absolute; inset: 0; border-radius: 10px; box-shadow: inset 0 0 0 0 transparent; pointer-events: none; transition: box-shadow .1s; z-index: 4; }
.tile.speaking::after { box-shadow: inset 0 0 0 3px var(--green), inset 0 0 0 5px rgba(0, 0, 0, .35); }
.tile.speaking .tile-avatar .avatar::after { border-color: var(--green); }
.tile:hover .tile-foot { opacity: 1; }
.tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.tile video.screen { object-fit: contain; }
video.mirror { transform: scaleX(-1); }
.tile-foot { position: absolute; left: 8px; bottom: 8px; right: 60px; z-index: 3; display: flex; }
.tile-name { max-width: 100%; background: rgba(0, 0, 0, .55); backdrop-filter: blur(6px); color: #fff; font-size: 13px; font-weight: 600; padding: 3px 8px; border-radius: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tile-state { position: absolute; right: 8px; bottom: 8px; z-index: 3; display: flex; gap: 4px; }
.tile-ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .55); color: var(--red); backdrop-filter: blur(6px); }
.tile-live { position: absolute; top: 8px; left: 8px; z-index: 3; }
.tile-full { position: absolute; top: 8px; right: 8px; z-index: 3; width: 32px; height: 32px; border-radius: 8px; background: rgba(0, 0, 0, .55); color: #fff; display: grid; place-items: center; opacity: 0; transition: opacity .15s; }
.tile:hover .tile-full { opacity: 1; }
.tile.ringing { cursor: default; }
.tile.ringing .tile-avatar .avatar { opacity: .75; }
.tile-calling { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; color: rgba(255, 255, 255, .8); font-size: 13px; font-weight: 600; z-index: 3; animation: blink 1.6s ease-in-out infinite; }
.tile.ringing .tile-foot { bottom: auto; top: 8px; }
.ring-pulse { position: absolute; width: var(--av, 88px); height: var(--av, 88px); border-radius: 50%; border: 2px solid rgba(255, 255, 255, .6); animation: ringOut 1.8s ease-out infinite; pointer-events: none; }
.ring-pulse.two { animation-delay: .9s; }
@keyframes ringOut { from { transform: scale(1); opacity: .8; } to { transform: scale(1.7); opacity: 0; } }
@keyframes blink { 50% { opacity: .45; } }
.tiles.has-focus { align-content: flex-end; }
.tiles.has-focus .tile:not(.focused) { width: 160px; height: 90px; --av: 36px; }
.tiles.has-focus .tile.focused { order: -1; margin: 0 calc((100% - var(--tw)) / 2 - 1px); }

.stage-controls { position: relative; z-index: 5; flex-shrink: 0; display: flex; justify-content: center; align-items: center; gap: 10px; padding: 12px 16px 18px; }
.cc-group { display: flex; align-items: stretch; height: 52px; border-radius: 14px; background: var(--bg-2); overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, .3); transition: background .15s; }
.cc-group:hover { background: var(--bg-hover); }
.cc-btn { width: 56px; display: grid; place-items: center; color: #fff; }
.cc-caret { width: 26px; display: grid; place-items: center; color: var(--icon); border-left: 1px solid rgba(255, 255, 255, .06); }
.cc-caret .ic { transform: rotate(180deg); }
.cc-caret:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.cc-group.active { background: #fff; }
.cc-group.active .cc-btn, .cc-group.active .cc-caret { color: var(--bg-float); }
.cc-group.active.live { background: var(--green-btn); }
.cc-group.active.live .cc-btn { color: #fff; }
.cc-group.danger .cc-btn { color: var(--red); }
.cc-group.danger { background: #3a2527; }
.cc-group.danger:hover { background: #4a2a2d; }
.cc-hangup { width: 72px; height: 52px; border-radius: 14px; background: var(--red-btn); color: #fff; display: grid; place-items: center; box-shadow: 0 2px 10px rgba(218, 55, 60, .35); transition: background .15s, transform .1s; }
.cc-hangup:hover { background: var(--red-btn-hover); }
.cc-hangup:active, .cc-btn:active { transform: translateY(1px); }
.join-btn { height: 48px; padding: 0 28px; font-size: 16px; font-weight: 600; border-radius: 14px; }
.stage-empty { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--muted); text-align: center; padding: 16px; }
.stage-empty h2 { color: var(--text-strong); font-size: 22px; }
.stage-empty-icon { width: 88px; height: 88px; border-radius: 50%; background: var(--bg-3); display: grid; place-items: center; color: var(--icon); margin-bottom: 8px; }
.stage:fullscreen { background: #000; }
.stage:fullscreen .call-resize { display: none; }

/* incoming call card */
#incoming { position: fixed; inset: auto 24px 24px auto; z-index: 900; }
#incoming.out { opacity: 0; transform: translateY(12px); transition: all .18s; }
.incoming { position: relative; width: 264px; background: var(--bg-float); border-radius: 16px; padding: 28px 16px 16px; display: flex; flex-direction: column; align-items: center; overflow: hidden; box-shadow: 0 16px 48px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .05); animation: incomingIn .3s cubic-bezier(.2, 1.3, .5, 1); --cut: var(--bg-float); }
.incoming-glow { position: absolute; inset: 0 0 auto 0; height: 130px; background: radial-gradient(80% 100% at 50% 0%, color-mix(in srgb, var(--c) 55%, transparent), transparent); pointer-events: none; }
.incoming-avatar { position: relative; display: grid; place-items: center; --av: 88px; }
.incoming-avatar .avatar { position: relative; z-index: 1; }
.incoming-avatar .ring-pulse { border-color: color-mix(in srgb, var(--c) 70%, #fff); }
.incoming-name { position: relative; margin-top: 16px; font-size: 20px; font-weight: 700; color: var(--text-strong); text-align: center; word-break: break-word; }
.incoming-sub { position: relative; color: var(--muted); font-size: 14px; margin-top: 2px; animation: blink 1.6s ease-in-out infinite; }
.incoming-actions { position: relative; display: flex; gap: 20px; margin-top: 22px; text-align: center; }
.incoming-actions > div { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.incoming-actions kbd { background: none; border: 0; color: var(--muted); font-size: 11px; min-height: 16px; }
.call-btn { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff; transition: filter .15s, transform .15s; }
.call-btn:hover { filter: brightness(1.12); transform: scale(1.06); }
.call-btn.accept { background: var(--green-btn); box-shadow: 0 4px 16px rgba(var(--green-btn-rgb), .45); }
.call-btn.decline { background: var(--red-btn); box-shadow: 0 4px 16px rgba(218, 55, 60, .4); }
.call-btn.video { background: var(--bg-2); }
@keyframes incomingIn { from { opacity: 0; transform: translateY(20px) scale(.96); } }

/* ------------------------------------------------------------------ layers: modal */
.layer { position: fixed; inset: 0; z-index: 500; }
.backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .7); animation: fade .15s; }
.backdrop.dark { background: rgba(0, 0, 0, .85); }
@keyframes fade { from { opacity: 0; } }
.modal-layer { display: grid; place-items: center; }
.modal-layer.closing { opacity: 0; transition: opacity .12s; }
.modal { position: relative; width: 440px; max-width: calc(100vw - 32px); max-height: calc(100vh - 64px); display: flex; flex-direction: column; background: var(--bg-modal); border-radius: 8px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), var(--shadow); animation: pop .15s ease-out; --cut: var(--bg-modal); }
.modal-x { position: absolute; top: 12px; right: 12px; color: var(--icon); opacity: .7; z-index: 1; }
.modal-x:hover { opacity: 1; }
.modal-head { padding: 16px; }
.modal-head h2 { font-size: 20px; font-weight: 600; color: var(--text-strong); padding-right: 24px; }
.modal-head p { color: var(--muted); font-size: 14px; margin-top: 8px; }
.modal-center .modal-head { text-align: center; padding: 24px 24px 0; }
.modal-center .modal-head h2 { font-size: 24px; font-weight: 700; padding: 0; }
.modal-center .modal-head p { font-size: 16px; }
.modal-body { padding: 0 16px 20px; overflow-y: auto; }
.modal-center .modal-body { padding: 24px 16px 16px; }
.modal-text { color: var(--text); line-height: 1.4; }
.modal-error { margin: -8px 16px 12px; color: #fa777c; font-size: 14px; }
.modal-foot { display: flex; align-items: center; gap: 8px; background: var(--bg-2); padding: 16px; border-radius: 0 0 8px 8px; }
.confirm-preview { margin-top: 12px; background: var(--bg-2); padding: 12px; border-radius: 4px; font-size: 14px; white-space: pre-wrap; word-break: break-word; box-shadow: 0 0 0 1px var(--line-soft); }
.option-card { width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border: 1px solid var(--line); border-radius: 8px; font-weight: 700; font-size: 16px; color: var(--text-strong); text-align: left; }
.option-card:hover { background: var(--hover); }
.option-card span { flex: 1; }
.opt-icon { color: var(--green); background: var(--bg-2); border-radius: 50%; padding: 6px; width: 48px; height: 48px; }
.modal-alt { background: var(--bg-2); margin: 16px -16px -16px; padding: 16px; text-align: center; }
.modal-alt h3 { font-size: 20px; font-weight: 600; color: var(--text-strong); margin-bottom: 8px; }
.upload-circle { width: 80px; height: 80px; margin: 0 auto 8px; border-radius: 50%; border: 2px dashed var(--icon); display: grid; place-items: center; position: relative; cursor: pointer; }
.upload-circle.big { width: 100px; height: 100px; border-style: solid; border-color: transparent; background: var(--brand); margin: 0; flex-shrink: 0; }
.upload-circle img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.upload-inner { display: flex; flex-direction: column; align-items: center; font-size: 11px; font-weight: 700; color: var(--icon); gap: 2px; }
.big-initials { font-size: 28px; color: #fff; font-weight: 500; }
.upload-plus { position: absolute; top: -2px; right: -2px; width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; }
.settings-row { display: flex; gap: 16px; align-items: center; margin-bottom: 8px; }
.settings-row p { margin: 0 0 8px; }
.danger-zone { display: flex; align-items: center; gap: 16px; justify-content: space-between; margin-top: 20px; padding: 12px; border: 1px solid rgba(242, 63, 67, .4); border-radius: 8px; }
.danger-zone p { font-size: 13px; color: var(--muted); margin-top: 2px; }
.radio-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--bg-2); border-radius: 4px; margin-bottom: 8px; cursor: pointer; color: var(--icon); }
.radio-card:hover { background: var(--bg-input); }
.radio-card input { display: none; }
.radio-card div { flex: 1; display: flex; flex-direction: column; }
.radio-card b { color: var(--text-strong); font-weight: 500; }
.radio-card small { font-size: 12px; color: var(--muted); }
.radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--icon); flex-shrink: 0; }
.radio-card:has(input:checked) { background: var(--bg-hover-2); color: var(--text); }
.radio-card input:checked ~ .radio { border: 6px solid #fff; }
.input-prefix { display: flex; align-items: center; background: var(--bg-input-dark); border-radius: 4px; padding-left: 10px; color: var(--icon); }
.input-prefix .input { padding-left: 6px; }
.name-emoji { display: grid; place-items: center; padding: 0 10px; align-self: stretch; color: var(--icon); }
.name-emoji:hover { color: var(--text-strong); }
.invite-modal .modal-body { padding-top: 4px; }
.invite-modal .search { margin-bottom: 8px; }
.invite-list { max-height: 200px; overflow-y: auto; margin: 0 -8px 12px; }
.invite-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 4px; }
.invite-row:hover { background: var(--hover); }
.invite-row span { font-weight: 500; }
.invite-row small { color: var(--muted); flex: 1; }
.copy-box { display: flex; align-items: center; background: var(--bg-input-dark); border-radius: 4px; padding-right: 4px; }
.copy-box .input { background: none; }
.invite-accept .modal-body { text-align: center; }
.ia-icon { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 16px; background: var(--brand); display: grid; place-items: center; font-weight: 600; font-size: 20px; overflow: hidden; color: var(--on-brand); }
.ia-icon img { width: 100%; height: 100%; object-fit: cover; }
.ia-sub { color: var(--muted); font-size: 14px; }
.invite-accept h2 { font-size: 24px; color: var(--text-strong); margin-top: 4px; }
.invite-accept .modal-foot { justify-content: center; }
.invite-accept .modal-foot .btn { width: 100%; }
.invite-accept .modal-foot .grow { display: none; }

/* quick switcher */
.quick-switcher { width: 570px; background: var(--bg-2); }
.quick-switcher .modal-x { display: none; }
.quick-switcher .modal-body { padding: 24px 32px 16px; }
.qs-input { width: 100%; height: 70px; background: var(--bg-3); border: 0; border-radius: 5px; padding: 0 16px; font-size: 22px; outline: none; }
.qs-list { margin-top: 12px; max-height: 320px; overflow-y: auto; }
.qs-list h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--muted); margin: 8px 0 4px; }
.qs-item { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 8px; border-radius: 4px; cursor: pointer; color: var(--muted); --cut: var(--bg-2); }
.qs-item.sel { background: var(--hover-2); color: var(--text); --cut: var(--bg-input); }
.qs-label { font-weight: 500; color: var(--text); }
.qs-sub { font-size: 12px; margin-left: auto; font-weight: 600; text-transform: uppercase; }
.qs-server { width: 20px; height: 20px; border-radius: 6px; background: var(--bg-1); font-size: 9px; display: grid; place-items: center; color: var(--text); }
.qs-empty { color: var(--muted); padding: 16px; text-align: center; }
.qs-tip { font-size: 12px; color: var(--muted); border-top: 1px solid var(--line-soft); margin-top: 16px; padding-top: 12px; }
.qs-tip b { color: var(--green); }

/* lightbox */
.lightbox { display: grid; place-items: center; }
.lb-inner { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: 90vw; max-height: 90vh; }
.lb-inner img { max-width: 90vw; max-height: 82vh; border-radius: 4px; object-fit: contain; }
.lb-open { color: #fff; opacity: .6; font-size: 14px; }
.lb-open:hover { opacity: 1; }

/* ------------------------------------------------------------------ context menu & popouts */
.ctx-menu { position: fixed; z-index: 1500; min-width: 188px; max-width: 320px; background: var(--bg-float); border-radius: 4px; padding: 6px 8px; box-shadow: 0 8px 16px rgba(0, 0, 0, .24), 0 0 0 1px rgba(255, 255, 255, .04); animation: pop .1s ease-out; --cut: var(--bg-float); }
.ctx-item { position: relative; display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 6px 8px; margin: 2px 0; border-radius: 2px; font-size: 14px; font-weight: 500; color: var(--icon); cursor: pointer; }
.ctx-item:hover { background: var(--brand); color: var(--on-brand); }
.ctx-item.danger { color: var(--red); }
.ctx-item.danger:hover { background: var(--red-btn); color: #fff; }
.ctx-item.brand { color: var(--link); }
.ctx-item.brand:hover { color: #fff; }
.ctx-item.disabled { opacity: .5; cursor: not-allowed; }
.ctx-item.disabled:hover { background: none; color: var(--icon); }
.ctx-label { flex: 1; }
.ctx-hint { font-size: 12px; opacity: .7; }
.ctx-sep { height: 1px; background: rgba(var(--tint-rgb), .16); margin: 4px 4px; }
/* submenus: an invisible bridge covers the gap so moving the mouse across it doesn't close the submenu,
   and closing waits a moment so a slightly diagonal move still reaches it */
.ctx-sub { display: block; visibility: hidden; opacity: 0; position: absolute; left: 100%; top: -6px; margin-left: 8px; transition: visibility 0s .25s, opacity .1s .15s; }
.ctx-sub::before { content: ''; position: absolute; top: 0; bottom: 0; left: -20px; width: 20px; }
.ctx-menu.ctx-scroll { max-height: calc(100vh - 16px); overflow-y: auto; overscroll-behavior: contain; }
.ctx-item:hover > .ctx-sub { visibility: visible; opacity: 1; transition-delay: 0s; }
.ctx-custom { padding: 0; }
.ctx-slider { padding: 6px 8px; }
.ctx-slider label { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 6px; }
.ctx-slider input { width: 100%; accent-color: var(--brand); }
.quick-reacts { display: flex; gap: 4px; padding: 4px; }
.quick-reacts button { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-2); font-size: 18px; display: grid; place-items: center; }
.quick-reacts button:hover { background: var(--bg-1); transform: scale(1.1); }
.server-dropdown { animation: dropIn .12s ease-out; }
@keyframes dropIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.status-menu { width: 300px; max-width: 300px; }
.status-row { display: flex; gap: 10px; padding: 8px; border-radius: 2px; font-size: 14px; font-weight: 500; color: var(--icon); cursor: pointer; align-items: flex-start; }
.status-row .status { margin-top: 4px; }
.status-row small { display: block; font-size: 12px; color: var(--muted); font-weight: 400; line-height: 1.3; margin-top: 2px; }
.status-row:hover { background: var(--brand); color: var(--on-brand); }
.status-row:hover small { color: rgba(var(--on-brand-rgb), .75); }
.status-profile { display: flex; gap: 12px; align-items: center; padding: 8px; cursor: pointer; border-radius: 4px; font-size: 14px; color: var(--muted); }
.status-profile b { color: var(--text-strong); font-size: 16px; }
.status-profile:hover { background: var(--hover); }

.popout { position: fixed; z-index: 1400; background: var(--bg-float); border-radius: 8px; box-shadow: 0 8px 16px rgba(0, 0, 0, .24), 0 0 0 1px rgba(255, 255, 255, .04); padding: 12px; animation: pop .12s ease-out; --cut: var(--bg-float); }
.popout.no-pad { padding: 0; }
.popout.pop-scroll { max-height: calc(100vh - 16px); overflow-y: auto; overscroll-behavior: contain; } /* (a window shorter than the popout) */

/* emoji picker */
.emoji-picker { width: 408px; height: 380px; display: flex; flex-direction: column; background: var(--bg-2); border-radius: 8px; overflow: hidden; }
.emoji-search { margin: 12px; height: 32px; border: 0; background: var(--bg-3); border-radius: 4px; padding: 0 8px; outline: none; font-size: 15px; }
.emoji-grid { flex: 1; overflow-y: auto; padding: 0 8px 8px 12px; display: grid; grid-template-columns: repeat(9, 40px); grid-auto-rows: 40px; align-content: start; }
.emoji-btn { font-size: 26px; border-radius: 4px; line-height: 1; }
.emoji-btn:hover { background: var(--hover-2); }
.emoji-empty { grid-column: 1 / -1; color: var(--muted); padding: 24px; text-align: center; }
.emoji-footer { height: 48px; flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 0 16px; background: var(--bg-float); font-weight: 600; color: var(--text-strong); }
.emoji-preview { font-size: 28px; }

/* group picker */
.group-picker { width: 440px; padding: 16px 16px 0; }
.group-picker h3 { font-size: 20px; font-weight: 600; color: var(--text-strong); }
.gp-count { font-size: 12px; color: var(--muted); margin: 4px 0 16px; }
.gp-search { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; background: var(--bg-3); border-radius: 4px; padding: 4px; }
.gp-search input { flex: 1; min-width: 120px; background: none; border: 0; outline: none; height: 30px; padding: 0 4px; font-size: 14px; }
.gp-chips { display: contents; }
.chip { display: inline-flex; align-items: center; gap: 4px; background: var(--bg-2); padding: 2px 6px; border-radius: 4px; font-size: 14px; cursor: pointer; }
.chip:hover { background: var(--bg-hover-2); }
.gp-list { max-height: 260px; overflow-y: auto; margin: 8px -8px 0; padding: 0 0 8px; border-bottom: 1px solid var(--line-soft); }
.gp-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 4px; cursor: pointer; margin: 0 8px; --cut: var(--bg-float); }
.gp-row:hover { background: var(--hover); --cut: var(--bg-hover); }
.gp-user { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.gp-user span { font-weight: 500; }
.gp-user small { color: var(--muted); }
.gp-row input { display: none; }
.checkbox { width: 22px; height: 22px; border-radius: 4px; border: 1px solid var(--faint); display: grid; place-items: center; color: transparent; }
.gp-row input:checked + .checkbox { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.gp-empty { color: var(--muted); padding: 20px; text-align: center; font-size: 14px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.gp-foot { padding: 16px 0; }

/* ------------------------------------------------------------------ settings */
.settings-layer { z-index: 400; background: var(--bg-1); animation: settingsIn .2s ease-out; }
@keyframes settingsIn { from { opacity: 0; transform: scale(1.04); } }
.settings { display: flex; height: 100%; }
.settings-nav { flex: 1 0 218px; background: var(--bg-2); display: flex; justify-content: flex-end; overflow-y: auto; }
.settings-nav-inner { width: 218px; padding: 60px 6px 60px 20px; }
.settings-nav h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--muted); padding: 6px 10px; letter-spacing: .02em; }
.sn-item { padding: 6px 10px; margin-bottom: 2px; border-radius: 4px; color: var(--icon); font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
.sn-item:hover { background: var(--hover); color: var(--text); }
.sn-item.active { background: var(--selected); color: #fff; }
.sn-item.danger { color: var(--red); }
.sn-sep { height: 1px; background: var(--line-soft); margin: 8px 10px; }
.sn-version { font-size: 12px; color: var(--muted); padding: 8px 10px; }
.settings-content { flex: 1 1 800px; display: flex; overflow-y: auto; position: relative; }
.settings-page { flex: 1; max-width: 740px; padding: 60px 40px 80px; user-select: text; }
.settings-page h2 { font-size: 20px; font-weight: 600; color: var(--text-strong); margin-bottom: 20px; }
.settings-page h3 { font-size: 16px; font-weight: 600; color: var(--text-strong); margin-bottom: 12px; }
.settings-close { position: sticky; top: 60px; height: max-content; padding: 0 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; color: var(--icon); font-size: 13px; font-weight: 600; }
.settings-close button { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--icon); display: grid; place-items: center; color: var(--icon); }
.settings-close button:hover { background: var(--hover); color: var(--text); border-color: var(--text); }
.settings-divider { height: 1px; background: var(--line-soft); margin: 32px 0; }
.account-card { background: var(--bg-3); border-radius: 8px; overflow: hidden; --cut: var(--bg-3); }
.ac-banner { height: 100px; background: var(--banner); }
.ac-head { display: flex; align-items: flex-end; gap: 16px; padding: 0 16px; margin-top: -36px; }
.ac-head .avatar { box-shadow: 0 0 0 7px var(--bg-3); }
.ac-head .avatar::after { display: none; }
.ac-name { flex: 1; font-size: 20px; font-weight: 600; color: var(--text-strong); padding-bottom: 4px; }
.ac-fields { background: var(--bg-2); margin: 16px; border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 24px; }
.ac-field { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.ac-fields .ac-field { margin: 0; }
.ac-field h5 { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.profile-editor { display: flex; gap: 32px; align-items: flex-start; }
.pe-form { flex: 1; min-width: 0; }
.pe-preview { position: sticky; top: 0; }
.pe-card .profile-card { box-shadow: var(--shadow); }
.row-gap { display: flex; gap: 12px; align-items: center; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch { width: 40px; height: 40px; border-radius: 4px; display: grid; place-items: center; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.swatch.none { background: var(--bg-3); color: var(--icon); }
.swatch.on { box-shadow: 0 0 0 2px var(--bg-1), 0 0 0 4px #fff; }
.swatch-custom { width: 40px; height: 40px; border: 0; padding: 0; background: none; cursor: pointer; }
/* sticks to the bottom of the settings page (not the window), so it never hides under the menu or covers the last fields */
.save-bar { position: sticky; bottom: 20px; margin-top: 24px; width: 100%; background: var(--bg-float); border-radius: 8px; padding: 10px 10px 10px 16px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow); animation: saveIn .25s cubic-bezier(.2, 1.4, .5, 1); z-index: 5; }
.save-bar span { flex: 1; font-weight: 500; }
@keyframes saveIn { from { transform: translateY(40px); opacity: 0; } }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-2 .field-label { margin-top: 0; }
.mic-test { display: flex; align-items: center; gap: 16px; }
.meter { flex: 1; height: 10px; border-radius: 5px; background: var(--btn-grey); position: relative; overflow: hidden; }
.meter-fill { height: 100%; width: 0; background: var(--yellow); transition: width .05s linear; }
.meter-fill.hot { background: var(--green); }
.meter-th { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; }
.range { width: 100%; accent-color: var(--brand); }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.toggle-row input { display: none; }
.tr-label { font-weight: 500; color: var(--text-strong); }
.tr-desc { font-size: 14px; color: var(--muted); margin-top: 4px; }
.switch { width: 40px; height: 24px; border-radius: 12px; background: var(--faint); position: relative; flex-shrink: 0; transition: background .15s; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.toggle-row input:checked + .switch { background: var(--green); }
.toggle-row input:checked + .switch::after { transform: translateX(16px); }
.video-preview { position: relative; aspect-ratio: 16 / 9; background: var(--bg-3); border-radius: 8px; overflow: hidden; margin-bottom: 8px; max-width: 520px; }
.video-preview video { width: 100%; height: 100%; object-fit: cover; }
.vp-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: var(--btn-grey); }
.notice { display: flex; gap: 12px; align-items: center; background: rgba(var(--brand-rgb), .1); border: 1px solid var(--brand); border-radius: 8px; padding: 12px 16px; font-size: 14px; margin-bottom: 16px; color: var(--text); }
.pos-picker { display: flex; gap: 12px; }
.pos { width: 96px; height: 60px; border-radius: 6px; background: var(--bg-3); position: relative; border: 2px solid transparent; }
.pos span { position: absolute; width: 28px; height: 16px; border-radius: 3px; background: var(--btn-grey); }
.pos.top-left span { top: 6px; left: 6px; }
.pos.top-right span { top: 6px; right: 6px; }
.pos.bottom-left span { bottom: 6px; left: 6px; }
.pos.bottom-right span { bottom: 6px; right: 6px; }
.pos.on { border-color: var(--brand); }
.pos.on span { background: var(--brand); }
.keybinds { display: flex; flex-direction: column; }
.kb-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.kb-row span:first-child { flex: 1; color: var(--text-strong); font-weight: 500; }
.kb-scope { font-size: 12px; color: var(--muted); text-transform: uppercase; font-weight: 700; }
.kb-row kbd { font-size: 13px; padding: 3px 8px; min-width: 60px; text-align: center; }

/* screen share picker (desktop) */
.screen-picker { width: 640px; }
.sp-tabs { display: flex; gap: 4px; margin-bottom: 16px; }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; max-height: 50vh; overflow-y: auto; }
.sp-item { display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 8px; border: 2px solid transparent; background: var(--bg-2); text-align: left; }
.sp-item:hover { background: var(--bg-hover-2); }
.sp-item.on { border-color: var(--brand); }
.sp-item > img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #000; border-radius: 4px; }
.sp-item span { font-size: 13px; display: flex; gap: 6px; align-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sp-item span img { width: 16px; height: 16px; }
.sp-audio { margin-top: 14px; }

/* ------------------------------------------------------------------ profiles */
.pf { --pf-bg: var(--bg-4); --pf-card: var(--bg-hover); --pf-card-hover: var(--bg-input); --cut: var(--pf-bg); background: var(--pf-bg); color: var(--text); user-select: text; position: relative; }
/* supporter tiers: the name style, the settings page, the admin control */
/* a styled name is its own little box: its slant and effects stop at the name, not the crown or badges after it */
.nm { display: inline-block; white-space: nowrap; flex-shrink: 0; padding-right: .12em; }
[data-nf="serif"] { font-family: ui-serif, Georgia, 'Times New Roman', serif; }
[data-nf="mono"] { font-family: ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace; letter-spacing: -.02em; }
[data-nf="script"] { font-family: 'Segoe Script', 'Brush Script MT', 'Snell Roundhand', 'Apple Chancery', cursive; }
[data-nf="bolditalic"] { font-style: italic; font-weight: 800; }
[data-nf="wide"] { letter-spacing: .14em; text-transform: uppercase; font-size: .9em; }
[data-nf="caps"] { font-variant: small-caps; letter-spacing: .05em; }
[data-ng] { background: linear-gradient(90deg, var(--n1), var(--n2)); -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; }
[data-nf="rounded"] { font-family: ui-rounded, 'SF Pro Rounded', 'Varela Round', 'Arial Rounded MT Bold', 'Comic Sans MS', sans-serif; font-weight: 700; }
[data-nf="heavy"] { font-family: Impact, 'Arial Black', 'Haettenschweiler', sans-serif; font-weight: 900; letter-spacing: .02em; }
[data-nf="elegant"] { font-family: 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif; font-style: italic; letter-spacing: .03em; }
[data-nf="thin"] { font-weight: 300; letter-spacing: .08em; }
[data-nf="retro"] { font-family: 'Courier New', ui-monospace, monospace; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
[data-nf="outline"]:not([data-ng]) { -webkit-text-stroke: 1px currentColor; -webkit-text-fill-color: transparent; font-weight: 800; }
/* a moving name (Efsane). Works with and without the two colours: with them, the colours are what moves */
[data-na="glow"] { filter: drop-shadow(0 0 5px var(--n1, rgba(255, 255, 255, .55))); }
[data-na="shimmer"]:not([data-ng]) { background: linear-gradient(100deg, currentColor 40%, #fff 50%, currentColor 60%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: naShine 2.6s linear infinite; }
[data-na="shimmer"][data-ng] { background-image: linear-gradient(90deg, var(--n1), var(--n2), #fff, var(--n2), var(--n1)); background-size: 250% 100%; animation: naShine 3s linear infinite; }
[data-na="rainbow"] { background: linear-gradient(90deg, #ff5f6d, #ffc371, #f9f871, #5cff9d, #4cc9ff, #8c7bff, #ff6bd6, #ff5f6d) !important; background-size: 300% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent; color: transparent !important; animation: naShine 4s linear infinite; }
[data-na="pulse"] { animation: naPulse 2.2s ease-in-out infinite; }
[data-na="neon"] { animation: naNeon 3.5s linear infinite; }
[data-na="wave"] { display: inline-block; animation: naWave 2.4s ease-in-out infinite; }
[data-na="wave"][data-ng] { background-size: 200% 100%; animation: naWave 2.4s ease-in-out infinite, naShine 4s linear infinite; }
@keyframes naShine { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@keyframes naPulse { 0%, 100% { opacity: 1; filter: none; } 50% { opacity: .72; filter: drop-shadow(0 0 6px var(--n1, rgba(255, 255, 255, .6))); } }
@keyframes naNeon { 0%, 18%, 22%, 60%, 64%, 100% { filter: drop-shadow(0 0 2px var(--n1, #fff)) drop-shadow(0 0 7px var(--n2, #4cc9ff)); opacity: 1; } 20%, 62% { filter: none; opacity: .6; } }
@keyframes naWave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } /* (a soft float, no tilting) */
@media (prefers-reduced-motion: reduce) { [data-na] { animation: none !important; } }
/* Admin Panel → Admins */
.adm-add .input { flex: 1; max-width: 280px; }
.adm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 14px; }
.adm-card { background: var(--bg-input-dark); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line-soft); }
.adm-card.founder { border-color: #ffd24a66; }
.adm-card-top { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.adm-card-who { display: flex; align-items: center; gap: 10px; text-align: left; min-width: 0; }
.adm-card-who span { display: flex; flex-direction: column; min-width: 0; }
.adm-card-who b { color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-card-who small { color: var(--muted); font-size: 12px; }
.adm-role { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; background: var(--bg-3); color: var(--brand-text); flex-shrink: 0; }
.adm-card.founder .adm-role { color: #ffd24a; }
.adm-card-stats { font-size: 12px; color: var(--muted); }
.adm-on { color: var(--green, #57d38c); font-weight: 700; }
.adm-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.adm-chip { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; background: var(--bg-3); color: var(--text); }
.adm-chip.all { color: #ffd24a; }
.adm-edit summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-link, var(--brand-text)); display: inline-flex; align-items: center; gap: 6px; list-style: none; }
.adm-edit summary::-webkit-details-marker { display: none; }
.adm-edit[open] { display: flex; flex-direction: column; gap: 10px; }
.adm-edit .adm-perms { max-height: 320px; overflow-y: auto; }
/* Admin Panel → Supporters */
.sup-tabs { flex-wrap: wrap; }
.sup-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.sup-row { border-radius: 10px; background: var(--bg-input-dark); border-left: 3px solid var(--tc); }
.sup-row summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; flex-wrap: wrap; }
.sup-row summary::-webkit-details-marker { display: none; }
.sup-row[open] summary { border-bottom: 1px solid var(--line-soft); }
.sup-main { display: flex; flex-direction: column; min-width: 120px; flex: 1; }
.sup-main b { color: var(--text-strong); }
.sup-main small { color: var(--muted); font-size: 12px; }
.sup-tier { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: 13px; color: var(--tc); }
.sup-src { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text); flex-wrap: wrap; }
.sup-src code { font-size: 11px; padding: 1px 5px; border-radius: 4px; background: var(--bg-3); }
.sup-src.k-stripe { color: #57d38c; }
.sup-src.k-invites { color: var(--brand-text); }
.sup-dates { font-size: 12px; color: var(--muted); margin-left: auto; }
.sup-more { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--text); align-items: flex-start; }
.sup-log { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.sup-when { color: var(--muted); font-size: 12px; display: inline-block; min-width: 90px; }
.mention.role-mention { color: var(--rc); background: color-mix(in srgb, var(--rc) 18%, transparent); }
.mention.role-mention:hover { background: color-mix(in srgb, var(--rc) 30%, transparent); }
.ac-role-dot { width: 14px; height: 14px; border-radius: 50%; margin: 0 5px; flex-shrink: 0; display: inline-block; }
.adm-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: var(--bg-input-dark); }
.adm-sub b { display: inline-flex; align-items: center; gap: 6px; }
.adm-sub select { width: 150px; } .adm-sub input { width: 90px; }
.sub-hint { display: flex; align-items: center; gap: 6px; color: var(--brand-text); }
.sub-now { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; background: var(--bg-input-dark); margin-bottom: 8px; }
.sub-now .ic { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: rgba(0, 0, 0, .25); flex-shrink: 0; }
.sub-now b { font-size: 18px; display: block; }
.sub-beta { display: inline-block; padding: 2px 9px; border-radius: 10px; background: var(--brand); color: var(--on-brand); font-size: 11px; font-weight: 800; margin-left: 8px; vertical-align: 2px; }
.sub-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 14px 0; }
.sub-card { border-radius: 14px; padding: 14px 16px; background: var(--bg-2); border: 2px solid transparent; }
.sub-card.on { border-color: var(--tc); }
.sub-card h4 { display: flex; align-items: center; gap: 8px; font-size: 17px; color: var(--tc); margin-bottom: 2px; }
.sub-card .sub-price { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.sub-card ul { list-style: none; display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.sub-card li { display: flex; gap: 6px; }
.sub-card li::before { content: '✓'; color: var(--tc); font-weight: 800; }
.sub-acts { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; }
.sub-acts > .btn:only-child { width: 100%; }
.sub-cur { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 13px; color: var(--tc); }
.sub-buy { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 12px; background: var(--bg-input-dark); color: var(--tc); margin-bottom: 10px; }
.sub-buy b { display: block; font-size: 20px; }
.sub-buy span { color: var(--muted); font-size: 14px; }
.sub-test { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: rgba(240, 178, 50, .14); color: #f0b232; font-size: 13px; margin-top: 12px; }
.sub-test .ic { flex-shrink: 0; margin-top: 1px; }
.sub-gift .input { flex: 1; min-width: 120px; } .sub-gift select.input { flex: 0 0 190px; }
/* profile effects (Efsane): a soft moving layer over the profile card; it never catches clicks */
.pf.fx::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; }
.pf.fx > * { position: relative; z-index: 2; }
.pf.fx-sparkle::after { background-image: radial-gradient(circle, rgba(255,255,255,.9) 0 1.2px, transparent 1.6px), radial-gradient(circle, rgba(255,231,150,.9) 0 1.4px, transparent 1.8px), radial-gradient(circle, rgba(255,255,255,.7) 0 1px, transparent 1.4px);
  background-size: 90px 110px, 130px 150px, 60px 70px; background-position: 10px 20px, 50px 80px, 30px 40px; animation: fxTwinkle 3.2s ease-in-out infinite alternate; }
.pf.fx-snow::after { background-image: radial-gradient(circle, rgba(255,255,255,.85) 0 1.6px, transparent 2px), radial-gradient(circle, rgba(255,255,255,.6) 0 1.1px, transparent 1.5px), radial-gradient(circle, rgba(255,255,255,.45) 0 2.2px, transparent 2.6px);
  background-size: 70px 90px, 45px 60px, 120px 140px; animation: fxSnow 9s linear infinite; }
.pf.fx-aurora::after { background: linear-gradient(115deg, transparent 20%, rgba(120,255,200,.20) 38%, rgba(120,170,255,.22) 50%, rgba(220,130,255,.18) 62%, transparent 80%); background-size: 260% 100%; mix-blend-mode: screen; animation: fxAurora 7s ease-in-out infinite alternate; }
@keyframes fxTwinkle { from { opacity: .25; } to { opacity: .95; } }
@keyframes fxSnow { from { background-position: 0 0, 0 0, 0 0; } to { background-position: 30px 360px, -20px 240px, 15px 420px; } }
@keyframes fxAurora { from { background-position: 0% 0; } to { background-position: 100% 0; } }
/* more effects: each is a picture pattern (SVG) or soft dots that drift over the card */
.pf.fx-hearts::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='140'%3E%3Cg fill='%23ff6b9a' fill-opacity='.55'%3E%3Cpath d='M20 30c-6-8-18-3-14 6 3 6 14 12 14 12s11-6 14-12c4-9-8-14-14-6z'/%3E%3Cpath transform='translate(70 85) scale(.6)' d='M20 30c-6-8-18-3-14 6 3 6 14 12 14 12s11-6 14-12c4-9-8-14-14-6z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 140px; animation: fxRise 10s linear infinite; }
.pf.fx-stars::after { background-image: radial-gradient(circle, #fff 0 1px, transparent 1.5px), radial-gradient(circle, rgba(200,210,255,.9) 0 1.3px, transparent 1.8px), radial-gradient(circle, rgba(255,255,255,.6) 0 .8px, transparent 1.2px), linear-gradient(180deg, rgba(40,30,110,.35), rgba(10,10,40,.1) 60%, transparent);
  background-size: 53px 61px, 97px 89px, 31px 37px, 100% 100%; background-position: 7px 11px, 40px 20px, 15px 5px, 0 0; animation: fxTwinkle 2.4s ease-in-out infinite alternate; }
.pf.fx-embers::after { background-image: radial-gradient(circle, rgba(255,170,60,.95) 0 1.6px, transparent 2.4px), radial-gradient(circle, rgba(255,90,40,.8) 0 1.2px, transparent 2px), radial-gradient(circle, rgba(255,220,120,.7) 0 1px, transparent 1.6px), linear-gradient(0deg, rgba(255,80,20,.18), transparent 45%);
  background-size: 80px 110px, 55px 75px, 120px 150px, 100% 100%; animation: fxEmbers 7s linear infinite; }
.pf.fx-rain::after { background-image: linear-gradient(170deg, transparent 0 46%, rgba(170,200,255,.55) 48%, transparent 50%), linear-gradient(170deg, transparent 0 46%, rgba(170,200,255,.35) 48%, transparent 50%);
  background-size: 22px 46px, 35px 70px; animation: fxRain .9s linear infinite; }
.pf.fx-bubbles::after { background-image: radial-gradient(circle, transparent 0 5px, rgba(160,230,255,.55) 5.5px 6.5px, transparent 7px), radial-gradient(circle, transparent 0 3px, rgba(200,240,255,.45) 3.5px 4.3px, transparent 4.8px), radial-gradient(circle, transparent 0 8px, rgba(160,210,255,.35) 8.5px 9.5px, transparent 10px);
  background-size: 90px 120px, 60px 80px, 140px 190px; background-position: 10px 0, 40px 30px, 70px 60px; animation: fxRise 12s linear infinite; }
.pf.fx-confetti::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='160'%3E%3Crect x='10' y='12' width='7' height='4' fill='%23ff5f6d' transform='rotate(25 13 14)'/%3E%3Crect x='70' y='40' width='6' height='4' fill='%23ffc371' transform='rotate(-30 73 42)'/%3E%3Crect x='112' y='20' width='7' height='4' fill='%234cc9ff' transform='rotate(60 115 22)'/%3E%3Crect x='40' y='95' width='6' height='4' fill='%235cff9d' transform='rotate(10 43 97)'/%3E%3Crect x='95' y='120' width='7' height='4' fill='%23c86bff' transform='rotate(-55 98 122)'/%3E%3Ccircle cx='25' cy='140' r='2.5' fill='%23ffe066'/%3E%3C/svg%3E");
  background-size: 140px 160px; opacity: .85; animation: fxFall 8s linear infinite; }
.pf.fx-sakura::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='170'%3E%3Cg fill='%23ffb7d0' fill-opacity='.75'%3E%3Cellipse cx='20' cy='20' rx='6' ry='3.5' transform='rotate(30 20 20)'/%3E%3Cellipse cx='95' cy='70' rx='5' ry='3' transform='rotate(-40 95 70)'/%3E%3Cellipse cx='50' cy='130' rx='6' ry='3.5' transform='rotate(70 50 130)'/%3E%3Cellipse cx='130' cy='150' rx='4' ry='2.5' transform='rotate(10 130 150)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 150px 170px; animation: fxSakura 12s linear infinite; }
.pf.fx-neon::after { box-shadow: inset 0 0 0 2px rgba(255, 80, 200, .8), inset 0 0 18px rgba(80, 200, 255, .45); animation: fxNeon 4s linear infinite; }
@keyframes fxRise { from { background-position: 0 0, 0 0, 0 0; } to { background-position: 0 -280px, 0 -160px, 0 -380px; } }
@keyframes fxEmbers { from { background-position: 0 0, 0 0, 0 0, 0 0; } to { background-position: 20px -330px, -15px -225px, 10px -450px, 0 0; } }
@keyframes fxRain { from { background-position: 0 0, 0 0; } to { background-position: -8px 46px, -12px 70px; } }
@keyframes fxFall { from { background-position: 0 0; } to { background-position: 40px 320px; } }
@keyframes fxSakura { from { background-position: 0 0; } to { background-position: 150px 340px; } }
@keyframes fxNeon { 0%, 100% { filter: hue-rotate(0deg); } 50% { filter: hue-rotate(160deg); } }
@media (prefers-reduced-motion: reduce) { .pf.fx::after { animation: none; } }
/* UnTidl Destekçi: the page on Home */
.friends.sub-tab { padding: 0; overflow-y: auto; display: block; }
.chat-body:has(.sub-tab) .active-now { display: none; }
.sb-nav.sb-sub { color: #f4a6d7; }
.sb-nav.sb-sub.active, .sb-nav.sb-sub:hover { color: #ffd0ee; }
/* Home → Davet Et (invites) */
.inv-page { max-width: 860px; margin: 0 auto; padding: 0 24px 48px; }
.inv-hero { margin: 0 -24px; padding: 44px 24px 34px; text-align: center; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 12px;
  background: radial-gradient(120% 140% at 20% 0%, #5b7f1f 0%, transparent 55%), radial-gradient(120% 140% at 90% 10%, #3a5fbf 0%, transparent 50%), linear-gradient(135deg, #24331a, #1d2436); }
.inv-hero-ic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); }
.inv-hero h1 { font-size: clamp(24px, 4vw, 36px); font-weight: 900; letter-spacing: -.01em; }
.inv-hero p { max-width: 560px; opacity: .92; font-size: 15px; }
.inv-link { display: flex; gap: 8px; width: min(520px, 100%); }
.inv-link .input { flex: 1; min-width: 0; background: rgba(0,0,0,.35); color: #fff; border: 1px solid rgba(255,255,255,.18); font-weight: 600; }
.inv-link .btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; }
.inv-code { font-size: 14px; opacity: .95; }
.inv-code b { letter-spacing: .08em; }
.inv-code .btn-link { color: #fff; text-decoration: underline; }
.inv-dot { opacity: .5; margin: 0 4px; }
.inv-hero .inv-fine { font-size: 12px; opacity: .7; }
.inv-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 20px 0 8px; }
.inv-stats > div { background: var(--bg-input-dark); border-radius: 12px; padding: 14px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.inv-stats b { font-size: 26px; font-weight: 900; color: var(--text-strong); }
.inv-stats span { font-size: 12px; color: var(--muted); font-weight: 600; }
.inv-h { font-size: 13px; font-weight: 800; letter-spacing: .06em; color: var(--muted); margin: 26px 0 10px; }
.inv-rewards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.inv-reward { border-radius: 14px; padding: 16px; background: var(--bg-input-dark); border: 2px solid color-mix(in srgb, var(--tc) 45%, transparent); display: flex; flex-direction: column; gap: 12px; }
.inv-rw-top { display: flex; align-items: center; gap: 12px; color: var(--tc); }
.inv-rw-top b { display: block; font-size: 17px; color: var(--text-strong); }
.inv-rw-top small { color: var(--muted); font-size: 13px; }
.inv-bar { height: 8px; border-radius: 6px; background: var(--bg-3); overflow: hidden; }
.inv-bar i { display: block; height: 100%; background: var(--tc); border-radius: inherit; }
.inv-rw-foot { display: flex; align-items: center; justify-content: space-between; font-weight: 700; color: var(--text); }
.inv-log { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--text); }
.inv-log > div { display: flex; align-items: center; gap: 6px; }
.inv-log small { color: var(--muted); }
.inv-lb { display: flex; flex-direction: column; gap: 4px; }
.inv-lb-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px; background: var(--bg-input-dark); cursor: pointer; }
.inv-lb-row:hover { background: var(--bg-hover); }
.inv-lb-row.me { outline: 2px solid var(--brand); }
.inv-lb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--text-strong); }
.inv-lb-row > b { font-size: 16px; color: var(--text-strong); }
.inv-rank { width: 26px; text-align: center; font-weight: 900; color: var(--muted); }
.inv-rank.r1 { color: #ffd24a; } .inv-rank.r2 { color: #c0c7d1; } .inv-rank.r3 { color: #cd7f32; }
.inv-founder { background: var(--bg-input-dark); border-radius: 12px; padding: 14px; }
.inv-founder .row-gap .input { flex: 1; min-width: 0; }
@media (max-width: 600px) { .inv-stats b { font-size: 20px; } .inv-link { flex-direction: column; } }
.nitro { max-width: 1040px; margin: 0 auto; padding: 0 24px 48px; }
.nt-hero { position: relative; overflow: hidden; margin: 0 -24px; padding: 54px 24px 44px; text-align: center; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 14px;
  background: radial-gradient(90% 120% at 50% 0%, #c44fd8 0%, #7b3fd1 38%, rgba(60, 30, 110, .85) 62%, transparent 100%), linear-gradient(180deg, #2a1648, var(--bg-1) 96%); }
.nt-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: .02em; opacity: .95; }
.nt-hero h1 { font-size: clamp(26px, 4.6vw, 46px); font-weight: 900; font-style: italic; line-height: 1.05; letter-spacing: -.01em; max-width: 760px; display: inline-flex; align-items: center; gap: 12px; text-shadow: 0 3px 18px rgba(0, 0, 0, .35); }
.nt-status { font-size: 15px; opacity: .9; }
.nt-fine { font-size: 12px; opacity: .75; }
.nt-cta { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.nt-cta .btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 20px; border-radius: 10px; font-weight: 700; font-size: 15px; }
.nt-white { background: #fff; color: #23133f; box-shadow: 0 6px 22px rgba(255, 255, 255, .28); }
.nt-white:hover:not(:disabled) { background: #f1e9ff; }
.nt-ghost { background: rgba(255, 255, 255, .16); color: #fff; }
.nt-ghost:hover:not(:disabled) { background: rgba(255, 255, 255, .26); }
.nt-cta .btn:disabled { opacity: .55; cursor: not-allowed; }
.nt-end { font-size: 12.5px; color: rgba(255, 255, 255, .7); text-decoration: underline; margin-top: 2px; }
.nt-end:hover { color: #ffb4b4; }
.nt-shape { position: absolute; border-radius: 30%; opacity: .7; filter: blur(.3px); animation: ntFloat 7s ease-in-out infinite alternate; pointer-events: none; }
.nt-shape.s1 { width: 56px; height: 56px; left: 9%; top: 22%; background: linear-gradient(135deg, #ff7ad9, #7b5cff); transform: rotate(18deg); }
.nt-shape.s2 { width: 34px; height: 34px; left: 22%; bottom: 16%; background: linear-gradient(135deg, #ffd24a, #ff7ad9); border-radius: 50%; animation-delay: -2s; }
.nt-shape.s3 { width: 70px; height: 70px; right: 10%; top: 30%; background: linear-gradient(135deg, #6ee7ff, #7b5cff); transform: rotate(-14deg); animation-delay: -4s; }
.nt-shape.s4 { width: 26px; height: 26px; right: 24%; top: 14%; background: linear-gradient(135deg, #a1c349, #6ee7ff); border-radius: 50%; animation-delay: -1s; }
@keyframes ntFloat { from { translate: 0 -8px; } to { translate: 0 10px; } }
@media (prefers-reduced-motion: reduce) { .nt-shape { animation: none; } }
.nt-h { text-align: center; font-size: 24px; font-weight: 900; font-style: italic; letter-spacing: .01em; margin: 40px 0 18px; color: var(--text-strong); }
.nt-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.nt-feat { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 14px; background: var(--bg-2); }
.nt-feat .ic { color: #d58cff; margin-bottom: 4px; }
.nt-feat span { font-size: 13px; color: var(--muted); }
.nt-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; align-items: stretch; }
.nt-plan { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 20px 18px 18px; border-radius: 16px; background: var(--bg-2); border: 2px solid transparent; }
.nt-plan.popular { background: linear-gradient(160deg, rgba(196, 79, 216, .22), var(--bg-2) 55%); }
.nt-plan.on { border-color: var(--tc); }
/* Efsane's bonus: the free bronze gift every month */
.plan-bonus { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; text-align: left; color: #f3c79b;
  background: linear-gradient(135deg, rgba(205, 127, 50, .28), rgba(205, 127, 50, .08)); border: 1px solid rgba(205, 127, 50, .6); box-shadow: 0 0 18px rgba(205, 127, 50, .18); }
.plan-bonus > .ic { flex-shrink: 0; margin-top: 1px; animation: bonusWiggle 2.8s ease-in-out infinite; }
.plan-bonus b { display: block; font-size: 13.5px; color: #ffd9b0; }
.plan-bonus small { display: block; font-size: 12px; line-height: 1.35; color: #e8bf98; opacity: .9; }
@keyframes bonusWiggle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-12deg); } 90% { transform: rotate(10deg); } 95% { transform: rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) { .plan-bonus > .ic { animation: none; } }
.nt-plan h4 { display: flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 900; font-style: italic; color: var(--tc); }
.plan-price { color: var(--muted); font-size: 14px; }
.price-was { color: var(--muted); font-weight: 600; text-decoration-thickness: 2px; text-decoration-color: #f23f43; margin-right: 2px; }
.plan-price .price-was { font-size: 17px; }
.price-off { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #f23f43; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .02em; vertical-align: 3px; margin-left: 4px; }
.plan-price b { font-size: 26px; color: var(--text-strong); margin-right: 2px; }
.nt-plan ul { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; flex: 1; margin: 6px 0 10px; }
.nt-plan li { display: flex; gap: 7px; }
.nt-plan li::before { content: '✓'; color: var(--tc); font-weight: 800; }
.plan-pop { position: absolute; top: -11px; left: 50%; translate: -50% 0; padding: 3px 12px; border-radius: 12px; background: #2a1648; color: #e9c9ff; border: 1px solid #c44fd8; font-size: 11px; font-weight: 800; letter-spacing: .05em; white-space: nowrap; }
.nt-box { padding: 18px; border-radius: 14px; background: var(--bg-2); }
.free-gift select.input { flex: 1 1 130px; } .free-gift input.input { flex: 0 0 90px; }
.free-nogift { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--muted); cursor: pointer; }
.free-nogift input { margin-top: 2px; accent-color: var(--brand); flex-shrink: 0; }
.gift-self { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; }
.gift-list { display: flex; flex-direction: column; gap: 6px; }
.gift-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--bg-input-dark); }
.gift-row > .ic { color: var(--tc); flex-shrink: 0; }
.gift-row .grow { display: flex; flex-direction: column; min-width: 0; }
.gift-row b { color: var(--tc); }
.gift-row code { font-size: 13px; color: var(--muted); letter-spacing: .04em; user-select: all; }
.gift-row.used { opacity: .6; }
.gift-code { text-align: center; font-size: 22px; font-weight: 800; letter-spacing: .08em; padding: 16px; border-radius: 12px; background: var(--bg-input-dark); margin-bottom: 10px; user-select: all; }
/* "Plan seç" and "Ödeme" */
.plan-modal { width: min(94vw, 480px); }
.plan-pick { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.plan-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 14px; background: var(--bg-input-dark); border: 2px solid transparent; text-align: left; transition: border-color .12s, transform .12s; }
.plan-card.popular { background: linear-gradient(150deg, rgba(196, 79, 216, .35), rgba(123, 63, 209, .18) 60%, var(--bg-input-dark)); }
.plan-card:hover { border-color: var(--tc); transform: translateY(-2px); }
.plan-name { display: flex; align-items: center; gap: 8px; font-size: 24px; font-weight: 900; font-style: italic; color: var(--tc); }
.plan-list { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line-soft); font-size: 13.5px; }
.plan-list span { display: flex; align-items: center; gap: 8px; }
.pay-modal { width: min(94vw, 460px); }
.pay-plan { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 12px; background: var(--bg-input-dark); border: 2px solid var(--tc); margin-bottom: 12px; }
.pay-plan > .ic { color: var(--tc); flex-shrink: 0; }
.pay-plan > div { flex: 1; display: flex; flex-direction: column; }
.pay-plan > div b { font-size: 19px; font-weight: 900; font-style: italic; color: var(--tc); }
.pay-plan > div span { font-size: 13px; color: var(--muted); }
.pay-amount { font-size: 18px; }
.pay-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); font-weight: 700; }
.pay-total b { font-size: 22px; }
.pay-note { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.gift-embed { margin-top: 4px; min-height: 70px; }
body.mobile .nitro { padding: 0 12px 32px; } body.mobile .nt-hero { margin: 0 -12px; padding: 34px 14px 30px; } body.mobile .nt-h { font-size: 20px; margin: 30px 0 14px; }
/* unread count in the DM list, story likes, swipe to reply */
.dm-item .dm-unread { margin-left: auto; flex-shrink: 0; }
.sv-like { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, .4); flex-shrink: 0; }
.sv-like.on { color: #ff4d6d; }
.sv-like.pop .ic { animation: bump .35s ease; }
/* the reply row of a story: one line, everything 42px high: [ text ........ GIF ] (send) (heart) (share) */
.story-view .sv-foot { display: flex; align-items: center; gap: 8px; padding: 34px 12px 14px; }
.story-view .sv-reply { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.sv-box { flex: 1; min-width: 0; height: 42px; display: flex; align-items: center; gap: 6px; padding: 0 6px 0 16px; border-radius: 21px; background: rgba(0, 0, 0, .5); border: 1px solid rgba(255, 255, 255, .3); backdrop-filter: blur(6px); }
.sv-box:focus-within { border-color: rgba(255, 255, 255, .7); }
.sv-box input { flex: 1; min-width: 0; height: 100%; padding: 0; background: none; border: 0; outline: 0; color: #fff; font-size: 15px; }
.sv-box input::placeholder { color: rgba(255, 255, 255, .7); }
.sv-gifbtn { flex-shrink: 0; height: 28px; padding: 0 10px; border-radius: 14px; background: rgba(255, 255, 255, .18); color: #fff; font-weight: 800; font-size: 11px; letter-spacing: .04em; }
.sv-gifbtn:hover { background: rgba(255, 255, 255, .32); }
.sv-send { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--on-brand); }
.sv-send:hover { background: var(--brand-hover); }
.story-view .sv-foot .sv-like { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: rgba(0, 0, 0, .5); border: 1px solid rgba(255, 255, 255, .3); }
.story-view .sv-foot .sv-share { flex-shrink: 0; height: 42px; padding: 0 16px; border-radius: 21px; font-size: 14px; gap: 6px; margin-left: 0; }
.story-view .sv-foot .sv-views + .sv-share { margin-left: auto; }
.story-view .sv-foot .sv-reply ~ .sv-share { width: 42px; padding: 0; justify-content: center; font-size: 0; gap: 0; background: rgba(0, 0, 0, .5); border: 1px solid rgba(255, 255, 255, .3); color: #fff; }
.story-view .sv-foot .sv-reply ~ .sv-share:hover { background: rgba(0, 0, 0, .7); }
.sv-views .ic { vertical-align: -3px; }
.sv-liked { margin-left: auto; color: #ff4d6d; display: inline-flex; }
#messages .msg.swiping { transition: none; position: relative; }
#messages .msg.swiping::before { content: '↩'; position: absolute; left: -46px; top: 50%; translate: 0 -50%; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-2); color: var(--muted); font-size: 18px; }
#messages .msg.swipe-ready::before { background: var(--brand); color: var(--on-brand); }
#messages .msg { transition: transform .15s ease; }
/* Emoji Jump (a single-emoji message, clicked) */
.msg-content.jumbo img.emoji { cursor: pointer; }
.ej-layer { z-index: 900; background: rgba(0, 0, 0, .75); display: grid; place-items: center; padding: 12px; }
.ej-box { position: relative; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.ej-top { width: 100%; display: flex; align-items: center; gap: 10px; color: #fff; }
.ej-top b { font-size: 16px; }
.ej-score { margin-left: auto; font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; }
.ej-x { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .12); }
.ej-box canvas { width: min(360px, 92vw, calc((100vh - 120px) * .6)); aspect-ratio: 360 / 600; border-radius: 14px; touch-action: none; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.ej-over { position: absolute; left: 50%; top: 45%; translate: -50% -50%; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 26px; border-radius: 14px; background: rgba(10, 14, 10, .88); color: #fff; text-align: center; }
.ej-over[hidden] { display: none; }
.ej-over b { font-size: 20px; }
.ej-over span { color: rgba(255, 255, 255, .7); }
.ej-help { color: rgba(255, 255, 255, .6); font-size: 12px; }
/* a gift in a chat */
/* a gift in chat, like Discord's: text and button on the left, the tier's artwork on the right */
.gift-box { display: flex; width: 520px; max-width: 100%; min-height: 150px; margin-top: 4px; border-radius: 10px; overflow: hidden; background: var(--bg-2); border: 1px solid var(--line-soft); }
.gift-box .gb-left { flex: 1; min-width: 0; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.gift-box h4 { font-size: 16px; font-weight: 800; color: var(--text-strong); line-height: 1.25; }
.gift-box p { font-size: 14px; color: var(--text); line-height: 1.35; }
.gift-box p b { color: var(--text-strong); }
.gift-box .gb-foot { margin-top: auto; padding-top: 10px; }
.gb-accept { background: #248046; color: #fff; padding: 8px 22px; font-weight: 700; border-radius: 4px; }
.gb-accept:hover { background: #1a6334; }
.gift-box .gb-art { position: relative; width: 200px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; overflow: hidden; color: #fff; text-align: center;
  background: radial-gradient(120% 90% at 80% 10%, rgba(255,255,255,.35), transparent 60%), linear-gradient(140deg, var(--tc), color-mix(in srgb, var(--tc) 40%, #2b1b4a)); }
.gift-box .gb-art b { position: relative; z-index: 1; font-size: 26px; font-weight: 900; font-style: italic; letter-spacing: -.01em; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0,0,0,.3); line-height: 1; }
.gift-box .gb-art small { position: relative; z-index: 1; font-size: 10px; font-weight: 800; letter-spacing: .14em; opacity: .9; }
.gift-box .gb-logo { position: relative; z-index: 1; margin-bottom: 4px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.3)); }
.gift-box .gb-gift { position: absolute; right: -14px; bottom: -14px; opacity: .22; transform: rotate(-14deg); }
.gift-box.gone { opacity: .65; }
.gift-box.gone .gb-art { filter: grayscale(.7); }
@media (max-width: 600px) { .gift-box .gb-art { width: 120px; } .gift-box .gb-art b { font-size: 18px; } }
/* a troll code was accepted */
.troll-modal { max-width: 360px; }
.troll { text-align: center; padding: 8px 4px 4px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.troll-face { font-size: 72px; line-height: 1; animation: trollBounce .6s ease-in-out infinite alternate; }
.troll-emoji { width: 80px; height: 80px; display: block; }
.troll h2 { font-size: 22px; font-weight: 900; color: var(--text-strong); }
.troll p { font-size: 16px; color: var(--muted); }
@keyframes trollBounce { from { transform: rotate(-10deg) scale(1); } to { transform: rotate(10deg) scale(1.12); } }
.gift-card { display: flex; align-items: center; gap: 12px; width: 360px; max-width: 100%; margin-top: 4px; padding: 14px; border-radius: 12px; background: var(--bg-2); border: 2px solid var(--tc); }
.gift-card > .ic { color: var(--tc); flex-shrink: 0; }
.gift-card .gc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gift-card .gc-text b { color: var(--tc); }
.gift-card .gc-text small { color: var(--muted); font-size: 13px; }
.gift-card.claimed { opacity: .7; border-style: dashed; }
.gift-tiers { display: flex; flex-direction: column; gap: 8px; }
.gift-tiers input { display: none; }
.gift-tiers span { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--bg-input-dark); border: 2px solid transparent; cursor: pointer; color: var(--tc); }
.gift-tiers span small { margin-left: auto; color: var(--muted); }
.gift-tiers input:checked + span { border-color: var(--tc); }
.sub-name-preview { padding: 14px 16px; border-radius: 10px; background: var(--bg-input-dark); font-size: 20px; font-weight: 700; margin: 8px 0; }
.sub-fonts { display: flex; gap: 6px; flex-wrap: wrap; }
.sub-fonts button { padding: 7px 12px; border-radius: 14px; background: var(--bg-input-dark); font-size: 14px; }
.sub-fonts button.on { background: var(--brand); color: var(--on-brand); }
/* stickers */
.stn-preview { display: grid; place-items: center; padding: 14px; border-radius: 12px; background: var(--bg-input-dark); margin-bottom: 12px; }
.stn-preview img { max-width: 170px; max-height: 170px; object-fit: contain; border-radius: 6px; }
img.sticker { display: block; width: auto; height: auto; max-width: 170px; max-height: 170px; border-radius: 6px; margin-top: 4px; object-fit: contain; }
.sticker-picker { width: 348px; max-width: 92vw; }
.st-scroll { max-height: 380px; overflow-y: auto; padding: 10px 12px 12px; }
.st-title { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--muted); margin: 10px 0 6px; }
.st-title:first-child { margin-top: 0; }
.st-title small { font-weight: 600; margin-left: 4px; }
.st-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.st-tile { position: relative; aspect-ratio: 1; border-radius: 8px; display: grid; place-items: center; padding: 4px; }
.st-tile:hover { background: var(--hover-2); }
.st-tile img { width: 100%; height: 100%; object-fit: contain; border-radius: 4px; }
.st-tile i { position: absolute; right: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; display: none; place-items: center; background: var(--red); color: #fff; }
.st-tile:hover i { display: grid; }
body.mobile .st-tile i { display: grid; opacity: .85; }
.st-add { border: 2px dashed var(--line-soft); color: var(--muted); }
.st-add:hover { border-color: var(--brand); color: var(--text); }
.stk-list .emo-row img { width: 64px; height: 64px; }
/* a server's own emoji */
img.custom-emoji { border-radius: 3px; }
.reaction .r-emoji img.custom-emoji { width: 1.25em; height: 1.25em; vertical-align: -0.25em; margin: 0; }
.pf-tag img.custom-emoji, .pf-bubble-emoji img.custom-emoji, .emoji-input-btn img.custom-emoji, [data-act=tag-emoji] img.custom-emoji { width: 1.2em; height: 1.2em; margin: 0; }
.jumbo img.custom-emoji { width: 3rem; height: 3rem; }
.emoji-btn > img.emoji:not([src^="/twemoji"]) { border-radius: 4px; }
.emo-list { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.emo-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--bg-input-dark); }
.emo-row img { width: 36px; height: 36px; object-fit: contain; border-radius: 4px; flex-shrink: 0; margin-right: 6px; }
.emo-row .input { flex: 1; min-width: 0; max-width: 260px; }
.emo-row .emo-colon { color: var(--muted); font-weight: 700; }
.emo-row .btn-link { margin-left: auto; }
/* the crop window */
.crop-modal { width: min(94vw, 500px); }
.crop-stage { display: grid; place-items: center; padding: 14px; border-radius: 12px; background: #000; min-height: 160px; }
.crop-frame { position: relative; overflow: hidden; cursor: grab; touch-action: none; user-select: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); background: #111; }
.crop-frame:active { cursor: grabbing; }
.crop-frame img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; user-select: none; }
.crop-frame.round::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgba(0, 0, 0, .55), inset 0 0 0 2px rgba(255, 255, 255, .9); pointer-events: none; }
.crop-shapes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.crop-shapes button { padding: 6px 12px; border-radius: 14px; background: var(--bg-input-dark); font-size: 13px; }
.crop-shapes button.on { background: var(--brand); color: var(--on-brand); font-weight: 700; }
.crop-zoom { width: 100%; accent-color: var(--brand); }
/* a server's banner behind its name above the channel list, and the marks UnTidl staff give a server */
.sb-header.server .sb-title { display: flex; align-items: center; min-width: 0; flex: 1; }
.sb-header.server .sb-title > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-header.server.has-banner { height: 132px; align-items: flex-start; padding-top: 12px; color: #fff; background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 55%), var(--sb-banner) center / cover no-repeat; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.sb-header.server.has-banner:hover, .sb-header.server.has-banner.open { background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .1) 60%), var(--sb-banner) center / cover no-repeat; }
.sb-header.server.has-banner > .ic { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7)); }
.srv-mark { flex-shrink: 0; margin-left: 5px; display: inline-flex; align-items: center; text-shadow: none; }
.untidl-mark { width: 1.25em; height: 1.25em; border-radius: 50%; justify-content: center; background: var(--brand); color: var(--on-brand); }
.srv-banner-edit { height: 120px; border-radius: 10px; overflow: hidden; background: var(--bg-input-dark); border: 2px dashed var(--line-soft); display: grid; place-items: center; cursor: pointer; color: var(--muted); margin-bottom: 6px; }
.srv-banner-edit:hover { border-color: var(--brand); color: var(--text); }
.srv-banner-edit img { width: 100%; height: 100%; object-fit: cover; display: block; }
.srv-banner-edit span { display: inline-flex; align-items: center; gap: 8px; }
.dc-art { position: relative; }
.dc-art, .dc-art.has-banner { height: 100px; } /* (the same on every card, so the cards line up) */
.dc-art.has-banner img { filter: none; transform: none; }
.dc-by { position: absolute; right: 8px; top: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 12px; background: var(--brand); color: var(--on-brand); font-size: 11px; font-weight: 800; }
.dc-text b { display: flex; align-items: center; }
.dc-text b { white-space: normal; align-items: flex-start; min-height: 2.5em; line-height: 1.25; }
.dc-text b > span:first-child { overflow-wrap: anywhere; } /* (a long name goes on to the next line, it is never cut) */
.dc-text b .srv-mark { margin-top: 1px; }
/* Discover: public servers, shown beside the server rail (the rail stays; the whole screen on a phone) */
.discover-page { left: 72px; z-index: 300; background: var(--bg-1); animation: fade .15s ease-out; }
.dc-scroll { position: absolute; inset: 0; overflow-y: auto; padding: 24px 32px calc(32px + var(--sab)); }
.dc-scroll > * { max-width: 1040px; margin-left: auto; margin-right: auto; }
.dc-x { position: absolute; right: 20px; top: 20px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, .35); margin: 0; }
.dc-x:hover { background: rgba(0, 0, 0, .55); }
.dc-back { display: none; align-items: center; gap: 6px; padding: 8px 4px; margin-bottom: 8px; color: var(--text); font-weight: 600; }
.dc-hero { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 40px 24px 36px; border-radius: 20px; color: #fff; overflow: hidden;
  background: radial-gradient(120% 140% at 0% 0%, rgba(var(--brand-rgb), .95), transparent 60%), radial-gradient(120% 140% at 100% 100%, rgba(var(--brand-rgb), .55), transparent 65%), var(--bg-modal); }
.dc-hero-ic { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: rgba(0, 0, 0, .28); margin-bottom: 6px; }
.dc-hero h1 { font-size: 30px; font-weight: 800; line-height: 1.15; }
.dc-hero p { font-size: 15px; color: rgba(255, 255, 255, .85); }
.dc-search { display: flex; align-items: center; gap: 10px; width: min(100%, 560px); margin-top: 18px; padding: 0 18px; height: 52px; border-radius: 26px; background: var(--bg-float); color: var(--muted); box-shadow: 0 6px 20px rgba(0, 0, 0, .3); }
.dc-search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); font-size: 16px; }
.dc-h { margin-top: 28px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.dc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 14px; }
.dc-grid > .cm-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 12px 24px; text-align: center; }
.dc-grid > .cm-empty b { font-size: 17px; color: var(--text-strong); }
.dc-empty-ic { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-2); color: var(--muted); margin-bottom: 6px; }
.dc-card { position: relative; display: flex; flex-direction: column; border-radius: 14px; background: var(--bg-2); overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); transition: transform .12s, box-shadow .12s; }
.dc-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, .3); }
.dc-art { height: 84px; background: linear-gradient(135deg, var(--brand), var(--bg-modal)); overflow: hidden; }
.dc-art img { width: 100%; height: 100%; object-fit: cover; filter: blur(18px) saturate(1.3); transform: scale(1.4); }
.dc-icon { width: 56px; height: 56px; margin: -28px 0 0 16px; border-radius: 16px; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; font-weight: 800; font-size: 18px; overflow: hidden; flex-shrink: 0; text-transform: uppercase; box-shadow: 0 0 0 4px var(--bg-2); position: relative; }
.dc-icon img { width: 100%; height: 100%; object-fit: cover; }
.dc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 10px 16px 12px; }
.dc-text b { font-size: 16px; color: var(--text-strong); }
.dc-text p { font-size: 13px; color: var(--muted); min-height: 52px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dc-text small { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); margin-top: 4px; }
.dc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); margin-left: 8px; }
.dc-dot:first-child { margin-left: 0; }
.dc-dot.on { background: var(--green); }
.dc-card > .btn { margin: 0 16px 16px; }
.dc-invite { display: flex; align-items: center; gap: 14px; width: min(100%, 460px); margin-top: 28px; padding: 14px 18px; border-radius: 14px; background: var(--bg-2); color: var(--text); text-align: left; }
.dc-invite:hover { background: var(--hover-2); }
.dc-invite > .ic:first-child { width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: var(--brand); color: var(--on-brand); flex-shrink: 0; }
.dc-invite span { flex: 1; display: flex; flex-direction: column; }
.dc-invite small { color: var(--muted); font-size: 13px; }
.rail-item.active[data-act=discover] .rail-icon { background: var(--green); color: var(--on-brand); border-radius: 16px; }
.danger-text { color: var(--red, #f23f43); display: flex; align-items: center; gap: 6px; }
body.mobile .discover-page { left: 0; z-index: 500; }
body.mobile .dc-x { display: none; }
body.mobile .dc-back { display: inline-flex; }
body.mobile .dc-scroll { padding: calc(8px + var(--sat)) 12px calc(16px + var(--sab)); }
body.mobile .dc-hero { padding: 28px 16px 24px; border-radius: 16px; }
body.mobile .dc-hero h1 { font-size: 24px; }
body.mobile .dc-grid { grid-template-columns: 1fr; gap: 12px; }
body.mobile .dc-text p { min-height: 0; }
/* profile colours: the person's two colours, darkened so white text stays readable on any of them */
.pf.themed {
  --pf-top: color-mix(in srgb, var(--pf1) 46%, #000); --pf-bottom: color-mix(in srgb, var(--pf2) 46%, #000);
  --pf-bg: var(--pf-bottom); --cut: var(--pf-top); --pf-card: rgba(0, 0, 0, .3); --pf-card-hover: rgba(0, 0, 0, .42);
  --text: #fff; --text-strong: #fff; --muted: rgba(255, 255, 255, .78); --faint: rgba(255, 255, 255, .62); --line-soft: rgba(255, 255, 255, .14); --line: rgba(255, 255, 255, .22);
  background: linear-gradient(180deg, var(--pf-top) 0%, var(--pf-top) 90px, var(--pf-bottom) 100%); color: #fff;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pf1) 70%, #000), var(--shadow);
}
.pf-full.themed, .pf-panel.themed { box-shadow: none; }
.theme-colors { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.theme-colors label { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.theme-colors input[type=color] { width: 44px; height: 32px; padding: 0; border: 2px solid var(--line); border-radius: 8px; background: none; cursor: pointer; }
.pf-popout { width: 300px; border-radius: 10px; overflow: visible; }
.pf-popout .pf-banner { border-radius: 10px 10px 0 0; }
.pf-fly.flip { left: auto; right: calc(100% + 12px); }
.pf-fly.flip::before { left: auto; right: -14px; }
.pf-wrap { border-radius: 10px; overflow: visible; }
.pf-head { position: relative; }
.pf-banner { height: 106px; background: var(--banner) center / cover no-repeat; }
.pf-banner.has-img { background-color: var(--banner); }
.pf-panel .pf-banner { height: 120px; }
.pf-full .pf-banner { height: 212px; }
.pf-avatar-row { position: relative; height: 44px; padding-left: 16px; }
.pf-avatar { position: absolute; left: 14px; top: -46px; border-radius: 50%; padding: 6px; background: var(--pf-bg); cursor: pointer; }
.pf-avatar .avatar::after { display: none; }
.pf-avatar .status { box-shadow: 0 0 0 5px var(--pf-bg); }
.pf-avatar:hover .avatar > img, .pf-avatar:hover .avatar > .avatar-default { filter: brightness(.85); }
.pf-full .pf-avatar-row { height: 76px; padding-left: 20px; }
.pf-full .pf-avatar { top: -70px; left: 16px; padding: 7px; }

/* thought-bubble custom status */
.pf-bubble { position: absolute; left: 104px; top: -34px; max-width: calc(100% - 118px); display: flex; align-items: flex-start; text-align: left; z-index: 2; }
.pf-full .pf-bubble { left: 150px; top: -48px; }
.pf-bubble-body { display: inline-flex; align-items: center; gap: 6px; background: var(--pf-card); border-radius: 18px; padding: 8px 12px; font-size: 14px; color: var(--text); box-shadow: 0 4px 12px rgba(0, 0, 0, .25); max-width: 100%; }
.pf-bubble-body > span:last-child { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.pf-bubble-emoji { font-size: 18px; line-height: 1; flex-shrink: 0; }
/* with a frame the picture reaches further out: the status bubble moves aside so the frame does not cover it */
.pf-avatar:has(.av-frame) ~ .pf-bubble { left: 120px; max-width: calc(100% - 134px); }
.pf-bubble-dots { position: absolute; left: -12px; top: 22px; width: 14px; height: 14px; }
.pf-bubble-dots i { position: absolute; border-radius: 50%; background: var(--pf-card); }
.pf-bubble-dots i:first-child { width: 12px; height: 12px; right: -2px; top: -6px; }
.pf-bubble-dots i:last-child { width: 6px; height: 6px; left: -2px; top: 6px; }
button.pf-bubble:hover .pf-bubble-body, button.pf-bubble:hover .pf-bubble-dots i { background: var(--pf-card-hover); }
.pf-bubble.empty .pf-bubble-body { color: var(--muted); font-weight: 500; opacity: 0; transition: opacity .15s; }
.pf-bubble.empty .pf-bubble-dots { opacity: 0; transition: opacity .15s; }
.pf-head:hover .pf-bubble.empty .pf-bubble-body, .pf-head:hover .pf-bubble.empty .pf-bubble-dots { opacity: 1; }

.pf-body { padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.pf-full .pf-body { padding: 0 20px 20px; }
.pf-names { display: flex; flex-direction: column; gap: 2px; }
.pf-display { font-size: 20px; font-weight: 700; color: var(--text-strong); line-height: 1.25; word-break: break-word; }
.pf-display.big { font-size: 24px; }
.pf-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: 14px; color: var(--text); }
.pf-dot { color: var(--muted); }
.pf-tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border-radius: 6px; background: var(--pf-card); font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--text-strong); }
.pf-tag span { font-size: 13px; }
.pf-badges { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 6px; }
.pf-badges.inline { margin: 0 0 0 2px; display: inline-flex; }
.pf-badge { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; cursor: default; }
.pf-badge:hover { background: rgba(255, 255, 255, .06); }
.pf-bio { font-size: 14px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.pf-bio .mention { cursor: pointer; }
.pe-card .pf-bio .mention { cursor: default; }
.pf-meta h4, .pf-section h4, .pf-tabpane h4 { font-size: 12px; font-weight: 700; color: var(--text-strong); margin: 0 0 4px; }
.pf-meta div, .pf-since { font-size: 14px; }
.pf-tabpane h4 { margin-top: 16px; }
.pf-tabpane h4:first-child { margin-top: 4px; }
.pf-card { background: var(--pf-card); border-radius: 8px; }
.pf-section { padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.pf-section h4:not(:first-child) { margin-top: 10px; }
.pf-games { white-space: nowrap; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 8px 12px; font-size: 14px; font-weight: 600; color: var(--text-strong); text-align: left; width: 100%; }
.pf-games:hover { background: var(--pf-card-hover); }
.pf-game-icons { display: flex; gap: 4px; align-items: center; }
.pf-game-ic { border-radius: 6px; object-fit: cover; display: inline-grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.pf-game-more { height: 30px; min-width: 30px; padding: 0 4px; border-radius: 6px; background: var(--bg-3); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--text); }
.pf-game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin-top: 6px; }
.pf-game { display: flex; align-items: center; gap: 10px; background: var(--pf-card); border-radius: 8px; padding: 8px; font-size: 14px; font-weight: 600; min-width: 0; }
.pf-game span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-actions { display: flex; gap: 8px; align-items: center; }
.pf-actions .btn { height: 32px; }
.pf-actions .btn.icon-only { width: 36px; min-width: 36px; }
.pf-popout .pf-actions .btn:first-child:not(.icon-only) { flex: 1; }
.pf-message { width: 100%; background: transparent; border: 1px solid rgba(255, 255, 255, .08); border-radius: 8px; padding: 10px 12px; outline: none; font-size: 14px; }
.pf-message:focus { border-color: rgba(255, 255, 255, .18); }

/* self popout menu */
.pf-menu { padding: 4px; }
.pf-row { position: relative; width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; font-size: 14px; font-weight: 500; color: var(--text); text-align: left; cursor: pointer; }
.pf-row:hover { background: var(--pf-card-hover); color: var(--text-strong); }
.pf-row > span:not(.status):not(.pf-new) { flex: 1; }
.pf-row .ic { color: var(--icon); }
.pf-chev { margin-left: auto; }
.pf-new { background: var(--red-btn); color: #fff; font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: 8px; letter-spacing: .03em; }
.pf-sep { height: 1px; background: rgba(255, 255, 255, .06); margin: 4px 8px; }
.pf-fly { display: none; position: absolute; left: calc(100% + 12px); top: -8px; width: 240px; background: var(--bg-float); border-radius: 8px; padding: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .04); z-index: 5; --cut: var(--bg-float); cursor: default; }
.pf-fly::before { content: ''; position: absolute; left: -14px; top: 0; bottom: 0; width: 14px; }
.has-fly:hover > .pf-fly, body:not(.mobile) .has-fly.fly-open > .pf-fly { display: block; }
.pf-flyrow { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 4px; text-align: left; font-size: 14px; font-weight: 500; color: var(--icon); }
.pf-flyrow > span:not(.status) { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pf-flyrow small { font-size: 12px; font-weight: 400; color: var(--muted); line-height: 1.3; }
.pf-flyrow:hover { background: var(--brand); color: var(--on-brand); }
.pf-flyrow:hover small { color: rgba(var(--on-brand-rgb), .75); }
.pf-flyrow.danger { color: var(--red); }
.pf-flyrow.danger:hover { background: var(--red-btn); color: #fff; }
.pf-flyrow .status.inline { --cut: var(--bg-float); }
.pf-flyrow:hover .status.inline { --cut: var(--brand); }
.pf-check { color: var(--green); }

/* DM side panel */
.side-panel.dm-profile { width: 340px; background: var(--bg-4); --cut: var(--bg-4); }
.pf-panel { min-height: 100%; }
.pf-panel .pf-body { padding-bottom: 20px; }
.pf-list-row { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 500; }
.pf-list-row:hover { background: var(--pf-card-hover); }
.pf-srv { width: 32px; height: 32px; border-radius: 10px; background: var(--bg-3); display: grid; place-items: center; overflow: hidden; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.pf-srv img { width: 100%; height: 100%; object-fit: cover; }
.pf-full-link { padding: 10px; text-align: center; font-size: 14px; font-weight: 600; color: var(--text); width: 100%; }
.pf-full-link:hover { background: var(--pf-card-hover); }

/* full profile modal */
.modal.pf-modal { width: 600px; max-width: calc(100vw - 32px); background: var(--bg-4); overflow: hidden; }
.pf-modal .modal-body { padding: 0; }
.pf-modal .modal-x { color: #fff; opacity: .9; background: rgba(0, 0, 0, .35); border-radius: 50%; padding: 4px; top: 12px; right: 12px; }
.pf-modal .modal-x .ic { width: 20px; height: 20px; }
.pf-full-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pf-full-top .pf-actions { margin-top: 4px; }
.pf-tabs { display: flex; gap: 24px; border-bottom: 1px solid rgba(255, 255, 255, .08); margin-top: 4px; }
.pf-tab { padding: 10px 0; font-size: 14px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pf-tab:hover { color: var(--text); }
.pf-tab.active { color: var(--text-strong); border-bottom-color: var(--text-strong); }
.pf-tabpane { min-height: 140px; max-height: 44vh; overflow-y: auto; }
.pf-empty { color: var(--muted); font-size: 14px; padding: 24px 0; text-align: center; }

/* settings preview */
.pf-popout.preview { box-shadow: var(--shadow); }
.pe-preview { width: 300px; flex-shrink: 0; }

/* emoji input, textarea, games editor, sound preview */
.emoji-input { display: flex; align-items: center; gap: 8px; background: var(--bg-input-dark); border-radius: 4px; padding: 0 6px; }
.emoji-input .input { background: none; padding-left: 4px; }
.emoji-input.small { width: 200px; }
.emoji-input-btn { width: 32px; height: 32px; border-radius: 6px; display: grid; place-items: center; font-size: 20px; color: var(--icon); flex-shrink: 0; }
.emoji-input-btn:hover { background: var(--hover); color: var(--text); }
.emoji-input-clear { color: var(--icon); }
.textarea-wrap { position: relative; }
.textarea-wrap textarea { padding-right: 40px; }
.textarea-emoji { position: absolute; right: 8px; top: 8px; color: var(--icon); }
.textarea-emoji:hover { color: var(--text); }
.textarea-count { position: absolute; right: 10px; bottom: 6px; font-size: 12px; color: var(--muted); }
.games-editor { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.game-row { display: flex; align-items: center; gap: 8px; }
.game-ic-btn { width: 40px; height: 40px; border-radius: 8px; background: var(--bg-input-dark); display: grid; place-items: center; color: var(--icon); overflow: hidden; flex-shrink: 0; }
.game-ic-btn img { width: 100%; height: 100%; object-fit: cover; }
.game-ic-btn:hover { outline: 2px solid var(--brand); }
.game-rm { color: var(--icon); padding: 6px; border-radius: 4px; }
.game-rm:hover { color: var(--red); background: var(--hover); }
.sound-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.sound-btn { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 6px; background: var(--bg-2); font-size: 14px; font-weight: 500; text-align: left; }
.sound-btn:hover { background: var(--bg-input); }
.sound-btn .ic { color: var(--brand); }

/* saved accounts on login */
.auth-accounts { margin: 8px 0 4px; }
.auth-acc { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 8px; background: var(--bg-2); margin-bottom: 8px; --cut: var(--bg-2); }
.auth-acc > div:not(.avatar) { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.auth-acc b { color: var(--text-strong); }
.auth-acc small { color: var(--muted); font-size: 13px; }
.auth-acc-x { color: var(--muted); padding: 4px 6px; border-radius: 4px; }
.auth-acc-x:hover { color: var(--red); background: var(--hover); }
.auth-or { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; margin: 12px 0 4px; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ==========================================================================
   Motion
   ========================================================================== */
:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* smooth hover/active states everywhere */
.dm-item, .ch-item, .member, .friend-row, .sb-nav, .ctx-item, .vc-user, .pf-row, .pf-flyrow, .qs-item,
.tab, .hdr-btn, .up-btn, .vp-btn, .round-btn, .composer-btn, .msg-actions button, .reaction, .option-card,
.sn-item, .mutual, .pf-list-row, .gp-row, .invite-row, .sound-btn, .emoji-btn, .stage-icon, .pf-games, .pf-full-link {
  transition: background-color .15s ease, color .15s ease, opacity .15s ease, transform .15s var(--ease-out), border-color .15s ease;
}
.msg { transition: background-color .1s ease; }
.btn { transition: background-color .17s ease, color .17s ease, transform .12s var(--ease-out), box-shadow .17s ease; }
.btn:active:not(:disabled), .round-btn:active, .up-btn:active, .vp-btn:active, .hdr-btn:active, .cc-btn:active, .cc-hangup:active, .call-btn:active { transform: scale(.94); }
.emoji-btn:hover { transform: scale(1.18); }
.quick-reacts button { transition: transform .15s var(--ease-spring), background-color .15s; }
.status { transition: background-color .25s ease; }

/* rail: springy press + badge pop */
.rail-icon { transition: border-radius .2s var(--ease-out), background-color .2s ease, color .2s ease, transform .15s var(--ease-out); }
.rail-item:active .rail-icon { transform: translateY(1px) scale(.96); }
.pill { transition: height .2s var(--ease-out), margin-top .2s var(--ease-out); }

/* view switches: main area & sidebar fade/slide in */
.main.view-in > * { animation: viewIn .22s var(--ease-out); }
#sidebar.view-in > * { animation: sideIn .22s var(--ease-out); }
@keyframes viewIn { from { opacity: 0; transform: translateY(6px); } }
@keyframes sideIn { from { opacity: 0; transform: translateX(-8px); } }

/* messages */
.msg.msg-new { animation: msgIn .32s var(--ease-out); }
@keyframes msgIn { from { opacity: 0; transform: translateY(10px); } }
.msg.msg-out { overflow: hidden; animation: msgOut .22s ease forwards; pointer-events: none; }
@keyframes msgOut { to { opacity: 0; height: 0; min-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; transform: translateX(-12px); } }
.msg.pending .msg-content { transition: color .3s ease; }
.msg-actions { animation: fadeUp .12s var(--ease-out); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(4px); } }
.reaction.bump { animation: bump .45s var(--ease-spring); }
@keyframes bump { 30% { transform: scale(1.25); } }
.reactions .reaction .r-emoji { display: inline-block; transition: transform .15s var(--ease-spring); }
.reaction:hover .r-emoji { transform: scale(1.2) rotate(-6deg); }
.typing:not(:empty) { animation: fadeUp .2s var(--ease-out); }
.reply-bar, .attach-tray { animation: slideUpIn .2s var(--ease-out); }
@keyframes slideUpIn { from { opacity: 0; transform: translateY(8px); } }
.attach-item { animation: popIn .25s var(--ease-spring); }

/* skeleton shimmer while loading */
.sk-bar, .sk-circle { background: linear-gradient(90deg, var(--bg-hover-2) 0%, var(--bg-hover-2) 45%, var(--bg-hover-2) 90%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }

/* voice & calls */
.vc-user.anim-in { animation: vcIn .3s var(--ease-out); }
@keyframes vcIn { from { opacity: 0; transform: translateX(-10px); } }
.tile.anim-in { animation: tileIn .45s var(--ease-spring); }
@keyframes tileIn { from { opacity: 0; transform: scale(.85); } }
.tile { transition: width .3s var(--ease-out), height .3s var(--ease-out), box-shadow .15s ease; }
.tile-avatar .avatar { transition: transform .2s var(--ease-out); }
.tile.speaking .tile-avatar .avatar { transform: scale(1.04); }
.avatar.speaking::after { animation: speakGlow 1.4s ease-in-out infinite; }
@keyframes speakGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--green-rgb), .5); } 50% { box-shadow: 0 0 0 4px rgba(var(--green-rgb), 0); } }
.voice-panel.slide-up { animation: panelUp .3s var(--ease-out); }
@keyframes panelUp { from { opacity: 0; transform: translateY(100%); } }
.cc-group, .cc-hangup { transition: background-color .15s ease, transform .15s var(--ease-out), box-shadow .15s ease; }
.cc-group:hover, .cc-hangup:hover { transform: translateY(-2px); }
.call-area { animation: callOpen .35s var(--ease-out); }
@keyframes callOpen { from { opacity: 0; clip-path: inset(0 0 100% 0); } }

/* friends list rows cascade in on tab switch */
.friends.stagger .friend-row { animation: rowIn .3s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 28ms); }
.friends.stagger .empty-state { animation: popIn .35s var(--ease-out); }
@keyframes rowIn { from { opacity: 0; transform: translateY(8px); } }

/* popouts, menus, tooltips */
.popout { animation: popIn .16s var(--ease-out); transform-origin: left center; }
.popout[data-side="top"] { transform-origin: bottom left; animation-name: popUp; }
.popout[data-side="bottom"] { transform-origin: top left; animation-name: popDown; }
.popout[data-side="left"] { transform-origin: right center; }
.popout.out, .ctx-menu.out { animation: popOutFade .11s ease forwards; }
.ctx-menu { animation: popDown .13s var(--ease-out); transform-origin: top left; }
@keyframes popIn { from { opacity: 0; transform: scale(.94); } }
@keyframes popUp { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@keyframes popDown { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
@keyframes popOutFade { to { opacity: 0; transform: scale(.97); } }
.pf-fly { animation: flyIn .14s var(--ease-out); }
@keyframes flyIn { from { opacity: 0; transform: translateX(-6px); } }
.pf-fly.flip { animation-name: flyInL; }
@keyframes flyInL { from { opacity: 0; transform: translateX(6px); } }
.tooltip { animation: tipIn .12s var(--ease-out); }
.pf-avatar .avatar { transition: transform .2s var(--ease-out); }
.pf-avatar:hover .avatar { transform: scale(1.03); }

/* modals & settings */
.modal { animation: modalIn .22s var(--ease-spring); }
@keyframes modalIn { from { opacity: 0; transform: scale(.9); } }
.modal-layer.closing { opacity: 1; }
.modal-layer.closing .modal { animation: modalOut .12s ease forwards; }
.modal-layer.closing .backdrop { animation: fadeOutBg .12s ease forwards; }
@keyframes modalOut { to { opacity: 0; transform: scale(.94); } }
@keyframes fadeOutBg { to { opacity: 0; } }
.settings-layer.closing { animation: settingsOut .16s ease forwards; }
@keyframes settingsOut { to { opacity: 0; transform: scale(1.04); } }
.settings-page > * { animation: fadeUp .22s var(--ease-out); }
.settings-page.redraw > * { animation: none; }
.lightbox .lb-inner img { animation: popIn .25s var(--ease-out); }

/* auth screen */
.auth-card > * { animation: fadeUp .35s var(--ease-out) both; }
.auth-card > *:nth-child(2) { animation-delay: .03s; }
.auth-card > *:nth-child(3) { animation-delay: .06s; }
.auth-card > *:nth-child(n+4) { animation-delay: .09s; }
.auth-bg { animation: bgDrift 24s ease-in-out infinite alternate; background-size: 140% 140%; }
@keyframes bgDrift { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }

/* toasts & incoming call */
.toast { animation: toastIn .3s var(--ease-spring); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-12px) scale(.96); } }
.toast.out { opacity: 0; transform: translateY(-8px); }
.call-btn.accept { animation: acceptPulse 1.6s ease-in-out infinite; }
@keyframes acceptPulse { 0%, 100% { box-shadow: 0 4px 16px rgba(var(--green-btn-rgb), .45), 0 0 0 0 rgba(var(--green-btn-rgb), .5); } 50% { box-shadow: 0 4px 16px rgba(var(--green-btn-rgb), .45), 0 0 0 10px rgba(var(--green-btn-rgb), 0); } }

/* anyone who prefers less motion gets near-instant transitions */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* voice connection status */
.vp-title.connecting { color: var(--yellow); }
.vp-title.failed { color: var(--red); }
.vp-title.connecting .ic { animation: blink 1.2s ease-in-out infinite; }
.vp-warn { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--red); margin-top: 2px; }

/* ------------------------------------------------------------------ responsive: tablets */
@media (max-width: 1100px) {
  .active-now { display: none; }
  .side-panel.dm-profile { width: 280px; }
}
@media (min-width: 769px) and (max-width: 900px) {
  .side-panel { display: none; }
}

/* ------------------------------------------------------------------ phones */
.hdr-back, .drawer-backdrop, .settings-back, .settings-nav-back { display: none; }

/* Room for the phone's status bar and gesture bar. Inside the UnTidl app the app itself already keeps the page
   clear of them, so adding it again here left an empty band at the top (and bottom) of every screen. */
:root { --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); }
body.in-app { --sat: 0px; --sab: 0px; }
body.mobile { --gutter: 12px; }
html:has(body.mobile), body.mobile, body.mobile #root { height: 100dvh; }
body.mobile .app { height: 100dvh; position: relative; overflow: clip; }
body.mobile, body.mobile #root { overflow: clip; }

/* two screens: list (rail + sidebar) and main; main slides over */
body.mobile .rail { padding-top: calc(12px + var(--sat)); padding-bottom: var(--sab); }
body.mobile .sidebar { flex: 1; width: auto; min-width: 0; padding-top: var(--sat); }
body.mobile .main {
  position: absolute; inset: 0; z-index: 20;
  transform: translateX(100%); visibility: hidden;
  transition: transform .3s var(--ease-out, ease), visibility 0s linear .3s;
  box-shadow: -8px 0 24px rgba(0, 0, 0, .35);
  padding-top: var(--sat);
}
body.mobile.show-main .main { transform: none; visibility: visible; transition: transform .3s var(--ease-out, ease), visibility 0s; }
body.mobile.show-main .rail, body.mobile.show-main .sidebar { pointer-events: none; }
body.mobile .main.view-in > * { animation: none; }

/* back button in every main header */
body.mobile .hdr-back { display: grid; place-items: center; width: 36px; height: 36px; margin: 0 2px 0 -8px; border-radius: 8px; color: var(--icon); flex-shrink: 0; }
body.mobile .hdr-back:active { background: var(--hover); }
body.mobile .call-area .hdr-back { display: none; }

/* headers */
body.mobile .chat-header { padding: 0 6px 0 12px; }
body.mobile .hdr-left { min-width: 0; overflow: hidden; }
body.mobile .hdr-left h1 { overflow: hidden; text-overflow: ellipsis; }
body.mobile .hdr-topic, body.mobile .chat-header .hdr-divider { display: none; }
body.mobile .hdr-btn { margin: 0; width: 40px; height: 40px; }
body.mobile .hdr-btn[data-act="add-group"], body.mobile .hdr-btn[data-act="invite"] { display: none; }
body.mobile .friends-header .hdr-left { overflow-x: auto; scrollbar-width: none; gap: 4px; }
body.mobile .friends-header .hdr-left::-webkit-scrollbar { display: none; }
body.mobile .friends-header .hdr-divider { display: none; }
body.mobile .friends-header .hdr-left > :first-child { order: -2; }
body.mobile .friends-header .tab.add { order: -1; } /* "Arkadaş Ekle" first: no sideways scrolling to reach it */
body.mobile .friends-header h1 { display: none; }
body.mobile .friends-header .hdr-icon { display: none; }
body.mobile .tab { margin: 0; padding: 4px 10px; font-size: 15px; flex-shrink: 0; }

/* messages & composer */
body.mobile .msg { padding: 2px 12px 2px 60px; }
body.mobile .msg-avatar { left: 12px; }
body.mobile .msg-avatar .avatar { --s: 36px !important; }
body.mobile .msg.system { padding-left: 60px; }
body.mobile .sys-icon { left: 22px; }
body.mobile .msg-reply::before { left: -30px; width: 27px; }
body.mobile .msg-hover-time { width: 48px; }
body.mobile .welcome { margin: 16px 12px 8px; }
body.mobile .welcome h1 { font-size: 26px; }
body.mobile .day-divider { margin-left: 12px; margin-right: 12px; }
body.mobile .attachment, body.mobile .embed-img, body.mobile .invite-embed { max-width: 100%; }
body.mobile .attachment img { max-width: 100%; height: auto; }
body.mobile .codeblock { max-width: 100%; }
body.mobile .composer { padding: 0 8px calc(2px + var(--sab)); }
body.mobile .composer-btn:first-child { width: 44px; padding: 0 10px; }
body.mobile .composer-box { border-radius: 22px; }
body.mobile .composer.has-top .composer-box { border-radius: 0 0 22px 22px; }
body.mobile .typing { height: 20px; font-size: 13px; }
body.mobile .attach-item { width: 150px; }
body.mobile .attach-item img { height: 100px; }

/* members / DM profile: slide-in drawer from the right */
body.mobile .side-panel {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 30;
  width: min(86vw, 340px) !important; display: block;
  transform: translateX(100%); transition: transform .28s var(--ease-out, ease);
  padding-top: var(--sat); padding-bottom: var(--sab);
}
body.mobile.drawer-open .side-panel { transform: none; box-shadow: -12px 0 32px rgba(0, 0, 0, .45); }
body.mobile .drawer-backdrop { display: block; position: absolute; inset: 0; z-index: 29; background: rgba(0, 0, 0, .55); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
body.mobile.drawer-open .drawer-backdrop { opacity: 1; pointer-events: auto; }
body.mobile .chat-body { position: relative; }

/* friends */
body.mobile .friend-search { margin: 12px 12px 4px; }
body.mobile .friend-list { padding: 0 12px 16px; }
body.mobile .friend-row { margin: 0 -6px; padding: 0 6px; height: 60px; }
body.mobile .friend-username { display: none; }
body.mobile .add-friend { padding: 16px 12px; }
body.mobile .add-friend-box { flex-wrap: wrap; height: auto; padding: 8px; gap: 8px; }
body.mobile .add-friend-box input { width: 100%; height: 36px; }
body.mobile .add-friend-box .btn { width: 100%; }
body.mobile .add-friend-empty svg { width: 80px; height: 80px; }

/* sidebar list items get bigger touch targets */
body.mobile .dm-item, body.mobile .sb-nav { height: 48px; }
body.mobile .ch-item { height: 40px; }
body.mobile .ch-actions { display: none !important; }
body.mobile .dm-close { display: none; }
body.mobile .user-panel { height: calc(56px + var(--sab)); padding-bottom: var(--sab); }
body.mobile .up-btn { width: 40px; height: 40px; }

/* calls */
body.mobile .call-area { height: min(42dvh, 340px) !important; }
body.mobile .stage-top { height: 44px; padding: 0 8px 0 12px; }
body.mobile .tiles { padding: 6px; gap: 6px; }
body.mobile .stage-controls { gap: 8px; padding: 8px 8px calc(12px + var(--sab)); }
body.mobile .cc-group { height: 48px; border-radius: 24px; }
body.mobile .cc-btn { width: 52px; }
body.mobile .cc-caret { display: none; }
body.mobile .cc-hangup { width: 64px; height: 48px; border-radius: 24px; }
body.mobile .cc-group:hover, body.mobile .cc-hangup:hover { transform: none; }
body.mobile .tiles.has-focus .tile:not(.focused) { width: 110px; height: 62px; }
body.mobile #incoming { inset: auto 12px calc(12px + var(--sab)) 12px; }
body.mobile .incoming { width: 100%; }

/* popouts become bottom sheets */
body.mobile .popout {
  left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important;
  width: 100% !important; max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain;
  border-radius: 16px 16px 0 0; padding-bottom: var(--sab);
  animation: sheetUp .28s var(--ease-out, ease) !important;
}
body.mobile .popout.out { animation: sheetDown .18s ease forwards !important; }
.sheet-backdrop { position: fixed; inset: 0; z-index: 1399; background: rgba(0, 0, 0, .45); animation: sheetFade .2s ease; touch-action: none; }
@keyframes sheetFade { from { opacity: 0; } }
.sheet-backdrop.out { opacity: 0; transition: opacity .1s; }
@keyframes sheetUp { from { transform: translateY(100%); } }
@keyframes sheetDown { to { transform: translateY(100%); } }
body.mobile .popout::before { content: ''; display: block; width: 40px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .25); margin: 8px auto 0; position: absolute; left: 50%; transform: translateX(-50%); z-index: 3; }
body.mobile .pf-popout, body.mobile .emoji-picker, body.mobile .group-picker { width: 100%; }
body.mobile .pf-popout { border-radius: 16px 16px 0 0; }
body.mobile .pf-popout .pf-banner { border-radius: 16px 16px 0 0; }
body.mobile .emoji-picker { height: 50dvh; border-radius: 16px 16px 0 0; }
body.mobile .emoji-grid { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); grid-auto-rows: 44px; }
/* profile submenus expand inline on tap */
body.mobile .has-fly { flex-wrap: wrap; }
body.mobile .pf-fly { position: static; display: none; width: 100%; box-shadow: none; background: var(--bg-float); margin: 8px 0 0; animation: none; }
body.mobile .has-fly:hover > .pf-fly { display: none; }
body.mobile .has-fly.open > .pf-fly { display: block; }
body.mobile .has-fly.open .pf-chev { transform: rotate(90deg); }
body.mobile .pf-chev { transition: transform .2s; }

/* context menus: bigger rows, stay on screen */
body.mobile .ctx-menu { min-width: 220px; max-width: calc(100vw - 16px); max-height: 80dvh; overflow-y: auto; }
body.mobile .ctx-item { min-height: 44px; font-size: 15px; }
body.mobile .ctx-sub { position: static; display: block; visibility: visible; opacity: 1; margin: 0 0 0 8px; box-shadow: none; padding: 0; background: none; }
body.mobile .ctx-sub::before { display: none; }
body.mobile .ctx-item:has(> .ctx-sub) { flex-wrap: wrap; }

/* modals */
body.mobile .modal { width: calc(100vw - 20px); max-height: calc(100dvh - 40px); }
body.mobile .modal.pf-modal { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
body.mobile .pf-full .pf-banner { height: 150px; }
body.mobile .pf-full-top { flex-direction: column; }
body.mobile .pf-game-grid { grid-template-columns: 1fr 1fr; }
body.mobile .quick-switcher .modal-body { padding: 16px; }
body.mobile .qs-input { height: 52px; font-size: 18px; }
body.mobile .screen-picker { width: calc(100vw - 20px); }

/* settings: list first, then the page */
body.mobile .settings { flex-direction: column; }
body.mobile .settings-nav { flex: 1; justify-content: stretch; padding-top: var(--sat); position: relative; }
/* the list of sections is the first screen on a phone: this is the way out of it (the X lives on the page screen) */
body.mobile .settings-nav-back { display: flex; align-items: center; gap: 6px; position: absolute; left: 4px; top: calc(6px + var(--sat)); z-index: 2; padding: 10px 12px; color: var(--text); font-weight: 600; font-size: 15px; border-radius: 8px; }
body.mobile .settings-nav-back:active { background: var(--hover); }
body.mobile .settings-nav-inner { width: 100%; padding: 56px 12px 24px; }
body.mobile .sn-item { padding: 12px; font-size: 16px; }
body.mobile .settings-content { display: none; flex-direction: column; padding-top: var(--sat); }
body.mobile .settings-layer.page-open .settings-nav { display: none; }
body.mobile .settings-layer.page-open .settings-content { display: flex; flex: 1; }
body.mobile .settings-back { display: flex; align-items: center; gap: 6px; padding: 14px 12px 4px; color: var(--text); font-weight: 600; font-size: 15px; }
body.mobile .settings-page { padding: 12px 14px 96px; max-width: none; }
body.mobile .settings-close { position: fixed; top: calc(10px + var(--sat)); right: 10px; z-index: 5; padding: 0; }
body.mobile .settings-close span { display: none; }
body.mobile .profile-editor { flex-direction: column; }
body.mobile .pe-preview { width: 100%; position: static; }
body.mobile .grid-2 { grid-template-columns: 1fr; }
body.mobile .save-bar { bottom: calc(10px + var(--sab)); }
body.mobile .ac-field { flex-wrap: wrap; }

/* inputs at 16px stop iOS Safari from zooming the page on focus */
body.mobile input, body.mobile textarea, body.mobile select, body.mobile .input { font-size: 16px !important; }

/* touch screens: no hover-only UI */
@media (hover: none) {
  .msg-actions { display: none !important; }
  .msg:hover { background: none; }
  .msg:active { background: var(--msg-hover); }
  .msg { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  .msg .edit-input { -webkit-user-select: text; user-select: text; }
  .reaction.add { opacity: 1; }
  .tile-full { opacity: 1; }
  .up-user:hover .up-sub span { transform: none; }
  * { -webkit-tap-highlight-color: transparent; }
}


/* call fullscreen */
.stage:fullscreen { width: 100vw; height: 100vh; }
.stage:fullscreen .stage-top { position: absolute; top: 0; left: 0; right: 0; z-index: 6; background: linear-gradient(rgba(0, 0, 0, .55), transparent); }
.stage:fullscreen .tiles { padding-top: 52px; }
.stage:fullscreen .stage-icon { background: rgba(255, 255, 255, .08); }
.vp-shield { color: var(--green); display: inline-flex; margin-left: 2px; }

/* keybind editor */
.kb-row { gap: 12px; }
.kb-key { min-width: 150px; height: 36px; padding: 0 12px; border-radius: 6px; background: var(--bg-3); border: 1px solid var(--line); font: 600 13px var(--font); color: var(--text-strong); text-align: center; transition: border-color .15s, background .15s; }
.kb-key:hover { border-color: var(--icon); }
.kb-key em { font-style: normal; color: var(--muted); font-weight: 500; }
.kb-key.recording { border-color: var(--red); background: rgba(242, 63, 67, .1); animation: kbPulse 1s ease-in-out infinite; }
.kb-key.recording em { color: var(--red); }
@keyframes kbPulse { 50% { box-shadow: 0 0 0 3px rgba(242, 63, 67, .25); } }
.kb-reset { width: 32px; height: 32px; border-radius: 6px; display: grid; place-items: center; color: var(--icon); }
.kb-reset:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.kb-reset:disabled { opacity: .25; cursor: default; }
.kb-row.fixed kbd { min-width: 150px; text-align: center; margin-right: 44px; }
.kb-row.fixed { opacity: .75; }

/* language picker */
.lang-list { display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.lang-card { padding: 14px 16px; }
.lang-flag { font-size: 24px; line-height: 1; }

/* click-to-edit avatar & banner */
/* ---------------------------------------------------------------- profile picture frames
   A frame sits around (and over) the round picture, a little larger than it. Rings are drawn with a mask;
   the others are small pictures (SVG). Tiny pictures (under 28px) show no frame. */
.av-frame { position: absolute; inset: calc(var(--s) * -0.13); pointer-events: none; z-index: 1; border-radius: 50%; --fw: calc(var(--s) * 0.1); background-size: 100% 100%; background-repeat: no-repeat; }
img.av-frame { width: calc(100% + var(--s) * 0.26); height: calc(100% + var(--s) * 0.26); max-width: none; object-fit: contain; border-radius: 0; }
.avatar > .status { z-index: 2; }
.av-frame.f-gold { background: conic-gradient(from 20deg, #fff4b8, #d4a017, #fff4b8, #b8860b, #ffe680, #d4a017, #fff4b8); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); filter: drop-shadow(0 0 2px rgba(255, 210, 74, .6)); }
.av-frame.f-rainbow { background: conic-gradient(#ff5f6d, #ffc371, #f9f871, #5cff9d, #4cc9ff, #8c7bff, #ff6bd6, #ff5f6d); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); animation: frSpin 4s linear infinite; }
.av-frame.f-neon { background: conic-gradient(#ff3df5, #3df5ff, #ff3df5); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); filter: drop-shadow(0 0 3px #ff3df5) drop-shadow(0 0 6px #3df5ff); animation: frHue 3s linear infinite; }
.av-frame.f-fire { background: conic-gradient(from 180deg, #ff2a00, #ffb300, #ff6a00, #ffd24a, #ff2a00, #ff8c00, #ff2a00); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); filter: drop-shadow(0 -1px 4px #ff6a00); animation: frSpin 2.4s linear infinite, frFlicker 1.2s ease-in-out infinite alternate; }
.av-frame.f-ice { background: radial-gradient(circle at 22% 18%, #fff 0 1.2px, transparent 2px), radial-gradient(circle at 80% 30%, #fff 0 1px, transparent 1.8px), radial-gradient(circle at 70% 85%, #fff 0 1.2px, transparent 2px), conic-gradient(#e8fbff, #7fd3ff, #ffffff, #4aa8ff, #c9f1ff, #e8fbff); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); filter: drop-shadow(0 0 3px rgba(127, 211, 255, .8)); }
.av-frame.f-galaxy { background: radial-gradient(circle at 30% 20%, #fff 0 1px, transparent 1.6px), radial-gradient(circle at 75% 65%, #fff 0 1px, transparent 1.6px), conic-gradient(#2b0f5e, #8c3dff, #ff4fd8, #2b5cff, #2b0f5e); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); filter: drop-shadow(0 0 3px #8c3dff); animation: frSpin 8s linear infinite; }
.av-frame.f-hearts { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M0 -2.2C-1.6 -5.4 -6.4 -4.6 -6.4 -0.8C-6.4 2.6 -2.6 4.8 0 7C2.6 4.8 6.4 2.6 6.4 -0.8C6.4 -4.6 1.6 -5.4 0 -2.2Z' fill='%23ff4d8d' stroke='%23fff' stroke-width='0.8' transform='translate(75.8 13.1) rotate(15) scale(1.15)'/%3E%3Cpath d='M0 -2.2C-1.6 -5.4 -6.4 -4.6 -6.4 -0.8C-6.4 2.6 -2.6 4.8 0 7C2.6 4.8 6.4 2.6 6.4 -0.8C6.4 -4.6 1.6 -5.4 0 -2.2Z' fill='%23ff8fb8' stroke='%23fff' stroke-width='0.8' transform='translate(93.5 38.4) rotate(25) scale(0.8)'/%3E%3Cpath d='M0 -2.2C-1.6 -5.4 -6.4 -4.6 -6.4 -0.8C-6.4 2.6 -2.6 4.8 0 7C2.6 4.8 6.4 2.6 6.4 -0.8C6.4 -4.6 1.6 -5.4 0 -2.2Z' fill='%23ff4d8d' stroke='%23fff' stroke-width='0.8' transform='translate(86.9 75.8) rotate(40) scale(1.0)'/%3E%3Cpath d='M0 -2.2C-1.6 -5.4 -6.4 -4.6 -6.4 -0.8C-6.4 2.6 -2.6 4.8 0 7C2.6 4.8 6.4 2.6 6.4 -0.8C6.4 -4.6 1.6 -5.4 0 -2.2Z' fill='%23ff8fb8' stroke='%23fff' stroke-width='0.8' transform='translate(24.2 86.9) rotate(-30) scale(0.85)'/%3E%3Cpath d='M0 -2.2C-1.6 -5.4 -6.4 -4.6 -6.4 -0.8C-6.4 2.6 -2.6 4.8 0 7C2.6 4.8 6.4 2.6 6.4 -0.8C6.4 -4.6 1.6 -5.4 0 -2.2Z' fill='%23ff4d8d' stroke='%23fff' stroke-width='0.8' transform='translate(11.0 27.5) rotate(-20) scale(1.1)'/%3E%3Cpath d='M0 -2.2C-1.6 -5.4 -6.4 -4.6 -6.4 -0.8C-6.4 2.6 -2.6 4.8 0 7C2.6 4.8 6.4 2.6 6.4 -0.8C6.4 -4.6 1.6 -5.4 0 -2.2Z' fill='%23ffb3cf' stroke='%23fff' stroke-width='0.8' transform='translate(31.0 9.2) rotate(-10) scale(0.7)'/%3E%3C/svg%3E"); border-radius: 0; animation: frBeat 1.6s ease-in-out infinite; }
.av-frame.f-stars { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='0.00,-6.00 1.53,-2.10 5.71,-1.85 2.47,0.80 3.53,4.85 0.00,2.60 -3.53,4.85 -2.47,0.80 -5.71,-1.85 -1.53,-2.10' fill='%23ffd24a' stroke='%23fff6c8' stroke-width='0.6' transform='translate(65.4 7.7) scale(1.0) rotate(20)'/%3E%3Cpolygon points='0.00,-6.00 1.53,-2.10 5.71,-1.85 2.47,0.80 3.53,4.85 0.00,2.60 -3.53,4.85 -2.47,0.80 -5.71,-1.85 -1.53,-2.10' fill='%23fff1a8' stroke='%23fff6c8' stroke-width='0.6' transform='translate(89.0 27.5) scale(0.65) rotate(60)'/%3E%3Cpolygon points='0.00,-6.00 1.53,-2.10 5.71,-1.85 2.47,0.80 3.53,4.85 0.00,2.60 -3.53,4.85 -2.47,0.80 -5.71,-1.85 -1.53,-2.10' fill='%23ffd24a' stroke='%23fff6c8' stroke-width='0.6' transform='translate(92.3 65.4) scale(0.85) rotate(110)'/%3E%3Cpolygon points='0.00,-6.00 1.53,-2.10 5.71,-1.85 2.47,0.80 3.53,4.85 0.00,2.60 -3.53,4.85 -2.47,0.80 -5.71,-1.85 -1.53,-2.10' fill='%23fff1a8' stroke='%23fff6c8' stroke-width='0.6' transform='translate(65.4 92.3) scale(0.55) rotate(160)'/%3E%3Cpolygon points='0.00,-6.00 1.53,-2.10 5.71,-1.85 2.47,0.80 3.53,4.85 0.00,2.60 -3.53,4.85 -2.47,0.80 -5.71,-1.85 -1.53,-2.10' fill='%23ffd24a' stroke='%23fff6c8' stroke-width='0.6' transform='translate(7.7 65.4) scale(0.9) rotate(250)'/%3E%3Cpolygon points='0.00,-6.00 1.53,-2.10 5.71,-1.85 2.47,0.80 3.53,4.85 0.00,2.60 -3.53,4.85 -2.47,0.80 -5.71,-1.85 -1.53,-2.10' fill='%23fff1a8' stroke='%23fff6c8' stroke-width='0.6' transform='translate(21.1 15.5) scale(0.7) rotate(320)'/%3E%3C/svg%3E"); border-radius: 0; animation: frTwinkle 2.2s ease-in-out infinite alternate; }
.av-frame.f-sakura { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg transform='translate(89.0 72.5) scale(1.2) rotate(120)'%3E%3Cellipse cx='0' cy='-3.4' rx='2.4' ry='3.6' fill='%23ffc0d9' stroke='%23ff8fb8' stroke-width='0.4' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-3.4' rx='2.4' ry='3.6' fill='%23ffc0d9' stroke='%23ff8fb8' stroke-width='0.4' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-3.4' rx='2.4' ry='3.6' fill='%23ffc0d9' stroke='%23ff8fb8' stroke-width='0.4' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-3.4' rx='2.4' ry='3.6' fill='%23ffc0d9' stroke='%23ff8fb8' stroke-width='0.4' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-3.4' rx='2.4' ry='3.6' fill='%23ffc0d9' stroke='%23ff8fb8' stroke-width='0.4' transform='rotate(288)'/%3E%3Ccircle r='1.4' fill='%23ffd24a'/%3E%3C/g%3E%3Cg transform='translate(72.5 89.0) scale(0.9) rotate(150)'%3E%3Cellipse cx='0' cy='-3.4' rx='2.4' ry='3.6' fill='%23ffc0d9' stroke='%23ff8fb8' stroke-width='0.4' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-3.4' rx='2.4' ry='3.6' fill='%23ffc0d9' stroke='%23ff8fb8' stroke-width='0.4' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-3.4' rx='2.4' ry='3.6' fill='%23ffc0d9' stroke='%23ff8fb8' stroke-width='0.4' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-3.4' rx='2.4' ry='3.6' fill='%23ffc0d9' stroke='%23ff8fb8' stroke-width='0.4' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-3.4' rx='2.4' ry='3.6' fill='%23ffc0d9' stroke='%23ff8fb8' stroke-width='0.4' transform='rotate(288)'/%3E%3Ccircle r='1.4' fill='%23ffd24a'/%3E%3C/g%3E%3Cg transform='translate(50.0 95.0) scale(1.05) rotate(180)'%3E%3Cellipse cx='0' cy='-3.4' rx='2.4' ry='3.6' fill='%23ffc0d9' stroke='%23ff8fb8' stroke-width='0.4' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-3.4' rx='2.4' ry='3.6' fill='%23ffc0d9' stroke='%23ff8fb8' stroke-width='0.4' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-3.4' rx='2.4' ry='3.6' fill='%23ffc0d9' stroke='%23ff8fb8' stroke-width='0.4' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-3.4' rx='2.4' ry='3.6' fill='%23ffc0d9' stroke='%23ff8fb8' stroke-width='0.4' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-3.4' rx='2.4' ry='3.6' fill='%23ffc0d9' stroke='%23ff8fb8' stroke-width='0.4' transform='rotate(288)'/%3E%3Ccircle r='1.4' fill='%23ffd24a'/%3E%3C/g%3E%3Cg transform='translate(27.5 89.0) scale(0.8) rotate(210)'%3E%3Cellipse cx='0' cy='-3.4' rx='2.4' ry='3.6' fill='%23ffc0d9' stroke='%23ff8fb8' stroke-width='0.4' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-3.4' rx='2.4' ry='3.6' fill='%23ffc0d9' stroke='%23ff8fb8' stroke-width='0.4' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-3.4' rx='2.4' ry='3.6' fill='%23ffc0d9' stroke='%23ff8fb8' stroke-width='0.4' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-3.4' rx='2.4' ry='3.6' fill='%23ffc0d9' stroke='%23ff8fb8' stroke-width='0.4' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-3.4' rx='2.4' ry='3.6' fill='%23ffc0d9' stroke='%23ff8fb8' stroke-width='0.4' transform='rotate(288)'/%3E%3Ccircle r='1.4' fill='%23ffd24a'/%3E%3C/g%3E%3Cg transform='translate(11.0 72.5) scale(1.15) rotate(240)'%3E%3Cellipse cx='0' cy='-3.4' rx='2.4' ry='3.6' fill='%23ffc0d9' stroke='%23ff8fb8' stroke-width='0.4' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-3.4' rx='2.4' ry='3.6' fill='%23ffc0d9' stroke='%23ff8fb8' stroke-width='0.4' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-3.4' rx='2.4' ry='3.6' fill='%23ffc0d9' stroke='%23ff8fb8' stroke-width='0.4' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-3.4' rx='2.4' ry='3.6' fill='%23ffc0d9' stroke='%23ff8fb8' stroke-width='0.4' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-3.4' rx='2.4' ry='3.6' fill='%23ffc0d9' stroke='%23ff8fb8' stroke-width='0.4' transform='rotate(288)'/%3E%3Ccircle r='1.4' fill='%23ffd24a'/%3E%3C/g%3E%3Cg transform='translate(78.9 15.5) scale(0.75) rotate(40)'%3E%3Cellipse cx='0' cy='-3.4' rx='2.4' ry='3.6' fill='%23ffc0d9' stroke='%23ff8fb8' stroke-width='0.4' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-3.4' rx='2.4' ry='3.6' fill='%23ffc0d9' stroke='%23ff8fb8' stroke-width='0.4' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-3.4' rx='2.4' ry='3.6' fill='%23ffc0d9' stroke='%23ff8fb8' stroke-width='0.4' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-3.4' rx='2.4' ry='3.6' fill='%23ffc0d9' stroke='%23ff8fb8' stroke-width='0.4' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-3.4' rx='2.4' ry='3.6' fill='%23ffc0d9' stroke='%23ff8fb8' stroke-width='0.4' transform='rotate(288)'/%3E%3Ccircle r='1.4' fill='%23ffd24a'/%3E%3C/g%3E%3C/svg%3E"); border-radius: 0; }
.av-frame.f-cat { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M15 31 L19 3 L41 17 Z' fill='%233b3b45' stroke='%231f1f26' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cpath d='M20 25 L22 10 L34 18 Z' fill='%23ff9ec7'/%3E%3Cpath d='M85 31 L81 3 L59 17 Z' fill='%233b3b45' stroke='%231f1f26' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cpath d='M80 25 L78 10 L66 18 Z' fill='%23ff9ec7'/%3E%3C/svg%3E"); border-radius: 0; }
.av-frame.f-crown { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg transform='rotate(22 50 50)'%3E%3Cpath d='M33 17 L35 2 L43 10 L50 0 L57 10 L65 2 L67 17 Z' fill='%23ffd24a' stroke='%23b8860b' stroke-width='1.2' stroke-linejoin='round'/%3E%3Crect x='33' y='15' width='34' height='5' rx='1.5' fill='%23f0b232' stroke='%23b8860b' stroke-width='1'/%3E%3Ccircle cx='50' cy='8' r='2' fill='%23ff4d6d'/%3E%3Ccircle cx='38' cy='10' r='1.4' fill='%234cc9ff'/%3E%3Ccircle cx='62' cy='10' r='1.4' fill='%234cc9ff'/%3E%3C/g%3E%3C/svg%3E"); border-radius: 0; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); }
.av-frame.f-halo { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cellipse cx='50' cy='5' rx='23' ry='5' fill='none' stroke='%23ffe58a' stroke-width='3.2'/%3E%3Cellipse cx='50' cy='5' rx='23' ry='5' fill='none' stroke='%23fff' stroke-width='1' opacity='.8'/%3E%3C/svg%3E"); border-radius: 0; filter: drop-shadow(0 0 3px #ffe58a); animation: frFloat 2.6s ease-in-out infinite; }
.av-frame.f-horns { background-image: 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='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%238b0000'/%3E%3Cstop offset='1' stop-color='%23ff3b3b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M26 22 Q13 14 15 0 Q21 12 36 15 Z' fill='url(%23g)' stroke='%234a0000' stroke-width='1' stroke-linejoin='round'/%3E%3Cpath d='M74 22 Q87 14 85 0 Q79 12 64 15 Z' fill='url(%23g)' stroke='%234a0000' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E"); border-radius: 0; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); }
.av-frame.f-headphones { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M12 52 A38 38 0 0 1 88 52' fill='none' stroke='%2350505c' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M12 52 A38 38 0 0 1 88 52' fill='none' stroke='%238a8a98' stroke-width='2' stroke-linecap='round'/%3E%3Crect x='3' y='44' width='14' height='24' rx='6' fill='%2350505c'/%3E%3Crect x='5' y='47' width='6' height='18' rx='3' fill='%2387c43a'/%3E%3Crect x='83' y='44' width='14' height='24' rx='6' fill='%2350505c'/%3E%3Crect x='89' y='47' width='6' height='18' rx='3' fill='%2387c43a'/%3E%3C/svg%3E"); border-radius: 0; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
@keyframes frSpin { to { transform: rotate(360deg); } }
@keyframes frHue { to { filter: drop-shadow(0 0 3px #ff3df5) drop-shadow(0 0 6px #3df5ff) hue-rotate(360deg); } }
@keyframes frFlicker { from { opacity: .85; } to { opacity: 1; } }
@keyframes frBeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes frTwinkle { from { opacity: .7; } to { opacity: 1; } }
@keyframes frFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--s) * -0.03)); } }
/* more frames */
.av-frame.f-emerald { background: conic-gradient(from 30deg, #d9ffe9, #10b46e, #7dffc2, #087a49, #b3ffd9, #10b46e, #d9ffe9); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); filter: drop-shadow(0 0 2px rgba(16, 180, 110, .7)); }
.av-frame.f-rosegold { background: conic-gradient(from 10deg, #ffe0e6, #e8a39e, #fff1e8, #c97f7a, #ffd6c9, #e8a39e, #ffe0e6); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); filter: drop-shadow(0 0 2px rgba(232, 163, 158, .7)); }
.av-frame.f-pixel { background: repeating-conic-gradient(#5cff9d 0 12deg, #4cc9ff 12deg 24deg, #ff4fd8 24deg 36deg, transparent 36deg 45deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); animation: frSpin 6s steps(8) infinite; }
.av-frame.f-ocean { background: conic-gradient(#0a3d91, #1fa2ff, #a6ffef, #12d8fa, #0a3d91); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); filter: drop-shadow(0 0 3px rgba(31, 162, 255, .7)); animation: frSpin 7s linear infinite; }
.av-frame.f-flowers { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cellipse cx='0' cy='0' rx='2.4' ry='5.2' fill='%235cb85c' stroke='%232f7a2f' stroke-width='0.5' transform='translate(95.8 54.0) rotate(185) scale(1)'/%3E%3Cellipse cx='0' cy='0' rx='2.4' ry='5.2' fill='%235cb85c' stroke='%232f7a2f' stroke-width='0.5' transform='translate(91.0 70.9) rotate(207) scale(1)'/%3E%3Cellipse cx='0' cy='0' rx='2.4' ry='5.2' fill='%235cb85c' stroke='%232f7a2f' stroke-width='0.5' transform='translate(80.2 84.7) rotate(229) scale(1)'/%3E%3Cellipse cx='0' cy='0' rx='2.4' ry='5.2' fill='%235cb85c' stroke='%232f7a2f' stroke-width='0.5' transform='translate(65.0 93.5) rotate(251) scale(1)'/%3E%3Cellipse cx='0' cy='0' rx='2.4' ry='5.2' fill='%235cb85c' stroke='%232f7a2f' stroke-width='0.5' transform='translate(47.6 95.9) rotate(273) scale(1)'/%3E%3Cellipse cx='0' cy='0' rx='2.4' ry='5.2' fill='%235cb85c' stroke='%232f7a2f' stroke-width='0.5' transform='translate(30.6 91.7) rotate(295) scale(1)'/%3E%3Cellipse cx='0' cy='0' rx='2.4' ry='5.2' fill='%235cb85c' stroke='%232f7a2f' stroke-width='0.5' transform='translate(16.4 81.4) rotate(317) scale(1)'/%3E%3Cellipse cx='0' cy='0' rx='2.4' ry='5.2' fill='%235cb85c' stroke='%232f7a2f' stroke-width='0.5' transform='translate(7.1 66.5) rotate(339) scale(1)'/%3E%3Cg transform='translate(94.3 57.8) scale(0.8) rotate(100)'%3E%3Ccircle cx='0' cy='-3' r='2.6' fill='%23ff8fb8' transform='rotate(0)'/%3E%3Ccircle cx='0' cy='-3' r='2.6' fill='%23ff8fb8' transform='rotate(72)'/%3E%3Ccircle cx='0' cy='-3' r='2.6' fill='%23ff8fb8' transform='rotate(144)'/%3E%3Ccircle cx='0' cy='-3' r='2.6' fill='%23ff8fb8' transform='rotate(216)'/%3E%3Ccircle cx='0' cy='-3' r='2.6' fill='%23ff8fb8' transform='rotate(288)'/%3E%3Ccircle r='1.6' fill='%23fff6c8'/%3E%3C/g%3E%3Cg transform='translate(86.4 76.5) scale(1.0) rotate(126)'%3E%3Ccircle cx='0' cy='-3' r='2.6' fill='%23ffd24a' transform='rotate(0)'/%3E%3Ccircle cx='0' cy='-3' r='2.6' fill='%23ffd24a' transform='rotate(72)'/%3E%3Ccircle cx='0' cy='-3' r='2.6' fill='%23ffd24a' transform='rotate(144)'/%3E%3Ccircle cx='0' cy='-3' r='2.6' fill='%23ffd24a' transform='rotate(216)'/%3E%3Ccircle cx='0' cy='-3' r='2.6' fill='%23ffd24a' transform='rotate(288)'/%3E%3Ccircle r='1.6' fill='%23fff6c8'/%3E%3C/g%3E%3Cg transform='translate(71.1 89.7) scale(0.8) rotate(152)'%3E%3Ccircle cx='0' cy='-3' r='2.6' fill='%23c9a0ff' transform='rotate(0)'/%3E%3Ccircle cx='0' cy='-3' r='2.6' fill='%23c9a0ff' transform='rotate(72)'/%3E%3Ccircle cx='0' cy='-3' r='2.6' fill='%23c9a0ff' transform='rotate(144)'/%3E%3Ccircle cx='0' cy='-3' r='2.6' fill='%23c9a0ff' transform='rotate(216)'/%3E%3Ccircle cx='0' cy='-3' r='2.6' fill='%23c9a0ff' transform='rotate(288)'/%3E%3Ccircle r='1.6' fill='%23fff6c8'/%3E%3C/g%3E%3Cg transform='translate(51.6 95.0) scale(1.0) rotate(178)'%3E%3Ccircle cx='0' cy='-3' r='2.6' fill='%237fd3ff' transform='rotate(0)'/%3E%3Ccircle cx='0' cy='-3' r='2.6' fill='%237fd3ff' transform='rotate(72)'/%3E%3Ccircle cx='0' cy='-3' r='2.6' fill='%237fd3ff' transform='rotate(144)'/%3E%3Ccircle cx='0' cy='-3' r='2.6' fill='%237fd3ff' transform='rotate(216)'/%3E%3Ccircle cx='0' cy='-3' r='2.6' fill='%237fd3ff' transform='rotate(288)'/%3E%3Ccircle r='1.6' fill='%23fff6c8'/%3E%3C/g%3E%3Cg transform='translate(31.7 91.1) scale(0.8) rotate(204)'%3E%3Ccircle cx='0' cy='-3' r='2.6' fill='%23ff9e5c' transform='rotate(0)'/%3E%3Ccircle cx='0' cy='-3' r='2.6' fill='%23ff9e5c' transform='rotate(72)'/%3E%3Ccircle cx='0' cy='-3' r='2.6' fill='%23ff9e5c' transform='rotate(144)'/%3E%3Ccircle cx='0' cy='-3' r='2.6' fill='%23ff9e5c' transform='rotate(216)'/%3E%3Ccircle cx='0' cy='-3' r='2.6' fill='%23ff9e5c' transform='rotate(288)'/%3E%3Ccircle r='1.6' fill='%23fff6c8'/%3E%3C/g%3E%3Cg transform='translate(15.5 78.9) scale(1.0) rotate(230)'%3E%3Ccircle cx='0' cy='-3' r='2.6' fill='%23ff8fb8' transform='rotate(0)'/%3E%3Ccircle cx='0' cy='-3' r='2.6' fill='%23ff8fb8' transform='rotate(72)'/%3E%3Ccircle cx='0' cy='-3' r='2.6' fill='%23ff8fb8' transform='rotate(144)'/%3E%3Ccircle cx='0' cy='-3' r='2.6' fill='%23ff8fb8' transform='rotate(216)'/%3E%3Ccircle cx='0' cy='-3' r='2.6' fill='%23ff8fb8' transform='rotate(288)'/%3E%3Ccircle r='1.6' fill='%23fff6c8'/%3E%3C/g%3E%3Cg transform='translate(6.3 60.9) scale(0.8) rotate(256)'%3E%3Ccircle cx='0' cy='-3' r='2.6' fill='%23ffd24a' transform='rotate(0)'/%3E%3Ccircle cx='0' cy='-3' r='2.6' fill='%23ffd24a' transform='rotate(72)'/%3E%3Ccircle cx='0' cy='-3' r='2.6' fill='%23ffd24a' transform='rotate(144)'/%3E%3Ccircle cx='0' cy='-3' r='2.6' fill='%23ffd24a' transform='rotate(216)'/%3E%3Ccircle cx='0' cy='-3' r='2.6' fill='%23ffd24a' transform='rotate(288)'/%3E%3Ccircle r='1.6' fill='%23fff6c8'/%3E%3C/g%3E%3C/svg%3E"); border-radius: 0; }
.av-frame.f-leaves { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cellipse cx='0' cy='0' rx='2.4' ry='5.2' fill='%237fbf3f' stroke='%232f7a2f' stroke-width='0.5' transform='translate(93.2 65.7) rotate(170) scale(1.0)'/%3E%3Cellipse cx='0' cy='0' rx='2.4' ry='5.2' fill='%237fbf3f' stroke='%232f7a2f' stroke-width='0.5' transform='translate(88.6 75.1) rotate(183) scale(1.0)'/%3E%3Cellipse cx='0' cy='0' rx='2.4' ry='5.2' fill='%237fbf3f' stroke='%232f7a2f' stroke-width='0.5' transform='translate(82.0 83.1) rotate(196) scale(1.0)'/%3E%3Cellipse cx='0' cy='0' rx='2.4' ry='5.2' fill='%237fbf3f' stroke='%232f7a2f' stroke-width='0.5' transform='translate(73.7 89.4) rotate(209) scale(1.0)'/%3E%3Cellipse cx='0' cy='0' rx='2.4' ry='5.2' fill='%237fbf3f' stroke='%232f7a2f' stroke-width='0.5' transform='translate(64.2 93.7) rotate(222) scale(1.0)'/%3E%3Cellipse cx='0' cy='0' rx='2.4' ry='5.2' fill='%237fbf3f' stroke='%232f7a2f' stroke-width='0.5' transform='translate(54.0 95.8) rotate(235) scale(1.0)'/%3E%3Cellipse cx='0' cy='0' rx='2.4' ry='5.2' fill='%237fbf3f' stroke='%232f7a2f' stroke-width='0.5' transform='translate(38.1 94.4) rotate(315) scale(1.0)'/%3E%3Cellipse cx='0' cy='0' rx='2.4' ry='5.2' fill='%237fbf3f' stroke='%232f7a2f' stroke-width='0.5' transform='translate(28.4 90.6) rotate(328) scale(1.0)'/%3E%3Cellipse cx='0' cy='0' rx='2.4' ry='5.2' fill='%237fbf3f' stroke='%232f7a2f' stroke-width='0.5' transform='translate(19.8 84.7) rotate(341) scale(1.0)'/%3E%3Cellipse cx='0' cy='0' rx='2.4' ry='5.2' fill='%237fbf3f' stroke='%232f7a2f' stroke-width='0.5' transform='translate(12.8 77.0) rotate(354) scale(1.0)'/%3E%3Cellipse cx='0' cy='0' rx='2.4' ry='5.2' fill='%237fbf3f' stroke='%232f7a2f' stroke-width='0.5' transform='translate(7.7 68.0) rotate(367) scale(1.0)'/%3E%3Cellipse cx='0' cy='0' rx='2.4' ry='5.2' fill='%237fbf3f' stroke='%232f7a2f' stroke-width='0.5' transform='translate(4.7 58.0) rotate(380) scale(1.0)'/%3E%3Cpath d='M44 96 Q50 92 56 96' fill='none' stroke='%23d4a017' stroke-width='2'/%3E%3C/svg%3E"); border-radius: 0; }
.av-frame.f-snow { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg transform='translate(65.4 7.7) scale(1.1)'%3E%3Cg transform='rotate(0)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5' stroke='%23e8fbff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='0' y1='-3' x2='-1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3Cline x1='0' y1='-3' x2='1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3C/g%3E%3Cg transform='rotate(60)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5' stroke='%23e8fbff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='0' y1='-3' x2='-1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3Cline x1='0' y1='-3' x2='1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3C/g%3E%3Cg transform='rotate(120)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5' stroke='%23e8fbff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='0' y1='-3' x2='-1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3Cline x1='0' y1='-3' x2='1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3C/g%3E%3Cg transform='rotate(180)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5' stroke='%23e8fbff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='0' y1='-3' x2='-1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3Cline x1='0' y1='-3' x2='1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3C/g%3E%3Cg transform='rotate(240)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5' stroke='%23e8fbff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='0' y1='-3' x2='-1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3Cline x1='0' y1='-3' x2='1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3C/g%3E%3Cg transform='rotate(300)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5' stroke='%23e8fbff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='0' y1='-3' x2='-1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3Cline x1='0' y1='-3' x2='1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(90.8 31.0) scale(0.75)'%3E%3Cg transform='rotate(0)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5' stroke='%23e8fbff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='0' y1='-3' x2='-1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3Cline x1='0' y1='-3' x2='1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3C/g%3E%3Cg transform='rotate(60)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5' stroke='%23e8fbff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='0' y1='-3' x2='-1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3Cline x1='0' y1='-3' x2='1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3C/g%3E%3Cg transform='rotate(120)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5' stroke='%23e8fbff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='0' y1='-3' x2='-1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3Cline x1='0' y1='-3' x2='1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3C/g%3E%3Cg transform='rotate(180)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5' stroke='%23e8fbff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='0' y1='-3' x2='-1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3Cline x1='0' y1='-3' x2='1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3C/g%3E%3Cg transform='rotate(240)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5' stroke='%23e8fbff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='0' y1='-3' x2='-1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3Cline x1='0' y1='-3' x2='1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3C/g%3E%3Cg transform='rotate(300)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5' stroke='%23e8fbff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='0' y1='-3' x2='-1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3Cline x1='0' y1='-3' x2='1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(90.8 69.0) scale(1.0)'%3E%3Cg transform='rotate(0)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5' stroke='%23e8fbff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='0' y1='-3' x2='-1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3Cline x1='0' y1='-3' x2='1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3C/g%3E%3Cg transform='rotate(60)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5' stroke='%23e8fbff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='0' y1='-3' x2='-1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3Cline x1='0' y1='-3' x2='1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3C/g%3E%3Cg transform='rotate(120)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5' stroke='%23e8fbff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='0' y1='-3' x2='-1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3Cline x1='0' y1='-3' x2='1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3C/g%3E%3Cg transform='rotate(180)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5' stroke='%23e8fbff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='0' y1='-3' x2='-1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3Cline x1='0' y1='-3' x2='1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3C/g%3E%3Cg transform='rotate(240)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5' stroke='%23e8fbff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='0' y1='-3' x2='-1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3Cline x1='0' y1='-3' x2='1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3C/g%3E%3Cg transform='rotate(300)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5' stroke='%23e8fbff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='0' y1='-3' x2='-1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3Cline x1='0' y1='-3' x2='1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(57.8 94.3) scale(0.7)'%3E%3Cg transform='rotate(0)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5' stroke='%23e8fbff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='0' y1='-3' x2='-1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3Cline x1='0' y1='-3' x2='1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3C/g%3E%3Cg transform='rotate(60)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5' stroke='%23e8fbff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='0' y1='-3' x2='-1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3Cline x1='0' y1='-3' x2='1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3C/g%3E%3Cg transform='rotate(120)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5' stroke='%23e8fbff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='0' y1='-3' x2='-1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3Cline x1='0' y1='-3' x2='1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3C/g%3E%3Cg transform='rotate(180)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5' stroke='%23e8fbff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='0' y1='-3' x2='-1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3Cline x1='0' y1='-3' x2='1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3C/g%3E%3Cg transform='rotate(240)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5' stroke='%23e8fbff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='0' y1='-3' x2='-1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3Cline x1='0' y1='-3' x2='1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3C/g%3E%3Cg transform='rotate(300)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5' stroke='%23e8fbff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='0' y1='-3' x2='-1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3Cline x1='0' y1='-3' x2='1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(13.1 75.8) scale(1.15)'%3E%3Cg transform='rotate(0)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5' stroke='%23e8fbff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='0' y1='-3' x2='-1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3Cline x1='0' y1='-3' x2='1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3C/g%3E%3Cg transform='rotate(60)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5' stroke='%23e8fbff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='0' y1='-3' x2='-1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3Cline x1='0' y1='-3' x2='1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3C/g%3E%3Cg transform='rotate(120)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5' stroke='%23e8fbff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='0' y1='-3' x2='-1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3Cline x1='0' y1='-3' x2='1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3C/g%3E%3Cg transform='rotate(180)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5' stroke='%23e8fbff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='0' y1='-3' x2='-1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3Cline x1='0' y1='-3' x2='1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3C/g%3E%3Cg transform='rotate(240)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5' stroke='%23e8fbff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='0' y1='-3' x2='-1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3Cline x1='0' y1='-3' x2='1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3C/g%3E%3Cg transform='rotate(300)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5' stroke='%23e8fbff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='0' y1='-3' x2='-1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3Cline x1='0' y1='-3' x2='1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(7.7 34.6) scale(0.8)'%3E%3Cg transform='rotate(0)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5' stroke='%23e8fbff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='0' y1='-3' x2='-1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3Cline x1='0' y1='-3' x2='1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3C/g%3E%3Cg transform='rotate(60)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5' stroke='%23e8fbff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='0' y1='-3' x2='-1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3Cline x1='0' y1='-3' x2='1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3C/g%3E%3Cg transform='rotate(120)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5' stroke='%23e8fbff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='0' y1='-3' x2='-1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3Cline x1='0' y1='-3' x2='1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3C/g%3E%3Cg transform='rotate(180)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5' stroke='%23e8fbff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='0' y1='-3' x2='-1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3Cline x1='0' y1='-3' x2='1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3C/g%3E%3Cg transform='rotate(240)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5' stroke='%23e8fbff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='0' y1='-3' x2='-1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3Cline x1='0' y1='-3' x2='1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3C/g%3E%3Cg transform='rotate(300)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5' stroke='%23e8fbff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='0' y1='-3' x2='-1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3Cline x1='0' y1='-3' x2='1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(27.5 11.0) scale(0.65)'%3E%3Cg transform='rotate(0)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5' stroke='%23e8fbff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='0' y1='-3' x2='-1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3Cline x1='0' y1='-3' x2='1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3C/g%3E%3Cg transform='rotate(60)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5' stroke='%23e8fbff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='0' y1='-3' x2='-1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3Cline x1='0' y1='-3' x2='1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3C/g%3E%3Cg transform='rotate(120)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5' stroke='%23e8fbff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='0' y1='-3' x2='-1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3Cline x1='0' y1='-3' x2='1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3C/g%3E%3Cg transform='rotate(180)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5' stroke='%23e8fbff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='0' y1='-3' x2='-1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3Cline x1='0' y1='-3' x2='1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3C/g%3E%3Cg transform='rotate(240)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5' stroke='%23e8fbff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='0' y1='-3' x2='-1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3Cline x1='0' y1='-3' x2='1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3C/g%3E%3Cg transform='rotate(300)'%3E%3Cline x1='0' y1='0' x2='0' y2='-5' stroke='%23e8fbff' stroke-width='1.1' stroke-linecap='round'/%3E%3Cline x1='0' y1='-3' x2='-1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3Cline x1='0' y1='-3' x2='1.6' y2='-4.4' stroke='%23e8fbff' stroke-width='.8'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); border-radius: 0; filter: drop-shadow(0 0 1.5px #7fd3ff); animation: frSpin 18s linear infinite; }
.av-frame.f-butterflies { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg transform='translate(78.9 15.5) scale(1.7) rotate(20)'%3E%3Cellipse cx='-3.2' cy='-1.6' rx='3.4' ry='2.6' fill='%237fd3ff' transform='rotate(-25 -3.2 -1.6)'/%3E%3Cellipse cx='3.2' cy='-1.6' rx='3.4' ry='2.6' fill='%237fd3ff' transform='rotate(25 3.2 -1.6)'/%3E%3Cellipse cx='-2.2' cy='2.4' rx='2' ry='1.6' fill='%237fd3ff' opacity='.85'/%3E%3Cellipse cx='2.2' cy='2.4' rx='2' ry='1.6' fill='%237fd3ff' opacity='.85'/%3E%3Crect x='-0.5' y='-3.2' width='1' height='6.4' rx='.5' fill='%232b2b33'/%3E%3C/g%3E%3Cg transform='translate(78.9 84.5) scale(1.3) rotate(-15)'%3E%3Cellipse cx='-3.2' cy='-1.6' rx='3.4' ry='2.6' fill='%23ff8fb8' transform='rotate(-25 -3.2 -1.6)'/%3E%3Cellipse cx='3.2' cy='-1.6' rx='3.4' ry='2.6' fill='%23ff8fb8' transform='rotate(25 3.2 -1.6)'/%3E%3Cellipse cx='-2.2' cy='2.4' rx='2' ry='1.6' fill='%23ff8fb8' opacity='.85'/%3E%3Cellipse cx='2.2' cy='2.4' rx='2' ry='1.6' fill='%23ff8fb8' opacity='.85'/%3E%3Crect x='-0.5' y='-3.2' width='1' height='6.4' rx='.5' fill='%232b2b33'/%3E%3C/g%3E%3Cg transform='translate(7.7 34.6) scale(1.5) rotate(-30)'%3E%3Cellipse cx='-3.2' cy='-1.6' rx='3.4' ry='2.6' fill='%23ffd24a' transform='rotate(-25 -3.2 -1.6)'/%3E%3Cellipse cx='3.2' cy='-1.6' rx='3.4' ry='2.6' fill='%23ffd24a' transform='rotate(25 3.2 -1.6)'/%3E%3Cellipse cx='-2.2' cy='2.4' rx='2' ry='1.6' fill='%23ffd24a' opacity='.85'/%3E%3Cellipse cx='2.2' cy='2.4' rx='2' ry='1.6' fill='%23ffd24a' opacity='.85'/%3E%3Crect x='-0.5' y='-3.2' width='1' height='6.4' rx='.5' fill='%232b2b33'/%3E%3C/g%3E%3C/svg%3E"); border-radius: 0; animation: frFloat 2.2s ease-in-out infinite; }
.av-frame.f-music { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg transform='translate(72.5 11.0) scale(1.6) rotate(10)'%3E%3Cellipse cx='-1.8' cy='3' rx='2.4' ry='1.8' fill='%23ff4fd8' transform='rotate(-20 -1.8 3)'/%3E%3Crect x='0.2' y='-5' width='1' height='8.2' fill='%23ff4fd8'/%3E%3Cpath d='M1.2 -5 Q5 -3.6 4.2 0.4 Q4.4 -2.6 1.2 -2.8 Z' fill='%23ff4fd8'/%3E%3C/g%3E%3Cg transform='translate(94.3 42.2) scale(1.2) rotate(-10)'%3E%3Cellipse cx='-1.8' cy='3' rx='2.4' ry='1.8' fill='%234cc9ff' transform='rotate(-20 -1.8 3)'/%3E%3Crect x='0.2' y='-5' width='1' height='8.2' fill='%234cc9ff'/%3E%3Cpath d='M1.2 -5 Q5 -3.6 4.2 0.4 Q4.4 -2.6 1.2 -2.8 Z' fill='%234cc9ff'/%3E%3C/g%3E%3Cg transform='translate(81.8 81.8) scale(1.4) rotate(15)'%3E%3Cellipse cx='-1.8' cy='3' rx='2.4' ry='1.8' fill='%23ffd24a' transform='rotate(-20 -1.8 3)'/%3E%3Crect x='0.2' y='-5' width='1' height='8.2' fill='%23ffd24a'/%3E%3Cpath d='M1.2 -5 Q5 -3.6 4.2 0.4 Q4.4 -2.6 1.2 -2.8 Z' fill='%23ffd24a'/%3E%3C/g%3E%3Cg transform='translate(24.2 86.9) scale(1.5) rotate(-5)'%3E%3Cellipse cx='-1.8' cy='3' rx='2.4' ry='1.8' fill='%235cff9d' transform='rotate(-20 -1.8 3)'/%3E%3Crect x='0.2' y='-5' width='1' height='8.2' fill='%235cff9d'/%3E%3Cpath d='M1.2 -5 Q5 -3.6 4.2 0.4 Q4.4 -2.6 1.2 -2.8 Z' fill='%235cff9d'/%3E%3C/g%3E%3Cg transform='translate(11.0 27.5) scale(1.25) rotate(20)'%3E%3Cellipse cx='-1.8' cy='3' rx='2.4' ry='1.8' fill='%23ff4fd8' transform='rotate(-20 -1.8 3)'/%3E%3Crect x='0.2' y='-5' width='1' height='8.2' fill='%23ff4fd8'/%3E%3Cpath d='M1.2 -5 Q5 -3.6 4.2 0.4 Q4.4 -2.6 1.2 -2.8 Z' fill='%23ff4fd8'/%3E%3C/g%3E%3C/svg%3E"); border-radius: 0; animation: frBeat 1s ease-in-out infinite; }
.av-frame.f-lightning { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M1 -7 L-4 1 L0 1 L-1.5 7 L4 -1.2 L0.2 -1.2 Z' fill='%23ffe14a' stroke='%23ff9d00' stroke-width='0.7' stroke-linejoin='round' transform='translate(72.5 11.0) scale(1.5) rotate(20)'/%3E%3Cpath d='M1 -7 L-4 1 L0 1 L-1.5 7 L4 -1.2 L0.2 -1.2 Z' fill='%23ffe14a' stroke='%23ff9d00' stroke-width='0.7' stroke-linejoin='round' transform='translate(94.3 57.8) scale(1.15) rotate(-10)'/%3E%3Cpath d='M1 -7 L-4 1 L0 1 L-1.5 7 L4 -1.2 L0.2 -1.2 Z' fill='%23ffe14a' stroke='%23ff9d00' stroke-width='0.7' stroke-linejoin='round' transform='translate(34.6 92.3) scale(1.35) rotate(15)'/%3E%3Cpath d='M1 -7 L-4 1 L0 1 L-1.5 7 L4 -1.2 L0.2 -1.2 Z' fill='%23ffe14a' stroke='%23ff9d00' stroke-width='0.7' stroke-linejoin='round' transform='translate(11.0 27.5) scale(1.5) rotate(-20)'/%3E%3C/svg%3E"); border-radius: 0; filter: drop-shadow(0 0 3px #ffe14a); animation: frZap 1.6s steps(1) infinite; }
.av-frame.f-bubbles { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='69.0' cy='9.2' r='4.2' fill='rgba(160,230,255,.15)' stroke='%23a8e8ff' stroke-width='0.9'/%3E%3Ccircle cx='67.5' cy='7.7' r='1.05' fill='%23fff' opacity='.8'/%3E%3Ccircle cx='89.0' cy='27.5' r='2.6' fill='rgba(160,230,255,.15)' stroke='%23a8e8ff' stroke-width='0.9'/%3E%3Ccircle cx='88.1' cy='26.6' r='0.65' fill='%23fff' opacity='.8'/%3E%3Ccircle cx='89.0' cy='72.5' r='3.4' fill='rgba(160,230,255,.15)' stroke='%23a8e8ff' stroke-width='0.9'/%3E%3Ccircle cx='87.8' cy='71.3' r='0.85' fill='%23fff' opacity='.8'/%3E%3Ccircle cx='65.4' cy='92.3' r='2.2' fill='rgba(160,230,255,.15)' stroke='%23a8e8ff' stroke-width='0.9'/%3E%3Ccircle cx='64.6' cy='91.5' r='0.55' fill='%23fff' opacity='.8'/%3E%3Ccircle cx='21.1' cy='84.5' r='4' fill='rgba(160,230,255,.15)' stroke='%23a8e8ff' stroke-width='0.9'/%3E%3Ccircle cx='19.7' cy='83.1' r='1.00' fill='%23fff' opacity='.8'/%3E%3Ccircle cx='5.2' cy='53.9' r='2.6' fill='rgba(160,230,255,.15)' stroke='%23a8e8ff' stroke-width='0.9'/%3E%3Ccircle cx='4.3' cy='53.0' r='0.65' fill='%23fff' opacity='.8'/%3E%3Ccircle cx='21.1' cy='15.5' r='3.2' fill='rgba(160,230,255,.15)' stroke='%23a8e8ff' stroke-width='0.9'/%3E%3Ccircle cx='20.0' cy='14.4' r='0.80' fill='%23fff' opacity='.8'/%3E%3C/svg%3E"); border-radius: 0; animation: frFloat 3s ease-in-out infinite; }
.av-frame.f-moon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg transform='translate(80 16) rotate(-15) scale(1.45)'%3E%3Cpath d='M4 -10 A11 11 0 1 0 4 10 A8.5 8.5 0 1 1 4 -10 Z' fill='%23ffe58a' stroke='%23e0b84a' stroke-width='0.8'/%3E%3C/g%3E%3Cpolygon points='0,-3 0.8,-0.8 3,0 0.8,0.8 0,3 -0.8,0.8 -3,0 -0.8,-0.8' fill='%23fff6c8' transform='translate(64 6) scale(1)'/%3E%3Cpolygon points='0,-3 0.8,-0.8 3,0 0.8,0.8 0,3 -0.8,0.8 -3,0 -0.8,-0.8' fill='%23fff6c8' transform='translate(93 33) scale(0.8)'/%3E%3Cpolygon points='0,-3 0.8,-0.8 3,0 0.8,0.8 0,3 -0.8,0.8 -3,0 -0.8,-0.8' fill='%23fff6c8' transform='translate(90 4) scale(0.7)'/%3E%3C/svg%3E"); border-radius: 0; filter: drop-shadow(0 0 3px rgba(255, 229, 138, .8)); }
.av-frame.f-bunny { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg transform='rotate(-14 34 20)'%3E%3Cellipse cx='34' cy='9' rx='7' ry='17' fill='%23f4f4f8' stroke='%23c9c9d6' stroke-width='1'/%3E%3Cellipse cx='34' cy='10' rx='3.4' ry='12' fill='%23ffb3cf'/%3E%3C/g%3E%3Cg transform='rotate(14 66 20)'%3E%3Cellipse cx='66' cy='9' rx='7' ry='17' fill='%23f4f4f8' stroke='%23c9c9d6' stroke-width='1'/%3E%3Cellipse cx='66' cy='10' rx='3.4' ry='12' fill='%23ffb3cf'/%3E%3C/g%3E%3C/svg%3E"); border-radius: 0; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .35)); }
.av-frame.f-bow { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg transform='translate(75 15) rotate(25) scale(1.35)'%3E%3Cpath d='M0 0 L-13 -8 Q-17 0 -13 8 Z' fill='%23ff4d8d' stroke='%23c2185b' stroke-width='1'/%3E%3Cpath d='M0 0 L13 -8 Q17 0 13 8 Z' fill='%23ff4d8d' stroke='%23c2185b' stroke-width='1'/%3E%3Cpath d='M-1 2 L-5 12 L-2 11 Z M1 2 L5 12 L2 11 Z' fill='%23e91e63'/%3E%3Ccircle r='3.4' fill='%23ff7aa8' stroke='%23c2185b' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E"); border-radius: 0; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .35)); }
.av-frame.f-partyhat { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg transform='translate(29 16) rotate(-22) scale(1.45)'%3E%3Cpolygon points='0,-16 -10,8 10,8' fill='%234cc9ff' stroke='%231f6f99' stroke-width='1' stroke-linejoin='round'/%3E%3Cpath d='M-6.3 -1 L6.3 -1 L7.6 2 L-7.6 2 Z' fill='%23ff4fd8'/%3E%3Cpath d='M-3.2 -8 L3.2 -8 L4.1 -6 L-4.1 -6 Z' fill='%23ffd24a'/%3E%3Ccircle cx='0' cy='-16.5' r='3' fill='%23ffd24a'/%3E%3Ccircle cx='-4' cy='4.5' r='1.1' fill='%23fff'/%3E%3Ccircle cx='3.5' cy='5' r='1.1' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E"); border-radius: 0; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .35)); }
.av-frame.f-witchhat { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg transform='translate(52 13) rotate(-8) scale(1.3)'%3E%3Cellipse cx='0' cy='4' rx='26' ry='5' fill='%233b1f5c' stroke='%231d0e30' stroke-width='1'/%3E%3Cpath d='M-12 3 Q-8 -10 2 -20 Q6 -24 12 -21 Q4 -16 8 3 Z' fill='%234b2775' stroke='%231d0e30' stroke-width='1' stroke-linejoin='round'/%3E%3Cpath d='M-11 -1 L8.5 -1 L8.4 2.6 L-11.6 2.6 Z' fill='%23ff9d2e'/%3E%3C/g%3E%3C/svg%3E"); border-radius: 0; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .4)); }
.av-frame.f-santa { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg transform='translate(50 13) rotate(12) scale(1.2)'%3E%3Cpath d='M-20 4 Q-8 -20 14 -14 Q24 -10 24 2 Z' fill='%23e52d2d' stroke='%238a1010' stroke-width='1' stroke-linejoin='round'/%3E%3Crect x='-22' y='0' width='44' height='7' rx='3.5' fill='%23fff' stroke='%23d6d6d6' stroke-width='0.8'/%3E%3Ccircle cx='25' cy='4' r='4' fill='%23fff' stroke='%23d6d6d6' stroke-width='0.8'/%3E%3C/g%3E%3C/svg%3E"); border-radius: 0; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .35)); }
.av-frame.f-sprout { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg transform='translate(50 12) scale(1.7) translate(-50 -12)'%3E%3Cpath d='M50 14 Q49 6 50 1' fill='none' stroke='%233f8f3f' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M50 6 Q40 -2 36 6 Q44 10 50 6 Z' fill='%237fd35c' stroke='%233f8f3f' stroke-width='0.8'/%3E%3Cpath d='M50 4 Q60 -4 64 4 Q56 8 50 4 Z' fill='%237fd35c' stroke='%233f8f3f' stroke-width='0.8'/%3E%3C/g%3E%3C/svg%3E"); border-radius: 0; transform-origin: 50% 14%; animation: frSway 2.4s ease-in-out infinite; }
@keyframes frZap { 0%, 70%, 100% { opacity: 1; } 75% { opacity: .2; } 85% { opacity: 1; } 90% { opacity: .4; } }
@keyframes frSway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
/* pride flag frames: the flag's stripes around the picture */
.av-frame.f-pride { background: conic-gradient(from -90deg, #e40303 0.00deg 60.00deg, #ff8c00 60.00deg 120.00deg, #ffed00 120.00deg 180.00deg, #008026 180.00deg 240.00deg, #004dff 240.00deg 300.00deg, #750787 300.00deg 360.00deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); --fw: calc(var(--s) * 0.11); filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .45)); }
.av-frame.f-trans { background: conic-gradient(from -90deg, #5bcefa 0.00deg 72.00deg, #f5a9b8 72.00deg 144.00deg, #ffffff 144.00deg 216.00deg, #f5a9b8 216.00deg 288.00deg, #5bcefa 288.00deg 360.00deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); --fw: calc(var(--s) * 0.11); filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .45)); }
.av-frame.f-bi { background: conic-gradient(from -90deg, #d60270 0.00deg 72.00deg, #d60270 72.00deg 144.00deg, #9b4f96 144.00deg 216.00deg, #0038a8 216.00deg 288.00deg, #0038a8 288.00deg 360.00deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); --fw: calc(var(--s) * 0.11); filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .45)); }
.av-frame.f-lesbian { background: conic-gradient(from -90deg, #d52d00 0.00deg 51.43deg, #ef7627 51.43deg 102.86deg, #ff9a56 102.86deg 154.29deg, #ffffff 154.29deg 205.71deg, #d162a4 205.71deg 257.14deg, #b55690 257.14deg 308.57deg, #a30262 308.57deg 360.00deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); --fw: calc(var(--s) * 0.11); filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .45)); }
.av-frame.f-pan { background: conic-gradient(from -90deg, #ff218c 0.00deg 120.00deg, #ffd800 120.00deg 240.00deg, #21b1ff 240.00deg 360.00deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); --fw: calc(var(--s) * 0.11); filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .45)); }
.av-frame.f-nonbinary { background: conic-gradient(from -90deg, #fcf434 0.00deg 90.00deg, #ffffff 90.00deg 180.00deg, #9c59d1 180.00deg 270.00deg, #2c2c2c 270.00deg 360.00deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); --fw: calc(var(--s) * 0.11); filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .45)); }
.av-frame.f-ace { background: conic-gradient(from -90deg, #000000 0.00deg 90.00deg, #a3a3a3 90.00deg 180.00deg, #ffffff 180.00deg 270.00deg, #800080 270.00deg 360.00deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); --fw: calc(var(--s) * 0.11); filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .45)); }
.av-frame.f-genderfluid { background: conic-gradient(from -90deg, #ff75a2 0.00deg 72.00deg, #ffffff 72.00deg 144.00deg, #be18d6 144.00deg 216.00deg, #000000 216.00deg 288.00deg, #333ebd 288.00deg 360.00deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); --fw: calc(var(--s) * 0.11); filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .45)); }
.av-frame.f-aro { background: conic-gradient(from -90deg, #3da542 0.00deg 72.00deg, #a7d379 72.00deg 144.00deg, #ffffff 144.00deg 216.00deg, #a9a9a9 216.00deg 288.00deg, #000000 288.00deg 360.00deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); --fw: calc(var(--s) * 0.11); filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .45)); }
.av-frame.f-agender { background: conic-gradient(from -90deg, #000000 0.00deg 51.43deg, #bcc4c7 51.43deg 102.86deg, #ffffff 102.86deg 154.29deg, #b7f684 154.29deg 205.71deg, #ffffff 205.71deg 257.14deg, #bcc4c7 257.14deg 308.57deg, #000000 308.57deg 360.00deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); --fw: calc(var(--s) * 0.11); filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .45)); }
.av-frame.f-gay { background: conic-gradient(from -90deg, #078d70 0.00deg 51.43deg, #26ceaa 51.43deg 102.86deg, #98e8c1 102.86deg 154.29deg, #ffffff 154.29deg 205.71deg, #7bade2 205.71deg 257.14deg, #5049cc 257.14deg 308.57deg, #3d1a78 308.57deg 360.00deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); --fw: calc(var(--s) * 0.11); filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .45)); }
.av-frame.f-demiboy { background: conic-gradient(from -90deg, #7f7f7f 0.00deg 51.43deg, #c4c4c4 51.43deg 102.86deg, #9ad9eb 102.86deg 154.29deg, #ffffff 154.29deg 205.71deg, #9ad9eb 205.71deg 257.14deg, #c4c4c4 257.14deg 308.57deg, #7f7f7f 308.57deg 360.00deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); --fw: calc(var(--s) * 0.11); filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .45)); }
.av-frame.f-demigirl { background: conic-gradient(from -90deg, #7f7f7f 0.00deg 51.43deg, #c4c4c4 51.43deg 102.86deg, #fcadc9 102.86deg 154.29deg, #ffffff 154.29deg 205.71deg, #fcadc9 205.71deg 257.14deg, #c4c4c4 257.14deg 308.57deg, #7f7f7f 308.57deg 360.00deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); --fw: calc(var(--s) * 0.11); filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .45)); }
.av-frame.f-omni { background: conic-gradient(from -90deg, #fe9ace 0.00deg 72.00deg, #ff53bf 72.00deg 144.00deg, #200044 144.00deg 216.00deg, #6760fe 216.00deg 288.00deg, #8ea6ff 288.00deg 360.00deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); --fw: calc(var(--s) * 0.11); filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .45)); }
.av-frame.f-diamond { background: radial-gradient(circle at 25% 15%, #fff 0 1.4px, transparent 2.2px), radial-gradient(circle at 85% 40%, #fff 0 1.2px, transparent 2px), radial-gradient(circle at 40% 92%, #fff 0 1.2px, transparent 2px), conic-gradient(#ffffff, #b9f2ff, #e9f9ff, #7fd6ff, #ffffff, #d6f4ff, #a6e9ff, #ffffff); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); filter: drop-shadow(0 0 3px rgba(185, 242, 255, .95)); animation: frTwinkle 1.6s ease-in-out infinite alternate; }
.av-frame.f-lava { background: conic-gradient(#3b0000, #ff3d00, #ffb300, #ff3d00, #7a0000, #ff6d00, #3b0000); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); filter: drop-shadow(0 0 4px #ff3d00); animation: frSpin 9s linear infinite; }
.av-frame.f-aurora { background: conic-gradient(#00e5a0, #00b3ff, #8c5bff, #00ffcc, #3dff7a, #00e5a0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); filter: drop-shadow(0 0 4px #00e5a0); animation: frSpin 12s linear infinite, frHueSoft 6s ease-in-out infinite alternate; }
.av-frame.f-sunset { background: conic-gradient(#ff7e5f, #feb47b, #ff6a88, #b06ab3, #4a3a8c, #ff7e5f); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); filter: drop-shadow(0 0 2px rgba(255, 126, 95, .7)); }
.av-frame.f-void { background: conic-gradient(#000000, #2a0a4a, #000000, #4b0f86, #000000); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - var(--fw)), #000 calc(100% - var(--fw) + 1px)); filter: drop-shadow(0 0 4px #8c3dff) drop-shadow(0 0 8px #4b0f86); animation: frPulseGlow 2.4s ease-in-out infinite; }
.av-frame.f-roses { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg transform='translate(92.3 65.4) scale(1.75) rotate(110)'%3E%3Cellipse cx='-4' cy='3.5' rx='3.4' ry='1.6' fill='%233f8f3f' transform='rotate(-30 -4 3.5)'/%3E%3Cellipse cx='4' cy='3.5' rx='3.4' ry='1.6' fill='%233f8f3f' transform='rotate(30 4 3.5)'/%3E%3Ccircle r='4.4' fill='%23d81b3c' stroke='%238b0a1f' stroke-width='0.6'/%3E%3Cpath d='M-2.2 -0.6 Q0 -3.4 2.4 -0.6 Q0 2.6 -2.2 -0.6 Z' fill='%23ff4d6d'/%3E%3Cpath d='M-1 0.2 Q0.4 -1.6 1.4 0.2' fill='none' stroke='%238b0a1f' stroke-width='0.6'/%3E%3C/g%3E%3Cg transform='translate(72.5 89.0) scale(1.4) rotate(150)'%3E%3Cellipse cx='-4' cy='3.5' rx='3.4' ry='1.6' fill='%233f8f3f' transform='rotate(-30 -4 3.5)'/%3E%3Cellipse cx='4' cy='3.5' rx='3.4' ry='1.6' fill='%233f8f3f' transform='rotate(30 4 3.5)'/%3E%3Ccircle r='4.4' fill='%23d81b3c' stroke='%238b0a1f' stroke-width='0.6'/%3E%3Cpath d='M-2.2 -0.6 Q0 -3.4 2.4 -0.6 Q0 2.6 -2.2 -0.6 Z' fill='%23ff4d6d'/%3E%3Cpath d='M-1 0.2 Q0.4 -1.6 1.4 0.2' fill='none' stroke='%238b0a1f' stroke-width='0.6'/%3E%3C/g%3E%3Cg transform='translate(34.6 92.3) scale(1.6) rotate(200)'%3E%3Cellipse cx='-4' cy='3.5' rx='3.4' ry='1.6' fill='%233f8f3f' transform='rotate(-30 -4 3.5)'/%3E%3Cellipse cx='4' cy='3.5' rx='3.4' ry='1.6' fill='%233f8f3f' transform='rotate(30 4 3.5)'/%3E%3Ccircle r='4.4' fill='%23d81b3c' stroke='%238b0a1f' stroke-width='0.6'/%3E%3Cpath d='M-2.2 -0.6 Q0 -3.4 2.4 -0.6 Q0 2.6 -2.2 -0.6 Z' fill='%23ff4d6d'/%3E%3Cpath d='M-1 0.2 Q0.4 -1.6 1.4 0.2' fill='none' stroke='%238b0a1f' stroke-width='0.6'/%3E%3C/g%3E%3Cg transform='translate(9.2 69.0) scale(1.35) rotate(245)'%3E%3Cellipse cx='-4' cy='3.5' rx='3.4' ry='1.6' fill='%233f8f3f' transform='rotate(-30 -4 3.5)'/%3E%3Cellipse cx='4' cy='3.5' rx='3.4' ry='1.6' fill='%233f8f3f' transform='rotate(30 4 3.5)'/%3E%3Ccircle r='4.4' fill='%23d81b3c' stroke='%238b0a1f' stroke-width='0.6'/%3E%3Cpath d='M-2.2 -0.6 Q0 -3.4 2.4 -0.6 Q0 2.6 -2.2 -0.6 Z' fill='%23ff4d6d'/%3E%3Cpath d='M-1 0.2 Q0.4 -1.6 1.4 0.2' fill='none' stroke='%238b0a1f' stroke-width='0.6'/%3E%3C/g%3E%3Cg transform='translate(75.8 13.1) scale(1.3) rotate(35)'%3E%3Cellipse cx='-4' cy='3.5' rx='3.4' ry='1.6' fill='%233f8f3f' transform='rotate(-30 -4 3.5)'/%3E%3Cellipse cx='4' cy='3.5' rx='3.4' ry='1.6' fill='%233f8f3f' transform='rotate(30 4 3.5)'/%3E%3Ccircle r='4.4' fill='%23d81b3c' stroke='%238b0a1f' stroke-width='0.6'/%3E%3Cpath d='M-2.2 -0.6 Q0 -3.4 2.4 -0.6 Q0 2.6 -2.2 -0.6 Z' fill='%23ff4d6d'/%3E%3Cpath d='M-1 0.2 Q0.4 -1.6 1.4 0.2' fill='none' stroke='%238b0a1f' stroke-width='0.6'/%3E%3C/g%3E%3C/svg%3E"); border-radius: 0; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
.av-frame.f-clovers { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg transform='translate(72.5 11.0) scale(1.5) rotate(30)'%3E%3Cpath d='M0 0 C-3.6 -2 -3.6 -6.2 0 -4.4 C3.6 -6.2 3.6 -2 0 0 Z' fill='%233cb371' stroke='%231e7a46' stroke-width='0.5' transform='rotate(0)'/%3E%3Cpath d='M0 0 C-3.6 -2 -3.6 -6.2 0 -4.4 C3.6 -6.2 3.6 -2 0 0 Z' fill='%233cb371' stroke='%231e7a46' stroke-width='0.5' transform='rotate(90)'/%3E%3Cpath d='M0 0 C-3.6 -2 -3.6 -6.2 0 -4.4 C3.6 -6.2 3.6 -2 0 0 Z' fill='%233cb371' stroke='%231e7a46' stroke-width='0.5' transform='rotate(180)'/%3E%3Cpath d='M0 0 C-3.6 -2 -3.6 -6.2 0 -4.4 C3.6 -6.2 3.6 -2 0 0 Z' fill='%233cb371' stroke='%231e7a46' stroke-width='0.5' transform='rotate(270)'/%3E%3Cpath d='M0 0 Q2 4 1 7' fill='none' stroke='%231e7a46' stroke-width='0.8'/%3E%3C/g%3E%3Cg transform='translate(94.8 53.9) scale(1.2) rotate(95)'%3E%3Cpath d='M0 0 C-3.6 -2 -3.6 -6.2 0 -4.4 C3.6 -6.2 3.6 -2 0 0 Z' fill='%233cb371' stroke='%231e7a46' stroke-width='0.5' transform='rotate(0)'/%3E%3Cpath d='M0 0 C-3.6 -2 -3.6 -6.2 0 -4.4 C3.6 -6.2 3.6 -2 0 0 Z' fill='%233cb371' stroke='%231e7a46' stroke-width='0.5' transform='rotate(90)'/%3E%3Cpath d='M0 0 C-3.6 -2 -3.6 -6.2 0 -4.4 C3.6 -6.2 3.6 -2 0 0 Z' fill='%233cb371' stroke='%231e7a46' stroke-width='0.5' transform='rotate(180)'/%3E%3Cpath d='M0 0 C-3.6 -2 -3.6 -6.2 0 -4.4 C3.6 -6.2 3.6 -2 0 0 Z' fill='%233cb371' stroke='%231e7a46' stroke-width='0.5' transform='rotate(270)'/%3E%3Cpath d='M0 0 Q2 4 1 7' fill='none' stroke='%231e7a46' stroke-width='0.8'/%3E%3C/g%3E%3Cg transform='translate(72.5 89.0) scale(1.55) rotate(150)'%3E%3Cpath d='M0 0 C-3.6 -2 -3.6 -6.2 0 -4.4 C3.6 -6.2 3.6 -2 0 0 Z' fill='%233cb371' stroke='%231e7a46' stroke-width='0.5' transform='rotate(0)'/%3E%3Cpath d='M0 0 C-3.6 -2 -3.6 -6.2 0 -4.4 C3.6 -6.2 3.6 -2 0 0 Z' fill='%233cb371' stroke='%231e7a46' stroke-width='0.5' transform='rotate(90)'/%3E%3Cpath d='M0 0 C-3.6 -2 -3.6 -6.2 0 -4.4 C3.6 -6.2 3.6 -2 0 0 Z' fill='%233cb371' stroke='%231e7a46' stroke-width='0.5' transform='rotate(180)'/%3E%3Cpath d='M0 0 C-3.6 -2 -3.6 -6.2 0 -4.4 C3.6 -6.2 3.6 -2 0 0 Z' fill='%233cb371' stroke='%231e7a46' stroke-width='0.5' transform='rotate(270)'/%3E%3Cpath d='M0 0 Q2 4 1 7' fill='none' stroke='%231e7a46' stroke-width='0.8'/%3E%3C/g%3E%3Cg transform='translate(24.2 86.9) scale(1.25) rotate(215)'%3E%3Cpath d='M0 0 C-3.6 -2 -3.6 -6.2 0 -4.4 C3.6 -6.2 3.6 -2 0 0 Z' fill='%233cb371' stroke='%231e7a46' stroke-width='0.5' transform='rotate(0)'/%3E%3Cpath d='M0 0 C-3.6 -2 -3.6 -6.2 0 -4.4 C3.6 -6.2 3.6 -2 0 0 Z' fill='%233cb371' stroke='%231e7a46' stroke-width='0.5' transform='rotate(90)'/%3E%3Cpath d='M0 0 C-3.6 -2 -3.6 -6.2 0 -4.4 C3.6 -6.2 3.6 -2 0 0 Z' fill='%233cb371' stroke='%231e7a46' stroke-width='0.5' transform='rotate(180)'/%3E%3Cpath d='M0 0 C-3.6 -2 -3.6 -6.2 0 -4.4 C3.6 -6.2 3.6 -2 0 0 Z' fill='%233cb371' stroke='%231e7a46' stroke-width='0.5' transform='rotate(270)'/%3E%3Cpath d='M0 0 Q2 4 1 7' fill='none' stroke='%231e7a46' stroke-width='0.8'/%3E%3C/g%3E%3Cg transform='translate(7.7 34.6) scale(1.45) rotate(290)'%3E%3Cpath d='M0 0 C-3.6 -2 -3.6 -6.2 0 -4.4 C3.6 -6.2 3.6 -2 0 0 Z' fill='%233cb371' stroke='%231e7a46' stroke-width='0.5' transform='rotate(0)'/%3E%3Cpath d='M0 0 C-3.6 -2 -3.6 -6.2 0 -4.4 C3.6 -6.2 3.6 -2 0 0 Z' fill='%233cb371' stroke='%231e7a46' stroke-width='0.5' transform='rotate(90)'/%3E%3Cpath d='M0 0 C-3.6 -2 -3.6 -6.2 0 -4.4 C3.6 -6.2 3.6 -2 0 0 Z' fill='%233cb371' stroke='%231e7a46' stroke-width='0.5' transform='rotate(180)'/%3E%3Cpath d='M0 0 C-3.6 -2 -3.6 -6.2 0 -4.4 C3.6 -6.2 3.6 -2 0 0 Z' fill='%233cb371' stroke='%231e7a46' stroke-width='0.5' transform='rotate(270)'/%3E%3Cpath d='M0 0 Q2 4 1 7' fill='none' stroke='%231e7a46' stroke-width='0.8'/%3E%3C/g%3E%3Cg transform='translate(34.6 7.7) scale(1.1) rotate(340)'%3E%3Cpath d='M0 0 C-3.6 -2 -3.6 -6.2 0 -4.4 C3.6 -6.2 3.6 -2 0 0 Z' fill='%233cb371' stroke='%231e7a46' stroke-width='0.5' transform='rotate(0)'/%3E%3Cpath d='M0 0 C-3.6 -2 -3.6 -6.2 0 -4.4 C3.6 -6.2 3.6 -2 0 0 Z' fill='%233cb371' stroke='%231e7a46' stroke-width='0.5' transform='rotate(90)'/%3E%3Cpath d='M0 0 C-3.6 -2 -3.6 -6.2 0 -4.4 C3.6 -6.2 3.6 -2 0 0 Z' fill='%233cb371' stroke='%231e7a46' stroke-width='0.5' transform='rotate(180)'/%3E%3Cpath d='M0 0 C-3.6 -2 -3.6 -6.2 0 -4.4 C3.6 -6.2 3.6 -2 0 0 Z' fill='%233cb371' stroke='%231e7a46' stroke-width='0.5' transform='rotate(270)'/%3E%3Cpath d='M0 0 Q2 4 1 7' fill='none' stroke='%231e7a46' stroke-width='0.8'/%3E%3C/g%3E%3C/svg%3E"); border-radius: 0; animation: frSpin 24s linear infinite; }
.av-frame.f-ghosts { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg transform='translate(78.9 15.5) scale(1.75) rotate(15)'%3E%3Cpath d='M-4.5 5 L-4.5 -1 A4.5 4.5 0 0 1 4.5 -1 L4.5 5 L3 3.6 L1.5 5 L0 3.6 L-1.5 5 L-3 3.6 Z' fill='%23f7f7fb' stroke='%23b9b9cc' stroke-width='0.6'/%3E%3Ccircle cx='-1.6' cy='-0.8' r='0.8' fill='%232b2b33'/%3E%3Ccircle cx='1.6' cy='-0.8' r='0.8' fill='%232b2b33'/%3E%3Cellipse cx='0' cy='1.4' rx='0.9' ry='0.6' fill='%232b2b33'/%3E%3C/g%3E%3Cg transform='translate(84.5 78.9) scale(1.4) rotate(-10)'%3E%3Cpath d='M-4.5 5 L-4.5 -1 A4.5 4.5 0 0 1 4.5 -1 L4.5 5 L3 3.6 L1.5 5 L0 3.6 L-1.5 5 L-3 3.6 Z' fill='%23f7f7fb' stroke='%23b9b9cc' stroke-width='0.6'/%3E%3Ccircle cx='-1.6' cy='-0.8' r='0.8' fill='%232b2b33'/%3E%3Ccircle cx='1.6' cy='-0.8' r='0.8' fill='%232b2b33'/%3E%3Cellipse cx='0' cy='1.4' rx='0.9' ry='0.6' fill='%232b2b33'/%3E%3C/g%3E%3Cg transform='translate(15.5 78.9) scale(1.65) rotate(10)'%3E%3Cpath d='M-4.5 5 L-4.5 -1 A4.5 4.5 0 0 1 4.5 -1 L4.5 5 L3 3.6 L1.5 5 L0 3.6 L-1.5 5 L-3 3.6 Z' fill='%23f7f7fb' stroke='%23b9b9cc' stroke-width='0.6'/%3E%3Ccircle cx='-1.6' cy='-0.8' r='0.8' fill='%232b2b33'/%3E%3Ccircle cx='1.6' cy='-0.8' r='0.8' fill='%232b2b33'/%3E%3Cellipse cx='0' cy='1.4' rx='0.9' ry='0.6' fill='%232b2b33'/%3E%3C/g%3E%3Cg transform='translate(15.5 21.1) scale(1.35) rotate(-15)'%3E%3Cpath d='M-4.5 5 L-4.5 -1 A4.5 4.5 0 0 1 4.5 -1 L4.5 5 L3 3.6 L1.5 5 L0 3.6 L-1.5 5 L-3 3.6 Z' fill='%23f7f7fb' stroke='%23b9b9cc' stroke-width='0.6'/%3E%3Ccircle cx='-1.6' cy='-0.8' r='0.8' fill='%232b2b33'/%3E%3Ccircle cx='1.6' cy='-0.8' r='0.8' fill='%232b2b33'/%3E%3Cellipse cx='0' cy='1.4' rx='0.9' ry='0.6' fill='%232b2b33'/%3E%3C/g%3E%3C/svg%3E"); border-radius: 0; filter: drop-shadow(0 0 2px rgba(255, 255, 255, .6)); animation: frFloat 2.4s ease-in-out infinite; }
.av-frame.f-wings { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M10.0 54 Q6.0 30 -8.0 26 Q-2.0 40 -6.0 48 Q4.0 50 10.0 54 Z' fill='%23ffffff' stroke='%23c9d6e8' stroke-width='0.8'/%3E%3Cpath d='M10.0 48 Q0.0 44 -6.0 52 Q4.0 54 10.0 52 Z' fill='%23ffffff' stroke='%23c9d6e8' stroke-width='0.7'/%3E%3Cpath d='M10.0 54 Q2.0 51 -3.0 59 Q5.0 60 10.0 58 Z' fill='%23ffffff' stroke='%23c9d6e8' stroke-width='0.7'/%3E%3Cpath d='M10.0 60 Q4.0 58 0.0 66 Q6.0 66 10.0 64 Z' fill='%23ffffff' stroke='%23c9d6e8' stroke-width='0.7'/%3E%3Cpath d='M10.0 66 Q6.0 65 3.0 73 Q7.0 72 10.0 70 Z' fill='%23ffffff' stroke='%23c9d6e8' stroke-width='0.7'/%3E%3Cpath d='M90.0 54 Q94.0 30 108.0 26 Q102.0 40 106.0 48 Q96.0 50 90.0 54 Z' fill='%23ffffff' stroke='%23c9d6e8' stroke-width='0.8'/%3E%3Cpath d='M90.0 48 Q100.0 44 106.0 52 Q96.0 54 90.0 52 Z' fill='%23ffffff' stroke='%23c9d6e8' stroke-width='0.7'/%3E%3Cpath d='M90.0 54 Q98.0 51 103.0 59 Q95.0 60 90.0 58 Z' fill='%23ffffff' stroke='%23c9d6e8' stroke-width='0.7'/%3E%3Cpath d='M90.0 60 Q96.0 58 100.0 66 Q94.0 66 90.0 64 Z' fill='%23ffffff' stroke='%23c9d6e8' stroke-width='0.7'/%3E%3Cpath d='M90.0 66 Q94.0 65 97.0 73 Q93.0 72 90.0 70 Z' fill='%23ffffff' stroke='%23c9d6e8' stroke-width='0.7'/%3E%3C/svg%3E"); border-radius: 0; inset: calc(var(--s) * -0.26) calc(var(--s) * -0.3); background-size: 100% 100%; filter: drop-shadow(0 0 3px rgba(255, 255, 255, .7)); animation: frFlap 2.6s ease-in-out infinite; z-index: 0; }
.av-frame.f-fox { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M15 33 L16 2 L42 17 Z' fill='%23ff8a2b' stroke='%23b85410' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cpath d='M20 26 L21 10 L34 18 Z' fill='%23fff2e0'/%3E%3Cpath d='M16 2 L22 9 L18 12 Z' fill='%233a2a20'/%3E%3Cpath d='M85 33 L84 2 L58 17 Z' fill='%23ff8a2b' stroke='%23b85410' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cpath d='M80 26 L79 10 L66 18 Z' fill='%23fff2e0'/%3E%3Cpath d='M84 2 L78 9 L82 12 Z' fill='%233a2a20'/%3E%3C/svg%3E"); border-radius: 0; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .35)); }
@keyframes frHueSoft { to { filter: drop-shadow(0 0 4px #8c5bff) hue-rotate(60deg); } }
@keyframes frPulseGlow { 0%, 100% { filter: drop-shadow(0 0 3px #8c3dff) drop-shadow(0 0 6px #4b0f86); } 50% { filter: drop-shadow(0 0 6px #b06bff) drop-shadow(0 0 12px #8c3dff); } }
@keyframes frFlap { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(1.06); } }
.avatar:has(.f-wings) > img { position: relative; z-index: 1; }
/* frames that come with Destekçi+ and Efsane, in the picker */
.frame-pick { position: relative; }
.frame-pick .fp-tier { position: static; margin-top: -2px; display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 999px; font-style: normal; font-size: 9.5px; font-weight: 800; color: #1d1d22; background: #c0c7d1; }
.frame-pick.locked .avatar { filter: grayscale(.35); }
/* frames people asked for (drawn here, after their pictures) */
.av-frame.f-thorns { inset: calc(var(--s) * -0.22); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='m' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.35' stop-color='%239aa1ad'/%3E%3Cstop offset='.55' stop-color='%23eef1f6'/%3E%3Cstop offset='.8' stop-color='%235d636e'/%3E%3Cstop offset='1' stop-color='%23d7dce4'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='37.5' fill='none' stroke='url(%23m)' stroke-width='4.6'/%3E%3Ccircle cx='50' cy='50' r='37.5' fill='none' stroke='%232f333b' stroke-width='0.6' stroke-dasharray='2.5 4'/%3E%3Cpolygon points='46.73,12.64 50.00,0.50 53.27,12.64' fill='url(%23m)' stroke='%233c4049' stroke-width='0.5' stroke-linejoin='round'/%3E%3Cpolygon points='57.54,13.27 61.52,7.02 61.84,14.42' fill='url(%23m)' stroke='%233c4049' stroke-width='0.5' stroke-linejoin='round'/%3E%3Cpath d='M54.45 13.77 L53.90 18.24' stroke='%23c9ced8' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpolygon points='65.85,16.01 74.75,7.13 71.51,19.28' fill='url(%23m)' stroke='%233c4049' stroke-width='0.5' stroke-linejoin='round'/%3E%3Cpolygon points='74.90,21.96 81.47,18.53 78.04,25.10' fill='url(%23m)' stroke='%233c4049' stroke-width='0.5' stroke-linejoin='round'/%3E%3Cpath d='M71.97 20.85 L69.26 24.44' stroke='%23c9ced8' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpolygon points='80.72,28.49 92.87,25.25 83.99,34.15' fill='url(%23m)' stroke='%233c4049' stroke-width='0.5' stroke-linejoin='round'/%3E%3Cpolygon points='85.58,38.16 92.98,38.48 86.73,42.46' fill='url(%23m)' stroke='%233c4049' stroke-width='0.5' stroke-linejoin='round'/%3E%3Cpath d='M83.60 35.74 L79.46 37.50' stroke='%23c9ced8' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpolygon points='87.36,46.73 99.50,50.00 87.36,53.27' fill='url(%23m)' stroke='%233c4049' stroke-width='0.5' stroke-linejoin='round'/%3E%3Cpolygon points='86.73,57.54 92.98,61.52 85.58,61.84' fill='url(%23m)' stroke='%233c4049' stroke-width='0.5' stroke-linejoin='round'/%3E%3Cpath d='M86.23 54.45 L81.76 53.90' stroke='%23c9ced8' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpolygon points='83.99,65.85 92.87,74.75 80.72,71.51' fill='url(%23m)' stroke='%233c4049' stroke-width='0.5' stroke-linejoin='round'/%3E%3Cpolygon points='78.04,74.90 81.47,81.47 74.90,78.04' fill='url(%23m)' stroke='%233c4049' stroke-width='0.5' stroke-linejoin='round'/%3E%3Cpath d='M79.15 71.97 L75.56 69.26' stroke='%23c9ced8' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpolygon points='71.51,80.72 74.75,92.87 65.85,83.99' fill='url(%23m)' stroke='%233c4049' stroke-width='0.5' stroke-linejoin='round'/%3E%3Cpolygon points='61.84,85.58 61.52,92.98 57.54,86.73' fill='url(%23m)' stroke='%233c4049' stroke-width='0.5' stroke-linejoin='round'/%3E%3Cpath d='M64.26 83.60 L62.50 79.46' stroke='%23c9ced8' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpolygon points='53.27,87.36 50.00,99.50 46.73,87.36' fill='url(%23m)' stroke='%233c4049' stroke-width='0.5' stroke-linejoin='round'/%3E%3Cpolygon points='42.46,86.73 38.48,92.98 38.16,85.58' fill='url(%23m)' stroke='%233c4049' stroke-width='0.5' stroke-linejoin='round'/%3E%3Cpath d='M45.55 86.23 L46.10 81.76' stroke='%23c9ced8' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpolygon points='34.15,83.99 25.25,92.87 28.49,80.72' fill='url(%23m)' stroke='%233c4049' stroke-width='0.5' stroke-linejoin='round'/%3E%3Cpolygon points='25.10,78.04 18.53,81.47 21.96,74.90' fill='url(%23m)' stroke='%233c4049' stroke-width='0.5' stroke-linejoin='round'/%3E%3Cpath d='M28.03 79.15 L30.74 75.56' stroke='%23c9ced8' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpolygon points='19.28,71.51 7.13,74.75 16.01,65.85' fill='url(%23m)' stroke='%233c4049' stroke-width='0.5' stroke-linejoin='round'/%3E%3Cpolygon points='14.42,61.84 7.02,61.52 13.27,57.54' fill='url(%23m)' stroke='%233c4049' stroke-width='0.5' stroke-linejoin='round'/%3E%3Cpath d='M16.40 64.26 L20.54 62.50' stroke='%23c9ced8' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpolygon points='12.64,53.27 0.50,50.00 12.64,46.73' fill='url(%23m)' stroke='%233c4049' stroke-width='0.5' stroke-linejoin='round'/%3E%3Cpolygon points='13.27,42.46 7.02,38.48 14.42,38.16' fill='url(%23m)' stroke='%233c4049' stroke-width='0.5' stroke-linejoin='round'/%3E%3Cpath d='M13.77 45.55 L18.24 46.10' stroke='%23c9ced8' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpolygon points='16.01,34.15 7.13,25.25 19.28,28.49' fill='url(%23m)' stroke='%233c4049' stroke-width='0.5' stroke-linejoin='round'/%3E%3Cpolygon points='21.96,25.10 18.53,18.53 25.10,21.96' fill='url(%23m)' stroke='%233c4049' stroke-width='0.5' stroke-linejoin='round'/%3E%3Cpath d='M20.85 28.03 L24.44 30.74' stroke='%23c9ced8' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpolygon points='28.49,19.28 25.25,7.13 34.15,16.01' fill='url(%23m)' stroke='%233c4049' stroke-width='0.5' stroke-linejoin='round'/%3E%3Cpolygon points='38.16,14.42 38.48,7.02 42.46,13.27' fill='url(%23m)' stroke='%233c4049' stroke-width='0.5' stroke-linejoin='round'/%3E%3Cpath d='M35.74 16.40 L37.50 20.54' stroke='%23c9ced8' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); border-radius: 0; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .45)); }
.av-frame.f-polka { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='44.6' fill='none' stroke='%23e57aa8' stroke-width='9.6'/%3E%3Ccircle cx='50' cy='50' r='44.6' fill='none' stroke='%23f7a8c8' stroke-width='8'/%3E%3Ccircle cx='50.00' cy='5.40' r='1.45' fill='%23ffffff'/%3E%3Ccircle cx='59.92' cy='6.52' r='1.45' fill='%23ffffff'/%3E%3Ccircle cx='69.35' cy='9.82' r='1.45' fill='%23ffffff'/%3E%3Ccircle cx='77.81' cy='15.13' r='1.45' fill='%23ffffff'/%3E%3Ccircle cx='84.87' cy='22.19' r='1.45' fill='%23ffffff'/%3E%3Ccircle cx='90.18' cy='30.65' r='1.45' fill='%23ffffff'/%3E%3Ccircle cx='93.48' cy='40.08' r='1.45' fill='%23ffffff'/%3E%3Ccircle cx='94.60' cy='50.00' r='1.45' fill='%23ffffff'/%3E%3Ccircle cx='93.48' cy='59.92' r='1.45' fill='%23ffffff'/%3E%3Ccircle cx='90.18' cy='69.35' r='1.45' fill='%23ffffff'/%3E%3Ccircle cx='84.87' cy='77.81' r='1.45' fill='%23ffffff'/%3E%3Ccircle cx='77.81' cy='84.87' r='1.45' fill='%23ffffff'/%3E%3Ccircle cx='69.35' cy='90.18' r='1.45' fill='%23ffffff'/%3E%3Ccircle cx='59.92' cy='93.48' r='1.45' fill='%23ffffff'/%3E%3Ccircle cx='50.00' cy='94.60' r='1.45' fill='%23ffffff'/%3E%3Ccircle cx='40.08' cy='93.48' r='1.45' fill='%23ffffff'/%3E%3Ccircle cx='30.65' cy='90.18' r='1.45' fill='%23ffffff'/%3E%3Ccircle cx='22.19' cy='84.87' r='1.45' fill='%23ffffff'/%3E%3Ccircle cx='15.13' cy='77.81' r='1.45' fill='%23ffffff'/%3E%3Ccircle cx='9.82' cy='69.35' r='1.45' fill='%23ffffff'/%3E%3Ccircle cx='6.52' cy='59.92' r='1.45' fill='%23ffffff'/%3E%3Ccircle cx='5.40' cy='50.00' r='1.45' fill='%23ffffff'/%3E%3Ccircle cx='6.52' cy='40.08' r='1.45' fill='%23ffffff'/%3E%3Ccircle cx='9.82' cy='30.65' r='1.45' fill='%23ffffff'/%3E%3Ccircle cx='15.13' cy='22.19' r='1.45' fill='%23ffffff'/%3E%3Ccircle cx='22.19' cy='15.13' r='1.45' fill='%23ffffff'/%3E%3Ccircle cx='30.65' cy='9.82' r='1.45' fill='%23ffffff'/%3E%3Ccircle cx='40.08' cy='6.52' r='1.45' fill='%23ffffff'/%3E%3Cpath d='M17 30 A38 38 0 0 1 40 10' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' opacity='.75'/%3E%3C/svg%3E"); border-radius: 0; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
.av-frame.f-gothic { inset: calc(var(--s) * -0.22); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='38.5' fill='none' stroke='%2326262c' stroke-width='6.5'/%3E%3Ccircle cx='50' cy='50' r='35.1' fill='none' stroke='%238d8f9a' stroke-width='0.9'/%3E%3Ccircle cx='50' cy='50' r='41.7' fill='none' stroke='%238d8f9a' stroke-width='0.9'/%3E%3Ccircle cx='50' cy='50' r='38.5' fill='none' stroke='%235a5c66' stroke-width='0.7' stroke-dasharray='1 2.2'/%3E%3Cpath d='M0 0 C3 -4 7 -3 7 0 C7 2 4 3 3 1' fill='none' stroke='%23b4b6c2' stroke-width='0.9' transform='translate(59.92 10.22) rotate(14)'/%3E%3Cpath d='M0 0 C-3 -4 -7 -3 -7 0 C-7 2 -4 3 -3 1' fill='none' stroke='%23b4b6c2' stroke-width='0.9' transform='translate(40.08 10.22) rotate(-14)'/%3E%3Cpath d='M0 0 C3 -4 7 -3 7 0 C7 2 4 3 3 1' fill='none' stroke='%23b4b6c2' stroke-width='0.9' transform='translate(89.78 59.92) rotate(104)'/%3E%3Cpath d='M0 0 C-3 -4 -7 -3 -7 0 C-7 2 -4 3 -3 1' fill='none' stroke='%23b4b6c2' stroke-width='0.9' transform='translate(89.78 40.08) rotate(76)'/%3E%3Cpath d='M0 0 C3 -4 7 -3 7 0 C7 2 4 3 3 1' fill='none' stroke='%23b4b6c2' stroke-width='0.9' transform='translate(40.08 89.78) rotate(194)'/%3E%3Cpath d='M0 0 C-3 -4 -7 -3 -7 0 C-7 2 -4 3 -3 1' fill='none' stroke='%23b4b6c2' stroke-width='0.9' transform='translate(59.92 89.78) rotate(166)'/%3E%3Cpath d='M0 0 C3 -4 7 -3 7 0 C7 2 4 3 3 1' fill='none' stroke='%23b4b6c2' stroke-width='0.9' transform='translate(10.22 40.08) rotate(284)'/%3E%3Cpath d='M0 0 C-3 -4 -7 -3 -7 0 C-7 2 -4 3 -3 1' fill='none' stroke='%23b4b6c2' stroke-width='0.9' transform='translate(10.22 59.92) rotate(256)'/%3E%3Cg transform='translate(50.00 7.50) rotate(0) scale(1.7)'%3E%3Cpath d='M0 -6 C2.2 -3 3.6 -1 0 3 C-3.6 -1 -2.2 -3 0 -6 Z' fill='%232a2a31' stroke='%23b4b6c2' stroke-width='0.6'/%3E%3Cpath d='M0 1 C4 -1 7 1 6 4 C5 2 3 2 0 3 Z' fill='%232a2a31' stroke='%23b4b6c2' stroke-width='0.5'/%3E%3Cpath d='M0 1 C-4 -1 -7 1 -6 4 C-5 2 -3 2 0 3 Z' fill='%232a2a31' stroke='%23b4b6c2' stroke-width='0.5'/%3E%3Ccircle r='1' cy='-1' fill='%23d4d6de'/%3E%3C/g%3E%3Cg transform='translate(92.50 50.00) rotate(90) scale(1.7)'%3E%3Cpath d='M0 -6 C2.2 -3 3.6 -1 0 3 C-3.6 -1 -2.2 -3 0 -6 Z' fill='%232a2a31' stroke='%23b4b6c2' stroke-width='0.6'/%3E%3Cpath d='M0 1 C4 -1 7 1 6 4 C5 2 3 2 0 3 Z' fill='%232a2a31' stroke='%23b4b6c2' stroke-width='0.5'/%3E%3Cpath d='M0 1 C-4 -1 -7 1 -6 4 C-5 2 -3 2 0 3 Z' fill='%232a2a31' stroke='%23b4b6c2' stroke-width='0.5'/%3E%3Ccircle r='1' cy='-1' fill='%23d4d6de'/%3E%3C/g%3E%3Cg transform='translate(50.00 92.50) rotate(180) scale(1.7)'%3E%3Cpath d='M0 -6 C2.2 -3 3.6 -1 0 3 C-3.6 -1 -2.2 -3 0 -6 Z' fill='%232a2a31' stroke='%23b4b6c2' stroke-width='0.6'/%3E%3Cpath d='M0 1 C4 -1 7 1 6 4 C5 2 3 2 0 3 Z' fill='%232a2a31' stroke='%23b4b6c2' stroke-width='0.5'/%3E%3Cpath d='M0 1 C-4 -1 -7 1 -6 4 C-5 2 -3 2 0 3 Z' fill='%232a2a31' stroke='%23b4b6c2' stroke-width='0.5'/%3E%3Ccircle r='1' cy='-1' fill='%23d4d6de'/%3E%3C/g%3E%3Cg transform='translate(7.50 50.00) rotate(270) scale(1.7)'%3E%3Cpath d='M0 -6 C2.2 -3 3.6 -1 0 3 C-3.6 -1 -2.2 -3 0 -6 Z' fill='%232a2a31' stroke='%23b4b6c2' stroke-width='0.6'/%3E%3Cpath d='M0 1 C4 -1 7 1 6 4 C5 2 3 2 0 3 Z' fill='%232a2a31' stroke='%23b4b6c2' stroke-width='0.5'/%3E%3Cpath d='M0 1 C-4 -1 -7 1 -6 4 C-5 2 -3 2 0 3 Z' fill='%232a2a31' stroke='%23b4b6c2' stroke-width='0.5'/%3E%3Ccircle r='1' cy='-1' fill='%23d4d6de'/%3E%3C/g%3E%3Cpolygon points='0,-5 1.1,-1.1 5,0 1.1,1.1 0,5 -1.1,1.1 -5,0 -1.1,-1.1' fill='%233a3a43' stroke='%23b4b6c2' stroke-width='0.5' transform='translate(81.82 18.18) rotate(45) scale(1.3)'/%3E%3Cpolygon points='0,-5 1.1,-1.1 5,0 1.1,1.1 0,5 -1.1,1.1 -5,0 -1.1,-1.1' fill='%233a3a43' stroke='%23b4b6c2' stroke-width='0.5' transform='translate(81.82 81.82) rotate(135) scale(1.3)'/%3E%3Cpolygon points='0,-5 1.1,-1.1 5,0 1.1,1.1 0,5 -1.1,1.1 -5,0 -1.1,-1.1' fill='%233a3a43' stroke='%23b4b6c2' stroke-width='0.5' transform='translate(18.18 81.82) rotate(225) scale(1.3)'/%3E%3Cpolygon points='0,-5 1.1,-1.1 5,0 1.1,1.1 0,5 -1.1,1.1 -5,0 -1.1,-1.1' fill='%233a3a43' stroke='%23b4b6c2' stroke-width='0.5' transform='translate(18.18 18.18) rotate(315) scale(1.3)'/%3E%3C/svg%3E"); border-radius: 0; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.av-frame.f-angel { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45.5' fill='none' stroke='%23a9c9e3' stroke-width='4'/%3E%3Ccircle cx='50' cy='50' r='45.5' fill='none' stroke='%23dcecf8' stroke-width='1.2' stroke-dasharray='5 7'/%3E%3Ccircle cx='50' cy='50' r='41.2' fill='none' stroke='%23a9c9e3' stroke-width='1.4' stroke-dasharray='0.1 2.6' stroke-linecap='round'/%3E%3Cg transform='translate(25 84) scale(-1.75 1.75)'%3E%3Cpath d='M-9 -1 C-9 -8 -1 -11 5 -9 C2 -7 1.5 -5.5 3 -4 C7.5 -4.6 9.5 -1.5 7.4 1.6 C5 4.6 0 4.8 -2.4 3.2 C-6.4 4.8 -9 2.4 -9 -1 Z' fill='%23ffffff' stroke='%238fb8da' stroke-width='1' stroke-linejoin='round'/%3E%3Cpath d='M-1.6 0 C0 -2.4 3 -2.4 4 0 C3.2 1.6 0.8 1.6 0 0' fill='none' stroke='%238fb8da' stroke-width='0.8'/%3E%3C/g%3E%3Cg transform='translate(75 84) scale(1.75 1.75)'%3E%3Cpath d='M-9 -1 C-9 -8 -1 -11 5 -9 C2 -7 1.5 -5.5 3 -4 C7.5 -4.6 9.5 -1.5 7.4 1.6 C5 4.6 0 4.8 -2.4 3.2 C-6.4 4.8 -9 2.4 -9 -1 Z' fill='%23ffffff' stroke='%238fb8da' stroke-width='1' stroke-linejoin='round'/%3E%3Cpath d='M-1.6 0 C0 -2.4 3 -2.4 4 0 C3.2 1.6 0.8 1.6 0 0' fill='none' stroke='%238fb8da' stroke-width='0.8'/%3E%3C/g%3E%3C/svg%3E"); border-radius: 0; filter: drop-shadow(0 0 2px rgba(169, 201, 227, .8)); animation: frFloat 3s ease-in-out infinite; }
.av-frame.f-greenstars { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50.00' cy='4.00' r='4.6' fill='%23d4f7cb' stroke='%2379d36c' stroke-width='0.8'/%3E%3Ccircle cx='61.01' cy='5.34' r='4.6' fill='%23d4f7cb' stroke='%2379d36c' stroke-width='0.8'/%3E%3Ccircle cx='71.38' cy='9.27' r='4.6' fill='%23d4f7cb' stroke='%2379d36c' stroke-width='0.8'/%3E%3Ccircle cx='80.50' cy='15.57' r='4.6' fill='%23d4f7cb' stroke='%2379d36c' stroke-width='0.8'/%3E%3Ccircle cx='87.86' cy='23.87' r='4.6' fill='%23d4f7cb' stroke='%2379d36c' stroke-width='0.8'/%3E%3Ccircle cx='93.01' cy='33.69' r='4.6' fill='%23d4f7cb' stroke='%2379d36c' stroke-width='0.8'/%3E%3Ccircle cx='95.66' cy='44.46' r='4.6' fill='%23d4f7cb' stroke='%2379d36c' stroke-width='0.8'/%3E%3Ccircle cx='95.66' cy='55.54' r='4.6' fill='%23d4f7cb' stroke='%2379d36c' stroke-width='0.8'/%3E%3Ccircle cx='93.01' cy='66.31' r='4.6' fill='%23d4f7cb' stroke='%2379d36c' stroke-width='0.8'/%3E%3Ccircle cx='87.86' cy='76.13' r='4.6' fill='%23d4f7cb' stroke='%2379d36c' stroke-width='0.8'/%3E%3Ccircle cx='80.50' cy='84.43' r='4.6' fill='%23d4f7cb' stroke='%2379d36c' stroke-width='0.8'/%3E%3Ccircle cx='71.38' cy='90.73' r='4.6' fill='%23d4f7cb' stroke='%2379d36c' stroke-width='0.8'/%3E%3Ccircle cx='61.01' cy='94.66' r='4.6' fill='%23d4f7cb' stroke='%2379d36c' stroke-width='0.8'/%3E%3Ccircle cx='50.00' cy='96.00' r='4.6' fill='%23d4f7cb' stroke='%2379d36c' stroke-width='0.8'/%3E%3Ccircle cx='38.99' cy='94.66' r='4.6' fill='%23d4f7cb' stroke='%2379d36c' stroke-width='0.8'/%3E%3Ccircle cx='28.62' cy='90.73' r='4.6' fill='%23d4f7cb' stroke='%2379d36c' stroke-width='0.8'/%3E%3Ccircle cx='19.50' cy='84.43' r='4.6' fill='%23d4f7cb' stroke='%2379d36c' stroke-width='0.8'/%3E%3Ccircle cx='12.14' cy='76.13' r='4.6' fill='%23d4f7cb' stroke='%2379d36c' stroke-width='0.8'/%3E%3Ccircle cx='6.99' cy='66.31' r='4.6' fill='%23d4f7cb' stroke='%2379d36c' stroke-width='0.8'/%3E%3Ccircle cx='4.34' cy='55.54' r='4.6' fill='%23d4f7cb' stroke='%2379d36c' stroke-width='0.8'/%3E%3Ccircle cx='4.34' cy='44.46' r='4.6' fill='%23d4f7cb' stroke='%2379d36c' stroke-width='0.8'/%3E%3Ccircle cx='6.99' cy='33.69' r='4.6' fill='%23d4f7cb' stroke='%2379d36c' stroke-width='0.8'/%3E%3Ccircle cx='12.14' cy='23.87' r='4.6' fill='%23d4f7cb' stroke='%2379d36c' stroke-width='0.8'/%3E%3Ccircle cx='19.50' cy='15.57' r='4.6' fill='%23d4f7cb' stroke='%2379d36c' stroke-width='0.8'/%3E%3Ccircle cx='28.62' cy='9.27' r='4.6' fill='%23d4f7cb' stroke='%2379d36c' stroke-width='0.8'/%3E%3Ccircle cx='38.99' cy='5.34' r='4.6' fill='%23d4f7cb' stroke='%2379d36c' stroke-width='0.8'/%3E%3Ccircle cx='50' cy='50' r='43.5' fill='none' stroke='%23b9efab' stroke-width='5'/%3E%3Cg transform='translate(28.00 11.89) scale(1.8) rotate(-10)'%3E%3Cpolygon points='0.00,-5.00 1.35,-1.86 4.76,-1.55 2.19,0.71 2.94,4.05 0.00,2.30 -2.94,4.05 -2.19,0.71 -4.76,-1.55 -1.35,-1.86' fill='%236fd35c' stroke='%232f8a2f' stroke-width='1' stroke-linejoin='round'/%3E%3C/g%3E%3Cg transform='translate(10.27 28.87) scale(1.25) rotate(10)'%3E%3Cpolygon points='0.00,-5.00 1.35,-1.86 4.76,-1.55 2.19,0.71 2.94,4.05 0.00,2.30 -2.94,4.05 -2.19,0.71 -4.76,-1.55 -1.35,-1.86' fill='%238fe37f' stroke='%232f8a2f' stroke-width='1' stroke-linejoin='round'/%3E%3C/g%3E%3Cg transform='translate(7.98 61.26) scale(2.2) rotate(-15)'%3E%3Cpolygon points='0.00,-5.00 1.35,-1.86 4.76,-1.55 2.19,0.71 2.94,4.05 0.00,2.30 -2.94,4.05 -2.19,0.71 -4.76,-1.55 -1.35,-1.86' fill='%238fe37f' stroke='%232f8a2f' stroke-width='1' stroke-linejoin='round'/%3E%3Cpolygon points='0.00,-5.00 1.35,-1.86 4.76,-1.55 2.19,0.71 2.94,4.05 0.00,2.30 -2.94,4.05 -2.19,0.71 -4.76,-1.55 -1.35,-1.86' fill='%23e9ffe4' transform='scale(.45)'/%3E%3C/g%3E%3Cg transform='translate(78.28 83.71) scale(1.9) rotate(20)'%3E%3Cpolygon points='0.00,-5.00 1.35,-1.86 4.76,-1.55 2.19,0.71 2.94,4.05 0.00,2.30 -2.94,4.05 -2.19,0.71 -4.76,-1.55 -1.35,-1.86' fill='%236fd35c' stroke='%232f8a2f' stroke-width='1' stroke-linejoin='round'/%3E%3C/g%3E%3Cg transform='translate(88.59 74.11) scale(1.3) rotate(-10)'%3E%3Cpolygon points='0.00,-5.00 1.35,-1.86 4.76,-1.55 2.19,0.71 2.94,4.05 0.00,2.30 -2.94,4.05 -2.19,0.71 -4.76,-1.55 -1.35,-1.86' fill='%238fe37f' stroke='%232f8a2f' stroke-width='1' stroke-linejoin='round'/%3E%3C/g%3E%3Cg transform='translate(30.56 91.69) scale(1.0) rotate(0)'%3E%3Cpolygon points='0.00,-5.00 1.35,-1.86 4.76,-1.55 2.19,0.71 2.94,4.05 0.00,2.30 -2.94,4.05 -2.19,0.71 -4.76,-1.55 -1.35,-1.86' fill='%236fd35c' stroke='%232f8a2f' stroke-width='1' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E"); border-radius: 0; filter: drop-shadow(0 0 2px rgba(121, 211, 108, .6)); }
.av-frame.f-pixelcat { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='49.20' fill='none' stroke='%23ff1f1f' stroke-width='1.75'/%3E%3Ccircle cx='50' cy='50' r='47.55' fill='none' stroke='%23ff9a00' stroke-width='1.75'/%3E%3Ccircle cx='50' cy='50' r='45.90' fill='none' stroke='%23ffe600' stroke-width='1.75'/%3E%3Ccircle cx='50' cy='50' r='44.25' fill='none' stroke='%2333e000' stroke-width='1.75'/%3E%3Ccircle cx='50' cy='50' r='42.60' fill='none' stroke='%2300a8ff' stroke-width='1.75'/%3E%3Ccircle cx='50' cy='50' r='40.95' fill='none' stroke='%236e3bff' stroke-width='1.75'/%3E%3Cg transform='translate(21.01 21.01) rotate(-40) scale(2.5) translate(-5 -5.5)' shape-rendering='crispEdges'%3E%3Crect x='1' y='1' width='1.04' height='1.04' fill='%231f1f24'/%3E%3Crect x='8' y='1' width='1.04' height='1.04' fill='%231f1f24'/%3E%3Crect x='1' y='2' width='1.04' height='1.04' fill='%231f1f24'/%3E%3Crect x='2' y='2' width='1.04' height='1.04' fill='%239a9aa6'/%3E%3Crect x='3' y='2' width='1.04' height='1.04' fill='%231f1f24'/%3E%3Crect x='6' y='2' width='1.04' height='1.04' fill='%231f1f24'/%3E%3Crect x='7' y='2' width='1.04' height='1.04' fill='%239a9aa6'/%3E%3Crect x='8' y='2' width='1.04' height='1.04' fill='%231f1f24'/%3E%3Crect x='1' y='3' width='1.04' height='1.04' fill='%231f1f24'/%3E%3Crect x='2' y='3' width='1.04' height='1.04' fill='%239a9aa6'/%3E%3Crect x='3' y='3' width='1.04' height='1.04' fill='%239a9aa6'/%3E%3Crect x='4' y='3' width='1.04' height='1.04' fill='%231f1f24'/%3E%3Crect x='5' y='3' width='1.04' height='1.04' fill='%231f1f24'/%3E%3Crect x='6' y='3' width='1.04' height='1.04' fill='%239a9aa6'/%3E%3Crect x='7' y='3' width='1.04' height='1.04' fill='%239a9aa6'/%3E%3Crect x='8' y='3' width='1.04' height='1.04' fill='%231f1f24'/%3E%3Crect x='0' y='4' width='1.04' height='1.04' fill='%231f1f24'/%3E%3Crect x='1' y='4' width='1.04' height='1.04' fill='%239a9aa6'/%3E%3Crect x='2' y='4' width='1.04' height='1.04' fill='%239a9aa6'/%3E%3Crect x='3' y='4' width='1.04' height='1.04' fill='%239a9aa6'/%3E%3Crect x='4' y='4' width='1.04' height='1.04' fill='%239a9aa6'/%3E%3Crect x='5' y='4' width='1.04' height='1.04' fill='%239a9aa6'/%3E%3Crect x='6' y='4' width='1.04' height='1.04' fill='%239a9aa6'/%3E%3Crect x='7' y='4' width='1.04' height='1.04' fill='%239a9aa6'/%3E%3Crect x='8' y='4' width='1.04' height='1.04' fill='%231f1f24'/%3E%3Crect x='0' y='5' width='1.04' height='1.04' fill='%231f1f24'/%3E%3Crect x='1' y='5' width='1.04' height='1.04' fill='%239a9aa6'/%3E%3Crect x='2' y='5' width='1.04' height='1.04' fill='%23ffffff'/%3E%3Crect x='3' y='5' width='1.04' height='1.04' fill='%231f1f24'/%3E%3Crect x='4' y='5' width='1.04' height='1.04' fill='%239a9aa6'/%3E%3Crect x='5' y='5' width='1.04' height='1.04' fill='%239a9aa6'/%3E%3Crect x='6' y='5' width='1.04' height='1.04' fill='%23ffffff'/%3E%3Crect x='7' y='5' width='1.04' height='1.04' fill='%231f1f24'/%3E%3Crect x='8' y='5' width='1.04' height='1.04' fill='%239a9aa6'/%3E%3Crect x='9' y='5' width='1.04' height='1.04' fill='%231f1f24'/%3E%3Crect x='0' y='6' width='1.04' height='1.04' fill='%231f1f24'/%3E%3Crect x='1' y='6' width='1.04' height='1.04' fill='%239a9aa6'/%3E%3Crect x='2' y='6' width='1.04' height='1.04' fill='%239a9aa6'/%3E%3Crect x='3' y='6' width='1.04' height='1.04' fill='%239a9aa6'/%3E%3Crect x='4' y='6' width='1.04' height='1.04' fill='%239a9aa6'/%3E%3Crect x='5' y='6' width='1.04' height='1.04' fill='%23ff8fb8'/%3E%3Crect x='6' y='6' width='1.04' height='1.04' fill='%239a9aa6'/%3E%3Crect x='7' y='6' width='1.04' height='1.04' fill='%239a9aa6'/%3E%3Crect x='8' y='6' width='1.04' height='1.04' fill='%239a9aa6'/%3E%3Crect x='9' y='6' width='1.04' height='1.04' fill='%231f1f24'/%3E%3Crect x='0' y='7' width='1.04' height='1.04' fill='%231f1f24'/%3E%3Crect x='1' y='7' width='1.04' height='1.04' fill='%239a9aa6'/%3E%3Crect x='2' y='7' width='1.04' height='1.04' fill='%23ff8fb8'/%3E%3Crect x='3' y='7' width='1.04' height='1.04' fill='%239a9aa6'/%3E%3Crect x='4' y='7' width='1.04' height='1.04' fill='%231f1f24'/%3E%3Crect x='5' y='7' width='1.04' height='1.04' fill='%239a9aa6'/%3E%3Crect x='6' y='7' width='1.04' height='1.04' fill='%23ff8fb8'/%3E%3Crect x='7' y='7' width='1.04' height='1.04' fill='%239a9aa6'/%3E%3Crect x='8' y='7' width='1.04' height='1.04' fill='%239a9aa6'/%3E%3Crect x='9' y='7' width='1.04' height='1.04' fill='%231f1f24'/%3E%3Crect x='1' y='8' width='1.04' height='1.04' fill='%231f1f24'/%3E%3Crect x='2' y='8' width='1.04' height='1.04' fill='%239a9aa6'/%3E%3Crect x='3' y='8' width='1.04' height='1.04' fill='%239a9aa6'/%3E%3Crect x='4' y='8' width='1.04' height='1.04' fill='%239a9aa6'/%3E%3Crect x='5' y='8' width='1.04' height='1.04' fill='%239a9aa6'/%3E%3Crect x='6' y='8' width='1.04' height='1.04' fill='%239a9aa6'/%3E%3Crect x='7' y='8' width='1.04' height='1.04' fill='%231f1f24'/%3E%3Crect x='2' y='9' width='1.04' height='1.04' fill='%231f1f24'/%3E%3Crect x='3' y='9' width='1.04' height='1.04' fill='%231f1f24'/%3E%3Crect x='6' y='9' width='1.04' height='1.04' fill='%231f1f24'/%3E%3Crect x='7' y='9' width='1.04' height='1.04' fill='%231f1f24'/%3E%3C/g%3E%3C/svg%3E"); border-radius: 0; image-rendering: pixelated; }
.av-frame.f-cherry { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='42' fill='none' stroke='%23f4d3df' stroke-width='2.2'/%3E%3Ccircle cx='50' cy='50' r='44.3' fill='none' stroke='%23e9c2d1' stroke-width='0.8' opacity='.9'/%3E%3Cg transform='translate(8.15 36.40) scale(1.35) rotate(576)'%3E%3Cellipse cx='0' cy='-3.6' rx='2.8' ry='3.7' fill='%23f7b3cc' stroke='%23e07fa3' stroke-width='0.45' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-3.6' rx='2.8' ry='3.7' fill='%23f7b3cc' stroke='%23e07fa3' stroke-width='0.45' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-3.6' rx='2.8' ry='3.7' fill='%23f7b3cc' stroke='%23e07fa3' stroke-width='0.45' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-3.6' rx='2.8' ry='3.7' fill='%23f7b3cc' stroke='%23e07fa3' stroke-width='0.45' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-3.6' rx='2.8' ry='3.7' fill='%23f7b3cc' stroke='%23e07fa3' stroke-width='0.45' transform='rotate(288)'/%3E%3Ccircle r='1.5' fill='%23b0284f'/%3E%3Ccircle r='.5' cy='-2' fill='%237a1031'/%3E%3C/g%3E%3Cg transform='translate(13.52 25.40) scale(1.1) rotate(608)'%3E%3Cellipse cx='0' cy='-3.6' rx='2.8' ry='3.7' fill='%23f7b3cc' stroke='%23e07fa3' stroke-width='0.45' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-3.6' rx='2.8' ry='3.7' fill='%23f7b3cc' stroke='%23e07fa3' stroke-width='0.45' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-3.6' rx='2.8' ry='3.7' fill='%23f7b3cc' stroke='%23e07fa3' stroke-width='0.45' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-3.6' rx='2.8' ry='3.7' fill='%23f7b3cc' stroke='%23e07fa3' stroke-width='0.45' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-3.6' rx='2.8' ry='3.7' fill='%23f7b3cc' stroke='%23e07fa3' stroke-width='0.45' transform='rotate(288)'/%3E%3Ccircle r='1.5' fill='%23b0284f'/%3E%3Ccircle r='.5' cy='-2' fill='%237a1031'/%3E%3C/g%3E%3Cg transform='translate(21.72 16.29) scale(1.45) rotate(640)'%3E%3Cellipse cx='0' cy='-3.6' rx='2.8' ry='3.7' fill='%23f7b3cc' stroke='%23e07fa3' stroke-width='0.45' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-3.6' rx='2.8' ry='3.7' fill='%23f7b3cc' stroke='%23e07fa3' stroke-width='0.45' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-3.6' rx='2.8' ry='3.7' fill='%23f7b3cc' stroke='%23e07fa3' stroke-width='0.45' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-3.6' rx='2.8' ry='3.7' fill='%23f7b3cc' stroke='%23e07fa3' stroke-width='0.45' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-3.6' rx='2.8' ry='3.7' fill='%23f7b3cc' stroke='%23e07fa3' stroke-width='0.45' transform='rotate(288)'/%3E%3Ccircle r='1.5' fill='%23b0284f'/%3E%3Ccircle r='.5' cy='-2' fill='%237a1031'/%3E%3C/g%3E%3Cg transform='translate(33.52 9.20) scale(0.95) rotate(676)'%3E%3Cellipse cx='0' cy='-3.6' rx='2.8' ry='3.7' fill='%23f7b3cc' stroke='%23e07fa3' stroke-width='0.45' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-3.6' rx='2.8' ry='3.7' fill='%23f7b3cc' stroke='%23e07fa3' stroke-width='0.45' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-3.6' rx='2.8' ry='3.7' fill='%23f7b3cc' stroke='%23e07fa3' stroke-width='0.45' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-3.6' rx='2.8' ry='3.7' fill='%23f7b3cc' stroke='%23e07fa3' stroke-width='0.45' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-3.6' rx='2.8' ry='3.7' fill='%23f7b3cc' stroke='%23e07fa3' stroke-width='0.45' transform='rotate(288)'/%3E%3Ccircle r='1.5' fill='%23b0284f'/%3E%3Ccircle r='.5' cy='-2' fill='%237a1031'/%3E%3C/g%3E%3Cg transform='translate(6.03 48.46) scale(0.9) rotate(544)'%3E%3Cellipse cx='0' cy='-3.6' rx='2.8' ry='3.7' fill='%23f7b3cc' stroke='%23e07fa3' stroke-width='0.45' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-3.6' rx='2.8' ry='3.7' fill='%23f7b3cc' stroke='%23e07fa3' stroke-width='0.45' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-3.6' rx='2.8' ry='3.7' fill='%23f7b3cc' stroke='%23e07fa3' stroke-width='0.45' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-3.6' rx='2.8' ry='3.7' fill='%23f7b3cc' stroke='%23e07fa3' stroke-width='0.45' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-3.6' rx='2.8' ry='3.7' fill='%23f7b3cc' stroke='%23e07fa3' stroke-width='0.45' transform='rotate(288)'/%3E%3Ccircle r='1.5' fill='%23b0284f'/%3E%3Ccircle r='.5' cy='-2' fill='%237a1031'/%3E%3C/g%3E%3Cg transform='translate(91.85 63.60) scale(1.4) rotate(216)'%3E%3Cellipse cx='0' cy='-3.6' rx='2.8' ry='3.7' fill='%23f7b3cc' stroke='%23e07fa3' stroke-width='0.45' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-3.6' rx='2.8' ry='3.7' fill='%23f7b3cc' stroke='%23e07fa3' stroke-width='0.45' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-3.6' rx='2.8' ry='3.7' fill='%23f7b3cc' stroke='%23e07fa3' stroke-width='0.45' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-3.6' rx='2.8' ry='3.7' fill='%23f7b3cc' stroke='%23e07fa3' stroke-width='0.45' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-3.6' rx='2.8' ry='3.7' fill='%23f7b3cc' stroke='%23e07fa3' stroke-width='0.45' transform='rotate(288)'/%3E%3Ccircle r='1.5' fill='%23b0284f'/%3E%3Ccircle r='.5' cy='-2' fill='%237a1031'/%3E%3C/g%3E%3Cg transform='translate(85.60 75.86) scale(1.1) rotate(252)'%3E%3Cellipse cx='0' cy='-3.6' rx='2.8' ry='3.7' fill='%23f7b3cc' stroke='%23e07fa3' stroke-width='0.45' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-3.6' rx='2.8' ry='3.7' fill='%23f7b3cc' stroke='%23e07fa3' stroke-width='0.45' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-3.6' rx='2.8' ry='3.7' fill='%23f7b3cc' stroke='%23e07fa3' stroke-width='0.45' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-3.6' rx='2.8' ry='3.7' fill='%23f7b3cc' stroke='%23e07fa3' stroke-width='0.45' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-3.6' rx='2.8' ry='3.7' fill='%23f7b3cc' stroke='%23e07fa3' stroke-width='0.45' transform='rotate(288)'/%3E%3Ccircle r='1.5' fill='%23b0284f'/%3E%3Ccircle r='.5' cy='-2' fill='%237a1031'/%3E%3C/g%3E%3Cg transform='translate(75.86 85.60) scale(1.3) rotate(288)'%3E%3Cellipse cx='0' cy='-3.6' rx='2.8' ry='3.7' fill='%23f7b3cc' stroke='%23e07fa3' stroke-width='0.45' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-3.6' rx='2.8' ry='3.7' fill='%23f7b3cc' stroke='%23e07fa3' stroke-width='0.45' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-3.6' rx='2.8' ry='3.7' fill='%23f7b3cc' stroke='%23e07fa3' stroke-width='0.45' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-3.6' rx='2.8' ry='3.7' fill='%23f7b3cc' stroke='%23e07fa3' stroke-width='0.45' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-3.6' rx='2.8' ry='3.7' fill='%23f7b3cc' stroke='%23e07fa3' stroke-width='0.45' transform='rotate(288)'/%3E%3Ccircle r='1.5' fill='%23b0284f'/%3E%3Ccircle r='.5' cy='-2' fill='%237a1031'/%3E%3C/g%3E%3Cg transform='translate(93.97 51.54) scale(0.9) rotate(184)'%3E%3Cellipse cx='0' cy='-3.6' rx='2.8' ry='3.7' fill='%23f7b3cc' stroke='%23e07fa3' stroke-width='0.45' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-3.6' rx='2.8' ry='3.7' fill='%23f7b3cc' stroke='%23e07fa3' stroke-width='0.45' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-3.6' rx='2.8' ry='3.7' fill='%23f7b3cc' stroke='%23e07fa3' stroke-width='0.45' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-3.6' rx='2.8' ry='3.7' fill='%23f7b3cc' stroke='%23e07fa3' stroke-width='0.45' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-3.6' rx='2.8' ry='3.7' fill='%23f7b3cc' stroke='%23e07fa3' stroke-width='0.45' transform='rotate(288)'/%3E%3Ccircle r='1.5' fill='%23b0284f'/%3E%3Ccircle r='.5' cy='-2' fill='%237a1031'/%3E%3C/g%3E%3Ccircle cx='5.49' cy='59.46' r='1.3' fill='%23a8123b'/%3E%3Ccircle cx='43.60' cy='4.45' r='1.3' fill='%23a8123b'/%3E%3Ccircle cx='94.81' cy='42.10' r='1.3' fill='%23a8123b'/%3E%3Ccircle cx='65.73' cy='93.23' r='1.3' fill='%23a8123b'/%3E%3Ccircle cx='7.23' cy='28.21' r='1.3' fill='%23a8123b'/%3E%3Ccircle cx='84.53' cy='83.34' r='1.3' fill='%23a8123b'/%3E%3C/svg%3E"); border-radius: 0; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
.av-frame.f-whiteflowers { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='41.8' fill='none' stroke='%23f0f0f5' stroke-width='1.3'/%3E%3Ccircle cx='50' cy='50' r='43.6' fill='none' stroke='%23e2e2ea' stroke-width='0.9'/%3E%3Ccircle cx='49.4' cy='50.6' r='45' fill='none' stroke='%23d6d6df' stroke-width='0.6'/%3E%3Cellipse cx='0' cy='0' rx='1.5' ry='3.4' fill='%23c2c2cb' transform='translate(72.75 10.60) rotate(90)'/%3E%3Cellipse cx='0' cy='0' rx='1.5' ry='3.4' fill='%23c2c2cb' transform='translate(90.17 28.64) rotate(122)'/%3E%3Cellipse cx='0' cy='0' rx='1.5' ry='3.4' fill='%23c2c2cb' transform='translate(92.76 34.44) rotate(130)'/%3E%3Cellipse cx='0' cy='0' rx='1.5' ry='3.4' fill='%23c2c2cb' transform='translate(30.77 91.24) rotate(265)'/%3E%3Cellipse cx='0' cy='0' rx='1.5' ry='3.4' fill='%23c2c2cb' transform='translate(11.41 74.11) rotate(298)'/%3E%3Cellipse cx='0' cy='0' rx='1.5' ry='3.4' fill='%23c2c2cb' transform='translate(8.43 68.51) rotate(306)'/%3E%3Cg transform='translate(79.44 17.30) scale(1.3)'%3E%3Ccircle cx='0.00' cy='-4.20' r='3.6' fill='%23f4f4f6' stroke='%23bfbfca' stroke-width='0.45'/%3E%3Ccircle cx='2.97' cy='-2.97' r='3.6' fill='%23f4f4f6' stroke='%23bfbfca' stroke-width='0.45'/%3E%3Ccircle cx='4.20' cy='-0.00' r='3.6' fill='%23f4f4f6' stroke='%23bfbfca' stroke-width='0.45'/%3E%3Ccircle cx='2.97' cy='2.97' r='3.6' fill='%23f4f4f6' stroke='%23bfbfca' stroke-width='0.45'/%3E%3Ccircle cx='0.00' cy='4.20' r='3.6' fill='%23f4f4f6' stroke='%23bfbfca' stroke-width='0.45'/%3E%3Ccircle cx='-2.97' cy='2.97' r='3.6' fill='%23f4f4f6' stroke='%23bfbfca' stroke-width='0.45'/%3E%3Ccircle cx='-4.20' cy='0.00' r='3.6' fill='%23f4f4f6' stroke='%23bfbfca' stroke-width='0.45'/%3E%3Ccircle cx='-2.97' cy='-2.97' r='3.6' fill='%23f4f4f6' stroke='%23bfbfca' stroke-width='0.45'/%3E%3Ccircle cx='0.75' cy='-2.07' r='2.4' fill='%23ffffff' stroke='%23d0d0d8' stroke-width='0.4'/%3E%3Ccircle cx='2.17' cy='-0.38' r='2.4' fill='%23ffffff' stroke='%23d0d0d8' stroke-width='0.4'/%3E%3Ccircle cx='1.41' cy='1.69' r='2.4' fill='%23ffffff' stroke='%23d0d0d8' stroke-width='0.4'/%3E%3Ccircle cx='-0.75' cy='2.07' r='2.4' fill='%23ffffff' stroke='%23d0d0d8' stroke-width='0.4'/%3E%3Ccircle cx='-2.17' cy='0.38' r='2.4' fill='%23ffffff' stroke='%23d0d0d8' stroke-width='0.4'/%3E%3Ccircle cx='-1.41' cy='-1.69' r='2.4' fill='%23ffffff' stroke='%23d0d0d8' stroke-width='0.4'/%3E%3Ccircle r='1.5' fill='%23d3d3db'/%3E%3C/g%3E%3Cg transform='translate(66.86 8.28) scale(1.0)'%3E%3Ccircle cx='0.00' cy='-4.20' r='3.6' fill='%23f4f4f6' stroke='%23bfbfca' stroke-width='0.45'/%3E%3Ccircle cx='2.97' cy='-2.97' r='3.6' fill='%23f4f4f6' stroke='%23bfbfca' stroke-width='0.45'/%3E%3Ccircle cx='4.20' cy='-0.00' r='3.6' fill='%23f4f4f6' stroke='%23bfbfca' stroke-width='0.45'/%3E%3Ccircle cx='2.97' cy='2.97' r='3.6' fill='%23f4f4f6' stroke='%23bfbfca' stroke-width='0.45'/%3E%3Ccircle cx='0.00' cy='4.20' r='3.6' fill='%23f4f4f6' stroke='%23bfbfca' stroke-width='0.45'/%3E%3Ccircle cx='-2.97' cy='2.97' r='3.6' fill='%23f4f4f6' stroke='%23bfbfca' stroke-width='0.45'/%3E%3Ccircle cx='-4.20' cy='0.00' r='3.6' fill='%23f4f4f6' stroke='%23bfbfca' stroke-width='0.45'/%3E%3Ccircle cx='-2.97' cy='-2.97' r='3.6' fill='%23f4f4f6' stroke='%23bfbfca' stroke-width='0.45'/%3E%3Ccircle cx='0.75' cy='-2.07' r='2.4' fill='%23ffffff' stroke='%23d0d0d8' stroke-width='0.4'/%3E%3Ccircle cx='2.17' cy='-0.38' r='2.4' fill='%23ffffff' stroke='%23d0d0d8' stroke-width='0.4'/%3E%3Ccircle cx='1.41' cy='1.69' r='2.4' fill='%23ffffff' stroke='%23d0d0d8' stroke-width='0.4'/%3E%3Ccircle cx='-0.75' cy='2.07' r='2.4' fill='%23ffffff' stroke='%23d0d0d8' stroke-width='0.4'/%3E%3Ccircle cx='-2.17' cy='0.38' r='2.4' fill='%23ffffff' stroke='%23d0d0d8' stroke-width='0.4'/%3E%3Ccircle cx='-1.41' cy='-1.69' r='2.4' fill='%23ffffff' stroke='%23d0d0d8' stroke-width='0.4'/%3E%3Ccircle r='1.5' fill='%23d3d3db'/%3E%3C/g%3E%3Cg transform='translate(20.56 82.70) scale(1.35)'%3E%3Ccircle cx='0.00' cy='-4.20' r='3.6' fill='%23f4f4f6' stroke='%23bfbfca' stroke-width='0.45'/%3E%3Ccircle cx='2.97' cy='-2.97' r='3.6' fill='%23f4f4f6' stroke='%23bfbfca' stroke-width='0.45'/%3E%3Ccircle cx='4.20' cy='-0.00' r='3.6' fill='%23f4f4f6' stroke='%23bfbfca' stroke-width='0.45'/%3E%3Ccircle cx='2.97' cy='2.97' r='3.6' fill='%23f4f4f6' stroke='%23bfbfca' stroke-width='0.45'/%3E%3Ccircle cx='0.00' cy='4.20' r='3.6' fill='%23f4f4f6' stroke='%23bfbfca' stroke-width='0.45'/%3E%3Ccircle cx='-2.97' cy='2.97' r='3.6' fill='%23f4f4f6' stroke='%23bfbfca' stroke-width='0.45'/%3E%3Ccircle cx='-4.20' cy='0.00' r='3.6' fill='%23f4f4f6' stroke='%23bfbfca' stroke-width='0.45'/%3E%3Ccircle cx='-2.97' cy='-2.97' r='3.6' fill='%23f4f4f6' stroke='%23bfbfca' stroke-width='0.45'/%3E%3Ccircle cx='0.75' cy='-2.07' r='2.4' fill='%23ffffff' stroke='%23d0d0d8' stroke-width='0.4'/%3E%3Ccircle cx='2.17' cy='-0.38' r='2.4' fill='%23ffffff' stroke='%23d0d0d8' stroke-width='0.4'/%3E%3Ccircle cx='1.41' cy='1.69' r='2.4' fill='%23ffffff' stroke='%23d0d0d8' stroke-width='0.4'/%3E%3Ccircle cx='-0.75' cy='2.07' r='2.4' fill='%23ffffff' stroke='%23d0d0d8' stroke-width='0.4'/%3E%3Ccircle cx='-2.17' cy='0.38' r='2.4' fill='%23ffffff' stroke='%23d0d0d8' stroke-width='0.4'/%3E%3Ccircle cx='-1.41' cy='-1.69' r='2.4' fill='%23ffffff' stroke='%23d0d0d8' stroke-width='0.4'/%3E%3Ccircle r='1.5' fill='%23d3d3db'/%3E%3C/g%3E%3Cg transform='translate(34.61 92.29) scale(0.95)'%3E%3Ccircle cx='0.00' cy='-4.20' r='3.6' fill='%23f4f4f6' stroke='%23bfbfca' stroke-width='0.45'/%3E%3Ccircle cx='2.97' cy='-2.97' r='3.6' fill='%23f4f4f6' stroke='%23bfbfca' stroke-width='0.45'/%3E%3Ccircle cx='4.20' cy='-0.00' r='3.6' fill='%23f4f4f6' stroke='%23bfbfca' stroke-width='0.45'/%3E%3Ccircle cx='2.97' cy='2.97' r='3.6' fill='%23f4f4f6' stroke='%23bfbfca' stroke-width='0.45'/%3E%3Ccircle cx='0.00' cy='4.20' r='3.6' fill='%23f4f4f6' stroke='%23bfbfca' stroke-width='0.45'/%3E%3Ccircle cx='-2.97' cy='2.97' r='3.6' fill='%23f4f4f6' stroke='%23bfbfca' stroke-width='0.45'/%3E%3Ccircle cx='-4.20' cy='0.00' r='3.6' fill='%23f4f4f6' stroke='%23bfbfca' stroke-width='0.45'/%3E%3Ccircle cx='-2.97' cy='-2.97' r='3.6' fill='%23f4f4f6' stroke='%23bfbfca' stroke-width='0.45'/%3E%3Ccircle cx='0.75' cy='-2.07' r='2.4' fill='%23ffffff' stroke='%23d0d0d8' stroke-width='0.4'/%3E%3Ccircle cx='2.17' cy='-0.38' r='2.4' fill='%23ffffff' stroke='%23d0d0d8' stroke-width='0.4'/%3E%3Ccircle cx='1.41' cy='1.69' r='2.4' fill='%23ffffff' stroke='%23d0d0d8' stroke-width='0.4'/%3E%3Ccircle cx='-0.75' cy='2.07' r='2.4' fill='%23ffffff' stroke='%23d0d0d8' stroke-width='0.4'/%3E%3Ccircle cx='-2.17' cy='0.38' r='2.4' fill='%23ffffff' stroke='%23d0d0d8' stroke-width='0.4'/%3E%3Ccircle cx='-1.41' cy='-1.69' r='2.4' fill='%23ffffff' stroke='%23d0d0d8' stroke-width='0.4'/%3E%3Ccircle r='1.5' fill='%23d3d3db'/%3E%3C/g%3E%3Cg transform='translate(54.76 4.75) scale(1.2)'%3E%3Ccircle cx='0.00' cy='-1.60' r='1.3' fill='%23ffffff' stroke='%23c2c2cc' stroke-width='0.3'/%3E%3Ccircle cx='1.52' cy='-0.49' r='1.3' fill='%23ffffff' stroke='%23c2c2cc' stroke-width='0.3'/%3E%3Ccircle cx='0.94' cy='1.29' r='1.3' fill='%23ffffff' stroke='%23c2c2cc' stroke-width='0.3'/%3E%3Ccircle cx='-0.94' cy='1.29' r='1.3' fill='%23ffffff' stroke='%23c2c2cc' stroke-width='0.3'/%3E%3Ccircle cx='-1.52' cy='-0.49' r='1.3' fill='%23ffffff' stroke='%23c2c2cc' stroke-width='0.3'/%3E%3Ccircle r='.6' fill='%23b5b5c0'/%3E%3C/g%3E%3Cg transform='translate(91.57 31.49) scale(1.05)'%3E%3Ccircle cx='0.00' cy='-1.60' r='1.3' fill='%23ffffff' stroke='%23c2c2cc' stroke-width='0.3'/%3E%3Ccircle cx='1.52' cy='-0.49' r='1.3' fill='%23ffffff' stroke='%23c2c2cc' stroke-width='0.3'/%3E%3Ccircle cx='0.94' cy='1.29' r='1.3' fill='%23ffffff' stroke='%23c2c2cc' stroke-width='0.3'/%3E%3Ccircle cx='-0.94' cy='1.29' r='1.3' fill='%23ffffff' stroke='%23c2c2cc' stroke-width='0.3'/%3E%3Ccircle cx='-1.52' cy='-0.49' r='1.3' fill='%23ffffff' stroke='%23c2c2cc' stroke-width='0.3'/%3E%3Ccircle r='.6' fill='%23b5b5c0'/%3E%3C/g%3E%3Cg transform='translate(95.06 43.67) scale(1.25)'%3E%3Ccircle cx='0.00' cy='-1.60' r='1.3' fill='%23ffffff' stroke='%23c2c2cc' stroke-width='0.3'/%3E%3Ccircle cx='1.52' cy='-0.49' r='1.3' fill='%23ffffff' stroke='%23c2c2cc' stroke-width='0.3'/%3E%3Ccircle cx='0.94' cy='1.29' r='1.3' fill='%23ffffff' stroke='%23c2c2cc' stroke-width='0.3'/%3E%3Ccircle cx='-0.94' cy='1.29' r='1.3' fill='%23ffffff' stroke='%23c2c2cc' stroke-width='0.3'/%3E%3Ccircle cx='-1.52' cy='-0.49' r='1.3' fill='%23ffffff' stroke='%23c2c2cc' stroke-width='0.3'/%3E%3Ccircle r='.6' fill='%23b5b5c0'/%3E%3C/g%3E%3Cg transform='translate(50.00 95.50) scale(1.15)'%3E%3Ccircle cx='0.00' cy='-1.60' r='1.3' fill='%23ffffff' stroke='%23c2c2cc' stroke-width='0.3'/%3E%3Ccircle cx='1.52' cy='-0.49' r='1.3' fill='%23ffffff' stroke='%23c2c2cc' stroke-width='0.3'/%3E%3Ccircle cx='0.94' cy='1.29' r='1.3' fill='%23ffffff' stroke='%23c2c2cc' stroke-width='0.3'/%3E%3Ccircle cx='-0.94' cy='1.29' r='1.3' fill='%23ffffff' stroke='%23c2c2cc' stroke-width='0.3'/%3E%3Ccircle cx='-1.52' cy='-0.49' r='1.3' fill='%23ffffff' stroke='%23c2c2cc' stroke-width='0.3'/%3E%3Ccircle r='.6' fill='%23b5b5c0'/%3E%3C/g%3E%3Cg transform='translate(6.73 64.06) scale(1.05)'%3E%3Ccircle cx='0.00' cy='-1.60' r='1.3' fill='%23ffffff' stroke='%23c2c2cc' stroke-width='0.3'/%3E%3Ccircle cx='1.52' cy='-0.49' r='1.3' fill='%23ffffff' stroke='%23c2c2cc' stroke-width='0.3'/%3E%3Ccircle cx='0.94' cy='1.29' r='1.3' fill='%23ffffff' stroke='%23c2c2cc' stroke-width='0.3'/%3E%3Ccircle cx='-0.94' cy='1.29' r='1.3' fill='%23ffffff' stroke='%23c2c2cc' stroke-width='0.3'/%3E%3Ccircle cx='-1.52' cy='-0.49' r='1.3' fill='%23ffffff' stroke='%23c2c2cc' stroke-width='0.3'/%3E%3Ccircle r='.6' fill='%23b5b5c0'/%3E%3C/g%3E%3Cg transform='translate(4.75 54.76) scale(1.25)'%3E%3Ccircle cx='0.00' cy='-1.60' r='1.3' fill='%23ffffff' stroke='%23c2c2cc' stroke-width='0.3'/%3E%3Ccircle cx='1.52' cy='-0.49' r='1.3' fill='%23ffffff' stroke='%23c2c2cc' stroke-width='0.3'/%3E%3Ccircle cx='0.94' cy='1.29' r='1.3' fill='%23ffffff' stroke='%23c2c2cc' stroke-width='0.3'/%3E%3Ccircle cx='-0.94' cy='1.29' r='1.3' fill='%23ffffff' stroke='%23c2c2cc' stroke-width='0.3'/%3E%3Ccircle cx='-1.52' cy='-0.49' r='1.3' fill='%23ffffff' stroke='%23c2c2cc' stroke-width='0.3'/%3E%3Ccircle r='.6' fill='%23b5b5c0'/%3E%3C/g%3E%3C/svg%3E"); border-radius: 0; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .45)); }
/* Pastel: Ege's own animated drawing (public/frames/pastel.webp, made from image.gif with its dark background made see-through).
   The hole in the drawing (centre 157,168 of 318 px, radius about 107) sits a little left of and below its middle, so the picture is placed to fill it. */
.av-frame.f-pastel { inset: auto; left: calc(var(--s) * -0.2425); top: calc(var(--s) * -0.2910); width: calc(var(--s) * 1.5000); height: calc(var(--s) * 1.5000); border-radius: 0; background: url(/frames/pastel.webp) center / 100% 100% no-repeat; }
.av-frame.f-pastel.sm { background-image: url(/frames/pastel-sm.webp); } /* (96 px, 15 frames a second: for chat and lists) */
@media (prefers-reduced-motion: reduce) { .av-frame { animation: none !important; } }
/* the frame picker in Settings → Profiles */
.frame-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.frame-pick { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px 8px; border-radius: 10px; background: var(--bg-input-dark); border: 2px solid transparent; font-size: 12px; color: var(--text); }
.frame-pick:hover { background: var(--bg-hover); }
.frame-pick.on { border-color: var(--brand); }
.frame-pick .avatar { margin: 6px; }
.frame-pick .fp-none { width: 48px; height: 48px; margin: 6px; border-radius: 50%; border: 2px dashed var(--muted); display: grid; place-items: center; color: var(--muted); }
.pf-clip-likes { color: #ff6b9a; margin-left: 10px; }
.pf-clip-likes .ic { color: #ff4d8d; }
/* Songs I love: the list in the full profile (press a song to hear its preview) */
.pf-songs { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.pf-song { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 10px; background: var(--pf-card); text-align: left; min-width: 0; }
.pf-song:hover { background: var(--pf-card-hover); }
.pf-song-art { position: relative; width: 44px; height: 44px; border-radius: 6px; overflow: hidden; flex-shrink: 0; display: grid; place-items: center; background: var(--bg-3); color: var(--muted); }
.pf-song-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-song-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity .12s; }
.pf-song:hover .pf-song-play, .pf-song.playing .pf-song-play { opacity: 1; }
.pf-song.playing .pf-song-play { background: rgba(161, 195, 73, .6); animation: songPulse 1s ease-in-out infinite alternate; }
.pf-song-text { display: flex; flex-direction: column; min-width: 0; }
.pf-song-text b { color: var(--text-strong); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-song-text small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-deezer { font-size: 11px; color: var(--muted); margin-top: 6px; }
.gp-artist { color: var(--muted); font-size: 12px; }
@keyframes songPulse { from { opacity: .75; } to { opacity: 1; } }
/* Songs I Love on the profile card: big rows you can play right there */
.pf-music { padding: 10px 10px 8px; display: flex; flex-direction: column; gap: 6px; }
.pf-music-head { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-strong); padding: 0 2px; }
.pf-music-head b { font-weight: 700; }
.pf-music-more { display: inline-flex; align-items: center; gap: 2px; align-self: flex-start; font-size: 12px; font-weight: 600; color: var(--muted); padding: 2px; }
.pf-music-more:hover { color: var(--text); }
.pf-song-row { width: 100%; background: var(--pf-card-hover); }
.pf-music .pf-song-row { padding: 6px 8px 6px 6px; }
.pf-song-row .pf-song-art { width: 46px; height: 46px; }
.pf-song-row .pf-song-text { flex: 1; }
.pf-song-btn { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--brand); color: var(--on-brand, #10140a); transition: transform .12s; }
.pf-song-row:hover .pf-song-btn { transform: scale(1.08); }
.pf-song-btn .i-pause { display: none; }
.pf-song.playing .pf-song-btn .i-play { display: none; }
.pf-song.playing .pf-song-btn .i-pause { display: block; }
.pf-song.playing { outline: 2px solid var(--brand); outline-offset: -2px; }
.pf-song.playing .pf-song-art img { animation: songSpin 6s linear infinite; border-radius: 50%; }
@keyframes songSpin { to { transform: rotate(360deg); } }
/* Fast-Change: the 5 saved profiles */
.pf-slots { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.pf-slots-head { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-strong); }
.pf-slots-head small { margin-left: auto; color: var(--muted); font-size: 12px; }
.pf-slots-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.pf-slot.locked { opacity: .55; border-style: dashed; border-color: var(--line-soft); }
.pf-slot.locked:hover { opacity: .8; }
.pf-slot-lock { position: absolute; left: 4px; top: 3px; color: var(--text-strong); display: grid; }
.pf-slot { position: relative; min-width: 0; height: 52px; border-radius: 10px; display: grid; place-items: center; background: var(--pf-card-hover, var(--bg-3)); border: 2px solid transparent; color: var(--muted); }
.pf-slot:hover { background: var(--bg-input); }
.pf-slot.on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 18%, transparent); }
.pf-slot.empty { border-style: dashed; border-color: var(--line-soft); }
.pf-slot > span { position: absolute; right: 4px; bottom: 2px; font-size: 10px; font-weight: 800; color: var(--muted); }
.pf-slot.on > span { color: var(--brand-text); }
.pe-slots { max-width: 520px; margin-bottom: 18px; }
.pe-slots .pf-slots { background: var(--bg-input-dark); border-radius: 12px; }
/* a custom frame (Efsane): their own picture, sized (--fs) and moved (--fx, --fy) in units of the profile picture */
/* the box it may draw in is fixed (20% of the picture on each side); the picture is scaled and moved inside it and
   anything outside the box is cut off, however big the uploaded picture or its size setting is */
.av-frame.f-custom { inset: calc(var(--s) * -0.2); border-radius: 0; overflow: hidden;
  background-size: calc(var(--s) * var(--fs)) auto; background-position: calc(50% + var(--s) * var(--fx)) calc(50% + var(--s) * var(--fy)); }
.cf-stage { position: relative; height: 320px; border-radius: 12px; background: var(--bg-input-dark); display: grid; place-items: center; overflow: hidden; touch-action: none; cursor: grab; margin-bottom: 12px; }
.cf-stage:active { cursor: grabbing; }
.cf-pic { position: relative; width: 180px; height: 180px; }
.cf-frame { position: absolute; inset: -20%; pointer-events: none; z-index: 2; background-repeat: no-repeat; outline: 1px dashed rgba(255, 255, 255, .35); }
.cf-empty { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--muted); font-size: 13px; pointer-events: none; }
.cf-btns { margin-bottom: 12px; }
.cf-size { width: 100%; }
/* Competitions (contests.js) */
.ct-new { margin-left: auto; flex-shrink: 0; }
.ct-admin { margin: -4px 0 0; }
.ct-prizes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.ct-prize { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--bg-3); border: 1px solid var(--line-soft); }
.ct-prize > span { font-size: 26px; line-height: 1; }
.ct-prize div { display: flex; flex-direction: column; min-width: 0; }
.ct-prize small { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.ct-prize b { color: var(--text-strong); font-size: 14px; overflow-wrap: anywhere; }
.ct-prize.p1 { border-color: rgba(255, 199, 0, .45); background: linear-gradient(135deg, rgba(255, 199, 0, .14), transparent); }
.ct-prize.p2 { border-color: rgba(192, 199, 209, .4); }
.ct-prize.p3 { border-color: rgba(205, 127, 50, .45); }
.ct-judges small { display: block; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; margin-bottom: 6px; }
.ct-judges > div { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-judge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 16px; background: var(--bg-3); font-size: 13px; font-weight: 600; color: var(--text-strong); cursor: pointer; }
.ct-judge:hover { background: var(--bg-input); }
.ct-h { margin: 4px 0 -4px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; }
.ct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.ct-grid.winners { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.ct-entry { margin: 0; border-radius: 10px; overflow: hidden; background: var(--bg-3); border: 1px solid var(--line-soft); display: flex; flex-direction: column; }
.ct-entry.mine { border-color: rgba(var(--brand-rgb), .5); }
.ct-entry.placed.p1 { border-color: #ffc700; box-shadow: 0 0 0 1px #ffc700; }
.ct-entry.placed.p2 { border-color: #c0c7d1; }
.ct-entry.placed.p3 { border-color: #cd7f32; }
.ct-img { position: relative; display: block; aspect-ratio: 1; background: #000; }
.ct-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ct-medal { position: absolute; left: 6px; top: 6px; font-size: 24px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
.ct-entry figcaption { padding: 8px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ct-entry figcaption > b { color: var(--text-strong); font-size: 13px; overflow-wrap: anywhere; }
.ct-by { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); cursor: pointer; min-width: 0; }
.ct-by > span:not(.avatar) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-by em { font-style: normal; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 8px; background: rgba(var(--brand-rgb), .2); color: var(--brand); }
.ct-places { display: flex; gap: 4px; }
.ct-places button { flex: 1; padding: 3px 0; border-radius: 6px; background: var(--bg-2); font-size: 16px; opacity: .45; border: 1px solid transparent; }
.ct-places button:hover { opacity: .8; }
.ct-places button.on { opacity: 1; border-color: var(--brand); background: rgba(var(--brand-rgb), .15); }
.ct-rm { align-self: flex-start; font-size: 12px; color: var(--red, #f23f43); }
.ct-upload { display: grid; place-items: center; min-height: 180px; border-radius: 10px; border: 2px dashed var(--line-soft); background: var(--bg-input-dark); color: var(--muted); cursor: pointer; overflow: hidden; margin-bottom: 8px; }
.ct-upload.small { min-height: 90px; }
.ct-upload:hover { border-color: var(--brand); color: var(--text); }
.ct-upload span { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ct-upload img { max-width: 100%; max-height: 300px; display: block; }
.ct-rules { padding: 14px 16px; border-radius: 10px; background: var(--bg-3); border: 1px solid var(--line-soft); }
.ct-rules h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 15px; color: var(--text-strong); }
.ct-rules > div { font-size: 14px; line-height: 1.55; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.ct-editor textarea[name="rules"] { min-height: 200px; resize: vertical; }
.ct-prize-in { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ct-prize-in > span { font-size: 22px; }
.modal.ct-editor { width: 560px; }
/* #destekçi, #davet … in chat: links to UnTidl's own pages */
.mention.app-link { display: inline-flex; align-items: center; gap: 3px; vertical-align: bottom; cursor: pointer; }
.mention.app-link .ic { flex-shrink: 0; }
/* shared frames: the staff pencil on a tile, the share tile */
.frame-pick { position: relative; }
.fp-edit { position: absolute; right: 4px; top: 4px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-float); color: var(--text); font-style: normal; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.fp-edit:hover { background: var(--brand); color: var(--on-brand, #10140a); }
.fp-share .fp-none { color: var(--brand); }
.fm-share-pic { display: grid; place-items: center; padding: 18px 0 8px; }
.fm-newgroup { margin-top: 6px; }
.fm-del { margin-top: 14px; }
/* songs on stories */
.se-music { display: flex; flex-direction: column; }
.se-song, .song-pick { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 8px; background: var(--bg-3); }
.se-song img, .song-pick img, .sp-art { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; flex-shrink: 0; display: grid; place-items: center; background: var(--bg-2); color: var(--muted); }
.sp-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sp-text b { color: var(--text-strong); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-text small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.se-time { float: right; font-weight: 600; color: var(--text); text-transform: none; }
.song-pick-list { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow-y: auto; margin: 10px 0 6px; }
.song-pick { cursor: pointer; background: none; }
.song-pick:hover { background: var(--bg-3); }
.sp-play { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--on-brand, #10140a); flex-shrink: 0; }
.sv-music { position: absolute; left: 50%; top: 10%; transform: translateX(-50%); max-width: 80%; display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 16px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 13px; pointer-events: none; }
.sv-music span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* chat bubbles in voice channels: cartoon speech bubbles that pop up over someone and float away */
#vb-layer { position: fixed; inset: 0; pointer-events: none; z-index: 1450; }
.vb-bubble { position: absolute; max-width: 240px; padding: 8px 12px; border-radius: 18px; background: #fff; color: #17181c; border: 2.5px solid #17181c;
  box-shadow: 3px 4px 0 #17181c; font: 700 14px/1.3 "Comic Sans MS", "Comic Neue", "Chalkboard SE", Inter, system-ui, sans-serif; overflow-wrap: anywhere;
  transform: translate(-50%, calc(-100% - var(--lift, 0px))); animation: vbPop .45s cubic-bezier(.2, 1.6, .4, 1) both; transition: transform .25s ease; }
.vb-bubble b { display: block; font-size: 11px; color: #5865f2; margin-bottom: 1px; }
.vb-bubble::after { content: ''; position: absolute; left: 50%; bottom: -11px; width: 14px; height: 14px; background: #fff; border-right: 2.5px solid #17181c; border-bottom: 2.5px solid #17181c; transform: translateX(-50%) rotate(45deg); border-bottom-right-radius: 4px; }
.vb-bubble.on-row { transform: translate(0, calc(-50% - var(--lift, 0px))); }
.vb-bubble.on-row::after { left: -8px; top: 50%; bottom: auto; transform: translateY(-50%) rotate(135deg); }
.vb-bubble.out { animation: vbAway .55s ease-in forwards; }
@keyframes vbPop { 0% { opacity: 0; scale: .3; rotate: -8deg; } 60% { opacity: 1; scale: 1.08; rotate: 3deg; } 100% { scale: 1; rotate: 0deg; } }
@keyframes vbAway { to { opacity: 0; translate: 0 -26px; scale: .9; } }
.vb-form { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); display: flex; gap: 6px; width: min(420px, calc(100vw - 32px)); padding: 6px; border-radius: 12px; background: var(--bg-float); box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
.vb-form input { flex: 1; min-width: 0; border: 0; outline: 0; background: var(--bg-input); color: var(--text-strong); border-radius: 8px; padding: 8px 10px; font-size: 14px; }
.stage-controls { position: relative; }
@media (prefers-reduced-motion: reduce) { .vb-bubble, .vb-bubble.out { animation: none; } }
/* the keybind's box for typing a voice bubble from anywhere in the app */
.vb-quick { position: fixed; right: 18px; bottom: 24px; z-index: 1460; display: flex; gap: 6px; width: min(380px, calc(100vw - 32px)); padding: 6px; border-radius: 12px; background: var(--bg-float); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); animation: vbPop .35s cubic-bezier(.2, 1.4, .4, 1) both; }
.vb-quick input { flex: 1; min-width: 0; border: 0; outline: 0; background: var(--bg-input); color: var(--text-strong); border-radius: 8px; padding: 8px 10px; font-size: 14px; }
/* voice bubbles when the call screen is not open: a stack in the bottom-right corner */
#vb-corner { position: fixed; right: 18px; bottom: 90px; z-index: 1450; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none; }
.vb-corner-item { display: flex; align-items: flex-end; gap: 8px; animation: vbPop .45s cubic-bezier(.2, 1.6, .4, 1) both; }
.vb-corner-item.out { animation: vbAway .55s ease-in forwards; }
.vb-corner-item .avatar { flex-shrink: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); border-radius: 50%; }
.vb-bubble.in-corner { position: relative; transform: none; animation: none; }
.vb-bubble.in-corner::after { left: auto; right: -8px; bottom: 8px; transform: rotate(-45deg); }
body.mobile #vb-corner { right: 10px; bottom: calc(80px + var(--sab, 0px)); }
.frame-now { display: flex; align-items: center; gap: 18px; padding: 14px 16px; border-radius: 12px; background: var(--bg-input-dark); margin-bottom: 8px; }
.frame-now .fn-pic { padding: 8px; }
.frame-now .fn-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
.frame-now .fn-text .row-gap { flex-wrap: wrap; } /* (the buttons go on to the next line instead of out of the box) */
.frame-now .fn-text b { color: var(--text-strong); font-size: 15px; }
.frame-modal { width: min(720px, 94vw); max-width: none; }
.frame-modal .fm-top { display: flex; align-items: center; gap: 22px; padding: 6px 4px 14px; border-bottom: 1px solid var(--line-soft); margin-bottom: 10px; }
.frame-modal .fm-preview { padding: 14px; }
.frame-modal .fm-name { font-size: 18px; color: var(--text-strong); }
.frame-modal .fm-scroll { max-height: min(56vh, 520px); overflow-y: auto; padding-right: 4px; }
.frame-modal .fm-scroll > .frame-pick { width: 96px; margin-bottom: 4px; }
.frame-modal .fm-h { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 14px 0 8px; }
.frame-modal .frame-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.frame-pick.locked { opacity: .6; }
.frame-pick small { color: var(--muted); font-size: 10px; }
.avatar-edit { position: relative; border-radius: 50%; cursor: pointer; }
.avatar-edit-overlay, .edit-overlay { position: absolute; display: grid; place-items: center; gap: 6px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 13px; font-weight: 700; opacity: 0; transition: opacity .15s; pointer-events: none; z-index: 2; }
.avatar-edit-overlay { inset: 0; border-radius: 50%; }
.avatar-edit:hover .avatar-edit-overlay { opacity: 1; }
/* note: .pf-avatar is already absolutely positioned — don't override it */
.pe-card .pf-avatar { cursor: pointer; }
.pe-card .pf-banner { cursor: pointer; position: relative; }
.edit-overlay { inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; }
.edit-overlay.round { inset: 6px; border-radius: 50%; }
.pe-card .pf-avatar:hover .edit-overlay, .pe-card .pf-banner:hover .edit-overlay { opacity: 1; }
.kb-row { flex-wrap: wrap; }
.kb-warn { flex-basis: 100%; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--red); margin-top: -4px; }

/* voice panel: shield with a hover card */
.vp-shield { position: relative; display: inline-grid; place-items: center; margin-left: 4px; color: var(--green); cursor: help; }
.vp-shield-pop { position: absolute; left: -12px; bottom: calc(100% + 10px); z-index: 50; display: none; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 6px; background: var(--bg-float); box-shadow: var(--shadow); white-space: nowrap; font-size: 13px; font-weight: 500; color: var(--text-strong); cursor: default; animation: popUp .14s var(--ease-out, ease); }
.vp-shield-pop::after { content: ''; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px; } /* hover bridge so the link stays reachable */
.vp-shield-pop a { color: var(--link); font-weight: 600; font-size: 12px; }
.vp-shield:hover .vp-shield-pop, .vp-shield:focus-within .vp-shield-pop { display: flex; }

/* GIF button + picker */
.composer-btn.gif-btn { width: auto; padding: 0 6px; }
.gif-btn span { font: 800 11px var(--font); letter-spacing: .04em; border: 2px solid currentColor; border-radius: 5px; padding: 1px 4px; line-height: 1.2; }
.gif-picker { width: 420px; height: 460px; display: flex; flex-direction: column; background: var(--bg-2); border-radius: 8px; overflow: hidden; }
.gif-search { display: flex; align-items: center; gap: 8px; margin: 12px 12px 6px; padding: 0 10px; height: 36px; background: var(--bg-3); border-radius: 6px; color: var(--icon); }
.gif-search input { flex: 1; background: none; border: 0; outline: none; font-size: 15px; color: var(--text); }
.gif-heading { padding: 4px 14px 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--muted); letter-spacing: .02em; }
.gif-scroll { flex: 1; overflow-y: auto; padding: 0 10px 10px; }
.gif-cols { display: flex; gap: 6px; align-items: flex-start; }
.gif-col { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gif-item { width: 100%; border-radius: 6px; overflow: hidden; background: var(--bg-3); display: block; position: relative; animation: fadeIn .25s ease; }
.gif-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gif-item:hover { outline: 2px solid var(--brand); outline-offset: -2px; }
.gif-item:hover img { filter: brightness(1.08); }
.gif-status { text-align: center; color: var(--muted); font-size: 13px; padding: 12px; min-height: 20px; }
.gif-footer { flex-shrink: 0; padding: 6px 12px; font-size: 11px; font-weight: 600; color: var(--muted); text-align: right; background: var(--bg-float); }
.gif-attachment { position: relative; }
.gif-attachment img { max-width: 100%; height: auto; }
body.mobile .gif-attachment img { max-width: min(180px, 52vw); max-height: 150px; width: auto; object-fit: contain; }
.rail-icon.rail-clips { color: var(--brand); }
.rail-item.active .rail-icon.rail-clips { background: var(--brand); color: var(--on-brand, #10140a); }
/* on a phone the Android card comes first on the download page */
.dlp.on-phone .dlp-cols { order: -1; }
.dlp.on-phone .dlp-card-phone { order: -1; }
.gif-badge { position: absolute; left: 8px; bottom: 8px; background: rgba(0, 0, 0, .6); color: #fff; font: 800 10px var(--font); letter-spacing: .05em; padding: 2px 5px; border-radius: 4px; opacity: 0; transition: opacity .15s; line-height: 1.3; }
.gif-attachment:hover .gif-badge { opacity: 1; }
body.mobile .gif-picker { width: 100%; height: 60dvh; border-radius: 16px 16px 0 0; }

/* Twemoji */
img.emoji { width: 1.375em; height: 1.375em; vertical-align: -0.3em; margin: 0 .05em; object-fit: contain; display: inline-block; }
.msg-content.jumbo img.emoji { width: 48px; height: 48px; vertical-align: -12px; }
.reaction img.emoji { width: 16px; height: 16px; vertical-align: middle; margin: 0; }
.pf-bubble-emoji img.emoji, .emoji-input-btn img.emoji { width: 20px; height: 20px; vertical-align: middle; }

/* emoji picker */
.emoji-picker { width: 440px; height: 420px; display: flex; flex-direction: column; background: var(--bg-2); border-radius: 8px; overflow: hidden; }
.emoji-top { display: flex; gap: 8px; padding: 10px 12px; box-shadow: 0 1px 0 rgba(0, 0, 0, .2); }
.emoji-top .emoji-search { flex: 1; margin: 0; }
.emoji-tone { width: 32px; height: 32px; border-radius: 6px; display: grid; place-items: center; }
.emoji-tone:hover { background: var(--hover); }
.emoji-tone img.emoji { width: 22px; height: 22px; margin: 0; }
.emoji-main { flex: 1; display: flex; min-height: 0; }
.emoji-cats { width: 44px; flex-shrink: 0; background: var(--bg-3); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; overflow-y: auto; scrollbar-width: none; }
.emoji-cats button { width: 32px; height: 32px; border-radius: 6px; display: grid; place-items: center; color: var(--icon); filter: grayscale(.6); opacity: .8; }
.emoji-cats button:hover { background: var(--hover); filter: none; opacity: 1; }
.emoji-cats img.emoji { width: 20px; height: 20px; margin: 0; }
.emoji-grid { flex: 1; display: block; overflow-y: auto; padding: 0 8px 8px; }
.emoji-sec-title { position: sticky; top: 0; z-index: 1; background: var(--bg-2); padding: 10px 4px 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--muted); letter-spacing: .02em; }
.emoji-sec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); }
.emoji-btn { height: 40px; border-radius: 6px; display: grid; place-items: center; }
.emoji-btn img.emoji { width: 30px; height: 30px; margin: 0; transition: transform .12s var(--ease-spring, ease); }
.emoji-btn:hover { background: var(--hover-2); }
.emoji-btn:hover img.emoji { transform: scale(1.15); }
.emoji-footer img.emoji { width: 28px; height: 28px; margin: 0; }
.emoji-preview { display: grid; place-items: center; min-width: 28px; }

/* :shortcode: autocomplete above the message box */
.composer { position: relative; }
.emoji-ac { position: absolute; left: 16px; right: 16px; bottom: calc(100% + 4px); z-index: 20; background: var(--bg-2); border-radius: 8px; padding: 8px; box-shadow: var(--shadow); animation: fadeUp .12s var(--ease-out, ease); }
.emoji-ac.emoji-ac-float { position: fixed; left: 0; top: 0; right: auto; bottom: auto; width: min(300px, calc(100vw - 16px)); z-index: 3000; max-height: 60vh; overflow-y: auto; }
.emoji-ac-title { font-size: 12px; font-weight: 700; color: var(--muted); padding: 0 8px 6px; }
.emoji-ac-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 4px; cursor: pointer; font-size: 15px; color: var(--text); }
.emoji-ac-row img.emoji { width: 22px; height: 22px; margin: 0; }
.emoji-ac-row.ac-channel { gap: 8px; }
.emoji-ac-row.ac-channel .ic { color: var(--muted); flex-shrink: 0; }
.emoji-ac-row.ac-channel span { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emoji-ac-row.ac-person { gap: 8px; }
.emoji-ac-row.ac-person .avatar { flex-shrink: 0; }
.emoji-ac-row.ac-person span { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emoji-ac-row.ac-person small { color: var(--muted); font-size: 13px; margin-left: auto; padding-left: 12px; white-space: nowrap; }
.emoji-ac-row.sel, .emoji-ac-row:hover { background: var(--hover-2); color: var(--text-strong); }

/* delete-message preview */
.confirm-preview img { display: block; max-width: 100%; max-height: 200px; border-radius: 6px; margin-top: 6px; }
.confirm-text { white-space: pre-wrap; }
body.mobile .emoji-picker { width: 100%; height: 55dvh; }

/* settings: credits */
.dev-list { display: flex; flex-direction: column; gap: 8px; }
.dev-row { display: flex; align-items: center; gap: 14px; background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 8px; padding: 12px 14px; }
.dev-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-3); color: var(--icon); display: grid; place-items: center; flex-shrink: 0; }
.dev-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dev-info b { color: var(--text-strong); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-info > span { color: var(--muted); font-size: 13px; }
.dev-now { color: var(--green); font-weight: 600; }
.dev-x { color: var(--muted); padding: 6px; border-radius: 50%; display: grid; place-items: center; }
.dev-x:hover { color: var(--red); background: var(--bg-hover); }
.credit-community { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; margin-bottom: 14px; border-radius: 12px; border: 1px solid rgba(var(--brand-rgb), .45);
  background: linear-gradient(135deg, rgba(var(--brand-rgb), .22), rgba(var(--brand-rgb), .05) 60%), var(--bg-2); }
.credit-community .cc-icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: var(--brand); color: var(--on-brand); }
.credit-community .credit-top b { font-size: 18px; }
.credit-community p { font-size: 14px; line-height: 1.5; margin-top: 8px; color: var(--text); }
.credit-community .cc-thanks { font-weight: 700; color: var(--brand-text); }
body.mobile .credit-community { flex-direction: column; gap: 10px; }
.credits { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.credit { background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.credit-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.credit-top b { color: var(--text-strong); font-weight: 700; }
.credit-what { font-size: 12px; color: var(--muted); text-align: right; }
.credit-by { font-size: 13px; color: var(--text); }
.credit-links { display: flex; gap: 12px; font-size: 13px; font-weight: 600; margin-top: 2px; }
.credit-license a { color: var(--brand-text); }

/* settings: developer / theme editor */
.theme-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 8px; }
.theme-preset { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line-soft); text-align: left; }
.theme-preset:hover { border-color: var(--brand); }
.tp-swatches { display: flex; height: 28px; border-radius: 6px; overflow: hidden; }
.tp-swatches i { flex: 1; }
.tp-name { font-size: 13px; font-weight: 600; color: var(--text-strong); }
.theme-group { margin-top: 22px; }
.theme-rows { display: flex; flex-direction: column; gap: 6px; }
.theme-row { display: flex; align-items: center; gap: 12px; padding: 6px 8px; border-radius: 8px; }
.theme-row:hover { background: var(--hover); }
.theme-row.changed .theme-label { color: var(--text-strong); }
.theme-swatch { position: relative; width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15), 0 1px 4px rgba(0, 0, 0, .3); }
.theme-swatch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.theme-label { flex: 1; display: flex; flex-direction: column; font-size: 14px; font-weight: 500; color: var(--text); }
.theme-label small { font: 12px var(--mono); color: var(--faint); }
.theme-hex { width: 110px; height: 34px; font: 13px var(--mono) !important; text-transform: lowercase; }
.theme-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* Settings → Themes */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.theme-card { display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 10px; background: var(--bg-2); border: 2px solid transparent; text-align: left; cursor: pointer; transition: border-color .15s, transform .15s; }
.theme-card:hover { border-color: var(--line); transform: translateY(-2px); }
.theme-card.active { border-color: var(--brand); }
.tc-preview { display: flex; height: 104px; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.tc-rail { width: 22px; display: flex; flex-direction: column; align-items: center; gap: 5px; padding-top: 6px; }
.tc-rail i { width: 12px; height: 12px; border-radius: 50%; }
.tc-side { width: 46px; display: flex; flex-direction: column; gap: 6px; padding: 8px 6px; }
.tc-side i { height: 5px; border-radius: 3px; opacity: .55; }
.tc-chat { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 8px; min-width: 0; }
.tc-msg { display: flex; gap: 6px; align-items: flex-start; }
.tc-msg b { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.tc-msg > span { flex: 1; display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }
.tc-msg i { display: block; height: 4px; border-radius: 2px; }
.tc-input { margin-top: auto; height: 12px; border-radius: 4px; }
.tc-name { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 2px; font-weight: 600; color: var(--text-strong); font-size: 14px; }
.tc-name .ic { color: var(--brand); }

/* ------------------------------------------------------------------ trust & safety, roles */
.flip-y { transform: rotate(180deg); }
.flip-x { transform: scaleX(-1); }
.sn-badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
.sn-ext { margin-left: 6px; opacity: .6; transform: scaleX(-1); }
.sn-legal { padding: 4px 10px 12px; font-size: 12px; color: var(--muted); }
.sn-legal a { color: var(--muted); }
.sn-legal a:hover { color: var(--text); }
.empty-note { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 16px; color: var(--muted); text-align: center; }
.empty-note .ic { color: var(--faint); }
.check-row { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; cursor: pointer; font-size: 14px; color: var(--text); }
.check-row input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--brand); flex-shrink: 0; }
.gp-kind { margin-left: auto; padding-left: 10px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.tmdb-note { margin-top: 10px; font-size: 11px; }
.theme-card.tc-custom .tc-preview { display: grid; place-items: center; background: conic-gradient(from 210deg, #f23f43, #f0b232, #a1c349, #2bb3a3, #4c8dff, #b57bee, #f07fa6, #f23f43); color: #fff; }
.theme-card.tc-custom .tc-preview .ic { filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.th-group { margin: 18px 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.th-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.th-color { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: var(--bg-2); cursor: pointer; }
.th-color input[type=color] { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; flex-shrink: 0; }
.th-color input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.th-color input[type=color]::-webkit-color-swatch { border: 2px solid rgba(var(--tint-rgb), .25); border-radius: 8px; }
.th-label { flex: 1; min-width: 0; font-size: 14px; }
.th-hex { width: 82px; padding: 5px 8px; border-radius: 6px; background: var(--bg-input-dark); color: var(--text); font: 13px Consolas, monospace; text-transform: lowercase; }
/* ---- DM streak and pet ---- */
.streak-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px 2px 5px; border-radius: 10px; background: rgba(var(--tint-rgb), .1); font-size: 12px; color: var(--text); flex-shrink: 0; cursor: pointer; }
.streak-chip img.emoji { width: 14px; height: 14px; margin: 0; }
.streak-chip.risk { background: rgba(240, 178, 50, .18); color: var(--yellow); }
.streak-chip.done { background: rgba(var(--green-rgb), .16); }
.dm-item .streak-chip { margin-left: auto; cursor: inherit; }
.hdr-streak { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 2px 6px 2px 2px; border-radius: 16px; }
.hdr-streak:hover { background: var(--hover); }
.pet { position: relative; display: inline-grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--pet) 30%, transparent); box-shadow: inset 0 0 0 2px var(--pet); flex-shrink: 0; }
.pet-body { display: grid; place-items: center; width: 62%; height: 62%; }
.pet img.emoji { width: 100%; height: 100%; margin: 0; }
.pet-hat { position: absolute; left: 50%; top: -14%; width: 44%; height: 44%; transform: translateX(-50%) rotate(-8deg); }
.pet-zzz { position: absolute; right: -8%; top: -10%; font-size: 40%; }
.pet.asleep .pet-body { filter: grayscale(1); opacity: .6; }
.streak-modal { width: 440px; }
.streak-top { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.streak-pet .pet { font-size: 96px; }
.streak-num { display: flex; align-items: baseline; gap: 6px; font-size: 14px; color: var(--muted); margin-top: 6px; }
.streak-num img.emoji { width: 26px; height: 26px; margin: 0; align-self: center; }
.streak-num b { font-size: 38px; line-height: 1; color: var(--text-strong); }
.streak-name { font-weight: 700; }
.pet-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.pet-pick button { width: 44px; height: 44px; border-radius: 10px; background: var(--bg-input-dark); display: grid; place-items: center; border: 2px solid transparent; color: var(--muted); }
.pet-pick button img.emoji { width: 26px; height: 26px; margin: 0; }
.pet-pick.small button { width: 36px; height: 36px; }
.pet-pick.small button img.emoji { width: 20px; height: 20px; }
.pet-pick button.on { border-color: var(--brand); }
.pet-pick .pet-col { border-radius: 50%; }
.pet-pick .pet-col.on { border-color: var(--text-strong); }
/* ---- stories ---- */
.stories-bar { display: flex; gap: 10px; padding: 6px 8px 12px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line-soft); margin-bottom: 8px; }
.stories-bar::-webkit-scrollbar { display: none; }
.story-ring { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 56px; flex-shrink: 0; font-size: 11px; color: var(--muted); }
.story-ring > .avatar { box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 4px rgba(var(--tint-rgb), .25); border-radius: 50%; }
.story-ring.new > .avatar { box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 4px var(--brand); }
.story-ring.new { color: var(--text); font-weight: 600; }
.story-ring span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-ring i { position: absolute; right: 2px; top: 30px; width: 18px; height: 18px; border-radius: 50%; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg-2); }
.story-ring.only-plus b { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 2px dashed rgba(var(--tint-rgb), .35); color: var(--muted); }
.story-ring:hover { color: var(--text); }
.story-layer { z-index: 450; background: rgba(0, 0, 0, .88); display: grid; place-items: center; }
/* editor */
.story-edit { display: flex; gap: 20px; height: min(92vh, 860px); max-width: 96vw; }
.se-stage { position: relative; height: 100%; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #000; container-type: inline-size; flex-shrink: 0; touch-action: none; }
.se-stage canvas { width: 100%; height: 100%; display: block; }
.se-items { position: absolute; inset: 0; }
.se-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.se-progress { height: 6px; border-radius: 3px; background: var(--bg-input-dark); overflow: hidden; margin-top: 10px; }
.se-progress i { display: block; height: 100%; width: 0; background: var(--brand); transition: width .2s; }
.se-item { position: absolute; transform: translate(-50%, -50%); cursor: grab; user-select: none; }
.se-item.sel { outline: 2px dashed #fff; outline-offset: 4px; }
.se-text { font-weight: 800; white-space: nowrap; text-shadow: 0 2px 6px rgba(0,0,0,.7); line-height: 1.1; }
.se-mention { background: rgba(0,0,0,.55); padding: .25em .45em; border-radius: 1em; text-shadow: none; }
.se-hint { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-size: 12px; color: rgba(255,255,255,.8); text-shadow: 0 1px 3px #000; pointer-events: none; padding: 0 12px; }
.se-tools { width: 300px; background: var(--bg-2); border-radius: 14px; padding: 14px 16px; overflow-y: auto; display: flex; flex-direction: column; }
.se-tools input[type=range] { width: 100%; accent-color: var(--brand); }
.se-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.se-top { justify-content: space-between; margin-bottom: 8px; }
.se-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.se-filters button { padding: 6px 10px; border-radius: 14px; background: var(--bg-input-dark); font-size: 13px; }
.se-filters button.on { background: var(--brand); color: var(--on-brand); font-weight: 700; }
.se-sel { margin-top: 12px; padding-top: 4px; border-top: 1px solid var(--line-soft); }
.se-colors { display: flex; gap: 6px; margin-top: 8px; }
.se-colors button { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(var(--tint-rgb), .25); }
.se-colors button.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 4px var(--brand); }
/* viewer */
.story-view { position: relative; height: min(94vh, 900px); aspect-ratio: 9 / 16; max-width: 100vw; border-radius: 14px; overflow: hidden; background: #000; display: flex; flex-direction: column; }
.sv-bars { position: absolute; left: 8px; right: 8px; top: 8px; display: flex; gap: 4px; z-index: 3; }
.sv-bars i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.35); overflow: hidden; }
.sv-bars i b { display: block; height: 100%; width: 0; background: #fff; }
.sv-bars i.done b { width: 100%; }
.sv-bars i.on b { animation: svBar linear forwards; }
@keyframes svBar { from { width: 0; } to { width: 100%; } }
.sv-head { position: absolute; left: 0; right: 0; top: 0; padding: 20px 10px 26px; display: flex; align-items: center; gap: 4px; z-index: 3; color: #fff; background: linear-gradient(rgba(0,0,0,.55), transparent); }
.sv-head > button:not(.sv-user) { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.sv-head > button:not(.sv-user):hover { background: rgba(255,255,255,.18); }
.sv-user { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 14px; }
.sv-user small { color: rgba(255,255,255,.75); font-size: 12px; }
.sv-stage { position: relative; flex: 1; min-height: 0; }
.sv-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-media { position: absolute; inset: 0; }
.sv-overlay { position: absolute; inset: 0; pointer-events: none; }
/* a reply to a story, in the chat */
.story-reply { border-left: 3px solid var(--line); padding-left: 10px; margin: 2px 0 4px; }
.story-reply > small { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; }
/* a shared story: a smaller card than a clip's */
.clip-embed.story-embed:not(.mini) { width: 150px; }
.clip-embed.story-embed:not(.mini):empty { min-height: 289px; }
.clip-embed.story-embed:not(.mini) > .ce-text { padding: 8px 10px; gap: 3px; }
.clip-embed.mini { width: auto; display: inline-flex; flex-direction: row; min-height: 0; padding: 6px 10px 6px 6px; gap: 8px; align-items: center; border-radius: 8px; }
.clip-embed.mini:empty { min-height: 68px; min-width: 120px; }
.clip-embed.mini .story-thumb { width: 36px; border-radius: 4px; }
.clip-embed.mini > .ce-text { padding: 0; }
.sv-gone { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: rgba(255,255,255,.75); }
.sv-clip { position: absolute; left: 12px; right: 12px; bottom: 70px; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.6); color: #fff; text-align: left; }
.sv-clip span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sv-clip small { color: rgba(255,255,255,.75); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-clip i { font-style: normal; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 12px; background: var(--brand); color: var(--on-brand); flex-shrink: 0; }
.share-story { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; margin-bottom: 12px; border-radius: 10px; background: var(--bg-input-dark); text-align: left; }
.share-story:hover:not(:disabled) { background: var(--hover); }
.share-story > .ic { width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: var(--brand); color: var(--on-brand); flex-shrink: 0; }
.share-story span { display: flex; flex-direction: column; }
.share-story small { color: var(--muted); font-size: 12px; }
.sv-foot { display: flex; align-items: center; gap: 8px; }
.sv-foot .sv-reply { flex: 1; min-width: 0; }
.sv-share { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 22px; background: var(--brand); color: var(--on-brand); font-weight: 700; font-size: 15px; flex-shrink: 0; margin-left: auto; }
.sv-share:hover { background: var(--brand-hover); }
.sv-items { position: absolute; inset: 0; pointer-events: none; }
.sv-gif { position: absolute; transform: translate(-50%, -50%); }
.sv-mention { position: absolute; transform: translate(-50%, -50%); width: 46%; height: 7%; border-radius: 20px; pointer-events: auto; z-index: 2; }
.sv-nav { position: absolute; top: 0; bottom: 0; width: 34%; z-index: 1; }
.sv-nav.prev { left: 0; }
.sv-nav.next { right: 0; width: 66%; }
.sv-foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 12px 14px; z-index: 3; background: linear-gradient(transparent, rgba(0,0,0,.65)); }
.sv-reply { display: flex; gap: 8px; }
.sv-reply .input { flex: 1; min-width: 0; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: 20px; }
.sv-reply .input::placeholder { color: rgba(255,255,255,.75); }
.sv-views { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 600; font-size: 14px; padding: 6px 10px; border-radius: 16px; background: rgba(0,0,0,.4); }
@media (max-width: 760px) {
  .story-view { height: 100%; width: 100%; aspect-ratio: auto; border-radius: 0; }
  .story-edit { flex-direction: column; height: 100%; width: 100%; max-width: none; gap: 0; }
  .se-stage { height: 56%; align-self: center; border-radius: 0; }
  .se-tools { width: auto; flex: 1; border-radius: 16px 16px 0 0; }
}
/* ---- help ---- */
.help-modal { width: 640px; max-width: 96vw; }
.help-modal .modal-body { display: flex; flex-direction: column; max-height: min(74vh, 720px); }
.help-topics { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 4px; }
.help-topics[hidden] { display: none; }
.help-topics button { padding: 5px 11px; border-radius: 14px; background: var(--bg-input-dark); font-size: 13px; color: var(--muted); }
.help-topics button:hover { color: var(--text); }
.help-topics button.on { background: var(--brand); color: var(--on-brand); font-weight: 700; }
.help-list { flex: 1; min-height: 120px; overflow-y: auto; margin-top: 8px; padding-right: 4px; }
.help-list h4 { margin: 16px 0 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.help-list details { border-radius: 8px; background: var(--bg-2); margin-bottom: 6px; }
.help-list summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; cursor: pointer; font-weight: 600; list-style: none; }
.help-list summary::-webkit-details-marker { display: none; }
.help-list summary .ic { flex-shrink: 0; color: var(--muted); transition: transform .15s; }
.help-list details[open] summary .ic { transform: rotate(180deg); }
.help-list details p { padding: 0 12px 12px; line-height: 1.45; color: var(--text); }
.help-foot { margin-top: 10px; }
.adm-backup { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.adm-backup .ic { color: var(--green); }
.adm-backup.bad, .adm-backup.bad .ic { color: var(--red); font-weight: 600; }
.adm-perms { margin: 8px 0 20px; }
.adm-perms .toggle-row { padding: 10px 0; }
.wl-add { display: flex; gap: 8px; align-items: center; }
.wl-add .input { flex: 1; min-width: 0; }
.wl-add .btn { flex-shrink: 0; }
.wl-list { margin-top: 16px; }
.ban-item { border-bottom: 1px solid var(--line-soft); }
.ban-item .mem-row { border-bottom: 0; }
.inbox-note { margin: 0 8px 12px 56px; padding: 10px 12px; border-radius: 8px; background: var(--bg-input-dark); border-left: 3px solid var(--brand); }
.inbox-note.rejected { border-left-color: var(--muted); opacity: .75; }
.inbox-note .in-head { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.inbox-note p { white-space: pre-wrap; overflow-wrap: anywhere; }
.inbox-note .in-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.wl-list .mem-info { flex: 1; min-width: 0; }
.ss-save { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.composer-pad { width: 12px; }
.toggle-row.disabled { opacity: .5; cursor: not-allowed; }

/* server settings: roles */
.roles-wrap { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: start; }
.roles-list { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; }
.roles-list .btn-block { margin-bottom: 8px; }
.role-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 4px; cursor: pointer; color: var(--text); font-weight: 500; }
.role-item:hover { background: var(--bg-hover); }
.role-item.active { background: var(--bg-hover-2); color: var(--text-strong); }
.role-item small { margin-left: auto; color: var(--muted); font-size: 12px; }
.role-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.role-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.role-move { display: flex; gap: 2px; }
.role-move button { padding: 2px; border-radius: 3px; color: var(--muted); display: grid; place-items: center; }
.role-move button:hover:not(:disabled) { background: var(--bg-3); color: var(--text); }
.role-move button:disabled { opacity: .3; }
.role-lock { color: var(--faint); display: grid; }
.role-edit h3:first-child { margin-top: 0; }
.role-colors { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.rc { width: 28px; height: 28px; border-radius: 6px; border: 2px solid transparent; position: relative; cursor: pointer; }
.rc.active { border-color: var(--text-strong); box-shadow: 0 0 0 2px var(--bg-1) inset; }
.rc:disabled { cursor: not-allowed; opacity: .6; }
.rc.custom { display: grid; place-items: center; border: 2px dashed var(--muted); color: var(--muted); overflow: hidden; }
.rc.custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.perm-h { margin-top: 20px; }
/* channel permissions */
.cperm { width: 540px; }
.cp-quick { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.cp-q-title { font-weight: 700; color: var(--text-strong); margin-bottom: 8px; }
.cp-seg { display: inline-flex; padding: 3px; border-radius: 8px; background: var(--bg-2); gap: 3px; }
.cp-seg button { padding: 6px 12px; border-radius: 6px; font-weight: 600; color: var(--muted); }
.cp-seg button.on { background: var(--brand); color: var(--on-brand); }
.cp-roles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cp-role { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-soft); background: var(--bg-2); color: var(--text); font-size: 13px; }
.cp-role i { width: 10px; height: 10px; border-radius: 50%; background: var(--rc); }
.cp-role.on { border-color: var(--brand); background: rgba(var(--brand-rgb), .15); color: var(--text-strong); }
.cp-quick + .cp-quick { border-top: 0; }
.cp-body > .field-hint { margin-top: 10px; }
.cp-adv-toggle { margin-top: 12px; display: inline-flex; align-items: center; gap: 4px; }
.cp-adv { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.cp-adv select { margin-bottom: 6px; }
.cp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.cp-tri { display: inline-flex; border-radius: 6px; overflow: hidden; border: 1px solid var(--line-soft); flex-shrink: 0; }
.cp-tri button { width: 32px; height: 28px; display: grid; place-items: center; color: var(--muted); font-weight: 700; }
.cp-tri button + button { border-left: 1px solid var(--line-soft); }
.cp-tri .deny.on { background: var(--red); color: #fff; }
.cp-tri .inherit.on { background: var(--bg-hover-2); color: var(--text-strong); }
.cp-tri .allow.on { background: var(--green); color: #fff; }
.cp-open { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 16px; padding: 12px; border-radius: 8px; background: var(--bg-2); text-align: left; color: var(--text); }
.cp-open:hover { background: var(--bg-hover-2); }
.cp-open span { flex: 1; display: flex; flex-direction: column; }
.cp-open small { color: var(--muted); }
.rot-l { transform: rotate(-90deg); }
@media (max-width: 760px) { .roles-wrap { grid-template-columns: 1fr; } .roles-list { position: static; } }

/* server settings: members */
.mem-search { margin-bottom: 12px; }
.mem-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-bottom: 1px solid var(--line-soft); }
.mem-info { display: flex; flex-direction: column; min-width: 140px; }
.mem-info b { color: var(--text-strong); font-weight: 600; display: flex; align-items: center; gap: 4px; }
.mem-info small { color: var(--muted); font-size: 12px; }
.mem-roles { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.role-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 6px; border-radius: 4px; background: var(--bg-2); border: 1px solid var(--line-soft); font-size: 12px; color: var(--text); }
.role-chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--rc); }
.role-chip button { display: grid; color: var(--muted); border-radius: 50%; }
.role-chip button:hover { color: var(--red); }
.role-add { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); background: var(--bg-2); }
.role-add:hover { color: var(--text-strong); background: var(--bg-hover-2); }
.mem-more { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); flex-shrink: 0; }
button.mem-more:hover { background: var(--bg-2); color: var(--text); }
.ctx-custom .ctx-item { gap: 8px; justify-content: flex-start; }

/* reporting */
.report-preview { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 12px; border-radius: 8px; background: var(--bg-2); }
.report-preview > div { display: flex; flex-direction: column; min-width: 0; }
.report-preview b { color: var(--text-strong); }
.report-preview small { color: var(--muted); font-size: 12px; }
.report-field { margin-left: auto; padding: 2px 8px; border-radius: 10px; background: rgba(var(--brand-rgb), .16); color: var(--brand-text); font-size: 12px; font-weight: 600; }
.report-srv { width: 40px; height: 40px; border-radius: 12px; background: var(--bg-3); color: var(--text-strong); display: grid; place-items: center; font-weight: 700; font-size: 14px; overflow: hidden; flex-shrink: 0; }
.report-srv img { width: 100%; height: 100%; object-fit: cover; }
.report-srv.big { width: 56px; height: 56px; font-size: 18px; }
.report-reasons { max-height: 300px; overflow-y: auto; margin-bottom: 8px; padding-right: 4px; }
.radio-card.slim { padding: 8px 12px; margin-bottom: 4px; }
.report-msgs { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.report-msg { display: flex; gap: 8px; align-items: flex-start; }
.report-msg > div { display: flex; flex-direction: column; min-width: 0; }
.report-msg span { color: var(--text); font-size: 14px; overflow-wrap: anywhere; }
.report-more { color: var(--muted); font-size: 13px; }
.chat-col { position: relative; }
.report-bar { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--bg-float); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); animation: fadeUp .2s var(--ease-out); }
.report-bar > .ic { color: var(--red); }
.report-bar > span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.report-bar b { color: var(--text-strong); }
.report-bar small { color: var(--muted); }
.msg.selecting .msg-actions { display: none !important; }
.msg.selectable { cursor: pointer; }
.msg.selectable.selected { background: rgba(var(--tint-rgb), .07); }
.msg.selecting { padding-left: 104px !important; }
.msg.selecting .msg-avatar { left: 56px; }
.msg.selecting .msg-hover-time { left: 44px; }
.msg-check { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 5px; border: 2px solid var(--muted); display: grid; place-items: center; color: #fff; }
.msg.selected .msg-check { background: var(--red); border-color: var(--red); }
.msg.selecting:not(.selectable) { opacity: .5; }

/* tickets (settings + admin) */
.tk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.tk-head h2 { margin: 0; overflow-wrap: anywhere; }
.tk-tabs { display: flex; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; }
.tk-tab { padding: 4px 12px; border-radius: 4px; color: var(--icon); font-weight: 500; font-size: 14px; }
.tk-tab:hover { background: var(--bg-hover); color: var(--text); }
.tk-tab.active { background: var(--bg-hover-2); color: var(--text-strong); }
.tk-list { display: flex; flex-direction: column; }
.tk-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line-soft); text-align: left; cursor: pointer; margin-bottom: 6px; }
.tk-row:hover { background: var(--bg-hover); }
.tk-row.unread { border-color: rgba(var(--brand-rgb), .5); }
.tk-ic { width: 34px; height: 34px; border-radius: 50%; background: var(--bg-3); color: var(--icon); display: grid; place-items: center; flex-shrink: 0; }
.tk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tk-main b { color: var(--text-strong); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-main small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex-shrink: 0; }
.tk-status { padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.tk-status.s-open { background: rgba(var(--green-rgb), .16); color: var(--green); }
.tk-status.s-resolved { background: rgba(var(--brand-rgb), .16); color: var(--brand-text); }
.tk-status.s-closed { background: var(--bg-3); color: var(--muted); }
.tk-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.tk-meta { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.tk-target { border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line-soft); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.tk-target-h { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 600; }
.tk-msg { display: flex; gap: 10px; }
.tk-msg > div { min-width: 0; }
.tk-msg.gone { opacity: .6; }
.tk-msg-h { display: flex; align-items: baseline; gap: 8px; }
.tk-msg-h b { color: var(--text-strong); }
.tk-msg-h small { color: var(--muted); font-size: 12px; }
.tk-gone { font-size: 11px; font-weight: 700; color: var(--red); text-transform: uppercase; }
.tk-msg-text { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.tk-img { max-width: 240px; max-height: 180px; border-radius: 6px; margin-top: 6px; display: block; }
.tk-user { display: flex; align-items: center; gap: 12px; }
.tk-user > div { display: flex; flex-direction: column; min-width: 0; }
.tk-user b { color: var(--text-strong); }
.tk-user small { color: var(--muted); }
.tk-user p { margin: 4px 0 0; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.tk-banner { width: 100%; max-height: 120px; object-fit: cover; border-radius: 6px; }
.tk-thread { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.tk-post { padding: 10px 12px; border-radius: 8px; background: var(--bg-2); }
.tk-post.staff { background: rgba(var(--brand-rgb), .1); border: 1px solid rgba(var(--brand-rgb), .3); }
.tk-post-h { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.tk-post-h b { color: var(--text-strong); }
.tk-post-h small { color: var(--muted); font-size: 12px; }
.tk-staff-ic { width: 20px; height: 20px; border-radius: 50%; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; }
.tk-post-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.tk-sys { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 6px; padding: 0 4px; }
.tk-reply { width: 100%; resize: vertical; }
.tk-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

/* admin panel */
.adm-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.adm-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line-soft); text-align: left; color: var(--icon); }
button.adm-stat[data-go]:hover { border-color: var(--brand); }
.adm-stat b { font-size: 26px; color: var(--text-strong); line-height: 1.1; }
.adm-stat span { font-size: 13px; color: var(--muted); }
.adm-search { margin-bottom: 12px; }
.adm-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border-radius: 8px; text-align: left; cursor: pointer; }
.adm-row:hover { background: var(--bg-hover); }
.adm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.adm-main b { color: var(--text-strong); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-main small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-flags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.flag { padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.f-staff { background: rgba(var(--brand-rgb), .18); color: var(--brand-text); }
.f-grey { background: var(--bg-3); color: var(--muted); }
.f-red { background: rgba(242, 63, 67, .16); color: var(--red); }
.f-yellow { background: rgba(240, 178, 50, .15); color: var(--yellow); }
.adm-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.adm-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.adm-author { padding: 8px; border-radius: 8px; background: var(--bg-2); margin-bottom: 8px; }
.adm-author .adm-actions { margin: 6px 0 0 8px; }
.adm-user-head { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.adm-user-head h2 { margin: 0; }
.adm-user-head .adm-flags { justify-content: flex-start; margin-top: 4px; }
.adm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 16px 0; }
.adm-grid > div { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 8px; background: var(--bg-2); min-width: 0; }
.adm-grid > div.wide { grid-column: 1 / -1; }
.adm-grid small { color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; }
.adm-grid span { color: var(--text); overflow-wrap: anywhere; }
.adm-log-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--line-soft); font-size: 14px; align-items: baseline; }
.adm-log-row small { color: var(--muted); white-space: nowrap; }
.adm-log-row > span:nth-child(2) { color: var(--muted); overflow-wrap: anywhere; }
.adm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 4px; background: var(--bg-2); font-size: 13px; }
.adm-lookup { display: flex; gap: 8px; margin-bottom: 12px; }
.adm-members { max-height: 360px; overflow-y: auto; }
@media (max-width: 640px) { .adm-log-row { grid-template-columns: 1fr; gap: 2px; } }

/* notices from the UnTidl team */
.notice-modal { text-align: center; max-width: 440px; }
.notice-icon { width: 64px; height: 64px; margin: 8px auto 12px; border-radius: 50%; display: grid; place-items: center; background: rgba(240, 178, 50, .15); color: var(--yellow); }
.notice-icon.mute, .notice-icon.server_removed { background: rgba(242, 63, 67, .15); color: var(--red); }
.notice-icon.reset { background: rgba(var(--brand-rgb), .16); color: var(--brand); }
.notice-modal h2 { color: var(--text-strong); margin: 0 0 8px; }
.notice-body { color: var(--text); line-height: 1.5; }
.notice-reason { margin: 12px 0; padding: 10px 12px; border-radius: 8px; background: var(--bg-2); color: var(--text-strong); text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; }

/* login screen */
.auth-ban { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; margin: 4px 0 12px; border-radius: 8px; background: rgba(242, 63, 67, .12); border: 1px solid rgba(242, 63, 67, .4); color: var(--text); font-size: 14px; }
.auth-ban b { color: var(--text-strong); }
.auth-ban small { color: var(--muted); }
.auth-agree { margin-top: 14px; }
.auth-alt { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; margin-top: 14px; font-size: 14px; color: var(--muted); }
.auth-alt a { color: var(--brand-text); cursor: pointer; }
.auth-alt a:hover { text-decoration: underline; }
.auth-captcha { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 12px; }
.auth-captcha .field-err { color: var(--red); font-size: 12px; }
.auth-captcha [data-captcha]:empty { display: none; }
.auth-age { margin: 4px 0 6px; padding: 8px 12px; border-radius: 8px; background: var(--bg-2); }
.auth-age .field-err { display: block; color: var(--red); font-size: 12px; }
.auth-age .field-err:empty { display: none; }
.auth-age.error .check-row { color: var(--red); }
.kid-code { margin-top: 14px; }
.auth-dev { display: flex; align-items: center; gap: 8px; margin: -4px 0 14px; padding: 8px 12px; border-radius: 8px; background: rgba(240, 178, 50, .14); color: #f0b232; font-size: 13px; font-weight: 600; }
.kid-code .opt { text-transform: none; font-weight: 500; color: var(--muted); }
.auth-agree .field-err { color: var(--red); font-size: 12px; }
.auth-agree.error { color: var(--red); }
.auth-legal { margin-top: 12px; font-size: 12px; color: var(--muted); text-align: center; }
.auth-legal a { color: var(--muted); }

/* verified & moderator badges, removable audit log */
.verified-mark { display: inline-flex; vertical-align: -3px; margin-left: 4px; color: #4ea4ff; }
.sup-mark { display: inline-flex; vertical-align: -3px; margin-left: 4px; }
.msg-header .sup-mark { vertical-align: -3px; margin: 0 2px 0 -2px; }
.member-name .sup-mark { margin-left: 4px; vertical-align: -2px; -webkit-text-fill-color: currentColor; }
.msg-header .verified-mark { vertical-align: -3px; margin: 0 2px 0 -2px; }
.f-blue { background: rgba(78, 164, 255, .16); color: #4ea4ff; }
.adm-links { display: flex; gap: 16px; flex-wrap: wrap; margin: 4px 0; }
.adm-links .btn-link { display: inline-flex; align-items: center; gap: 6px; }
.adm-log.removable .adm-log-row { grid-template-columns: 1fr 1fr auto 32px; }
.adm-log-x { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); }
.adm-log-x:hover { color: var(--red); background: var(--bg-2); }

/* ------------------------------------------------------------------ awards */
.tab .tab-ic { vertical-align: -3px; }
.friends.awards-tab { overflow-y: auto; }

/* ---- Clips (Home → Klipler) ---- */
.friends.clips-tab { overflow: hidden; }
.chat-body:has(.clips-tab) .active-now { display: none; }
.clips { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.clips-bar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--line-soft); flex-shrink: 0; overflow-x: auto; scrollbar-width: none; }
.clips-bar .tab { flex-shrink: 0; white-space: nowrap; }
.clips-bar .btn { flex-shrink: 0; }
.clips-body { flex: 1; min-height: 0; overflow-y: auto; }
.clips-body.feed { position: relative; overflow: hidden; background: var(--bg-1, var(--bg)); }
/* (absolute, not height: 100%: Safari does not give a percentage height to a box inside nested flex boxes) */
.clip-feed { position: absolute; inset: 0; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; outline: none; }
.clip-feed::-webkit-scrollbar { display: none; }
.clip { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: flex; justify-content: center; align-items: flex-end; gap: 16px; padding: 16px 84px 16px 16px; }
.clip-video { position: relative; height: 100%; aspect-ratio: 9 / 16; max-width: calc(100% - 72px); border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 8px 28px rgba(0,0,0,.35); }
.clip video { width: 100%; height: 100%; object-fit: contain; display: block; cursor: pointer; }
.clip-pause { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; opacity: 0; pointer-events: none; transition: opacity .12s; }
.clip.paused .clip-pause { opacity: .85; }
.clip-tap { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); display: none; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 18px; background: rgba(0,0,0,.6); color: #fff; font-size: 13px; font-weight: 700; pointer-events: none; white-space: nowrap; }
.needs-tap .clip-tap { display: flex; }
.clip-top { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; padding: 12px; background: linear-gradient(rgba(0,0,0,.35), transparent); opacity: 0; transition: opacity .15s; }
.clip-video:hover .clip-top, .clip.paused .clip-top { opacity: 1; }
.clip-top button { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.clip-top button:hover { background: rgba(255,255,255,.18); }
.clip-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 56px 16px 18px; background: linear-gradient(transparent, rgba(0,0,0,.7)); color: #fff; pointer-events: none; text-align: left; }
.clip-info > * { pointer-events: auto; }
.clip-user { color: #fff; font-size: 16px; }
.clip-user:hover { text-decoration: underline; }
.clip-info p { margin-top: 6px; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.clip-info small { display: block; margin-top: 6px; font-size: 12px; color: rgba(255,255,255,.75); }
.clip-acts { width: 56px; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; align-items: center; padding-bottom: 8px; }
.ca-user { border-radius: 50%; margin-bottom: 4px; }
.ca-user:hover { filter: brightness(1.1); }
.ca { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ca button { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-input); color: var(--text); transition: transform .1s, background .12s; }
.ca button:hover { background: var(--hover); }
.ca button:active { transform: scale(.92); }
.ca button.on { color: #fe2c55; }
.ca button.on.green { color: var(--green); }
.ca button .ic { transition: transform .12s; }
.ca button:hover .ic { transform: scale(1.08); }
.clip-why { display: flex !important; align-items: center; gap: 4px; flex-wrap: wrap; }
.clip-why q { font-style: italic; quotes: '“' '”'; overflow-wrap: anywhere; }
.rp-clip { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 10px; background: var(--bg-input-dark); margin-bottom: 4px; }
.rp-clip img { width: 48px; aspect-ratio: 9 / 14; object-fit: cover; border-radius: 6px; background: #000; flex-shrink: 0; }
.rp-clip p { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.btn-link.danger { color: var(--red); }
.pf-clips em { position: absolute; left: 0; right: 0; top: 0; padding: 6px 6px 14px; font-style: normal; font-size: 11px; line-height: 1.25; color: #fff; text-align: left; background: linear-gradient(rgba(0,0,0,.75), transparent); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.cm-pinned { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; color: var(--brand); }
.pf-clips span { max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca span, .ca .ca-count { font-size: 12px; font-weight: 700; color: var(--muted); }
.ca .ca-count { width: auto; height: auto; min-width: 28px; padding: 2px 6px; border-radius: 8px; background: none; display: block; }
.ca .ca-count:hover { background: var(--hover); color: var(--text); text-decoration: underline; }
.liker-row { width: 100%; text-align: left; }
.clip-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.2); }
.clip-bar i { display: block; height: 100%; width: 0; background: #fff; }
/* the line can be clicked and dragged: a taller invisible strip catches the pointer, and it grows while in use */
.clip-video:has(video) .clip-bar { cursor: pointer; touch-action: none; z-index: 3; transition: height .1s; }
.clip-video:has(video) .clip-bar::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; bottom: 0; }
.clip-video:has(video) .clip-bar:hover, .clip-bar.drag { height: 7px; }
.clip-bar i { pointer-events: none; }
.clip-video { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.clip-fast { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); display: none; align-items: center; gap: 2px; padding: 5px 12px; border-radius: 16px; background: rgba(0,0,0,.6); color: #fff; font-weight: 800; font-size: 13px; z-index: 2; pointer-events: none; }
.clip-fast .ic + .ic { margin-left: -8px; }
.clip.fast .clip-fast { display: inline-flex; }
.clip-comments { position: absolute; right: 0; top: 0; bottom: 0; width: 360px; max-width: 100%; display: flex; flex-direction: column; background: var(--bg-2); border-left: 1px solid var(--line-soft); z-index: 2; }
.clip-comments[hidden] { display: none; }
.with-comments .clip { padding-right: 376px; }
.with-comments .clip-nav { display: none; }
.cm-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); flex-shrink: 0; }
.cm-top span { color: var(--muted); font-weight: 500; margin-left: 4px; }
.cm-top button { color: var(--icon); display: grid; place-items: center; }
.cm-top button:hover { color: var(--text); }
.cm-list { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 8px 8px 16px; }
.cm { display: flex; gap: 10px; padding: 8px 0; align-items: flex-start; }
.cm > .avatar { cursor: pointer; flex-shrink: 0; }
.cm-body { flex: 1; min-width: 0; }
.cm-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.cm-head b { cursor: pointer; }
.cm-head b:hover { text-decoration: underline; }
.cm-head small { color: var(--muted); font-size: 12px; }
.cm-tag { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 8px; background: var(--brand); color: #10140a; }
.cm-body p { font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; margin-top: 2px; }
.cm-acts { display: flex; gap: 14px; margin-top: 4px; }
.cm-acts button { font-size: 12px; font-weight: 700; color: var(--muted); }
.cm-acts button:hover:not(:disabled) { color: var(--text); text-decoration: underline; }
.cm-acts button:disabled { opacity: .6; }
.cm-like { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 30px; padding: 4px 2px; color: var(--muted); font-size: 11px; font-weight: 700; flex-shrink: 0; border-radius: 6px; }
.cm-like:hover { color: var(--text); }
.cm-like.on { color: #fe2c55; }
.cm-like span:empty { display: none; }
.cm-replies { margin-left: 42px; }
.cm-reply { padding: 6px 0; }
.cm-tag.red { background: var(--red); color: #fff; }
.cm-replying { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 16px; font-size: 13px; color: var(--muted); background: var(--bg-input-dark); border-top: 1px solid var(--line-soft); flex-shrink: 0; }
.cm-replying[hidden] { display: none; }
.cm-replying span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-replying button { color: var(--icon); display: grid; place-items: center; flex-shrink: 0; }
.cm-quote { padding: 10px 12px; margin-bottom: 12px; border-radius: 8px; background: var(--bg-input-dark); font-size: 14px; overflow-wrap: anywhere; }
.cm-report { display: flex; gap: 12px; padding: 12px; margin-top: 10px; border-radius: 10px; background: var(--bg-input-dark); }
.cmr-thumb { width: 56px; aspect-ratio: 9 / 14; border-radius: 6px; overflow: hidden; background: #000; flex-shrink: 0; align-self: flex-start; }
.cmr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmr-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cmr-body p { font-size: 14px; overflow-wrap: anywhere; }
.cmr-body .cc-user .cm-tag { margin-left: 6px; }
.cm-empty { padding: 32px 12px; text-align: center; color: var(--muted); font-size: 14px; }
.cm-form { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line-soft); flex-shrink: 0; }
.cm-form .input { flex: 1; min-width: 0; }
.cm-form .btn { flex-shrink: 0; }
.cm-gif-btn { flex-shrink: 0; padding: 0 10px; border-radius: 8px; background: var(--bg-input-dark); color: var(--muted); font-weight: 800; font-size: 12px; }
.cm-gif-btn:hover { color: var(--text); background: var(--hover); }
.cm-gif-btn { display: grid; place-items: center; }
.cm-photo { display: block; margin-top: 4px; border-radius: 8px; overflow: hidden; max-width: 100%; }
.cm-photo img { display: block; max-width: 100%; max-height: 200px; }
.cm-gif { display: block; margin-top: 4px; border-radius: 8px; max-width: 100%; height: auto; }
.clip-nav { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 16px; }
.clip-nav button { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-input); color: var(--text); }
.clip-nav button:hover { background: var(--hover); }
@media (max-width: 760px) {
  /* phone: the video fills the screen, the column sits on top of it */
  .clips-body.feed { background: #000; }
  .clip { padding: 0; gap: 0; }
  .clip-video { position: absolute; inset: 0; width: auto; height: auto; max-width: none; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
  .clip video { position: absolute; inset: 0; }
  .clip-acts { position: absolute; right: 8px; bottom: 28px; }
  .clip-info { right: 64px; }
  .clip-top { opacity: 1; }
  .ca button { background: rgba(0,0,0,.35); color: #fff; }
  .ca span, .ca .ca-count { color: #fff; text-shadow: 0 1px 2px #000; background: none; }
  .clip-nav { display: none; }
  .clip-comments { left: 0; top: auto; width: auto; height: 65%; border-left: 0; border-radius: 16px 16px 0 0; box-shadow: 0 -8px 28px rgba(0,0,0,.5); }
  .with-comments .clip { padding-right: 0; }
}
.clips-note { height: 100%; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 32px 20px; color: var(--muted); text-align: center; }
.clip-feed .clips-note { color: var(--muted); }
.clips-note.end { height: auto; min-height: 220px; }
.clip-feed .clips-note.end { height: 100%; }
.clips-page { padding: 16px; max-width: 980px; margin: 0 auto; }
.clips-h { margin: 24px 0 12px; font-size: 16px; }
/* Clips → Tutorials */
.clip-embed.tut-embed { width: 320px; }
.clip-embed.tut-embed .ce-media { aspect-ratio: 16 / 10; }
.clip-embed.tut-embed .ce-media img { object-fit: contain; background: #000; }
.clip-embed.tut-embed .ce-text b { font-size: 15px; display: block; margin-bottom: 2px; }
.clip-embed.tut-embed .ce-text small { display: inline-flex; align-items: center; gap: 4px; }
.tut-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tut-head .grow { flex: 1; }
.tut-filter { display: flex; gap: 6px; }
.tut-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: var(--bg-input-dark); color: var(--muted); font-weight: 600; font-size: 14px; }
.tut-chip:hover { color: var(--text); }
.tut-chip.on { background: var(--brand); color: var(--on-brand); }
.tut-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 16px; }
.tut-card { border-radius: 12px; background: var(--bg-input-dark); overflow: hidden; display: flex; flex-direction: column; }
.tut-media { position: relative; aspect-ratio: 16 / 10; background: #000; display: flex; align-items: center; justify-content: center; width: 100%; overflow: hidden; }
.tut-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.tut-media .cc-wait { color: var(--muted); }
.tut-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(0, 0, 0, .15); opacity: .9; transition: background .15s; }
.tut-media:hover .tut-play { background: rgba(0, 0, 0, .35); }
.tut-dur { position: absolute; right: 8px; bottom: 8px; padding: 1px 6px; border-radius: 6px; background: rgba(0, 0, 0, .7); color: #fff; font-size: 12px; font-weight: 600; }
.tut-text { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.tut-text b { font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.tut-text small { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.tut-plat { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 6px; background: var(--bg-2); color: var(--text); font-weight: 600; }
.tut-text .cc-acts { margin-top: 6px; display: flex; gap: 6px; }
.tut-modal { max-width: min(94vw, 1100px); }
.tut-modal video { max-height: 86vh; background: #000; }
.tut-plats { display: flex; gap: 8px; }
.tut-plats label { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 10px; background: var(--bg-input-dark); border: 2px solid transparent; cursor: pointer; font-weight: 600; }
.tut-plats input { position: absolute; opacity: 0; pointer-events: none; }
.tut-plats label:has(input:checked) { border-color: var(--brand); color: var(--brand-text); }
.clip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin-top: 14px; }
.clip-card { border-radius: 10px; background: var(--bg-input-dark); overflow: hidden; display: flex; flex-direction: column; }
.cc-media { position: relative; aspect-ratio: 9 / 14; background: #000; }
.cc-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(0,0,0,.15); }
.cc-play:hover { background: rgba(0,0,0,.35); }
.cc-wait { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); }
.cc-status { position: absolute; left: 8px; top: 8px; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; background: rgba(0,0,0,.7); color: #fff; }
.clip-card.approved .cc-status { background: var(--green); }
.clip-card.rejected .cc-status, .clip-card.failed .cc-status { background: var(--red); }
.cc-text { padding: 10px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.cc-text p { font-size: 13px; overflow-wrap: anywhere; }
.cc-text small { font-size: 12px; color: var(--muted); }
.cc-text .cc-reason { color: var(--red); }
.cc-stat { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; }
.cc-user { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.cc-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.clips-history { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.clip-modal { width: auto; max-width: min(92vw, 420px); padding: 0; background: #000; overflow: hidden; }
.clip-modal .modal-body { padding: 0; }
.clip-modal video { display: block; width: 100%; max-height: 82vh; }
.clip-pick { width: 100%; padding: 22px 12px; border: 2px dashed var(--line-soft); border-radius: 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--muted); overflow-wrap: anywhere; }
.clip-pick:hover { border-color: var(--brand); color: var(--text); }
.clip-picks { display: flex; gap: 10px; }
.clip-picks .clip-pick { flex: 1; min-width: 0; }
.clip-thumbs { display: flex; gap: 6px; overflow-x: auto; padding: 10px 0 2px; }
.clip-thumbs button { position: relative; width: 54px; height: 72px; border-radius: 6px; overflow: hidden; flex-shrink: 0; background: #000; }
.clip-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.clip-thumbs b { position: absolute; left: 3px; top: 3px; min-width: 18px; padding: 0 4px; border-radius: 9px; background: rgba(0,0,0,.65); color: #fff; font-size: 11px; line-height: 18px; }
.clip-thumbs button:hover img { opacity: .5; }
/* photo clips: a strip of photos you swipe sideways */
.clip-photos { width: 100%; height: 100%; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.clip-photos::-webkit-scrollbar { display: none; }
.clip-photos img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: contain; scroll-snap-align: center; scroll-snap-stop: always; user-select: none; }
.cp-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; display: grid; place-items: center; z-index: 2; }
.cp-nav:hover { background: rgba(0,0,0,.75); }
.cp-nav[hidden] { display: none; }
.cp-nav.prev { left: 8px; }
.cp-nav.next { right: 8px; }
.flip-x { transform: scaleX(-1); }
.cp-count { position: absolute; top: 12px; left: 12px; padding: 3px 10px; border-radius: 12px; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; font-weight: 700; z-index: 2; pointer-events: none; }
.cc-count { position: absolute; right: 6px; top: 6px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 10px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; font-weight: 700; }
.clip-modal .clip-video { height: min(82vh, 700px); width: min(92vw, 420px); max-width: none; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
body.mobile .cp-nav { display: none; }
.clip-progress { height: 6px; border-radius: 3px; background: var(--bg-input-dark); margin-top: 14px; overflow: hidden; }
.clip-progress i { display: block; height: 100%; width: 0; background: var(--brand); transition: width .15s; }
.share-list { max-height: 260px; }
.share-list .invite-row > .avatar, .share-list .invite-row > .dm-icon { flex-shrink: 0; }
.clip-embed { display: flex; flex-direction: column; background: var(--bg-2); border-radius: 12px; overflow: hidden; width: 250px; max-width: 100%; min-height: 64px; margin-top: 4px; }
.clip-embed:empty { min-height: 450px; } /* (about the height of the filled card, so the chat does not jump) */
.clip-embed > .ce-text { padding: 10px 12px; }
.ce-media { position: relative; width: 100%; aspect-ratio: 9 / 14; overflow: hidden; background: #000; flex-shrink: 0; }
.ce-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ce-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(0,0,0,.2); }
.ce-media:hover .ce-play { background: rgba(0,0,0,.4); }
.ce-text { min-width: 0; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.ce-user { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.ce-text p { font-size: 13px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ce-text small { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.radio-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; cursor: pointer; }
.pf-clips { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.pf-clips button { position: relative; aspect-ratio: 9 / 14; border-radius: 8px; overflow: hidden; background: #000; }
.pf-clips img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-clips span { position: absolute; left: 6px; bottom: 6px; display: flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px #000; }
.aw-wrap { max-width: 760px; margin: 0 auto; padding: 16px 20px 40px; display: flex; flex-direction: column; gap: 14px; }
.aw-hero { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 12px; background: linear-gradient(135deg, rgba(var(--brand-rgb), .22), rgba(var(--brand-rgb), .04)); border: 1px solid rgba(var(--brand-rgb), .3); color: var(--brand); }
.aw-hero h2 { margin: 0; color: var(--text-strong); font-size: 20px; }
.aw-hero p { margin: 2px 0 0; color: var(--text); font-size: 14px; }
.aw-card { border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line-soft); padding: 16px; display: flex; flex-direction: column; gap: 12px; animation: fadeUp .25s var(--ease-out) both; }
.aw-card.active { border-color: rgba(var(--brand-rgb), .45); }
.aw-card.won { border-color: #f0b232; box-shadow: 0 0 0 1px rgba(240, 178, 50, .25), 0 8px 24px rgba(240, 178, 50, .08); }
.aw-card.ended { opacity: .8; }
.aw-head { display: flex; align-items: center; gap: 12px; }
.aw-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(var(--brand-rgb), .16); color: var(--brand); flex-shrink: 0; }
.aw-card.won .aw-ic { background: rgba(240, 178, 50, .16); color: #f0b232; }
.aw-titles { flex: 1; min-width: 0; }
.aw-titles h3 { margin: 0; color: var(--text-strong); font-size: 17px; overflow-wrap: anywhere; }
.aw-prize { color: var(--brand-text); font-weight: 700; font-size: 15px; }
.aw-phase { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 700; flex-shrink: 0; background: var(--bg-3); color: var(--muted); }
.aw-phase.p-active { background: rgba(var(--green-rgb), .16); color: var(--green); }
.aw-phase.p-active i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: awPulse 1.6s ease-in-out infinite; }
.aw-phase.p-upcoming { background: rgba(78, 164, 255, .15); color: #4ea4ff; }
.aw-phase.p-drawing { background: rgba(240, 178, 50, .15); color: #f0b232; }
@keyframes awPulse { 50% { opacity: .35; } }
.aw-rule { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 8px; background: var(--bg-1); }
.aw-rule b { color: var(--text-strong); font-size: 15px; }
.aw-rule > span:last-child { color: var(--muted); font-size: 13px; }
.aw-mode { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--brand-text); margin-bottom: 2px; }
.aw-mode.lottery { color: #f0b232; }
.aw-desc { margin: 0; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.aw-times { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); }
.aw-times span { display: inline-flex; align-items: center; gap: 4px; }
.aw-status { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.aw-status > .btn { display: inline-flex; align-items: center; gap: 8px; }
.aw-progress { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.aw-progress-top { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.aw-progress-top b { color: var(--text-strong); }
.aw-bar { display: block; height: 8px; border-radius: 4px; background: var(--bg-3); overflow: hidden; }
.aw-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--brand), var(--link)); transition: width .4s var(--ease-out); }
.aw-days { display: flex; gap: 4px; flex-wrap: wrap; }
.aw-days span { width: 22px; height: 22px; border-radius: 6px; background: var(--bg-3); display: grid; place-items: center; color: var(--on-brand); }
.aw-days span.ok { background: var(--brand); }
.aw-note-line { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text); }
.aw-note-line.good { color: var(--green); font-weight: 600; }
.aw-leave { font-size: 12px; color: var(--muted); }
.aw-won { width: 100%; display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: rgba(240, 178, 50, .1); border: 1px solid rgba(240, 178, 50, .35); color: #f0b232; }
.aw-won > div { flex: 1; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: 0; }
.aw-won b { color: var(--text-strong); font-size: 15px; }
.aw-claim p { margin: 0; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.aw-note { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--bg-1); }
.aw-note small { color: var(--muted); font-weight: 700; font-size: 11px; text-transform: uppercase; }
.aw-note p { margin: 2px 0 0; color: var(--text-strong); white-space: pre-wrap; overflow-wrap: anywhere; }
.aw-fine { font-size: 11px; color: var(--faint); line-height: 1.4; }
.aw-past-h { margin: 12px 0 0; color: var(--muted); font-size: 13px; text-transform: uppercase; }
.aw-pop { text-align: center; max-width: 440px; }
.aw-pop-hero { width: 72px; height: 72px; margin: 6px auto 12px; border-radius: 20px; display: grid; place-items: center; background: linear-gradient(135deg, var(--brand), var(--link)); color: var(--on-brand); animation: awBob 2.4s ease-in-out infinite; }
@keyframes awBob { 50% { transform: translateY(-5px) rotate(-4deg); } }
.aw-pop h2 { color: var(--text-strong); margin: 0 0 6px; }
.aw-pop-sub { color: var(--muted); margin: 0 0 14px; }
.aw-pop-item { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 10px 12px; margin-bottom: 8px; border-radius: 8px; background: var(--bg-2); }
.aw-pop-item b { color: var(--text-strong); }
.aw-pop-item span { color: var(--brand-text); font-weight: 700; font-size: 14px; }
.aw-pop-item small { color: var(--muted); }
.aw-form .radio-card { margin-bottom: 6px; }
.aw-rule-row { display: flex; align-items: center; gap: 8px; }
.aw-rule-row select { flex: 1; }
.aw-rule-row input { width: 90px; }
.aw-rule-row span { color: var(--muted); font-weight: 700; }
.aw-preview { margin: 8px 0; padding: 8px 12px; border-radius: 8px; background: rgba(var(--brand-rgb), .1); color: var(--text); font-size: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.aw-preview .ic { color: var(--brand); }
.aw-times-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 12px; }
.aw-sent { display: flex; align-items: center; gap: 4px; color: var(--brand-text) !important; }
.aw-entrant { cursor: default; }
.aw-mini { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; min-width: 150px; }
.aw-mini .aw-bar { flex: 1; height: 6px; }
.aw-mini .ic { color: var(--green); }
.notice-icon.award_won, .notice-icon.award_message { background: rgba(240, 178, 50, .15); color: #f0b232; }

/* award photos */
.aw-card.has-cover { padding-top: 0; overflow: hidden; }
.aw-cover { display: block; width: calc(100% + 32px); margin: 0 -16px; max-height: 260px; object-fit: cover; cursor: zoom-in; background: var(--bg-3); }
.aw-cover.admin { width: 100%; margin: 0 0 12px; border-radius: 10px; max-height: 220px; cursor: default; }
.aw-pop-img { width: 100%; max-height: 140px; object-fit: cover; border-radius: 6px; margin-bottom: 6px; }
.tk-ic.aw-thumb { overflow: hidden; background: var(--bg-3); }
.tk-ic.aw-thumb img { width: 100%; height: 100%; object-fit: cover; }
.aw-photo { display: grid; place-items: center; min-height: 120px; border-radius: 10px; border: 2px dashed var(--line); background: var(--bg-2); color: var(--muted); cursor: pointer; overflow: hidden; margin-bottom: 8px; }
.aw-photo:hover { border-color: var(--brand); color: var(--text); }
.aw-photo span { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px; text-align: center; }
.aw-photo img { width: 100%; max-height: 260px; object-fit: cover; display: block; }
.aw-photo-actions { display: flex; align-items: center; gap: 12px; }

/* "download the PC app" banner (web on Windows) */
#root:has(> .dl-banner) { display: flex; flex-direction: column; }
#root:has(> .dl-banner) > .app { flex: 1; height: auto; min-height: 0; }
.dl-banner { flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 36px; padding: 4px 44px; position: relative;
  background: var(--brand); color: var(--on-brand); font-size: 14px; font-weight: 600; }
.dl-ic { display: grid; }
.dl-text { text-align: center; }
.dl-btn { flex-shrink: 0; padding: 4px 14px; border: 0; border-radius: 4px; background: var(--on-brand); color: var(--brand-text); font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; transition: filter .15s; }
.dl-btn:hover { filter: brightness(1.25); text-decoration: none; }
.dl-x { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--on-brand); opacity: .75; }
.dl-x:hover { opacity: 1; background: rgba(0, 0, 0, .12); }
body.mobile .dl-banner { display: none; }
body.mobile #root:has(> .dl-banner) > .app { height: 100dvh; }

/* Download page */
.dlp { max-width: 820px; margin: 0 auto; padding: 24px 20px 48px; display: flex; flex-direction: column; gap: 20px; }
.dlp-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 32px 20px; border-radius: 16px;
  background: var(--bg-2); border: 1px solid var(--line-soft); }
.dlp-logo { width: 88px; height: 88px; border-radius: 22px; }
.dlp-hero h1 { margin: 6px 0 0; font-size: 30px; color: var(--text-strong); }
.dlp-hero p { margin: 0; max-width: 520px; color: var(--text); font-size: 16px; }
.dlp-cta { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 10px; }
.dlp-btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 28px; font-size: 17px; font-weight: 700; border-radius: 26px; text-decoration: none; }
.dlp-btn:hover { text-decoration: none; }
.dlp-btn.disabled { pointer-events: none; opacity: .5; }
.dlp-meta { color: var(--muted); font-size: 13px; line-height: 1.5; }
.dlp-have { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 14px; background: rgba(var(--green-rgb), .15); color: var(--green); font-weight: 600; font-size: 14px; }
.dlp-warn { display: flex; align-items: center; gap: 6px; color: #f0b232; font-size: 14px; }
.dlp-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .dlp-features { grid-template-columns: 1fr; } }
.dlp-feature { display: flex; gap: 12px; padding: 16px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line-soft); }
.dlp-f-ic { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; background: rgba(var(--brand-rgb), .16); color: var(--brand); }
.dlp-feature b { color: var(--text-strong); }
.dlp-feature p { margin: 4px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.dlp-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.dlp-card { padding: 18px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line-soft); }
.dlp-card h3 { margin: 0 0 10px; color: var(--text-strong); }
.dlp-card p { margin: 0 0 8px; color: var(--text); }
.dlp-steps { margin: 0; padding-left: 20px; color: var(--text); line-height: 1.55; }
.dlp-steps li { margin: 6px 0; }
.dlp-fine { text-align: center; color: var(--faint); font-size: 13px; margin: 0; }

/* app-only awards, 2FA reminder */
.aw-tags { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.aw-mode.app { color: #4ea4ff; }
.aw-status .btn:disabled { opacity: .45; cursor: not-allowed; }
.aw-note-line a { cursor: pointer; font-weight: 600; }
.tfa-pop { text-align: center; max-width: 420px; }
/* profile likes */
.pf-likes { display: flex; align-items: center; gap: 6px; margin: 8px 0 2px; font-size: 13px; color: var(--muted); min-height: 28px; }
.pf-likes:empty { display: none; }
.pf-vote { display: grid; place-items: center; width: 30px; height: 28px; border-radius: 6px; background: var(--bg-2); color: var(--icon, var(--muted)); }
.pf-vote:hover { color: var(--text-strong); }
.pf-vote.on[data-vote="1"] { background: rgba(var(--brand-rgb), .2); color: var(--brand-text); }
.pf-vote.on[data-vote="-1"] { background: rgba(229, 83, 75, .18); color: #e5534b; }
.pf-likes-n { display: inline-flex; align-items: center; gap: 5px; margin-left: 2px; font-weight: 600; color: var(--text); }
.pf-likes-n.hidden { font-weight: 500; font-style: italic; color: var(--muted); }
.pf-likes small { color: var(--muted); }
/* polls */
.poll { margin-top: 6px; max-width: 460px; padding: 14px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line-soft, rgba(255,255,255,.06)); }
.poll-q { font-weight: 700; font-size: 16px; color: var(--text-strong); overflow-wrap: anywhere; }
.poll-hint { margin: 2px 0 10px; font-size: 12px; color: var(--muted); }
.poll-opts { display: flex; flex-direction: column; gap: 6px; }
.poll-opt { position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 12px; border-radius: 8px; background: var(--bg-3, rgba(255,255,255,.04)); border: 1px solid transparent; color: var(--text); text-align: left; cursor: pointer; }
.poll-opt:hover:not([disabled]) { border-color: rgba(var(--brand-rgb), .5); }
.poll-opt[disabled] { cursor: default; }
.poll-opt.on { border-color: var(--brand); }
.poll-bar { position: absolute; inset: 0 auto 0 0; background: rgba(var(--brand-rgb), .18); transition: width .3s ease; pointer-events: none; }
.poll-opt.win .poll-bar { background: rgba(var(--brand-rgb), .32); }
.poll-mark { position: relative; flex-shrink: 0; width: 18px; height: 18px; display: grid; place-items: center; border: 2px solid var(--muted); color: var(--on-brand, #17210a); }
.poll-mark.dot { border-radius: 50%; }
.poll-mark.box { border-radius: 4px; }
.poll-opt.on .poll-mark { background: var(--brand); border-color: var(--brand); }
.poll-text { position: relative; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.poll-num { position: relative; flex-shrink: 0; font-size: 13px; font-weight: 600; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.poll-foot { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.poll-foot a { color: var(--brand-text); cursor: pointer; font-weight: 600; }
.poll-modal { width: 480px; }
.poll-edit { display: flex; flex-direction: column; gap: 6px; }
.poll-ans { display: flex; gap: 6px; align-items: center; }
.poll-rm { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; color: var(--muted); flex-shrink: 0; }
.poll-rm:hover { color: var(--red); background: var(--bg-2); }
.poll-add { margin-top: 8px; display: inline-flex; align-items: center; gap: 4px; }
.poll-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; margin-top: 4px; }
.poll-multi { padding-bottom: 10px; }
@media (max-width: 520px) { .poll-row { grid-template-columns: 1fr; } }
/* authenticator app setup */
.tfa-box + .tfa-box { margin-top: 10px; }
.totp-modal { width: 460px; }
.totp-steps { margin: 0 0 12px; padding-left: 20px; color: var(--text); line-height: 1.5; }
.totp-qr { display: block; width: 200px; height: 200px; margin: 6px auto 12px; border-radius: 8px; background: #fff; padding: 8px; image-rendering: pixelated; }
.totp-key { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 8px; }
.totp-key code { font: 600 15px Consolas, Menlo, monospace; letter-spacing: .06em; color: var(--text-strong); background: var(--bg-2); padding: 6px 10px; border-radius: 6px; user-select: all; }
.totp-code { font-size: 22px; letter-spacing: 8px; text-align: center; }
.backup-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.backup-codes code { padding: 8px; border-radius: 6px; background: var(--bg-2); text-align: center; font: 600 15px Consolas, Menlo, monospace; color: var(--text-strong); user-select: all; }
/* the glowing @ in Settings → Credits, and the animation it opens */
.glow-at { display: inline; padding: 0 2px; border: 0; background: none; font: inherit; font-size: 1.15em; font-weight: 800; line-height: 1; color: var(--brand-text); cursor: pointer;
  text-shadow: 0 0 4px rgba(var(--brand-rgb), .95), 0 0 12px rgba(var(--brand-rgb), .7), 0 0 22px rgba(var(--brand-rgb), .45); animation: atGlow 2.4s ease-in-out infinite; }
.glow-at:hover, .glow-at:focus-visible { text-decoration: underline; text-underline-offset: 3px; text-shadow: 0 0 6px rgba(var(--brand-rgb), 1), 0 0 18px rgba(var(--brand-rgb), .9), 0 0 32px rgba(var(--brand-rgb), .6); outline: none; }
@keyframes atGlow { 50% { text-shadow: 0 0 2px rgba(var(--brand-rgb), .6), 0 0 6px rgba(var(--brand-rgb), .35); } }
@media (prefers-reduced-motion: reduce) { .glow-at { animation: none; } }
.at-overlay { position: fixed; inset: 0; z-index: 10001; background: #07090b; }
body.electron .at-overlay { top: 32px; } /* keep the window buttons usable */
.at-overlay iframe { width: 100%; height: 100%; border: 0; display: block; }
.at-close { position: absolute; top: calc(14px + var(--sat)); left: 14px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #f3f5ee; background: rgba(255, 255, 255, .08); }
.at-close:hover { background: rgba(255, 255, 255, .16); }
/* lock screen: add an email to keep using UnTidl (can't be closed) */
.email-lock { position: fixed; inset: 0; z-index: 10000; display: flex; overflow-y: auto; padding: 16px; background: rgba(10, 11, 12, .88); backdrop-filter: blur(6px); }
body.electron .email-lock { top: 32px; } /* keep the window buttons usable */
.el-card { width: 100%; max-width: 460px; margin: auto; padding: 28px; border-radius: 12px; background: var(--bg-modal); box-shadow: var(--shadow); text-align: center; }
.el-card h2 { margin: 0 0 10px; color: var(--text-strong); font-size: 22px; }
.el-card p { margin: 0 0 12px; color: var(--text); line-height: 1.5; }
.el-card form, form.el-card { text-align: left; }
.el-ic { width: 68px; height: 68px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--brand-rgb), .15); color: var(--brand-text); }
.el-warn { display: flex; gap: 8px; align-items: flex-start; justify-content: center; padding: 10px 12px; border-radius: 8px; background: rgba(240, 178, 50, .12); color: #f0b232 !important; font-size: 14px; text-align: left; }
.el-warn svg { flex-shrink: 0; margin-top: 2px; }
.el-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.el-actions .btn { justify-content: center; gap: 8px; height: 42px; }
.el-row { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.el-row .grow { flex: 1; }
.el-err { margin-top: 10px; color: var(--red); font-size: 14px; }
.el-code { font-size: 22px; letter-spacing: 8px; text-align: center; }
form.el-card .btn-link[data-resend] { margin-top: 8px; }
/* Elçi Kodları: totals, groups per elçi, the accounts behind a code */
.code-totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.code-totals > div { padding: 12px 14px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line-soft); display: flex; flex-direction: column; }
.code-totals b { font-size: 22px; color: var(--text-strong); }
.code-totals small { color: var(--muted); font-size: 12px; }
.code-search { margin-bottom: 14px; }
.code-group { margin-bottom: 14px; }
.code-group h4 { margin: 0 0 6px; font-size: 14px; color: var(--text-strong); }
.code-group h4 small { color: var(--muted); font-weight: 500; margin-left: 6px; }
.code-row { cursor: pointer; }
.code-members { max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.code-members .adm-row { cursor: pointer; border-radius: 8px; padding: 4px 6px; }
.code-members .adm-row:hover { background: var(--bg-3); }
.code-off { color: var(--red); font-weight: 600; }
.tfa-pop-ic { width: 68px; height: 68px; margin: 6px auto 12px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--green-rgb), .15); color: var(--green); }
.tfa-pop h2 { margin: 0 0 8px; color: var(--text-strong); }
.tfa-pop p { margin: 0; color: var(--text); line-height: 1.5; }

/* ------------------------------------------------------------------ study mode */
.ch-study { margin-left: auto; padding: 1px 6px; border-radius: 8px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; background: rgba(var(--brand-rgb), .18); color: var(--brand-text); }
.ch-study.break { background: rgba(240, 178, 50, .16); color: #f0b232; }
.study-panel { position: relative; z-index: 2; flex-shrink: 0; margin: 0 16px 12px; padding: 14px 16px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 8px; }
.study-panel.idle { flex-direction: row; align-items: center; gap: 12px; color: var(--brand); }
.study-panel .sp-text { flex: 1; display: flex; flex-direction: column; }
.study-panel .sp-text b { color: var(--text-strong); }
.study-panel .sp-text span { color: var(--muted); font-size: 14px; }
.study-panel.work { border-color: rgba(var(--brand-rgb), .45); }
.study-panel.break { border-color: rgba(240, 178, 50, .45); }
.sp-phase { display: flex; align-items: center; gap: 6px; font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: .03em; color: var(--brand-text); }
.study-panel.break .sp-phase { color: #f0b232; }
.sp-phase small { margin-left: auto; text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 500; }
.sp-clock { font-size: 48px; font-weight: 800; line-height: 1; color: var(--text-strong); font-variant-numeric: tabular-nums; text-align: center; padding: 4px 0; }
.sp-bar { height: 6px; border-radius: 3px; background: var(--bg-3); overflow: hidden; }
.sp-bar i { display: block; height: 100%; background: var(--brand); transition: width 1s linear; }
.study-panel.break .sp-bar i { background: #f0b232; }
.sp-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sp-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; background: var(--bg-3); color: var(--muted); }
.sp-chip.on { background: rgba(var(--brand-rgb), .15); color: var(--brand-text); }
.study-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-bottom: 14px; }
.study-preset { display: flex; cursor: pointer; }
.study-preset > input { display: none; }
.study-preset > span { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 8px; background: var(--bg-2); border: 2px solid transparent; }
.study-preset > span b { color: var(--text-strong); font-size: 18px; font-variant-numeric: tabular-nums; }
.study-preset > span small { color: var(--muted); font-size: 12px; }
.study-preset input:checked + span { border-color: var(--brand); background: rgba(var(--brand-rgb), .1); }
.study-custom { display: flex; align-items: center; gap: 4px; }
.study-custom input { width: 56px; height: 30px; padding: 0 6px; text-align: center; }
.study-custom { margin-top: 4px; }

/* ------------------------------------------------------------------ forum (homework) */
.forum { flex: 1; overflow-y: auto; min-height: 0; }
.forum-inner { max-width: 860px; margin: 0 auto; padding: 16px 20px 40px; display: flex; flex-direction: column; gap: 10px; }
.forum-hero { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--bg-2); color: var(--brand); }
.forum-hero > div { display: flex; flex-direction: column; }
.forum-hero b { color: var(--text-strong); }
.forum-hero span { color: var(--muted); font-size: 14px; }
.fpost { display: flex; gap: 12px; padding: 12px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line-soft); cursor: pointer; }
.fpost:hover { border-color: var(--line); background: var(--bg-hover); }
.fpost-main { flex: 1; min-width: 0; }
.fpost-main h3 { margin: 0 0 4px; color: var(--text-strong); font-size: 16px; overflow-wrap: anywhere; }
.fpost-main p { margin: 0 0 6px; color: var(--muted); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fpost-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.fpost-replies { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; }
.fpost-solved { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 10px; background: rgba(var(--green-rgb), .16); color: var(--green); font-weight: 700; font-size: 12px; }
.fpost-thumb { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.fv { display: flex; flex-direction: column; align-items: center; gap: 0; min-width: 34px; color: var(--muted); }
.fv b { color: var(--text-strong); font-size: 14px; font-variant-numeric: tabular-nums; }
.fv button { display: grid; place-items: center; width: 28px; height: 24px; border-radius: 4px; color: var(--muted); }
.fv button:hover { background: var(--bg-3); color: var(--text); }
.fv .fv-up.on { color: var(--green); }
.fv .fv-down.on { color: var(--red); }
.fitem { display: flex; gap: 12px; padding: 14px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line-soft); }
.fitem-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.fquestion h2 { margin: 0; color: var(--text-strong); font-size: 20px; overflow-wrap: anywhere; }
.fitem-text { color: var(--text); line-height: 1.5; overflow-wrap: anywhere; }
.fitem-images { display: flex; flex-wrap: wrap; gap: 6px; }
.fitem-images:empty { display: none; }
.fitem-images img { max-width: 260px; max-height: 220px; border-radius: 8px; cursor: zoom-in; display: block; }
.fitem-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fitem-actions { display: inline-flex; gap: 12px; }
.fitem .btn-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.fitem .btn-link.danger { color: var(--red); }
.fauthor { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.fauthor b { color: var(--text-strong); }
.freply.answer { border-color: rgba(var(--green-rgb), .55); background: rgba(var(--green-rgb), .06); }
.fanswer-tag { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; color: var(--green); font-weight: 700; font-size: 12px; text-transform: uppercase; }
.freplies-h { margin: 10px 0 0; color: var(--muted); font-size: 14px; text-transform: uppercase; }
.freply-box { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.freply-tray { display: flex; gap: 6px; flex-wrap: wrap; }
.freply-tray img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; }
.forum-new .freply-tray { margin: 8px 0; }

/* ------------------------------------------------------------------ announcements, QR, codes */
.ann-wrap { max-width: 760px; margin: 0 auto; padding: 16px 20px 40px; display: flex; flex-direction: column; gap: 14px; }
.ann-card { border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line-soft); overflow: hidden; }
.ann-card.pinned { border-color: rgba(var(--brand-rgb), .45); }
.ann-img { display: block; width: 100%; max-height: 300px; object-fit: cover; }
.ann-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.ann-meta { display: flex; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: 12px; }
.ann-meta span { display: inline-flex; align-items: center; gap: 4px; }
.ann-pin { color: var(--brand-text); font-weight: 700; }
.ann-body h3 { margin: 0; color: var(--text-strong); font-size: 18px; }
.ann-text { color: var(--text); line-height: 1.55; overflow-wrap: anywhere; }
.ann-pop { width: 520px; }
.ann-pop .modal-body { padding-top: 16px; }
.ann-pop-head { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; padding-right: 36px; color: var(--brand-text); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.ann-pop-count { margin-left: auto; color: var(--muted); font-weight: 600; text-transform: none; }
.ann-pop .ann-card { background: var(--bg-2); }
.badge.dot-badge { min-width: 8px; width: 8px; height: 8px; padding: 0; }
.qr-box { display: grid; place-items: center; padding: 12px; border-radius: 12px; background: #fff; }
.qr-box img { width: 100%; max-width: 300px; image-rendering: pixelated; }
.qr-url { margin-top: 8px; text-align: center; font: 13px Consolas, Menlo, monospace; color: var(--muted); overflow-wrap: anywhere; }
.qr-scan { position: relative; border-radius: 12px; overflow: hidden; background: #000; aspect-ratio: 1; }
.qr-scan video { width: 100%; height: 100%; object-fit: cover; display: block; }
.qr-frame { position: absolute; inset: 18%; border: 3px solid var(--brand); border-radius: 14px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .35); }
.qr-scan-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; }
.code-chip { font-family: Consolas, Menlo, monospace; letter-spacing: .05em; }
body.mobile .study-panel { margin: 0 8px 8px; padding: 10px 12px; }
body.mobile .sp-clock { font-size: 36px; }

/* special invite links */
.vanity-box h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; }
.vanity-row { display: flex; align-items: center; border-radius: 4px; background: var(--bg-input-dark); overflow: hidden; margin: 8px 0; }
.vanity-prefix { padding: 0 2px 0 10px; color: var(--muted); font-size: 14px; white-space: nowrap; }
.vanity-row .input { background: transparent; padding-left: 2px; }

/* phones have no F-keys: hide the keybind hints on the incoming call screen */
body.mobile #incoming kbd { display: none; }

/* composer: the hint stays on one line ("Message @name…") instead of wrapping and getting cut off */
#composer-input::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#composer-input { min-width: 0; }
/* send button: appears once there's something to send */
.composer-btn.send-btn { display: none; color: var(--brand-text, var(--brand)); }
.composer.has-text .composer-btn.send-btn { display: grid; }
.composer-btn.send-btn:hover { color: var(--text-strong); }
/* phones: while you write, GIF and poll make room for the text and the send button */
body.mobile .composer.has-text .gif-btn, body.mobile .composer.has-text [data-act="poll"] { display: none; }
body.mobile .composer-box { align-items: center; }
/* read receipt under your last seen message (DMs) */
.read-receipt { display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding: 0 16px 2px 72px; font-size: 11px; font-weight: 600; color: var(--muted); }
.read-receipt svg { color: var(--brand-text, var(--brand)); }

/* download page: the Android button inside the phone card */
.dlp-cta-android { margin: 12px 0; align-items: flex-start; text-align: left; }

/* "Migrate server from Discord" */
.dm-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.dm-list li { display: flex; gap: 8px; align-items: flex-start; color: var(--text); font-size: 14px; line-height: 1.35; }
.dm-list li svg { flex-shrink: 0; margin-top: 1px; color: var(--brand-text, var(--brand)); }
.dm-list li:nth-child(2) svg { color: var(--muted); }
.discord-migrate .check-row { text-align: left; }

/* Add a Server: breathing room between the big choices */
.option-card + .option-card { margin-top: 10px; }
.modal-body > .option-card:last-of-type { margin-bottom: 6px; }
.option-card { padding: 12px 14px 12px 12px; }

/* games: suggestions from the game database, "currently playing" */
.game-name-wrap { position: relative; flex: 1; min-width: 0; }
.game-name-wrap .input { width: 100%; }
.game-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; background: var(--bg-floating, var(--bg-1)); border: 1px solid var(--line); border-radius: 8px; padding: 4px; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); max-height: 260px; overflow-y: auto; }
.game-suggest[hidden] { display: none; }
.game-sg { display: flex; align-items: center; gap: 10px; width: 100%; padding: 5px 8px; border-radius: 6px; color: var(--text); text-align: left; font-size: 14px; }
.game-sg:hover { background: var(--hover); color: var(--text-strong); }
.game-sg img, .game-sg-none { width: 30px; height: 40px; border-radius: 4px; object-fit: cover; flex-shrink: 0; background: var(--bg-3); display: grid; place-items: center; color: var(--icon); }
.game-ic-btn img, .pf-game-ic { object-fit: cover; }
.act-card { display: flex; align-items: center; gap: 12px; text-align: left; }
.act-art { width: 48px; height: 64px; border-radius: 6px; object-fit: cover; flex-shrink: 0; background: var(--bg-3); }
.act-art.none { display: grid; place-items: center; color: var(--icon); height: 48px; }
.act-text { display: flex; flex-direction: column; min-width: 0; }
.act-text small { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--brand-text, var(--brand)); }
.act-text b { color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-text span { font-size: 12px; color: var(--muted); }
.member-sub svg, .dm-sub svg { vertical-align: -2px; }
.ga-now { margin: 4px 0 2px; color: var(--muted); font-size: 14px; display: flex; align-items: center; gap: 6px; }
.ga-now b { color: var(--text-strong); }
.ga-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.ga-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 8px; background: var(--bg-2); }
.ga-row span, .ga-app { display: flex; flex-direction: column; min-width: 0; }
.ga-row small, .ga-app small { color: var(--muted); font-size: 12px; }
.ga-apps { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; margin-bottom: 12px; }
.ga-app { text-align: left; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line); color: var(--text); }
.ga-app:hover { background: var(--hover); }
.ga-app.on { border-color: var(--brand); background: var(--hover); }
.ga-app b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Game collection: a wall of covers with a + button, and the search picker */
.games-box { background: var(--bg-2); border-radius: 12px; padding: 14px 16px 16px; margin-bottom: 4px; }
.games-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.games-title { font-weight: 700; font-size: 16px; color: var(--text-strong); }
.games-sub { font-size: 13px; color: var(--muted); }
.games-add { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--bg-3); color: var(--text-strong); flex-shrink: 0; }
.games-add:hover { background: var(--hover); }
.games-add:disabled { opacity: .4; cursor: not-allowed; }
.games-editor { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; margin: 0; }
.games-empty { grid-column: 1 / -1; color: var(--muted); font-size: 14px; padding: 6px 0; }
.game-card { position: relative; aspect-ratio: 3 / 4; }
.game-card-art { width: 100%; height: 100%; border-radius: 8px; overflow: hidden; display: block; background: var(--bg-3); }
.game-card-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.game-card-none, .pf-cover span { width: 100%; height: 100%; display: grid; place-items: center; padding: 6px; text-align: center; color: #fff; font-weight: 700; font-size: 12px; line-height: 1.2; overflow: hidden; word-break: break-word; }
.game-card-art:hover { outline: 2px solid var(--brand); }
.game-card-rm { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; display: none; place-items: center; background: var(--red); color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.game-card:hover .game-card-rm, .game-card-rm:focus-visible { display: grid; }
@media (hover: none) { .game-card-rm { display: grid; } }
.game-picker .modal-body { padding-bottom: 12px; }
.gp-list { margin-top: 10px; max-height: min(52vh, 380px); overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.gp-item { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 6px; text-align: left; color: var(--text-strong); font-weight: 600; font-size: 15px; }
.gp-item:hover { background: var(--hover); }
.gp-item img, .gp-noart { width: 30px; height: 40px; border-radius: 4px; object-fit: cover; flex-shrink: 0; background: var(--bg-3); display: grid; place-items: center; color: var(--icon); }
.gp-item.gp-custom { color: var(--muted); font-weight: 500; }
.gp-wait { color: var(--muted); padding: 14px 10px; font-size: 14px; }
.pf-cover-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; margin-top: 8px; }
.pf-cover { aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; background: var(--pf-card); }
.pf-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* game covers, tidier: four across with soft shadows (editor), a small cover wall on profile cards */
.games-box { padding: 16px 18px 18px; border-radius: 14px; }
.games-editor { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.game-card-art { border-radius: 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); transition: transform .12s ease, box-shadow .12s ease; }
.game-card-art:hover { outline: none; transform: translateY(-2px) scale(1.02); box-shadow: 0 6px 16px rgba(0, 0, 0, .45); }
.game-card-art img { image-rendering: auto; }
.pf-cover-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; }
.pf-cover { border-radius: 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.pf-games2 { display: block; width: 100%; padding: 10px 12px 12px; text-align: left; }
.pf-games2:hover { background: var(--pf-card-hover); }
.pf-games2-title { display: block; font-size: 12px; font-weight: 700; color: var(--text-strong); margin-bottom: 8px; }
.pf-games2-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pf-mini { aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden; background: var(--bg-3); display: block; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.pf-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-mini.none { display: grid; place-items: center; padding: 3px; color: #fff; font-size: 9px; font-weight: 700; line-height: 1.15; text-align: center; overflow: hidden; word-break: break-word; }
.pf-mini.more { display: grid; place-items: center; color: var(--text); font-weight: 700; font-size: 14px; box-shadow: none; }

/* DM side panel: the whole game collection */
.pf-wall { cursor: default; }
.pf-wall:hover { background: var(--pf-card); }
.pf-wall .pf-games2-row { gap: 8px; }

/* "Playing" card, Discord-style: small header, square art, name, a green running clock */
.act-card { display: block; padding: 10px 12px 12px; text-align: left; }
.act-head { font-size: 12px; font-weight: 700; color: var(--text-strong); margin-bottom: 8px; text-transform: none; letter-spacing: 0; }
.act-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.act-art { width: 60px; height: 60px; border-radius: 10px; object-fit: cover; object-position: center 22%; flex-shrink: 0; background: var(--bg-3); box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.act-art.none { display: grid; place-items: center; color: var(--icon); height: 60px; }
.act-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.act-text b { font-size: 15px; font-weight: 800; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-time { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #3ba55d; font-variant-numeric: tabular-nums; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; }
.act-time svg { color: #3ba55d; flex-shrink: 0; }
.act-text span.act-time span { color: inherit; font-size: inherit; }
/* compact "Game Collection" row on profile pop-ups */
/* social profiles: brand icons in round buttons, on the profile and in the profile editor */
.pf-soc-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-soc { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--pf-card-hover, var(--bg-3)); color: var(--text-strong); transition: transform .12s, background .12s; }
.pf-soc:hover { transform: translateY(-2px); background: var(--bg-input); }
.pf-tabpane .pf-socials { background: none; padding: 0; }
.soc-edit { display: flex; flex-direction: column; gap: 8px; }
.soc-field { display: grid; grid-template-columns: 30px 120px 1fr; align-items: center; gap: 10px; }
.soc-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-input-dark); color: var(--text-strong); }
.soc-name { font-size: 14px; font-weight: 600; color: var(--text); }
@media (max-width: 600px) { .soc-field { grid-template-columns: 30px 1fr; } .soc-field .input { grid-column: 1 / -1; } }
.pf-games3 { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 10px 8px 12px; text-align: left; }
.pf-games3:hover { background: var(--pf-card-hover); }
.pf-games3-title { font-size: 13px; font-weight: 700; color: var(--text-strong); white-space: nowrap; }
.pf-games3-icons { display: flex; align-items: center; gap: 5px; }
.pf-sq { width: 30px; height: 30px; border-radius: 7px; overflow: hidden; display: block; background: var(--bg-3); flex-shrink: 0; }
.pf-sq img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
.pf-sq.none { display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px; }
.pf-sq.more { display: grid; place-items: center; width: auto; min-width: 30px; padding: 0 5px; color: var(--text); font-size: 12px; font-weight: 700; }
.pf-games3 + .act-card, .act-card + .pf-games2, .act-card + .pf-wall { margin-top: 8px; }
.pf-games3-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pf-games3-icons { flex-shrink: 0; }
.pf-sq.more { background: var(--bg-3); }
.members-more { display: block; margin: 8px auto 16px; }

/* ---------------------------------------------------------------- welcome tour (onboarding.js) */
#tour { position: fixed; inset: 0; z-index: 3000; opacity: 0; transition: opacity .3s; }
#tour.on { opacity: 1; }
/* the spotlight: a hole in the dark, gliding from one part of the app to the next */
.tour-hole { position: fixed; border-radius: 14px; box-shadow: 0 0 0 200vmax rgba(5, 8, 3, .74); pointer-events: none;
  transition: left .55s cubic-bezier(.65, 0, .25, 1), top .55s cubic-bezier(.65, 0, .25, 1), width .55s cubic-bezier(.65, 0, .25, 1), height .55s cubic-bezier(.65, 0, .25, 1); }
.tour-hole::after { content: ''; position: absolute; inset: -4px; border-radius: 18px; border: 3px solid var(--brand); animation: tourRing 1.6s ease-out infinite; }
#tour.no-target .tour-hole::after, #tour.no-target .tour-hand { display: none; }
@keyframes tourRing { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.25); } }
/* the hand that taps it */
.tour-hand { position: fixed; pointer-events: none; transform: translate(-6px, -2px); filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); transition: left .55s cubic-bezier(.65, 0, .25, 1), top .55s cubic-bezier(.65, 0, .25, 1); }
.tour-hand.tap svg { animation: tourTap 1.4s .6s ease-in-out infinite; }
.tour-hand::before { content: ''; position: absolute; left: 4px; top: 0; width: 18px; height: 18px; margin: -9px; border-radius: 50%; background: rgba(255, 255, 255, .7); opacity: 0; }
.tour-hand.tap::before { animation: tourRipple 1.4s .6s ease-out infinite; }
@keyframes tourTap { 0%, 100% { transform: translate(14px, 18px); } 40% { transform: translate(0, 0) scale(.92); } 55% { transform: translate(0, 0) scale(1); } }
@keyframes tourRipple { 0%, 38% { opacity: 0; transform: scale(.4); } 45% { opacity: .9; } 80%, 100% { opacity: 0; transform: scale(2.6); } }
/* the card */
.tour-card { position: fixed; width: min(360px, calc(100vw - 24px)); padding: 18px 20px 16px; border-radius: 18px; background: var(--bg-float); color: var(--text); box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
  transition: left .55s cubic-bezier(.65, 0, .25, 1), top .55s cubic-bezier(.65, 0, .25, 1), opacity .25s, transform .25s; animation: tourIn .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.tour-card.center { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); }
.tour-card.swap { opacity: 0; transform: translateY(10px) scale(.97); }
.tour-card.center.swap { transform: translate(-50%, calc(-50% + 10px)) scale(.97); }
@keyframes tourIn { from { opacity: 0; scale: .9; translate: 0 24px; } }
.tour-card h2 { margin: 10px 0 6px; font-size: 19px; color: var(--text-strong); line-height: 1.25; }
.tour-card p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.5; color: var(--muted, var(--text)); }
.tour-step { font-size: 12px; font-weight: 700; color: var(--brand); letter-spacing: .04em; margin-top: 10px; }
.tour-dots { display: flex; gap: 6px; margin-bottom: 14px; }
.tour-dots button { width: 8px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.22); transition: width .3s, background .3s; padding: 0; }
.tour-dots button.past { background: rgba(135, 163, 48, .55); }
.tour-dots button.on { width: 22px; background: var(--brand); }
.tour-btns { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.tour-btns > span { flex: 1; }
.tour-btns .btn { min-width: 0; }
/* on a phone the card sits at the bottom, like a sheet */
body.mobile .tour-card:not(.center) { left: 12px !important; right: 12px; top: auto !important; bottom: calc(12px + env(safe-area-inset-bottom)); width: auto; }
body.mobile .tour-card.top:not(.center) { top: calc(12px + env(safe-area-inset-top)) !important; bottom: auto; }

/* the little scenes */
.ta { position: relative; height: 112px; border-radius: 12px; overflow: hidden; background: radial-gradient(circle at 30% 20%, rgba(135,163,48,.35), transparent 60%), linear-gradient(135deg, #1b2410, #0d1108); display: grid; place-items: center; color: #fff; }
.ta-welcome i { position: absolute; width: 8px; height: 12px; border-radius: 2px; top: -16px; animation: taConfetti 2.6s linear infinite; }
.ta-welcome i:nth-child(3n) { background: #f5c542; } .ta-welcome i:nth-child(3n+1) { background: #87a330; } .ta-welcome i:nth-child(3n+2) { background: #f16666; }
.ta-welcome i:nth-child(2) { left: 8%; animation-delay: .2s; } .ta-welcome i:nth-child(3) { left: 16%; animation-delay: 1.1s; } .ta-welcome i:nth-child(4) { left: 24%; animation-delay: .6s; }
.ta-welcome i:nth-child(5) { left: 32%; animation-delay: 1.7s; } .ta-welcome i:nth-child(6) { left: 40%; animation-delay: .9s; } .ta-welcome i:nth-child(7) { left: 55%; animation-delay: 1.4s; }
.ta-welcome i:nth-child(8) { left: 63%; animation-delay: .3s; } .ta-welcome i:nth-child(9) { left: 71%; animation-delay: 2s; } .ta-welcome i:nth-child(10) { left: 79%; animation-delay: .8s; }
.ta-welcome i:nth-child(11) { left: 87%; animation-delay: 1.2s; } .ta-welcome i:nth-child(12) { left: 94%; animation-delay: .5s; } .ta-welcome i:nth-child(13) { left: 48%; animation-delay: 2.3s; }
@keyframes taConfetti { to { transform: translateY(140px) rotate(540deg); } }
.ta-logo { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 24px; background: var(--brand); color: #10140a; animation: taBounce 1.6s cubic-bezier(.3, 1.6, .5, 1) infinite; }
.ta-done .ta-logo { border-radius: 50%; }
@keyframes taBounce { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-10px) rotate(-6deg); } 60% { transform: translateY(0) rotate(4deg); } }
.ta-compass { display: grid; color: var(--brand); animation: taSpin 3s cubic-bezier(.5, 0, .5, 1) infinite; }
@keyframes taSpin { 0% { transform: rotate(0); } 50% { transform: rotate(200deg); } 100% { transform: rotate(360deg); } }
.ta-discover b { position: absolute; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; background: #2a3a14; box-shadow: 0 4px 10px rgba(0,0,0,.4); animation: taFloat 3s ease-in-out infinite; }
.ta-discover .b1 { left: 14%; top: 18%; } .ta-discover .b2 { right: 14%; top: 22%; animation-delay: .7s; } .ta-discover .b3 { left: 22%; bottom: 14%; animation-delay: 1.4s; } .ta-discover .b4 { right: 22%; bottom: 12%; animation-delay: 2.1s; }
@keyframes taFloat { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-10px) scale(1.08); } }
.ta-servers { grid-template-columns: auto 1fr; gap: 14px; padding: 0 22px; place-items: center start; }
.ta-rail { display: flex; flex-direction: column; gap: 8px; }
.ta-rail i { width: 28px; height: 28px; border-radius: 50%; background: #3b4f1c; animation: taRail 3s ease-in-out infinite; }
.ta-rail i:nth-child(2) { animation-delay: 1s; } .ta-rail i:nth-child(3) { animation-delay: 2s; }
@keyframes taRail { 0%, 20%, 100% { border-radius: 50%; background: #3b4f1c; } 8%, 15% { border-radius: 10px; background: #87a330; } }
.ta-chans { display: flex; flex-direction: column; gap: 9px; width: 100%; }
.ta-chans span { display: flex; align-items: center; gap: 6px; color: #b9c79a; opacity: 0; animation: taSlide 3s ease-out infinite; }
.ta-chans span:nth-child(2) { animation-delay: .25s; } .ta-chans span:nth-child(3) { animation-delay: .5s; }
.ta-chans em { height: 8px; border-radius: 4px; background: rgba(255,255,255,.25); width: 70%; }
@keyframes taSlide { 0% { opacity: 0; transform: translateX(-14px); } 15%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.ta-person { display: grid; color: #dfe8c8; }
.ta-plus { position: absolute; left: calc(50% + 12px); top: 30px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #87a330; color: #10140a; animation: taPop 2.6s cubic-bezier(.3, 1.8, .5, 1) infinite; }
@keyframes taPop { 0%, 15% { transform: scale(0); } 30%, 100% { transform: scale(1); } }
.ta-sent { position: absolute; bottom: 10px; padding: 4px 10px; border-radius: 12px; background: #23a55a; font-size: 12px; font-weight: 700; display: flex; gap: 4px; align-items: center; animation: taUp 2.6s ease-out infinite; }
@keyframes taUp { 0%, 35% { opacity: 0; transform: translateY(14px); } 50%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.ta-dm { display: block; }
.ta-msg { position: absolute; padding: 6px 12px; border-radius: 14px; font-size: 13px; font-weight: 600; animation: taMsg 4s ease-out infinite both; }
.ta-msg.l { left: 16px; top: 14px; background: #2f3a22; border-bottom-left-radius: 4px; }
.ta-msg.r { right: 16px; bottom: 14px; background: #87a330; color: #10140a; border-bottom-right-radius: 4px; animation-delay: 1.6s; }
.ta-typing { position: absolute; right: 18px; top: 46px; display: flex; gap: 3px; padding: 7px 10px; border-radius: 12px; background: #2f3a22; opacity: 0; animation: taTyping 4s infinite; }
.ta-typing i { width: 6px; height: 6px; border-radius: 50%; background: #cfd9b4; animation: taDot 1s infinite; }
.ta-typing i:nth-child(2) { animation-delay: .15s; } .ta-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes taMsg { 0% { opacity: 0; transform: scale(.6); } 8%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes taTyping { 0%, 15% { opacity: 0; } 20%, 38% { opacity: 1; } 42%, 100% { opacity: 0; } }
@keyframes taDot { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-4px); } }
.ta-safety { grid-template-columns: 1fr auto; padding: 0 22px; gap: 14px; }
.ta-menu { display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 10px; background: #101112; box-shadow: 0 6px 18px rgba(0,0,0,.5); font-size: 13px; font-weight: 600; animation: taPop 3.2s cubic-bezier(.3, 1.5, .5, 1) infinite; transform-origin: top left; }
.ta-menu span { display: flex; gap: 6px; align-items: center; padding: 5px 10px; border-radius: 6px; }
.ta-menu .bad { color: #f16666; }
.ta-menu .bad:nth-child(2) { animation: taHi 3.2s infinite; } .ta-menu .bad:nth-child(3) { animation: taHi 3.2s 1.2s infinite; }
@keyframes taHi { 0%, 30%, 60%, 100% { background: transparent; color: #f16666; } 40%, 52% { background: #da373c; color: #fff; } }
.ta-shield { display: grid; color: #87a330; animation: taFloat 2.4s ease-in-out infinite; }
.ta-profile { display: block; }
.ta-banner { position: absolute; inset: 0 0 50% 0; animation: taBanner 4s linear infinite; }
@keyframes taBanner { 0%, 100% { background: #87a330; } 33% { background: #5865f2; } 66% { background: #eb459e; } }
.ta-av { position: absolute; left: 22px; top: 28px; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: #2a3a14; border: 4px solid #0d1108; box-shadow: 0 0 0 3px #f5c542; animation: taFrame 4s linear infinite; }
@keyframes taFrame { 0%, 100% { box-shadow: 0 0 0 3px #f5c542; } 33% { box-shadow: 0 0 0 3px #5ec8f2; } 66% { box-shadow: 0 0 0 3px #f16666; } }
.ta-profile em { position: absolute; left: 92px; top: 66px; height: 10px; width: 46%; border-radius: 5px; background: rgba(255,255,255,.35); }
.ta-profile em.s { top: 84px; width: 30%; background: rgba(255,255,255,.2); }
.ta-theme { grid-template-columns: 1fr auto; padding: 0 20px; gap: 14px; }
.ta-win { width: 100%; height: 76px; border-radius: 10px; display: grid; grid-template-columns: 16px 34px 1fr; gap: 4px; padding: 6px; box-sizing: border-box; animation: taWin 4.8s steps(1) infinite; }
.ta-win i { border-radius: 5px; background: rgba(127,127,127,.35); }
@keyframes taWin { 0%, 100% { background: #243010; } 25% { background: #1e2140; } 50% { background: #3a1830; } 75% { background: #e9ecef; } }
.ta-sw { display: grid; grid-template-columns: repeat(2, 22px); gap: 6px; }
.ta-sw b { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; animation: taSw 4.8s steps(1) infinite; }
.ta-sw b:nth-child(1) { background: #87a330; } .ta-sw b:nth-child(2) { background: #5865f2; animation-delay: 1.2s; } .ta-sw b:nth-child(3) { background: #eb459e; animation-delay: 2.4s; } .ta-sw b:nth-child(4) { background: #fff; animation-delay: 3.6s; }
@keyframes taSw { 0%, 24% { border-color: #fff; transform: scale(1.2); } 25%, 100% { border-color: transparent; transform: none; } }
.tut-tour { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(135deg, rgba(135,163,48,.28), rgba(135,163,48,.08)); }
.tut-tour > div { flex: 1; min-width: 0; }
.tut-tour b { display: block; color: var(--text-strong); }
.tut-tour small { color: var(--muted, var(--text)); }
@media (prefers-reduced-motion: reduce) { #tour *, #tour *::before, #tour *::after { animation: none !important; transition: none !important; } }

/* ---------------------------------------------------------------- Home → Notifications (notifs.js) */
.nt-page { max-width: 760px; margin: 0 auto; padding: 16px 20px 40px; }
.nt-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.nt-chip { padding: 6px 14px; border-radius: 16px; background: var(--bg-3, rgba(255,255,255,.06)); color: var(--text); font-size: 13.5px; font-weight: 600; transition: background .15s, color .15s; }
.nt-chip:hover { background: rgba(255,255,255,.12); }
.nt-chip.on { background: var(--brand); color: var(--on-brand, #10140a); }
.nt-day { margin: 18px 4px 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--faint, var(--muted)); }
.nt-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; cursor: pointer; transition: background .15s; animation: ntIn .35s ease-out both; }
.nt-row:hover { background: rgba(255,255,255,.05); }
.nt-row.unread { background: rgba(135, 163, 48, .12); }
.nt-row.unread::before { content: ''; position: absolute; left: 2px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--brand); }
@keyframes ntIn { from { opacity: 0; transform: translateY(6px); } }
.nt-avs { position: relative; flex-shrink: 0; width: 44px; height: 44px; display: grid; place-items: center; }
.nt-avs.many .avatar { position: absolute; --s: 30px !important; width: 30px; height: 30px; box-shadow: 0 0 0 2px var(--bg-2, #1b1d1f); border-radius: 50%; }
.nt-avs.many .avatar:nth-child(1) { left: 0; top: 0; z-index: 2; }
.nt-avs.many .avatar:nth-child(2) { right: 0; bottom: 0; z-index: 1; }
.nt-avs.many .avatar:nth-child(3) { display: none; }
.nt-sys { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(135,163,48,.25); color: var(--brand); }
.nt-badge { position: absolute; left: 42px; top: 38px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 0 0 2px var(--bg-2, #1b1d1f); }
.nt-badge.pink { background: #eb459e; } .nt-badge.green { background: #23a55a; } .nt-badge.blue { background: #5865f2; } .nt-badge.red { background: #da373c; } .nt-badge.brand { background: var(--brand); color: #10140a; }
.nt-text { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.4; color: var(--text); }
.nt-text b { color: var(--text-strong); }
.nt-time { color: var(--faint, var(--muted)); font-size: 12.5px; margin-left: 2px; white-space: nowrap; }
.nt-quote { margin-top: 3px; color: var(--muted, var(--text)); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-quote .emoji { width: 18px; height: 18px; vertical-align: -4px; }
.nt-acts { display: flex; gap: 8px; margin-top: 8px; }
.nt-acts .btn { min-width: 0; height: 30px; }
.nt-thumb { flex-shrink: 0; width: 44px; height: 58px; border-radius: 8px; object-fit: cover; background: #000; }
.nt-thumb.gone { display: grid; place-items: center; color: var(--faint, var(--muted)); background: rgba(255,255,255,.06); }
.nt-empty { text-align: center; padding: 60px 20px; color: var(--muted, var(--text)); }
.nt-empty b { display: block; margin: 10px 0 6px; font-size: 17px; color: var(--text-strong); }
.nt-empty p { max-width: 380px; margin: 0 auto; line-height: 1.5; }
.nt-empty-art { display: inline-grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: rgba(135,163,48,.15); color: var(--brand); animation: ntBell 2.4s ease-in-out infinite; }
@keyframes ntBell { 0%, 60%, 100% { transform: rotate(0); } 10% { transform: rotate(14deg); } 20% { transform: rotate(-12deg); } 30% { transform: rotate(8deg); } 40% { transform: rotate(-4deg); } }
body.mobile .nt-page { padding: 12px 10px 30px; }
@media (prefers-reduced-motion: reduce) { .nt-row, .nt-empty-art { animation: none; } }

/* ---------------------------------------------------------------- clip editor (clips.js clipEditor) */
.clip-editor { margin: 4px 0 8px; }
.ce-stage { position: relative; display: flex; justify-content: center; background: #000; border-radius: 12px; overflow: hidden; }
.ce-video { display: block; max-width: 100%; max-height: min(46vh, 380px); }
.ce-len { position: absolute; right: 8px; top: 8px; padding: 3px 8px; border-radius: 10px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; font-weight: 700; }
.ce-len.bad { background: #da373c; }
/* the part kept: a bar with two handles */
.ce-trim { position: relative; height: 34px; margin: 10px 2px 2px; }
.ce-track { position: absolute; left: 0; right: 0; top: 11px; height: 12px; border-radius: 6px; background: rgba(255,255,255,.12); }
.ce-sel { position: absolute; top: 0; bottom: 0; border-radius: 6px; background: var(--brand); box-shadow: 0 0 0 2px rgba(135,163,48,.35); }
.ce-trim input[type=range] { position: absolute; inset: 0; width: 100%; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; height: 34px; }
.ce-trim input[type=range]::-webkit-slider-runnable-track { background: none; border: 0; }
.ce-trim input[type=range]::-moz-range-track { background: none; border: 0; }
.ce-trim input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 18px; height: 30px; border-radius: 6px; background: #fff; border: 3px solid var(--brand); cursor: ew-resize; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.ce-trim input[type=range]::-moz-range-thumb { pointer-events: auto; width: 14px; height: 26px; border-radius: 6px; background: #fff; border: 3px solid var(--brand); cursor: ew-resize; }
.ce-times { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted, var(--text)); margin-bottom: 4px; }
.ce-times span:nth-child(2) { text-align: center; opacity: .8; }
.ce-filters { margin-bottom: 4px; }
.ce-music { margin-top: 10px; }
.ce-music input[type=range] { width: 100%; }
.ce-add-song { width: 100%; }
/* the song of a clip, under its caption in the feed */
.clip-song { display: flex; align-items: center; gap: 6px; margin-top: 6px; max-width: 100%; font-size: 13px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); overflow: hidden; }
.clip-song span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clip-song svg { flex-shrink: 0; animation: clipSong 2.4s linear infinite; }
@keyframes clipSong { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .clip-song svg { animation: none; } }

/* the full clip editor (clips.js openClipEditor): the stage has the video's own shape */
.ce-stage-full .ce-len { position: absolute; right: 10px; top: 10px; z-index: 3; padding: 3px 8px; border-radius: 10px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; font-weight: 700; }
.ce-stage-full .ce-len.bad { background: #da373c; }
.ce-stage-full .se-video { object-fit: contain; }
.ce-stage-full.wide { height: auto; width: min(calc(96vw - 340px), 900px); align-self: center; }
.clip-edit-layer .se-tools .ce-trim { margin-top: 4px; }
.clip-edit-layer .se-tools > * { flex-shrink: 0; } /* (the panel scrolls: nothing in it may be squashed) */
.clip-edit-layer .ce-times span:nth-child(2) { font-size: 11px; line-height: 1.3; }
body.mobile .ce-stage-full.wide { width: 100%; height: auto; }

/* holding and moving a channel on a touch screen (channelorder.js) */
.ch-ghost { position: fixed; z-index: 2600; pointer-events: none; margin: 0; border-radius: 8px; background: var(--bg-float); box-shadow: 0 10px 28px rgba(0,0,0,.5), 0 0 0 2px var(--brand); transform: scale(1.04); opacity: .95; animation: chLift .18s ease-out; }
@keyframes chLift { from { transform: scale(1); box-shadow: none; } }
body.ch-holding, body.ch-holding * { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
body.ch-holding .server-scroll { touch-action: none; }
.ch-item.drop-before, .cat.drop-before { box-shadow: inset 0 3px 0 var(--brand); }
.ch-item.drop-after, .cat.drop-after { box-shadow: inset 0 -3px 0 var(--brand); }