:root {
  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 18px;
}

:root,
[data-theme="dark"] {
  --bg: #10142a;
  --side: #0b0f21;
  --panel: #171c38;
  --panel-2: #1f2547;
  --line: #2a3160;
  --text: #e9ecfb;
  --muted: #9aa2cc;
  --accent: #9299ff;
  --accent-2: #5fd0ff;
  --accent-ink: #0d1030;
  --ok: #52e0a2;
  --bad: #ff6f86;
  --warn: #ffc857;
  --dot: rgba(146, 153, 255, 0.2);
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #f2f3fb;
  --side: #ffffff;
  --panel: #ffffff;
  --panel-2: #eceefb;
  --line: #d9dcf0;
  --text: #171a33;
  --muted: #565d85;
  --accent: #4a51d4;
  --accent-2: #0b86bd;
  --accent-ink: #ffffff;
  --ok: #0f9364;
  --bad: #d0325a;
  --warn: #b98000;
  --dot: rgba(74, 81, 212, 0.16);
  --shadow: 0 8px 24px rgba(30, 36, 90, 0.14);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* Trame de points qui s'estompe vers le bas de la page */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(var(--dot) 1.2px, transparent 1.2px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 460px);
  mask-image: linear-gradient(to bottom, #000, transparent 460px);
}
.shell, .bare-wrap { position: relative; z-index: 1; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.skip {
  position: absolute; left: -999px; top: 8px; z-index: 100;
  padding: 8px 14px; border-radius: var(--r-sm);
  background: var(--accent); color: var(--accent-ink);
}
.skip:focus { left: 8px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mono { font-family: var(--font-mono); }

/* ----- Structure --------------------------------------------------------- */

.shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }

.side {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 32px;
  padding: 28px 18px;
  background: var(--side);
  border-right: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; padding: 0 6px; }
.brand svg { width: 36px; height: 36px; color: var(--accent); flex: none; }
.brand b { display: block; font: 600 17px/1.15 var(--font-display); }
.brand small { display: block; color: var(--muted); font-size: 12.5px; }

.nav { display: grid; gap: 4px; }
.nav a, .side-foot a, .side-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border: 0; border-radius: var(--r-sm);
  background: none; color: var(--muted);
  font: 500 15px var(--font-body); text-align: left; text-decoration: none; cursor: pointer;
}
.nav a:hover, .side-foot a:hover, .side-btn:hover { color: var(--text); background: var(--panel); }
.nav a[aria-current="page"] { color: var(--text); background: var(--panel-2); box-shadow: inset 3px 0 0 var(--accent); }
.nav svg, .side-foot svg, .side-btn svg { width: 18px; height: 18px; flex: none; }
.side-foot { margin-top: auto; display: grid; gap: 4px; }

.main { width: 100%; max-width: 1200px; padding: 48px clamp(18px, 4vw, 56px) 80px; }
.bare { min-height: 100vh; display: grid; place-items: center; padding: 24px; }

/* ----- Titres ------------------------------------------------------------ */

h1 { margin: 0; font: 700 clamp(26px, 3.4vw, 36px)/1.15 var(--font-display); letter-spacing: -0.02em; }
h2 { margin: 0; font: 600 20px/1.2 var(--font-display); }
h3 { margin: 0; font: 600 16px/1.3 var(--font-display); }
.lede { margin: 8px 0 0; max-width: 60ch; color: var(--muted); }

.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 36px; }
.stamp { color: var(--muted); font-size: 13.5px; }

.section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.section-head .count { margin-left: 10px; padding: 2px 9px; border-radius: 99px; background: var(--panel-2); color: var(--muted); font: 500 13px var(--font-body); vertical-align: 2px; }
section + section { margin-top: 52px; }

/* ----- Vue d'ensemble ---------------------------------------------------- */

.overview {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: clamp(24px, 5vw, 72px);
  margin-bottom: 52px; padding: 34px clamp(20px, 3vw, 44px);
  background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.gauge { position: relative; width: 200px; height: 200px; }
.gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge circle { fill: none; stroke-width: 9; }
.gauge .track { stroke: var(--panel-2); }
.gauge .ring { stroke-linecap: round; stroke-dasharray: 0 400; transition: stroke-dasharray 1.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
.gauge .ring.a { stroke: var(--accent); }
.gauge .ring.b { stroke: var(--accent-2); transition-delay: 0.15s; }
.gauge-label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.gauge-label strong { font: 700 34px/1 var(--font-display); }
.gauge-label span { margin-top: 6px; color: var(--muted); font-size: 12.5px; }

.overview h2 { font-size: 22px; }
.overview p { margin: 6px 0 0; max-width: 52ch; color: var(--muted); }

.legend { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 18px 0 0; padding: 0; list-style: none; }
.legend li { display: flex; align-items: center; gap: 9px; color: var(--muted); }
.legend b { color: var(--text); font-weight: 600; }
.legend .sw { width: 12px; height: 12px; border-radius: 4px; }
.legend .sw.a { background: var(--accent); }
.legend .sw.b { background: var(--accent-2); }

.totals { display: flex; flex-wrap: wrap; gap: 20px 0; margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); }
.totals div { padding: 0 30px; border-left: 1px solid var(--line); }
.totals div:first-child { padding-left: 0; border-left: 0; }
.totals dt { color: var(--muted); font-size: 13.5px; }
.totals dd { margin: 2px 0 0; font: 600 30px/1.2 var(--font-display); }

/* ----- Liste des serveurs ------------------------------------------------ */

.toolbar { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; }

.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); }
.seg button {
  padding: 7px 14px; border: 0; border-radius: 7px;
  background: none; color: var(--muted);
  font: 500 14px var(--font-body); cursor: pointer;
}
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.seg .n { margin-left: 6px; color: var(--muted); font-variant-numeric: tabular-nums; }

.list { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.list-head, .row {
  display: grid;
  grid-template-columns: minmax(250px, 1.7fr) minmax(180px, 1.1fr) minmax(170px, 1fr) 90px 110px 16px;
  align-items: center; gap: 20px; padding: 16px 20px;
}
.list-head { padding-block: 12px; background: var(--side); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; font-weight: 500; }
.row { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); transition: background 0.15s; }
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--panel); box-shadow: inset 3px 0 0 var(--accent); }
.row.risk { box-shadow: inset 3px 0 0 var(--bad); }
.row::after {
  content: ""; justify-self: end; width: 8px; height: 8px;
  border-top: 2px solid var(--muted); border-right: 2px solid var(--muted);
  transform: rotate(45deg); opacity: 0; transition: opacity 0.15s, transform 0.15s;
}
.row:hover::after { opacity: 1; transform: translateX(3px) rotate(45deg); }
.row .id { font: 500 14px var(--font-mono); overflow-wrap: anywhere; }
.who { display: flex; align-items: center; gap: 14px; }
.identicon { flex: none; border-radius: 10px; }
.num { font-variant-numeric: tabular-nums; font-weight: 500; }

.badges { display: grid; gap: 4px; }
.badge { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; }
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); flex: none; }
.badge.on::before { background: var(--ok); }
.badge.off { color: var(--bad); }

.meter { display: flex; align-items: center; gap: 12px; }
.bar { flex: 1; max-width: 110px; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.meter .num { min-width: 2.2ch; }
.bar i { display: block; height: 100%; border-radius: inherit; background: var(--warn); }

.skel span { height: 14px; border-radius: 6px; background: var(--panel-2); animation: pulse 1.6s ease-in-out infinite; }
.skel span:first-child { height: 36px; border-radius: 10px; }
@keyframes pulse { 50% { opacity: 0.45; } }

.empty { padding: 44px 20px; text-align: center; color: var(--muted); }
.empty strong { display: block; margin-bottom: 6px; color: var(--text); font: 600 16px var(--font-display); }

/* ----- Champs et boutons ------------------------------------------------- */

.search {
  width: 280px; max-width: 100%; padding: 9px 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--text); font: inherit;
}
.search::placeholder { color: var(--muted); }
.search:focus { border-color: var(--accent); }

.btn {
  padding: 10px 16px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--text); font: 600 14px var(--font-body); cursor: pointer;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { background: transparent; border-color: rgba(255, 111, 134, 0.45); color: var(--bad); }
.btn.danger:hover { background: rgba(255, 111, 134, 0.1); border-color: var(--bad); }
.btn.small { padding: 6px 12px; font-size: 13px; }

/* ----- Page serveur ------------------------------------------------------ */

.back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; color: var(--muted); font-size: 14px; text-decoration: none; }
.back:hover { color: var(--text); }
.back svg { width: 16px; height: 16px; }

