/* Parloir — une seule feuille de style pilotée par des jetons.
   <html data-mode="light|dark" data-skin="standard|gradient|win11|glass|simple|minimal">
   Mise en page : rail des serveurs | salons | discussion ou scène vocale | membres. */

/* ================================================================== */
/* Jetons : Standard (clair par défaut)                                */
/* ================================================================== */
:root{
  --bg:#DCE3DF; --rail-bg:#DCE3DF; --side-bg:#E9EEEB; --main-bg:#F7F9F8; --members-bg:#E9EEEB;
  --card:#F7F9F8; --field:#E9EEEB; --raise:#DFE7E3; --hover:#DFE7E3; --active:#D5DFDA; --line:#CFD8D3;
  --fg:#16201B; --muted:#52605A; --faint:#84918B;
  --accent:#1E8A6F; --accent-2:#2BA58A; --accent-fill:#1E8A6F; --accent-ink:#FFFFFF; --accent-soft:#D3EDE5;
  --danger:#B93B34; --danger-soft:#F6DEDC;
  --st-online:#23A55A; --st-idle:#D99A1E; --st-dnd:#D9433B; --st-off:#8B9893;
  --stage-bg:#E9EEEB; --tile-bg:#DCE3DF;
  --inv-bg:#16201B; --inv-fg:#F7F9F8; --overlay:rgb(8 14 11 / .5);
  --blur:none; --panel-border:transparent; --highlight:0 0 #0000; --shadow:0 16px 40px rgb(0 0 0 / .16);
  --app-pad:0px; --app-gap:0px; --panel-r:0px;
  --r-sm:7px; --r-md:10px; --r:14px; --r-lg:18px; --r-btn:10px;
  --fs:15px; --row-pad:6px;
  --f-display:"Bricolage Grotesque","Avenir Next",system-ui,sans-serif;
  --f-body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:light;
}
[data-mode="dark"]{
  --bg:#0E1412; --rail-bg:#0E1412; --side-bg:#141B18; --main-bg:#1A231F; --members-bg:#141B18;
  --card:#1A231F; --field:#141B18; --raise:#232E29; --hover:#232E29; --active:#2A3731; --line:#2B3732;
  --fg:#E5EDE9; --muted:#A1AFA8; --faint:#6E7C76;
  --accent:#3EBE97; --accent-2:#5FD4B0; --accent-fill:#3EBE97; --accent-ink:#05211A; --accent-soft:#1D3B32;
  --danger:#EE6F68; --danger-soft:#3A1F1D;
  --st-online:#2DC26B; --st-idle:#F0B232; --st-dnd:#F04B44; --st-off:#6E7C76;
  --stage-bg:#101614; --tile-bg:#1C2622;
  --inv-bg:#E5EDE9; --inv-fg:#141B18; --overlay:rgb(0 0 0 / .6);
  --shadow:0 18px 48px rgb(0 0 0 / .45);
  color-scheme:dark;
}

