/* Le Zaap 2.14 — corrections finales chargées après la cascade historique. */
html { scrollbar-gutter: stable; }
.xs-auth-page, .xs-auth-page * { box-sizing: border-box; }
.xs-game-switcher { display:flex; gap:7px; align-items:center; padding:9px 16px 8px; overflow-x:auto; border-bottom:1px solid var(--xs-line); background:rgba(12,16,17,.72); scrollbar-width:none; }
.xs-game-switcher::-webkit-scrollbar { display:none; }
.xs-game-chip { display:inline-flex; align-items:center; gap:7px; flex:0 0 auto; min-height:32px; padding:6px 11px; border:1px solid rgba(255,255,255,.1); border-radius:999px; color:var(--xs-muted); background:rgba(255,255,255,.025); cursor:pointer; font-size:11px; transition:color .16s ease,border-color .16s ease,background .16s ease,transform .16s ease; }
.xs-game-chip span { display:grid; width:19px; height:19px; place-items:center; border-radius:50%; color:var(--xs-accent); background:rgba(166,214,46,.12); font-size:11px; }
.xs-game-logo { font-family:Georgia,serif; font-size:12px !important; font-weight:900; text-shadow:0 1px 2px rgba(0,0,0,.45); }
.xs-game-logo img { display:block; width:15px; height:15px; object-fit:contain; }
.xs-game-chip-retro .xs-game-logo { color:#f4c56a; background:linear-gradient(145deg,#75401c,#2f1d18); }
.xs-game-chip-dofus3 .xs-game-logo { color:#d8ecff; background:linear-gradient(145deg,#316486,#1d2b46); }
.xs-game-chip-wakfu .xs-game-logo { color:#d9ff88; background:linear-gradient(145deg,#4b8c45,#18392d); }
.xs-game-chip strong { font-weight:800; white-space:nowrap; }
.xs-game-chip:hover { color:var(--xs-text); border-color:rgba(166,214,46,.45); transform:translateY(-1px); }
.xs-game-chip.is-active { color:#10160b; border-color:var(--xs-accent); background:var(--xs-accent); box-shadow:0 5px 18px rgba(166,214,46,.15); }
.xs-game-chip.is-active span { color:#10160b; background:rgba(0,0,0,.1); }
.xs-game-filter-native { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
@media(max-width:760px){ .xs-game-switcher { padding-left:10px; padding-right:10px; } .xs-game-chip { min-height:30px; padding:5px 9px; font-size:10px; } }
#lezaap-app.xs-video-mode .xs-game-switcher { display:none !important; }
.xs-auth-page { min-height: 100vh; width: 100vw; margin-left: calc(50% - 50vw); padding: clamp(28px, 6vw, 72px) 20px 34px; display: grid; justify-items: center; align-content: center; gap: 18px; color: #f4f7f2; background: radial-gradient(circle at 50% -12%, rgba(166,214,46,.16), transparent 32rem), linear-gradient(180deg,#0b1010,#070a0b); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.xs-auth-brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.xs-auth-brand img { width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(166,214,46,.18)); }
.xs-auth-brand strong, .xs-auth-brand small { display: block; }
.xs-auth-brand strong { font-size: 22px; line-height: 1; letter-spacing: .01em; }
.xs-auth-brand small { margin-top: 5px; color: var(--xs-accent); font-size: 11px; font-weight: 700; }
.xs-auth-card { width: min(100%, 470px); padding: clamp(24px, 5vw, 38px); border: 1px solid rgba(170,222,207,.16); border-radius: 24px; background: linear-gradient(145deg,rgba(19,28,27,.96),rgba(10,15,15,.98)); box-shadow: 0 26px 80px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.035); }
.xs-auth-kicker { margin-bottom: 9px; color: var(--xs-accent); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.xs-auth-card h1 { margin: 0; color: #f5f8f3; font-size: clamp(28px, 5vw, 36px); letter-spacing: -.025em; }
.xs-auth-intro { margin: 10px 0 22px; color: #9aa7a0; line-height: 1.6; }
.xs-auth-alert { margin: 0 0 16px; padding: 11px 13px; border: 1px solid rgba(255,117,126,.28); border-radius: 11px; color: #ffd9dc; background: rgba(132,35,45,.25); font-size: 13px; }
.xs-auth-xixou { display: flex; align-items: center; gap: 11px; min-height: 60px; padding: 10px 12px; border: 1px solid rgba(166,214,46,.26); border-radius: 14px; color: #f5f8f3; background: linear-gradient(135deg,rgba(166,214,46,.13),rgba(166,214,46,.045)); text-decoration: none; transition: border-color .18s ease, transform .18s ease, background .18s ease; }
.xs-auth-xixou:hover { border-color: rgba(166,214,46,.62); background: rgba(166,214,46,.15); transform: translateY(-1px); }
.xs-auth-xixou > span:nth-child(2) { display: grid; flex: 1; min-width: 0; gap: 2px; }
.xs-auth-xixou strong { font-size: 13px; }
.xs-auth-xixou small { color: #a7b6ad; font-size: 10px; }
.xs-auth-xixou-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: #152009; background: var(--xs-accent); font-weight: 900; }
.xs-auth-divider { display: flex; align-items: center; gap: 10px; margin: 20px 0 17px; color: #75837b; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.xs-auth-divider::before, .xs-auth-divider::after { content: ""; height: 1px; flex: 1; background: rgba(255,255,255,.09); }
.xs-auth-form { display: grid; gap: 13px; }
.xs-auth-form label { display: grid; gap: 7px; color: #c8d4cc; font-size: 12px; font-weight: 700; }
.xs-auth-form input:not([type="checkbox"]) { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid rgba(170,222,207,.17); border-radius: 11px; outline: 0; color: #f3f7f3; background: rgba(3,8,8,.6); transition: border-color .18s ease, box-shadow .18s ease; }
.xs-auth-form input:not([type="checkbox"]):focus { border-color: rgba(166,214,46,.7); box-shadow: 0 0 0 3px rgba(166,214,46,.11); }
.xs-auth-check { display: flex !important; grid-template-columns: auto 1fr; align-items: center; gap: 8px !important; color: #9aa7a0 !important; font-size: 11px !important; font-weight: 600 !important; }
.xs-auth-check input { accent-color: var(--xs-accent); }
.xs-auth-form .xs-full { grid-column: 1 / -1; }
.xs-auth-links, .xs-auth-switch, .xs-auth-legal { color: #8f9d95; font-size: 12px; text-align: center; }
.xs-auth-links { margin: 13px 0 0; }
.xs-auth-switch { margin: 20px 0 0; }
.xs-auth-links a, .xs-auth-switch a, .xs-auth-legal a { color: var(--xs-accent); font-weight: 750; text-decoration: none; }
.xs-auth-links a:hover, .xs-auth-switch a:hover, .xs-auth-legal a:hover { text-decoration: underline; text-underline-offset: 3px; }
.xs-auth-status { min-height: 18px; margin: 0; color: #9aa7a0; font-size: 12px; }
.xs-auth-status.is-loading { color: #c9d77e; }
.xs-auth-status.is-success { color: #9ee08d; }
.xs-auth-status.is-error { color: #ff9ca2; }
.xs-auth-note { display: grid; gap: 4px; margin-top: 20px; padding: 12px 13px; border: 1px solid rgba(170,222,207,.12); border-radius: 12px; color: #aab7af; background: rgba(255,255,255,.025); font-size: 11px; line-height: 1.5; }
.xs-auth-note strong { color: #dae6dd; font-size: 12px; }
.xs-auth-legal { margin: 0; }
.xs-logout-link { display: block; margin-top: 9px; color: #9daaa2; font-size: 11px; text-align: center; text-decoration: none; }
.xs-logout-link:hover { color: #ff9ca2; text-decoration: underline; text-underline-offset: 3px; }
.xs-logout-sidebar { flex: 0 0 auto; }
@media (max-width:760px) { .xs-auth-page { padding: 22px 14px 28px; align-content: start; } .xs-auth-card { border-radius: 20px; padding: 24px 18px; } .xs-auth-brand img { width: 42px; height: 42px; } }
.xs-class-face-image { object-fit: contain !important; padding: 3px; image-rendering: auto; }
.xs-class-face-retro .xs-class-face-image { object-fit:cover !important; object-position:center center; padding:0; transform:none; }
.xs-class-face-image + i, .xs-class-face i { display: none !important; }
.xs-class-face:has(.xs-class-face-image)::before, .xs-class-face:has(.xs-class-face-image)::after { display: none !important; }
.xs-class-face { background: radial-gradient(circle at 50% 35%,rgba(255,255,255,.08),transparent 62%),#17211f; }
.xs-choice-face { width: 28px !important; height: 28px !important; flex-basis: 28px !important; border-radius: 9px !important; }
.xs-class-button { min-height: 35px; padding: 3px 9px 3px 5px; }
.xs-class-button .xs-choice-face { width: 28px !important; height: 28px !important; flex-basis: 28px !important; }
.xs-class-choice .xs-class-face { width: 40px; height: 40px; flex-basis: 40px; border-radius: 11px; }
.xs-feed-header > select { flex: 0 1 150px; min-width: 0; height: 36px; color: var(--xs-text); background: var(--xs-panel); border: 1px solid var(--xs-line); border-radius: 8px; padding: 0 28px 0 10px; }
#xs-game-filter { flex-basis: 130px; }

/* Filtres compacts : le navigateur ne doit plus ouvrir un menu natif géant. */
.xs-server-picker-wrap { position:relative; flex:0 1 164px; min-width:0; }
.xs-server-filter-native { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
.xs-server-picker-trigger { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; height:36px; min-width:0; padding:0 10px 0 12px; border:1px solid var(--xs-line); border-radius:10px; color:var(--xs-text); background:linear-gradient(145deg,rgba(24,34,32,.96),rgba(11,16,17,.96)); cursor:pointer; font-size:12px; text-align:left; }
.xs-server-picker-trigger:hover, .xs-server-picker-wrap.is-open .xs-server-picker-trigger { border-color:rgba(166,214,46,.58); box-shadow:0 0 0 3px rgba(166,214,46,.08); }
.xs-server-picker-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.xs-server-picker-trigger > span:last-child { color:var(--xs-accent); font-size:15px; line-height:1; transform:translateY(-1px); }
.xs-server-picker { position:absolute; top:calc(100% + 8px); right:0; z-index:80; display:grid; gap:7px; width:min(244px,calc(100vw - 30px)); max-height:min(430px,calc(100vh - 100px)); padding:8px; overflow:auto; border:1px solid rgba(170,222,207,.2); border-radius:14px; background:rgba(12,19,19,.98); box-shadow:0 22px 45px rgba(0,0,0,.42); backdrop-filter:blur(18px); }
.xs-server-picker[hidden] { display:none; }
.xs-server-picker section { display:grid; gap:3px; }
.xs-server-picker section h3 { margin:7px 8px 2px; color:var(--xs-accent); font-size:10px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.xs-server-picker-item { display:flex; align-items:center; gap:8px; width:100%; min-height:32px; padding:0 9px; border:1px solid transparent; border-radius:9px; color:var(--xs-muted); background:transparent; cursor:pointer; text-align:left; }
.xs-server-picker-item span { display:grid; place-items:center; width:18px; color:rgba(166,214,46,.65); font-size:11px; }
.xs-server-picker-item strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:700; }
.xs-server-picker-item:hover, .xs-server-picker-item:focus-visible { color:var(--xs-text); border-color:rgba(166,214,46,.28); background:rgba(166,214,46,.08); outline:0; }
.xs-server-picker-item.is-active { color:#11180a; border-color:var(--xs-accent); background:var(--xs-accent); }
.xs-server-picker-item.is-active span { color:#11180a; }

/* Une identité discrète pour le type de contenu et les actions du propriétaire. */
.xs-post-head .xs-kind { display:inline-flex; align-items:center; gap:5px; min-height:23px; margin:0 3px 0 5px; padding:4px 8px; border:1px solid rgba(170,222,207,.18); border-radius:999px; color:var(--xs-muted); background:rgba(255,255,255,.035); font-size:9px; font-weight:800; letter-spacing:.02em; line-height:1; text-transform:none; box-shadow:none; }
.xs-post-head:has(.xs-post-manage) { padding-right:48px; }
.xs-post-head .xs-kind::before { color:var(--xs-accent); font-size:10px; line-height:1; }
.xs-post-head .xs-kind-post::before { content:'✦'; }
.xs-post-head .xs-kind-video::before { content:'▶'; font-size:8px; }
.xs-post-head .xs-kind-build::before { content:'◇'; }
.xs-post-head .xs-kind-lfg::before { content:'⌁'; }
.xs-post-head .xs-kind-video { color:#e8c8db; border-color:rgba(227,131,194,.22); background:rgba(151,52,119,.1); }
.xs-post-head .xs-kind-build { color:#cbdcf0; border-color:rgba(112,168,222,.22); background:rgba(67,112,159,.1); }
.xs-post-head .xs-kind-lfg { color:#c8e8d5; border-color:rgba(94,196,137,.22); background:rgba(39,126,78,.1); }
.xs-post-manage { opacity:.55; top:10px; right:10px; }
.xs-post-manage:hover, .xs-post-manage:focus-within, .xs-post-manage.is-open { opacity:1; }
.xs-post-menu-toggle { width:28px; height:28px; border-color:rgba(170,222,207,.12); border-radius:50%; background:rgba(8,13,14,.46); box-shadow:none; }
.xs-post-menu-toggle::before { content:'⋮' !important; font-size:17px !important; letter-spacing:0; }

/* Notifications et messages restent accessibles dans l’en-tête, sans détour par la barre latérale. */
.xs-header-inbox { display:flex; align-items:center; gap:6px; flex:0 0 auto; margin-left:auto; }
.xs-header-inbox-button { position:relative; display:grid; place-items:center; width:36px; height:36px; padding:0; border:1px solid var(--xs-line); border-radius:10px; color:var(--xs-muted); background:rgba(255,255,255,.025); cursor:pointer; }
.xs-header-inbox-button:hover, .xs-header-inbox-button:focus-visible { color:var(--xs-text); border-color:rgba(166,214,46,.48); background:rgba(166,214,46,.08); outline:0; }
.xs-header-inbox-button > span { font-size:18px; line-height:1; }
.xs-header-inbox-button .xs-badge, .xs-header-inbox-button .xs-messages-badge { position:absolute; top:-6px; right:-6px; display:grid; min-width:17px; height:17px; margin:0; padding:0 4px; border:2px solid rgba(12,16,17,.95); border-radius:999px; color:#101508; background:var(--xs-accent); font-size:9px; line-height:1; }
.xs-header-inbox-button .xs-messages-badge { color:#fff; background:#ef6b72; }
.xs-nav-inbox { display:none !important; }
.xs-handle-profile-field { min-width:0; }
.xs-handle-input { display:flex; align-items:center; min-height:42px; border:1px solid var(--xs-line); border-radius:10px; background:var(--xs-panel-2); overflow:hidden; }
.xs-handle-input > span { padding-left:12px; color:var(--xs-accent); font-weight:850; }
.xs-handle-input input { min-width:0; flex:1; border:0 !important; background:transparent !important; box-shadow:none !important; }
.xs-handle-state { display:block; min-height:14px; margin-top:4px; color:var(--xs-muted); font-size:10px; }
.xs-handle-state.is-invalid { color:#ff9ca2; }
.xs-handle-state.is-valid { color:#9ee08d; }
.xs-context-card { padding:18px; }
.xs-context-intro { display:flex; align-items:flex-start; gap:11px; }
.xs-context-intro h2 { margin:2px 0 5px; font-size:18px; }
.xs-context-intro p { margin:0; color:var(--xs-muted); font-size:12px; line-height:1.5; }
.xs-context-mark { display:grid; flex:0 0 36px; width:36px; height:36px; place-items:center; border:1px solid rgba(166,214,46,.28); border-radius:12px; color:var(--xs-accent); background:rgba(166,214,46,.10); }
.xs-context-actions { display:grid; gap:8px; margin-top:17px; }
.xs-context-actions > * { width:100%; justify-content:center; }
.xs-site-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:28px 14px 16px; padding:14px 4px 4px; border-top:1px solid var(--xs-line); color:var(--xs-muted); font-size:10px; }
.xs-site-footer nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:11px; }
.xs-site-footer a:hover { color:var(--xs-accent); }
.xs-social-links-editor { display:grid; gap:9px; margin:0; padding:15px; border:1px solid var(--xs-line); border-radius:14px; background:rgba(166,214,46,.035); }
.xs-social-links-editor legend { padding:0 5px; font-size:13px; font-weight:850; }
.xs-social-links-editor p { margin:0; color:var(--xs-muted); font-size:11px; }
.xs-social-links-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.xs-social-links-grid label { display:grid; gap:6px; min-width:0; font-size:11px; font-weight:750; }
.xs-social-links > div:last-child { display:flex; flex-wrap:wrap; gap:8px; }
.xs-social-link { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border:1px solid var(--xs-line); border-radius:999px; color:var(--xs-text); background:rgba(255,255,255,.025); font-size:11px; font-weight:750; }
.xs-social-link:hover { border-color:rgba(166,214,46,.48); color:var(--xs-accent); background:rgba(166,214,46,.08); }
.xs-social-link b { color:var(--xs-muted); font-size:12px; }
@media (max-width:600px) { .xs-social-links-grid { grid-template-columns:1fr; } .xs-site-footer { align-items:flex-start; flex-direction:column; } .xs-site-footer nav { justify-content:flex-start; } }

/* 2.24: classes and connections share one predictable rhythm. */
.xs-preferred-classes { min-width: 0; }
.xs-preferred-class-gender { display:flex; align-items:center; gap:10px; margin:10px 0 12px; color:var(--xs-muted); font-size:11px; font-weight:800; }
.xs-preferred-class-gender .xs-choice-buttons { margin:0; }
.xs-preferred-class-options { align-items:stretch; }
.xs-class-choice { min-height:76px; height:76px; }
.xs-class-choice > span { min-height:100%; box-sizing:border-box; display:flex; align-items:center; }
.xs-class-choice-face { width:44px!important; height:44px!important; flex:0 0 44px!important; }
.xs-profile-class-field .xs-gender-buttons { margin-top:5px; }
.xs-profile-editor form { align-items:start; align-content:start; grid-auto-rows:max-content; }
.xs-profile-editor .xs-profile-choice-field { align-self:start !important; min-height:0 !important; height:max-content; }
.xs-profile-editor .xs-profile-class-field,
.xs-profile-editor .xs-profile-server-field { align-content:start; }
.xs-profile-editor .xs-profile-class-field .xs-choice-buttons,
.xs-profile-editor .xs-profile-server-field .xs-choice-buttons { align-content:flex-start; }
.xs-gender-buttons { display:flex; flex-wrap:wrap; gap:6px; }
.xs-gender-choice { min-height:30px; padding:6px 10px; }
.xs-social-links-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.xs-social-link-visibility { display:flex!important; align-items:center; gap:7px; color:var(--xs-muted); font-size:10px!important; font-weight:600!important; }
.xs-social-link-visibility input { width:auto; }
.xs-settings-connection-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.xs-connection-card { display:grid; gap:7px; padding:13px; border:1px solid var(--xs-border); border-radius:14px; background:var(--xs-panel-2); }
.xs-connection-card header { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.xs-connection-card header strong { font-size:13px; }
.xs-connection-state { color:var(--xs-muted); font-size:11px; line-height:1.4; }
.xs-connection-state.is-linked { color:var(--xs-accent); }
.xs-social-account-input { display:flex; align-items:center; min-height:42px; border:1px solid var(--xs-border); border-radius:10px; background:var(--xs-panel-3); overflow:hidden; }
.xs-social-account-input > span { padding-left:11px; color:var(--xs-accent); font-weight:850; }
.xs-social-account-input input { min-width:0; border:0!important; background:transparent!important; box-shadow:none!important; }
.xs-emoji-tools { position:relative; display:flex; align-items:center; gap:6px; margin-top:5px; }
.xs-emoji-toggle { display:grid; width:32px; height:30px; place-items:center; border:1px solid var(--xs-border); border-radius:9px; color:var(--xs-text); background:var(--xs-panel-2); cursor:pointer; font-size:17px; }
.xs-emoji-toggle:hover { border-color:var(--xs-accent); background:color-mix(in srgb,var(--xs-accent) 10%,var(--xs-panel-2)); }
.xs-emoji-popover { position:absolute; z-index:30; left:0; bottom:36px; display:grid; grid-template-columns:repeat(8,1fr); gap:3px; width:min(304px,calc(100vw - 32px)); max-height:250px; overflow:auto; padding:8px; border:1px solid var(--xs-border); border-radius:12px; background:rgba(13,21,19,.98); box-shadow:0 16px 36px rgba(0,0,0,.4); }
.xs-emoji-popover[hidden] { display:none; }
.xs-emoji-popover button { display:grid; width:31px; height:31px; place-items:center; border:0; border-radius:8px; background:transparent; cursor:pointer; font-size:18px; }
.xs-emoji-popover button:hover { background:color-mix(in srgb,var(--xs-accent) 16%,transparent); }
.xs-settings-preview-note { margin:0; color:var(--xs-muted); font-size:11px; }
.xs-settings-live-preview { display:grid; gap:8px; margin-top:12px; padding:12px; border:1px solid color-mix(in srgb,var(--xs-accent) 40%,var(--xs-border)); border-radius:14px; background:linear-gradient(135deg,color-mix(in srgb,var(--xs-accent) 15%,var(--xs-panel)),var(--xs-panel)); }
.xs-settings-live-preview strong { color:var(--xs-accent); }
.xs-moderation-dashboard { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:0 0 16px; }
.xs-moderation-metric { display:grid; gap:5px; min-height:88px; align-content:center; padding:14px; border:1px solid var(--xs-border); border-radius:15px; background:var(--xs-panel); }
.xs-moderation-metric span { color:var(--xs-muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.xs-moderation-metric strong { font-size:25px; color:var(--xs-accent); }
.xs-moderation-tabs { display:flex; gap:6px; flex-wrap:wrap; }
.xs-moderation-tabs button { border:1px solid var(--xs-border); border-radius:999px; padding:8px 12px; color:var(--xs-muted); background:var(--xs-panel); cursor:pointer; font-size:11px; font-weight:800; }
.xs-moderation-tabs button.is-active { color:#17220f; border-color:var(--xs-accent); background:var(--xs-accent); }
.xs-moderation-report-meta { display:flex; gap:7px; flex-wrap:wrap; color:var(--xs-muted); font-size:10px; }
.xs-moderation-target { display:inline-flex; width:max-content; color:var(--xs-accent); font-size:11px; font-weight:800; text-decoration:none; }
.xs-moderation-target:hover { text-decoration:underline; }
.xs-moderation-queue-item .xs-card-actions { flex-wrap:wrap; }
.xs-moderation-queue-item .xs-card-actions > * { flex:0 1 auto; min-width:125px; }
@media (max-width:760px) { .xs-settings-connection-grid,.xs-moderation-dashboard { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px) { .xs-settings-connection-grid,.xs-moderation-dashboard { grid-template-columns:1fr; } }

@media (max-width:900px) {
    .xs-header-inbox { margin-left:0; }
    .xs-server-picker-wrap { flex-basis:150px; }
}

/* Final cascade guard: class cards stay aligned after game catalog switches. */
.xs-preferred-class-options { align-items: stretch !important; }
.xs-preferred-class-options .xs-class-choice { min-height:76px !important; height:76px !important; }
.xs-preferred-class-options .xs-class-choice > span { min-height:76px !important; }
.xs-preferred-class-options .xs-class-choice-face { width:44px !important; height:44px !important; flex-basis:44px !important; }

.xs-notification-popover { position:fixed; z-index:1200; top:64px; right:clamp(12px,3vw,42px); display:none; width:min(520px,calc(100vw - 24px)); max-height:min(720px,calc(100dvh - 84px)); border:1px solid color-mix(in srgb,var(--xs-accent) 30%,var(--xs-border)); border-radius:18px; background:rgba(13,21,19,.98); box-shadow:0 24px 70px rgba(0,0,0,.48),0 0 0 1px rgba(255,255,255,.03); overflow:hidden; }
.xs-notification-popover.is-open { display:block; animation:xs-popover-in .16s ease-out; }
.xs-notification-popover-panel { max-height:inherit; overflow:auto; padding:0; }
.xs-notification-popover-panel > .xs-notification-popover-close { position:absolute; top:13px; right:14px; z-index:2; }
.xs-notification-popover-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px; border-bottom:1px solid var(--xs-border); background:linear-gradient(135deg,color-mix(in srgb,var(--xs-accent) 12%,transparent),transparent); }
.xs-notification-popover-head strong { display:block; font-size:14px; }
.xs-notification-popover-head small { display:block; margin-top:3px; color:var(--xs-muted); font-size:11px; }
.xs-notification-popover-close { display:grid; width:30px; height:30px; place-items:center; border:1px solid var(--xs-border); border-radius:9px; color:var(--xs-muted); background:var(--xs-panel-2); cursor:pointer; font-size:18px; }
.xs-notification-popover-close:hover { color:var(--xs-text); border-color:var(--xs-accent); }
.xs-notification-popover .xs-notification-modal-content { min-height:160px; padding:0 14px 14px; }
.xs-notification-popover-list { display:grid; gap:0; max-height:470px; overflow:auto; }
.xs-notification-popover-list .xs-notification-item { border-bottom:1px solid var(--xs-line); }
.xs-notification-popover-list .xs-notification-item:last-child { border-bottom:0; }
.xs-notification-popover-footer { display:flex; justify-content:center; padding:12px 0 2px; border-top:1px solid var(--xs-line); }
.xs-notification-popover-footer button { width:100%; justify-content:center; }
.xs-notification-popover-empty { display:grid; gap:6px; place-items:center; padding:34px 18px; color:var(--xs-muted); text-align:center; }
.xs-notification-popover-empty strong { color:var(--xs-text); font-size:13px; }
.xs-notification-popover-empty span { max-width:300px; font-size:11px; line-height:1.5; }
.xs-notification-popover .xs-section-intro { padding-top:12px; }
.xs-notification-popover .xs-section-intro h2 { display:none; }
@keyframes xs-popover-in { from { opacity:0; transform:translateY(-7px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
@media (max-width:760px) { .xs-notification-popover { top:56px; right:8px; width:calc(100vw - 16px); max-height:calc(100dvh - 68px); } }

/* Navigation et réglages : une seule page défile, les colonnes restent stables. */
body:has(#lezaap-app) { overflow-x:hidden; background:#070b0a; }
#lezaap-app .xs-sidebar-left { position:sticky; top:0; height:100dvh; max-height:100dvh; overflow:visible; overscroll-behavior:contain; }
#lezaap-app .xs-sidebar-right { position:sticky; top:0; max-height:100dvh; overflow:visible; }
#lezaap-app .xs-main { min-width:0; overflow:visible; }
.xs-server-buttons { max-height:156px; overflow:auto; overscroll-behavior:contain; padding-right:2px; }
.xs-server-choice { display:inline-flex; align-items:center; gap:5px; }
.xs-server-choice-game { color:var(--xs-muted); font-size:9px; font-weight:700; opacity:.82; }
.xs-server-choice.is-active .xs-server-choice-game { color:rgba(12,20,9,.72); }
.xs-gender-buttons .xs-choice-button { min-width:104px; }
.xs-notification-dialog { width:min(720px,calc(100vw - 28px)); max-height:min(820px,calc(100dvh - 28px)); overflow:auto; }
.xs-notification-modal-content { min-height:180px; }
.xs-notification-modal-content .xs-notification-center { margin:0; }
.xs-settings-page,.xs-moderation-page { display:grid; gap:16px; padding:6px 0 42px; }
.xs-settings-card,.xs-moderation-page .xs-moderation-members,.xs-moderation-queue { display:grid; gap:14px; padding:20px; border:1px solid var(--xs-line); border-radius:18px; background:linear-gradient(145deg,rgba(21,35,28,.86),rgba(10,17,15,.96)); }
.xs-settings-card header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.xs-settings-card h3 { margin:3px 0 4px; }
.xs-settings-color-preview { flex:none; width:42px; height:42px; border-radius:13px; background:var(--xs-user-accent); }
.xs-settings-colors { display:flex; flex-wrap:wrap; gap:9px; }
.xs-settings-accent,.xs-settings-custom-color { display:inline-flex; align-items:center; gap:7px; min-height:38px; padding:6px 10px; border:1px solid var(--xs-line); border-radius:11px; color:var(--xs-muted); background:rgba(255,255,255,.025); cursor:pointer; font-size:11px; font-weight:750; }
.xs-settings-accent span { width:18px; height:18px; border-radius:50%; background:var(--xs-choice-accent); }
.xs-settings-accent.is-active { color:var(--xs-text); border-color:var(--xs-choice-accent); background:rgba(166,214,46,.09); }
.xs-settings-custom-color input { width:22px; height:22px; padding:0; border:0; background:transparent; }
.xs-settings-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.xs-settings-link { display:grid; gap:5px; align-content:start; min-height:112px; padding:16px; text-align:left; border:1px solid var(--xs-line); border-radius:15px; color:var(--xs-text); background:rgba(255,255,255,.025); cursor:pointer; }
.xs-settings-link:hover { border-color:var(--xs-accent); transform:translateY(-1px); }
.xs-settings-link span { color:var(--xs-accent); font-size:18px; }
.xs-settings-link small { color:var(--xs-muted); font-size:11px; line-height:1.45; }
.xs-connection-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.xs-connection-cards article { display:grid; gap:5px; padding:14px; border:1px solid var(--xs-line); border-radius:13px; background:rgba(0,0,0,.14); }
.xs-connection-cards article span { color:var(--xs-muted); font-size:11px; }
.xs-connection-cards article .xs-secondary { width:max-content; margin-top:4px; }
.xs-moderation-tabs { display:flex; gap:6px; padding:4px; border:1px solid var(--xs-line); border-radius:12px; background:rgba(0,0,0,.14); }
.xs-moderation-tabs button { padding:8px 12px; border:0; border-radius:8px; color:var(--xs-muted); background:transparent; cursor:pointer; font-weight:750; }
.xs-moderation-tabs button.is-active { color:#17220f; background:var(--xs-accent); }
.xs-moderation-site-overview { display:grid; gap:14px; }
.xs-moderation-dashboard { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.xs-moderation-metric { display:grid; gap:8px; min-height:88px; align-content:space-between; padding:15px; border:1px solid rgba(166,214,46,.18); border-radius:15px; background:linear-gradient(145deg,rgba(27,43,31,.82),rgba(10,18,16,.92)); box-shadow:inset 0 1px 0 rgba(255,255,255,.035); }
.xs-moderation-metric span { color:var(--xs-muted); font-size:11px; }
.xs-moderation-metric strong { color:var(--xs-text); font-size:25px; letter-spacing:-.03em; }
.xs-moderation-insights { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(240px,.65fr); gap:12px; }
.xs-moderation-insight { display:grid; gap:12px; padding:16px; border:1px solid var(--xs-line); border-radius:16px; background:rgba(6,12,11,.32); }
.xs-moderation-insight header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.xs-moderation-insight h3 { margin:3px 0 0; font-size:15px; }
.xs-moderation-insight header > strong { color:var(--xs-accent); font-size:13px; }
.xs-moderation-insight small,.xs-moderation-insight p { color:var(--xs-muted); font-size:11px; line-height:1.5; }
.xs-moderation-activity-bars { display:flex; align-items:end; gap:8px; height:82px; padding:10px 4px 0; border-bottom:1px solid var(--xs-line); }
.xs-moderation-activity-bars span { flex:1; min-width:8px; height:var(--bar,8%); border-radius:7px 7px 2px 2px; background:linear-gradient(180deg,var(--xs-accent),color-mix(in srgb,var(--xs-accent) 36%,#172a1d)); box-shadow:0 0 18px color-mix(in srgb,var(--xs-accent) 16%,transparent); }
.xs-moderation-activity-bars span.is-empty { height:8%; opacity:.35; }
.xs-moderation-health-dot { width:10px; height:10px; margin-top:4px; border-radius:50%; background:#71d27a; box-shadow:0 0 0 5px rgba(113,210,122,.12); }
.xs-moderation-health-dot.is-alert { background:#f4ae62; box-shadow:0 0 0 5px rgba(244,174,98,.12); }
.xs-moderation-search { display:flex; gap:8px; }
.xs-moderation-search input { flex:1; }
.xs-moderation-member { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--xs-line); }
.xs-moderation-member:last-child { border-bottom:0; }
.xs-moderation-member-main { display:grid; gap:3px; min-width:0; flex:1; }
.xs-moderation-member-main small { overflow:hidden; color:var(--xs-muted); text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.xs-moderation-member-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.xs-moderation-queue-item { padding:14px 0; border-bottom:1px solid var(--xs-line); }
.xs-moderation-queue-item:last-child { border-bottom:0; }
.xs-moderation-queue-item header { display:flex; justify-content:space-between; gap:10px; }
.xs-moderation-queue-item p { margin:7px 0; color:var(--xs-muted); }
.xs-moderation-queue-item small { color:var(--xs-muted); font-size:11px; }
.xs-moderation-priority { color:#f8c177; font-size:10px; font-weight:800; }
@media (max-width:900px) { .xs-moderation-dashboard { grid-template-columns:repeat(2,minmax(0,1fr)); } .xs-moderation-insights { grid-template-columns:1fr; } }
@media (max-width:760px) { .xs-settings-grid,.xs-connection-cards { grid-template-columns:1fr; } .xs-settings-card header { flex-direction:column; } .xs-moderation-member { align-items:flex-start; flex-wrap:wrap; } .xs-moderation-member-actions { width:100%; justify-content:flex-start; } }
@media (max-width:760px) {
    .xs-feed-header { height:auto; min-height:55px; padding-top:9px; padding-bottom:9px; flex-wrap:wrap; }
    .xs-header-inbox { margin-left:auto; }
    .xs-server-picker-wrap { flex:1 1 150px; }
    .xs-post-head .xs-kind { min-height:21px; padding:3px 6px; font-size:8px; }
}

/* Éditeur de profil : le choix de classe et le serveur vivent dans une
   grille dédiée. Ils ne partagent plus la ligne CSS du formulaire principal
   et chaque colonne garde sa propre hauteur. */
#lezaap-app .xs-profile-identity-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    align-content: start;
    grid-auto-rows: max-content;
    min-width: 0;
}
#lezaap-app .xs-profile-identity-grid > .xs-profile-choice-field {
    align-self: start !important;
    height: max-content !important;
    min-height: 0 !important;
    min-width: 0;
    margin: 0 !important;
}
#lezaap-app .xs-profile-identity-grid .xs-choice-buttons {
    align-content: start;
    align-items: start;
}
#lezaap-app .xs-profile-social-connect-card {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid rgba(166,214,46,.18);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(22,36,28,.72), rgba(8,14,14,.76));
}
#lezaap-app .xs-profile-social-connect-card button { justify-self: start; margin-top: 4px; }
#lezaap-app .xs-settings-connection-grid { align-items: stretch; }
#lezaap-app .xs-connection-card-disabled { opacity: .72; }
#lezaap-app .xs-connection-card-disabled button:disabled { cursor: not-allowed; opacity: .62; }
#lezaap-app .xs-connection-identity { color: var(--xs-accent); font-size: 15px; }
#lezaap-app .xs-settings-connection-note { margin: 14px 0 0; color: var(--xs-muted); font-size: 12px; }
@media (max-width:760px) {
    #lezaap-app .xs-profile-identity-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Profil public : une fiche de joueur lisible, avec identité au-dessus et
   informations persistantes à gauche du contenu. */
.xs-public-profile { overflow:hidden; border:1px solid var(--xs-line); border-radius:22px; background:linear-gradient(145deg,rgba(20,31,28,.98),rgba(10,16,17,.98)); box-shadow:0 22px 60px rgba(0,0,0,.22); }
.xs-public-profile-cover { position:relative; min-height:156px; background:radial-gradient(circle at 80% 10%,color-mix(in srgb,var(--xs-accent) 28%,transparent),transparent 42%),linear-gradient(135deg,#203c2b,#0d1717 72%); background-size:cover; background-position:center; }
.xs-profile-cover-shine { position:absolute; inset:0; background:linear-gradient(180deg,transparent 15%,rgba(6,10,11,.58) 100%); pointer-events:none; }
.xs-public-profile-header { position:relative; display:flex; align-items:flex-end; gap:18px; min-height:126px; padding:0 24px 20px; border-bottom:1px solid var(--xs-line); background:linear-gradient(180deg,rgba(9,15,16,.05),rgba(9,15,16,.9)); }
.xs-public-profile-avatar { flex:0 0 100px; width:100px; height:100px; margin-top:-48px; border:4px solid var(--xs-panel); border-radius:28px; object-fit:cover; background:var(--xs-panel-2); box-shadow:0 14px 30px rgba(0,0,0,.3); }
.xs-public-profile-identity { min-width:0; display:grid; gap:4px; padding-bottom:3px; }
.xs-profile-eyebrow { color:var(--xs-accent); font-size:10px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.xs-public-profile-identity h1 { margin:0; color:var(--xs-text); font-size:clamp(22px,3vw,31px); line-height:1.05; letter-spacing:-.02em; }
.xs-public-profile-identity p { margin:3px 0 0; color:var(--xs-muted); font-size:12px; }
.xs-profile-actions { display:flex; align-items:center; justify-content:flex-end; gap:7px; flex-wrap:wrap; margin-left:auto; padding-bottom:3px; }
.xs-profile-actions .xs-danger { color:#ff9ba2; }
.xs-public-profile-layout { display:grid; grid-template-columns:minmax(230px,290px) minmax(0,1fr); align-items:start; gap:20px; padding:20px; }
.xs-profile-sidebar { display:grid; gap:13px; min-width:0; }
.xs-profile-main { display:grid; gap:14px; min-width:0; }
.xs-profile-block { margin:0; padding:15px; border:1px solid var(--xs-line); border-radius:16px; background:rgba(255,255,255,.02); }
.xs-profile-block .xs-card-title { margin-bottom:11px; }
.xs-profile-block .xs-card-title h2 { font-size:13px; }
.xs-profile-block .xs-card-title > span { color:var(--xs-muted); font-size:10px; }
.xs-profile-about .xs-profile-bio { margin:0; color:var(--xs-muted); font-size:13px; line-height:1.6; white-space:pre-wrap; }
.xs-profile-sidebar .xs-profile-details { grid-template-columns:1fr; gap:0; margin:0; border:0; background:transparent; }
.xs-profile-sidebar .xs-profile-details > div { padding:8px 0; border-bottom:1px solid rgba(255,255,255,.06); }
.xs-profile-sidebar .xs-profile-details > div:last-child { border-bottom:0; }
.xs-profile-characters .xs-character-grid { display:grid; gap:8px; }
.xs-profile-characters .xs-character-card { grid-template-columns:38px minmax(0,1fr); padding:9px; border-radius:12px; }
.xs-profile-characters .xs-character-card > b { grid-column:2; justify-self:start; }
.xs-profile-characters .xs-character-class { width:38px; height:38px; }
.xs-profile-characters .xs-character-card h3 { font-size:12px; }
.xs-profile-characters .xs-character-card p,.xs-profile-characters .xs-character-card small { font-size:10px; }
.xs-profile-main .xs-public-profile-stats { margin:0; border:1px solid var(--xs-line); border-radius:16px; background:rgba(255,255,255,.02); }
.xs-profile-main .xs-profile-tabs { position:sticky; top:0; z-index:3; margin:0; padding:4px; border:1px solid var(--xs-line); border-radius:13px; background:rgba(12,19,19,.94); box-shadow:0 8px 18px rgba(0,0,0,.16); backdrop-filter:blur(14px); }
.xs-profile-main .xs-profile-tabs button { min-height:36px; border-radius:9px; font-size:11px; }
.xs-profile-main #xs-profile-content { min-width:0; }
.xs-profile-sidebar .xs-social-links { display:block; }
.xs-profile-sidebar .xs-social-link { width:100%; justify-content:space-between; box-sizing:border-box; }

/* Footer institutionnel : la mention de non-affiliation reste visible sans
   prendre le dessus sur la navigation. */
.xs-site-footer { display:grid; grid-template-columns:minmax(190px,1fr) minmax(330px,1.5fr); gap:22px 34px; margin:38px 0 0; padding:24px 2px 12px; border-top:1px solid var(--xs-line); color:var(--xs-muted); font-size:11px; }
.xs-site-footer-brand { display:flex; align-items:flex-start; gap:11px; }
.xs-site-footer-brand img { width:34px; height:34px; object-fit:contain; }
.xs-site-footer-brand div { display:grid; gap:3px; }
.xs-site-footer-brand strong { color:var(--xs-text); font-size:15px; }
.xs-site-footer-brand span { max-width:170px; line-height:1.45; }
.xs-site-footer-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.xs-site-footer-links > div { display:grid; align-content:start; gap:7px; }
.xs-site-footer-heading { color:var(--xs-text); font-size:10px; font-weight:900; letter-spacing:.09em; text-transform:uppercase; }
.xs-site-footer-links a { color:var(--xs-muted); text-decoration:none; }
.xs-site-footer-links a:hover { color:var(--xs-accent); }
.xs-site-footer-legal { grid-column:1/-1; display:flex; align-items:flex-start; gap:16px; padding-top:13px; border-top:1px solid rgba(255,255,255,.06); color:rgba(188,201,194,.64); font-size:10px; line-height:1.5; }
.xs-site-footer-legal span { flex:0 0 auto; color:var(--xs-muted); white-space:nowrap; }
.xs-site-footer-legal p { margin:0; max-width:760px; }

@media (max-width:900px) {
    .xs-public-profile-layout { grid-template-columns:1fr; }
    .xs-profile-sidebar { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
    .xs-profile-characters,.xs-profile-sidebar .xs-social-links { grid-column:1/-1; }
}
@media (max-width:600px) {
    .xs-public-profile-cover { min-height:126px; }
    .xs-public-profile-header { align-items:flex-start; flex-wrap:wrap; gap:11px; padding:0 14px 15px; }
    .xs-public-profile-avatar { flex-basis:78px; width:78px; height:78px; margin-top:-35px; border-radius:21px; }
    .xs-public-profile-identity { flex:1 1 calc(100% - 100px); padding-top:4px; }
    .xs-profile-actions { width:100%; justify-content:flex-start; margin-left:0; padding:0; }
    .xs-profile-actions .xs-primary,.xs-profile-actions .xs-secondary,.xs-profile-actions .xs-danger { min-height:33px; padding:0 10px; font-size:11px; }
    .xs-public-profile-layout { padding:14px; }
    .xs-profile-sidebar { grid-template-columns:1fr; }
    .xs-profile-characters,.xs-profile-sidebar .xs-social-links { grid-column:auto; }
    .xs-profile-main .xs-profile-tabs { overflow:auto; justify-content:flex-start; }
    .xs-profile-main .xs-profile-tabs button { flex:0 0 auto; }
    .xs-site-footer { grid-template-columns:1fr; gap:18px; }
    .xs-site-footer-links { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .xs-site-footer-legal { display:grid; gap:8px; }
}

/* Bloc d’accueil indexable : il reste compact pour ne pas concurrencer le fil. */
.xs-seo-intro { max-width: 1180px; margin: 22px auto 0; padding: 28px 30px; border: 1px solid rgba(166,214,46,.18); border-radius: 22px; background: linear-gradient(135deg, rgba(24,42,30,.94), rgba(10,17,15,.96)); box-shadow: 0 18px 44px rgba(0,0,0,.18); }
.xs-seo-intro-copy { max-width: 760px; }
.xs-seo-intro h1 { margin: 8px 0 10px; color: #f3f7ef; font-size: clamp(24px,3vw,36px); line-height: 1.08; letter-spacing: -.025em; }
.xs-seo-intro p { margin: 0; color: rgba(222,235,224,.72); font-size: 15px; }
.xs-seo-intro-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 22px; }
.xs-seo-intro-grid a { display: grid; gap: 5px; min-height: 86px; padding: 15px 16px; border: 1px solid rgba(185,222,193,.14); border-radius: 14px; color: #f2f8ef; background: rgba(8,14,12,.4); transition: border-color .18s ease, transform .18s ease, background .18s ease; }
.xs-seo-intro-grid a:hover, .xs-seo-intro-grid a:focus-visible { border-color: rgba(166,214,46,.5); background: rgba(166,214,46,.08); transform: translateY(-2px); outline: 0; }
.xs-seo-intro-grid strong { font-size: 15px; }
.xs-seo-intro-grid span { color: rgba(222,235,224,.64); font-size: 12px; }
@media (max-width:760px) { .xs-seo-intro { margin: 14px 8px 0; padding: 22px 18px; border-radius: 16px; } .xs-seo-intro-grid { grid-template-columns: 1fr; } }

/* Le mode vidéo garde une grille fixe : la navigation ne doit jamais se déplacer. */
#lezaap-app.xs-video-mode { display:grid !important; grid-template-columns:228px minmax(0,1fr) !important; width:100% !important; max-width:none !important; margin:0 !important; justify-content:stretch !important; }
#lezaap-app.xs-video-mode .xs-sidebar-left { display:flex !important; grid-column:1; grid-row:1; position:sticky; top:0; height:100vh; }
#lezaap-app.xs-video-mode .xs-sidebar-right,
#lezaap-app.xs-video-mode .xs-feed-header,
#lezaap-app.xs-video-mode .xs-game-switcher,
#lezaap-app.xs-video-mode .xs-stories,
#lezaap-app.xs-video-mode .xs-composer-mini,
#lezaap-app.xs-video-mode #xs-load-more { display:none !important; }
#lezaap-app.xs-video-mode .xs-main { grid-column:2; grid-row:1; width:100%; min-width:0; min-height:100vh; margin:0; border:0; overflow:visible; }
#lezaap-app.xs-video-mode #xs-feed { width:100%; margin:0; padding:0 0 24px; }
#lezaap-app.xs-video-mode .xs-video-mode-tabs { position:sticky; top:12px; z-index:10; margin:12px auto; }
#lezaap-app.xs-video-mode .xs-video-deck { width:min(100%,920px); margin:0 auto; }
@media (max-width:920px) and (min-width:761px) {
    #lezaap-app.xs-video-mode { grid-template-columns:86px minmax(0,1fr) !important; }
}
@media (max-width:760px) {
    #lezaap-app.xs-video-mode { display:block !important; }
    #lezaap-app.xs-video-mode .xs-sidebar-left { display:none !important; }
    #lezaap-app.xs-video-mode .xs-main { display:block; min-height:100dvh; }
    #lezaap-app.xs-video-mode #xs-feed { padding:0 7px 18px; }
    #lezaap-app.xs-video-mode .xs-video-mode-tabs { top:8px; margin:8px auto; }
    #lezaap-app.xs-video-mode .xs-video-deck { width:100%; }
}

.xs-profile-editor form > label { align-self: start; min-width: 0; }
.xs-profile-editor select, .xs-character-row select { box-sizing: border-box; height: 42px; min-height: 42px; max-height: 42px; line-height: 1.2; align-self: start; }
.xs-profile-editor form > label > select, .xs-character-row > label > select { width: 100%; }

.xs-character-row {
    display: grid;
    grid-template-columns: 72px minmax(180px,1.2fr) minmax(145px,.9fr) minmax(180px,1fr);
    grid-template-areas: "portrait pseudo game server" "portrait class class gender" "portrait level guild actions";
    gap: 13px 14px; align-items: start; padding: 18px 0 15px;
}
.xs-character-row-portrait { grid-area: portrait; align-self: stretch; min-height: 142px; padding: 13px 5px; border: 1px solid rgba(166,214,46,.10); border-radius: 15px; background: linear-gradient(160deg,rgba(166,214,46,.10),rgba(7,12,12,.32)); }
.xs-character-row-portrait .xs-character-editor-face { width: 52px; height: 52px; flex-basis: 52px; border-radius: 14px; }
.xs-character-row-portrait span { font-size: 8px; letter-spacing: .08em; }
.xs-character-pseudo { grid-area: pseudo; }
.xs-character-row > label:has([data-character="server"]) { grid-area: server; }
.xs-character-row > label.xs-character-choice-field:not(.xs-character-class-field) { grid-area: game; }
.xs-character-class-field { grid-area: class; min-width: 0; }
.xs-character-gender-field { grid-area: gender; min-width: 0; }
.xs-character-row > label:has([data-character="level"]) { grid-area: level; }
.xs-character-row > label:has([data-character="guild"]) { grid-area: guild; }
.xs-character-row-actions { grid-area: actions; grid-column: auto; align-self: end; min-height: 42px; margin: 0; padding: 0; border: 0; }
.xs-character-row-actions .xs-checkbox { min-height: 34px; margin-right: auto; }
.xs-character-row-actions .xs-danger-link { min-height: 34px; padding: 0 3px; }
.xs-character-row .xs-choice-buttons { margin-top: 6px; }

.xs-post-manage { position: absolute; top: 11px; right: 11px; z-index: 5; display: block; width: auto; padding: 0; border: 0; background: transparent; box-shadow: none; opacity: .72; }
.xs-post-manage:hover, .xs-post-manage:focus-within { opacity: 1; }
.xs-post-menu-toggle { position:relative; display:grid; place-items:center; width:30px; height:30px; min-height:30px; padding:0; border:1px solid rgba(255,255,255,.13); border-radius:9px; color:rgba(230,240,235,.72); background:rgba(7,11,12,.58); font-size:0; line-height:1; cursor:pointer; box-shadow:0 5px 14px rgba(0,0,0,.16); }
.xs-post-menu-toggle::before { content:'⋯' !important; position:absolute; inset:0; display:grid; place-items:center; margin:0 !important; color:inherit; font-size:18px !important; line-height:1; text-indent:0; }
.xs-post-menu-toggle:hover, .xs-post-menu-toggle:focus-visible, .xs-post-manage.is-open .xs-post-menu-toggle { color: #eaf5ed; border-color: rgba(166,214,46,.48); background: rgba(21,30,28,.92); outline: 0; }
.xs-post-manage-menu { position: absolute; top: 36px; right: 0; display: none; min-width: 148px; padding: 5px; border: 1px solid rgba(170,222,207,.18); border-radius: 12px; background: rgba(14,21,21,.97); box-shadow: 0 16px 34px rgba(0,0,0,.36); backdrop-filter: blur(14px); }
.xs-post-manage.is-open .xs-post-manage-menu { display: grid; gap: 2px; }
.xs-post-manage-menu button { display: flex; align-items: center; width: 100%; min-height: 32px; padding: 0 10px; border: 0; border-radius: 8px; color: rgba(228,239,233,.78); background: transparent; font-size: 12px; font-weight: 700; text-align: left; cursor: pointer; }
.xs-post-manage-menu button::before { content: none !important; }
.xs-post-manage-menu button:hover, .xs-post-manage-menu button:focus-visible { color: #f5fff7; background: rgba(166,214,46,.12); outline: 0; }
.xs-post-manage-menu .xs-post-pin.is-active { color: var(--xs-accent); }
.xs-post-manage-menu .xs-post-delete:hover, .xs-post-manage-menu .xs-post-delete:focus-visible { color: #ff9a9f; background: rgba(255,105,117,.11); }

#lezaap-app.xs-video-mode #xs-feed { padding-left: 0; padding-right: 0; }
#lezaap-app.xs-video-mode .xs-video-mode-tabs { margin: 10px auto 12px; }
#lezaap-app.xs-video-mode .xs-video-deck { width: 100%; margin: 0; }

@media (max-width:1180px) and (min-width:761px) {
    .xs-character-row { grid-template-columns: 62px minmax(0,1fr) minmax(0,1fr); grid-template-areas: "portrait pseudo pseudo" "portrait game server" "portrait class class" "portrait gender level" "portrait guild guild" "actions actions actions"; }
    .xs-character-row-portrait { min-height: 184px; }
    .xs-character-row-actions { grid-column: auto; }
}
@media (max-width:760px) {
    .xs-feed-header > select { flex: 0 1 118px; height: 34px; padding-left: 7px; padding-right: 24px; font-size: 10px; }
    #xs-game-filter { flex-basis: 112px; }
    .xs-character-row { grid-template-columns: 56px minmax(0,1fr); grid-template-areas: "portrait pseudo" "portrait game" "portrait server" "portrait class" "portrait gender" "portrait level" "portrait guild" "actions actions"; gap: 11px 10px; padding: 16px 0 14px; }
    .xs-character-row-portrait { min-height: 160px; }
    .xs-character-row-actions { grid-column: auto; }
    #lezaap-app.xs-video-mode #xs-feed { padding-left: 7px; padding-right: 7px; }
}

/* Contrôles de formulaire cohérents sur tous les écrans de l’application. */
#lezaap-app input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#lezaap-app select,
#lezaap-app textarea {
    min-height: 42px;
    border: 1px solid rgba(185,222,193,.16);
    border-radius: 12px;
    color: var(--xs-text);
    background: linear-gradient(145deg, rgba(22,31,29,.96), rgba(8,13,14,.96));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
    font: inherit;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
#lezaap-app input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#lezaap-app textarea { padding: 10px 12px; }
#lezaap-app select {
    appearance: none;
    padding: 9px 38px 9px 12px;
    background-image: linear-gradient(45deg, transparent 50%, rgba(228,240,232,.72) 50%), linear-gradient(135deg, rgba(228,240,232,.72) 50%, transparent 50%), linear-gradient(145deg, rgba(22,31,29,.96), rgba(8,13,14,.96));
    background-position: calc(100% - 17px) 18px, calc(100% - 11px) 18px, 0 0;
    background-size: 6px 6px, 6px 6px, 100% 100%;
    background-repeat: no-repeat;
}
#lezaap-app input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
#lezaap-app select:focus,
#lezaap-app textarea:focus {
    border-color: color-mix(in srgb, var(--xs-accent) 72%, #6f8c7a);
    outline: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--xs-accent) 14%, transparent), inset 0 1px 0 rgba(255,255,255,.035);
    background-color: rgba(20,33,28,.98);
}
#lezaap-app input[type="number"] { appearance: textfield; }
#lezaap-app input[type="number"]::-webkit-inner-spin-button,
#lezaap-app input[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; }
#lezaap-app input::placeholder,
#lezaap-app textarea::placeholder { color: rgba(188,201,194,.48); }

/* Selecteurs homogènes : les listes ouvertes restent lisibles avec le thème
   sombre, sans les flèches et les espacements par défaut du navigateur. */
#lezaap-app select,
.xs-auth-page select,
.xs-contact-page select {
    color-scheme: dark;
    -webkit-appearance: none;
    appearance: none;
    background-clip: padding-box;
}
#lezaap-app select::-ms-expand,
.xs-auth-page select::-ms-expand,
.xs-contact-page select::-ms-expand { display: none; }
#lezaap-app select:hover,
.xs-auth-page select:hover,
.xs-contact-page select:hover { border-color: rgba(166,214,46,.42); }
#lezaap-app select option,
#lezaap-app select optgroup,
.xs-auth-page select option,
.xs-contact-page select option { color: #eaf2eb; background: #101916; }
#lezaap-app select optgroup,
.xs-auth-page select optgroup,
.xs-contact-page select optgroup { color: var(--xs-accent); font-weight: 800; }
.xs-auth-alert.is-success { border-color: rgba(115,210,118,.34); color: #d8f4d8; background: rgba(39,126,78,.20); }

/* En-tête : la recherche respire entre les onglets et les filtres. */
.xs-feed-header .xs-tabs { flex: 0 0 auto; }
.xs-feed-header .xs-global-search { flex: 1 1 clamp(280px, 34vw, 430px); max-width: 430px; min-width: 240px; height: 44px; margin-left: clamp(18px, 2.8vw, 34px); margin-right: 20px; }
.xs-feed-header .xs-global-search input { font-size: 13px; }
.xs-feed-header .xs-server-picker-wrap { flex: 0 1 176px; }
@media (max-width: 920px) {
    .xs-feed-header .xs-global-search { min-width: 190px; margin-left: 16px; margin-right: 12px; }
}
@media (max-width: 760px) {
    .xs-feed-header .xs-global-search { min-width: 0; height: 38px; margin: 0; }
}

/* Un seul repère visuel pour le menu d’une publication. */
.xs-post-menu-toggle { color: transparent !important; text-indent: -9999px; overflow: hidden; }
.xs-post-menu-toggle::before { content: '⋯' !important; display: grid; place-items: center; color: rgba(230,240,235,.72) !important; text-indent: 0; }
.xs-post-menu-toggle::after { content: none !important; }

/* Le deck vidéo est une vue plein écran : le menu reste fixe et le contenu
   ne dépend plus des colonnes variables du fil classique. */
#lezaap-app.xs-video-mode.xs-video-layout-lock {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    overflow: visible !important;
}
#lezaap-app.xs-video-mode.xs-video-layout-lock .xs-sidebar-left {
    display: flex !important;
    position: fixed !important;
    z-index: 30 !important;
    inset: 0 auto 0 0 !important;
    width: 228px !important;
    height: 100dvh !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
#lezaap-app.xs-video-mode.xs-video-layout-lock .xs-main {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 100dvh !important;
    margin: 0 0 0 228px !important;
    border: 0 !important;
    overflow: visible !important;
}
#lezaap-app.xs-video-mode.xs-video-layout-lock #xs-feed {
    width: 100% !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 0 24px !important;
}
#lezaap-app.xs-video-mode.xs-video-layout-lock .xs-video-mode-tabs {
    position: sticky !important;
    top: 12px !important;
    z-index: 40 !important;
    width: max-content !important;
    max-width: calc(100% - 24px) !important;
    margin: 12px auto !important;
}
#lezaap-app.xs-video-mode.xs-video-layout-lock .xs-video-deck {
    width: min(100%, 920px) !important;
    margin: 0 auto !important;
}
@media (max-width:920px) and (min-width:761px) {
    #lezaap-app.xs-video-mode.xs-video-layout-lock .xs-sidebar-left { width: 86px !important; }
    #lezaap-app.xs-video-mode.xs-video-layout-lock .xs-main { margin-left: 86px !important; }
}
@media (max-width:760px) {
    #lezaap-app.xs-video-mode.xs-video-layout-lock .xs-sidebar-left { display: none !important; }
    #lezaap-app.xs-video-mode.xs-video-layout-lock .xs-main { margin-left: 0 !important; }
    #lezaap-app.xs-video-mode.xs-video-layout-lock #xs-feed { padding: 0 7px 82px !important; }
    #lezaap-app.xs-video-mode.xs-video-layout-lock .xs-video-mode-tabs { top: 8px !important; margin: 8px auto !important; }
    #lezaap-app.xs-video-mode.xs-video-layout-lock .xs-video-deck { width: 100% !important; }
}

/* Habillage final de la vue vidéo : une scène lisible et contenue, sans
   reprendre les hauteurs/colonnes du fil classique à chaque changement d’onglet. */
#lezaap-app.xs-video-mode.xs-video-layout-lock {
    background: radial-gradient(circle at 60% -12%, rgba(113,156,53,.18), transparent 42%), #08100d !important;
}
#lezaap-app.xs-video-mode.xs-video-layout-lock .xs-video-mode-tabs {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    padding: 5px !important;
    border: 1px solid rgba(173,211,136,.18) !important;
    border-radius: 999px !important;
    background: rgba(10,20,15,.86) !important;
    box-shadow: 0 14px 35px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.05);
    backdrop-filter: blur(16px);
}
#lezaap-app.xs-video-mode.xs-video-layout-lock .xs-video-mode-tabs button {
    min-height: 34px;
    padding: 7px 14px;
    border: 0 !important;
    border-radius: 999px !important;
    color: rgba(230,239,232,.68);
    background: transparent !important;
    font-size: 12px;
    font-weight: 760;
    cursor: pointer;
}
#lezaap-app.xs-video-mode.xs-video-layout-lock .xs-video-mode-tabs button:hover,
#lezaap-app.xs-video-mode.xs-video-layout-lock .xs-video-mode-tabs button.is-active {
    color: #13210e !important;
    background: var(--xs-accent) !important;
    box-shadow: 0 5px 16px color-mix(in srgb, var(--xs-accent) 25%, transparent);
}
#lezaap-app.xs-video-mode.xs-video-layout-lock .xs-video-deck {
    min-height: 520px;
    padding: 8px;
    border: 1px solid rgba(173,211,136,.15);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(16,31,22,.92), rgba(7,15,12,.98));
    box-shadow: 0 24px 70px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.035);
}
#lezaap-app.xs-video-mode.xs-video-layout-lock .xs-video-slide {
    height: min(760px, calc(100dvh - 124px)) !important;
    min-height: 520px !important;
    border: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
}
#lezaap-app.xs-video-mode.xs-video-layout-lock .xs-video-empty {
    min-height: 504px;
    display: grid;
    place-content: center;
    gap: 8px;
    padding: 32px;
    border: 1px dashed rgba(173,211,136,.25);
    border-radius: 18px;
    color: rgba(230,239,232,.78);
    text-align: center;
    background: radial-gradient(circle at 50% 32%, rgba(122,181,70,.14), transparent 42%), rgba(8,17,12,.78);
}
#lezaap-app.xs-video-mode.xs-video-layout-lock .xs-video-empty strong { color: #f4f8f2; font-size: 18px; }
#lezaap-app.xs-video-mode.xs-video-layout-lock .xs-video-empty span { color: rgba(208,222,211,.62); font-size: 13px; }
/* Final cascade guard: class cards stay aligned after game catalog switches. */
.xs-preferred-class-options { align-items: stretch !important; }
.xs-preferred-class-options .xs-class-choice { min-height:76px !important; height:76px !important; }
.xs-preferred-class-options .xs-class-choice > span { min-height:76px !important; }
.xs-preferred-class-options .xs-class-choice-face { width:44px !important; height:44px !important; flex-basis:44px !important; }
@media (max-width:760px) {
    #lezaap-app.xs-video-mode.xs-video-layout-lock .xs-video-mode-tabs { max-width: calc(100% - 12px) !important; overflow-x: auto; }
    #lezaap-app.xs-video-mode.xs-video-layout-lock .xs-video-mode-tabs button { padding-inline: 11px; }
    #lezaap-app.xs-video-mode.xs-video-layout-lock .xs-video-deck { min-height: 500px; padding: 5px; border-radius: 18px; }
    #lezaap-app.xs-video-mode.xs-video-layout-lock .xs-video-slide { height: calc(100dvh - 116px) !important; min-height: 500px !important; }
    #lezaap-app.xs-video-mode.xs-video-layout-lock .xs-video-empty { min-height: 484px; }
}

/* Corrections de finition : les éditeurs restent lisibles quelle que soit la
   longueur du catalogue de serveurs et les cartes OAuth ne compressent plus
   leurs textes dans une colonne invisible. */
#lezaap-app .xs-settings-connection-grid .xs-connection-card {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row;
    align-items: stretch;
    min-width: 0;
    gap: 9px;
    padding: 16px;
    background: linear-gradient(145deg, rgba(23,38,30,.9), rgba(10,18,15,.94));
}
#lezaap-app .xs-settings-connection-grid .xs-connection-card > * { min-width: 0; }
#lezaap-app .xs-settings-connection-grid .xs-connection-card header { width: 100%; }
#lezaap-app .xs-settings-connection-grid .xs-connection-card .xs-connection-state { display: block; overflow-wrap: anywhere; }
#lezaap-app .xs-settings-connection-grid .xs-connection-card .xs-primary,
#lezaap-app .xs-settings-connection-grid .xs-connection-card .xs-secondary { justify-self: start; max-width: 100%; }
#lezaap-app .xs-settings-connection-grid .xs-social-link-visibility { margin-top: 3px; }

/* Un seul panneau de serveurs : il grandit avec les choix disponibles au lieu
   d’ouvrir un second scroll imbriqué dans le formulaire. */
#lezaap-app .xs-character-editor .xs-server-buttons,
#lezaap-app .xs-profile-editor .xs-server-buttons {
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: auto;
    padding-right: 0;
}

/* Carte personnage : portrait stable à gauche, champs indépendants à droite.
   Le sélecteur précédent ciblait le serveur comme un jeu et provoquait le
   chevauchement visible dans les petits écrans de bureau. */
#lezaap-app .xs-character-editor { padding: 18px 20px 12px; border: 1px solid rgba(166,214,46,.16); border-radius: 18px; background: linear-gradient(145deg, rgba(18,31,24,.82), rgba(8,15,13,.92)); }
#lezaap-app #xs-character-rows { display: grid; gap: 12px; }
#lezaap-app .xs-character-row {
    display: grid;
    grid-template-columns: 80px minmax(0,1fr) minmax(0,1fr) minmax(150px,.78fr) !important;
    grid-template-areas: "portrait pseudo pseudo pseudo" "portrait game server server" "portrait class class gender" "portrait level guild actions" !important;
    gap: 13px 14px;
    align-items: start;
    min-width: 0;
    padding: 18px;
    border: 1px solid rgba(166,214,46,.14);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(22,36,28,.8), rgba(9,17,14,.95));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 12px 30px rgba(0,0,0,.12);
}
#lezaap-app .xs-character-row > * { min-width: 0; }
#lezaap-app .xs-character-row > label:has([data-character="game"]) { grid-area: game !important; }
#lezaap-app .xs-character-row > label:has([data-character="server"]) { grid-area: server !important; }
#lezaap-app .xs-character-row > .xs-character-pseudo { grid-area: pseudo !important; }
#lezaap-app .xs-character-row > .xs-character-class-field { grid-area: class !important; }
#lezaap-app .xs-character-row > .xs-character-gender-field { grid-area: gender !important; }
#lezaap-app .xs-character-row > label:has([data-character="level"]) { grid-area: level !important; }
#lezaap-app .xs-character-row > label:has([data-character="guild"]) { grid-area: guild !important; }
#lezaap-app .xs-character-row-portrait { min-height: 188px; display: grid; place-content: center; gap: 8px; align-self: stretch; }
#lezaap-app .xs-character-row .xs-choice-buttons { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; margin-top: 6px; }
#lezaap-app .xs-character-row .xs-choice-button { min-height: 34px; }
#lezaap-app .xs-character-row-actions { display: flex; align-items: center; justify-content: space-between; align-self: end; min-height: 42px; }

/* Le panneau emoji devient une vraie palette, avec un en-tête lisible et une
   grille régulière plutôt qu’un flux de boutons collés. */
#lezaap-app .xs-emoji-popover { display: block !important; width: min(338px, calc(100vw - 28px)); padding: 10px; border-radius: 15px; background: rgba(10,19,15,.985); }
#lezaap-app .xs-emoji-popover[hidden] { display: none !important; }
#lezaap-app .xs-emoji-popover-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 2px 3px 9px; border-bottom: 1px solid var(--xs-line); }
#lezaap-app .xs-emoji-popover-title strong { color: var(--xs-text); font-size: 12px; }
#lezaap-app .xs-emoji-popover-title span { color: var(--xs-muted); font-size: 10px; }
#lezaap-app .xs-emoji-grid { display: grid; grid-template-columns: repeat(8, minmax(0,1fr)); gap: 3px; max-height: 246px; overflow: auto; padding-top: 7px; }
#lezaap-app .xs-emoji-grid button { width: 100%; height: 32px; }

#lezaap-app .xs-moderation-detail-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(260px,.8fr); gap: 12px; }
#lezaap-app .xs-moderation-breakdown { display: grid; gap: 10px; }
#lezaap-app .xs-moderation-breakdown-row { display: grid; grid-template-columns: minmax(100px,1fr) auto; gap: 5px 10px; align-items: center; color: var(--xs-muted); font-size: 11px; }
#lezaap-app .xs-moderation-breakdown-row b { color: var(--xs-text); font-size: 12px; }
#lezaap-app .xs-moderation-breakdown-row i { grid-column: 1 / -1; display: block; width: var(--bar, 5%); height: 5px; border-radius: 99px; background: linear-gradient(90deg, var(--xs-accent), color-mix(in srgb, var(--xs-accent) 30%, transparent)); box-shadow: 0 0 14px color-mix(in srgb, var(--xs-accent) 18%, transparent); }
#lezaap-app .xs-moderation-system-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
#lezaap-app .xs-moderation-system-card { display: grid; gap: 5px; min-height: 70px; align-content: center; padding: 11px; border: 1px solid var(--xs-line); border-radius: 12px; background: rgba(255,255,255,.025); }
#lezaap-app .xs-moderation-system-card span { color: var(--xs-muted); font-size: 10px; }
#lezaap-app .xs-moderation-system-card strong { color: var(--xs-accent); font-size: 14px; }
#lezaap-app .xs-moderation-system-card strong.is-alert { color: #f2b069; }

@media (max-width:1180px) and (min-width:761px) {
    #lezaap-app .xs-character-row {
        grid-template-columns: 72px minmax(0,1fr) minmax(0,1fr) minmax(145px,.82fr) !important;
        grid-template-areas: "portrait pseudo pseudo pseudo" "portrait game server server" "portrait class class gender" "portrait level guild actions" !important;
    }
}
@media (max-width:760px) {
    #lezaap-app .xs-character-editor { padding: 15px 14px 9px; }
    #lezaap-app .xs-character-row { grid-template-columns: 58px minmax(0,1fr) !important; grid-template-areas: "portrait pseudo" "portrait game" "portrait server" "portrait class" "portrait gender" "portrait level" "portrait guild" "actions actions" !important; gap: 11px 10px; padding: 16px 0 14px; }
    #lezaap-app .xs-character-row-portrait { min-height: 166px; }
    #lezaap-app .xs-character-row-actions { grid-column: auto; }
    #lezaap-app .xs-moderation-detail-grid { grid-template-columns: 1fr; }
}

/* Structure finale du bloc personnages : une fiche claire, indépendante du
   jeu sélectionné, sans grille qui se recompose selon le nombre de serveurs. */
#lezaap-app .xs-character-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: none !important;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(166,214,46,.18);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(24,39,30,.94), rgba(8,16,13,.98));
    box-shadow: 0 14px 36px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.04);
}
#lezaap-app .xs-character-row-head {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) auto;
    align-items: center;
    gap: 15px;
    min-width: 0;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    background: linear-gradient(90deg, rgba(166,214,46,.10), rgba(166,214,46,.025) 58%, transparent);
}
#lezaap-app .xs-character-row-head > * { min-width: 0; }
#lezaap-app .xs-character-row-head .xs-character-row-portrait { grid-area: auto !important; }
#lezaap-app .xs-character-row-head .xs-character-identity,
#lezaap-app .xs-character-row-head .xs-character-pseudo { grid-area: auto !important; }
#lezaap-app .xs-character-row-portrait {
    display: grid;
    place-items: center;
    gap: 5px;
    width: 76px;
    min-height: 76px;
    padding: 8px;
    align-self: center;
    border: 1px solid rgba(166,214,46,.22);
    border-radius: 16px;
    background: radial-gradient(circle at 50% 20%, rgba(166,214,46,.20), rgba(8,16,13,.42));
}
#lezaap-app .xs-character-row-portrait .xs-character-editor-face { width: 48px; height: 48px; flex-basis: 48px; border-radius: 14px; }
#lezaap-app .xs-character-row-portrait span { color: var(--xs-muted); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
#lezaap-app .xs-character-identity { display: grid; gap: 5px; min-width: 0; }
#lezaap-app .xs-character-identity .xs-kicker { margin: 0; }
#lezaap-app .xs-character-pseudo { display: grid; gap: 5px; min-width: 0; margin: 0; }
#lezaap-app .xs-character-pseudo > span,
#lezaap-app .xs-character-field > span:first-child { color: var(--xs-muted); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
#lezaap-app .xs-character-pseudo input { width: 100%; min-height: 42px; }
#lezaap-app .xs-character-row-head .xs-character-row-actions { display: flex; grid-area: auto !important; align-items: center; justify-content: flex-end; gap: 10px; min-height: 42px; margin: 0; padding: 0; border: 0; }
#lezaap-app .xs-character-row-head .xs-character-row-actions .xs-checkbox { min-height: 34px; margin: 0; white-space: nowrap; }
#lezaap-app .xs-character-row-head .xs-character-remove { min-height: 34px; padding: 0 4px; white-space: nowrap; }
#lezaap-app .xs-character-row-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; min-width: 0; padding: 17px 18px 19px; }
#lezaap-app .xs-character-field { display: grid; align-content: start; gap: 7px; min-width: 0; margin: 0; }
#lezaap-app .xs-character-field input[type="number"],
#lezaap-app .xs-character-field input[maxlength] { width: 100%; min-height: 42px; }
#lezaap-app .xs-character-game-field { grid-column: span 4; }
#lezaap-app .xs-character-server-field { grid-column: span 8; }
#lezaap-app .xs-character-class-field { grid-column: span 8; }
#lezaap-app .xs-character-gender-field { grid-column: span 4; }
#lezaap-app .xs-character-level-field { grid-column: span 3; }
#lezaap-app .xs-character-guild-field { grid-column: span 9; }
#lezaap-app .xs-character-row-body .xs-choice-buttons { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; min-height: 34px; margin: 0; }
#lezaap-app .xs-character-row-body .xs-server-buttons { max-height: none !important; overflow: visible !important; }
#lezaap-app .xs-character-row-body .xs-choice-button { min-height: 34px; }

/* Le sélecteur d'emoji ne garde qu'une seule zone de défilement : la grille. */
#lezaap-app .xs-emoji-popover { max-height: none !important; overflow: visible !important; }
#lezaap-app .xs-emoji-popover .xs-emoji-grid { max-height: 246px; overflow: auto; overscroll-behavior: contain; }

/* Le titre confidentialité reste dans son cadre même avec une traduction
   longue ou un bouton présent sur une fenêtre étroite. */
#lezaap-app .xs-section-intro.xs-section-actions { align-items: flex-start; }
#lezaap-app .xs-section-intro.xs-section-actions > div:first-child { flex: 1 1 auto; min-width: 0; }
#lezaap-app .xs-section-intro.xs-section-actions h2,
#lezaap-app .xs-section-intro.xs-section-actions p { max-width: 100%; overflow-wrap: anywhere; }
#lezaap-app .xs-section-intro.xs-section-actions > button { flex: 0 0 auto; max-width: 100%; }

@media (max-width:760px) {
    #lezaap-app .xs-character-row-head { grid-template-columns: 58px minmax(0, 1fr); gap: 11px; padding: 14px; }
    #lezaap-app .xs-character-row-portrait { width: 58px; min-height: 62px; padding: 5px; }
    #lezaap-app .xs-character-row-portrait .xs-character-editor-face { width: 38px; height: 38px; flex-basis: 38px; }
    #lezaap-app .xs-character-row-head .xs-character-row-actions { grid-column: 1 / -1; justify-content: space-between; }
    #lezaap-app .xs-character-row-body { grid-template-columns: 1fr; gap: 12px; padding: 14px; }
    #lezaap-app .xs-character-game-field,
    #lezaap-app .xs-character-server-field,
    #lezaap-app .xs-character-class-field,
    #lezaap-app .xs-character-gender-field,
    #lezaap-app .xs-character-level-field,
    #lezaap-app .xs-character-guild-field { grid-column: auto; }
}