.id-line { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.id-line h1 { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0; font-size: clamp(20px, 3vw, 30px); overflow-wrap: anywhere; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; margin: 0 0 52px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.fact { margin: 0; padding: 22px 26px; background: var(--panel); }
.fact-clickable { cursor: pointer; user-select: none; transition: background .18s ease, transform .18s ease; }
.fact-clickable:hover { background: color-mix(in srgb, var(--panel) 82%, var(--accent)); }
.fact-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.fact-clickable::after { content: "Voir les membres →"; display: block; margin-top: 7px; color: var(--muted); font-size: 11.5px; font-weight: 500; }
.server-members-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.server-members-tools .search { flex: 1 1 260px; min-width: 220px; }
.member-role-list { display: flex; flex-wrap: wrap; gap: 6px; }
.member-role-chip { display: inline-flex; align-items: center; padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2, var(--panel)); color: var(--text); font-size: 12px; white-space: nowrap; }
.member-role-chip.muted-role { color: var(--muted); }

.member-center { position: relative; overflow: hidden; }
.member-center::before { content:""; position:absolute; inset:-40% 55% 35% -20%; background:radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent), transparent 68%); pointer-events:none; animation: member-glow 7s ease-in-out infinite alternate; }
@keyframes member-glow { from { transform:translate3d(-2%,0,0) scale(.95); opacity:.55; } to { transform:translate3d(8%,5%,0) scale(1.08); opacity:1; } }
.member-toolbar { position:relative; z-index:1; display:grid; grid-template-columns:minmax(260px,1fr) auto auto auto; gap:10px; align-items:center; margin-bottom:14px; }
.member-toolbar .search { width:100%; }
.member-select { min-height:40px; padding:8px 11px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm); color:var(--text); font:inherit; }
.member-statbar { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.member-stat { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border:1px solid var(--line); border-radius:999px; background:color-mix(in srgb,var(--panel-2) 82%,transparent); color:var(--muted); font-size:12.5px; }
.member-stat b { color:var(--text); font-variant-numeric:tabular-nums; }
.member-grid { position:relative; z-index:1; display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:12px; }
.member-card { position:relative; display:flex; gap:13px; min-width:0; padding:15px; background:linear-gradient(145deg,color-mix(in srgb,var(--panel) 96%,var(--accent)),var(--panel)); border:1px solid var(--line); border-radius:14px; cursor:pointer; overflow:hidden; transition:transform .22s cubic-bezier(.2,.8,.2,1),border-color .22s,box-shadow .22s,background .22s; animation:member-in .38s both; }
.member-card::after { content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.08) 48%,transparent 70%); transform:translateX(-120%); transition:transform .65s ease; pointer-events:none; }
.member-card:hover { transform:translateY(-4px); border-color:color-mix(in srgb,var(--accent) 70%,var(--line)); box-shadow:0 14px 35px rgba(0,0,0,.22),0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent); }
.member-card:hover::after { transform:translateX(120%); }
@keyframes member-in { from { opacity:0; transform:translateY(10px) scale(.985); } to { opacity:1; transform:none; } }
.member-avatar-wrap { position:relative; flex:none; width:48px; height:48px; }
.member-avatar { width:48px; height:48px; border-radius:14px; object-fit:cover; border:1px solid var(--line); background:var(--panel-2); }
.member-status { position:absolute; right:-2px; bottom:-2px; width:13px; height:13px; border:3px solid var(--panel); border-radius:50%; background:var(--muted); }
.member-status.online { background:var(--ok); box-shadow:0 0 10px color-mix(in srgb,var(--ok) 70%,transparent); }
.member-status.idle { background:var(--warn); }
.member-status.dnd { background:var(--bad); }
.member-main { min-width:0; flex:1; }
.member-name-line { display:flex; align-items:center; gap:7px; min-width:0; }
.member-name-line strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.member-tag { color:var(--muted); font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px; }
.member-meta { display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; }
.member-role-chip { max-width:180px; overflow:hidden; text-overflow:ellipsis; }
.member-bot { padding:2px 6px; border-radius:5px; background:color-mix(in srgb,var(--accent) 18%,transparent); color:var(--accent); font-size:10px; font-weight:700; }
.member-more { position:absolute; right:10px; top:9px; opacity:0; transform:translateX(5px); transition:.2s; color:var(--muted); font-size:16px; }
.member-card:hover .member-more { opacity:1; transform:none; }
.member-skeleton { min-height:100px; border-radius:14px; background:linear-gradient(90deg,var(--panel),var(--panel-2),var(--panel)); background-size:200% 100%; animation:member-shimmer 1.2s linear infinite; }
@keyframes member-shimmer { to { background-position:-200% 0; } }
.member-empty { border:1px dashed var(--line); border-radius:14px; }
.member-modal { width:min(560px,92vw); padding:0; overflow:hidden; }
.member-modal-head { display:flex; align-items:center; gap:14px; padding:22px; background:linear-gradient(135deg,var(--panel-2),var(--panel)); border-bottom:1px solid var(--line); }
.member-modal-head .member-avatar { width:64px; height:64px; border-radius:18px; }
.member-modal-body { padding:22px; }
.member-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:16px 0; }
.member-detail { padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--bg); }
.member-detail small { display:block; color:var(--muted); margin-bottom:3px; }
.member-detail b { overflow-wrap:anywhere; }
.member-detail-wide { grid-column:1/-1; }
.member-modal-actions { display:flex; justify-content:flex-end; gap:8px; padding-top:8px; }
.member-pagination { display:flex; justify-content:center; align-items:center; gap:10px; margin-top:16px; }
.member-pagination .stamp { min-width:120px; text-align:center; }
.member-view[hidden] { display:none!important; }
.member-role-manager{display:grid;gap:8px}.member-role-manager .config-check{margin:0}.member-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}@media(max-width:560px){.member-action-grid{grid-template-columns:1fr}}
@media (max-width:820px) { .member-toolbar { grid-template-columns:1fr 1fr; } .member-toolbar .search { grid-column:1/-1; } }
@media (max-width:560px) { .member-toolbar { grid-template-columns:1fr; } .member-detail-grid { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { .member-card,.member-card::after,.member-more,.member-status,.member-skeleton,.member-center::before { animation:none!important; transition:none!important; } }
.fact dt { color: var(--muted); font-size: 13.5px; }
.fact dd { margin: 4px 0 0; font: 600 22px/1.3 var(--font-display); }
.fact dd.state { display: flex; align-items: center; gap: 10px; }
.fact dd.state::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--bad); }
.fact dd.state.on::before { background: var(--ok); }

.activity {
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px);
  padding: 26px clamp(18px, 3vw, 32px);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.chart { display: flex; align-items: flex-end; gap: 6px; height: 132px; padding-bottom: 22px; border-bottom: 1px solid var(--line); position: relative; }
