/* ============================================================================
   LA SÉLECTION v29 — CSS modulaire
   1. Tokens          | 2. Reset        | 3. Utils
   4. Buttons         | 5. Fields       | 6. Chips / Tags / Badges
   7. Cards           | 8. Auth         | 9. App shell / Topbar
   10. Rail           | 11. Sidebar     | 12. Main / Page head
   13. Catalogue      | 14. QA buttons  | 15. Slide-over
   16. Timeline       | 17. Notifs      | 18. Modals
   19. Popover        | 20. Toasts      | 21. Command palette
   22. KPI / Cards    | 23. Members     | 24. Validation / Reports
   25. Profile        | 26. Perms       | 27. Responsive
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. TOKENS
   ---------------------------------------------------------------------------- */
:root {
  --bg:#f8f6f1; --surface:#ffffff; --surface-2:#f5f2ea; --surface-3:#ebe5d6;
  --ink:#141210; --ink-2:#3f3b30; --ink-3:#79736a; --muted:#a8a294;
  --line:#e6dfcf; --line-2:#f0ebdd; --line-strong:#cbc3ae;
  --brand:#0a3a32; --brand-2:#125a4c; --brand-soft:#e3f1ed; --brand-glow:rgba(10,58,50,.2);
  --accent:#c9660f; --accent-2:#e6852a; --accent-soft:#fbe9d5;
  --gold:#b8860b; --gold-2:#c89520; --gold-soft:#f7eed0;
  --ok:#15803d; --ok-soft:#dbf3e1;
  --warn:#b8630f; --warn-soft:#fbe8d3;
  --bad:#b91c1c; --bad-soft:#f9dcdc;
  --info:#1d4ed8; --info-soft:#dde7fb;
  --purple:#6d28d9; --purple-soft:#ede9fe;
  --cyan:#0891b2; --cyan-soft:#cffafe;
  --r-xs:5px; --r-sm:9px; --r-md:13px; --r-lg:18px; --r-xl:24px; --r-full:999px;
  --sh-1:0 1px 2px rgba(20,18,12,.04);
  --sh-2:0 2px 8px rgba(20,18,12,.06),0 1px 2px rgba(20,18,12,.03);
  --sh-3:0 8px 24px rgba(20,18,12,.08),0 2px 6px rgba(20,18,12,.04);
  --sh-4:0 20px 50px rgba(20,18,12,.15),0 6px 18px rgba(20,18,12,.07);
  --sh-5:0 30px 80px rgba(20,18,12,.2),0 10px 30px rgba(20,18,12,.1);
  --f-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --f-display:'Fraunces','Iowan Old Style',Georgia,serif;
  --f-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --topbar-h:60px; --rail-w:68px; --sidebar-w:264px;
  --ease-out:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}
[data-theme="dark"] {
  --bg:#0c0b09; --surface:#14130e; --surface-2:#1b1913; --surface-3:#252217;
  --ink:#f4eee0; --ink-2:#c6c0b1; --ink-3:#8c8677; --muted:#666256;
  --line:#272319; --line-2:#1e1c14; --line-strong:#3a3627;
  --brand:#5fbfa9; --brand-2:#7fd0be; --brand-soft:#0e2d27; --brand-glow:rgba(95,191,169,.28);
  --accent:#e69c5a; --accent-2:#f0b276; --accent-soft:#32210e;
  --gold:#e6b95e; --gold-2:#f0b862; --gold-soft:#2b2410;
  --ok:#5bd58c; --ok-soft:#0d291b;
  --warn:#f0ae5e; --warn-soft:#2e2110;
  --bad:#f38080; --bad-soft:#321515;
  --info:#89adff; --info-soft:#14224d;
  --purple:#a78bfa; --purple-soft:#1d143e;
  --cyan:#22d3ee; --cyan-soft:#073342;
  color-scheme:dark;
}

/* ----------------------------------------------------------------------------
   2. RESET
   ---------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--f-sans);font-size:14px;line-height:1.5;
  color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow:hidden;font-feature-settings:"cv02","cv03","cv04","cv11";
  touch-action:manipulation;
}
img,svg{display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit;text-decoration:none}
textarea{resize:vertical}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
::selection{background:var(--accent);color:#fff}

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

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--ink-3) 25%,transparent);
  border-radius:6px;border:2px solid transparent;background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{
  background:color-mix(in srgb,var(--ink-3) 45%,transparent);background-clip:padding-box;
}

/* ----------------------------------------------------------------------------
   3. UTILS + SVG sizing
   ---------------------------------------------------------------------------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

.icon{width:16px;height:16px;flex:none;display:inline-block;vertical-align:middle}
.icon-sm{width:14px;height:14px}
.icon-lg{width:20px;height:20px}

button svg,a svg,.btn svg,.ibtn svg,.qa svg,.chip svg{
  width:16px;height:16px;flex:none;pointer-events:none;
}
.btn-sm svg{width:12px;height:12px}

/* ----------------------------------------------------------------------------
   4. BUTTONS
   ---------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:8px 14px;border-radius:var(--r-sm);
  font-size:13px;font-weight:600;letter-spacing:-.005em;
  transition:transform .14s var(--ease-out),background .14s,box-shadow .14s,border-color .14s;
  border:1px solid transparent;white-space:nowrap;line-height:1.15;
  position:relative;user-select:none;
}
.btn:active{transform:translateY(0) scale(.98)}
.btn-primary{background:var(--brand);color:#fbfaf6;box-shadow:0 1px 3px rgba(10,58,50,.25)}
.btn-primary:hover{background:var(--brand-2);transform:translateY(-1px);box-shadow:0 6px 16px rgba(10,58,50,.3)}
[data-theme="dark"] .btn-primary{color:#0d1512}
.btn-soft{background:var(--surface-2);color:var(--ink-2);border-color:var(--line)}
.btn-soft:hover{background:var(--surface-3);border-color:var(--line-strong);color:var(--ink)}
.btn-ghost{color:var(--ink-2)}
.btn-ghost:hover{background:var(--surface-2);color:var(--ink)}
.btn-danger{background:var(--bad);color:#fff}
.btn-danger:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-ok{background:var(--ok);color:#fff}
.btn-ok:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn-purple{background:var(--purple);color:#fff}
.btn-purple:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 6px 16px color-mix(in srgb,var(--purple) 40%,transparent)}
.btn-cyan{background:var(--cyan);color:#fff}
.btn-lg{padding:13px 24px;font-size:14px;border-radius:var(--r-md);font-weight:700}
.btn-sm{padding:5px 10px;font-size:12px;border-radius:var(--r-xs)}

/* ----------------------------------------------------------------------------
   5. FIELDS
   ---------------------------------------------------------------------------- */
.fld{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.fld label{font-size:10.5px;font-weight:800;letter-spacing:.08em;color:var(--ink-3);text-transform:uppercase}
.fld input,.fld select,.fld textarea{
  padding:11px 14px;background:var(--surface-2);border:1.5px solid transparent;
  border-radius:var(--r-sm);font-size:13.5px;color:var(--ink);outline:0;
  transition:all .15s;font-family:inherit;min-width:0;
}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  background:var(--surface);border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-glow);
}
.fld small{font-size:11.5px;color:var(--ink-3);line-height:1.55}

.toggle{
  appearance:none;width:42px;height:24px;border-radius:12px;
  background:var(--line-strong);position:relative;transition:background .18s;
  cursor:pointer;flex:none;border:0;
}
.toggle::after{
  content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .18s;
}
.toggle:checked{background:var(--brand)}
.toggle:checked::after{transform:translateX(18px)}
.toggle:disabled{opacity:.5;cursor:not-allowed}

/* ----------------------------------------------------------------------------
   6. CHIPS / TAGS / BADGES
   ---------------------------------------------------------------------------- */
