/* =========================================================================
   Enquête péremptions — feuille de styles partagée
   Utilisée par le site public (index.html, resultats.html) et par la
   version Artifact. Un seul jeu de tokens, deux thèmes.
   ========================================================================= */

:root{
  --ground:#F1F4F2; --surface:#FFFFFF; --surface-2:#F7F9F8; --surface-3:#EDF2EF;
  --ink:#10211E; --ink-2:#41544F; --muted:#6C7F7A; --line:#D9E2DE; --line-2:#C3D1CC;
  --accent:#0E6B59; --accent-ink:#0A5445; --accent-soft:#E1EFE9; --accent-line:#A9D2C5;
  --on-accent:#FFFFFF;
  --warn:#9A6200; --warn-soft:#FBF0DC; --crit:#A83521;
  --shadow:0 1px 2px rgba(16,33,30,.05), 0 8px 24px -14px rgba(16,33,30,.28);
  --shadow-lift:0 2px 6px rgba(16,33,30,.06), 0 22px 46px -22px rgba(16,33,30,.45);
  --display:"Archivo", "Segoe UI", system-ui, sans-serif;
  --body:"IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
  --r:10px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#08120F; --surface:#0E1B18; --surface-2:#122220; --surface-3:#162A26;
    --ink:#E3EDE9; --ink-2:#B4C6C0; --muted:#879A95; --line:#1E302C; --line-2:#2A423C;
    --accent:#45C6A2; --accent-ink:#7FDCC0; --accent-soft:#11312A; --accent-line:#245247;
    --on-accent:#062019;
    --warn:#D9A23B; --warn-soft:#2A2113; --crit:#E0795F;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -18px rgba(0,0,0,.9);
    --shadow-lift:0 2px 8px rgba(0,0,0,.5), 0 26px 52px -24px rgba(0,0,0,1);
  }
}
:root[data-theme="dark"]{
  --ground:#08120F; --surface:#0E1B18; --surface-2:#122220; --surface-3:#162A26;
  --ink:#E3EDE9; --ink-2:#B4C6C0; --muted:#879A95; --line:#1E302C; --line-2:#2A423C;
  --accent:#45C6A2; --accent-ink:#7FDCC0; --accent-soft:#11312A; --accent-line:#245247;
  --on-accent:#062019;
  --warn:#D9A23B; --warn-soft:#2A2113; --crit:#E0795F;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -18px rgba(0,0,0,.9);
  --shadow-lift:0 2px 8px rgba(0,0,0,.5), 0 26px 52px -24px rgba(0,0,0,1);
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--ground); color:var(--ink);
  font-family:var(--body); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--display); text-wrap:balance; margin:0; letter-spacing:-.012em}