/* ---------- Dégradés : trois couleurs choisies dans Apparence (--g1, --g2, --g3) ---------- */
:root{--g1:#7C3AED;--g2:#EC4899;--g3:#F97316;--g-ink:#FFFFFF}
[data-skin="gradient"]{
  --bg:linear-gradient(135deg,color-mix(in srgb,var(--g1) 20%,#fff) 0%,color-mix(in srgb,var(--g2) 16%,#fff) 50%,color-mix(in srgb,var(--g3) 18%,#fff) 100%);
  --rail-bg:rgb(255 255 255 / .28); --side-bg:rgb(255 255 255 / .55); --main-bg:rgb(255 255 255 / .78); --members-bg:rgb(255 255 255 / .55);
  --card:rgb(255 255 255 / .92); --field:color-mix(in srgb,var(--g1) 7%,transparent); --raise:color-mix(in srgb,var(--g1) 9%,transparent); --hover:color-mix(in srgb,var(--g1) 8%,transparent); --active:color-mix(in srgb,var(--g1) 15%,transparent); --line:color-mix(in srgb,var(--g1) 17%,transparent);
  --fg:#1C1830; --muted:#565070; --faint:#8A85A0;
  --accent:color-mix(in srgb,var(--g1) 85%,#000); --accent-2:var(--g2); --accent-fill:linear-gradient(135deg,var(--g1),var(--g2) 60%,var(--g3)); --accent-ink:var(--g-ink); --accent-soft:color-mix(in srgb,var(--g1) 15%,transparent);
  --stage-bg:rgb(255 255 255 / .5); --tile-bg:color-mix(in srgb,var(--g1) 12%,transparent);
  --inv-bg:#1C1830; --inv-fg:#FFFFFF;
  --blur:blur(24px) saturate(160%); --panel-border:rgb(255 255 255 / .6);
  --r:16px; --r-btn:12px;
}
[data-skin="gradient"][data-mode="dark"]{
  --bg:linear-gradient(135deg,color-mix(in srgb,var(--g1) 30%,#08060E) 0%,color-mix(in srgb,var(--g2) 24%,#08060E) 50%,color-mix(in srgb,var(--g3) 22%,#060A14) 100%);
  --rail-bg:rgb(0 0 0 / .22); --side-bg:rgb(12 8 22 / .58); --main-bg:rgb(10 6 18 / .7); --members-bg:rgb(12 8 22 / .58);
  --card:rgb(20 14 32 / .95); --field:color-mix(in srgb,var(--g1) 12%,transparent); --raise:color-mix(in srgb,var(--g1) 15%,transparent); --hover:color-mix(in srgb,var(--g1) 11%,transparent); --active:color-mix(in srgb,var(--g1) 22%,transparent); --line:color-mix(in srgb,var(--g1) 20%,transparent);
  --fg:#F4F1FF; --muted:#C3BCDC; --faint:#8C85A8;
  --accent:color-mix(in srgb,var(--g1) 60%,#fff); --accent-soft:color-mix(in srgb,var(--g1) 22%,transparent);
  --stage-bg:rgb(6 3 12 / .5); --tile-bg:color-mix(in srgb,var(--g1) 13%,transparent);
  --inv-bg:#F4F1FF; --inv-fg:#130C20; --panel-border:rgb(255 255 255 / .08);
}

/* ---------- Windows 11 (Fluent, Mica) ---------- */
[data-skin="win11"]{
  --bg:linear-gradient(160deg,#EDF1F8 0%,#F3F3F3 55%,#F5F1EE 100%);
  --rail-bg:transparent; --side-bg:transparent; --main-bg:#FBFBFB; --members-bg:#FBFBFB;
  --card:#F9F9F9; --field:#FFFFFF; --raise:rgb(0 0 0 / .045); --hover:rgb(0 0 0 / .04); --active:rgb(0 0 0 / .065); --line:#E5E5E5;
  --fg:#1B1B1B; --muted:#5D5D5D; --faint:#8A8A8A;
  --accent:#005FB8; --accent-2:#0078D4; --accent-fill:#005FB8; --accent-ink:#FFFFFF; --accent-soft:#E0EDF8;
  --danger:#C42B1C; --danger-soft:#FDE7E9; --st-online:#0F7B0F; --st-idle:#9D5D00; --st-dnd:#C42B1C;
  --stage-bg:#F3F3F3; --tile-bg:#E9E9E9; --inv-bg:#2B2B2B; --inv-fg:#FFFFFF;
  --shadow:0 8px 16px rgb(0 0 0 / .14),0 0 1px rgb(0 0 0 / .2);
  --r-sm:4px; --r-md:4px; --r:8px; --r-lg:8px; --r-btn:4px; --fs:14px;
  --f-display:"Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  --f-body:"Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  --f-mono:"Cascadia Mono",Consolas,ui-monospace,monospace;
}
[data-skin="win11"][data-mode="dark"]{
  --bg:linear-gradient(160deg,#1C2129 0%,#202020 55%,#221F1E 100%);
  --main-bg:#272727; --members-bg:#272727; --card:#2C2C2C; --field:#2D2D2D;
  --raise:rgb(255 255 255 / .06); --hover:rgb(255 255 255 / .05); --active:rgb(255 255 255 / .085); --line:rgb(255 255 255 / .08);
  --fg:#FFFFFF; --muted:#CFCFCF; --faint:#9D9D9D;
  --accent:#60CDFF; --accent-2:#4CC2FF; --accent-fill:#60CDFF; --accent-ink:#00243A; --accent-soft:rgb(96 205 255 / .14);
  --danger:#FF99A4; --danger-soft:rgb(255 153 164 / .14); --st-online:#6CCB5F; --st-idle:#FCE100; --st-dnd:#FF99A4;
  --stage-bg:#202020; --tile-bg:#2C2C2C; --inv-bg:#FFFFFF; --inv-fg:#1B1B1B;
  --shadow:0 8px 16px rgb(0 0 0 / .36),0 0 1px rgb(0 0 0 / .5);
}

/* ---------- Liquid Glass (macOS 27) ---------- */
[data-skin="glass"]{
  --bg:radial-gradient(1100px 700px at 8% 0%,#9FD3FF 0%,transparent 60%),radial-gradient(900px 650px at 100% 20%,#FFB3D9 0%,transparent 55%),radial-gradient(900px 700px at 55% 110%,#B4F1D8 0%,transparent 60%),#E7ECF6;
  --rail-bg:rgb(255 255 255 / .34); --side-bg:rgb(255 255 255 / .42); --main-bg:rgb(255 255 255 / .5); --members-bg:rgb(255 255 255 / .42);
  --card:rgb(255 255 255 / .66); --field:rgb(255 255 255 / .55); --raise:rgb(255 255 255 / .55); --hover:rgb(255 255 255 / .45); --active:rgb(255 255 255 / .75); --line:rgb(0 0 0 / .08);
  --fg:#0B0B10; --muted:rgb(60 60 67 / .78); --faint:rgb(60 60 67 / .52);
  --accent:#0A7AFF; --accent-2:#5AC8FA; --accent-fill:#0A7AFF; --accent-ink:#FFFFFF; --accent-soft:rgb(10 122 255 / .14);
  --danger:#FF3B30; --danger-soft:rgb(255 59 48 / .14); --st-online:#30C759; --st-idle:#FFCC00; --st-dnd:#FF3B30; --st-off:#8E8E93;
  --stage-bg:rgb(255 255 255 / .28); --tile-bg:rgb(255 255 255 / .45);
  --inv-bg:rgb(30 30 36 / .82); --inv-fg:#FFFFFF; --overlay:rgb(20 24 40 / .25);
  --blur:blur(40px) saturate(190%); --panel-border:rgb(255 255 255 / .7);
  --highlight:inset 0 1px 0 rgb(255 255 255 / .9),inset 0 -1px 0 rgb(255 255 255 / .25);
  --shadow:0 20px 60px rgb(30 40 80 / .22);
  --r-sm:10px; --r-md:14px; --r:20px; --r-lg:26px; --r-btn:999px;
  --f-display:-apple-system,"SF Pro Display",system-ui,sans-serif;
  --f-body:-apple-system,"SF Pro Text",system-ui,"Segoe UI",sans-serif;
  --f-mono:"SF Mono",ui-monospace,Menlo,monospace;
}
[data-skin="glass"][data-mode="dark"]{
  --bg:radial-gradient(1100px 700px at 8% 0%,#16407A 0%,transparent 60%),radial-gradient(900px 650px at 100% 20%,#5B1D4F 0%,transparent 55%),radial-gradient(900px 700px at 55% 110%,#0F4D3E 0%,transparent 60%),#0B0D14;
  --rail-bg:rgb(40 40 48 / .32); --side-bg:rgb(36 36 44 / .4); --main-bg:rgb(30 30 38 / .48); --members-bg:rgb(36 36 44 / .4);
  --card:rgb(40 40 50 / .72); --field:rgb(255 255 255 / .08); --raise:rgb(255 255 255 / .1); --hover:rgb(255 255 255 / .07); --active:rgb(255 255 255 / .16); --line:rgb(255 255 255 / .1);
  --fg:#F5F5F7; --muted:rgb(235 235 245 / .68); --faint:rgb(235 235 245 / .42);
  --accent:#0A84FF; --accent-fill:#0A84FF; --accent-soft:rgb(10 132 255 / .22);
  --danger:#FF453A; --danger-soft:rgb(255 69 58 / .2); --st-online:#32D74B; --st-idle:#FFD60A; --st-dnd:#FF453A;
  --stage-bg:rgb(0 0 0 / .18); --tile-bg:rgb(255 255 255 / .08);
  --inv-bg:rgb(245 245 247 / .9); --inv-fg:#0B0B10; --overlay:rgb(0 0 0 / .4);
  --panel-border:rgb(255 255 255 / .14); --highlight:inset 0 1px 0 rgb(255 255 255 / .18);
  --shadow:0 20px 60px rgb(0 0 0 / .5);
}

/* ---------- Simplicité (lisibilité, grandes cibles) ---------- */
[data-skin="simple"]{
  --bg:#E4E9F2; --rail-bg:#E4E9F2; --side-bg:#F3F5FA; --main-bg:#FFFFFF; --members-bg:#F3F5FA;
  --card:#FFFFFF; --field:#F3F5FA; --raise:#E8EDF6; --hover:#E8EDF6; --active:#DCE5F6; --line:#D3DBE8;
  --fg:#0F172A; --muted:#3F4D63; --faint:#64748B;
  --accent:#2453C4; --accent-2:#3B6FE0; --accent-fill:#2453C4; --accent-ink:#FFFFFF; --accent-soft:#DCE6FA;
  --stage-bg:#F3F5FA; --tile-bg:#E4E9F2; --inv-bg:#0F172A; --inv-fg:#FFFFFF;
  --r-sm:10px; --r-md:12px; --r:14px; --r-lg:16px; --r-btn:12px; --fs:16px; --row-pad:9px;
  --f-display:"Atkinson Hyperlegible",system-ui,sans-serif; --f-body:"Atkinson Hyperlegible",system-ui,sans-serif;
}
[data-skin="simple"][data-mode="dark"]{
  --bg:#0B1019; --rail-bg:#0B1019; --side-bg:#131A28; --main-bg:#182033; --members-bg:#131A28;
  --card:#1B2438; --field:#131A28; --raise:#222C42; --hover:#222C42; --active:#2A3753; --line:#2C3850;
  --fg:#F1F5FB; --muted:#BAC6D8; --faint:#8794AB;
  --accent:#86A8FF; --accent-2:#A5BEFF; --accent-fill:#86A8FF; --accent-ink:#0B1430; --accent-soft:rgb(134 168 255 / .18);
  --stage-bg:#0F1522; --tile-bg:#1B2438; --inv-bg:#F1F5FB; --inv-fg:#0B1019;
}

/* ---------- Minimaliste (monochrome, filets fins) ---------- */
[data-skin="minimal"]{
  --bg:#FFFFFF; --rail-bg:#FFFFFF; --side-bg:#FFFFFF; --main-bg:#FFFFFF; --members-bg:#FFFFFF;
  --card:#FFFFFF; --field:#F5F5F5; --raise:#F3F3F3; --hover:#F5F5F5; --active:#EDEDED; --line:#E8E8E8;
  --fg:#111111; --muted:#616161; --faint:#9E9E9E;
  --accent:#111111; --accent-2:#444444; --accent-fill:#111111; --accent-ink:#FFFFFF; --accent-soft:#EDEDED;
  --danger:#C62828; --danger-soft:#FBE9E9; --stage-bg:#FAFAFA; --tile-bg:#F0F0F0;
  --inv-bg:#111111; --inv-fg:#FFFFFF; --shadow:0 0 0 1px #E8E8E8;
  --r-sm:5px; --r-md:6px; --r:8px; --r-lg:10px; --r-btn:6px;
  --f-display:"Manrope",system-ui,sans-serif; --f-body:"Manrope",system-ui,sans-serif;
}
[data-skin="minimal"][data-mode="dark"]{
  --bg:#0C0C0C; --rail-bg:#0C0C0C; --side-bg:#0C0C0C; --main-bg:#0C0C0C; --members-bg:#0C0C0C;
  --card:#111111; --field:#171717; --raise:#1A1A1A; --hover:#161616; --active:#1F1F1F; --line:#222222;
  --fg:#F2F2F2; --muted:#A3A3A3; --faint:#6B6B6B;
  --accent:#F2F2F2; --accent-2:#BDBDBD; --accent-fill:#F2F2F2; --accent-ink:#0C0C0C; --accent-soft:#1F1F1F;
  --danger:#EF7070; --danger-soft:#2A1414; --stage-bg:#0C0C0C; --tile-bg:#161616;
  --inv-bg:#F2F2F2; --inv-fg:#0C0C0C; --shadow:0 0 0 1px #262626;
}

/* ================================================================== */
/* Base                                                                */
/* ================================================================== */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);background-attachment:fixed;color:var(--fg);font:var(--fs)/1.45 var(--f-body);overflow:hidden;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:var(--accent-soft)}
/* « Réduire les animations » du système fige l’interface, mais pas les effets de profil : ce sont des animations que chacun a choisies. */
@media (prefers-reduced-motion: reduce){*:not(.peffect,.peffect *){transition:none!important;animation:none!important}}
.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}
.glass{background:var(--card);border:1px solid var(--panel-border);box-shadow:var(--highlight),var(--shadow);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}

/* ---------- Connexion ---------- */
.auth{position:fixed;inset:0;display:grid;place-items:center;padding:16px;overflow:auto}
.auth::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(1000px 520px at 12% -10%,var(--accent-soft),transparent 60%),radial-gradient(800px 480px at 110% 110%,var(--accent-soft),transparent 60%)}
.auth-card{width:min(480px,100%);border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column;gap:14px}
.auth-brand{font:800 14px var(--f-display);letter-spacing:.12em;text-transform:uppercase;background:var(--accent-fill);-webkit-background-clip:text;background-clip:text;color:transparent;align-self:flex-start}
.auth-card h1{margin:0;font:800 30px/1.05 var(--f-display);letter-spacing:-.02em}
.auth-seg{display:flex;align-self:stretch}.auth-seg button{flex:1}
.btn.wide{justify-content:center;width:100%;padding:12px}

/* ---------- Structure ---------- */
.app{height:100%;display:grid;grid-template-columns:72px 248px minmax(0,1fr) 248px;position:relative;padding:var(--app-pad);gap:var(--app-gap)}
.app.no-members{grid-template-columns:72px 248px minmax(0,1fr)}
.app.no-members .members{display:none}
.app.voice-view .members{display:none}
.app.voice-view{grid-template-columns:72px 248px minmax(0,1fr)}
.rail,.side,.chat,.members{border-radius:var(--panel-r);border:1px solid var(--panel-border);box-shadow:var(--highlight);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);min-height:0}
.rail{background:var(--rail-bg);display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 0;overflow-y:auto}
.side{background:var(--side-bg);display:flex;flex-direction:column;min-width:0;overflow:hidden}
.chat{display:flex;flex-direction:column;min-width:0;background:var(--main-bg);overflow:hidden}
.members{background:var(--members-bg);overflow-y:auto;padding:12px 8px;--ring:var(--members-bg)}
[data-skin="standard"]:not([data-ui="bubbles"]) .side,[data-skin="simple"]:not([data-ui="bubbles"]) .side{border-top-left-radius:var(--r)}
[data-skin="win11"]:not([data-ui="bubbles"]) .app{padding-top:0}
[data-skin="win11"]:not([data-ui="bubbles"]) .chat{border-top-left-radius:8px;border-color:var(--line) transparent transparent var(--line)}
[data-skin="win11"]:not([data-ui="bubbles"]) .members{border-color:var(--line) transparent transparent transparent}
[data-skin="minimal"]:not([data-ui="bubbles"]) .rail,[data-skin="minimal"]:not([data-ui="bubbles"]) .side{border-right-color:var(--line)}
[data-skin="minimal"]:not([data-ui="bubbles"]) .members{border-left-color:var(--line)}
.srv-list{display:flex;flex-direction:column;align-items:center;gap:8px}
.brand{font:800 13px/1 var(--f-display);letter-spacing:.04em;writing-mode:vertical-rl;transform:rotate(180deg);margin-bottom:6px;user-select:none;background:var(--accent-fill);-webkit-background-clip:text;background-clip:text;color:transparent}
.srv{width:46px;height:46px;flex:none;border-radius:calc(var(--r) + 1px);border:0;background:var(--raise);display:grid;place-items:center;font:700 15px var(--f-display);position:relative;transition:border-radius .15s,background .15s;padding:0;color:var(--fg)}
.srv img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.srv .ic{width:22px;height:22px}
.srv:hover{border-radius:var(--r-md);background:var(--active)}
.srv[aria-current="true"]{border-radius:var(--r-md);background:var(--accent-fill);color:var(--accent-ink)}
.srv[aria-current="true"]::before{content:"";position:absolute;left:-13px;top:8px;bottom:8px;width:4px;border-radius:0 3px 3px 0;background:var(--fg)}
[data-skin="glass"] .srv{border-radius:50%}[data-skin="glass"] .srv[aria-current="true"]::before{display:none}
.srv.add{background:transparent;border:1.5px dashed var(--faint);color:var(--muted)}
.srv.add:hover{border-color:var(--accent);color:var(--accent)}
.srv .vdot{position:absolute;right:-3px;bottom:-3px;width:16px;height:16px;border-radius:50%;background:var(--st-online);border:3px solid var(--rail-bg)}
.side-head{height:52px;flex:none;display:flex;align-items:center;gap:8px;padding:0 10px 0 16px;border-bottom:1px solid var(--line)}
.side-head h2{margin:0;font:800 17px/1.1 var(--f-display);letter-spacing:-.01em;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chlist{flex:1;overflow-y:auto;padding:10px 8px;display:flex;flex-direction:column;gap:1px}
.sect{display:flex;align-items:center;justify-content:space-between;padding:10px 8px 4px;font:600 11px var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.icon-btn{border:0;background:transparent;width:32px;height:32px;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--muted);flex:none;padding:0;position:relative}
.icon-btn:hover{background:var(--hover);color:var(--fg)}
.icon-btn.off{color:var(--danger)}
.icon-btn.on{color:var(--accent)}
.icon-btn.hang{color:var(--danger)}.icon-btn.hang:hover{background:var(--danger-soft)}
.icon-btn.hang.stop{background:var(--danger);color:#fff}
[data-skin="simple"] .icon-btn{width:38px;height:38px}
.ch{display:flex;align-items:center;gap:8px;border:0;background:transparent;text-align:left;padding:var(--row-pad) 8px;border-radius:var(--r-sm);color:var(--muted);width:100%;position:relative}
.ch .ic{width:17px;height:17px;color:var(--faint)}
.ch .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch:hover{background:var(--hover);color:var(--fg)}
.ch[aria-current="true"]{background:var(--active);color:var(--fg);font-weight:600}
[data-skin="win11"] .ch[aria-current="true"]::before,[data-skin="simple"] .ch[aria-current="true"]::before,[data-skin="gradient"] .ch[aria-current="true"]::before{content:"";position:absolute;left:0;top:25%;bottom:25%;width:3px;border-radius:3px;background:var(--accent-fill)}
[data-skin="gradient"] .ch[aria-current="true"]{background:var(--accent-soft)}
.ch.unread{color:var(--fg);font-weight:700}
.ch.unread::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--fg)}
.ch .count{font:600 11px var(--f-mono);color:var(--faint)}
.ch-del{opacity:0;position:absolute;right:4px;top:50%;transform:translateY(-50%)}
.ch-wrap{position:relative;display:flex}
.ch-wrap:hover .ch-del,.ch-del:focus-visible{opacity:1}
.vmembers{display:flex;flex-direction:column;gap:1px;padding:2px 0 4px 30px}
.vm{display:flex;align-items:center;gap:8px;padding:3px 6px;border-radius:var(--r-sm);font-size:.9em;color:var(--muted);border:0;background:transparent;text-align:left;--ring:var(--side-bg)}
.vm:hover{background:var(--hover)}
.vm .uname{flex:1;min-width:0;font-weight:600}
.vm .flags{display:flex;gap:3px;align-items:center;color:var(--faint)}
.vm .flags .ic{width:14px;height:14px}
.live{font:800 9.5px/1 var(--f-body);letter-spacing:.06em;background:var(--st-dnd);color:#fff;padding:3px 5px;border-radius:4px}

.vpanel{border-top:1px solid var(--line);padding:10px 10px 8px;display:flex;flex-direction:column;gap:8px}
.vp-top{display:flex;align-items:center;gap:8px}
.vp-top .txt{flex:1;min-width:0}
.vp-top b{display:flex;align-items:center;gap:6px;color:var(--st-online);font-size:.9em}
.vp-top b .ic{width:15px;height:15px}
.vp-top small{display:block;color:var(--faint);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vp-top button.link{border:0;background:transparent;padding:0;color:inherit;text-align:left;cursor:pointer}
.vp-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.vp-actions button{border:0;border-radius:var(--r-sm);background:var(--raise);height:32px;display:grid;place-items:center;color:var(--fg)}
.vp-actions button:hover{background:var(--active)}
.vp-actions button.on{background:var(--accent-fill);color:var(--accent-ink)}

.me-bar{display:flex;align-items:center;gap:4px;padding:8px 6px 8px 8px;border-top:1px solid var(--line);--ring:var(--side-bg)}
.me-bar .who{min-width:0;flex:1;border:0;background:transparent;text-align:left;padding:2px 6px;border-radius:var(--r-sm);display:flex;flex-direction:column}
.me-bar .who:hover{background:var(--hover)}
.me-bar .who .uname{display:block;font-size:13px}
.me-bar .who small{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-bar .who small .ic{width:12px;height:12px}
.me-bar .who small .chev{width:12px;height:12px;margin-left:auto;transform:rotate(-90deg);opacity:.7}

/* ---------- Avatars ---------- */
.pfp{position:relative;display:inline-flex;flex:none;border-radius:50%;--da:var(--accent);--db:var(--accent);padding:0;border:0;background:transparent}
.pfp>img{position:relative;z-index:1;width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;background:var(--raise)}
.pfp.d-halo>img{box-shadow:0 0 0 2px var(--ring,var(--main-bg)),0 0 0 4px var(--da),0 0 14px 3px color-mix(in srgb,var(--db) 70%,transparent)}
.pfp.d-arc::before,.pfp.d-orbit::before{content:"";position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(var(--da),var(--db),var(--da));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px))}
.pfp.d-orbit::before{background:conic-gradient(from 0deg,transparent 0 40%,var(--da) 60%,var(--db) 100%);animation:spin 2.4s linear infinite}
.pfp.d-pulse::before{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--da);animation:pulse 2s ease-out infinite}
.pfp.speaking>img{box-shadow:0 0 0 2px var(--ring,var(--main-bg)),0 0 0 4px var(--st-online)!important}
@keyframes spin{to{transform:rotate(1turn)}}
@keyframes pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.3);opacity:0}}
.sdot{position:absolute;z-index:2;right:-2px;bottom:-2px;width:36%;height:36%;min-width:10px;min-height:10px;border-radius:50%;border:3px solid var(--ring,var(--side-bg));background:var(--st-off)}
.sdot.online{background:var(--st-online)}.sdot.idle{background:var(--st-idle)}.sdot.dnd{background:var(--st-dnd)}
.uname{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uname.grad{-webkit-background-clip:text;background-clip:text;color:transparent}
button.uname{border:0;background-color:transparent;padding:0;text-align:left;cursor:pointer}
button.uname:hover{text-decoration:underline}

/* ---------- Discussion ---------- */
.chat-head{height:52px;flex:none;display:flex;align-items:center;gap:8px;padding:0 10px 0 16px;border-bottom:1px solid var(--line)}
.chat-head .hash{color:var(--faint)}
.chat-head .t{font:800 17px var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.chat-head .topic{color:var(--muted);font-size:13px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:1px solid var(--line);padding-left:10px}
.chat-head .conn{font-size:12px;font-weight:600;color:var(--st-idle)}
.menu-btn{display:none!important}
.textview{flex:1;display:flex;flex-direction:column;min-height:0}
.feed{flex:1;overflow-y:auto;padding:16px 0 8px;min-height:0}
.intro{padding:24px 20px 12px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.intro .big{width:60px;height:60px;border-radius:50%;background:var(--raise);display:grid;place-items:center;color:var(--muted)}
.intro .big .ic{width:30px;height:30px}
.intro h3{margin:6px 0 0;font:800 28px/1.1 var(--f-display);letter-spacing:-.02em;text-wrap:balance}
.intro p{margin:0;color:var(--muted);max-width:60ch}
.older{margin:8px 20px;align-self:center}
.day{display:flex;align-items:center;gap:12px;margin:18px 20px 6px;font:600 12px var(--f-body);color:var(--faint)}
.day::before,.day::after{content:"";height:1px;flex:1;background:var(--line)}
.msg{display:grid;grid-template-columns:var(--av,40px) minmax(0,1fr);column-gap:14px;padding:var(--msg-pad,3px) 20px;position:relative;--ring:var(--main-bg)}
.msg.head{margin-top:var(--msg-gap,12px)}
.msg>.pfp{width:var(--av,40px)!important;height:var(--av,40px)!important}
.msg:hover{background:var(--hover)}
.msg .pfp{margin-top:2px}
.msg .tm-side{font:400 10.5px var(--f-mono);color:var(--faint);opacity:0;text-align:right;padding-top:4px;font-variant-numeric:tabular-nums}
.msg:hover .tm-side{opacity:1}
.meta{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-width:0}
.meta time{font:400 11.5px var(--f-mono);color:var(--faint);font-variant-numeric:tabular-nums}
.body{overflow-wrap:anywhere;white-space:pre-wrap}
.body code{font:.87em var(--f-mono);background:var(--raise);padding:1px 5px;border-radius:5px}
.body pre{font:.87em/1.5 var(--f-mono);background:var(--raise);border:1px solid var(--line);padding:10px 12px;border-radius:var(--r-sm);margin:4px 0;overflow-x:auto;white-space:pre}
.body a{color:var(--accent)}
.edited{font-size:11px;color:var(--faint);margin-left:4px}
.reacts{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.rx{border:1px solid var(--line);background:var(--raise);border-radius:var(--r-sm);padding:2px 7px;display:inline-flex;gap:5px;align-items:center;color:var(--muted)}
.rx .ic{width:15px;height:15px}
.rx b{font:600 12px var(--f-mono)}
.rx.mine{border-color:var(--accent);background:var(--accent-soft);color:var(--fg)}
.tools{position:absolute;right:16px;top:-16px;display:none;border-radius:var(--r-md);padding:2px;gap:1px;z-index:3}
.msg:hover .tools,.msg:focus-within .tools{display:flex}
.tools .icon-btn{width:30px;height:28px}
.tools .del:hover{color:var(--danger)}
.edit-box{display:flex;flex-direction:column;gap:6px}
.edit-box textarea{width:100%;background:var(--field);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px;resize:vertical}
.edit-box small{color:var(--faint)}
.empty-feed{padding:6px 20px;color:var(--faint)}
.composer{flex:none;padding:0 16px 6px}
.cbox{display:flex;align-items:flex-end;gap:8px;background:var(--field);border:1px solid var(--line);border-radius:var(--r-md);padding:6px 6px 6px 14px}
.cbox:focus-within{border-color:var(--accent)}
.cbox textarea{flex:1;border:0;background:transparent;resize:none;max-height:200px;padding:6px 0;outline:none}
.send{border:0;background:var(--accent-fill);color:var(--accent-ink);border-radius:var(--r-btn);width:38px;height:34px;display:grid;place-items:center;padding:0}
.send:disabled{opacity:.4;cursor:default}
.typing{height:20px;font-size:12px;color:var(--muted);padding:2px 18px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.typing b{font-weight:600}
.dots{display:inline-flex;gap:3px;margin-right:6px;vertical-align:middle}
.dots i{width:5px;height:5px;border-radius:50%;background:var(--muted);animation:bob 1.2s infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes bob{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-3px);opacity:1}}
.notice{font-size:13px;color:var(--muted);padding:10px 14px;border:1px dashed var(--line);border-radius:var(--r-md);margin:4px}

/* ---------- Membres ---------- */
.mem{display:flex;align-items:center;gap:10px;padding:5px 8px;border-radius:var(--r-sm);border:0;background:transparent;width:100%;text-align:left}
.mem:hover{background:var(--hover)}
.mem .txt{min-width:0;display:flex;flex-direction:column}
.mem .txt small{color:var(--faint);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;gap:4px;align-items:center}
.mem .txt small .ic{width:12px;height:12px}
.mem.off .pfp,.mem.off .uname{opacity:.5}

/* ---------- Scène vocale ---------- */
.stage{flex:1;min-height:0;background:var(--stage-bg);color:var(--fg);display:flex;flex-direction:column;--ring:var(--tile-bg)}
.stage-grid{flex:1;min-height:0;padding:16px;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));overflow:auto;align-content:center}
.stage.focus .stage-grid{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 124px;align-content:stretch}
.stage.focus .stage-grid>.tile{aspect-ratio:auto}
.stage.focus .strip{display:flex;gap:10px;overflow-x:auto}
.strip .tile{height:100%;flex:none}
.tile{position:relative;background:var(--tile-bg);border-radius:var(--r);overflow:hidden;display:grid;place-items:center;min-height:0;border:2px solid transparent;cursor:pointer;aspect-ratio:16/9;max-height:100%;box-shadow:var(--highlight)}
.tile.speaking{border-color:var(--st-online)}
.tile video{width:100%;height:100%;object-fit:contain;background:#000;display:block}
.tile video.mirror{transform:scaleX(-1)}
.tile.cam video{object-fit:cover}
.tile .tag{position:absolute;left:10px;bottom:10px;display:flex;align-items:center;gap:6px;background:rgb(0 0 0 / .55);color:#fff;padding:4px 9px;border-radius:var(--r-sm);font-size:13px;font-weight:600;max-width:calc(100% - 20px);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.tile .tag span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .tag .ic{width:14px;height:14px}
.tile .badge{position:absolute;right:10px;top:10px;display:flex;gap:6px;align-items:center}
.tile .info{font:600 11px var(--f-mono);background:rgb(0 0 0 / .55);color:#fff;padding:3px 7px;border-radius:6px}
.tile .fs{position:absolute;right:10px;bottom:10px;background:rgb(0 0 0 / .55);color:#fff;opacity:0}
.tile:hover .fs,.tile .fs:focus-visible{opacity:1}
.tile .fs:hover{background:rgb(0 0 0 / .75);color:#fff}
.tile .waiting{font-size:13px;color:var(--muted)}
.stage-bar{flex:none;display:flex;justify-content:center;gap:10px;padding:12px 16px 18px;flex-wrap:wrap}
.sbtn{width:52px;height:52px;border-radius:50%;border:1px solid var(--panel-border);background:var(--raise);color:var(--fg);display:grid;place-items:center;box-shadow:var(--highlight);transition:background .15s,transform .1s}
.sbtn .ic{width:22px;height:22px}
.sbtn:hover{background:var(--active)}
.sbtn:active{transform:scale(.96)}
.sbtn.off{background:var(--danger-soft);color:var(--danger)}
.sbtn.on{background:var(--accent-fill);color:var(--accent-ink)}
.sbtn.hang{background:var(--danger);color:#fff;width:64px;border-radius:26px}
.sbtn.hang.stop{width:auto;padding:0 18px 0 16px;display:flex;gap:8px;font-weight:700;font-size:14px}
.sbtn.hang.stop::after{content:"Arrêter le stream"}
.stage-empty{flex:1;display:grid;place-items:center;padding:24px;text-align:center}
.stage-empty .card{max-width:420px;display:flex;flex-direction:column;gap:14px;align-items:center}
.stage-empty h3{margin:0;font:800 30px/1.1 var(--f-display);letter-spacing:-.02em}
.stage-empty p{margin:0;color:var(--muted)}
.who-here{display:flex}
.who-here .pfp{margin-left:-8px;--ring:var(--stage-bg)}
.who-here .pfp:first-child{margin-left:0}

/* ---------- Fenêtres flottantes : carte de profil, menu de statut ---------- */
.pop{position:fixed;z-index:70;width:320px;max-width:calc(100vw - 24px)}
.pcard{background:linear-gradient(160deg,var(--ta),var(--tb));padding:3px;border-radius:calc(var(--r-lg) + 2px);box-shadow:var(--shadow)}
.pcard-in{background:color-mix(in srgb,var(--card) 92%,var(--ta));border-radius:var(--r-lg);overflow:hidden;--ring:color-mix(in srgb,var(--card) 92%,var(--ta));-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
[data-skin="glass"] .pcard-in,[data-skin="gradient"] .pcard-in{background:color-mix(in srgb,var(--card) 80%,var(--ta));--ring:var(--card)}
.pbanner{height:110px;background:linear-gradient(135deg,var(--ta),var(--tb))}
.pbanner img{width:100%;height:100%;object-fit:cover;display:block}
.pcard-av{margin:-44px 0 0 16px;border:6px solid var(--ring);box-sizing:content-box}
.pbody{padding:8px 16px 16px;display:flex;flex-direction:column;gap:10px}
.pname{font:800 22px/1.15 var(--f-display);letter-spacing:-.01em}
.phandle{color:var(--muted);font-size:13px;margin-top:-6px}
.pstatus{display:flex;align-items:center;gap:8px;font-size:13px;background:var(--raise);padding:7px 10px;border-radius:var(--r-sm);overflow-wrap:anywhere}
.pstatus .ic{width:16px;height:16px;color:var(--accent)}
.psect{font:700 11px var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.pbio{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px}
.pdiv{height:1px;background:var(--line)}
.pfoot{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px}
.pfoot .ic{width:15px;height:15px}
.uvol{display:flex;flex-direction:column;gap:4px}
.uvol label{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);font-weight:600}
.menu{position:fixed;z-index:75;width:290px;max-width:calc(100vw - 24px);border-radius:var(--r-lg);padding:8px;display:flex;flex-direction:column;gap:2px}
.menu-head{display:flex;align-items:center;gap:10px;padding:6px 8px 10px;border-bottom:1px solid var(--line);margin-bottom:4px;--ring:var(--card)}
.menu-head .txt{min-width:0;display:flex;flex-direction:column}
.menu-head small{color:var(--faint);font-size:12px}
.mi{display:flex;align-items:center;gap:10px;border:0;background:transparent;border-radius:var(--r-sm);padding:8px 10px;text-align:left;width:100%;color:var(--fg)}
.mi:hover{background:var(--hover)}
.mi[aria-checked="true"]{background:var(--active)}
.mi .dot{width:11px;height:11px;border-radius:50%;flex:none}
.mi .txt{flex:1;min-width:0;display:flex;flex-direction:column}
.mi small{color:var(--faint);font-size:12px}
.mi .ic{width:16px;height:16px;color:var(--muted)}
.mi .check{color:var(--accent)}
.menu-sep{height:1px;background:var(--line);margin:4px 0}
.cstatus{display:flex;flex-direction:column;gap:6px;padding:6px 4px 4px}
.cstatus .lbl{font:700 11px var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding:0 6px}
.cstatus .row{display:flex;gap:6px;align-items:center}
.cstatus input{flex:1;min-width:0;background:var(--field);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px}
.cstatus input:focus{outline:none;border-color:var(--accent)}
.mini-icons{display:flex;flex-wrap:wrap;gap:3px;padding:0 2px}
.mini-icons button{width:30px;height:30px;border:1px solid transparent;border-radius:var(--r-sm);background:transparent;display:grid;place-items:center;color:var(--muted);padding:0}
.mini-icons button .ic{width:16px;height:16px}
.mini-icons button:hover{background:var(--hover)}
.mini-icons button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--fg)}

/* ---------- Formulaires, modales ---------- */
.lede{margin:-6px 0 0;color:var(--muted)}
.btn{border:0;background:var(--accent-fill);color:var(--accent-ink);border-radius:var(--r-btn);padding:10px 16px;font-weight:700;display:inline-flex;align-items:center;gap:8px;transition:filter .15s}
.btn:hover{filter:brightness(1.06)}
.btn .ic{width:16px;height:16px}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--hover);filter:none}
.btn.danger{background:var(--danger);color:#fff}
.btn.sm{padding:7px 12px;font-size:13px}
.btn:disabled{opacity:.5;cursor:default}
[data-skin="win11"] .btn{font-weight:600}
.scrim{position:fixed;inset:0;background:var(--overlay);display:grid;place-items:center;padding:16px;z-index:80;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.modal{width:min(480px,100%);max-height:100%;overflow:auto;padding:22px;display:flex;flex-direction:column;gap:14px;border-radius:var(--r-lg)}
.modal h3{margin:0;font:800 22px var(--f-display);letter-spacing:-.01em}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld>span{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.fld input[type=text],.fld input[type=password],.fld textarea,.fld select,.cstatus input,#pf-status{background:var(--field);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px;width:100%}
.fld textarea{resize:vertical;min-height:84px}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-color:var(--accent)}
.fld small{color:var(--faint);font-size:12px}
.fld small.bad{color:var(--danger)}.fld small.good{color:var(--st-online)}
.handle-in{display:flex;align-items:center;background:var(--field);border:1px solid var(--line);border-radius:var(--r-sm);padding-left:11px}
.handle-in:focus-within{border-color:var(--accent)}
.handle-in b{color:var(--faint);font-weight:600}
.handle-in input[type=text]{border:0!important;background:transparent!important;padding-left:2px!important;outline:none}
.icon-grid{display:flex;flex-wrap:wrap;gap:6px}
.icon-grid button{width:40px;height:40px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--field);display:grid;place-items:center;color:var(--muted);padding:0}
.icon-grid button .ic{width:20px;height:20px}
.icon-grid button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--fg)}
.icon-grid img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.row{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.err{color:var(--danger);font-size:13px;margin:0;min-height:1em}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--inv-bg);color:var(--inv-fg);padding:9px 14px;border-radius:var(--r-md);font-size:13px;z-index:90;max-width:calc(100% - 32px);box-shadow:var(--shadow);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;align-self:flex-start;background:var(--field)}
.seg button{border:0;background:transparent;padding:7px 12px;font-size:13px;font-weight:600;color:var(--muted)}
.seg button:hover{color:var(--fg)}
.seg button[aria-pressed="true"]{background:var(--accent-fill);color:var(--accent-ink)}
[data-skin="glass"] .seg{border-radius:999px;padding:3px;gap:2px}[data-skin="glass"] .seg button{border-radius:999px}
.kind-pick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kind-pick button{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--field);border-radius:var(--r-md);padding:12px;text-align:left}
.kind-pick button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.kind-pick small{display:block;color:var(--faint);font-size:12px}
.source-row{display:flex;align-items:center;gap:10px;justify-content:space-between;background:var(--field);border:1px solid var(--line);border-radius:var(--r-md);padding:8px 8px 8px 12px}
.source-lab{display:flex;align-items:center;gap:8px;min-width:0}
.source-lab b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.source-lab .ic{color:var(--accent)}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:4px 0}
.toggle .txt{min-width:0}
.toggle .txt small{display:block;color:var(--faint);font-size:12.5px}
.switch{appearance:none;width:42px;height:24px;border-radius:12px;background:var(--line);position:relative;flex:none;cursor:pointer;transition:background .15s;margin:0}
.switch::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 3px rgb(0 0 0 / .3)}
.switch:checked{background:var(--accent-fill)}.switch:checked::after{transform:translateX(18px)}
[data-skin="minimal"][data-mode="dark"] .switch:checked::after{background:#0C0C0C}
input[type=range]{width:100%;accent-color:var(--accent)}
input[type=color]{width:40px;height:30px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--field);padding:2px;cursor:pointer}
select{color:var(--fg)}

/* ---------- Paramètres : menu à gauche, contenu centré, bouton fermer collé en haut à droite ---------- */
.settings{position:fixed;inset:0;z-index:60;background:var(--bg);display:grid;grid-template-columns:minmax(250px,300px) minmax(0,1fr);padding:var(--app-pad);gap:var(--app-gap)}
.set-nav{background:var(--side-bg);display:flex;justify-content:center;overflow-y:auto;border-radius:var(--panel-r);border:1px solid var(--panel-border);box-shadow:var(--highlight);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.set-nav-in{width:240px;padding:40px 10px 24px;display:flex;flex-direction:column;gap:2px}
.set-nav h4{margin:14px 10px 6px;font:700 11px var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.set-nav h4:first-child{margin-top:0}
.set-nav button{display:flex;align-items:center;gap:10px;border:0;background:transparent;border-radius:var(--r-sm);padding:var(--row-pad) 10px;text-align:left;color:var(--muted);font-weight:600;position:relative}
.set-nav button .ic{width:17px;height:17px}
.set-nav button:hover{background:var(--hover);color:var(--fg)}
.set-nav button[aria-current="true"]{background:var(--active);color:var(--fg)}
[data-skin="win11"] .set-nav button[aria-current="true"]::before,[data-skin="simple"] .set-nav button[aria-current="true"]::before,[data-skin="gradient"] .set-nav button[aria-current="true"]::before{content:"";position:absolute;left:0;top:25%;bottom:25%;width:3px;border-radius:3px;background:var(--accent-fill)}
.set-nav .danger{color:var(--danger)}
.set-body{overflow-y:auto;min-width:0;background:var(--main-bg);border-radius:var(--panel-r);border:1px solid var(--panel-border);box-shadow:var(--highlight);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);padding:0 40px 120px}
.set-inner{max-width:820px;margin-inline:auto;width:100%;display:flex;flex-direction:column;gap:24px;margin-top:-4px}
.set-inner h2{margin:0;font:800 28px var(--f-display);letter-spacing:-.02em}
.set-close{position:sticky;top:0;z-index:5;display:flex;flex-direction:column;align-items:center;gap:4px;width:max-content;margin:0 -16px 0 auto;padding:24px 0 8px;transform:translateY(0)}
.set-close button{width:40px;height:40px;border-radius:50%;border:2px solid var(--faint);background:var(--card);color:var(--muted);display:grid;place-items:center;box-shadow:var(--highlight)}
.set-close button:hover{color:var(--fg);border-color:var(--fg)}
.set-close small{color:var(--faint);font:600 11px var(--f-body);letter-spacing:.04em}
.set-close+.set-inner{margin-top:-64px}
.card-sec{display:flex;flex-direction:column;gap:14px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.card-sec:last-child{border-bottom:0}
.card-sec h3{margin:0;font:700 13px var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.prof-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start}
.prof-layout .preview{position:sticky;top:0}
.media-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.thumb{width:64px;height:64px;border-radius:50%;object-fit:cover;background:var(--raise);flex:none}
.thumb.wide{width:140px;height:56px;border-radius:var(--r-sm)}
.swatches{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sw{width:44px;height:28px;border-radius:var(--r-sm);border:2px solid var(--line);padding:0}
.sw[aria-pressed="true"]{border-color:var(--fg)}
.colors{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.colors label{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted)}
.choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.choice{border:1px solid var(--line);background:var(--field);border-radius:var(--r-md);padding:12px 8px 10px;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:13px;font-weight:600;--ring:var(--field)}
.choice[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.pres{display:flex;flex-direction:column;gap:4px}
.pres button{display:flex;align-items:center;gap:10px;border:1px solid transparent;background:transparent;border-radius:var(--r-sm);padding:8px 10px;text-align:left}
.pres button:hover{background:var(--hover)}
.pres button[aria-pressed="true"]{border-color:var(--line);background:var(--active)}
.pres .dot{width:12px;height:12px;border-radius:50%;flex:none}
.pres small{display:block;color:var(--faint);font-size:12px}
.savebar{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);width:min(700px,calc(100% - 32px));background:var(--inv-bg);color:var(--inv-fg);border-radius:var(--r-md);padding:10px 12px 10px 18px;display:flex;align-items:center;gap:10px;z-index:65;box-shadow:var(--shadow);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.savebar span{flex:1}
.savebar .btn.ghost{color:var(--inv-fg);border-color:color-mix(in srgb,var(--inv-fg) 30%,transparent)}
.meter{position:relative;height:10px;border-radius:5px;background:var(--raise);overflow:hidden}
.meter .lvl{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,var(--st-online),var(--st-idle) 75%,var(--st-dnd));transition:width .06s linear}
.meter .thr{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--fg)}
.meter-row{display:flex;flex-direction:column;gap:6px}
.meter-row .lbl{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.kbd{font:600 13px var(--f-mono);background:var(--raise);border:1px solid var(--line);border-bottom-width:3px;border-radius:var(--r-sm);padding:4px 10px}
.cam-preview{width:100%;max-width:420px;aspect-ratio:16/9;border-radius:var(--r);background:#000;object-fit:cover;transform:scaleX(-1)}
.hint{font-size:13px;color:var(--muted);background:var(--field);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px;margin:0}

/* ---------- Apparence ---------- */
.skins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.skin{border:2px solid var(--line);background:var(--field);border-radius:var(--r-md);padding:8px;display:flex;flex-direction:column;gap:8px;text-align:left;color:var(--fg)}
.skin[aria-pressed="true"]{border-color:var(--accent)}
.skin b{padding:0 4px}
.skin small{display:block;padding:0 4px 2px;color:var(--faint);font-size:12px}
.skin .mini{height:92px;border-radius:calc(var(--r-md) - 3px);overflow:hidden;display:grid;grid-template-columns:14% 28% 1fr;gap:var(--g,0);padding:var(--g,0);background:var(--m-bg)}
.skin .mini i{display:block;border-radius:var(--mr,0);background:var(--m-c1)}
.skin .mini i:nth-child(2){background:var(--m-c2)}
.skin .mini i:nth-child(3){background:var(--m-c3);position:relative}
.skin .mini i:nth-child(3)::after{content:"";position:absolute;left:10%;right:30%;bottom:14%;height:14%;border-radius:999px;background:var(--m-acc)}
.skin .mini i:nth-child(3)::before{content:"";position:absolute;left:10%;right:45%;top:16%;height:10%;border-radius:4px;background:var(--m-line)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){.app,.app.no-members{grid-template-columns:72px 236px minmax(0,1fr)}.members{display:none}.app.show-members .members{display:block;position:absolute;right:var(--app-pad);top:calc(52px + var(--app-pad));bottom:var(--app-pad);width:248px;z-index:20;box-shadow:var(--shadow)}
  .settings{grid-template-columns:220px minmax(0,1fr)}.set-nav-in{width:100%}.set-body{padding:0 24px 120px}.skins{grid-template-columns:repeat(2,minmax(0,1fr))}.prof-layout{grid-template-columns:1fr}.prof-layout .preview{position:static;order:-1;max-width:340px}}
@media (max-width:720px){
  .app,.app.no-members,.app.voice-view{grid-template-columns:minmax(0,1fr);padding:0;gap:0}
  .chat{border-radius:0;border:0}
  .rail,.side{position:absolute;top:0;bottom:0;z-index:30;transform:translateX(calc(-100% - 90px));transition:transform .2s;border-radius:0;background:var(--card)}
  .rail{left:0;width:72px}.side{left:72px;width:min(270px,calc(100% - 72px))}
  .app.drawer .rail,.app.drawer .side{transform:none}
  .app.drawer::after{content:"";position:absolute;inset:0;background:var(--overlay);z-index:25}
  .menu-btn{display:grid!important}
  .chat-head .topic{display:none}
  .msg{padding:3px 12px;column-gap:10px}.composer{padding:0 8px 6px}
  .pop,.menu{left:12px!important;right:12px;top:auto!important;bottom:12px;width:auto}
  .settings{grid-template-columns:1fr;grid-template-rows:auto 1fr;padding:0;gap:0}
  .set-nav,.set-body{border-radius:0;border:0}
  .set-nav{justify-content:stretch}.set-nav-in{flex-direction:row;overflow-x:auto;padding:8px 56px 8px 8px;width:100%}.set-nav h4{display:none}.set-nav button{white-space:nowrap}
  .set-body{padding:0 16px 120px}.set-close{position:fixed;right:10px;top:6px;padding:0;margin:0;z-index:70}.set-close small{display:none}.set-close+.set-inner{margin-top:20px}.skins,.lay,.lay.two-col{grid-template-columns:1fr}
  .two{grid-template-columns:1fr}
  .stage-grid{grid-template-columns:1fr}
  .stage-bar{gap:8px;padding-inline:8px}.sbtn{width:46px;height:46px}.sbtn.hang{width:56px}
}

/* ================================================================== */
/* Disposition : densité                                               */
/* ================================================================== */
[data-density="compact"]{--fs:13.5px;--row-pad:3px;--av:28px;--msg-pad:1px;--msg-gap:6px;--head-h:44px}
[data-density="compact"] .rail{gap:6px;padding:8px 0}
[data-density="compact"] .srv{width:40px;height:40px}
[data-density="compact"] .app{grid-template-columns:62px 220px minmax(0,1fr) 220px}
[data-density="compact"] .app.no-members,[data-density="compact"] .app.voice-view{grid-template-columns:62px 220px minmax(0,1fr)}
[data-density="compact"] .chat-head,[data-density="compact"] .side-head{height:44px}
[data-density="compact"] .intro{padding:12px 20px 6px}[data-density="compact"] .intro .big{width:44px;height:44px}[data-density="compact"] .intro h3{font-size:22px}
[data-density="compact"] .feed{padding-top:8px}
[data-density="compact"] .mem{padding:3px 8px}
[data-density="compact"] .sect{padding:6px 8px 2px}
[data-density="compact"] .sbtn{width:44px;height:44px}[data-density="compact"] .sbtn.hang{width:54px}
[data-density="compact"] .stage-grid{gap:8px;padding:10px}
[data-density="airy"]{--fs:16px;--row-pad:10px;--av:46px;--msg-pad:6px;--msg-gap:22px;line-height:1.6}
[data-density="airy"] body{line-height:1.6}
[data-density="airy"] .rail{gap:12px;padding:16px 0}
[data-density="airy"] .srv{width:50px;height:50px}
[data-density="airy"] .app{grid-template-columns:80px 272px minmax(0,1fr) 272px}
[data-density="airy"] .app.no-members,[data-density="airy"] .app.voice-view{grid-template-columns:80px 272px minmax(0,1fr)}
[data-density="airy"] .chat-head,[data-density="airy"] .side-head{height:60px}
[data-density="airy"] .chlist{padding:14px 10px;gap:3px}
[data-density="airy"] .msg{padding-inline:32px;column-gap:18px}
[data-density="airy"] .feed{padding-top:28px}
[data-density="airy"] .composer{padding:4px 28px 14px}
[data-density="airy"] .cbox{padding:10px 10px 10px 18px}
[data-density="airy"] .mem{padding:9px 10px}
[data-density="airy"] .stage-grid{gap:18px;padding:24px}

/* ================================================================== */
/* Disposition : messages en bulles                                    */
/* ================================================================== */
[data-chat="bubbles"] .msg{display:flex;align-items:flex-end;gap:10px;padding:1px 20px;column-gap:0}
[data-chat="bubbles"] .msg:hover{background:transparent}
[data-chat="bubbles"] .msg.head{margin-top:calc(var(--msg-gap,12px) - 2px)}
[data-chat="bubbles"] .msg>.pfp{margin:0 0 2px;align-self:flex-start;margin-top:18px}
[data-chat="bubbles"] .msg .tm-side{width:var(--av,40px);flex:none;visibility:hidden}
[data-chat="bubbles"] .msg>div:not(.tools){max-width:min(72%,640px);display:flex;flex-direction:column;align-items:flex-start;gap:2px}
[data-chat="bubbles"] .meta{padding:0 12px}
[data-chat="bubbles"] .meta .uname{font-size:.85em}
[data-chat="bubbles"] .body{background:linear-gradient(135deg,var(--ba,var(--raise)),var(--bb,var(--raise)));color:var(--bt,var(--fg));padding:7px 13px;border-radius:18px;border-top-left-radius:6px;max-width:100%;box-shadow:var(--highlight)}
[data-chat="bubbles"] .msg:not(.head) .body{border-top-left-radius:6px}
[data-chat="bubbles"] .msg.head .body{border-top-left-radius:18px;border-bottom-left-radius:6px}
[data-chat="bubbles"] .reacts{padding:0 6px}
[data-chat="bubbles"] .msg.mine{flex-direction:row-reverse}
[data-chat="bubbles"] .msg.mine>.pfp,[data-chat="bubbles"] .msg.mine .tm-side,[data-chat="bubbles"] .msg.mine .meta .uname{display:none}
[data-chat="bubbles"] .msg.mine>div:not(.tools){align-items:flex-end}
[data-chat="bubbles"] .msg.mine .body{border-radius:18px;border-top-right-radius:6px}
[data-chat="bubbles"] .msg.mine.head .body{border-top-right-radius:18px;border-bottom-right-radius:6px}
[data-chat="bubbles"] .body a{color:inherit;text-decoration:underline}
[data-chat="bubbles"] .body code,[data-chat="bubbles"] .body pre{background:rgb(0 0 0 / .16);border-color:transparent;color:inherit}
[data-chat="bubbles"] .edited{color:inherit;opacity:.75}
[data-chat="bubbles"] .msg.mine .tools{right:auto;left:16px}
[data-chat="bubbles"] .edit-box{min-width:min(420px,60vw)}

/* Aperçus de disposition dans Apparence */
.lay{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.lay.two-col{grid-template-columns:repeat(2,minmax(0,1fr))}
.lay-card{border:2px solid var(--line);background:var(--field);border-radius:var(--r-md);padding:8px;display:flex;flex-direction:column;gap:8px;text-align:left;color:var(--fg)}
.lay-card[aria-pressed="true"]{border-color:var(--accent)}
.lay-card b{padding:0 4px}.lay-card small{display:block;padding:0 4px 2px;color:var(--faint);font-size:12px}
.lay-prev{height:96px;border-radius:calc(var(--r-md) - 3px);background:var(--main-bg);border:1px solid var(--line);padding:10px;display:flex;flex-direction:column;gap:var(--lg,8px);overflow:hidden}
.lay-row{display:flex;align-items:center;gap:7px}
.lay-row i{display:block;flex:none;width:var(--la,14px);height:var(--la,14px);border-radius:50%;background:var(--accent)}
.lay-row s{display:block;height:6px;border-radius:3px;background:var(--line);text-decoration:none}
.lay-row.right{justify-content:flex-end}
.lay-bub{display:block;height:16px;border-radius:9px;background:linear-gradient(90deg,#E8590C,#C2255C)}
.lay-bub.me{background:linear-gradient(90deg,#1E8A6F,#3B5BDB)}
@media (max-width:720px){.lay{grid-template-columns:1fr}.lay.two-col{grid-template-columns:1fr}}

/* ================================================================== */
/* Interface en bulles : panneaux flottants, arrondis, contrôles ronds */
/* ================================================================== */
[data-ui="bubbles"]{--app-pad:12px;--app-gap:12px;--panel-r:24px;--r-btn:999px;--r-md:16px;--r-lg:24px}
[data-ui="bubbles"] .rail,[data-ui="bubbles"] .side,[data-ui="bubbles"] .chat,[data-ui="bubbles"] .members,[data-ui="bubbles"] .set-nav,[data-ui="bubbles"] .set-body{border-color:var(--line);box-shadow:var(--highlight),0 6px 24px rgb(0 0 0 / .08)}
[data-ui="bubbles"][data-mode="dark"] .rail,[data-ui="bubbles"][data-mode="dark"] .side,[data-ui="bubbles"][data-mode="dark"] .chat,[data-ui="bubbles"][data-mode="dark"] .members{box-shadow:var(--highlight),0 8px 28px rgb(0 0 0 / .35)}
[data-ui="bubbles"][data-skin="glass"] .rail,[data-ui="bubbles"][data-skin="glass"] .side,[data-ui="bubbles"][data-skin="glass"] .chat,[data-ui="bubbles"][data-skin="glass"] .members,
[data-ui="bubbles"][data-skin="gradient"] .rail,[data-ui="bubbles"][data-skin="gradient"] .side,[data-ui="bubbles"][data-skin="gradient"] .chat,[data-ui="bubbles"][data-skin="gradient"] .members{border-color:var(--panel-border)}
[data-ui="bubbles"][data-skin="standard"] .rail,[data-ui="bubbles"][data-skin="simple"] .rail{background:var(--side-bg)}
[data-ui="bubbles"][data-skin="standard"] .app,[data-ui="bubbles"][data-skin="simple"] .app{background:var(--bg)}
[data-ui="bubbles"][data-skin="win11"] .rail,[data-ui="bubbles"][data-skin="win11"] .side{background:var(--card)}
[data-ui="bubbles"][data-skin="minimal"] body,[data-ui="bubbles"][data-skin="minimal"] .settings{background:var(--raise)}
[data-ui="bubbles"] .srv{border-radius:50%}
[data-ui="bubbles"] .srv[aria-current="true"]::before{display:none}
[data-ui="bubbles"] .srv[aria-current="true"]{box-shadow:0 0 0 3px var(--accent-soft)}
[data-ui="bubbles"] .ch,[data-ui="bubbles"] .mem,[data-ui="bubbles"] .vm,[data-ui="bubbles"] .set-nav button,[data-ui="bubbles"] .mi{border-radius:999px;padding-inline:12px}
[data-ui="bubbles"] .ch[aria-current="true"]::before,[data-ui="bubbles"] .set-nav button[aria-current="true"]::before{display:none}
[data-ui="bubbles"] .cbox{border-radius:999px;padding-left:18px}
[data-ui="bubbles"] .send{border-radius:50%;width:36px;height:36px}
[data-ui="bubbles"] .seg{border-radius:999px;padding:3px;gap:2px}[data-ui="bubbles"] .seg button{border-radius:999px}
[data-ui="bubbles"] .icon-btn{border-radius:50%}
[data-ui="bubbles"] .side-head,[data-ui="bubbles"] .chat-head{border-bottom-color:transparent}
[data-ui="bubbles"] .chat-head{margin:8px 8px 0;height:46px;border-radius:999px;background:var(--raise)}
[data-ui="bubbles"] .side-head{margin:8px 8px 0;height:46px;border-radius:999px;background:var(--raise)}
[data-ui="bubbles"] .vpanel,[data-ui="bubbles"] .me-bar{border-top-color:transparent;margin:0 8px 8px;border-radius:20px;background:var(--raise)}
[data-ui="bubbles"] .vpanel{margin-bottom:6px}
[data-ui="bubbles"] .vp-actions button{border-radius:999px}
[data-ui="bubbles"] .tile{border-radius:22px}
[data-ui="bubbles"] .modal,[data-ui="bubbles"] .menu,[data-ui="bubbles"] .auth-card{border-radius:28px}
[data-ui="bubbles"] .fld input[type=text],[data-ui="bubbles"] .fld input[type=password],[data-ui="bubbles"] .fld select,[data-ui="bubbles"] .handle-in,[data-ui="bubbles"] .cstatus input{border-radius:999px;padding-inline:16px}
[data-ui="bubbles"] .handle-in input[type=text]{padding-inline:2px!important}
[data-ui="bubbles"] .toast,[data-ui="bubbles"] .savebar{border-radius:999px}
[data-ui="bubbles"] .notice,[data-ui="bubbles"] .hint,[data-ui="bubbles"] .source-row{border-radius:18px}
@media (max-width:720px){[data-ui="bubbles"] .chat{border-radius:0}[data-ui="bubbles"] .chat-head{margin:6px 6px 0}}
.ui-prev{height:96px;border-radius:calc(var(--r-md) - 3px);background:var(--bg);display:grid;grid-template-columns:12% 28% 1fr;overflow:hidden}
.ui-prev i{display:block;background:var(--side-bg)}
.ui-prev i:nth-child(1){background:var(--rail-bg)}
.ui-prev i:nth-child(3){background:var(--main-bg)}
.ui-prev.float{gap:5px;padding:5px}
.ui-prev.float i{border-radius:10px;background:var(--main-bg);box-shadow:0 2px 6px rgb(0 0 0 / .1)}
.ui-prev.float i:nth-child(2){background:var(--side-bg)}
.bub-sample{display:flex;flex-direction:column;gap:6px;align-items:flex-end;background:var(--main-bg);border:1px solid var(--line);border-radius:var(--r-md);padding:12px}
.bub-sample span{padding:7px 13px;border-radius:18px;border-top-right-radius:6px;max-width:80%}

.grad-pick{display:flex;flex-direction:column;gap:12px;padding:14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--field)}
.grad-pick .bar{height:38px;border-radius:var(--r-sm);background:linear-gradient(135deg,var(--g1),var(--g2) 60%,var(--g3))}
.grad-presets{display:flex;flex-wrap:wrap;gap:8px}
.grad-presets button{width:52px;height:30px;border-radius:var(--r-sm);border:2px solid var(--line);padding:0}
.grad-presets button[aria-pressed="true"]{border-color:var(--fg)}

/* ================================================================== */
/* Serveurs : en-tête avec bannière, menu, rôles, paramètres           */
/* ================================================================== */
.side-head{position:relative}
.srv-title{display:flex;align-items:center;gap:8px;border:0;background:transparent;padding:0;min-width:0;flex:1;height:100%;text-align:left;color:inherit}
.srv-title h2{margin:0;font:800 17px/1.1 var(--f-display);letter-spacing:-.01em;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srv-title .chev{width:16px;height:16px;transform:rotate(90deg);opacity:.7}
.srv-title:hover .chev{opacity:1}
.side-head.has-banner{height:132px;align-items:flex-end;padding-bottom:12px;background:var(--banner) center/cover;border-bottom:0;color:#fff;margin:0;border-radius:0}
.side-head.has-banner::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(0 0 0 / 0) 35%,rgb(0 0 0 / .62));pointer-events:none}
.side-head.has-banner .srv-title{position:relative;height:auto;text-shadow:0 1px 6px rgb(0 0 0 / .5)}
[data-ui="bubbles"] .side-head.has-banner{margin:8px 8px 0;border-radius:18px;overflow:hidden;height:124px}
.srv-menu{padding:8px}
.srv-menu-top{padding:6px 10px 8px;display:flex;flex-direction:column;gap:6px}
.srv-menu-top p{margin:0;font-size:13.5px;white-space:pre-wrap;overflow-wrap:anywhere}
.srv-menu-top small{color:var(--faint);font-size:12px}
.menu-note{margin:6px 10px;font-size:12.5px;color:var(--faint)}
.mi.danger,.mi.danger .ic{color:var(--danger)}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--raise);border:1px solid var(--line)}
.chip i{width:9px;height:9px;border-radius:50%;flex:none}
.chip .ic{width:13px;height:13px}
.chip.owner{color:#B7791F;border-color:color-mix(in srgb,#EAB308 45%,transparent);background:color-mix(in srgb,#EAB308 14%,transparent)}
.chip.add{cursor:pointer;color:var(--muted);border-style:dashed;background:transparent}
.chip.add:hover{color:var(--fg);border-color:var(--accent)}
.chip-x{border:0;background:transparent;padding:0;margin:0 -3px 0 0;display:grid;place-items:center;color:var(--faint);width:16px;height:16px;border-radius:50%}
.chip-x:hover{color:var(--danger);background:var(--danger-soft)}
.chip-x .ic{width:11px;height:11px}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.srv-preview{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.srv-preview-banner{height:120px}
.srv-preview-icon{position:absolute;left:16px;top:86px;width:64px;height:64px;border-radius:22px;background:var(--raise);border:4px solid var(--card);display:grid;place-items:center;overflow:hidden;font:800 20px var(--f-display);color:var(--fg)}
.srv-preview-icon img{width:100%;height:100%;object-fit:cover}
.srv-preview-icon .ic{width:28px;height:28px}
.srv-preview-info{padding:42px 16px 16px;display:flex;flex-direction:column;gap:6px}
.srv-preview-info b{font:800 20px var(--f-display)}
.srv-preview-info p{margin:0;color:var(--muted);font-size:13.5px;white-space:pre-wrap;overflow-wrap:anywhere}
.role-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:24px;align-items:start}
.role-list{display:flex;flex-direction:column;gap:2px;position:sticky;top:0}
.role-row{display:flex;align-items:center;gap:10px;border:0;background:transparent;border-radius:var(--r-sm);padding:var(--row-pad) 10px;text-align:left;color:var(--fg);width:100%}
.role-row:hover{background:var(--hover)}
.role-row[aria-current="true"]{background:var(--active)}
.role-row i{width:12px;height:12px;border-radius:50%;flex:none}
.role-row span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.role-row small{font:600 11px var(--f-mono);color:var(--faint)}
.role-row .ic{width:13px;height:13px;color:var(--faint)}
.role-edit{display:flex;flex-direction:column;gap:20px;min-width:0}
.role-top{display:flex;flex-direction:column;gap:16px}
.perm-group{display:flex;flex-direction:column;gap:6px;padding-top:16px;border-top:1px solid var(--line)}
.perm-group h3{margin:0 0 4px;font:700 12px var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.role-acts{display:flex;gap:8px;align-items:center;flex-wrap:nowrap;padding:12px 0;border-top:1px solid var(--line);position:sticky;bottom:0;background:var(--main-bg);z-index:2;box-shadow:0 -12px 16px -12px rgb(0 0 0 / .12)}
.role-acts .btn{white-space:nowrap}
@media (max-width:1100px){.role-acts{flex-wrap:wrap}}
.role-acts .del{color:var(--danger)}
.dot-sw{width:26px;height:26px;border-radius:50%;border:2px solid transparent;padding:0;box-shadow:inset 0 0 0 1px rgb(0 0 0 / .12)}
.dot-sw.none{background:repeating-linear-gradient(45deg,var(--raise) 0 4px,var(--field) 4px 8px)}
.dot-sw[aria-pressed="true"]{border-color:var(--fg)}
.toggle .switch:disabled{opacity:.45;cursor:not-allowed}
input.search{background:var(--field);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 12px;width:100%;max-width:360px}
input.search:focus{outline:none;border-color:var(--accent)}
[data-ui="bubbles"] input.search{border-radius:999px}
.mem-list{display:flex;flex-direction:column}
.member-row{display:grid;grid-template-columns:auto minmax(120px,220px) 1fr;align-items:center;gap:12px;padding:10px 6px;border-bottom:1px solid var(--line);--ring:var(--main-bg)}
.member-row .txt{display:flex;flex-direction:column;min-width:0}
.member-row .txt small{color:var(--faint);font-size:12px}
.chan-list{display:flex;flex-direction:column;gap:4px}
.chan-row{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--field)}
.chan-row>.ic{color:var(--faint)}
.chan-row .txt{flex:1;min-width:0;display:flex;flex-direction:column}
.chan-row .txt small{color:var(--faint);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chan-row .icon-btn:disabled{opacity:.35;cursor:default}
@media (max-width:900px){.role-layout{grid-template-columns:1fr}.role-list{position:static}.member-row{grid-template-columns:auto 1fr}.member-row .chips{grid-column:1/-1}}

.srv-thumb{width:72px;height:72px;border-radius:22px;background:var(--raise);border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;cursor:pointer;font:800 22px var(--f-display);color:var(--fg);flex:none}
.srv-thumb img{width:100%;height:100%;object-fit:cover}
.srv-thumb .ic{width:30px;height:30px}
.srv-thumb:hover{border-color:var(--accent)}
.sub-lbl{font-size:12px;font-weight:600;color:var(--muted);margin-top:6px}
.role-head{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.role-head i{width:14px;height:14px;border-radius:50%;flex:none}
.role-head b{font:800 20px var(--f-display);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.role-head .icon-btn:disabled{opacity:.35;cursor:default}
.settings .savebar{position:fixed}

body:has(.savebar) .toast{bottom:96px}
.savebar span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Comptes ---------- */
.auth{align-items:start;padding-block:max(16px,6vh)}
.auth-card .two{gap:12px}
.pw-in{display:flex;align-items:center;background:var(--field);border:1px solid var(--line);border-radius:var(--r-sm);padding-right:4px}
.pw-in:focus-within{border-color:var(--accent)}
.pw-in input{border:0!important;background:transparent!important;flex:1;min-width:0;outline:none;padding:9px 11px}
[data-ui="bubbles"] .pw-in{border-radius:999px;padding-left:6px}
.code-box{display:flex;flex-direction:column;gap:12px}
.code-box p{margin:0;color:var(--muted)}
.code-in{font:700 28px var(--f-mono)!important;letter-spacing:.5em;text-align:center;padding:14px 10px 14px 24px!important;background:var(--field);border:1px solid var(--line);border-radius:var(--r-md);width:100%}
.code-in:focus{outline:none;border-color:var(--accent)}
.auth-links{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.link-btn{border:0;background:transparent;padding:0;color:var(--accent);font-weight:600;font-size:13.5px;cursor:pointer;align-self:flex-start}
.link-btn:hover{text-decoration:underline}
.link-btn:disabled{color:var(--faint);cursor:default;text-decoration:none}
.auth input[type=date]{background:var(--field);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 11px;width:100%;min-height:40px}
.auth input[type=email],.auth input[type=tel]{background:var(--field);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px;width:100%}
.auth input:focus{outline:none;border-color:var(--accent)}
[data-ui="bubbles"] .auth input[type=email],[data-ui="bubbles"] .auth input[type=tel],[data-ui="bubbles"] .auth input[type=date]{border-radius:999px;padding-inline:16px}
.fld input[type=email],.fld input[type=tel]{background:var(--field);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px;width:100%}
.hint.warn{border-color:color-mix(in srgb,var(--st-idle) 50%,transparent);background:color-mix(in srgb,var(--st-idle) 12%,transparent);color:var(--fg)}
.acct-head{display:flex;align-items:center;gap:16px;padding:18px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--field);--ring:var(--field)}
.acct-head>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.acct-head b{font:800 22px var(--f-display)}
.acct-head span{color:var(--muted);font-size:13.5px}
.acct-rows{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.acct-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid var(--line)}
.acct-row:last-child{border-bottom:0}
.acct-row>.ic{color:var(--faint)}
.acct-row .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.acct-row .txt span{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.acct-row .txt b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:560px){.auth-card .two{grid-template-columns:1fr}.acct-head{flex-wrap:wrap}}
.auth .auth-seg{align-self:stretch;display:flex}.auth .auth-seg button{flex:1}

/* ---------- Accueil : amis, messages privés, groupes ---------- */
.srv.home{background:var(--raise);overflow:visible}
.srv.home img{width:30px;height:30px;border-radius:9px}
.srv.home[aria-current="true"]{background:var(--accent-fill)}
.srv .badge{position:absolute;right:-6px;bottom:-5px;min-width:12px;height:18px;padding:0 3px;border-radius:9px;background:var(--danger);color:#fff;font:700 11px/18px var(--f-body);text-align:center;border:3px solid var(--rail-bg)}
.srv .udot{position:absolute;left:-13px;top:50%;width:6px;height:8px;margin-top:-4px;border-radius:0 4px 4px 0;background:var(--fg)}
.read-all{width:30px;height:24px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--muted);display:grid;place-items:center;padding:0;flex:none}
.read-all:hover:not(:disabled){background:var(--hover);color:var(--accent)}
.read-all:disabled{opacity:.35;cursor:default}
.read-all .ic{width:16px;height:16px}
.dm-unread{display:flex;flex-direction:column;gap:8px;align-items:center}
.dm-unread:empty{display:none}
.srv.dm{background:transparent;--ring:var(--rail-bg)}
.srv.dm .pfp{width:46px!important;height:46px!important}
.rail-sep{width:32px;height:2px;border-radius:1px;background:var(--line);flex:none}
.pill{min-width:18px;height:18px;padding:0 6px;border-radius:9px;background:var(--danger);color:#fff;font:700 11px/18px var(--f-body);text-align:center;box-sizing:border-box}
.home-row{font-weight:600}
.home-row .ic{color:var(--muted)}
.home-row[aria-current="true"]{background:var(--active);color:var(--fg)}
.dmrow{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;text-align:left;padding:5px 8px;border-radius:var(--r-sm);color:var(--muted);--ring:var(--side-bg)}
.dmrow:hover{background:var(--hover);color:var(--fg)}
.dmrow[aria-current="true"]{background:var(--active);color:var(--fg)}
.dmrow .txt{flex:1;min-width:0;display:flex;flex-direction:column}
.dmrow .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dmrow small{font-size:12px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400}
.dmrow.unread{color:var(--fg);font-weight:700}
.dmrow .incall{color:var(--st-online);width:15px;height:15px}
.pfp.gface img{border-radius:50%;object-fit:cover}
.ch .lk{width:12px!important;height:12px!important;color:var(--faint);margin-left:-4px}
.head-acts{display:flex;gap:2px;align-items:center;margin-left:auto}
.head-acts .icon-btn.on{color:var(--st-online)}

.friends{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.ftabs{display:flex;gap:6px;padding:10px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.ftab{border:0;background:transparent;color:var(--muted);padding:6px 12px;border-radius:var(--r-sm);font-weight:600;display:inline-flex;align-items:center;gap:6px}
.ftab:hover{background:var(--hover);color:var(--fg)}
.ftab[aria-selected="true"]{background:var(--active);color:var(--fg)}
.ftab.add{background:var(--st-online);color:#fff}
.ftab.add:hover{background:color-mix(in srgb,var(--st-online) 85%,#000);color:#fff}
.ftab.add[aria-selected="true"]{background:transparent;color:var(--st-online);box-shadow:inset 0 0 0 1.5px var(--st-online)}
.ftab .ic{width:15px;height:15px}
.fbody{flex:1;overflow-y:auto;padding:8px 16px 24px}
.fbody h3{margin:14px 0 4px;font:800 20px var(--f-display)}
.fbody .sect{padding-left:4px}
.muted{color:var(--muted);margin:0}
.addf{display:flex;gap:10px;margin-top:14px;align-items:stretch;max-width:680px;flex-wrap:wrap}
.addf .handle-in{flex:1 1 240px}
.addf .handle-in input{padding:11px 4px;font-size:15px;width:100%}
.fres{min-height:20px;margin:8px 0 0;font-size:14px}
.fres.ok{color:var(--st-online)}.fres.bad{color:var(--danger)}
.frow{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);padding:3px 0}
.fmain{flex:1;min-width:0;display:flex;align-items:center;gap:12px;border:0;background:transparent;text-align:left;padding:8px;border-radius:var(--r-md);color:var(--fg);--ring:var(--main-bg)}
.fmain:hover{background:var(--hover);--ring:var(--hover)}
.fmain .txt{min-width:0;display:flex;flex-direction:column}
.fmain .top{display:flex;gap:6px;align-items:baseline;min-width:0;flex-wrap:wrap}
.fmain .hdl{color:var(--faint);font-size:13px}
.fmain small{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fact{display:flex;gap:6px;padding-right:4px}
.icon-btn.round{width:36px;height:36px;border-radius:50%;background:var(--raise)}
.icon-btn.round.ok:hover{color:var(--st-online)}.icon-btn.round.no:hover{color:var(--danger)}
.fempty{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:56px 20px;color:var(--muted)}
.fempty p{margin:0;max-width:44ch}
.fempty .big{width:72px;height:72px;border-radius:50%;background:var(--raise);display:grid;place-items:center}
.fempty .big .ic{width:34px;height:34px}

.dm-intro .hdl{color:var(--muted);font-weight:600;margin-top:-2px}
.dm-intro .btn{margin-top:6px}
.sysmsg{display:flex;align-items:center;gap:10px;padding:6px 20px 6px 30px;color:var(--muted);font-size:14px}
.sysmsg .ic{color:var(--st-online);width:16px;height:16px}
.sysmsg time{color:var(--faint);font-size:12px}
.members .side-card{margin:2px}
.card-acts{display:flex;gap:8px;flex-wrap:wrap}
.mem-top{display:flex;align-items:center;gap:5px;min-width:0}
.mem-top .crown{width:13px;height:13px;color:#EAB308}

.fpick{display:flex;flex-direction:column;gap:8px}
.fpick input[type=text],#access-q{background:var(--field);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px;width:100%}
.fpick input[type=text]:focus,#access-q:focus{outline:none;border-color:var(--accent)}
.fpick-list{max-height:260px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:var(--r-md);padding:4px}
.fpick-row{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--r-sm);cursor:pointer;--ring:var(--card)}
.fpick-row:hover{background:var(--hover);--ring:var(--hover)}
.fpick-row .txt{flex:1;min-width:0;display:flex;flex-direction:column}
.fpick-row small{color:var(--faint);font-size:12px}
.fpick-row input{width:18px;height:18px;accent-color:var(--accent);flex:none}
.fpick>small{color:var(--faint)}
.grp-top{display:flex;gap:16px;align-items:center}
.grp-face{width:88px;height:88px;border-radius:50%;border:0;padding:0;position:relative;overflow:hidden;flex:none;background:var(--raise)}
.grp-face img{width:100%;height:100%;object-fit:cover;display:block}
.grp-face .edit-ov{position:absolute;inset:0;display:grid;place-items:center;background:rgb(0 0 0 / .45);color:#fff;opacity:0;transition:opacity .15s}
.grp-face:hover .edit-ov,.grp-face:focus-visible .edit-ov{opacity:1}
.grp-side{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.grp-side small{color:var(--faint);font-size:12px}
.grp-members{display:flex;flex-direction:column;gap:2px;max-height:220px;overflow-y:auto}
.grp-mem{display:flex;align-items:center;gap:10px;padding:5px 6px;border-radius:var(--r-sm);--ring:var(--card)}
.grp-mem:hover{background:var(--hover)}
.grp-mem .txt{flex:1;display:flex;align-items:center;gap:8px;min-width:0}
.btn.danger-text{color:var(--danger);align-self:flex-start}

.access{display:flex;flex-direction:column;gap:10px}
.access-box{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--line);border-radius:var(--r-md)}
.access-chips{display:flex;flex-wrap:wrap;gap:6px}
.achip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:5px 11px;border-radius:999px;background:var(--raise);border:1px solid var(--line);color:var(--muted)}
.achip i{width:9px;height:9px;border-radius:50%}
.achip[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--fg)}
.access-box .fpick-list{max-height:200px}

.ring{position:fixed;right:20px;bottom:20px;z-index:200;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r-lg);width:min(360px,calc(100vw - 24px));animation:ring-in .25s ease-out;--ring:var(--card)}
.ring-open{display:flex;align-items:center;gap:12px;border:0;background:transparent;padding:0;text-align:left;color:var(--fg);flex:1;min-width:0}
.ring .txt{display:flex;flex-direction:column;min-width:0}
.ring .txt b{font:800 16px var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ring .txt small{color:var(--muted)}
.racts{display:flex;gap:10px}
.rbtn{width:44px;height:44px;border-radius:50%;border:0;display:grid;place-items:center;color:#fff;padding:0}
.rbtn.ok{background:var(--st-online)}.rbtn.no{background:var(--danger)}
.rbtn .ic{width:20px;height:20px}
.pfp.ringing{border-radius:50%;animation:ring-pulse 1.4s ease-out infinite}
@keyframes ring-in{from{transform:translateY(16px);opacity:0}}
@keyframes ring-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--st-online) 60%,transparent)}100%{box-shadow:0 0 0 16px transparent}}
@media (max-width:720px){.ring{left:12px;right:12px;bottom:12px;width:auto}}
.stage-empty .card .row{justify-content:center}

.codec-info{display:flex;flex-direction:column;gap:6px}
.codec-row{display:grid;grid-template-columns:110px 1fr;gap:10px;padding:8px 10px;border-radius:var(--r-sm);border:1px solid var(--line);font-size:13px;color:var(--muted)}
.codec-row b{color:var(--fg)}
.codec-row.on{border-color:var(--accent);background:var(--accent-soft);color:var(--fg)}
@media (max-width:560px){.codec-row{grid-template-columns:1fr;gap:2px}}

/* ---------- Effets animés de la carte de profil ---------- */
.pcard-in{position:relative}
.peffect{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3;border-radius:inherit}
.peffect i{position:absolute;display:block}
.fx-shiba .dog{position:absolute;top:22px;left:-64px;width:58px;animation:fx-walk 24s linear infinite;filter:drop-shadow(0 3px 2px rgb(0 0 0 / .25))}
.fx-shiba .dog svg{width:100%;height:auto;display:block;overflow:visible;animation:fx-bob .4s ease-in-out infinite alternate}
.fx-shiba .lg,.fx-shiba .tail,.fx-shiba .hd{transform-box:fill-box}
.fx-shiba .lg{transform-origin:50% 0}
.fx-shiba .lg.a{animation:fx-leg .4s ease-in-out infinite alternate}
.fx-shiba .lg.b{animation:fx-leg .4s ease-in-out infinite alternate-reverse}
.fx-shiba .tail{transform-origin:100% 100%;animation:fx-wag .3s ease-in-out infinite alternate}
.fx-shiba .hd{transform-origin:30% 90%;animation:fx-nod 2.4s ease-in-out infinite}
@keyframes fx-walk{0%{left:-64px;transform:scaleX(1)}46%{left:calc(100% + 6px);transform:scaleX(1)}50%{left:calc(100% + 6px);transform:scaleX(-1)}96%{left:-64px;transform:scaleX(-1)}100%{left:-64px;transform:scaleX(1)}}
@keyframes fx-bob{to{transform:translateY(-1.5px)}}
@keyframes fx-leg{from{transform:rotate(20deg)}to{transform:rotate(-20deg)}}
@keyframes fx-wag{from{transform:rotate(-12deg)}to{transform:rotate(14deg)}}
@keyframes fx-nod{0%,70%,100%{transform:rotate(0)}80%{transform:rotate(-8deg)}90%{transform:rotate(4deg)}}
.fx-sakura i{top:-14px;left:var(--x);width:calc(11px * var(--s));height:calc(8px * var(--s));background:linear-gradient(135deg,#FFE1EA,#F48FB1);border-radius:80% 0 80% 0;opacity:.9;animation:fx-fall var(--t) linear var(--d) infinite}
@keyframes fx-fall{0%{top:-14px;transform:translateX(0) rotate(0)}50%{transform:translateX(18px) rotate(200deg)}100%{top:104%;transform:translateX(-6px) rotate(380deg)}}
.fx-snow i{top:-8px;left:var(--x);width:calc(5px * var(--s));height:calc(5px * var(--s));border-radius:50%;background:#fff;opacity:.9;box-shadow:0 0 4px rgb(255 255 255 / .8);animation:fx-snow calc(var(--t) * 1.4) linear var(--d) infinite}
@keyframes fx-snow{0%{top:-8px;transform:translateX(0)}50%{transform:translateX(12px)}100%{top:103%;transform:translateX(-4px)}}
.fx-stars{background:linear-gradient(180deg,rgb(12 14 48 / .45),transparent 60%)}
.fx-stars i{left:var(--x);top:var(--y);width:calc(3px * var(--s));height:calc(3px * var(--s));background:#FFF8D6;border-radius:50%;box-shadow:0 0 6px 1px rgb(255 240 180 / .85);animation:fx-twinkle calc(var(--t) * .35) ease-in-out var(--d) infinite alternate}
.fx-stars i:first-child{width:70px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#fff);box-shadow:none;top:8%;left:-80px;animation:fx-shoot 8s ease-in 1.5s infinite}
@keyframes fx-twinkle{from{opacity:.15;transform:scale(.6)}to{opacity:1;transform:scale(1.25)}}
@keyframes fx-shoot{0%{left:-80px;top:6%;opacity:0;transform:rotate(18deg)}3%{opacity:1}13%{left:110%;top:42%;opacity:0;transform:rotate(18deg)}100%{left:110%;top:42%;opacity:0;transform:rotate(18deg)}}
.fx-fireflies i{left:var(--x);top:var(--y);width:calc(5px * var(--s));height:calc(5px * var(--s));border-radius:50%;background:#EEFF9A;box-shadow:0 0 10px 3px rgb(210 255 90 / .7);animation:fx-fly var(--t) ease-in-out var(--d) infinite alternate,fx-glow calc(var(--t) * .3) ease-in-out var(--d) infinite alternate}
@keyframes fx-fly{0%{transform:translate(0,0)}33%{transform:translate(22px,-16px)}66%{transform:translate(-14px,12px)}100%{transform:translate(12px,24px)}}
@keyframes fx-glow{from{opacity:.15}to{opacity:1}}
.fx-bubbles i{bottom:-24px;left:var(--x);width:calc(15px * var(--s));height:calc(15px * var(--s));border-radius:50%;border:1.5px solid rgb(255 255 255 / .75);background:radial-gradient(circle at 30% 30%,rgb(255 255 255 / .75),rgb(255 255 255 / .1) 40%,transparent 62%);animation:fx-rise var(--t) ease-in var(--d) infinite}
@keyframes fx-rise{0%{bottom:-24px;transform:translateX(0);opacity:0}10%{opacity:1}50%{transform:translateX(12px)}90%{opacity:1}100%{bottom:104%;transform:translateX(-6px);opacity:0}}
.fx-hearts i{bottom:-18px;left:var(--x);width:calc(10px * var(--s));height:calc(10px * var(--s));background:#FF5C8A;opacity:0;animation:fx-hearts var(--t) ease-in var(--d) infinite}
.fx-hearts i::before,.fx-hearts i::after{content:"";position:absolute;width:100%;height:100%;border-radius:50%;background:inherit}
.fx-hearts i::before{left:-50%}.fx-hearts i::after{top:-50%}
.fx-hearts i:nth-child(3n){background:#FF8FB1}.fx-hearts i:nth-child(4n){background:#E8436E}
@keyframes fx-hearts{0%{bottom:-18px;transform:rotate(45deg) scale(.7);opacity:0}15%{opacity:.9}85%{opacity:.8}100%{bottom:104%;transform:rotate(45deg) translate(-12px,6px) scale(1.1);opacity:0}}
.fx-aurora i{width:75%;height:60%;border-radius:50%;filter:blur(22px);opacity:.6;top:-14%;left:calc(var(--k) * 32% - 22%);background:radial-gradient(closest-side,var(--c),transparent);animation:fx-aur calc(var(--t) * 1.4) ease-in-out var(--d) infinite alternate}
.fx-aurora i:nth-child(1){--c:#4DFFC3}.fx-aurora i:nth-child(2){--c:#7C6CFF}.fx-aurora i:nth-child(3){--c:#FF7AD9}
@keyframes fx-aur{from{transform:translateX(-14%) scaleY(.85)}to{transform:translateX(18%) scaleY(1.2)}}
.fx-mini{width:64px;height:64px;border-radius:14px;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--ta),var(--tb));display:block;flex:none}
.fx-mini .fx-shiba .dog{top:auto;bottom:8px;width:36px;animation:fx-walk-mini 7s linear infinite}
@keyframes fx-walk-mini{0%{left:-38px;transform:scaleX(1)}46%{left:calc(100% + 2px);transform:scaleX(1)}50%{left:calc(100% + 2px);transform:scaleX(-1)}96%{left:-38px;transform:scaleX(-1)}100%{left:-38px;transform:scaleX(1)}}
.fx-mini .fx-aurora i{filter:blur(7px);opacity:.9;width:90%;height:70%;top:0}
.fx-mini .peffect i{transform-origin:center}