/* NIOXXER — composants partagés des écrans de l'application
   Généré à partir des styles communs des pages. Règle (CLAUDE.md) : aucune
   couleur, police ou rayon en dur dans un écran ; tout vient des jetons. */

.scene{position:fixed;top:0;left:0;right:0;height:54vh;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.72) 34%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.72) 34%,transparent 100%)}
.mass{position:absolute;border-radius:50%;filter:blur(78px);will-change:transform}
.m1{width:74vw;height:74vw;top:-30vw;left:-24vw;background:var(--mass-1);opacity:.26;animation:mm1 22s ease-in-out infinite}
.m2{width:62vw;height:62vw;top:-12vw;right:-26vw;background:var(--mass-2);opacity:.24;animation:mm2 28s ease-in-out infinite}
.m3{width:52vw;height:52vw;top:12vw;left:26vw;background:var(--mass-3);opacity:.16;animation:mm3 34s ease-in-out infinite}
@keyframes mm1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(12vw,6vw) scale(1.12)}}
@keyframes mm3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-8vw,-6vw) scale(1.16)}}
.bit{position:absolute;will-change:transform,opacity}
.bit.lozenge{background:currentColor;transform:rotate(45deg)}
.bit.dot{border-radius:50%;background:currentColor}
.bit.ring{border-radius:50%;border:1px solid currentColor}
@keyframes drift{
  0%{transform:translate3d(0,10vh,0) rotate(0deg);opacity:0}
  14%{opacity:var(--o,.4)} 86%{opacity:var(--o,.4)}
  100%{transform:translate3d(var(--dx,3vw),-64vh,0) rotate(var(--rot,120deg));opacity:0}}
[data-rise]{opacity:0;transform:translateY(12px)}
[hidden]{display:none!important}
.sheet.open{display:flex}
@keyframes up{from{transform:translateY(100%)}to{transform:translateY(0)}}
.opt .rank{font-size:10.5px;color:var(--ink-40);min-width:18px;font-variant-numeric:tabular-nums}
.opt[aria-selected="true"]{border-color:var(--accent);background:rgba(var(--accent-rgb),.12);color:var(--accent);font-weight:700}
.opt .tick{margin-left:auto;opacity:0;font-weight:800}
.opt[aria-selected="true"] .tick{opacity:1}
.seal{width:11px;height:11px;flex:0 0 auto}
.links a:hover{color:var(--accent)}
.slot[aria-current="page"]{color:var(--accent)}
.slot.post{color:var(--accent)}
html.calm [data-rise]{opacity:1;transform:none;transition:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.masthead h1{font-family:var(--font-display);font-size:16px;font-weight:400}
.icon-btn{width:34px;height:34px;border-radius:50%;background:var(--panel);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.icon-btn svg{width:16px;height:16px;fill:var(--ink)}
.stamp.boost{background:rgba(var(--accent-rgb),.2);color:var(--accent-soft);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.45)}
.sheet .lead{font-size:12.5px;color:var(--ink-60);margin:0 4px var(--sp-3);line-height:1.6}
.cancel{width:100%;margin-top:var(--sp-3);color:var(--ink-40);font-size:13px;padding:6px}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--bar-solid);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom)}
html.calm .mass,html.calm .bit,html.calm .spark{animation:none}
.picker-btn .caret{margin-left:auto;color:var(--ink-40)}
.dock .inner{max-width:var(--page-max);margin:0 auto}
.seg button{flex:1;padding:9px 0;border-radius:var(--r-pill);font-size:13px;font-weight:700;color:var(--ink-40)}
.seg button[aria-selected="true"]{background:var(--ink);color:var(--bg)}
.prog{display:flex;gap:6px;padding:var(--sp-4) var(--gutter) 0}
.prog i.on{background:var(--accent)}
.pane.on{display:block}
.err.show{display:block}
.cta:disabled{background:rgba(255,255,255,.07);color:var(--ink-40)}