p{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
button{font:inherit; color:inherit; cursor:pointer}
input,textarea,select{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}

/* ---------- barre supérieure ---------- */
.topbar{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:40;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar-in{
  max-width:1180px; margin:0 auto; padding:10px 20px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:10px; min-width:0}
.sigil{
  width:30px; height:30px; border-radius:7px; flex:none;
  background:var(--accent); color:var(--on-accent); display:grid; place-items:center;
  font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.02em;
}
.brand-t{font-family:var(--display); font-weight:600; font-size:14.5px; line-height:1.2}
.brand-s{font-size:11.5px; color:var(--muted); letter-spacing:.04em; text-transform:uppercase; font-family:var(--mono)}
.topbar-right{margin-left:auto; display:flex; align-items:center; gap:10px}
.saved{font-size:11.5px; color:var(--muted); font-family:var(--mono); opacity:0; transition:opacity .4s}
.saved.on{opacity:1}
.ghost-btn{
  background:transparent; border:1px solid var(--line-2); color:var(--ink-2);
  border-radius:99px; padding:5px 12px; font-size:12.5px; font-weight:500;
}
.ghost-btn:hover{border-color:var(--accent); color:var(--accent)}
.progress-track{height:3px; background:var(--surface-3)}
.progress-fill{height:100%; background:var(--accent); width:0%; transition:width .45s cubic-bezier(.2,.7,.2,1)}

/* ---------- ossature ---------- */
.shell{max-width:1180px; margin:0 auto; padding:26px 20px 80px; display:grid; grid-template-columns:246px minmax(0,1fr); gap:34px; align-items:start}
.shell.single{grid-template-columns:minmax(0,1fr); max-width:1060px}
@media (max-width:920px){ .shell{grid-template-columns:1fr; gap:18px; padding-top:14px} }

/* ---------- rail des sections ---------- */
.rail{position:sticky; top:calc(env(safe-area-inset-top, 0px) + 64px)}
@media (max-width:920px){ .rail{position:static} }
.rail-h{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 10px 2px}
.steps{display:flex; flex-direction:column; gap:2px; list-style:none; margin:0; padding:0}
@media (max-width:920px){
  .steps{flex-direction:row; overflow-x:auto; gap:8px; padding-bottom:6px; scrollbar-width:thin}
  .rail-h{display:none}
}
.step{
  display:flex; gap:10px; align-items:flex-start; width:100%; text-align:left;
  background:transparent; border:1px solid transparent; border-radius:var(--r);
  padding:9px 10px; color:var(--ink-2);
}
.step:hover{background:var(--surface-2)}
.step[aria-current="true"]{background:var(--surface); border-color:var(--accent-line); box-shadow:var(--shadow)}
.step-k{
  font-family:var(--mono); font-size:11px; font-weight:600; width:21px; height:21px; flex:none;
  border-radius:6px; display:grid; place-items:center; background:var(--surface-3); color:var(--ink-2);
  border:1px solid var(--line);
}
.step[aria-current="true"] .step-k{background:var(--accent); color:var(--on-accent); border-color:var(--accent)}
.step.is-done .step-k{background:var(--accent-soft); color:var(--accent); border-color:var(--accent-line)}
.step.is-skip .step-k{opacity:.5}
.step-l{min-width:0}
.step-n{font-size:13px; font-weight:500; line-height:1.3; display:block}
.step-m{font-size:11px; color:var(--muted); font-family:var(--mono); letter-spacing:.02em}
@media (max-width:920px){
  .step{flex:none; width:auto; align-items:center; border:1px solid var(--line); background:var(--surface)}
  .step-n{white-space:nowrap}
  .step-m{display:none}
}

/* ---------- panneaux ---------- */
.panel{background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); overflow:hidden}
.panel + .panel{margin-top:16px}
.panel-pad{padding:26px 28px}
@media (max-width:560px){ .panel-pad{padding:20px 17px} }

.sec-head{padding:22px 28px; border-bottom:1px solid var(--line); background:var(--surface-2)}
@media (max-width:560px){ .sec-head{padding:18px 17px} }
.sec-tag{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:9px}
.chip{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 8px; border-radius:5px; background:var(--accent-soft); color:var(--accent-ink);
  border:1px solid var(--accent-line); font-weight:600;
}
.chip.neutral{background:var(--surface-3); color:var(--muted); border-color:var(--line)}
.sec-title{font-size:22px; font-weight:600; line-height:1.2}
@media (max-width:560px){ .sec-title{font-size:19px} }
.sec-sub{margin-top:8px; color:var(--ink-2); font-size:13.5px; max-width:64ch}

/* ---------- questions ---------- */
.qlist{display:flex; flex-direction:column}
.q{padding:24px 28px; border-bottom:1px solid var(--line)}
.q:last-child{border-bottom:0}
@media (max-width:560px){ .q{padding:20px 17px} }
.q.invalid, .subq.invalid{background:color-mix(in srgb, var(--crit) 6%, transparent)}
.q-head{display:flex; gap:13px; align-items:flex-start}
.q-num{
  font-family:var(--mono); font-size:12px; font-weight:600; flex:none;
  min-width:26px; height:26px; padding:0 6px; border-radius:7px; display:grid; place-items:center;
  background:var(--surface-3); color:var(--ink-2); border:1px solid var(--line); margin-top:1px;
}
.q.answered .q-num{background:var(--accent-soft); color:var(--accent-ink); border-color:var(--accent-line)}
.q-text{font-family:var(--display); font-weight:500; font-size:16.5px; line-height:1.4; max-width:62ch}
.q-meta{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:7px}
.tag{font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; color:var(--muted); background:var(--surface-3); border-radius:4px; padding:2px 6px}
.opts{margin:14px 0 0; padding:0; border:0; display:flex; flex-direction:column; gap:6px}
.opts.cols{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:6px}
.opt{
  display:flex; gap:11px; align-items:flex-start; padding:10px 12px;
  border:1px solid var(--line); border-radius:9px; background:var(--surface-2);
  transition:border-color .16s, background .16s; cursor:pointer;
}
.opt:hover{border-color:var(--line-2); background:var(--surface-3)}
.opt input{position:absolute; opacity:0; width:0; height:0}
.box{
  width:17px; height:17px; flex:none; margin-top:2px; border:1.5px solid var(--line-2);
  background:var(--surface); display:grid; place-items:center; transition:all .16s; color:var(--on-accent);
}
.box.round{border-radius:50%}
.box.square{border-radius:5px}
.box svg{width:11px; height:11px; opacity:0; transform:scale(.6); transition:all .16s}
.opt:has(input:checked){border-color:var(--accent); background:var(--accent-soft)}
.opt:has(input:checked) .box{border-color:var(--accent); background:var(--accent)}
.opt:has(input:checked) .box svg{opacity:1; transform:scale(1)}
.opt:has(input:focus-visible){outline:2px solid var(--accent); outline-offset:2px}
.opt-t{font-size:14.2px; line-height:1.45}
.other-in{
  margin-top:8px; width:100%; padding:9px 11px; border-radius:8px;
  border:1px solid var(--line-2); background:var(--surface); font-size:14px;
}
.other-in::placeholder{color:var(--muted)}

.subq{margin-top:18px; padding-left:16px; border-left:2px solid var(--accent-line)}
.subq-t{font-weight:600; font-size:14.4px; color:var(--ink); max-width:62ch}

/* échelle 1-5 */
.scale{display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-top:14px}
@media (max-width:520px){ .scale{gap:4px} }
.scale .opt{flex-direction:column; align-items:center; gap:6px; text-align:center; padding:12px 6px}
.scale .opt .box{display:none}
.scale-n{font-family:var(--mono); font-size:19px; font-weight:600; line-height:1}
.scale-l{font-size:11px; color:var(--muted); line-height:1.25}
.opt:has(input:checked) .scale-l{color:var(--accent-ink)}

/* classement */
.ranks{display:flex; flex-direction:column; gap:7px; margin-top:14px}
.rank{
  display:flex; gap:12px; align-items:center; text-align:left; width:100%;
  padding:11px 13px; border:1px solid var(--line); border-radius:9px;
  background:var(--surface-2); transition:all .16s;
}
.rank:hover{border-color:var(--line-2)}
.rank.on{border-color:var(--accent); background:var(--accent-soft)}
.rank-b{
  width:26px; height:26px; flex:none; border-radius:7px; display:grid; place-items:center;
  border:1.5px dashed var(--line-2); font-family:var(--mono); font-weight:600; font-size:12.5px; color:var(--muted);
}
.rank.on .rank-b{border-style:solid; border-color:var(--accent); background:var(--accent); color:var(--on-accent)}
.rank-t{font-size:14.2px; line-height:1.4}

/* ---------- navigation ---------- */
.navbar{display:flex; gap:12px; align-items:center; padding:18px 28px; background:var(--surface-2); border-top:1px solid var(--line); flex-wrap:wrap}
@media (max-width:560px){ .navbar{padding:16px 17px} }
.btn{
  border:1px solid transparent; border-radius:9px; padding:11px 20px;
  font-weight:600; font-size:14.2px; font-family:var(--display); transition:all .16s;
}
.btn.primary{background:var(--accent); color:var(--on-accent); box-shadow:var(--shadow)}
.btn.primary:hover{background:var(--accent-ink)}
.btn.primary:disabled{opacity:.5; cursor:not-allowed}
.btn.sec{background:var(--surface); border-color:var(--line-2); color:var(--ink-2)}
.btn.sec:hover{border-color:var(--accent); color:var(--accent)}
.btn.link{background:transparent; color:var(--muted); padding:11px 6px; font-weight:500}
.btn.link:hover{color:var(--accent)}
.nav-sp{margin-left:auto}
.nav-note{font-size:12.5px; color:var(--muted); font-family:var(--mono)}

/* ---------- préambule ---------- */
.hero{padding:34px 28px 28px; border-bottom:1px solid var(--line)}
@media (max-width:560px){ .hero{padding:24px 17px 22px} }
.hero-eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:600}
.hero h1{font-size:32px; font-weight:700; margin-top:12px; line-height:1.1; max-width:20ch}
@media (max-width:560px){ .hero h1{font-size:25px} }
.hero-lede{margin-top:14px; font-size:15.5px; color:var(--ink-2); max-width:62ch}
.os-row{display:flex; gap:8px; margin-top:18px; flex-wrap:wrap}
.os{border:1px solid var(--line); border-radius:9px; padding:9px 13px; background:var(--surface-2); display:flex; gap:9px; align-items:baseline}
.os b{font-family:var(--mono); font-size:11.5px; color:var(--accent); letter-spacing:.04em}
.os span{font-size:12.5px; color:var(--ink-2)}
.notice{display:flex; gap:12px; padding:14px 16px; border-radius:10px; background:var(--accent-soft); border:1px solid var(--accent-line); margin-top:20px}
.notice.warn{background:var(--warn-soft); border-color:color-mix(in srgb, var(--warn) 35%, transparent)}
.notice-i{flex:none; margin-top:1px}
.notice p{font-size:13.4px; color:var(--ink-2); max-width:62ch}
.notice b{color:var(--ink)}