.chart .col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.chart .b { width: 100%; max-width: 30px; min-height: 3px; border-radius: 5px 5px 2px 2px; background: var(--accent); opacity: 0.5; transition: opacity 0.15s; }
.chart .b.zero { background: var(--line); opacity: 1; }
.chart .col:hover .b:not(.zero), .chart .col.today .b:not(.zero) { opacity: 1; }
.chart .d { position: absolute; bottom: -22px; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.activity .hint { margin: 14px 0 0; color: var(--muted); font-size: 13.5px; }

.top { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.top li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; }
.top .who-id { font: 500 13.5px var(--font-mono); overflow-wrap: anywhere; }
.top .cnt { font-weight: 600; font-variant-numeric: tabular-nums; }
.top .bar { grid-column: 1 / -1; max-width: none; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th { padding: 12px 16px; background: var(--side); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; font-weight: 500; text-align: left; white-space: nowrap; }
td { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td.reason { max-width: 46ch; overflow-wrap: anywhere; }
td.nowrap { white-space: nowrap; color: var(--muted); }
tbody tr:hover { background: var(--panel); }

.backups { margin: 0; padding: 0; list-style: none; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.backups li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); transition: opacity 0.25s, transform 0.25s; }
.backups li:last-child { border-bottom: 0; }
.backups li.removing { opacity: 0; transform: translateX(12px); }
.backups .name { font-weight: 500; overflow-wrap: anywhere; }
.backups .when { display: block; color: var(--muted); font-size: 13.5px; }

/* ----- Fenêtre de confirmation et notifications -------------------------- */

dialog { max-width: min(440px, 92vw); padding: 26px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--text); }
dialog::backdrop { background: rgba(6, 8, 20, 0.72); }
dialog h3 { margin: 0 0 8px; font-size: 18px; }
dialog p { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
dialog .actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 50; display: grid; gap: 10px; }
.toast { padding: 12px 16px; background: var(--panel-2); border: 1px solid var(--line); border-left: 4px solid var(--ok); border-radius: var(--r-sm); box-shadow: var(--shadow); animation: toast-in 0.2s ease-out; }
.toast.error { border-left-color: var(--bad); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ----- Connexion et pages d'erreur --------------------------------------- */

.auth { width: min(400px, 100%); padding: 34px clamp(20px, 5vw, 36px); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.auth .mark { width: 52px; height: 52px; margin-bottom: 20px; color: var(--accent); }
.auth h1 { font-size: 28px; }
.auth .lede { margin-bottom: 26px; }
.field label { display: block; margin-bottom: 8px; font-weight: 500; }
.field input { width: 100%; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text); font: 400 15px var(--font-mono); }
.field input:focus { border-color: var(--accent); }
.form-error { margin: 0 0 18px; padding: 10px 14px; border-left: 3px solid var(--bad); border-radius: var(--r-sm); background: rgba(255, 111, 134, 0.09); color: var(--bad); }
.auth .btn { width: 100%; margin-top: 18px; padding: 12px 16px; font-size: 15px; }

.error-page { width: min(460px, 100%); }
.error-page .code { font: 700 clamp(72px, 16vw, 120px)/1 var(--font-display); letter-spacing: -0.04em; color: var(--accent); }
.error-page h1 { margin-top: 12px; font-size: 26px; }
.error-page .btn { display: inline-block; margin-top: 24px; text-decoration: none; }

/* ----- Adaptation mobile ------------------------------------------------- */

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand small { display: none; }
  .side-foot { margin-top: 0; grid-auto-flow: column; }
  .nav { grid-auto-flow: column; }
  .nav a span, .side-foot a span, .side-btn span { display: none; }
  .nav a, .side-foot a, .side-btn { width: auto; }
  .main { padding-top: 28px; }
  .toolbar { flex-wrap: wrap; width: 100%; }
  .search { flex: 1 1 200px; width: auto; }

  .overview { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .overview p { margin-inline: auto; }
  .legend { justify-content: center; }
  .totals { justify-content: center; }
  .totals div { padding: 0 14px; }
  .activity { grid-template-columns: 1fr; }

  .list-head { display: none; }
  .row { grid-template-columns: 1fr 1fr; gap: 14px 20px; }
  .row::after { display: none; }
  .row > :first-child { grid-column: 1 / -1; }
  .row > :first-child::before { display: none; }
  .row > [data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--muted); font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* ==========================================================================
   Version 3 : nouvelles fonctionnalités
   ========================================================================== */

/* ----- Pastille d'état du bot ------------------------------------------- */

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 99px;
  background: var(--panel); border: 1px solid var(--line);
  color: var(--muted); font-size: 13px; white-space: nowrap;
}
.pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.pill.on i { background: var(--ok); }
.pill.off i { background: var(--bad); }
.side .pill { margin: 0 6px 8px; align-self: flex-start; }

/* ----- Serveurs : nom et icône ------------------------------------------ */

.gicon { flex: none; width: 36px; height: 36px; border-radius: 10px; object-fit: cover; background: var(--panel-2); }
.who .names { min-width: 0; }
.who .name { display: block; font-weight: 600; overflow-wrap: anywhere; }
.who .sub { display: block; color: var(--muted); font: 400 12.5px var(--font-mono); overflow-wrap: anywhere; }
.who .id { font: 500 14px var(--font-mono); }

select.search { appearance: none; padding-right: 30px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
  width: auto; }

.head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.btn.ghost { background: transparent; }
a.btn { display: inline-block; text-decoration: none; }
.toolbar { flex-wrap: wrap; justify-content: flex-end; }
.kbd { padding: 1px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; font: 500 12px var(--font-mono); color: var(--muted); }

/* ----- Onglets ------------------------------------------------------------ */

.tabs { display: flex; gap: 4px; margin: 0 0 36px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tab {
  position: relative; padding: 12px 16px; border: 0; background: none; color: var(--muted);
  font: 500 15px var(--font-body); white-space: nowrap; cursor: pointer;
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--text); }
.tab[aria-selected="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); }
.tab .count { margin-left: 8px; padding: 1px 8px; border-radius: 99px; background: var(--panel-2); color: var(--muted); font-size: 12.5px; }
.tabpanel[hidden] { display: none; }

/* ----- Panneaux, interrupteurs, formulaires ------------------------------ */

.panel { padding: 24px clamp(18px, 3vw, 30px); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); }
.panel + .panel { margin-top: 20px; }
.panel h3 { margin-bottom: 4px; }
.panel .muted { margin: 0; color: var(--muted); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.grid-2 > .panel + .panel { margin-top: 0; }

.switches { display: grid; gap: 0; margin-top: 8px; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.switch-row:last-child { border-bottom: 0; padding-bottom: 0; }
.switch-row b { display: block; font-weight: 600; }
.switch-row span { color: var(--muted); font-size: 13.5px; }
.switch { position: relative; flex: none; width: 46px; height: 26px; border: 1px solid var(--line); border-radius: 99px; background: var(--panel-2); cursor: pointer; transition: background 0.2s, border-color 0.2s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: transform 0.2s, background 0.2s; }
.switch[aria-checked="true"] { background: var(--ok); border-color: var(--ok); }
.switch[aria-checked="true"]::after { transform: translateX(20px); background: #fff; }
.switch:disabled { opacity: 0.55; cursor: progress; }

.stack { display: grid; gap: 16px; }
.field select, .field textarea {
  width: 100%; padding: 11px 14px; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-sm); color: var(--text); font: 400 15px var(--font-body);
}
.field textarea { min-height: 130px; resize: vertical; line-height: 1.5; }
.field select:focus, .field textarea:focus { border-color: var(--accent); }
.field .help { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; color: var(--muted); font-size: 13px; }
.field input[type="password"], .field input[type="text"] { font-family: var(--font-body); }
.inline-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.auth .btn.full, .btn.full { width: 100%; }

.danger-zone { border-color: rgba(255, 111, 134, 0.45); }
.danger-zone h3 { color: var(--bad); }
.danger-zone .inline-actions { margin-top: 16px; justify-content: space-between; }

/* ----- Détails Discord ---------------------------------------------------- */

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 10px 28px; margin: 18px 0 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.kv dd.mono { font-family: var(--font-mono); font-weight: 400; font-size: 14px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; max-height: 340px; overflow: auto; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 99px; font-size: 13.5px; }
.chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex: none; }
.chip small { color: var(--muted); }

/* ----- Tableaux : actions de ligne ---------------------------------------- */

td.actions { text-align: right; white-space: nowrap; }
.tag { display: inline-block; padding: 2px 10px; border-radius: 99px; background: var(--panel-2); color: var(--muted); font-size: 12.5px; }

/* ----- Journal du bot ----------------------------------------------------- */

.console {
  height: min(64vh, 640px); overflow: auto; padding: 14px 0;
  background: var(--side); border: 1px solid var(--line); border-radius: var(--r-md);
  font: 400 13px/1.6 var(--font-mono);
}
.console .ln { display: grid; grid-template-columns: 132px 76px minmax(0, 1fr); gap: 12px; padding: 1px 18px; }
.console .ln:hover { background: var(--panel); }
.console .t { color: var(--muted); white-space: nowrap; }
.console .lv { font-weight: 500; }
.console .lv.INFO { color: var(--accent-2); }
.console .lv.WARNING { color: var(--warn); }
.console .lv.ERROR, .console .lv.CRITICAL { color: var(--bad); }
.console .m { white-space: pre-wrap; overflow-wrap: anywhere; }
.console .placeholder { padding: 36px 18px; text-align: center; color: var(--muted); font-family: var(--font-body); }

/* ----- Copie de serveur -------------------------------------------------- */

.clone-progress { margin-top: 16px; padding: 16px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.clone-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600; }
.clone-progress-head b { color: var(--accent); font-variant-numeric: tabular-nums; }
.clone-progress-track { position: relative; height: 9px; margin-top: 12px; background: var(--line); border-radius: 99px; overflow: hidden; }
.clone-progress-track::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent); transform: translateX(-100%); animation: clone-shine 1.25s linear infinite; }
.clone-progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 14px rgba(146,153,255,.35); transition: width .22s ease; }
.clone-progress-sub { margin-top: 9px; color: var(--muted); font-size: 12.5px; }
@keyframes clone-shine { to { transform: translateX(100%); } }

/* ----- Membres ------------------------------------------------------------ */

