:root{
  --bg:#0a0718; --ink:#ece9fb; --mute:#a29cc9; --acc:#a78bfa; --acc2:#7c3aed;
  --ok:#4ade80; --warn:#fbbf24; --bad:#f87171;
  --glass:rgba(255,255,255,.06); --edge:rgba(255,255,255,.14); --r:20px;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;color:var(--ink);background-color:var(--bg);
  font:15px/1.5 "Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  background-image:
    radial-gradient(55rem 38rem at 6% -8%,rgba(124,58,237,.6),transparent 62%),
    radial-gradient(48rem 36rem at 100% 8%,rgba(59,130,246,.30),transparent 62%),
    radial-gradient(44rem 34rem at 45% 112%,rgba(192,38,211,.32),transparent 62%);
  background-attachment:fixed;
}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.01em}
h1{font-size:1.6rem}
h2{font-size:1.02rem;color:var(--mute);font-weight:500}
h3{font-size:1rem;margin-bottom:.5rem}
code{background:rgba(255,255,255,.1);padding:1px 6px;border-radius:6px;font-size:.9em}

/* Verre */
.glass{
  background:var(--glass);border:1px solid var(--edge);border-radius:var(--r);
  box-shadow:0 8px 32px rgba(5,2,20,.45),inset 0 1px 0 rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:rgba(32,24,66,.92)}}

/* Mise en page */
.app{display:grid;grid-template-columns:230px minmax(0,1fr);gap:20px;padding:20px;min-height:100vh}
.side{position:sticky;top:20px;align-self:start;padding:20px 14px;display:flex;flex-direction:column;gap:4px}
.brand{font-size:1.25rem;font-weight:500;padding:0 10px 14px}
.brand b{color:var(--acc);font-weight:700}
.side a{padding:10px 12px;border-radius:12px;color:var(--ink);transition:background .2s}
.side a:hover{background:rgba(255,255,255,.08);text-decoration:none}
.side a[aria-current]{background:linear-gradient(135deg,rgba(124,58,237,.55),rgba(167,139,250,.25));box-shadow:inset 0 0 0 1px rgba(167,139,250,.5)}
.main{display:flex;flex-direction:column;gap:18px;min-width:0}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.tools{display:flex;gap:10px;align-items:center}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card,.pane,.hero,.note{padding:20px}
.pane{display:flex;flex-direction:column;gap:14px}
.pane-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.hero{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.facts{display:flex;gap:28px;flex-wrap:wrap;margin:0}
.facts dt{font-size:.82rem;color:var(--mute)}
.facts dd{margin:0;font-size:1.05rem;font-variant-numeric:tabular-nums}
.big{font-size:2.3rem;font-weight:600;margin:.2rem 0 .6rem;font-variant-numeric:tabular-nums;line-height:1.1}
.big small{font-size:1rem;color:var(--mute);font-weight:400}
.sub{color:var(--mute);margin:.5rem 0 0;font-size:.92rem}
canvas{width:100%;height:56px;display:block;margin-top:12px}

/* Éléments */
.bar{height:8px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.bar.thin{height:4px;margin-top:6px;min-width:90px}
.bar>i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--acc2),var(--acc));transition:width .6s ease}
.bar.warn>i{background:var(--warn)} .bar.bad>i{background:var(--bad)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 12px;border-radius:99px;font-size:.85rem;border:1px solid;margin:0 4px 4px 0}
.pill.ok{color:var(--ok);border-color:rgba(74,222,128,.4);background:rgba(74,222,128,.1)}
.pill.warn{color:var(--warn);border-color:rgba(251,191,36,.4);background:rgba(251,191,36,.1)}
.pill.bad{color:var(--bad);border-color:rgba(248,113,113,.4);background:rgba(248,113,113,.1)}
.dot{width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block}
.pill.ok .dot{animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.35}}
.alert.good{background:rgba(74,222,128,.12);border-color:rgba(74,222,128,.4);color:#bbf7d0}
.alert{background:rgba(248,113,113,.14);border:1px solid rgba(248,113,113,.4);color:#fecaca;padding:10px 14px;border-radius:12px;margin:.5rem 0}
.note.bad{border-color:rgba(248,113,113,.45)}
.btn{font:inherit;font-weight:600;color:#fff;border:0;border-radius:12px;padding:11px 18px;cursor:pointer;background:linear-gradient(135deg,var(--acc2),#9f67ff);box-shadow:0 6px 20px rgba(124,58,237,.4);transition:transform .15s,filter .2s}
.btn:hover{filter:brightness(1.1)} .btn:active{transform:scale(.98)}
.btn.ghost{background:var(--glass);border:1px solid var(--edge);box-shadow:none;font-weight:500}
.btn.sm{padding:7px 14px;font-size:.9rem;display:inline-block}
.btn.ghost:hover{text-decoration:none}
input,select{font:inherit;color:var(--ink);background:rgba(255,255,255,.07);border:1px solid var(--edge);border-radius:12px;padding:10px 14px;width:100%}
select{width:auto} .search{width:min(100%,280px)}
input::placeholder{color:var(--mute)}
details summary{cursor:pointer;color:var(--acc);margin:10px 0}
.tabs{display:flex;gap:6px}
.tabs a{padding:7px 16px;border-radius:99px;color:var(--ink);border:1px solid transparent}
.tabs a[aria-current]{background:rgba(124,58,237,.45);border-color:rgba(167,139,250,.5)}
.repl{padding:14px 0;border-top:1px solid var(--edge)}

/* Tableaux */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.08);white-space:nowrap;vertical-align:top}
td.wrap{white-space:normal;word-break:break-all}
th{font-weight:500;color:var(--mute);font-size:.88rem;cursor:pointer;user-select:none}
th[aria-sort="ascending"]::after{content:" ▲";font-size:.7em} th[aria-sort="descending"]::after{content:" ▼";font-size:.7em}
tbody tr:hover{background:rgba(255,255,255,.05)}
tr.on{background:rgba(124,58,237,.22)}

form.inline{display:flex;gap:6px;flex-wrap:nowrap}
.btn.danger{color:var(--bad);border-color:rgba(248,113,113,.45)}
.sql{font:.85rem/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;min-width:260px;max-width:520px}
pre{background:rgba(0,0,0,.35);border:1px solid var(--edge);border-radius:12px;padding:12px 14px;overflow-x:auto;margin:.5rem 0}
.side{overflow-y:auto;max-height:calc(100vh - 40px)}

/* Connexion */
.login{min-height:100vh;display:grid;place-items:center;padding:20px}
.login-card{width:min(100%,400px);padding:34px 30px;display:flex;flex-direction:column;gap:16px}
.login-card .brand{padding:0;font-size:1.6rem}
.login-card .sub{margin:-8px 0 4px}
.login-card label{display:flex;flex-direction:column;gap:6px;color:var(--mute);font-size:.9rem}

/* Mobile : navigation en barre basse */
@media (max-width:860px){
  .app{grid-template-columns:1fr;padding:14px 12px calc(86px + env(safe-area-inset-bottom))}
  .side{position:fixed;z-index:10;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));top:auto;flex-direction:row;padding:6px;gap:2px;border-radius:22px}
  .side .brand{display:none}
  .side{overflow-x:auto;overflow-y:hidden;max-height:none;scrollbar-width:none}
  .side a{flex:0 0 auto;text-align:center;padding:10px 12px;font-size:.8rem;line-height:1.2;white-space:nowrap}
  h1{font-size:1.35rem} .big{font-size:2rem} .facts{gap:18px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}