.field-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-top:16px}
.field label{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
.field input{width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--line-2); background:var(--surface-2); font-size:14.2px}

.idcards{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px}
@media (max-width:620px){ .idcards{grid-template-columns:1fr} }
.idcard{text-align:left; padding:17px; border-radius:11px; border:1.5px solid var(--line); background:var(--surface-2); display:flex; flex-direction:column; gap:7px; transition:all .16s}
.idcard:hover{border-color:var(--line-2)}
.idcard.on{border-color:var(--accent); background:var(--accent-soft)}
.idcard-h{display:flex; align-items:center; gap:9px}
.idcard-h strong{font-family:var(--display); font-size:15px; font-weight:600}
.idcard p{font-size:12.8px; color:var(--ink-2); line-height:1.45}
.dot{width:15px; height:15px; border-radius:50%; border:1.5px solid var(--line-2); flex:none; display:grid; place-items:center}
.idcard.on .dot{border-color:var(--accent); background:var(--accent)}
.idcard.on .dot::after{content:""; width:5px; height:5px; border-radius:50%; background:var(--surface)}

.sec-overview{display:flex; flex-direction:column; gap:1px; margin-top:18px; border:1px solid var(--line); border-radius:10px; overflow:hidden}
.sov{display:flex; gap:12px; align-items:center; padding:11px 14px; background:var(--surface-2); font-size:13.4px}
.sov-k{font-family:var(--mono); font-size:11.5px; font-weight:600; color:var(--accent); width:14px}
.sov-c{color:var(--muted); margin-left:auto; font-family:var(--mono); font-size:11px; white-space:nowrap}