.search-lg { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.search-lg .search { flex: 1 1 320px; width: auto; padding: 12px 14px; font-size: 15px; }
.search-lg .btn { padding: 12px 22px; }

.profile { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; }
.profile img, .profile .identicon { width: 64px; height: 64px; border-radius: 16px; object-fit: cover; }
.profile h2 { font-size: 22px; }
.profile p { margin: 2px 0 0; color: var(--muted); }
.result-block + .result-block { margin-top: 28px; }
.result-block h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.result-block h3 a { color: inherit; text-decoration: none; }
.result-block h3 a:hover { color: var(--accent); }

.leaderboard { list-style: none; margin: 0; padding: 0; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.leaderboard li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.leaderboard li:last-child { border-bottom: 0; }
.leaderboard button { all: unset; cursor: pointer; }
.leaderboard li:hover { background: var(--panel); }
.leaderboard .rank { color: var(--muted); font-variant-numeric: tabular-nums; }
.leaderboard .who-id { font: 500 14px var(--font-mono); overflow-wrap: anywhere; }
.leaderboard .who-name { display: block; color: var(--muted); font: 400 13px var(--font-body); }
.leaderboard .cnt { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ----- Paramètres --------------------------------------------------------- */

.settings { display: grid; gap: 20px; max-width: 760px; }
.settings .panel + .panel { margin-top: 0; }
.settings h3 { margin-bottom: 6px; }
.settings .btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.notice { margin: 14px 0 0; padding: 10px 14px; border-left: 3px solid var(--warn); border-radius: var(--r-sm); background: rgba(255, 200, 87, 0.08); color: var(--text); font-size: 14px; }

/* ----- Adaptations mobile v3 ---------------------------------------------- */

@media (max-width: 860px) {
  .grid-2 { grid-template-columns: 1fr; }
  .side .pill { margin: 0; align-self: center; }
  .side .pill span { display: none; }
  .console .ln { grid-template-columns: 1fr; gap: 0; padding: 4px 14px; }
  .console .t, .console .lv { display: inline; }
  .toolbar { justify-content: flex-start; }
  .kv { grid-template-columns: 1fr; gap: 2px; }
  .kv dd { margin-bottom: 10px; }
}

.activity.one { grid-template-columns: 1fr; }

.top li { grid-template-columns: minmax(0, 1fr) auto auto; }
.top .who-id { text-decoration: none; }
.top .who-id:hover { color: var(--accent); }
.backups .inline-actions { flex-wrap: nowrap; }

/* Totaux : grille régulière (6 valeurs possibles) */
.totals { display: grid; grid-template-columns: repeat(3, max-content); gap: 22px 48px; }
.totals div, .totals div:first-child { padding: 0; border-left: 0; }
.totals div[hidden] { display: none; }
@media (max-width: 860px) {
  .totals { grid-template-columns: repeat(2, max-content); justify-content: center; text-align: center; gap: 18px 36px; }
  .totals div { padding: 0; }
}

@media (max-width: 860px) { .row > :first-child::before { display: none !important; } }


/* ==========================================================================
   Connexion Discord et espace membre
   ========================================================================== */

.auth.wide { width: min(440px, 100%); }
.provider {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; padding: 13px 18px; border-radius: var(--r-sm);
  font: 600 15px var(--font-body); text-decoration: none;
  transition: filter 0.15s;
}
.provider svg { width: 24px; height: 24px; flex: none; }
.provider.discord { background: #5865f2; color: #fff; }
.provider.discord:hover { filter: brightness(1.1); }
.auth .fine { margin: 14px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.auth .fine b { color: var(--text); font-weight: 600; }
.form-ok { margin: 0 0 18px; padding: 10px 14px; border-left: 3px solid var(--ok); border-radius: var(--r-sm); background: rgba(82, 224, 162, 0.09); color: var(--ok); }

.admin-access { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.admin-access summary { color: var(--muted); font-size: 14px; cursor: pointer; }
.admin-access summary:hover { color: var(--text); }
.admin-access .btn { width: 100%; }

.userchip { display: grid; gap: 1px; margin: 0 6px 10px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); }
.userchip b { overflow-wrap: anywhere; font-weight: 600; }
.userchip span { color: var(--muted); font-size: 12.5px; }

.banner { margin: 0 0 28px; padding: 12px 16px; border-left: 4px solid var(--ok); border-radius: var(--r-sm); background: var(--panel); box-shadow: var(--shadow); }
.banner.error { border-left-color: var(--bad); }

.ok-line { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; font-weight: 500; }
.ok-line i { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); flex: none; }

@media (max-width: 860px) {
  .userchip { display: none; }
}
/* PREMIUM UI */
html{scroll-behavior:smooth}
body{background:radial-gradient(circle at 12% 8%,rgba(146,153,255,.10),transparent 28%),radial-gradient(circle at 88% 14%,rgba(95,208,255,.08),transparent 25%),var(--bg);background-attachment:fixed}
body::after{content:"";position:fixed;inset:-20%;z-index:0;pointer-events:none;background:radial-gradient(circle,rgba(146,153,255,.055) 0 1px,transparent 1.5px);background-size:42px 42px;animation:dashboard-drift 28s linear infinite;opacity:.7}
@keyframes dashboard-drift{from{transform:translate3d(0,0,0) rotate(0deg)}to{transform:translate3d(18px,12px,0) rotate(3deg)}}
@keyframes fade-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes glow-pulse{0%,100%{box-shadow:0 0 0 rgba(146,153,255,0)}50%{box-shadow:0 0 24px rgba(146,153,255,.12)}}
.main>*{animation:fade-up .45s cubic-bezier(.2,.75,.25,1) both}.main>*:nth-child(2){animation-delay:.05s}.main>*:nth-child(3){animation-delay:.1s}.main>*:nth-child(4){animation-delay:.15s}
.panel,.overview,.facts,.activity,.list,.table-wrap{transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}.panel:hover,.overview:hover,.activity:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:0 14px 40px rgba(0,0,0,.18)}
.btn{position:relative;overflow:hidden;isolation:isolate;transform:translateY(0) scale(1);transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease,border-color .2s ease,filter .2s ease}.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.16) 50%,transparent 75%);background-size:220% 100%;transform:translateX(-100%);transition:transform .55s ease}.btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.22)}.btn:hover::before{transform:translateX(100%)}.btn:active{transform:translateY(1px) scale(.97)}.btn.primary:hover{filter:brightness(1.08);box-shadow:0 8px 26px rgba(146,153,255,.25)}
.nav a,.side-foot a,.side-btn{transition:transform .18s ease,background .18s ease,color .18s ease}.nav a:hover,.side-foot a:hover,.side-btn:hover{transform:translateX(4px)}.nav a svg,.side-foot a svg,.side-btn svg{transition:transform .22s ease}.nav a:hover svg,.side-foot a:hover svg,.side-btn:hover svg{transform:scale(1.08) rotate(-3deg)}
.row{transition:background .2s ease,transform .2s ease,box-shadow .2s ease}.row:hover{transform:translateX(3px)}
.search,.field input,.field select,.field textarea{transition:border-color .2s ease,box-shadow .2s ease,transform .15s ease}.search:focus,.field input:focus,.field select:focus,.field textarea:focus{transform:translateY(-1px);box-shadow:0 0 0 3px rgba(146,153,255,.10),0 8px 22px rgba(0,0,0,.10)}
.pill.on{animation:glow-pulse 2.8s ease-in-out infinite}.chip{transition:transform .16s ease,border-color .16s ease,background .16s ease}.chip:hover{transform:translateY(-2px);border-color:var(--accent);background:var(--panel-2)}
.toast{animation:toast-premium-in .28s cubic-bezier(.2,.8,.2,1)}@keyframes toast-premium-in{from{opacity:0;transform:translateX(22px) scale(.96)}to{opacity:1;transform:translateX(0) scale(1)}}
.provider.discord{transition:transform .18s ease,box-shadow .2s ease,filter .2s ease}.provider.discord:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(88,101,242,.28)}
.ui-ripple{position:absolute;width:10px;height:10px;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.30);transform:translate(-50%,-50%) scale(0);animation:ui-ripple .5s ease-out forwards}@keyframes ui-ripple{to{transform:translate(-50%,-50%) scale(22);opacity:0}}
.member-admin-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}.member-admin-row:last-child{border-bottom:0}.member-admin-row small{display:block;color:var(--muted);font:400 12px var(--font-mono);overflow-wrap:anywhere}.config-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}.config-check{display:flex;align-items:center;gap:10px;padding:12px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer}.config-check input{accent-color:var(--accent);width:17px;height:17px}@media(max-width:700px){.config-grid{grid-template-columns:1fr}.member-admin-row{align-items:flex-start;flex-direction:column}.member-admin-row .inline-actions{width:100%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}

/* Politique de confidentialité / footer */
.site-footer {
  width: min(1100px, calc(100% - 32px));
  margin: 28px auto 22px;
  padding: 14px 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.site-footer a { color: var(--text); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-sep { opacity: .45; }
.legal-page { width: min(920px, calc(100% - 32px)); margin: 42px auto 20px; }
.legal-head { margin-bottom: 22px; text-align: center; }
.legal-back { display: inline-block; color: var(--muted); text-decoration: none; margin-bottom: 18px; }
.legal-back:hover { color: var(--text); }
.legal-badge { display: inline-block; padding: 6px 10px; border-radius: 999px; background: rgba(146,153,255,.12); color: var(--accent-ink); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.legal-page h1 { margin: 12px 0 6px; }
.legal-card { padding: 28px; border: 1px solid var(--border); border-radius: 22px; background: var(--panel); box-shadow: 0 18px 60px rgba(0,0,0,.14); }
.legal-card h2 { margin: 26px 0 10px; font-size: 18px; }
.legal-card h2:first-child { margin-top: 0; }
.legal-card { text-align: center; }
.legal-card h2 { text-align: center; }
.legal-card p, .legal-card li { color: var(--muted); line-height: 1.7; text-align: center; }
.legal-card ul { padding-left: 0; list-style-position: inside; }
.legal-card a { color: var(--accent-ink); }
@media (max-width: 650px) { .site-footer { flex-wrap: wrap; } .legal-card { padding: 20px; } }

/* ULTIMATE BOT — VISUAL FX v2 */
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
body::after {
  content: ""; position: fixed; inset: -30%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 20% 30%, rgba(146,153,255,.10), transparent 22%),
              radial-gradient(circle at 80% 70%, rgba(95,208,255,.08), transparent 20%);
  filter: blur(30px); animation: ub-orbit 18s ease-in-out infinite alternate;
}
@keyframes ub-orbit { 0%{transform:translate3d(-2%, -1%,0) scale(1)} 100%{transform:translate3d(2%, 2%,0) scale(1.06)} }
@keyframes ub-pop { from{opacity:0;transform:translateY(16px) scale(.985)} to{opacity:1;transform:none} }
@keyframes ub-shimmer { from{transform:translateX(-120%)} to{transform:translateX(120%)} }
@keyframes ub-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.main > * { animation: ub-pop .55s cubic-bezier(.2,.8,.2,1) both; }
.main > *:nth-child(2){animation-delay:.06s}.main > *:nth-child(3){animation-delay:.12s}.main > *:nth-child(4){animation-delay:.18s}.main > *:nth-child(5){animation-delay:.24s}
.panel,.overview,.facts,.activity,.list,.table-wrap,.auth,.legal-card {
  position:relative; overflow:hidden;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,border-color .25s ease;
}
.panel::before,.overview::before,.facts::before,.activity::before,.list::before,.table-wrap::before,.auth::before,.legal-card::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.035) 48%,transparent 52%);
  transform:translateX(-120%); transition:transform .7s ease;
}
.panel:hover::before,.overview:hover::before,.facts:hover::before,.activity:hover::before,.list:hover::before,.table-wrap:hover::before,.auth:hover::before,.legal-card:hover::before{transform:translateX(120%)}
.panel:hover,.overview:hover,.activity:hover,.auth:hover,.legal-card:hover{transform:translateY(-3px);box-shadow:0 18px 48px rgba(0,0,0,.22)}
.btn,.provider,.nav a,.side-btn,.back,.site-footer a { transition:transform .2s ease,box-shadow .2s ease,filter .2s ease,color .2s ease,background .2s ease; }
.btn:hover,.provider:hover{transform:translateY(-3px)}
.btn:active,.provider:active{transform:translateY(0) scale(.97)}
.btn.primary{box-shadow:0 0 0 rgba(146,153,255,0)}
.btn.primary:hover{box-shadow:0 10px 30px rgba(146,153,255,.25)}
.provider.discord:hover{box-shadow:0 12px 34px rgba(88,101,242,.30)}
.brand svg{animation:ub-float 3.5s ease-in-out infinite}
.pill.on{box-shadow:0 0 0 rgba(82,224,162,0);animation:ub-status 2.4s ease-in-out infinite}
@keyframes ub-status{50%{box-shadow:0 0 18px rgba(82,224,162,.18)}}
.site-footer a:hover{transform:translateY(-1px);display:inline-block;color:var(--accent)}
.legal-card h2{transition:color .2s ease}.legal-card:hover h2{color:var(--accent)}
@media(prefers-reduced-motion:reduce){body::after,.brand svg,.pill.on{animation:none!important}.main>*{animation:none!important}.panel:hover,.overview:hover,.activity:hover,.auth:hover,.legal-card:hover{transform:none}}