.chip{
  display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;
  border-radius:var(--r-full);font-size:12px;font-weight:600;color:var(--ink-3);
  background:var(--surface-2);border:1px solid transparent;
  transition:all .13s;white-space:nowrap;cursor:pointer;
}
.chip:hover{color:var(--ink);background:var(--surface-3)}
.chip.on{background:var(--brand);color:#fbfaf6;border-color:var(--brand);box-shadow:0 2px 8px var(--brand-glow)}
[data-theme="dark"] .chip.on{color:#0d1512}
.chip.flagged.on{background:var(--accent);border-color:var(--accent)}
.chip.purple.on{background:var(--purple);border-color:var(--purple)}
.chip.gold.on{background:var(--gold-2);border-color:var(--gold-2);color:#fff}
.chip .ct{
  font-size:10px;font-weight:800;padding:1px 6px;border-radius:5px;
  background:color-mix(in srgb,currentColor 15%,transparent);
  min-width:20px;text-align:center;font-variant-numeric:tabular-nums;
}
.chip.on .ct{background:rgba(255,255,255,.25)}

.tag{
  display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--r-full);
  font-size:10.5px;font-weight:700;white-space:nowrap;line-height:1.4;
}
.tag.warn{background:var(--warn-soft);color:var(--warn)}
.tag.info{background:var(--info-soft);color:var(--info)}
.tag.bad{background:var(--bad-soft);color:var(--bad)}
.tag.gold{background:var(--gold-soft);color:#8a6a1a}
.tag.mute{background:var(--surface-3);color:var(--ink-3)}
.tag.purple{background:var(--purple-soft);color:var(--purple)}
.tag.cyan{background:var(--cyan-soft);color:var(--cyan)}
.tag.ok{background:var(--ok-soft);color:var(--ok)}
.tag.more{
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);
  color:#fff;font-weight:800;cursor:pointer;
  box-shadow:0 2px 6px var(--brand-glow);
  transition:transform .12s,box-shadow .12s;
}
.tag.more:hover{transform:translateY(-1px);box-shadow:0 4px 12px var(--brand-glow)}
.tag.more.warn{background:linear-gradient(135deg,var(--warn),var(--accent))}
.tag.more.bad{background:linear-gradient(135deg,var(--bad),#7f1d1d)}
.tag.more.info{background:linear-gradient(135deg,var(--info),#1e3a8a)}
.tag.more.purple{background:linear-gradient(135deg,var(--purple),#4c1d95)}
.tag.more.gold{background:linear-gradient(135deg,var(--gold-2),#8a6a1a)}
.tag.more.mute{background:linear-gradient(135deg,var(--ink-3),#4a463f)}

.badge{
  display:inline-flex;align-items:center;gap:4px;padding:3px 9px;
  border-radius:var(--r-full);font-size:10px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
}
.badge.admin{background:linear-gradient(135deg,var(--gold-2),#8a6a1a);color:#fff}
.badge.moderator{background:linear-gradient(135deg,var(--cyan),#0e7490);color:#fff}
.badge.member{background:var(--surface-3);color:var(--ink-3)}
.badge.active{background:var(--ok-soft);color:var(--ok)}
.badge.suspended{background:var(--bad-soft);color:var(--bad)}

/* ----------------------------------------------------------------------------
   7. CARDS
   ---------------------------------------------------------------------------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--sh-1)}
.card-hd{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.card-hd h3{font-size:15px;font-weight:700;letter-spacing:-.01em;flex:1}
.card-hd .sub{font-size:12px;color:var(--ink-3);margin-top:4px;line-height:1.5}
.card-hd .ic{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand);font-size:19px;flex:none;
}

/* ----------------------------------------------------------------------------
   8. AUTH
   ---------------------------------------------------------------------------- */
.auth-screen{
  position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;
  padding:24px;background:linear-gradient(135deg,#04100e 0%,#071a17 40%,#0a3a32 100%);
  overflow-y:auto;
}
.auth-screen.hidden{display:none}
.auth-bg{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(95,191,169,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(95,191,169,.06) 1px,transparent 1px),
    radial-gradient(circle at 80% 20%,rgba(232,185,138,.18),transparent 45%);
  background-size:48px 48px,48px 48px,100% 100%;
  -webkit-mask-image:radial-gradient(ellipse at 40% 50%,#000 40%,transparent 85%);
  mask-image:radial-gradient(ellipse at 40% 50%,#000 40%,transparent 85%);
}
.auth-card{
  position:relative;width:100%;max-width:440px;
  background:rgba(21,20,15,.8);backdrop-filter:blur(28px);
  border:1px solid rgba(95,191,169,.2);border-radius:24px;padding:38px 34px;
  color:#f5ede0;box-shadow:0 40px 100px rgba(0,0,0,.55);
  animation:authIn .4s var(--ease-out);
}
@keyframes authIn{from{opacity:0;transform:translateY(20px) scale(.97)}}
.auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:30px}
.auth-brand-mark{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(135deg,#0a3a32,#125a4c);color:#f0b862;
  font-family:var(--f-display);font-size:23px;font-weight:600;
  box-shadow:0 6px 20px rgba(10,58,50,.55);
}
.auth-brand-name{font-size:14px;font-weight:800;letter-spacing:.18em;color:#f5ede0}
.auth-brand-sub{font-size:10.5px;font-weight:600;letter-spacing:.08em;color:#7fd0be;margin-top:3px}
.auth-eyebrow{font-size:10px;font-weight:800;letter-spacing:.22em;color:#e6b98a;margin-bottom:10px;text-transform:uppercase}
.auth-title{font-family:var(--f-display);font-size:28px;font-weight:500;letter-spacing:-.03em;line-height:1.15;color:#fbf7f0;margin-bottom:10px}
.auth-title em{color:#e8b98a;font-style:italic}
.auth-sub{font-size:13px;line-height:1.55;color:#c8d4d0;margin-bottom:26px}
.auth-field{margin-bottom:14px}
.auth-field label{display:block;font-size:10.5px;font-weight:800;letter-spacing:.12em;color:#7fd0be;text-transform:uppercase;margin-bottom:7px}
.auth-field input{
  width:100%;padding:13px 15px;background:rgba(0,0,0,.3);
  border:1px solid rgba(95,191,169,.2);border-radius:12px;font-size:14px;
  color:#f5ede0;outline:0;transition:all .15s;font-family:inherit;
}
.auth-field input:focus{border-color:#7fd0be;background:rgba(0,0,0,.5);box-shadow:0 0 0 4px rgba(95,191,169,.12)}
.auth-field input::placeholder{color:#5c6763}
.auth-field input[type=password]{font-family:var(--f-mono);letter-spacing:.08em}
.auth-actions{margin-top:24px}
.auth-btn{width:100%;justify-content:center;padding:13px 22px;font-size:14px;border-radius:12px;font-weight:700}
.auth-msg{padding:11px 15px;border-radius:11px;font-size:12.5px;font-weight:600;margin-bottom:14px;line-height:1.5;display:none}
.auth-msg.show{display:block}
.auth-msg.error{background:rgba(185,28,28,.2);color:#ffb0b0;border:1px solid rgba(185,28,28,.35)}

/* ----------------------------------------------------------------------------
   9. APP SHELL / TOPBAR
   ---------------------------------------------------------------------------- */
.app{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.topbar{
  height:var(--topbar-h);flex:none;display:flex;align-items:center;gap:12px;
  padding:0 14px;background:var(--bg);border-bottom:1px solid var(--line);
  position:relative;z-index:60;
}
.topbar::before{
  content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--brand) 40%,transparent),transparent);
}
.brand{display:flex;align-items:center;gap:10px;flex:none;cursor:pointer;padding:6px 10px;border-radius:var(--r-sm);transition:background .15s}
.brand:hover{background:var(--surface-2)}
.brand-mark{
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fbfaf6;
  font-family:var(--f-display);font-size:17px;font-weight:600;
  box-shadow:0 3px 10px var(--brand-glow);position:relative;overflow:hidden;
}
.brand-mark::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.2),transparent 55%);pointer-events:none}
.brand-name{font-size:12.5px;font-weight:800;letter-spacing:.14em;color:var(--ink);white-space:nowrap}

.cmdbar{
  flex:1;max-width:600px;display:flex;align-items:center;gap:10px;height:40px;
  padding:0 14px;background:var(--surface-2);border:1.5px solid transparent;
  border-radius:var(--r-md);transition:all .18s;cursor:text;
}
.cmdbar:hover{background:var(--surface-3)}
.cmdbar:focus-within{background:var(--surface);border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-glow)}
.cmdbar > svg{color:var(--ink-3);flex:none;width:16px;height:16px}
.cmdbar input{flex:1;background:transparent;border:0;outline:0;font-size:13.5px;font-weight:500;color:var(--ink);min-width:0}
.cmdbar input::placeholder{color:var(--muted)}
.cmdbar kbd{font-family:var(--f-mono);font-size:10px;font-weight:700;padding:3px 7px;border-radius:5px;background:var(--surface-3);color:var(--ink-3);border:1px solid var(--line)}

.topbar-actions{margin-left:auto;display:flex;gap:4px;align-items:center;flex:none}
.ibtn{width:38px;height:38px;display:grid;place-items:center;border-radius:var(--r-sm);color:var(--ink-3);transition:all .15s;flex:none;position:relative}
.ibtn:hover{background:var(--surface-2);color:var(--ink)}
.ibtn:disabled{opacity:.28;pointer-events:none}
.ibtn > svg{width:17px;height:17px}
.ibtn.has-notif::after{
  content:'';position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;
  background:var(--bad);border:2px solid var(--bg);animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}

.avatar-btn{
  display:flex;align-items:center;gap:9px;height:42px;padding:4px 14px 4px 4px;
  border-radius:var(--r-full);background:var(--surface-2);border:1.5px solid transparent;
  transition:all .18s;cursor:pointer;flex:none;
}
.avatar-btn:hover{background:var(--surface-3);border-color:var(--line-strong);transform:translateY(-1px)}
.avatar-btn .av{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:800;flex:none;
  position:relative;box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.avatar-btn .av.admin{background:linear-gradient(135deg,var(--gold-2),#8a6a1a)}
.avatar-btn .av.moderator{background:linear-gradient(135deg,var(--cyan),#0e7490)}
.avatar-btn .info{display:flex;flex-direction:column;gap:1px;min-width:0;max-width:130px}
.avatar-btn .nm{font-size:12.5px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.15}
.avatar-btn .rl{font-size:9px;font-weight:800;letter-spacing:.06em;color:var(--ink-3);text-transform:uppercase;line-height:1.1}
.avatar-btn .rl.admin{color:var(--gold)}
.avatar-btn .rl.moderator{color:var(--cyan)}

.body{flex:1;min-height:0;display:grid;grid-template-columns:var(--rail-w) var(--sidebar-w) minmax(0,1fr);transition:grid-template-columns .28s var(--ease-out)}
.body[data-sidebar="0"]{grid-template-columns:var(--rail-w) 0 minmax(0,1fr)}
.body[data-sidebar="0"] .sidebar{overflow:hidden;opacity:0;pointer-events:none}

/* ----------------------------------------------------------------------------
   10. RAIL
   ---------------------------------------------------------------------------- */
.rail{
  background:linear-gradient(180deg,#04100e 0%,#071a17 100%);
  border-right:1px solid rgba(95,191,169,.12);
  display:flex;flex-direction:column;align-items:center;padding:16px 0;gap:6px;
  position:relative;z-index:20;overflow:hidden;
}
.rail-logo{
  width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(135deg,#0a3a32,#125a4c);color:#f0b862;
  font-family:var(--f-display);font-size:20px;font-weight:600;
  box-shadow:0 4px 14px rgba(10,58,50,.5);cursor:pointer;margin-bottom:14px;
  flex:none;transition:transform .2s;
}
.rail-logo:hover{transform:scale(1.06) rotate(-3deg)}
.rail-btn{
  width:48px;height:48px;display:grid;place-items:center;border-radius:12px;
  color:#7f8a86;background:transparent;transition:all .18s;
  position:relative;flex:none;cursor:pointer;
}
.rail-btn:hover{color:#e6f2ee;background:rgba(95,191,169,.1)}
.rail-btn.on{
  color:#fbf7f0;
  background:linear-gradient(135deg,rgba(95,191,169,.2),rgba(232,185,138,.08));
  border:1px solid rgba(95,191,169,.28);box-shadow:0 4px 12px rgba(0,0,0,.3);
}
.rail-btn.on::before{
  content:'';position:absolute;left:-16px;top:50%;transform:translateY(-50%);
  width:3px;height:24px;border-radius:0 3px 3px 0;background:#7fd0be;
  box-shadow:0 0 8px #7fd0be;
}
.rail-btn > span:first-child{width:22px;height:22px;font-size:20px;display:grid;place-items:center}
.rail-btn .badge-dot{
  position:absolute;top:10px;right:10px;min-width:16px;height:16px;padding:0 4px;
  border-radius:8px;background:var(--bad);color:#fff;font-size:9.5px;font-weight:800;
  display:grid;place-items:center;border:2px solid #04100e;line-height:1;
}
.rail-btn .badge-dot.purple{background:var(--purple)}
.rail-btn .badge-dot.cyan{background:var(--cyan)}
.rail-btn .badge-dot.red{background:var(--bad)}
.rail-btn .tooltip{
  position:absolute;left:calc(100% + 12px);top:50%;
  transform:translateY(-50%) translateX(-4px);padding:7px 12px;
  background:var(--ink);color:var(--bg);font-size:12px;font-weight:600;
  border-radius:8px;white-space:nowrap;pointer-events:none;opacity:0;
  transition:opacity .15s,transform .15s;z-index:100;box-shadow:var(--sh-3);
}
.rail-btn .tooltip::before{
  content:'';position:absolute;right:100%;top:50%;transform:translateY(-50%);
  border:5px solid transparent;border-right-color:var(--ink);
}
.rail-btn:hover .tooltip{opacity:1;transform:translateY(-50%) translateX(0)}
.rail-bottom{
  margin-top:auto;display:flex;flex-direction:column;gap:6px;align-items:center;
  padding-top:12px;border-top:1px solid rgba(95,191,169,.15);width:100%;
}
.rail-logout{color:#f8baba !important}
.rail-logout:hover{background:rgba(185,28,28,.25) !important;color:#fff !important}

/* ----------------------------------------------------------------------------
   11. SIDEBAR
   ---------------------------------------------------------------------------- */
.sidebar{background:var(--surface-2);border-right:1px solid var(--line);overflow-y:auto;padding:16px 0 20px;display:flex;flex-direction:column;gap:16px;transition:opacity .2s}
.sidebar-header{padding:4px 16px 12px;border-bottom:1px solid var(--line-2);margin:0 6px 4px}
.sidebar-header .eyebrow{font-size:9.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.sidebar-header h2{font-family:var(--f-display);font-size:19px;font-weight:500;letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
.sidebar-header .count{font-size:11.5px;color:var(--ink-3);margin-top:4px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sidebar-sect{padding:0 12px}
.sidebar-sect-head{
  display:flex;align-items:center;gap:8px;padding:6px 10px;
  font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);cursor:pointer;user-select:none;transition:color .15s;
}
.sidebar-sect-head:hover{color:var(--ink-3)}
.sidebar-sect-head .lbl{flex:1}
.sidebar-sect-head .chev{width:11px;height:11px;transition:transform .2s;flex:none}
.sidebar-sect.collapsed .chev{transform:rotate(-90deg)}
.sidebar-sect.collapsed .sidebar-sect-body{display:none}
.sidebar-sect-body{display:flex;flex-direction:column;gap:1px}
.snav{
  display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;
  border-radius:var(--r-sm);font-size:13px;font-weight:500;color:var(--ink-2);
  text-align:left;transition:all .12s;position:relative;margin-bottom:1px;
}
.snav:hover{background:var(--surface-3);color:var(--ink)}
.snav.on{background:var(--surface);color:var(--ink);font-weight:700;box-shadow:var(--sh-2)}
.snav .ic{width:18px;height:18px;flex:none;display:grid;place-items:center;font-size:15px;line-height:1}
.snav .lb{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.snav .ct{
  font-size:11px;font-weight:700;color:var(--ink-3);padding:2px 8px;border-radius:5px;
  background:var(--surface-3);min-width:26px;text-align:center;font-variant-numeric:tabular-nums;
}
.snav.on .ct{background:var(--brand-soft);color:var(--brand)}
.snav .ct.red{background:var(--bad-soft);color:var(--bad)}
.snav .ct.purple{background:var(--purple-soft);color:var(--purple)}
.snav .ct.gold{background:var(--gold-soft);color:var(--gold)}
.snav .ct.cyan{background:var(--cyan-soft);color:var(--cyan)}
.snav .ct.ok{background:var(--ok-soft);color:var(--ok)}
.snav .dot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--c,var(--brand));box-shadow:0 0 0 3px color-mix(in srgb,var(--c,var(--brand)) 20%,transparent)}
.snav .bar-mini{width:44px;height:3px;border-radius:3px;background:var(--surface-3);overflow:hidden;flex:none}
.snav .bar-mini > i{display:block;height:100%;border-radius:3px;transition:width .3s}

/* Sidebar icon colors */
.snav[data-cf="all"] .ic{color:var(--ok)}
.snav[data-cf="fav"] .ic{color:var(--gold)}
.snav[data-cf="flagged"] .ic{color:var(--accent)}
.snav[data-cf="toscan"] .ic{color:var(--info)}
.snav[data-cf="ko"] .ic{color:var(--bad)}
.snav[data-cf="deleted"] .ic{color:var(--ink-3)}
.snav[data-cf="popular"] .ic{color:#ef4444}
.snav[data-cf^="rep-pub"] .ic{color:var(--warn)}
.snav[data-cf^="rep-signup"] .ic{color:var(--warn)}
.snav[data-cf^="rep-misleading"] .ic{color:var(--bad)}
.snav[data-cf^="rep-dead"] .ic{color:var(--bad)}

/* ----------------------------------------------------------------------------
   12. MAIN / PAGE HEAD
   ---------------------------------------------------------------------------- */
.main{min-height:0;overflow-y:auto;overflow-x:hidden;background:var(--bg);display:flex;flex-direction:column;position:relative;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}
.main > .page-head{flex:0 0 auto}
.main > .page-content{flex:0 0 auto;overflow:visible!important;min-height:min-content}
.page-head{
  position:sticky;top:0;z-index:15;padding:18px 28px 16px;
  background:color-mix(in srgb,var(--bg) 94%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.page-head-row{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.page-head-copy{flex:1;min-width:0}
.page-head .eyebrow{
  font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);margin-bottom:6px;display:flex;align-items:center;gap:8px;
}
.page-head .eyebrow::before{content:'';width:16px;height:2px;background:var(--accent);border-radius:2px}
.page-head h1{font-family:var(--f-display);font-size:28px;font-weight:500;letter-spacing:-.026em;line-height:1.08;color:var(--ink);margin-bottom:6px}
.page-head h1 em{font-style:italic;color:var(--brand);font-weight:500}
.page-head p{font-size:13px;color:var(--ink-3);line-height:1.55;max-width:72ch}
.page-head-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.page-content{padding:24px 28px 80px;display:flex;flex-direction:column;gap:20px}

.view-modes{display:flex;gap:2px;padding:4px;background:var(--surface-2);border-radius:var(--r-md)}
.view-mode-btn{
  display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;
  border-radius:var(--r-xs);font-size:12.5px;font-weight:600;color:var(--ink-3);
  transition:all .13s;white-space:nowrap;cursor:pointer;
}
.view-mode-btn:hover{color:var(--ink);background:var(--surface-3)}
.view-mode-btn.on{background:var(--surface);color:var(--ink);font-weight:700;box-shadow:var(--sh-1)}
.view-mode-btn svg{width:14px;height:14px;flex:none}

.chipbar{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px;align-items:center}

/* ----------------------------------------------------------------------------
   13. CATALOGUE
   ---------------------------------------------------------------------------- */
.cat-header{display:flex;align-items:center;gap:12px;padding:22px 12px 10px;position:relative}
.cat-header:first-child{padding-top:8px}
.cat-header .cat-dot{width:11px;height:11px;border-radius:50%;background:var(--c,var(--brand));flex:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--c,var(--brand)) 20%,transparent)}
.cat-header .cat-name{font-family:var(--f-display);font-size:17px;font-weight:500;letter-spacing:-.015em;color:var(--ink);display:flex;align-items:center;gap:8px}
.cat-header .cat-count{font-size:12px;font-weight:700;color:var(--ink-3);padding:3px 10px;border-radius:6px;background:var(--surface-2)}
.cat-header .cat-line{flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}

.sites-grid{padding:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}

.site-card{
  position:relative;padding:18px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);
  transition:all .2s var(--ease-out);cursor:default;
  overflow:hidden;display:flex;flex-direction:column;gap:14px;
}
.site-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--c) 0%,color-mix(in srgb,var(--c) 30%,transparent) 100%);
}
.site-card:hover{border-color:var(--line-strong);box-shadow:var(--sh-3);transform:translateY(-3px)}
.site-card:hover .site-card-title{color:var(--c)}
.site-card.deleted{opacity:.42}
.site-card.pending{
  border-style:dashed;
  background:linear-gradient(135deg,color-mix(in srgb,var(--purple) 4%,var(--surface)),var(--surface));
}

/* Zone 70% cliquable */
.site-row .sr-hit,
.site-card .sc-hit{
  position:absolute;
  inset:0 30% 0 0;
  z-index:1;
  cursor:pointer;
  border-radius:inherit;
}
.site-row,
.site-card{cursor:default}
.site-card .sc-qa,
.site-card .sc-tags,
.site-row .sr-qa,
.site-row .sr-tags{cursor:default}

.sc-head{display:flex;gap:12px;align-items:flex-start}
.sc-av{
  width:52px;height:52px;border-radius:13px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c) 12%,var(--surface-2));color:var(--c);
  font-size:20px;font-weight:800;border:1px solid color-mix(in srgb,var(--c) 20%,transparent);
  overflow:visible;position:relative;flex:none;
}
.sc-av img{width:60%;height:60%;object-fit:contain;display:none;border-radius:8px}
.sc-av.img img{display:block}
.sc-av.img > span:first-child{display:none}
.sc-av .ring{position:absolute;bottom:-3px;right:-3px;width:16px;height:16px;border-radius:50%;border:3px solid var(--surface);box-shadow:0 2px 4px rgba(0,0,0,.15)}
.sc-av[data-state="flagged"] .ring{background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent),0 2px 4px rgba(0,0,0,.15)}
.sc-av[data-state="ko"] .ring{background:var(--bad);box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 25%,transparent),0 2px 4px rgba(0,0,0,.15)}
.sc-av[data-state="ok"] .ring{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 25%,transparent),0 2px 4px rgba(0,0,0,.15)}
.sc-av[data-state="unknown"] .ring{background:var(--muted)}
.sc-av[data-state="suspect"] .ring{background:var(--info);box-shadow:0 0 0 3px color-mix(in srgb,var(--info) 25%,transparent),0 2px 4px rgba(0,0,0,.15);animation:pulse 1.8s ease-in-out infinite}
.sc-av[data-state="deleted"] .ring{background:var(--ink-3)}

.sc-titles{flex:1;min-width:0}
.site-card-title{
  font-size:15.5px;font-weight:700;letter-spacing:-.014em;color:var(--ink);
  display:flex;align-items:center;gap:8px;transition:color .15s;margin-bottom:3px;min-width:0;
}
.site-card-title > span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.sc-host{font-family:var(--f-mono);font-size:11px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-fav-badge{font-size:10.5px;font-weight:800;color:var(--gold);display:flex;align-items:center;gap:3px;flex:none}
.sc-desc{
  font-size:12.5px;color:var(--ink-2);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.4em;
}
.sc-spark{display:flex;gap:2px;align-items:flex-end;height:20px;padding:0 2px}
.sc-spark-bar{flex:1;min-width:3px;max-width:8px;border-radius:2px;background:var(--surface-3);transition:all .3s}
.sc-spark-bar.ok{background:var(--ok);opacity:.7}
.sc-spark-bar.ko{background:var(--bad);opacity:.7}
.sc-spark-bar.unknown{background:var(--muted);opacity:.4}
.sc-foot{display:flex;gap:8px;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--line-2);flex-wrap:wrap}
.sc-cat{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--r-full);background:color-mix(in srgb,var(--c) 12%,var(--surface-2));color:var(--c);font-size:10.5px;font-weight:700}
.sc-tags{display:flex;gap:4px;flex-wrap:wrap;max-width:100%;min-width:0}
.sc-qa{display:flex;gap:3px;align-items:center;margin-left:auto}

/* LIST ROWS */
.sites-rows{padding:6px 12px 60px;display:flex;flex-direction:column;gap:2px}
.site-row{
  position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto;
  gap:12px;align-items:center;padding:11px 14px;border-radius:var(--r-sm);
  border:1px solid transparent;transition:all .14s;min-width:0;cursor:default;
}
.site-row:hover{background:var(--surface);border-color:var(--line);box-shadow:var(--sh-1)}
.site-row.on{background:var(--surface);border-color:color-mix(in srgb,var(--brand) 30%,transparent)}
.site-row.on::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:24px;border-radius:0 3px 3px 0;background:var(--brand)}
.site-row.deleted{opacity:.4}

.site-row > .sr-av,
.site-row > .sr-body,
.site-row > .sr-qa{position:relative;z-index:2;pointer-events:none;min-width:0}
.site-row .sr-qa{display:flex;gap:2px;align-items:center;flex:none}
.site-row .sr-qa > *{pointer-events:auto}
.site-row .sr-tags,
.site-row .sr-tags > *{pointer-events:auto;cursor:pointer}

.sr-av{
  width:44px;height:44px;border-radius:11px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c) 12%,var(--surface-2));color:var(--c);
  font-size:14px;font-weight:800;overflow:visible;position:relative;flex:none;
  border:1px solid color-mix(in srgb,var(--c) 20%,transparent);
}
.sr-av img{width:60%;height:60%;object-fit:contain;display:none;border-radius:6px}
.sr-av.img img{display:block}
.sr-av.img > span:first-child{display:none}
.sr-av .ring{position:absolute;bottom:-3px;right:-3px;width:14px;height:14px;border-radius:50%;border:2.5px solid var(--bg);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.sr-av[data-state="flagged"] .ring{background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent),0 1px 3px rgba(0,0,0,.12)}
.sr-av[data-state="ko"] .ring{background:var(--bad);box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 22%,transparent),0 1px 3px rgba(0,0,0,.12)}
.sr-av[data-state="ok"] .ring{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent),0 1px 3px rgba(0,0,0,.12)}
.sr-av[data-state="unknown"] .ring{background:var(--muted)}
.sr-av[data-state="suspect"] .ring{background:var(--info);box-shadow:0 0 0 3px color-mix(in srgb,var(--info) 22%,transparent),0 1px 3px rgba(0,0,0,.12);animation:pulse 1.8s ease-in-out infinite}
.sr-av[data-state="deleted"] .ring{background:var(--ink-3)}

.sr-body{display:flex;flex-direction:column;gap:4px;min-width:0;overflow:hidden}
.sr-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:650;color:var(--ink);min-width:0}
.sr-title .sr-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:0 1 auto}
.sr-title .sr-fav{color:var(--gold);font-size:11px;flex:none}
.sr-title .ext{width:14px;height:14px;flex:none;opacity:.55;transition:opacity .15s}
.site-row:hover .sr-title .ext{opacity:1}
.sr-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11px;color:var(--ink-3);min-width:0}
.sr-meta .sr-host{font-family:var(--f-mono);font-size:10.5px}
.sr-meta .sr-cat{padding:2px 8px;font-size:10px;flex:none}
.sr-meta .sr-fresh{flex:none;opacity:.85}
.sr-meta .sr-tags{display:flex;gap:4px;align-items:center;flex-wrap:wrap;min-width:0}

/* ----------------------------------------------------------------------------
   14. QA BUTTONS
   ---------------------------------------------------------------------------- */
.qa{
  width:34px;height:34px;display:grid;place-items:center;border-radius:var(--r-sm);
  transition:all .15s;position:relative;border:1.5px solid transparent;flex:none;
}
.qa > svg{width:16px;height:16px}
.qa:hover{transform:scale(1.1)}
.qa:active{transform:scale(.94)}
.qa.fav{color:var(--gold);background:color-mix(in srgb,var(--gold) 10%,var(--surface-2))}
.qa.fav.on{color:#fff;background:linear-gradient(135deg,var(--gold-2) 0%,#a87a15 100%);border-color:var(--gold-2);box-shadow:0 3px 10px color-mix(in srgb,var(--gold) 40%,transparent)}
.qa.flag{color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface-2))}
.qa.flag.on{color:#fff;background:linear-gradient(135deg,var(--accent) 0%,#a04a08 100%);border-color:var(--accent)}
.qa.validate{color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,var(--surface-2))}
.qa.validate:hover{background:var(--ok);color:#fff}
.qa.dead{color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,var(--surface-2))}
.qa.dead:hover{background:var(--bad);color:#fff}
.qa.restore{color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,var(--surface-2))}
.qa.more{color:var(--ink-3);background:var(--surface-2);border-color:var(--line)}

/* ----------------------------------------------------------------------------
   15. SLIDE-OVER — ouverture à DROITE
   ---------------------------------------------------------------------------- */
.slideover{
  position:fixed;top:0;right:0;bottom:0;width:70vw;max-width:720px;min-width:320px;
  background:var(--surface);border-left:1px solid var(--line);
  box-shadow:var(--sh-5);z-index:500;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .35s var(--ease-out);
}
.slideover.open{transform:none}
.slideover-backdrop{
  position:fixed;inset:0;background:color-mix(in srgb,#0a1612 45%,transparent);
  backdrop-filter:blur(3px);z-index:499;opacity:0;pointer-events:none;transition:opacity .25s;
}
.slideover-backdrop.open{opacity:1;pointer-events:auto}

.so-head{
  position:sticky;top:0;z-index:10;padding:18px 22px 14px;
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--surface) 96%,transparent);
  backdrop-filter:blur(12px);
}
.so-head-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.so-kicker{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.so-head-top .sp{flex:1}
.so-hero{display:flex;gap:14px;align-items:flex-start}
.so-av{
  width:60px;height:60px;flex:none;border-radius:15px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c) 12%,var(--surface-2));color:var(--c);
  font-size:24px;font-weight:800;border:1px solid color-mix(in srgb,var(--c) 20%,transparent);
  overflow:visible;position:relative;
}
.so-av img{width:60%;height:60%;object-fit:contain;display:none;border-radius:8px}
.so-av.img img{display:block}
.so-av.img > span:first-child{display:none}
.so-av .ring{position:absolute;bottom:-3px;right:-3px;width:16px;height:16px;border-radius:50%;border:3px solid var(--surface)}
.so-av[data-state="flagged"] .ring{background:var(--accent)}
.so-av[data-state="ko"] .ring{background:var(--bad)}
.so-av[data-state="ok"] .ring{background:var(--ok)}
.so-av[data-state="unknown"] .ring{background:var(--muted)}
.so-av[data-state="suspect"] .ring{background:var(--info);animation:pulse 1.8s ease-in-out infinite}

.so-titles{min-width:0;flex:1}
.so-name{font-family:var(--f-display);font-size:24px;font-weight:500;letter-spacing:-.028em;line-height:1.15;overflow-wrap:anywhere}
.so-sub{font-family:var(--f-mono);font-size:12px;color:var(--ink-3);margin-top:4px;display:inline-block}

.so-tabs{display:flex;gap:2px;padding:4px;background:var(--surface-2);border-radius:var(--r-sm);margin-top:16px;overflow-x:auto;scrollbar-width:none}
.so-tabs::-webkit-scrollbar{display:none}
.so-tab{
  padding:8px 14px;border-radius:var(--r-xs);font-size:12.5px;font-weight:600;
  color:var(--ink-3);transition:all .12s;flex:none;
  display:flex;align-items:center;gap:6px;white-space:nowrap;cursor:pointer;
}
.so-tab:hover{color:var(--ink)}
.so-tab.on{background:var(--surface);color:var(--ink);font-weight:700;box-shadow:var(--sh-1)}
.so-tab .ct{font-size:10px;font-weight:800;padding:1px 6px;border-radius:4px;background:var(--surface-3);color:var(--ink-3)}
.so-tab.on .ct{background:var(--brand-soft);color:var(--brand)}

.so-body{flex:1;overflow-y:auto;padding:20px 22px 32px;display:flex;flex-direction:column;gap:20px}
.so-sec{display:flex;flex-direction:column;gap:10px}
.so-sec-h{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.so-sec-h .sp{flex:1}
.so-sec-h .info{font-size:10.5px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--ink-3)}
.so-actions{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap}
.so-actions .btn{flex:1;min-width:0}
.so-actions .btn.open-btn{flex:2;background:var(--brand);color:#fbfaf6;padding:11px 18px;font-size:13.5px}

/* Notes */
.note-item{padding:14px;background:var(--surface-2);border-radius:var(--r-md);display:flex;gap:12px;align-items:flex-start;transition:background .15s}
.note-item:hover{background:var(--surface-3)}
.note-item .n-av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:800;color:#fff;flex:none}
.note-item .n-body{flex:1;min-width:0;font-size:13px;color:var(--ink-2);line-height:1.55}
.note-item .n-body strong{display:block;font-weight:700;color:var(--ink);margin-bottom:4px;font-size:12.5px}
.note-item .n-meta{display:flex;gap:8px;align-items:center;margin-top:6px;font-size:10.5px;font-family:var(--f-mono);color:var(--ink-3)}
.note-item .n-actions{margin-left:auto;display:flex;gap:2px;flex:none}
.note-item .n-actions button{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;color:var(--ink-3);transition:all .12s;font-size:11px;cursor:pointer}
.note-item .n-actions button:hover{background:var(--surface);color:var(--ink)}
.note-item .n-actions button.danger:hover{background:var(--bad-soft);color:var(--bad)}
.note-add{display:flex;gap:10px;align-items:flex-start}
.note-add textarea{
  flex:1;padding:11px 14px;background:var(--surface-2);
  border:1.5px solid transparent;border-radius:var(--r-md);font-size:13px;
  outline:0;transition:all .15s;font-family:inherit;color:var(--ink);min-height:60px;
}
.note-add textarea:focus{background:var(--surface);border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-glow)}

/* ----------------------------------------------------------------------------
   16. TIMELINE
   ---------------------------------------------------------------------------- */
.timeline{position:relative;padding-left:24px}
.timeline::before{content:'';position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--brand),transparent);border-radius:2px;opacity:.3}
.timeline-item{position:relative;padding:10px 0;font-size:13px;color:var(--ink-2);line-height:1.55}
.timeline-item::before{content:'';position:absolute;left:-21px;top:18px;width:12px;height:12px;border-radius:50%;background:var(--brand);border:2.5px solid var(--surface);box-shadow:0 0 0 2px var(--surface-2)}
.timeline-item.warn::before{background:var(--accent)}
.timeline-item.bad::before{background:var(--bad)}
.timeline-item.ok::before{background:var(--ok)}
.timeline-item .t-who{font-weight:800;color:var(--brand)}
.timeline-item .t-time{font-size:10.5px;font-family:var(--f-mono);color:var(--ink-3);margin-top:3px}
.timeline-item em{color:var(--ink-3);font-style:italic}

/* ----------------------------------------------------------------------------
   17. NOTIFICATIONS
   ---------------------------------------------------------------------------- */
.notif-panel{
  position:fixed;z-index:900;width:400px;max-width:calc(100vw - 20px);
  max-height:70vh;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:var(--sh-4);overflow:hidden;
  animation:notifIn .22s var(--ease-out);display:flex;flex-direction:column;
}
@keyframes notifIn{from{opacity:0;transform:translateY(-10px) scale(.97)}}
.notif-head{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 8%,var(--surface)),var(--surface))}
.notif-head h3{font-size:14px;font-weight:700;flex:1}
.notif-head .badge{background:var(--bad);color:#fff;font-size:11px;padding:3px 9px;border-radius:var(--r-full);font-weight:800}
.notif-list{overflow-y:auto;max-height:60vh;padding:8px}
.notif-item{display:flex;align-items:flex-start;gap:12px;padding:12px;border-radius:var(--r-md);transition:background .12s;cursor:pointer;position:relative}
.notif-item:hover{background:var(--surface-2)}
.notif-item.unread{background:color-mix(in srgb,var(--brand) 4%,var(--surface-2))}
.notif-item .ni-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:none;font-size:17px;background:var(--surface-2)}
.notif-item .ni-ic.bad{background:var(--bad-soft);color:var(--bad)}
.notif-item .ni-ic.purple{background:var(--purple-soft);color:var(--purple)}
.notif-item .ni-ic.ok{background:var(--ok-soft);color:var(--ok)}
.notif-item .ni-body{flex:1;min-width:0;font-size:13px;color:var(--ink-2);line-height:1.5}
.notif-item .ni-body strong{display:block;color:var(--ink);font-weight:700;margin-bottom:3px;font-size:13px}
.notif-item .ni-time{font-size:10.5px;font-family:var(--f-mono);color:var(--ink-3);white-space:nowrap;padding-top:3px}

/* ----------------------------------------------------------------------------
   18. MODALS
   ---------------------------------------------------------------------------- */
.modal{
  position:fixed;inset:0;z-index:600;display:none;align-items:center;justify-content:center;
  padding:20px;background:color-mix(in srgb,#0a1612 68%,transparent);backdrop-filter:blur(10px);
}
.modal.open{display:flex;animation:fade .18s}
@keyframes fade{from{opacity:0}}
.mbox{
  width:100%;max-width:580px;max-height:92vh;overflow:auto;background:var(--surface);
  border-radius:var(--r-xl);box-shadow:var(--sh-5);
  animation:mboxIn .3s var(--ease-out);color:var(--ink);border:1px solid var(--line);
}
@keyframes mboxIn{from{opacity:0;transform:scale(.94) translateY(16px)}}
.mbox.wide{max-width:920px}
.mbox.narrow{max-width:480px}
.mhd{display:flex;align-items:center;gap:12px;padding:22px 24px 18px;border-bottom:1px solid var(--line)}
.mhd h3{font-size:16px;font-weight:700;flex:1;letter-spacing:-.01em}
.mhd .sub{font-size:12px;color:var(--ink-3);font-weight:500;margin-top:4px}
.mbd{padding:22px 24px;display:flex;flex-direction:column;gap:16px}
.mft{display:flex;gap:8px;justify-content:flex-end;padding:16px 24px;border-top:1px solid var(--line);background:var(--surface-2);border-radius:0 0 var(--r-xl) var(--r-xl)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-grid .full{grid-column:1/-1}

/* ----------------------------------------------------------------------------
   19. POPOVER
   ---------------------------------------------------------------------------- */
.pop{
  position:fixed;z-index:850;min-width:240px;
  max-width:min(340px,calc(100vw - 20px));padding:7px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-5);
  animation:popIn .16s var(--ease-out);overflow:hidden auto;
  max-height:min(80vh,calc(100dvh - 24px));overscroll-behavior:contain;
}
@keyframes popIn{from{opacity:0;transform:translateY(-5px) scale(.96)}}
.pop-head{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line-2);margin-bottom:5px}
.pop-head .av{width:42px;height:42px;border-radius:11px;flex:none;display:grid;place-items:center;font-size:15px;font-weight:800;color:#fff;overflow:hidden;position:relative}
.pop-head .info{flex:1;min-width:0}
.pop-head .info strong{display:block;font-size:14px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pop-head .info small{display:block;font-family:var(--f-mono);font-size:11px;color:var(--ink-3);margin-top:2px}
.pop-hd{padding:11px 14px 6px;font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.pop-item{
  display:flex;align-items:center;gap:12px;width:100%;padding:9px 11px;
  border-radius:var(--r-sm);font-size:13px;font-weight:500;color:var(--ink);
  text-align:left;transition:all .12s;cursor:pointer;
}
.pop-item:hover{background:var(--surface-2);transform:translateX(2px)}
.pop-item.danger{color:var(--bad)}
.pop-item.danger:hover{background:var(--bad-soft)}
.pop-item.good{color:var(--ok)}
.pop-item.good:hover{background:var(--ok-soft)}
.pop-item .ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none;background:var(--surface-2);color:var(--ink-3);font-size:14px}
.pop-item .ic svg{width:16px;height:16px}
.pop-item.danger .ic{background:var(--bad-soft);color:var(--bad)}
.pop-item.good .ic{background:var(--ok-soft);color:var(--ok)}
.pop-item .lbl-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pop-item .ck{margin-left:auto;width:16px;height:16px;flex:none;border-radius:50%;border:1.5px solid var(--line-strong);display:grid;place-items:center;background:var(--surface)}
.pop-item.on .ck{background:var(--accent);border-color:var(--accent)}
.pop-item.on .ck::after{content:'';width:5px;height:9px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg) translate(-1px,-2px)}
.pop-sep{height:1px;background:var(--line-2);margin:6px 10px}

/* ----------------------------------------------------------------------------
   20. TOASTS
   ---------------------------------------------------------------------------- */
.toasts{position:fixed;bottom:20px;right:20px;z-index:950;display:flex;flex-direction:column;gap:8px;pointer-events:none;max-width:360px}
.toast{
  display:flex;align-items:center;gap:10px;padding:13px 17px;
  background:var(--ink);color:var(--bg);border-radius:var(--r-md);
  box-shadow:var(--sh-4);font-size:13px;font-weight:600;pointer-events:auto;
  animation:toastIn .3s var(--ease-out);
}
@keyframes toastIn{from{opacity:0;transform:translateY(16px) scale(.95)}}
.toast.ok{background:var(--ok);color:#fff}
.toast.bad{background:var(--bad);color:#fff}
.toast.warn{background:var(--warn);color:#fff}
.toast.purple{background:var(--purple);color:#fff}

/* ----------------------------------------------------------------------------
   21. COMMAND PALETTE
   ---------------------------------------------------------------------------- */
.cmdov{
  position:fixed;inset:0;z-index:1000;display:none;align-items:flex-start;justify-content:center;
  padding:12vh 16px 16px;background:color-mix(in srgb,#0a1612 58%,transparent);backdrop-filter:blur(14px);
}
.cmdov.open{display:flex;animation:fade .18s}
.cmd{
  width:100%;max-width:640px;max-height:540px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-5);
  display:flex;flex-direction:column;overflow:hidden;animation:mboxIn .26s var(--ease-out);
}
.cmd-in{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line)}
.cmd-in > svg{color:var(--ink-3);flex:none;width:18px;height:18px}
.cmd-in input{flex:1;border:0;background:transparent;outline:0;font-size:15px;font-weight:500;color:var(--ink)}
.cmd-in kbd{font-family:var(--f-mono);font-size:10.5px;font-weight:700;padding:4px 8px;border-radius:5px;background:var(--surface-3);color:var(--ink-3)}
.cmd-list{overflow-y:auto;padding:10px;max-height:460px}
.cmd-sec{padding:12px 16px 6px;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.cmd-item{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--r-sm);cursor:pointer;font-size:13.5px}
.cmd-item:hover,.cmd-item.sel{background:var(--surface-2)}
.cmd-item .ic{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;background:var(--surface-2);font-size:15px}
.cmd-item .tx{flex:1;min-width:0}
.cmd-item .tx strong{font-weight:600;display:block;font-size:13.5px}
.cmd-item .tx small{color:var(--ink-3);font-size:11.5px;display:block;margin-top:1px}
.cmd-empty{padding:40px 20px;text-align:center;color:var(--ink-3);font-size:13px}

/* ----------------------------------------------------------------------------
   22. KPI / EMPTY / INVITE CTA
   ---------------------------------------------------------------------------- */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.kpi{
  padding:20px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);display:flex;flex-direction:column;gap:8px;
  transition:all .15s;position:relative;overflow:hidden;
}
.kpi:hover{border-color:var(--line-strong);transform:translateY(-2px);box-shadow:var(--sh-2)}
.kpi .k{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.kpi .v{font-family:var(--f-display);font-size:36px;font-weight:500;letter-spacing:-.03em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.kpi .s{font-size:11.5px;color:var(--ink-3);margin-top:6px;line-height:1.4}
.kpi.accent{background:linear-gradient(135deg,var(--brand-soft),var(--surface))}
.kpi.accent .v{color:var(--brand)}
.kpi.warn{background:linear-gradient(135deg,var(--warn-soft),var(--surface))}
.kpi.warn .v{color:var(--warn)}
.kpi.bad{background:linear-gradient(135deg,var(--bad-soft),var(--surface))}
.kpi.bad .v{color:var(--bad)}
.kpi.gold{background:linear-gradient(135deg,var(--gold-soft),var(--surface))}
.kpi.gold .v{color:var(--gold)}
.kpi.purple{background:linear-gradient(135deg,var(--purple-soft),var(--surface))}
.kpi.purple .v{color:var(--purple)}
.kpi.cyan{background:linear-gradient(135deg,var(--cyan-soft),var(--surface))}
.kpi.cyan .v{color:var(--cyan)}

.empty-state{padding:64px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.empty-state .es-ic{width:88px;height:88px;border-radius:24px;background:linear-gradient(135deg,var(--surface-2),var(--surface-3));display:grid;place-items:center;font-size:40px}
.empty-state h3{font-family:var(--f-display);font-size:22px;font-weight:500;letter-spacing:-.02em}
.empty-state p{font-size:13px;color:var(--ink-3);max-width:38ch;line-height:1.6}

.invite-cta{
  padding:24px;background:linear-gradient(135deg,var(--purple-soft),color-mix(in srgb,var(--cyan) 8%,var(--surface)));
  border:1.5px solid color-mix(in srgb,var(--purple) 30%,var(--line));
  border-radius:var(--r-xl);display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  position:relative;overflow:hidden;
}
.invite-cta::before{content:'';position:absolute;top:-50%;right:-10%;width:400px;height:400px;background:radial-gradient(circle,color-mix(in srgb,var(--purple) 15%,transparent),transparent 65%);pointer-events:none}
.invite-cta .ic-lg{width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,var(--purple),var(--cyan));color:#fff;display:grid;place-items:center;font-size:30px;flex:none;box-shadow:0 8px 24px color-mix(in srgb,var(--purple) 35%,transparent);position:relative;z-index:1}
.invite-cta .cta-copy{flex:1;min-width:220px;position:relative;z-index:1}
.invite-cta .cta-copy strong{display:block;font-family:var(--f-display);font-size:20px;font-weight:500;letter-spacing:-.02em;color:var(--ink);margin-bottom:6px;line-height:1.2}
.invite-cta .cta-copy p{font-size:13px;color:var(--ink-2);line-height:1.55;margin:0;max-width:52ch}
.invite-cta .cta-actions{display:flex;gap:8px;flex-wrap:wrap;position:relative;z-index:1}
.invite-cta .btn-lg{box-shadow:0 8px 24px color-mix(in srgb,var(--purple) 40%,transparent)}

/* ----------------------------------------------------------------------------
   23. MEMBERS
   ---------------------------------------------------------------------------- */
.members-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.member-card{
  padding:18px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);display:flex;align-items:center;gap:14px;
  transition:all .15s;cursor:pointer;position:relative;
}
.member-card:hover{border-color:var(--line-strong);transform:translateY(-2px);box-shadow:var(--sh-3)}
.member-card .mc-av{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:21px;font-weight:800;color:#fff;flex:none;position:relative}
.member-card .mc-av.admin::after{content:'👑';position:absolute;bottom:-6px;right:-4px;font-size:16px;background:var(--surface);border-radius:50%;width:22px;height:22px;display:grid;place-items:center;border:2px solid var(--gold-2)}
.member-card .mc-av.moderator::after{content:'🛡';position:absolute;bottom:-6px;right:-4px;font-size:13px;background:var(--surface);border-radius:50%;width:22px;height:22px;display:grid;place-items:center;border:2px solid var(--cyan)}
.member-card .mc-info{flex:1;min-width:0}
.member-card .mc-info strong{display:block;font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.01em;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.member-card .mc-info .meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:11px;color:var(--ink-3)}
.member-card .mc-actions{display:flex;gap:3px;flex:none}

/* ----------------------------------------------------------------------------
   24. VALIDATION / REPORT CARDS
   ---------------------------------------------------------------------------- */
.validation-card{
  padding:20px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);display:flex;flex-direction:column;gap:14px;
  transition:all .15s;position:relative;overflow:hidden;
}
.validation-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--purple),var(--cyan))}
.validation-card:hover{border-color:color-mix(in srgb,var(--purple) 40%,var(--line));box-shadow:var(--sh-3)}
.validation-card .vc-head{display:flex;align-items:center;gap:14px}
.validation-card .vc-av{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:22px;font-weight:800;color:#fff;flex:none}
.validation-card .vc-info{flex:1;min-width:0}
.validation-card .vc-info strong{display:block;font-size:16px;font-weight:700;color:var(--ink);margin-bottom:4px}
.validation-card .vc-info small{display:block;font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3)}
.validation-card .vc-desc{font-size:13px;color:var(--ink-2);line-height:1.5}
.validation-card .vc-footer{display:flex;align-items:center;gap:12px;padding-top:12px;border-top:1px solid var(--line-2);flex-wrap:wrap}
.validation-card .vc-progress{flex:1;min-width:200px}
.validation-card .vc-progress-bar{height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden;margin-top:6px}
.validation-card .vc-progress-bar > i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--purple),var(--cyan));transition:width .3s}
.validation-card .vc-progress-label{font-size:11px;color:var(--ink-3);display:flex;justify-content:space-between}
.validation-card .vc-actions{display:flex;gap:6px;flex-wrap:wrap}

.report-card{
  padding:20px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);margin-bottom:12px;border-left:4px solid var(--bad);
  transition:box-shadow .15s;
}
.report-card:hover{box-shadow:var(--sh-3)}
.report-card .rc-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.report-card .rc-av{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:20px;font-weight:800;color:#fff;flex:none}
.report-card .rc-info{flex:1;min-width:0}
.report-card .rc-info strong{display:block;font-size:16px;font-weight:700;color:var(--ink)}
.report-card .rc-info small{display:block;font-size:12px;color:var(--ink-3);margin-top:4px}
.user-report-item{padding:14px;background:var(--surface-2);border-radius:var(--r-md);margin-bottom:8px}
.user-report-item .head{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.user-report-item .head strong{font-size:13px;color:var(--ink)}
.user-report-item .head .reason{padding:2px 8px;border-radius:var(--r-full);background:var(--bad-soft);color:var(--bad);font-size:11px;font-weight:700}
.user-report-item .head .time{margin-left:auto;font-size:10.5px;font-family:var(--f-mono);color:var(--ink-3)}
.user-report-item .note{font-size:12.5px;color:var(--ink-2);line-height:1.55;font-style:italic}

.heatmap{display:grid;gap:3px;padding:14px;background:var(--surface-2);border-radius:var(--r-md)}
.heatmap-cell{aspect-ratio:1;border-radius:3px;background:var(--surface-3);transition:all .15s;cursor:pointer}
.heatmap-cell:hover{transform:scale(1.3);z-index:5;position:relative}
.heatmap-cell[data-lv="1"]{background:color-mix(in srgb,var(--brand) 25%,var(--surface-3))}
.heatmap-cell[data-lv="2"]{background:color-mix(in srgb,var(--brand) 45%,var(--surface-3))}
.heatmap-cell[data-lv="3"]{background:color-mix(in srgb,var(--brand) 65%,var(--surface-3))}
.heatmap-cell[data-lv="4"]{background:var(--brand)}

.activity-feed{display:flex;flex-direction:column;gap:6px}
.activity-item{
  display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:flex-start;
  padding:14px 16px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);transition:all .15s;
}
.activity-item:hover{border-color:var(--line-strong);transform:translateX(3px);box-shadow:var(--sh-2)}
.activity-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none;font-size:18px;background:var(--surface-2);box-shadow:var(--sh-1)}
.activity-ic.add,.activity-ic.approve,.activity-ic.confirm{background:var(--ok-soft);color:var(--ok)}
.activity-ic.edit,.activity-ic.invite{background:var(--info-soft);color:var(--info)}
.activity-ic.flag{background:var(--accent-soft);color:var(--accent)}
.activity-ic.remove,.activity-ic.report_user,.activity-ic.ban{background:var(--bad-soft);color:var(--bad)}
.activity-ic.register{background:var(--cyan-soft);color:var(--cyan)}
.activity-ic.promote{background:var(--gold-soft);color:var(--gold)}
.activity-ic.login{background:var(--surface-2);color:var(--ink-3)}
.activity-ic.note{background:var(--purple-soft);color:var(--purple)}
.activity-body{min-width:0;font-size:13px;color:var(--ink-2);line-height:1.55}
.activity-body strong{color:var(--ink);font-weight:700}
.activity-body .who{font-weight:800;color:var(--brand);margin-right:5px}
.activity-time{font-size:11px;font-family:var(--f-mono);color:var(--ink-3);white-space:nowrap;padding-top:3px}

/* ----------------------------------------------------------------------------
   25. PROFILE
   ---------------------------------------------------------------------------- */
.profile-header{
  padding:28px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 10%,var(--surface)),var(--surface) 60%);
  border:1px solid color-mix(in srgb,var(--brand) 18%,var(--line));
  border-radius:var(--r-xl);display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  position:relative;overflow:hidden;
}
.profile-header::after{content:'';position:absolute;top:-50%;right:-10%;width:400px;height:400px;background:radial-gradient(circle,var(--brand-glow),transparent 65%);pointer-events:none}
.profile-header .p-av{width:88px;height:88px;border-radius:50%;color:#fff;display:grid;place-items:center;font-size:36px;font-weight:800;flex:none;box-shadow:0 10px 28px rgba(0,0,0,.2);position:relative;z-index:1}
.profile-header .p-info{flex:1;min-width:0;position:relative;z-index:1}
.profile-header .p-name{font-family:var(--f-display);font-size:30px;font-weight:500;letter-spacing:-.026em;color:var(--ink);margin-bottom:8px;line-height:1.05}
.profile-header .p-meta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--ink-3)}
.profile-header .p-actions{display:flex;gap:8px;flex-wrap:wrap;position:relative;z-index:1}

/* ----------------------------------------------------------------------------
   26. TREE / INVITE / PERMS
   ---------------------------------------------------------------------------- */
.tree-node{padding:14px 16px;background:var(--surface-2);border-radius:var(--r-md);display:flex;align-items:center;gap:14px;border:1px solid transparent;transition:all .12s;cursor:pointer}
.tree-node:hover{border-color:var(--line-strong);background:var(--surface-3)}
.tree-children{margin-left:28px;padding-left:16px;border-left:2px dashed var(--line-strong);display:flex;flex-direction:column;gap:3px;margin-top:3px}

.invite-display{
  display:flex;align-items:center;gap:12px;padding:16px 18px;background:var(--surface-2);
  border-radius:var(--r-md);border:1.5px dashed var(--line-strong);font-family:var(--f-mono);
}
.invite-display code{flex:1;font-size:17px;font-weight:800;letter-spacing:.16em;color:var(--brand)}

.perm-group{margin-bottom:20px}
.perm-group-head{display:flex;align-items:center;gap:10px;padding:6px 0 10px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.perm-group-head::after{content:'';flex:1;height:1px;background:var(--line)}
.perm-row{display:flex;align-items:center;gap:16px;padding:14px 18px;background:var(--surface-2);border-radius:var(--r-md);margin-bottom:8px;flex-wrap:wrap}
.perm-row .perm-ic{width:42px;height:42px;border-radius:11px;background:var(--surface);display:grid;place-items:center;font-size:19px;flex:none;box-shadow:var(--sh-1)}
.perm-row .perm-info{flex:1;min-width:200px}
.perm-row .perm-info strong{display:block;font-size:13.5px;font-weight:700;color:var(--ink)}
.perm-row .perm-info small{display:block;font-size:11.5px;color:var(--ink-3);margin-top:3px}
.perm-row .perm-toggles{display:flex;gap:18px}
.perm-toggle{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);cursor:pointer}

.revision-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-full);background:var(--warn-soft);color:var(--warn);font-size:11px;font-weight:800;letter-spacing:.02em}
.revision-card{
  padding:14px;background:linear-gradient(135deg,var(--warn-soft),var(--surface));
  border:1px solid color-mix(in srgb,var(--warn) 30%,var(--line));
  border-radius:var(--r-md);display:flex;flex-direction:column;gap:10px;margin-bottom:8px;
}
.revision-diff{font-size:12.5px;line-height:1.6;color:var(--ink-2)}
.revision-diff .before{color:var(--bad);text-decoration:line-through;font-style:italic}
.revision-diff .after{color:var(--ok);font-weight:700}

/* ----------------------------------------------------------------------------
   27. RESPONSIVE
   ---------------------------------------------------------------------------- */
@media (min-width:1440px){
  .sites-grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}
  .page-content{padding:28px 40px 100px}
  .page-head{padding:22px 40px 18px}
}
@media (min-width:1600px){
  .sites-grid{grid-template-columns:repeat(auto-fill,minmax(360px,1fr))}
  .page-content{max-width:1600px;margin:0 auto;width:100%}
}
@media (max-width:1100px){
  .sites-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));padding:14px}
}
@media (max-width:900px){
  .body{grid-template-columns:var(--rail-w) minmax(0,1fr)}
  .sidebar{display:none}
  .avatar-btn .info{display:none}
  .brand-name{display:none}
  .slideover{width:100vw;max-width:none;min-width:0}
  .site-row{grid-template-columns:42px minmax(0,1fr) auto;padding:10px 12px;gap:10px}
  .sr-meta .sr-tags{display:none}
  .sr-av{width:42px;height:42px}
  .sr-qa .qa{width:32px;height:32px}
}
@media (max-width:640px){
  :root{--topbar-h:54px}
  .topbar{padding:0 8px;gap:4px}
  #undoBtn,#redoBtn{display:none}
  .cmdbar{height:36px;padding:0 10px;gap:8px}
  .cmdbar kbd{display:none}
  .brand{padding:4px 6px}
  .brand-mark{width:28px;height:28px;font-size:15px}
  .ibtn{width:34px;height:34px}
  .ibtn > svg{width:15px;height:15px}
  .avatar-btn{height:36px;padding:3px 8px 3px 3px}
  .avatar-btn .av{width:28px;height:28px;font-size:11px}
  #addBtn{padding:6px 10px;font-size:12px}
  #addBtn > svg{width:13px;height:13px}
  .rail{display:none}
  .body{grid-template-columns:1fr}
  .page-head{padding:14px 14px 12px}
  .page-head h1{font-size:22px}
  .page-head p{font-size:12.5px;line-height:1.5}
  .page-head-actions{gap:6px}
  .page-content{padding:14px 12px 70px;gap:14px}
  .sites-grid{grid-template-columns:1fr;padding:10px;gap:10px}
  .site-card{padding:14px;border-radius:var(--r-md)}
  .sc-av{width:44px;height:44px;font-size:18px}
  .site-card-title{font-size:14.5px}
  .sc-desc{font-size:12px;-webkit-line-clamp:2}
  .sc-foot{padding-top:10px}
  .sites-rows{padding:4px 8px 60px}
  .site-row{grid-template-columns:38px minmax(0,1fr) auto;padding:10px 8px;gap:8px}
  .sr-av{width:38px;height:38px;border-radius:9px;font-size:13px}
  .sr-title{font-size:13.5px}
  .sr-meta{font-size:10.5px;gap:5px}
  .sr-qa .qa{width:28px;height:28px}
  .sr-qa .qa > svg{width:13px;height:13px}
  .cat-header{padding:16px 8px 8px}
  .cat-header .cat-name{font-size:15px}
  .cat-count{font-size:11px;padding:2px 8px}
  .chipbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:4px;margin:12px -14px 0;padding-left:14px;padding-right:14px}
  .chipbar::-webkit-scrollbar{display:none}
  .chip{flex:none;height:28px;padding:0 10px;font-size:11.5px}
  .view-modes{padding:3px}
  .view-mode-btn{height:28px;padding:0 10px;font-size:11.5px}
  .view-mode-btn > svg{display:none}
  .slideover{width:100vw}
  .so-head{padding:14px 16px 12px}
  .so-body{padding:16px 16px 24px;gap:16px}
  .so-name{font-size:20px}
  .so-av{width:52px;height:52px;font-size:20px}
  .so-tab{padding:7px 11px;font-size:12px}
  .so-actions .btn{padding:10px 14px;font-size:13px}
  .modal{padding:12px;align-items:flex-end}
  .mbox{max-width:100%;border-radius:var(--r-lg);max-height:94vh}
  .mhd{padding:16px 18px 12px}
  .mhd h3{font-size:15px}
  .mbd{padding:16px 18px;gap:14px}
  .mft{padding:12px 18px;border-radius:0 0 var(--r-lg) var(--r-lg)}
  .form-grid{grid-template-columns:1fr}
  .toasts{left:10px;right:10px;bottom:10px;max-width:none}
  .toast{font-size:12.5px;padding:11px 14px}
  .kpi-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .kpi{padding:14px}
  .kpi .v{font-size:26px}
  .kpi .k{font-size:9.5px;letter-spacing:.06em}
  .kpi .s{font-size:10.5px}
  .members-grid{grid-template-columns:1fr}
  .member-card{padding:14px;gap:12px}
  .mc-av{width:48px;height:48px;font-size:18px}
  .invite-cta{padding:18px;gap:16px}
  .invite-cta .ic-lg{width:52px;height:52px;font-size:24px}
  .invite-cta .cta-copy{min-width:100%}
  .invite-cta .cta-copy strong{font-size:17px}
  .invite-cta .cta-actions{width:100%}
  .invite-cta .btn-lg{flex:1;justify-content:center}
  .profile-header{padding:20px 16px;gap:16px}
  .profile-header .p-av{width:70px;height:70px;font-size:28px}
  .profile-header .p-name{font-size:22px}
  .profile-header .p-meta{font-size:11.5px;gap:8px}
  .notif-panel{width:calc(100vw - 20px) !important;left:10px !important;right:10px;max-width:none}
  .heatmap{padding:10px;gap:2px}
  .cmdov{padding:8vh 10px 10px}
  .cmd-in{padding:14px 16px}
  .cmd-in input{font-size:14px}
  .cmd-in kbd{display:none}
  .perm-row{padding:12px 14px;gap:12px}
  .perm-row .perm-info{min-width:100%}
  .perm-row .perm-toggles{margin-left:auto}
  .card{padding:16px}
  .card-hd{gap:12px;margin-bottom:14px}
  .card-hd .ic{width:36px;height:36px;font-size:17px}
  .card-hd h3{font-size:14px}
  .activity-item{grid-template-columns:36px 1fr;gap:10px;padding:12px}
  .activity-ic{width:36px;height:36px;font-size:15px}
  .activity-time{display:none}
  /* Popover mobile : repositionné pleine largeur */
  .pop{left:10px !important;right:10px !important;width:auto;max-width:none;min-width:0;max-height:60vh}
}
@media (max-width:400px){
  .cmdbar{display:none}
  .page-head-actions{width:100%}
  .view-modes{flex:1;display:flex}
  .view-mode-btn{flex:1;justify-content:center;padding:0 8px}
  #sortSel{width:100%}
  .sr-qa .qa:nth-child(n+3):not(.more){display:none}
  .sr-qa .qa.more{display:grid !important}
  .kpi-grid{grid-template-columns:1fr}
  .chipbar{margin:12px -12px 0;padding-left:12px;padding-right:12px}
}
@media (hover:none){
  .site-card:hover{transform:none}
  .member-card:hover{transform:none}
  .qa:hover{transform:none}
  .qa:active{transform:scale(.92)}
}
.site-row:focus-visible,
.site-card:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-color:var(--brand)}