/* ---------- écran de fin ---------- */
.done-wrap{padding:44px 28px; text-align:center}
@media (max-width:560px){ .done-wrap{padding:32px 18px} }
.done-mark{width:58px; height:58px; margin:0 auto 20px; border-radius:50%; background:var(--accent-soft); border:1px solid var(--accent-line); display:grid; place-items:center; color:var(--accent)}
.done-wrap h2{font-size:25px; font-weight:600}
.done-wrap p{margin:12px auto 0; color:var(--ink-2); max-width:52ch; font-size:14.5px}
.receipt{margin:24px auto 0; max-width:420px; border:1px solid var(--line); border-radius:11px; background:var(--surface-2); overflow:hidden; text-align:left}
.rrow{display:flex; gap:12px; padding:11px 15px; border-bottom:1px solid var(--line); font-size:13px}
.rrow:last-child{border-bottom:0}
.rrow span{color:var(--muted); font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase}
.rrow b{margin-left:auto; font-family:var(--mono); font-weight:600; font-size:12.8px; text-align:right}

/* =========================================================================
   TOAST DE REMERCIEMENT
   ========================================================================= */
.toast-host{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  display:flex; justify-content:center;
  padding:0 16px calc(22px + env(safe-area-inset-bottom, 0px));
  pointer-events:none;
}
.toast{
  pointer-events:auto; position:relative; overflow:hidden;
  width:min(460px, 100%); display:flex; gap:15px; align-items:flex-start;
  padding:17px 44px 17px 19px; border-radius:15px;
  background:var(--surface); border:1px solid var(--accent-line);
  box-shadow:var(--shadow-lift);
  transform:translateY(135%) scale(.97); opacity:0;
  animation:toast-in .68s cubic-bezier(.16,1,.3,1) forwards;
}
.toast::before{content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--accent)}
.toast.out{animation:toast-out .38s cubic-bezier(.4,0,1,1) forwards}
@keyframes toast-in{ to{ transform:translateY(0) scale(1); opacity:1 } }
@keyframes toast-out{ to{ transform:translateY(135%) scale(.97); opacity:0 } }