@media print{.side,.site-footer,.ub-control,.ub-drawer,.ub-live,.toasts{display:none!important}.main{max-width:none!important;padding:20px!important}.panel,.overview,.activity,.facts,.table-wrap{box-shadow:none!important;break-inside:avoid}}

/* ================= ULTIMATE BOT — CONTROL CENTER ================= */
.ub-control{position:fixed;top:14px;right:18px;z-index:1200;display:flex;align-items:center;gap:7px;padding:6px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--panel) 88%,transparent);backdrop-filter:blur(14px);box-shadow:var(--shadow)}
.ub-control button{position:relative;width:38px;height:38px;border:0;border-radius:10px;background:transparent;color:var(--muted);cursor:pointer;display:grid;place-items:center;font-size:16px}
.ub-control button:hover{background:var(--panel-2);color:var(--text);transform:translateY(-1px)}
.ub-control .ub-dot{position:absolute;right:7px;top:7px;width:7px;height:7px;border-radius:50%;background:var(--bad);box-shadow:0 0 10px currentColor;display:none}
.ub-control .ub-dot.show{display:block;animation:ubNotify 1.6s ease-in-out infinite}
@keyframes ubNotify{50%{transform:scale(1.45);opacity:.55}}
.ub-drawer{position:fixed;right:18px;top:68px;z-index:1199;width:min(420px,calc(100vw - 28px));max-height:70vh;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.45);opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none;transition:.2s ease}
.ub-drawer.open{opacity:1;transform:none;pointer-events:auto}
.ub-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px;border-bottom:1px solid var(--line)}
.ub-drawer-head strong{font:600 16px var(--font-display)}
.ub-drawer-actions{display:flex;gap:6px}.ub-mini{border:1px solid var(--line);background:var(--panel-2);color:var(--muted);border-radius:8px;padding:6px 9px;cursor:pointer;font-size:12px}.ub-mini:hover{color:var(--text);border-color:var(--accent)}
.ub-notices{max-height:58vh;overflow:auto;padding:8px}.ub-notice{display:grid;grid-template-columns:10px 1fr;gap:10px;padding:11px 10px;border-radius:10px}.ub-notice:hover{background:var(--panel-2)}.ub-notice i{width:8px;height:8px;border-radius:50%;background:var(--accent);margin-top:7px}.ub-notice.warn i{background:var(--warn)}.ub-notice.bad i{background:var(--bad)}.ub-notice b{display:block;font-size:13px}.ub-notice span{display:block;color:var(--muted);font-size:12px;margin-top:2px;overflow-wrap:anywhere}.ub-notice time{display:block;color:var(--muted);font:11px var(--font-mono);margin-top:4px}
.ub-empty{padding:34px 16px;text-align:center;color:var(--muted)}
.ub-live{position:fixed;left:18px;bottom:18px;z-index:1100;display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--panel) 90%,transparent);backdrop-filter:blur(10px);font-size:11px;color:var(--muted);box-shadow:var(--shadow)}.ub-live i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px rgba(82,224,162,.65)}.ub-live.off i{background:var(--bad);box-shadow:0 0 10px rgba(255,111,134,.5)}
.ub-clock{font:500 11px var(--font-mono);color:var(--muted);padding:0 5px;white-space:nowrap}
@media(max-width:850px){.ub-control{right:10px;top:10px}.ub-live{left:10px;bottom:10px}.ub-clock{display:none}}
@media(prefers-reduced-motion:reduce){.ub-drawer,.ub-control button{transition:none!important}.ub-dot{animation:none!important}}

/* ================= ULTIMATE BOT — EXPERIENCE PACK ================= */
:root { --ub-glow: 0 0 35px rgba(146,153,255,.16); }
html { scroll-behavior:smooth; }
body { overflow-x:hidden; }
body::after{content:"";position:fixed;inset:-30%;pointer-events:none;z-index:0;background:radial-gradient(circle at 15% 15%,rgba(146,153,255,.09),transparent 24%),radial-gradient(circle at 85% 70%,rgba(95,208,255,.07),transparent 22%);animation:ubFloatBg 18s ease-in-out infinite alternate;}
@keyframes ubFloatBg{from{transform:translate3d(-1%,-1%,0) scale(1)}to{transform:translate3d(1%,1%,0) scale(1.04)}}
.shell,.bare-wrap{z-index:1}
.main > *{animation:ubEnter .42s cubic-bezier(.2,.8,.2,1) both}
@keyframes ubEnter{from{opacity:0;transform:translateY(10px) scale(.992)}to{opacity:1;transform:none}}
.panel,.overview,.activity,.auth,.legal-card,.list,.facts,.table-wrap{transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease}
.panel:hover,.overview:hover,.activity:hover,.auth:hover,.legal-card:hover,.list:hover,.facts:hover,.table-wrap:hover{transform:translateY(-2px);box-shadow:var(--shadow),var(--ub-glow)}
.nav a,.side-btn,.btn,.provider,.icon-btn{transition:transform .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease}
.nav a:hover,.side-btn:hover,.btn:hover,.provider:hover,.icon-btn:hover{transform:translateY(-1px)}
.btn:active,.side-btn:active,.provider:active,.icon-btn:active{transform:scale(.97)}
.brand svg{animation:ubBrand 4s ease-in-out infinite}
@keyframes ubBrand{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2px) rotate(2deg)}}

/* Command palette */
.ub-palette{position:fixed;inset:0;z-index:5000;display:grid;place-items:start center;padding:12vh 18px;background:rgba(5,7,18,.62);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .18s ease}
.ub-palette.open{opacity:1;pointer-events:auto}
.ub-palette-card{width:min(680px,100%);max-height:70vh;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 100px rgba(0,0,0,.5);transform:translateY(-10px) scale(.98);transition:transform .2s ease}
.ub-palette.open .ub-palette-card{transform:none}
.ub-palette-top{display:flex;align-items:center;gap:10px;padding:14px;border-bottom:1px solid var(--line)}
.ub-palette-top input{flex:1;border:0;outline:0;background:transparent;color:var(--text);font:500 16px var(--font-body)}
.ub-kbd{padding:3px 7px;border:1px solid var(--line);border-radius:6px;color:var(--muted);font:12px var(--font-mono);background:var(--panel-2)}
.ub-command-list{padding:8px;max-height:52vh;overflow:auto}
.ub-command{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:12px;border:0;border-radius:10px;background:transparent;color:var(--text);text-align:left;cursor:pointer}
.ub-command:hover,.ub-command.active{background:var(--panel-2)}
.ub-command small{color:var(--muted)}
.ub-command-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:rgba(146,153,255,.12);color:var(--accent);flex:none}

/* Quick tools */
.ub-quick{position:fixed;right:20px;bottom:20px;z-index:1000;display:flex;gap:8px;align-items:center;padding:7px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--panel) 90%,transparent);backdrop-filter:blur(12px);box-shadow:var(--shadow)}
.ub-quick button{width:38px;height:38px;border:0;border-radius:10px;background:transparent;color:var(--muted);cursor:pointer;display:grid;place-items:center;font-size:16px}
.ub-quick button:hover{background:var(--panel-2);color:var(--text)}
.ub-shortcut-hint{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:900;color:var(--muted);font-size:11px;opacity:.7;pointer-events:none}
.ub-progress{position:fixed;left:0;top:0;height:2px;width:0;z-index:6000;background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 0 12px var(--accent)}
.ub-compact .side{width:82px;padding-left:12px;padding-right:12px}
.ub-compact .shell{grid-template-columns:82px minmax(0,1fr)}
.ub-compact .brand span,.ub-compact .nav a span,.ub-compact .side-foot .userchip,.ub-compact .side-foot .pill span{display:none}
.ub-compact .nav a,.ub-compact .side-btn{justify-content:center}
.ub-compact .brand{justify-content:center;padding:0}
.ub-compact .main{max-width:1400px}
@media(max-width:850px){.ub-quick{right:12px;bottom:12px}.ub-shortcut-hint{display:none}.ub-palette{padding-top:7vh}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}

/* Centre de contrôle avancé */
.ub-settings-drawer{position:fixed;right:18px;top:68px;z-index:1300;width:min(520px,calc(100vw - 28px));max-height:78vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 90px rgba(0,0,0,.48);opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none;transition:.2s ease}
.ub-settings-drawer.open{opacity:1;transform:none;pointer-events:auto}
.ub-settings-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);z-index:1}.ub-settings-head strong{font:600 15px var(--font-display)}
.ub-settings-body{padding:8px 16px 16px}.ub-setting{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 0;border-bottom:1px solid var(--line)}.ub-setting:last-child{border-bottom:0}.ub-setting b{display:block;font-size:13px}.ub-setting small{display:block;margin-top:3px;color:var(--muted);font-size:11.5px}.ub-setting select{min-width:140px;padding:8px 10px;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;color:var(--text)}.ub-status-text{color:var(--ok);font:500 12px var(--font-mono)}
@media(max-width:650px){.ub-settings-drawer{right:10px;top:62px}.ub-setting{align-items:flex-start;flex-direction:column}.ub-setting select,.ub-setting .btn{width:100%}}