@media print{
  .topbar,.rail,.sidebar,.toasts,.cmdov,.slideover,.modal{display:none !important}
  body{overflow:visible}
  .app{height:auto}
  .main{overflow:visible}
}

/* Language badges ---------------------------------------------------------- */
.lang-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:20px;padding:0 4px;border-radius:6px;
  background:var(--surface-2);border:1px solid var(--line);
  font-size:14px;line-height:1;vertical-align:middle;flex:none;
  box-shadow:var(--sh-1);
}
.site-card-title .lang-badge{margin-left:1px}
.sr-meta .lang-badge{height:18px;min-width:20px;font-size:13px;padding:0 3px}
.so-sub .lang-badge{height:18px;min-width:20px;font-size:13px;padding:0 3px}

/* Analyse — progression globale */
.analysis-progress{
  position:fixed;left:50%;bottom:18px;z-index:1800;
  width:min(420px,calc(100vw - 28px));
  transform:translate(-50%,18px);opacity:0;pointer-events:none;
  padding:11px 13px 10px;border-radius:14px;
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  border:1px solid var(--line);box-shadow:var(--sh-4);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  transition:opacity .18s ease,transform .18s ease;
}
.analysis-progress.show{opacity:1;transform:translate(-50%,0)}
.analysis-progress.done .analysis-progress-dot{background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 16%,transparent)}
.analysis-progress-head{display:flex;align-items:center;gap:8px;font-size:12px;line-height:1}
.analysis-progress-head strong{font-size:12.5px;flex:1}
.analysis-progress-head #analysisProgressCount{font-family:var(--f-mono);font-size:10.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.analysis-progress-dot{width:8px;height:8px;border-radius:50%;background:var(--info);box-shadow:0 0 0 4px color-mix(in srgb,var(--info) 16%,transparent);animation:analysisPulse 1.2s ease-in-out infinite;flex:none}
.analysis-progress-track{height:5px;margin-top:9px;border-radius:999px;overflow:hidden;background:var(--surface-3)}
.analysis-progress-track i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--brand),var(--accent));transition:width .22s ease}
.analysis-progress-site{margin-top:7px;font-size:10.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes analysisPulse{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.3);opacity:1}}
@media(max-width:600px){.analysis-progress{bottom:12px;width:calc(100vw - 20px);padding:10px 11px}.analysis-progress-site{font-size:10px}}

/* Cloud sync */
.cloud-sync-pill{position:fixed;right:14px;bottom:14px;z-index:80;padding:7px 10px;border-radius:999px;background:color-mix(in srgb,var(--surface) 92%,transparent);border:1px solid var(--line);box-shadow:var(--shadow-sm);font:700 11px var(--f-sans);color:var(--ink-3);backdrop-filter:blur(12px)}
.cloud-sync-pill.ok{color:#16794b}.cloud-sync-pill.off{color:#9a5a13}
@media(max-width:700px){.cloud-sync-pill{bottom:72px;right:10px;font-size:10px}}