.toast-mark{
  position:relative; width:38px; height:38px; flex:none; border-radius:50%;
  background:var(--accent-soft); display:grid; place-items:center; color:var(--accent);
}
.toast-mark::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--accent); opacity:.55; animation:halo 1.5s .35s ease-out 2;
}
@keyframes halo{ from{ transform:scale(1); opacity:.5 } to{ transform:scale(1.85); opacity:0 } }
.toast-mark svg{width:21px; height:21px; overflow:visible}
.toast-mark .ring{stroke-dasharray:57; stroke-dashoffset:57; animation:draw .62s .1s cubic-bezier(.4,0,.2,1) forwards}
.toast-mark .tick{stroke-dasharray:19; stroke-dashoffset:19; animation:draw .34s .52s cubic-bezier(.4,0,.2,1) forwards}
@keyframes draw{ to{ stroke-dashoffset:0 } }

.toast-b{min-width:0}
.toast-t{font-family:var(--display); font-weight:600; font-size:15.5px; line-height:1.3; opacity:0; animation:rise .5s .2s cubic-bezier(.16,1,.3,1) forwards}
.toast-s{font-size:12.9px; color:var(--ink-2); margin-top:4px; line-height:1.45; opacity:0; animation:rise .5s .32s cubic-bezier(.16,1,.3,1) forwards}
.toast-ref{display:inline-block; margin-top:8px; font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--accent-ink); background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:5px; padding:2px 7px; opacity:0; animation:rise .5s .44s cubic-bezier(.16,1,.3,1) forwards}
@keyframes rise{ from{ opacity:0; transform:translateY(7px) } to{ opacity:1; transform:translateY(0) } }

.toast-x{
  position:absolute; top:11px; right:11px; width:26px; height:26px; border-radius:7px;
  border:0; background:transparent; color:var(--muted); display:grid; place-items:center;
}
.toast-x:hover{background:var(--surface-3); color:var(--ink)}
.toast-bar{position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--accent); opacity:.4; transform-origin:left; animation:toast-bar 7s linear forwards}
@keyframes toast-bar{ to{ transform:scaleX(0) } }

/* =========================================================================
   TABLEAU DE BORD
   ========================================================================= */
.dash-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-top:18px}
.tile{padding:15px 16px; border:1px solid var(--line); border-radius:11px; background:var(--surface-2)}
.tile-l{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.tile-v{font-family:var(--display); font-size:27px; font-weight:700; margin-top:5px; font-variant-numeric:tabular-nums}
.tile-s{font-size:12px; color:var(--muted); margin-top:2px}
.bars{display:flex; flex-direction:column; gap:9px; margin-top:14px}
.bar-row{display:grid; grid-template-columns:minmax(120px, 34%) 1fr auto; gap:12px; align-items:center; font-size:13px}
@media (max-width:560px){ .bar-row{grid-template-columns:1fr; gap:4px} }
.bar-l{color:var(--ink-2); line-height:1.3}
.bar-t{height:9px; background:var(--surface-3); border-radius:99px; overflow:hidden}
.bar-f{height:100%; background:var(--accent); border-radius:0 4px 4px 0; min-width:2px; transition:width .5s}
.bar-v{font-family:var(--mono); font-size:12.5px; font-variant-numeric:tabular-nums; color:var(--ink-2)}
.tbl-wrap{overflow-x:auto; margin-top:16px; border:1px solid var(--line); border-radius:10px}
table{border-collapse:collapse; width:100%; font-size:13px; min-width:560px}
th,td{padding:9px 13px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap}
th{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); background:var(--surface-2)}
tr:last-child td{border-bottom:0}
.block-h{font-family:var(--display); font-size:15.5px; font-weight:600; margin-top:28px; padding-top:20px; border-top:1px solid var(--line)}
.block-s{font-size:12.5px; color:var(--muted); margin-top:3px}

/* ---------- connexion équipe ---------- */
.login{max-width:400px; margin:60px auto}
.login .panel-pad{padding:28px}
.login h1{font-size:21px; font-weight:600}
.login p.sub{font-size:13.4px; color:var(--ink-2); margin-top:8px}
.login .field{margin-top:14px}
.login .btn{width:100%; margin-top:18px}

.spinner{width:15px; height:15px; border:2px solid var(--line-2); border-top-color:var(--accent); border-radius:50%; display:inline-block; animation:spin .7s linear infinite; vertical-align:-2px}
@keyframes spin{ to{ transform:rotate(360deg) } }
.err{color:var(--crit); font-size:13px; margin:0; padding:2px 0 16px}
.foot{max-width:1180px; margin:0 auto; padding:0 20px 40px; color:var(--muted); font-size:12px; text-align:center}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}
  .toast{opacity:1; transform:none}
}