/* ================= ULTIMATE BOT — COMMANDES ================= */
.command-runner{margin-bottom:20px;padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--panel);box-shadow:0 12px 30px rgba(0,0,0,.12)}.command-runner-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.command-runner label{display:grid;gap:6px;color:var(--muted);font-size:12px}.command-runner select,.command-runner input{width:100%;min-height:42px;padding:9px 12px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;color:var(--text);font:inherit}.command-runner-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}.command-runner-actions{display:flex;align-items:center;gap:10px;margin-top:12px}.command-runner-result{min-height:20px;color:var(--muted);font-size:13px}.command-runner-result.ok{color:#75e0a5}.command-runner-result.error{color:#ff8b9b}@media(max-width:700px){.command-runner-grid,.command-runner-fields{grid-template-columns:1fr}}
.commands-hero{position:relative;overflow:hidden;border:1px solid color-mix(in srgb,var(--accent) 55%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--panel) 88%,var(--accent) 12%),var(--panel));border-radius:22px;padding:28px;margin-bottom:24px}.commands-hero:after{content:"</>";position:absolute;right:28px;top:18px;font:700 80px var(--font-mono);color:color-mix(in srgb,var(--accent) 14%,transparent);pointer-events:none}.commands-hero>*{position:relative;z-index:1}.commands-kicker{display:inline-flex;padding:6px 10px;border-radius:999px;background:rgba(146,153,255,.13);border:1px solid rgba(146,153,255,.25);color:var(--accent);font:600 11px var(--font-mono);letter-spacing:.08em}.commands-hero h1{margin:10px 0 7px}.commands-hero p{margin:0;color:var(--muted);max-width:760px}
.commands-toolbar{display:grid;grid-template-columns:minmax(250px,1fr) auto auto;gap:10px;align-items:center;margin-bottom:16px}.commands-toolbar input,.commands-toolbar select{width:100%;min-height:42px;padding:9px 12px;background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--text);font:inherit}.commands-stats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}.commands-stat{padding:7px 11px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--muted);font-size:12px}.commands-stat b{color:var(--text)}
.commands-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:16px}.command-cats{position:sticky;top:20px;align-self:start;display:grid;gap:5px;padding:10px;background:var(--panel);border:1px solid var(--line);border-radius:15px}.command-cat{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 10px;border:0;border-radius:9px;background:transparent;color:var(--muted);font:500 13px var(--font-body);cursor:pointer;text-align:left}.command-cat:hover,.command-cat.active{background:var(--panel-2);color:var(--text)}.command-cat .count{font-size:11px;opacity:.75}.command-list{display:grid;gap:10px}.command-card{border:1px solid var(--line);border-radius:15px;background:var(--panel);overflow:hidden;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.command-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 42%,var(--line));box-shadow:0 15px 40px rgba(0,0,0,.18)}.command-card summary{list-style:none;cursor:pointer;padding:15px 16px;display:flex;align-items:center;gap:12px}.command-card summary::-webkit-details-marker{display:none}.command-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:rgba(146,153,255,.12);font-size:18px;flex:none}.command-main{min-width:0;flex:1}.command-name{font:600 15px var(--font-mono);color:var(--text)}.command-desc{display:block;margin-top:3px;color:var(--muted);font-size:12px}.command-meta{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end}.command-tag{padding:4px 7px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:10px}.command-tag.perm{color:var(--accent)}.command-body{padding:0 16px 16px 66px;border-top:1px solid var(--line)}.command-body-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}.command-box{padding:12px;border:1px solid var(--line);border-radius:11px;background:var(--panel-2)}.command-box h4{margin:0 0 8px;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.command-box code{display:block;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text);font:500 12px var(--font-mono)}.command-params{display:grid;gap:6px}.command-param{display:flex;justify-content:space-between;gap:12px;font-size:11.5px}.command-param span:first-child{color:var(--text);font-family:var(--font-mono)}.command-param span:last-child{color:var(--muted);text-align:right}.command-empty{padding:40px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:15px;background:var(--panel)}
@media(max-width:850px){.commands-layout{grid-template-columns:1fr}.command-cats{position:static;display:flex;overflow:auto}.command-cat{min-width:max-content}.commands-toolbar{grid-template-columns:1fr 1fr}.commands-toolbar input{grid-column:1/-1}.command-body{padding-left:16px}}@media(max-width:600px){.commands-toolbar{grid-template-columns:1fr}.command-body-grid{grid-template-columns:1fr}.command-meta{display:none}.commands-hero{padding:21px}}



/* ===================== ULTIMATE BOT — MODERN UI V2 ===================== */
:root {
  --bg: #070a12;
  --side: rgba(10, 14, 25, .88);
  --panel: rgba(17, 23, 38, .78);
  --panel-2: rgba(25, 32, 52, .82);
  --panel-3: rgba(31, 40, 64, .72);
  --line: rgba(148, 163, 184, .14);
  --line-strong: rgba(148, 163, 184, .22);
  --text: #f5f7ff;
  --muted: #8e9ab2;
  --accent: #7c5cff;
  --accent-2: #22d3ee;
  --accent-3: #a78bfa;
  --ok: #34d399;
  --bad: #fb7185;
  --warn: #fbbf24;
  --dot: rgba(124, 92, 255, .09);
  --shadow: 0 22px 70px rgba(0,0,0,.32);
  --shadow-soft: 0 12px 35px rgba(0,0,0,.20);
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
}

[data-theme="light"] {
  --bg: #f4f6fb;
  --side: rgba(255,255,255,.88);
  --panel: rgba(255,255,255,.82);
  --panel-2: #f0f2f8;
  --panel-3: #e8ebf4;
  --line: rgba(30,41,59,.10);
  --line-strong: rgba(30,41,59,.16);
  --text: #111827;
  --muted: #64748b;
  --accent: #6847f5;
  --accent-2: #0891b2;
  --accent-3: #8b5cf6;
  --dot: rgba(104,71,245,.07);
  --shadow: 0 22px 60px rgba(30,41,59,.10);
  --shadow-soft: 0 10px 28px rgba(30,41,59,.08);
}

html { background: var(--bg); scroll-behavior: smooth; }
body {
  min-height: 100vh;
  background:
    radial-gradient(900px 500px at 78% -10%, rgba(124,92,255,.16), transparent 62%),
    radial-gradient(700px 450px at 20% 0%, rgba(34,211,238,.08), transparent 58%),
    var(--bg);
}
body::before {
  background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: .6;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 760px);
  mask-image: linear-gradient(to bottom, #000, transparent 760px);
}

.shell { grid-template-columns: 276px minmax(0, 1fr); gap: 0; }
.side {
  position: sticky;
  top: 16px;
  height: calc(100vh - 32px);
  margin: 16px 0 16px 16px;
  padding: 20px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(16,22,38,.94), rgba(9,13,24,.88));
  box-shadow: var(--shadow);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  overflow: hidden;
}
[data-theme="light"] .side { background: rgba(255,255,255,.92); }
.side::before {
  content:""; position:absolute; width:180px; height:180px; left:-80px; top:-80px;
  background: rgba(124,92,255,.22); filter: blur(55px); pointer-events:none;
}
.brand { position:relative; padding: 8px 9px 18px; border-bottom:1px solid var(--line); margin-bottom:10px; }
.brand svg {
  width:42px; height:42px; padding:10px; border-radius:14px;
  color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 10px 30px rgba(124,92,255,.28);
}
.brand b { font-size:16px; letter-spacing:-.02em; }
.brand small { margin-top:3px; color:var(--muted); }
.nav { gap:6px; }
.nav a, .side-foot a, .side-btn {
  position:relative; min-height:44px; padding:11px 12px; border-radius:13px;
  color:#95a1ba; transition:all .18s ease;
}
.nav a::before {
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:99px;
  background:linear-gradient(180deg,var(--accent),var(--accent-2)); opacity:0; transform:scaleY(.4); transition:.18s ease;
}
.nav a:hover { transform:translateX(3px); background:rgba(255,255,255,.045); color:var(--text); }
.nav a[aria-current="page"] {
  color:#fff; background:linear-gradient(90deg,rgba(124,92,255,.20),rgba(34,211,238,.06));
  box-shadow:inset 0 0 0 1px rgba(124,92,255,.18), 0 8px 24px rgba(0,0,0,.14);
}
.nav a[aria-current="page"]::before { opacity:1; transform:scaleY(1); }
.nav a[aria-current="page"] svg { color:var(--accent-3); }
.nav svg, .side-foot svg, .side-btn svg { width:19px; height:19px; }
.side-foot { padding-top:12px; gap:7px; }
.userchip {
  padding:13px 14px !important; border:1px solid var(--line); border-radius:15px !important;
  background:rgba(255,255,255,.035); box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.userchip b { color:var(--text); }
.pill { border:1px solid rgba(52,211,153,.18) !important; background:rgba(52,211,153,.07) !important; }

.main { max-width:none; padding: 30px clamp(20px, 3vw, 52px) 90px; }
.main > * { max-width: 1420px; margin-left:auto; margin-right:auto; }
.main::before {
  content:""; display:block; height:1px; margin:0 auto 24px; max-width:1420px;
  background:linear-gradient(90deg,transparent,var(--line-strong),transparent);
}
.page-head { margin-bottom:28px; padding:0 2px; }
h1 { font-size:clamp(28px,3vw,42px); letter-spacing:-.035em; }
h2 { letter-spacing:-.02em; }
.lede { color:var(--muted); max-width:70ch; }


.modern-topbar {
  max-width:1420px; margin:0 auto 28px; min-height:54px; padding:8px 10px 8px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  border:1px solid var(--line); border-radius:16px; background:rgba(12,17,29,.55);
  box-shadow:0 8px 30px rgba(0,0,0,.12); backdrop-filter:blur(18px);
}
[data-theme="light"] .modern-topbar { background:rgba(255,255,255,.7); }
.topbar-context,.topbar-actions { display:flex; align-items:center; gap:10px; }
.topbar-kicker { color:var(--accent-3); font:700 11px/1 var(--font-display); letter-spacing:.14em; }
.topbar-page { color:var(--muted); font-size:13px; }
.topbar-divider { width:1px; height:16px; background:var(--line-strong); }
.topbar-status { display:flex; align-items:center; gap:7px; padding:7px 10px; border:1px solid rgba(52,211,153,.16); border-radius:999px; background:rgba(52,211,153,.06); color:#86efac; font-size:12px; }
.topbar-status i { width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 12px var(--ok); }
.topbar-user { padding:7px 11px; border:1px solid var(--line); border-radius:10px; color:var(--text); font-size:12px; }
@media (max-width:600px) { .modern-topbar { margin-bottom:20px; } .topbar-kicker{display:none;} .topbar-divider{display:none;} .topbar-user{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} }

/* Modern cards / containers */
.card, .panel, .overview, .command-card, .table-wrap, .empty, .auth-card, .settings-card {
  border-color:var(--line) !important;
  background:var(--panel) !important;
  box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.035) !important;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}
.card, .panel, .command-card, .table-wrap, .empty, .settings-card { border-radius:var(--r-lg) !important; }
.overview { border-radius:var(--r-xl) !important; }

.btn, button, input, select, textarea { font-family:var(--font-body); }
.btn {
  border:1px solid var(--line-strong) !important; border-radius:12px !important;
  background:rgba(255,255,255,.045) !important; color:var(--text) !important;
  box-shadow:none !important;
}
.btn:hover { transform:translateY(-2px); border-color:rgba(124,92,255,.42) !important; box-shadow:0 10px 26px rgba(0,0,0,.18) !important; }
.btn.primary, .btn.accent {
  border:0 !important; color:#fff !important;
  background:linear-gradient(135deg,var(--accent),#5b8cff) !important;
  box-shadow:0 10px 25px rgba(104,71,245,.25) !important;
}
input, select, textarea {
  border:1px solid var(--line-strong) !important; border-radius:12px !important;
  background:rgba(0,0,0,.16) !important; color:var(--text) !important;
}
[data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea { background:#fff !important; }
input:focus, select:focus, textarea:focus { border-color:rgba(124,92,255,.7) !important; box-shadow:0 0 0 4px rgba(124,92,255,.11) !important; }

/* Stats */
.stat-grid, .stats-grid { gap:14px !important; }
.stat, .stat-card {
  position:relative; overflow:hidden; border:1px solid var(--line) !important;
  border-radius:18px !important; background:var(--panel) !important; box-shadow:var(--shadow-soft) !important;
}
.stat::after, .stat-card::after {
  content:""; position:absolute; right:-30px; bottom:-55px; width:120px; height:120px;
  border-radius:50%; background:radial-gradient(circle,rgba(124,92,255,.16),transparent 70%); pointer-events:none;
}

/* Tables / member management */
table { border-collapse:separate !important; border-spacing:0; }
th { color:#a7b1c6 !important; font-size:12px !important; text-transform:uppercase; letter-spacing:.07em; }
td, th { border-bottom-color:var(--line) !important; }
tbody tr { transition:background .16s ease; }
tbody tr:hover { background:rgba(124,92,255,.055) !important; }

/* Section headers become compact command-center blocks */
.section-head { margin-bottom:14px; }
.section-head::after { background:linear-gradient(90deg,var(--accent),transparent); }

/* Scrollbars */
* { scrollbar-width:thin; scrollbar-color:rgba(124,92,255,.45) transparent; }
*::-webkit-scrollbar { width:8px; height:8px; }
*::-webkit-scrollbar-track { background:transparent; }
*::-webkit-scrollbar-thumb { background:linear-gradient(var(--accent),var(--accent-2)); border-radius:99px; }

/* Footer */
.site-footer { max-width:1420px; margin:0 auto; padding:0 28px 26px; color:var(--muted); }
.site-footer a { color:var(--muted); }
.site-footer a:hover { color:var(--text); }

/* Mobile: bottom navigation instead of cramped sidebar */
@media (max-width: 900px) {
  .shell { display:block; }
  .side {
    position:sticky; top:10px; z-index:30; width:auto; height:auto; margin:10px;
    padding:10px; border-radius:20px; display:block;
  }
  .brand { padding:6px 8px 10px; margin-bottom:6px; border-bottom:0; }
  .brand svg { width:36px; height:36px; padding:8px; }
  .brand small { display:none; }
  .nav { grid-auto-flow:column; grid-auto-columns:minmax(78px,1fr); overflow-x:auto; padding-bottom:2px; }
  .nav a { justify-content:center; flex-direction:column; gap:4px; min-height:58px; font-size:11px; padding:7px; }
  .nav a span { display:block; }
  .nav a::before { display:none; }
  .side-foot { display:none; }
  .main { padding:20px 14px 70px; }
  .main::before { margin-bottom:16px; }
  .overview { grid-template-columns:1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
}


/* ===================== ULTIMATE BOT — LAYOUT FIX / V3 ===================== */
html, body { min-width: 0; }
body { overflow-x: hidden; }

/* Une seule hiérarchie visuelle : la barre d'outils ne recouvre plus le contenu. */
.modern-topbar {
  position: sticky;
  top: 14px;
  z-index: 80;
  min-height: 64px;
  margin: 0 auto 24px;
  padding: 9px 10px 9px 18px;
  padding-right: 330px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(13,18,32,.92), rgba(9,13,25,.78));
  border: 1px solid rgba(148,163,184,.14);
  box-shadow: 0 16px 45px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(24px) saturate(135%);
  -webkit-backdrop-filter: blur(24px) saturate(135%);
}
[data-theme="light"] .modern-topbar {
  background: rgba(255,255,255,.9);
  box-shadow: 0 14px 35px rgba(30,41,59,.10);
}
.topbar-actions { margin-right: 4px; }
.topbar-status, .topbar-user { white-space: nowrap; }

/* Dock outils : indépendant, mais réservé dans la topbar pour éviter toute collision. */
.ub-control {
  position: fixed;
  top: 14px;
  right: 24px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 48px;
  padding: 5px 7px;
  border: 1px solid rgba(148,163,184,.14);
  border-radius: 15px;
  background: rgba(13,18,32,.92);
  box-shadow: 0 18px 50px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}
[data-theme="light"] .ub-control { background: rgba(255,255,255,.94); }
.ub-control button {
  position: relative;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.ub-control button:hover { background: var(--panel-2); color: var(--text); transform: translateY(-1px); }
.ub-control button:active { transform: scale(.95); }
.ub-control .ub-clock {
  padding: 0 7px 0 8px;
  min-width: 68px;
  text-align: center;
  font-size: 11px;
}

/* Les anciens outils rapides du bas doublonnaient le dock supérieur. */
.ub-quick { display: none !important; }
.ub-shortcut-hint { display: none !important; }
.ub-live { left: 292px; bottom: 18px; z-index: 70; }
.ub-live-top { position:relative !important; left:auto !important; bottom:auto !important; z-index:2; margin:0; box-shadow:none !important; }
.topbar-actions .ub-live-top { display:inline-flex; align-items:center; }
@media (max-width:900px) { .ub-live-top span { display:none; } .ub-live-top { padding:8px !important; } }


/* En-têtes : jamais de boutons qui se poussent les uns sur les autres. */
.page-head {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 22px;
}
.id-line { min-width: 0; }
.head-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}
.head-actions .btn { white-space: nowrap; }

/* Onglets : pas de scrollbar verticale et pas de débordement des boutons. */
.tabs {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  margin: 0 0 28px;
  padding: 0 4px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(124,92,255,.45) transparent;
}
.tabs::-webkit-scrollbar { height: 5px; width: 0; }
.tabs::-webkit-scrollbar-thumb { border-radius: 99px; background: linear-gradient(90deg,var(--accent),var(--accent-2)); }
.tab {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 11px 15px;
  white-space: nowrap;
  border-radius: 11px 11px 0 0;
}
.tab:hover { background: rgba(255,255,255,.035); }
.tab[aria-selected="true"] { background: linear-gradient(180deg, rgba(124,92,255,.12), transparent); }

/* Cartes plus aérées et grille stable. */
.panel, .overview, .facts, .activity, .list, .table-wrap {
  min-width: 0;
  overflow: hidden;
}
.facts {
  grid-template-columns: repeat(4, minmax(0,1fr));
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
}
.fact { min-width: 0; }
.fact dd { overflow-wrap: anywhere; }

/* Membres : les contrôles ne débordent plus de leur carte. */
.member-toolbar {
  grid-template-columns: minmax(180px, 1fr) minmax(145px, 180px) minmax(145px, 180px) auto;
}
.member-toolbar > * { min-width: 0; }
.member-select, .member-toolbar .search { width: 100%; min-width: 0; }
.member-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }

/* Dialog : toujours au-dessus du reste, sans être coupé par une carte. */
dialog.member-modal, dialog#role-dialog {
  z-index: 2000;
  max-height: min(88vh, 760px);
  overflow: auto;
  margin: auto;
}
dialog::backdrop { z-index: 1999; background: rgba(2,5,14,.72); backdrop-filter: blur(5px); }

/* Actions dans les cartes : pas de boutons collés ni de texte qui déborde. */
.inline-actions, .actions, .command-runner-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.inline-actions .btn, .actions .btn { flex: 0 0 auto; }

/* Mobile/tablette */
@media (max-width: 1100px) {
  .modern-topbar { padding-right: 210px; }
  .ub-control { right: 14px; }
  .facts { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .member-toolbar { grid-template-columns: 1fr 1fr; }
  .member-toolbar .search { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .modern-topbar {
    position: relative;
    top: auto;
    padding-right: 12px;
    margin-top: 62px;
  }
  .ub-control { top: 10px; right: 10px; }
  .ub-control .ub-clock { display: none; }
  .ub-live { left: 10px; bottom: 10px; }
  .page-head { grid-template-columns: 1fr; align-items: start; }
  .head-actions { justify-content: flex-start; }
}
@media (max-width: 620px) {
  .modern-topbar { min-height: 52px; padding: 8px 11px; }
  .topbar-actions { margin-left: auto; }
  .topbar-page { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ub-control { max-width: calc(100vw - 20px); overflow-x: auto; }
  .facts { grid-template-columns: 1fr; }
  .member-toolbar { grid-template-columns: 1fr; }
  .member-toolbar .search { grid-column: auto; }
  .head-actions .btn { width: 100%; justify-content: center; }
}


/* ===================== ULTIMATE BOT — COLOR THEME SYSTEM ===================== */
.theme-picker{position:fixed;inset:0;z-index:7000;display:grid;place-items:center;padding:24px;background:rgba(3,6,15,.66);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);opacity:0;pointer-events:none;transition:opacity .2s ease}
.theme-picker.open{opacity:1;pointer-events:auto}
.theme-picker-card{width:min(760px,calc(100vw - 32px));max-height:min(760px,calc(100vh - 40px));overflow:auto;border:1px solid var(--line-strong);border-radius:26px;background:color-mix(in srgb,var(--panel) 94%,transparent);box-shadow:0 35px 100px rgba(0,0,0,.48);padding:24px}
.theme-picker-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px}.theme-picker-head h2{margin:0;font:700 21px var(--font-display)}.theme-picker-head p{margin:5px 0 0;color:var(--muted);font-size:13px}.theme-picker-close{border:1px solid var(--line);background:var(--panel-2);color:var(--text);border-radius:12px;width:40px;height:40px;cursor:pointer;font-size:18px}
.theme-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.theme-option{position:relative;border:1px solid var(--line);border-radius:17px;background:var(--panel-2);padding:10px;cursor:pointer;text-align:left;color:var(--text);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.theme-option:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 60%,var(--line));box-shadow:0 14px 35px rgba(0,0,0,.18)}.theme-option.active{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 20%,transparent),0 15px 40px rgba(0,0,0,.18)}.theme-option.active:after{content:'✓';position:absolute;right:10px;top:10px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:12px}.theme-preview{height:74px;border-radius:12px;padding:9px;display:flex;gap:6px;overflow:hidden;background:var(--preview-bg);border:1px solid rgba(255,255,255,.12)}.theme-preview span{display:block;border-radius:7px}.theme-preview .a{width:24%;background:var(--preview-side)}.theme-preview .b{flex:1;background:var(--preview-panel);position:relative}.theme-preview .b:before,.theme-preview .b:after{content:'';position:absolute;height:9px;border-radius:5px;left:10px;right:18px;background:var(--preview-accent)}.theme-preview .b:before{top:12px}.theme-preview .b:after{top:29px;right:42px;background:var(--preview-accent2)}.theme-name{display:block;margin-top:9px;font-weight:600;font-size:13px}.theme-desc{display:block;margin-top:2px;color:var(--muted);font-size:11px}.theme-picker-foot{margin-top:18px;padding-top:15px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--muted);font-size:12px}.theme-reset{border:1px solid var(--line);background:var(--panel-2);color:var(--text);padding:9px 12px;border-radius:10px;cursor:pointer}
@media(max-width:800px){.theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:480px){.theme-picker{padding:10px}.theme-picker-card{width:100%;padding:17px}.theme-grid{grid-template-columns:1fr 1fr;gap:8px}.theme-preview{height:62px}.theme-picker-foot{align-items:flex-start;flex-direction:column}}

/* Thèmes colorés */
[data-theme="ocean"]{--bg:#06131c;--side:rgba(5,19,29,.92);--panel:rgba(10,29,43,.84);--panel-2:rgba(15,43,60,.88);--panel-3:rgba(19,55,75,.78);--line:rgba(56,189,248,.16);--line-strong:rgba(56,189,248,.28);--text:#e8f8ff;--muted:#8eafc1;--accent:#22d3ee;--accent-2:#38bdf8;--accent-3:#67e8f9;--dot:rgba(34,211,238,.08);--shadow:0 22px 70px rgba(0,8,16,.42);color-scheme:dark}
[data-theme="emerald"]{--bg:#071510;--side:rgba(6,21,16,.94);--panel:rgba(10,31,23,.86);--panel-2:rgba(15,48,35,.9);--panel-3:rgba(20,62,44,.8);--line:rgba(52,211,153,.16);--line-strong:rgba(52,211,153,.28);--text:#ecfff7;--muted:#91b8a8;--accent:#34d399;--accent-2:#10b981;--accent-3:#6ee7b7;--dot:rgba(52,211,153,.08);--shadow:0 22px 70px rgba(0,10,7,.42);color-scheme:dark}
[data-theme="sunset"]{--bg:#1b0c13;--side:rgba(28,10,18,.94);--panel:rgba(45,17,27,.86);--panel-2:rgba(65,24,36,.9);--panel-3:rgba(82,30,43,.8);--line:rgba(251,146,60,.17);--line-strong:rgba(251,146,60,.3);--text:#fff4ed;--muted:#c8a39a;--accent:#fb7185;--accent-2:#fb923c;--accent-3:#fbbf24;--dot:rgba(251,113,133,.08);--shadow:0 22px 70px rgba(20,4,9,.46);color-scheme:dark}
[data-theme="rose"]{--bg:#190b16;--side:rgba(28,9,23,.94);--panel:rgba(46,15,38,.86);--panel-2:rgba(65,20,53,.9);--panel-3:rgba(83,25,67,.8);--line:rgba(244,114,182,.17);--line-strong:rgba(244,114,182,.3);--text:#fff0f8;--muted:#c5a0b6;--accent:#f472b6;--accent-2:#c084fc;--accent-3:#fb7185;--dot:rgba(244,114,182,.08);--shadow:0 22px 70px rgba(20,3,15,.45);color-scheme:dark}
[data-theme="cyber"]{--bg:#05080d;--side:rgba(4,10,15,.95);--panel:rgba(8,18,25,.88);--panel-2:rgba(10,29,37,.92);--panel-3:rgba(13,41,48,.82);--line:rgba(34,211,238,.2);--line-strong:rgba(217,70,239,.32);--text:#edffff;--muted:#83a8ad;--accent:#d946ef;--accent-2:#22d3ee;--accent-3:#a3e635;--dot:rgba(217,70,239,.09);--shadow:0 22px 80px rgba(0,0,0,.5);color-scheme:dark}
[data-theme="ruby"]{--bg:#16080a;--side:rgba(24,7,10,.95);--panel:rgba(40,11,15,.88);--panel-2:rgba(59,15,20,.92);--panel-3:rgba(76,19,25,.82);--line:rgba(248,113,113,.17);--line-strong:rgba(248,113,113,.3);--text:#fff2f2;--muted:#c9a0a3;--accent:#ef4444;--accent-2:#f97316;--accent-3:#fb7185;--dot:rgba(239,68,68,.08);--shadow:0 22px 70px rgba(18,2,4,.5);color-scheme:dark}
[data-theme="gold"]{--bg:#171207;--side:rgba(25,19,7,.95);--panel:rgba(42,31,10,.88);--panel-2:rgba(60,44,12,.92);--panel-3:rgba(79,58,15,.82);--line:rgba(250,204,21,.17);--line-strong:rgba(250,204,21,.3);--text:#fffbe7;--muted:#c4b98e;--accent:#facc15;--accent-2:#f59e0b;--accent-3:#fde68a;--dot:rgba(250,204,21,.08);--shadow:0 22px 70px rgba(18,12,0,.48);color-scheme:dark}
[data-theme="arctic"]{--bg:#edf7ff;--side:rgba(255,255,255,.92);--panel:rgba(255,255,255,.9);--panel-2:#e4f2fb;--panel-3:#d8ebf7;--line:rgba(14,116,144,.13);--line-strong:rgba(14,116,144,.22);--text:#0f2940;--muted:#58748b;--accent:#0891b2;--accent-2:#2563eb;--accent-3:#06b6d4;--dot:rgba(8,145,178,.07);--shadow:0 22px 60px rgba(15,63,86,.12);color-scheme:light}
[data-theme="lavender"]{--bg:#f5f1ff;--side:rgba(255,255,255,.94);--panel:rgba(255,255,255,.9);--panel-2:#eee9ff;--panel-3:#e5ddff;--line:rgba(109,40,217,.12);--line-strong:rgba(109,40,217,.22);--text:#24153d;--muted:#716584;--accent:#7c3aed;--accent-2:#a855f7;--accent-3:#c084fc;--dot:rgba(124,58,237,.07);--shadow:0 22px 60px rgba(71,35,120,.12);color-scheme:light}
[data-theme="mint"]{--bg:#eefcf7;--side:rgba(255,255,255,.94);--panel:rgba(255,255,255,.9);--panel-2:#e3f8ef;--panel-3:#d5f1e5;--line:rgba(5,150,105,.12);--line-strong:rgba(5,150,105,.22);--text:#12372c;--muted:#5d7d72;--accent:#059669;--accent-2:#0d9488;--accent-3:#34d399;--dot:rgba(5,150,105,.07);--shadow:0 22px 60px rgba(10,90,65,.11);color-scheme:light}
[data-theme="mono"]{--bg:#f5f5f5;--side:#ffffff;--panel:#ffffff;--panel-2:#eeeeee;--panel-3:#e4e4e4;--line:rgba(0,0,0,.1);--line-strong:rgba(0,0,0,.17);--text:#151515;--muted:#686868;--accent:#111111;--accent-2:#555555;--accent-3:#222222;--dot:rgba(0,0,0,.05);--shadow:0 22px 60px rgba(0,0,0,.1);color-scheme:light}
[data-theme="ocean"] body,[data-theme="emerald"] body,[data-theme="sunset"] body,[data-theme="rose"] body,[data-theme="cyber"] body,[data-theme="ruby"] body,[data-theme="gold"] body,[data-theme="arctic"] body,[data-theme="lavender"] body,[data-theme="mint"] body,[data-theme="mono"] body{background:radial-gradient(900px 500px at 78% -10%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 62%),radial-gradient(700px 450px at 20% 0%,color-mix(in srgb,var(--accent-2) 10%,transparent),transparent 58%),var(--bg)}