/* Layout: B2 "Aurore" — single deliberate light look. Phone: stacked view + floating glass tab bar. ≥960px: glass sidebar + wide content grid. */
:root{
  color-scheme:light;
  /* channels: --k = ink tint (lines, wells), --w = glass base, --hl/--hla = inner highlight (white, full alpha in light, faint in dark) */
  --k:14 19 48; --sk:14 19 48; --w:255 255 255; --hl:255 255 255; --hla:1;
  --bg:#ECEFFB; --bg-2:#E4E7F7; --ink:#0E1330; --ink-2:#2A3156; --muted:#5A6386; --faint:#69708F;
  --glass:rgb(var(--w) / .72); --glass-2:rgb(var(--w) / .46); --glass-hi:rgb(var(--w) / .88); --edge:rgb(var(--hl) / calc(.75 * var(--hla))); --line:rgb(var(--k) / .08);
  --solid:#FFFFFF; --raised:#FFFFFF; --pastel:100%; --well:rgb(var(--k) / .05); --ink-bg:#0E1330; --on-ink:#FFFFFF;
  --accent:#4A1FE6; --accent-2:#7A4DFF; --accent-ink:#4A1FE6; --accent-solid:#4A1FE6; --ice:#9ED7FF; --on:#FFFFFF;
  --acc-grad:linear-gradient(140deg,#8B5CFF 0%,#5B2BFF 45%,#4A1FE6 70%,#3B16D9 100%);
  --ok:#078A5E; --warn:#B86C00; --bad:#D42A48; --warn-ink:#7A4A00;
  --tint-ok:rgba(7,138,94,.11); --tint-warn:rgba(184,108,0,.12); --tint-bad:rgba(212,42,72,.1); --tint-acc:rgba(74,31,230,.09);
  --sh:0 1px 0 rgb(var(--hl) / calc(.95 * var(--hla))) inset,0 0 0 .5px rgb(var(--sk) / .04),0 1px 2px rgba(30,24,90,.05),0 10px 26px -14px rgba(40,30,120,.26),0 28px 50px -34px rgba(40,30,120,.3);
  --sh-lg:0 1px 0 rgb(var(--hl) / calc(.95 * var(--hla))) inset,0 2px 6px -2px rgba(30,24,90,.08),0 24px 50px -22px rgba(40,30,120,.42);
  --sh-acc:0 1px 0 rgba(255,255,255,.28) inset,0 -1px 0 rgba(20,0,90,.25) inset,0 10px 24px -10px rgba(74,31,230,.7),0 2px 4px -1px rgba(74,31,230,.3);
  --blur:blur(24px) saturate(1.8);
  --r:24px; --r-sm:14px; --r-md:18px;
  --f:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.22,1,.36,1); --spring:cubic-bezier(.34,1.56,.64,1); --spring-soft:cubic-bezier(.3,1.3,.5,1);
  --sat:env(safe-area-inset-top,0px);
  --duo:.2;
  --aur1:#C8B6FF; --aur2:#B3DEFF; --aur3:#E2D4FF; --aur4:#C5ECFF; --aur-o:.85;
}
/* ── night mode: deep indigo, glass lit from within, softer saturated status colours ── */
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  color-scheme:dark;
  --k:226 229 255; --sk:0 0 0; --w:30 32 64; --hl:255 255 255; --hla:.11;
  --bg:#07081A; --bg-2:#0D0F26; --ink:#EEF0FF; --ink-2:#CDD1EE; --muted:#A2A8CC; --faint:#8C92B8;
  --glass:rgb(28 30 62 / .62); --glass-2:rgb(40 42 80 / .42); --glass-hi:rgb(46 49 92 / .72); --edge:rgb(255 255 255 / .085); --line:rgb(255 255 255 / .08);
  --solid:#171933; --raised:rgb(66 70 124); --pastel:16%; --well:rgb(255 255 255 / .05); --ink-bg:#EEF0FF; --on-ink:#0B0D22;
  --accent:#9D85FF; --accent-2:#B9A6FF; --accent-ink:#B7A4FF; --accent-solid:#6A48F5; --ice:#7CC4FF;
  --ok:#3DDC97; --warn:#FFB547; --bad:#FF6B85; --warn-ink:#FFC870;
  --tint-ok:rgba(61,220,151,.13); --tint-warn:rgba(255,181,71,.13); --tint-bad:rgba(255,107,133,.14); --tint-acc:rgba(157,133,255,.15);
  --sh:0 1px 0 rgb(255 255 255 / .07) inset,0 0 0 .5px rgb(255 255 255 / .03),0 1px 2px rgba(0,0,0,.3),0 14px 34px -16px rgba(0,0,0,.65);
  --sh-lg:0 1px 0 rgb(255 255 255 / .08) inset,0 26px 54px -20px rgba(0,0,0,.8);
  --sh-acc:0 1px 0 rgba(255,255,255,.25) inset,0 -1px 0 rgba(20,0,90,.3) inset,0 12px 30px -10px rgba(110,70,255,.65),0 0 0 .5px rgba(160,130,255,.3);
  --blur:blur(26px) saturate(1.5);
  --duo:.28;
  --aur1:#3A1FB0; --aur2:#0E3F7A; --aur3:#4B1A8F; --aur4:#0B4F6B; --aur-o:.55;
}}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html:root{background:var(--bg)}
html body{background:var(--bg)}
html{height:100%;overflow:hidden;background:var(--bg);overscroll-behavior:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{position:fixed;top:0;left:0;width:100%;height:100%;max-height:100%;margin:0;overflow:hidden;overscroll-behavior:none;background:var(--bg);color:var(--ink);font-family:var(--f);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;font-feature-settings:"tnum","ss01"}
html,body,.view,.sheet,button,[role=button],a,.chip,.tab,.nav{touch-action:manipulation}
.tabbar,.side,.btn,.chip,.tab,.nav,.sheet .grab{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* iOS zooms into fields under 16px: keep them at 16 on touch Safari */
@supports (-webkit-touch-callout:none){input.input,select.input,textarea.input,input,select,textarea{font-size:max(16px,1em)}}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px}
/* keyboard focus is always visible, even on controls an area styled with all:unset (.hm-date, custom rows…); fields keep their own glow */
html body :focus-visible:not(input):not(textarea):not(select):not(.sheet):not(.view){outline:2.5px solid var(--accent);outline-offset:2px}
.sheet:focus,.view:focus{outline:none}
.skip{all:unset;position:absolute;z-index:120;left:12px;top:calc(var(--sat) + 10px);padding:12px 18px;border-radius:14px;background:var(--ink-bg);color:var(--on-ink);font-weight:800;font-size:14px;cursor:pointer;transform:translateY(calc(-100% - 40px));transition:transform .3s var(--ease)}
.skip:focus{transform:translateY(calc(-100% - 40px))}.skip:focus-visible{transform:none}
/* touch screens (iPhone, iPad without keyboard): no skip link at all; it only helps keyboard users */
@media (hover:none),(pointer:coarse){.skip{display:none!important}}
h1,h2,h3{margin:0;text-wrap:balance}
[hidden]{display:none!important}

/* aurora */
.aurora{position:absolute;inset:-25%;z-index:0;pointer-events:none}
.aurora i{position:absolute;border-radius:50%;opacity:var(--aur-o);will-change:transform;background-image:radial-gradient(closest-side,currentColor,transparent)!important;background-color:transparent!important}
.aurora i:nth-child(1){width:46vmax;height:40vmax;left:5%;top:0;color:var(--aur1);animation:drift1 26s ease-in-out infinite alternate}
.aurora i:nth-child(2){width:44vmax;height:38vmax;right:0;top:18%;color:var(--aur2);animation:drift2 30s ease-in-out infinite alternate}
.aurora i:nth-child(3){width:40vmax;height:36vmax;left:20%;bottom:0;color:var(--aur3);animation:drift3 34s ease-in-out infinite alternate}
.aurora i:nth-child(4){width:30vmax;height:28vmax;right:12%;bottom:6%;color:var(--aur4);animation:drift1 38s ease-in-out infinite alternate-reverse}
@keyframes drift1{to{transform:translate(8vmax,6vmax) scale(1.12)}}
@keyframes drift2{to{transform:translate(-10vmax,8vmax) scale(.92)}}
@keyframes drift3{to{transform:translate(6vmax,-8vmax) scale(1.08)}}
.grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* standalone (iOS home screen): body = the true screen (--appH, set by core.js appHeight) and, through the transform, the containing block
   of every position:fixed layer (tab bar, sheet, scrim, toast, boot, veil, aurora), so nothing is laid out against WebKit's short viewport */
html.standalone{height:var(--appH,100%)}
html.standalone body{height:var(--appH,100%)}
html.tabs,html{margin:0!important;padding:0!important} /* html carries the "tabs" class: never let a .tabs component style reach it */
/* The screen is ONE box: body, position:fixed, 100% of the initial viewport (never dvh, which changes on every frame while Safari's
   toolbar animates) and without any transform. Every layer (tab bar, sheet, scrim, toast, boot, veil, aurora, overlays) is
   position:absolute inside it, so nothing is "viewport-fixed": iOS 26 Safari moves viewport-fixed layers on its own during a scroll
   (WebKit 297779 / 312149) and that is what made the tab bar jump to the top of the screen. In the home-screen app, --appH sizes body. */
html.standalone .sheet{max-height:calc(var(--appH,100dvh) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 40px)}
html.standalone .toast{top:calc(max(env(safe-area-inset-top,0px),20px) + 10px)}
@media (min-width:960px){html.standalone .side{height:calc(var(--appH,100dvh) - 24px)}}

/* shell */
#app{position:absolute;inset:0;z-index:2;display:flex}
/* installed app (iOS black-translucent status bar): a soft veil under the clock keeps white status text legible over the light aurora */
.statusveil{display:none}
html.standalone .statusveil{display:block;position:absolute;z-index:40;left:0;right:0;top:0;height:calc(env(safe-area-inset-top,0px) + 10px);pointer-events:none;background:linear-gradient(180deg,rgba(46,24,150,.55),rgba(74,31,230,.18) 70%,rgba(74,31,230,0));-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4);-webkit-mask:linear-gradient(#000 70%,transparent);mask:linear-gradient(#000 70%,transparent)}
.side{display:none}
.main{flex:1;min-width:0;position:relative;height:100%}
.viewport{position:absolute;inset:0;overflow:hidden}
.view{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:calc(env(safe-area-inset-top,0px) + 18px) max(16px,env(safe-area-inset-right,0px)) calc(max(12px,calc(env(safe-area-inset-bottom,0px) - 8px)) + 116px) max(16px,env(safe-area-inset-left,0px));transition:opacity .42s var(--ease),transform .52s var(--ease)}
.view::-webkit-scrollbar{display:none}
.view.enter{opacity:0;transform:translateX(26px) scale(.985)}
.view.enter.back{transform:translateX(-26px) scale(.985)}
.view.leave{opacity:0;transform:translateX(-20px) scale(.985);pointer-events:none}
.view.leave.back{transform:translateX(20px) scale(.985)}
.view{z-index:1}.view.leave{z-index:0}
/* tab switches: a quick crossfade (native tab bars never slide whole screens) */
.view.fade{transition:opacity .24s var(--ease),transform .34s var(--ease)}
.view.enter.fade{opacity:0;transform:translateY(6px)}
.view.leave.fade{opacity:0;transform:none}
.inner{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.nost .st{animation:none!important}
.st{animation:rise .6s var(--ease) both;animation-delay:calc(var(--i,0) * 45ms + 60ms)}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}

.cols{display:flex;flex-direction:column;gap:14px}
.cols>div{display:flex;flex-direction:column;gap:14px;min-width:0}
/* tablet portrait (iPad, 700–959px): still the tab bar, but the screen is used: wider column, two-column grids */
@media (min-width:700px) and (max-width:959px){
  .view{padding-left:max(28px,env(safe-area-inset-left,0px));padding-right:max(28px,env(safe-area-inset-right,0px));padding-top:calc(env(safe-area-inset-top,0px) + 24px)}
  .inner,.inner.wide{max-width:820px}
  .inner.narrow{max-width:680px}
  .inner.wide .fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
  .cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
}
@media (min-width:960px){
  .side{display:flex;flex-direction:column;gap:2px;width:264px;flex:none;padding:22px 14px 14px;margin:12px 0 12px 12px;height:calc(100vh - 24px);height:calc(100dvh - 24px);border-radius:28px;background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--sh);border:1px solid var(--edge);overflow:hidden}
  .side.off{display:none}
  .tabbar{display:none!important}
  .view{padding:28px 32px 48px}
  .inner{max-width:1080px}
  .inner.narrow{max-width:680px}
  .inner.wide{max-width:1080px}
  .inner.wide .fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
  .qa.hide-d{display:none}
  .cols{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:14px;align-items:start}
  .cols > div{display:flex;flex-direction:column;gap:14px;min-width:0}
}
.side .brand{display:flex;align-items:center;gap:10px;padding:2px 8px 18px;font-weight:800;font-size:17px;letter-spacing:-.03em}
.side .brand .mk{width:30px;height:30px}
.side .sep{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);padding:14px 10px 6px}
.nav{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:13px;color:var(--muted);font-weight:650;font-size:14px;transition:background .25s var(--ease),color .25s}
.nav:hover{background:var(--glass-2);color:var(--ink)}
.nav.on{background:var(--glass-hi);color:var(--ink);box-shadow:0 6px 16px -10px rgba(40,30,120,.35)}
.nav.on .ico{color:var(--accent)}
.nav .count{margin-left:auto;font-size:11px;font-weight:800;padding:2px 7px;border-radius:999px;background:var(--bad);color:#fff}
.nav:focus-visible{outline:2.5px solid var(--accent)}
.side .brand,.side>.nav{flex:none}
.side .navs{flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:2px;margin:0 -6px;padding:2px 6px 4px;--ft:0px;--fb:0px;-webkit-mask:linear-gradient(transparent,#000 var(--ft),#000 calc(100% - var(--fb)),transparent);mask:linear-gradient(transparent,#000 var(--ft),#000 calc(100% - var(--fb)),transparent)}
.side .navs.ft{--ft:18px}.side .navs.fb{--fb:26px}
/* short screens (1366×768/860 laptops, iPad landscape): tighter rows so every entry, Réglages included, fits without scrolling */
@media (min-width:960px) and (max-height:900px){
  .side{padding-top:16px}
  .side .brand{padding-bottom:12px}
  .side>.nav{margin-bottom:6px!important;padding-block:7px}
  .side .navs .nav{padding-block:7px}
  .side .sep{padding:9px 10px 4px}
  .side .me{padding-block:8px}
}
@media (min-width:960px) and (max-height:760px){.side .navs .nav{padding-block:6px}.side .sep{padding:7px 10px 3px}}
.side .navs::-webkit-scrollbar{display:none}
.side .navs .nav{flex:none}
.nav .nt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side .me{flex:none;margin-top:6px;display:flex;align-items:center;gap:10px;padding:10px 12px 10px 10px;border-radius:16px;background:var(--glass-2);border:1px solid var(--edge);cursor:pointer;transition:background .25s var(--ease)}
.side .me:hover{background:var(--glass-hi)}
.side .me>.ico{width:17px;height:17px;color:var(--faint)}
.side .me b{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.side .me em{font-style:normal;font-size:11.5px;color:var(--muted)}

/* tab bar */
.tabbar{position:absolute;z-index:30;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:max(12px,calc(env(safe-area-inset-bottom,0px) - 8px));height:70px;border-radius:28px;background:rgb(var(--w) / .76);-webkit-backdrop-filter:blur(30px) saturate(2);backdrop-filter:blur(30px) saturate(2);border:1px solid var(--edge);box-shadow:0 18px 40px -16px rgba(40,30,120,.4);display:grid;grid-template-columns:repeat(5,1fr);align-items:center;max-width:520px;margin:0 auto;transition:transform .5s var(--spring)}
.tabbar.hide{transform:translateY(calc(140% + env(safe-area-inset-bottom,0px)))}
.tab{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:750;color:var(--faint);position:relative;z-index:1;height:100%;justify-content:center;transition:color .3s}
.tab.on{color:var(--accent)}
.tab .ico{width:23px;height:23px;transition:transform .4s var(--spring)}
.tab.on .ico{transform:translateY(-1px) scale(1.06)}
.tab:active:not(:has(.fab)) .ico{transform:scale(.86);transition-duration:.12s}
.tab.pop:not(:has(.fab)) .ico{animation:tabpop .6s var(--spring)}
@keyframes tabpop{0%{transform:scale(.8)}45%{transform:translateY(-3px) scale(1.18)}100%{transform:translateY(-1px) scale(1.06)}}
.tab.pop .fab{animation:fabpop .55s var(--spring)}
@keyframes fabpop{0%{transform:scale(.88)}50%{transform:scale(1.07)}100%{transform:none}}
.tabbar .ind{position:absolute;top:8px;bottom:8px;left:6px;width:calc(20% - 12px);border-radius:20px;background:linear-gradient(180deg,rgba(122,77,255,.13),rgba(74,31,230,.08));box-shadow:0 0 0 1px rgba(74,31,230,.06) inset;transition:transform .6s cubic-bezier(.3,1.45,.55,1),opacity .25s}
.fab{width:56px;height:56px;border-radius:20px;display:grid;place-items:center;color:#fff;background:linear-gradient(140deg,#7A4DFF,#4A1FE6 55%,#3B2BD9);box-shadow:0 12px 24px -8px rgba(74,31,230,.7),0 0 0 1px rgb(var(--hl) / calc(.25 * var(--hla))) inset;transition:transform .2s var(--ease)}
.fab .ico{width:26px;height:26px}
.tab:active .fab{transform:scale(.9)}

/* primitives */
.ico{width:20px;height:20px;display:inline-block;flex:none;vertical-align:middle}
.glass{background:var(--glass);border:1px solid var(--edge);border-radius:var(--r);box-shadow:var(--sh)}
.pad{padding:16px 18px}
.lbl{font-size:11px;font-weight:800;letter-spacing:.075em;text-transform:uppercase;color:var(--faint)}
.mut{color:var(--muted)}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hstack{display:flex;align-items:center;gap:10px}
.mono{font-family:var(--mono);letter-spacing:-.02em}
.title{font-size:30px;font-weight:800;letter-spacing:-.045em;line-height:1.04}
.h2{font-size:22px;font-weight:800;letter-spacing:-.035em;line-height:1.1}
.h3{font-size:16px;font-weight:800;letter-spacing:-.02em}
.sub{font-size:13px;color:var(--muted);font-weight:600}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;padding:4px 10px;border-radius:999px;white-space:nowrap;letter-spacing:-.005em}
.pill.ok{color:var(--ok);background:rgba(7,138,94,.11)}
.pill.warn{color:var(--warn);background:rgba(184,108,0,.12)}
.pill.bad{color:var(--bad);background:rgba(212,42,72,.11)}
.pill.acc{color:var(--accent);background:rgba(74,31,230,.1)}
.pill.neu{color:var(--muted);background:rgb(var(--k) / .06)}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.bad .dot{animation:beat 1.6s ease-in-out infinite}
@keyframes beat{0%,100%{box-shadow:0 0 0 0 rgba(212,42,72,.5)}50%{box-shadow:0 0 0 5px rgba(212,42,72,0)}}
.btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px;height:54px;padding:0 22px;border-radius:18px;font-weight:800;font-size:15px;letter-spacing:-.015em;background:var(--ink-bg);color:var(--on-ink);transition:transform .18s var(--ease),box-shadow .3s,opacity .3s;user-select:none}
.btn.block{display:flex;width:100%}
.btn.acc{background:linear-gradient(140deg,#7A4DFF,#4A1FE6 60%);box-shadow:0 14px 26px -12px rgba(74,31,230,.75),0 0 0 1px rgb(var(--hl) / calc(.2 * var(--hla))) inset}
.btn.soft{background:var(--glass-hi);color:var(--ink);box-shadow:0 0 0 1px var(--line) inset}
.btn.ghost{background:transparent;color:var(--accent);height:40px;padding:0 12px}
.btn.danger{background:rgba(212,42,72,.1);color:var(--bad)}
.btn.sm{height:auto;min-height:44px;padding:0 14px;border-radius:13px;font-size:13.5px}
.btn:active{transform:scale(.965)}
@media (hover:hover) and (pointer:fine){
  .btn{transition:transform .18s var(--ease),box-shadow .3s,opacity .3s,background-color .2s,filter .2s}
  .btn:hover{filter:brightness(1.12)}
  .btn.acc:hover{filter:brightness(1.08) saturate(1.08);box-shadow:0 18px 30px -12px rgba(74,31,230,.85),0 0 0 1px rgb(var(--hl) / calc(.25 * var(--hla))) inset}
  .btn.soft:hover{filter:none;background:var(--solid);box-shadow:0 0 0 1px rgba(74,31,230,.18) inset,0 8px 18px -12px rgba(40,30,120,.4)}
  .btn.ghost:hover{filter:none;background:rgba(74,31,230,.08)}
  .btn.danger:hover{filter:none;background:rgba(212,42,72,.16)}
  .iconbtn:hover{background:var(--solid);box-shadow:0 0 0 1px rgba(74,31,230,.2) inset,0 8px 18px -8px rgba(40,30,120,.4);color:var(--accent)}
  .chip:not(.on):hover{color:var(--ink);background:var(--glass-hi);border-color:rgba(74,31,230,.18)}
  .chip.on:hover{background:#1c2250}
  .seg button:not(.on):hover{color:var(--ink);background:rgb(var(--w) / .45)}
  .qa button:hover{background:var(--glass-hi)}
  .tab:hover{color:var(--ink)}.tab.on:hover{color:var(--accent)}
  .inst-x:hover{background:rgb(var(--k) / .1);color:var(--ink)}
  #toastTx>button:hover{color:#fff}
}
.btn[disabled]{opacity:.4;pointer-events:none}
.btn[data-off]{opacity:.5;pointer-events:none}
.btn:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px}
.iconbtn{all:unset;cursor:pointer;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--glass-hi);box-shadow:0 0 0 1px var(--line) inset,0 6px 14px -8px rgba(40,30,120,.35);flex:none;transition:transform .18s var(--ease),background .2s,box-shadow .25s,color .2s}
.iconbtn:active{transform:scale(.9)}
.iconbtn:focus-visible{outline:2.5px solid var(--accent)}
.top{display:flex;align-items:center;gap:12px;min-height:44px}
.top .h2{flex:1;min-width:0}
.ic{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;flex:none;background:rgba(74,31,230,.09);color:var(--accent)}
.ic.ok{background:rgba(7,138,94,.1);color:var(--ok)}.ic.bad{background:rgba(212,42,72,.1);color:var(--bad)}.ic.warn{background:rgba(184,108,0,.1);color:var(--warn)}
.li{display:flex;align-items:center;gap:12px;padding:12px 0;min-width:0}
.li+.li{border-top:1px solid var(--line)}
.li .tx{flex:1;min-width:0}
.li .tx b{display:block;font-weight:750;font-size:14.5px;letter-spacing:-.015em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li .tx em{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li.tap{cursor:pointer;margin:0 -10px;padding-left:10px;padding-right:10px;border-radius:14px;transition:background .2s}
.li.tap:hover{background:rgb(var(--w) / .5)}
.li.tap+.li.tap{border-top-color:transparent;box-shadow:0 -1px 0 var(--line)}
.ava{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;color:#fff;flex:none;background:var(--accent-solid);border:2px solid rgb(var(--hl) / calc(.9 * var(--hla)));overflow:hidden}
.ava img{width:100%;height:100%;object-fit:cover}
.ava.sm{width:20px;height:20px;font-size:8px;border-width:1.5px}
.avs{display:flex}.avs .ava+.ava{margin-left:-9px}
.empty{text-align:center;padding:28px 16px;color:var(--muted);font-size:14px}
.empty .ic{margin:0 auto 10px;width:52px;height:52px;border-radius:18px}
.empty b{display:block;color:var(--ink);font-size:16px;margin-bottom:4px;letter-spacing:-.02em}

/* inputs */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field > span{font-size:12px;font-weight:800;color:var(--muted);letter-spacing:.01em}
.input{width:100%;height:50px;border-radius:15px;border:1px solid var(--line);background:var(--glass-hi);padding:0 14px;font-size:15.5px;font-weight:600;outline:none;transition:border-color .2s,box-shadow .2s;min-width:0}
textarea.input{height:auto;min-height:180px;padding:14px;line-height:1.55;resize:vertical;font-weight:500}
.input:focus{border-color:rgba(74,31,230,.45);box-shadow:0 0 0 4px rgba(74,31,230,.12)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.chips{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding:2px}
.chips::-webkit-scrollbar{display:none}
.chip{all:unset;cursor:pointer;flex:none;min-height:44px;box-sizing:border-box;display:inline-flex;align-items:center;padding:9px 15px;border-radius:999px;font-size:13px;font-weight:750;background:var(--glass);border:1px solid var(--edge);color:var(--muted);transition:all .25s var(--ease);white-space:nowrap}
.chip.on{background:var(--ink-bg);color:var(--on-ink);border-color:var(--ink-bg)}
.chip:focus-visible{outline:2.5px solid var(--accent)}
.seg{display:flex;padding:4px;border-radius:17px;background:rgb(var(--w) / .4);border:1px solid var(--edge);position:relative}
.seg button{all:unset;cursor:pointer;flex:1;text-align:center;padding:10px 6px;font-weight:800;font-size:13.5px;color:var(--muted);border-radius:13px;position:relative;z-index:1;transition:color .3s,background .2s}
.seg button.on{color:var(--ink)}
.seg .knob{position:absolute;top:4px;bottom:4px;left:4px;border-radius:13px;background:var(--solid);box-shadow:0 6px 16px -8px rgba(40,30,120,.4);transition:transform .5s var(--spring),width .3s}

/* home hero */
.hero{border-radius:30px;padding:20px;position:relative;overflow:hidden;color:#fff;background:linear-gradient(115deg,#5B2BFF,#3C3CF0 35%,#7A4DFF 65%,#4E2BF2);background-size:280% 280%;animation:mesh 14s ease-in-out infinite;box-shadow:0 26px 50px -24px rgba(74,31,230,.7)}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(55% 70% at 88% -10%,rgba(158,215,255,.75),transparent 70%),radial-gradient(45% 60% at -5% 110%,rgba(255,182,240,.4),transparent 70%);pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.22) 50%,transparent 60%);transform:translateX(-100%);animation:sheen 2.4s .9s var(--ease) 1 both}
@keyframes mesh{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes sheen{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.hero .in{position:relative;z-index:1;display:flex;align-items:center;gap:18px}
.ring{width:108px;height:108px;flex:none;position:relative}
.ring svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.ring .tr{stroke:rgba(255,255,255,.2)}
.ring .br{stroke:#fff;transition:stroke-dashoffset 1.3s var(--ease);filter:drop-shadow(0 0 6px rgba(255,255,255,.6))}
.ring .num{position:absolute;inset:0;display:grid;place-items:center;text-align:center;line-height:1}
.ring .num b{font-size:30px;font-weight:800;letter-spacing:-.05em}
.ring .num small{display:block;font-size:11px;font-weight:700;opacity:.7;margin-top:3px}
.hero .meta b{display:block;font-size:19px;font-weight:800;letter-spacing:-.03em}
.hero .meta span{display:block;font-size:13px;opacity:.78;font-weight:600}
.hero .nx{margin-top:16px;display:flex;width:fit-content;align-items:center;gap:7px;font-size:12px;font-weight:800;padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgb(var(--hl) / calc(.22 * var(--hla)))}
.hero .nx .ico{width:14px;height:14px}
.qa{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.qa button{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 2px 12px;border-radius:22px;background:var(--glass);border:1px solid var(--edge);box-shadow:var(--sh);font-size:12px;font-weight:800;letter-spacing:-.01em;transition:transform .2s var(--ease)}
.qa button:active{transform:scale(.93)}
.qa button:focus-visible{outline:2.5px solid var(--accent)}
.qa .ic{width:44px;height:44px;border-radius:15px;background:linear-gradient(150deg,rgba(122,77,255,.16),rgba(74,31,230,.07))}

/* readings */
.fr{padding:14px 16px;transition:box-shadow .3s}
.fr .head{display:flex;align-items:center;gap:12px;cursor:pointer}
.fr .t{font-family:var(--mono);font-weight:700;font-size:20px;letter-spacing:-.04em}
.who{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);font-weight:600;margin-top:2px}
.check{width:28px;height:28px;border-radius:50%;background:var(--ok);display:grid;place-items:center;flex:none;box-shadow:0 6px 14px -6px rgba(7,138,94,.6)}
.check svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:0}
.check.draw{animation:pop .55s var(--spring)}
.check.draw svg{animation:drawc .5s .12s var(--ease) both}
@keyframes pop{from{transform:scale(0) rotate(-30deg)}to{transform:none}}
@keyframes drawc{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
.pend{width:28px;height:28px;border-radius:50%;border:2px dashed rgba(184,108,0,.55);flex:none}
.dial{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.fr.open .dial{grid-template-rows:1fr}
.dial > div{overflow:hidden}
.dial .dz{padding-top:16px;display:flex;flex-direction:column;gap:16px}
.big{display:flex;align-items:center;justify-content:space-between;gap:10px}
.big .v{font-family:var(--mono);font-size:64px;font-weight:700;letter-spacing:-.07em;line-height:1;transition:color .3s;user-select:none}
.big .v small{font-size:24px;letter-spacing:0;color:var(--faint)}
.step{all:unset;cursor:pointer;width:58px;height:58px;border-radius:20px;background:var(--glass-hi);box-shadow:0 0 0 1px var(--line) inset;display:grid;place-items:center;transition:transform .14s var(--ease);touch-action:manipulation}
.step:active{transform:scale(.88)}
.step .ico{width:24px;height:24px}
.scale{position:relative;height:10px;border-radius:10px;background:linear-gradient(90deg,#7DB9FF,#2FB985 22%,#2FB985 52%,#F0A43A 68%,#E14560 100%)}
.scale .safe{position:absolute;top:-4px;bottom:-4px;border:1.5px dashed rgba(7,138,94,.55);border-radius:8px}
.scale{cursor:pointer;touch-action:pan-y}
.scale::before{content:"";position:absolute;inset:-17px 0}
.scale i{position:absolute;top:50%;width:32px;height:32px;border-radius:50%;background:var(--solid);box-shadow:0 3px 10px rgb(var(--sk) / .3),0 0 0 3px var(--ink);transform:translate(-50%,-50%);transition:left .45s var(--spring)}
.scale-l{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--faint);margin-top:8px}
.bump{animation:bump .32s var(--spring)}
@keyframes bump{40%{transform:scale(1.12)}}
.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* spark */
.spark{width:100%;height:110px;display:block;overflow:visible}
.spark .ln{stroke-dasharray:1200;stroke-dashoffset:1200;animation:ln 1.5s .2s var(--ease) forwards}
@keyframes ln{to{stroke-dashoffset:0}}
.spark .ar,.spark .pt{opacity:0;animation:fade .8s 1s var(--ease) forwards}
@keyframes fade{to{opacity:1}}

/* lots */
.rank{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;font-size:12px;font-weight:800;background:rgb(var(--k) / .06);color:var(--muted);flex:none}
.rank.hot{background:var(--bad);color:#fff}

/* sheets / modal */
.scrim{position:absolute;inset:0;z-index:50;background:rgb(var(--k) / .28);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s var(--ease),visibility 0s .4s}
.scrim.on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .4s var(--ease),visibility 0s}
.sheet{position:absolute;z-index:51;left:max(8px,env(safe-area-inset-left,0px));right:max(8px,env(safe-area-inset-right,0px));bottom:calc(max(env(safe-area-inset-bottom,0px),var(--kb,0px)) + 8px);max-width:560px;margin:0 auto;max-height:calc(100% - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 40px);display:flex;flex-direction:column;overflow:hidden;border-radius:34px;background:rgb(var(--w) / .92);-webkit-backdrop-filter:blur(30px) saturate(1.8);backdrop-filter:blur(30px) saturate(1.8);box-shadow:0 -20px 60px -20px rgb(var(--sk) / .45),0 0 0 1px rgb(var(--hl) / calc(.8 * var(--hla))) inset;transform:translateY(calc(100% + 40px));visibility:hidden;transition:transform .36s cubic-bezier(.4,0,.8,.4),visibility 0s .36s;will-change:transform}
.sheet.open{transform:none;visibility:visible;transition:transform .6s cubic-bezier(.22,1.18,.36,1),visibility 0s}
.sheet.drag{transition:none!important}
/* keyboard up: the sheet sits on the keyboard and fits inside what is still visible */
html.kb .sheet{max-height:calc(var(--vvh,100dvh) - env(safe-area-inset-top,0px) - 16px)}
html.kb .tabbar{opacity:0;pointer-events:none}
.sheet .grab{flex:none;height:28px;display:grid;place-items:center;cursor:grab;touch-action:none}
.sheet .grab i{display:block;width:40px;height:5px;border-radius:5px;background:rgb(var(--k) / .2);transition:width .25s var(--ease),background .25s}
.sheet.drag .grab i{width:52px;background:rgba(74,31,230,.45)}
.sheet-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;display:flex;flex-direction:column;gap:14px;padding:4px 20px 20px}
.sheet-body::-webkit-scrollbar{display:none}
.sheet-body>*{flex-shrink:0}
@media (min-width:960px){
  .sheet{bottom:50%;max-height:min(84vh,820px);transform:translateY(58%) scale(.96);opacity:0;visibility:hidden;pointer-events:none;transition:transform .28s var(--ease),opacity .2s,visibility 0s .28s}
  .sheet.open{transform:translateY(50%);opacity:1;visibility:visible;pointer-events:auto;transition:transform .5s var(--spring),opacity .25s,visibility 0s}
  .sheet .grab{height:16px}.sheet .grab i{opacity:0}
  .sheet-body{padding:6px 24px 24px}
}

/* toast */
.toast{position:absolute;z-index:80;left:50%;top:calc(env(safe-area-inset-top,0px) + 14px);transform:translate(-50%,calc(-100% - env(safe-area-inset-top,0px) - 24px));opacity:0;visibility:hidden;display:flex;align-items:center;gap:10px;padding:9px 18px 9px 9px;border-radius:999px;background:var(--toast-bg,rgba(14,19,48,.96));-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);color:#fff;font-weight:750;font-size:13.5px;box-shadow:0 18px 40px -14px rgb(var(--sk) / .6);transition:transform .6s var(--spring),opacity .3s,visibility 0s .6s;width:max-content;max-width:min(calc(100vw - 32px),520px)}
.toast.on{transform:translate(-50%,0);opacity:1;visibility:visible;transition:transform .6s var(--spring),opacity .2s,visibility 0s}
.toast.err .check{background:var(--bad)}
.toast.err .check svg{stroke-width:3.2;stroke-dasharray:none}
@media (max-width:959px){
  .toast,html.standalone .toast{top:auto;bottom:var(--toastB,calc(env(safe-area-inset-bottom,0px) + 16px));transform:translate(-50%,calc(100% + var(--toastB,40px) + 24px))}
  .toast.on,html.standalone .toast.on{transform:translate(-50%,0)}
  .toast.top,html.standalone .toast.top{top:calc(var(--sat) + 10px);bottom:auto;transform:translate(-50%,calc(-100% - var(--sat) - 24px))}
  .toast.top.on,html.standalone .toast.top.on{transform:translate(-50%,0)}
}
.toast.info .check{background:linear-gradient(140deg,#7A4DFF,#4A1FE6);box-shadow:0 6px 14px -6px rgba(122,77,255,.7)}
.toast.info .check svg{stroke-width:2.4;stroke-dasharray:none}
.toast span{flex:1;min-width:0;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.toast .check{flex:none}
/* toast with an action (toastUndo, or any area that puts a <button> in #toastTx): text clamps, the button never wraps */
#toastTx:has(>button){display:flex;align-items:center;gap:4px;-webkit-line-clamp:unset;overflow:visible}
.toast:has(#toastTx>button){padding-right:6px}
#toastTx>.tx{flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#toastTx>button{all:unset;flex:none;white-space:nowrap;cursor:pointer;margin:-9px 0 -9px 6px!important;border-radius:0 999px 999px 0;padding:0 14px;min-height:44px;display:inline-flex;align-items:center;border-left:1px solid rgb(var(--hl) / calc(.14 * var(--hla)));font-weight:800;color:#B9A6FF}

/* frost burst */
.burst{position:absolute;inset:0;pointer-events:none;z-index:90}
.burst i{position:absolute;width:8px;height:8px;border-radius:2px;opacity:0;animation:fly 1.2s var(--ease) forwards}
@keyframes fly{0%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(.4)}}

/* label preview */
.label{background:#fff;border-radius:14px;padding:14px;display:flex;gap:14px;align-items:center;box-shadow:0 12px 30px -16px rgb(var(--sk) / .4);font-family:var(--mono);font-size:12px;line-height:1.45;color:#000}
.label .q{width:96px;height:96px;flex:none}
.label b{font-family:var(--f);font-size:15px;font-weight:800;letter-spacing:-.02em;display:block;margin-bottom:3px}
.printer{position:relative;height:170px;padding-top:10px}
.printer .body{width:190px;height:66px;margin:0 auto;border-radius:20px;background:linear-gradient(180deg,#2B3050,#141831);position:relative;z-index:2;box-shadow:0 18px 30px -14px rgba(0,0,0,.55)}
.printer .body::before{content:"";position:absolute;left:30px;right:30px;top:13px;height:6px;border-radius:6px;background:#05060b}
.printer .body::after{content:"";position:absolute;right:20px;bottom:18px;width:8px;height:8px;border-radius:50%;background:#6CF0B8;box-shadow:0 0 10px #6CF0B8;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.3}}
.printer .paper{position:absolute;left:50%;top:16px;width:150px;height:90px;margin-left:-75px;background:#fff;border-radius:6px;z-index:1;box-shadow:0 8px 16px -8px rgba(0,0,0,.4);padding:8px;display:flex;gap:7px;font:600 7.5px/1.4 var(--mono);color:#111}
.printer .paper .q{width:44px;height:44px;flex:none}
.printer.go .paper{animation:feed 1.8s var(--ease) forwards}
@keyframes feed{to{transform:translateY(80px)}}

/* scan */
.cam{border-radius:28px;overflow:hidden;position:relative;height:min(46vh,340px);background:radial-gradient(80% 70% at 50% 40%,#2c2a3b,#08070d);display:grid;place-items:center;color:#fff;cursor:pointer}
.cam .ret{position:absolute;width:190px;height:190px;left:50%;top:50%;margin:-95px 0 0 -95px}
.cam .ret span{position:absolute;width:36px;height:36px;border:4px solid var(--solid);opacity:.95}
.cam .ret span:nth-child(1){top:0;left:0;border-right:0;border-bottom:0;border-radius:18px 0 0 0}
.cam .ret span:nth-child(2){top:0;right:0;border-left:0;border-bottom:0;border-radius:0 18px 0 0}
.cam .ret span:nth-child(3){bottom:0;left:0;border-right:0;border-top:0;border-radius:0 0 0 18px}
.cam .ret span:nth-child(4){bottom:0;right:0;border-left:0;border-top:0;border-radius:0 0 18px 0}
.cam .las{position:absolute;left:14px;right:14px;height:2px;background:var(--solid);box-shadow:0 0 18px 3px rgba(150,120,255,.95);animation:las 1.9s ease-in-out infinite alternate}
@keyframes las{from{top:14%}to{top:86%}}
.cam .cta{position:absolute;bottom:18px;left:0;right:0;text-align:center;font-weight:800;font-size:14px}
.cam .cta small{display:block;font-weight:600;opacity:.65;font-size:12px;margin-top:2px}
.cam.busy .las{animation-duration:.6s}

/* photo */
.thumbs{display:flex;gap:8px;flex-wrap:wrap}
.thumb{width:74px;height:74px;border-radius:14px;overflow:hidden;background:rgb(var(--k) / .06);position:relative;flex:none}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb.scan::after{content:"";position:absolute;left:0;right:0;height:40%;top:-40%;background:linear-gradient(180deg,transparent,rgba(122,77,255,.55));animation:sweep 1.1s var(--ease) infinite}
@keyframes sweep{to{top:100%}}
.ocr{display:flex;flex-wrap:wrap;gap:6px}
.ocr span{font-size:12px;font-weight:700;padding:5px 9px;border-radius:9px;background:rgba(74,31,230,.08);color:var(--accent);animation:popin .45s var(--spring) both;animation-delay:calc(var(--i,0) * 90ms)}
@keyframes popin{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}

/* inventory */
.cnt{display:flex;align-items:center;gap:6px;flex:none}
.cnt button{all:unset;cursor:pointer;width:44px;height:44px;border-radius:12px;background:var(--glass-hi);box-shadow:0 0 0 1px var(--line) inset;display:grid;place-items:center;transition:transform .14s}
.cnt button:active{transform:scale(.86)}
.cnt input{width:76px;height:44px;border:0;border-radius:11px;background:rgba(74,31,230,.07);text-align:center;font-family:var(--mono);font-weight:700;font-size:14px;outline:none}
.cnt input:focus{box-shadow:0 0 0 2px rgba(74,31,230,.4)}
.prog{height:8px;border-radius:8px;background:rgb(var(--k) / .07);overflow:hidden}
.prog i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,#7A4DFF,#4A1FE6);transition:width .7s var(--ease)}

/* table */
.tbl-wrap{overflow-x:auto;margin:0 -4px}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px}
.tbl th{text-align:left;font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);padding:8px;border-bottom:1px solid var(--line)}
.tbl td{padding:10px 8px;border-bottom:1px solid var(--line)}
.tbl .n{text-align:right;font-family:var(--mono)}
.heat{display:grid;grid-template-columns:repeat(30,1fr);gap:4px}
.heat i{aspect-ratio:1;border-radius:5px;background:rgb(var(--k) / .06)}
.heat i.g{background:#2FB985}.heat i.y{background:#F0A43A}.heat i.r{background:#E14560}.heat i.p{background:rgba(47,185,133,.4)}

.fgrid{display:flex;flex-direction:column;gap:14px}
.ctabar{position:sticky;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);z-index:5;margin-top:4px;filter:drop-shadow(0 10px 20px rgba(40,30,120,.18))}
/* phone: a sticky bottom is measured from the view's padding edge, and that padding already clears the tab bar (116px) or, without
   tab bar, the home indicator: the CTA then rests 16px above the tab bar / 14px above the screen edge, never mid-screen */
@media (max-width:959px){
  html:not(.tabs) .view{padding-bottom:calc(max(env(safe-area-inset-bottom,0px),8px) + 14px)}
  html.tabs .view .ctabar{bottom:-30px}
  html.tabs .view .ctabar:last-child{margin-bottom:-30px}
  html:not(.tabs) .view .ctabar{bottom:0}
}
.ctabar.grid2{display:grid}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.keypad button{all:unset;cursor:pointer;height:60px;border-radius:18px;background:rgb(var(--k) / .05);display:grid;place-items:center;font-family:var(--mono);font-size:24px;font-weight:600;transition:transform .12s var(--ease),background .2s;touch-action:manipulation}
.keypad button:active{transform:scale(.92);background:rgba(74,31,230,.12)}
.keypad button .ico{width:24px;height:24px}
.cam .camico{width:64px;height:64px;border-radius:22px;background:rgba(255,255,255,.12);display:grid;place-items:center;border:1px solid rgb(var(--hl) / calc(.2 * var(--hla)));transition:transform .3s var(--spring)}
.cam .camico .ico{width:30px;height:30px}
.cam:active .camico{transform:scale(.9)}
.cam.busy .ret span{border-color:#B9A6FF;animation:breathe .8s ease-in-out infinite}
/* boot: pixel-identical to the iOS launch images (icons/splash-*.jpg are rendered from this very screen), then the tile lifts away */
.boot{position:absolute;inset:0;z-index:100;display:grid;place-items:center;background:radial-gradient(52vmax 44vmax at 4% 10%,rgba(200,182,255,.95),rgba(200,182,255,0) 70%),radial-gradient(46vmax 40vmax at 104% 36%,rgba(179,222,255,.95),rgba(179,222,255,0) 70%),radial-gradient(44vmax 38vmax at 10% 96%,color-mix(in srgb,rgb(226 212 255 / .95) var(--pastel),rgb(var(--w) / .95)),rgba(226,212,255,0) 70%),radial-gradient(36vmax 30vmax at 92% 100%,rgba(197,236,255,.9),rgba(197,236,255,0) 70%),var(--bg);transition:opacity .5s var(--ease) .08s,visibility 0s .6s}
.boot.out{opacity:0;visibility:hidden;pointer-events:none}
.boot-ic{width:112px;height:112px;border-radius:31px;display:grid;place-items:center;background:linear-gradient(150deg,#8F63FF,#4A1FE6 55%,#2F1BC4);box-shadow:0 28px 50px -20px rgba(74,31,230,.75),inset 0 1px 0 rgb(var(--hl) / calc(.35 * var(--hla)));transition:transform .55s var(--ease),opacity .4s var(--ease)}
.boot-ic svg{width:70px;height:70px;display:block}
.boot.out .boot-ic{transform:scale(1.14);opacity:0}
@keyframes breathe{50%{transform:scale(.92);opacity:.7}}
.note{font-size:12.5px;color:var(--muted);line-height:1.5}
.banner{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:16px;background:rgba(184,108,0,.09);color:var(--warn-ink);font-size:13px;font-weight:600}
.kbd{font-family:var(--mono);font-size:11px;padding:2px 6px;border-radius:6px;background:rgb(var(--k) / .07)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* install card (Accueil, once, until dismissed): one compact row; the steps unfold on « Comment ? » */
.inst{position:relative;overflow:hidden;padding:10px 10px 10px 12px;display:flex;flex-direction:column;gap:0;background:linear-gradient(150deg,rgb(var(--w) / .86),rgb(var(--w) / .6));transition:height .4s var(--ease),opacity .3s,transform .4s var(--ease),margin .4s var(--ease),padding .4s var(--ease)}
.inst::before{content:"";position:absolute;inset:-60% -10% auto auto;width:180px;height:180px;border-radius:50%;background:radial-gradient(closest-side,rgba(122,77,255,.22),transparent);pointer-events:none}
.inst.bye{height:0!important;opacity:0;transform:scale(.96);padding-block:0;margin-bottom:-14px}
.inst-hd{display:flex;align-items:center;gap:11px;position:relative;min-width:0}
.inst-t{flex:1;min-width:0;line-height:1.25}
.inst-t b{display:block;font-size:14.5px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inst-t span{display:block;font-size:12px;font-weight:600;color:var(--muted)}
.inst-hd .btn.sm{flex:none;min-height:40px;padding:0 13px;border-radius:12px;font-size:13px}
.inst-x{all:unset;cursor:pointer;flex:none;width:36px;height:36px;margin:-2px -4px -2px -4px;border-radius:50%;display:grid;place-items:center;color:var(--muted);position:relative;transition:transform .18s var(--ease),background .2s}
.inst-x::after{content:"";position:absolute;inset:-4px}
.inst-x .ico{width:16px;height:16px}
.inst-x:active{transform:scale(.88)}
.inst-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.inst-more>div{overflow:hidden;min-height:0}
.inst.open .inst-more{grid-template-rows:1fr}
.inst-steps{list-style:none;margin:0;padding:10px 0 2px;display:flex;flex-direction:column;gap:6px;position:relative}
.inst-steps li{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:14px;background:rgb(var(--w) / .7);box-shadow:0 0 0 1px var(--line) inset;font-size:13.5px;font-weight:600;color:var(--ink)}
.inst-steps li b{font-weight:800}
.inst-steps .n{width:24px;height:24px;flex:none;border-radius:8px;display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;background:linear-gradient(140deg,#7A4DFF,#4A1FE6)}
.inst-steps .key{display:inline-grid;place-items:center;width:28px;height:28px;margin:-4px 2px;vertical-align:middle;border-radius:9px;background:var(--solid);color:#0A7AFF;box-shadow:0 1px 0 rgb(var(--sk) / .06),0 0 0 1px var(--line) inset}
.inst-steps .key .ico{width:17px;height:17px}
.inst-arrow{display:none}
@media (max-width:959px){html:not(.standalone) .inst-arrow{display:grid;place-items:center;color:var(--accent);opacity:.7;margin:2px 0 -4px;animation:nudge 1.6s var(--ease) infinite}}
.inst-arrow.end{width:24px;margin-left:auto;margin-right:14px}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ═══════════════════════════ v4 "Aurore 2026" layer ═══════════════════════════
   One place for the refinements on top of the B2 primitives: icon drawing, type scale, layered glass, tiles, motion, night mode. */

/* icons: one stroke for the whole set, duotone planes from js/icons.js */
.ico{stroke-width:1.75}
.ico path[fill=currentColor]{opacity:var(--duo)}
.btn .ico,.chip .ico{stroke-width:2}
.tab .ico{stroke-width:1.85}

/* type: tighter display, calm body, tabular figures everywhere */
body{font-feature-settings:"tnum","ss01","cv11";font-variant-numeric:tabular-nums;letter-spacing:-.006em;text-rendering:optimizeLegibility}
.title{font-size:31px;font-weight:800;letter-spacing:-.052em;line-height:1.02}
.h2{font-size:22px;letter-spacing:-.042em;line-height:1.08}
.h3{font-size:16px;letter-spacing:-.028em}
.lbl{font-size:10.5px;letter-spacing:.09em;color:var(--faint)}
.sub{letter-spacing:-.008em}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";letter-spacing:-.03em}
@media (min-width:960px){.title{font-size:36px}.h2{font-size:24px}}

/* surfaces: layered glass — tinted body, lit top edge, two-step shadow */
.glass{background-color:var(--glass);background-image:linear-gradient(180deg,rgb(var(--hl) / calc(.42 * var(--hla))),rgb(var(--hl) / 0) 46%);border-color:var(--edge);box-shadow:var(--sh)}
.ic{border-radius:13px;background:linear-gradient(160deg,rgba(122,77,255,.17),rgba(74,31,230,.07));box-shadow:inset 0 0 0 .5px rgba(74,31,230,.12),inset 0 1px 0 rgb(var(--hl) / calc(.6 * var(--hla)))}
.ic.ok{background:linear-gradient(160deg,rgba(16,185,129,.18),rgba(7,138,94,.07));box-shadow:inset 0 0 0 .5px rgba(7,138,94,.14)}
.ic.bad{background:linear-gradient(160deg,rgba(244,63,94,.17),rgba(212,42,72,.07));box-shadow:inset 0 0 0 .5px rgba(212,42,72,.14)}
.ic.warn{background:linear-gradient(160deg,rgba(245,158,11,.2),rgba(184,108,0,.07));box-shadow:inset 0 0 0 .5px rgba(184,108,0,.14)}
.pill.ok{background:var(--tint-ok)}.pill.warn{background:var(--tint-warn)}.pill.bad{background:var(--tint-bad)}.pill.acc{background:var(--tint-acc)}
.input{background:var(--glass-hi);border-color:var(--line);box-shadow:inset 0 1px 2px rgb(var(--sk) / .04)}
.input::placeholder{color:var(--faint);opacity:.85}
.input:focus{border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}
.li+.li{border-top-color:var(--line)}
.li.tap:hover{background:rgb(var(--w) / .5)}

/* buttons: lit gradient, inner edge, springy press */
.btn{transition:transform .32s var(--spring),box-shadow .3s,opacity .3s,filter .2s}
.btn.acc{color:#fff;background:var(--acc-grad);box-shadow:var(--sh-acc);text-shadow:0 1px 0 rgba(30,0,120,.25)}
.btn.soft{background:var(--glass-hi);box-shadow:0 0 0 1px var(--line) inset,0 1px 0 rgb(var(--hl) / calc(.8 * var(--hla))) inset,0 4px 12px -8px rgb(var(--sk) / .2)}
.btn.danger{background:var(--tint-bad)}
.btn:active,.iconbtn:active{transition-duration:.1s;transition-timing-function:var(--ease)}
.btn:active{transform:scale(.96)}
.iconbtn{background:var(--glass-hi);box-shadow:0 0 0 1px var(--line) inset,0 1px 0 rgb(var(--hl) / calc(.8 * var(--hla))) inset,0 6px 14px -8px rgb(var(--sk) / .35);transition:transform .32s var(--spring),background .2s,box-shadow .25s,color .2s}
.fab{background:var(--acc-grad);box-shadow:var(--sh-acc);border-radius:20px}
.chip{background:var(--glass);border-color:var(--edge)}
.chip.on{box-shadow:0 6px 14px -8px rgb(var(--sk) / .5)}
.seg{background:rgb(var(--k) / .05);border-color:transparent;box-shadow:inset 0 1px 2px rgb(var(--sk) / .05)}
.seg .knob{background:var(--solid);box-shadow:0 1px 0 rgb(var(--hl) / calc(.9 * var(--hla))) inset,0 0 0 .5px rgb(var(--k) / .06),0 4px 12px -6px rgb(var(--sk) / .35)}
.keypad button{background:rgb(var(--k) / .05);box-shadow:inset 0 1px 0 rgb(var(--hl) / calc(.6 * var(--hla)))}

/* chrome: tab bar + side nav */
.tabbar{box-shadow:0 1px 0 rgb(var(--hl) / calc(.9 * var(--hla))) inset,0 0 0 .5px rgb(var(--k) / .05),0 22px 44px -18px rgb(var(--sk) / .45)}
.tabbar .ind{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 16%,transparent),color-mix(in srgb,var(--accent) 7%,transparent));box-shadow:0 0 0 .5px color-mix(in srgb,var(--accent) 18%,transparent) inset}
.side{background-image:linear-gradient(180deg,rgb(var(--hl) / calc(.35 * var(--hla))),transparent 30%)}
.side .brand{letter-spacing:-.04em}
.nav{font-weight:650;letter-spacing:-.012em;transition:background .25s var(--ease),color .25s,transform .3s var(--spring)}
.nav:active{transform:scale(.97)}
.nav .ico{color:var(--faint);transition:color .25s}
.nav:hover .ico{color:var(--ink-2)}
.nav.on{background:var(--glass-hi);box-shadow:0 0 0 .5px rgb(var(--k) / .06),0 1px 0 rgb(var(--hl) / calc(.9 * var(--hla))) inset,0 8px 18px -12px rgb(var(--sk) / .4)}
.nav.on .ico{color:var(--accent)}
.nav .count{font-variant-numeric:tabular-nums;box-shadow:0 2px 6px -2px rgb(var(--sk) / .4)}

/* sheets, scrim, toast */
.scrim{background:rgb(var(--sk) / .32);-webkit-backdrop-filter:blur(6px) saturate(1.2);backdrop-filter:blur(6px) saturate(1.2)}
.sheet{box-shadow:0 -24px 70px -24px rgb(var(--sk) / .5),0 0 0 .5px rgb(var(--k) / .06),0 1px 0 rgb(var(--hl) / calc(.9 * var(--hla))) inset}

/* motion: springier staggered entrance, pressable cards */
.st{animation:rise .7s var(--spring-soft) both;animation-delay:calc(var(--i,0) * 40ms + 40ms)}
@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.97)}60%{opacity:1}to{opacity:1;transform:none}}
:where(button.glass,.glass[data-go],.glass[data-act],.li.tap){transition:transform .35s var(--spring),box-shadow .3s,background-color .2s}
:where(button.glass,.glass[data-go],.glass[data-act]):active{transform:scale(.982);transition-duration:.12s}
.li.tap:active{transform:scale(.99);transition-duration:.12s}

/* skeleton shimmer (loading placeholders): <div class="skel" style="height:56px"></div> */
.skel{position:relative;overflow:hidden;border-radius:var(--r-sm);background:rgb(var(--k) / .06);min-height:14px}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgb(var(--hl) / calc(.55 * var(--hla) + .04)),transparent);animation:skel 1.4s var(--ease) infinite}
.skel.round{border-radius:999px}.skel.card{border-radius:var(--r);min-height:84px}
@keyframes skel{to{transform:translateX(100%)}}

/* module colours: one refined gradient per module, shared by the side nav, the « Plus » grid and any area tile (background:var(--m-<route>)) */
:root{--m-home:linear-gradient(155deg,#9C74FF,#4A1FE6 58%,#3B16D9);--m-releve:linear-gradient(155deg,#6FA0FF,#3B4DF0 58%,#2F3BD8);--m-frigos:linear-gradient(155deg,#5FD3FF,#1E9BEA 58%,#1574D0);--m-scan:linear-gradient(155deg,#9C74FF,#5B2BFF 58%,#3B16D9);--m-reception:linear-gradient(155deg,#FFB067,#F07A2E 58%,#D9601F);--m-notes:linear-gradient(155deg,#FFD37A,#F5A524 58%,#E07E0C);--m-menage:linear-gradient(155deg,#45E0A8,#13B07A 58%,#0B8A5E);--m-dashboard:linear-gradient(155deg,#8C9BFF,#5664F5 58%,#3D45D6);--m-finance:linear-gradient(155deg,#4FE3C8,#14B39A 58%,#0B8C86);--m-stock:linear-gradient(155deg,#FF8CC0,#E9478C 58%,#C92E6E);--m-tickets:linear-gradient(155deg,#B1A2FF,#7C66F2 58%,#5D45D9);--m-registre:linear-gradient(155deg,#7EE0B0,#1FAF85 58%,#118063);--m-obligations:linear-gradient(155deg,#FF9580,#F0573C 58%,#D63A2A);--m-pointeuse:linear-gradient(155deg,#6FC2FF,#2F86F5 58%,#1F5FD8);--m-planning:linear-gradient(155deg,#D89BFF,#A45CF2 58%,#8236DB);--m-staff:linear-gradient(155deg,#7BE38E,#2EB65A 58%,#17914A);--m-equipe:linear-gradient(155deg,#7BE38E,#2EB65A 58%,#17914A);--m-avis:linear-gradient(155deg,#FFD86B,#FBB224 58%,#E8920A);--m-imprimante:linear-gradient(155deg,#A9B2CC,#6E7896 58%,#525B78);--m-reglages:linear-gradient(155deg,#A9B2CC,#6E7896 58%,#525B78);}
/* side nav: Apple-Settings-style mini tiles, white glyph on the module colour */
.side .navs .nav .ico{width:28px;height:28px;padding:5px;border-radius:9px;color:#fff;stroke-width:2;background:var(--m-reglages);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 .5px rgba(0,0,0,.06),0 3px 8px -4px rgb(var(--sk) / .45)}
.side .navs .nav .ico path[fill=currentColor]{opacity:.32}
.side .navs .nav.on .ico,.side .navs .nav:hover .ico{color:#fff}
.side .navs .nav{gap:12px;padding-block:6px}
.side .nav[data-go=home] .ico{background:var(--m-home)}.side .nav[data-go=releve] .ico{background:var(--m-releve)}.side .nav[data-go=frigos] .ico{background:var(--m-frigos)}.side .nav[data-go=scan] .ico{background:var(--m-scan)}.side .nav[data-go=reception] .ico{background:var(--m-reception)}.side .nav[data-go=notes] .ico{background:var(--m-notes)}.side .nav[data-go=menage] .ico{background:var(--m-menage)}.side .nav[data-go=dashboard] .ico{background:var(--m-dashboard)}.side .nav[data-go=finance] .ico{background:var(--m-finance)}.side .nav[data-go=stock] .ico{background:var(--m-stock)}.side .nav[data-go=tickets] .ico{background:var(--m-tickets)}.side .nav[data-go=registre] .ico{background:var(--m-registre)}.side .nav[data-go=obligations] .ico{background:var(--m-obligations)}.side .nav[data-go=pointeuse] .ico{background:var(--m-pointeuse)}.side .nav[data-go=planning] .ico{background:var(--m-planning)}.side .nav[data-go=staff] .ico{background:var(--m-staff)}.side .nav[data-go=equipe] .ico{background:var(--m-equipe)}.side .nav[data-go=avis] .ico{background:var(--m-avis)}.side .nav[data-go=imprimante] .ico{background:var(--m-imprimante)}.side .nav[data-go=reglages] .ico{background:var(--m-reglages)}
/* « Plus » grid tiles: the iOS-icon treatment */
.cc-gt[data-go=home] .ic{background:var(--m-home);--tc:#4A1FE6}.cc-gt[data-go=releve] .ic{background:var(--m-releve);--tc:#3B4DF0}.cc-gt[data-go=frigos] .ic{background:var(--m-frigos);--tc:#1E9BEA}.cc-gt[data-go=scan] .ic{background:var(--m-scan);--tc:#5B2BFF}.cc-gt[data-go=reception] .ic{background:var(--m-reception);--tc:#F07A2E}.cc-gt[data-go=notes] .ic{background:var(--m-notes);--tc:#F5A524}.cc-gt[data-go=menage] .ic{background:var(--m-menage);--tc:#13B07A}.cc-gt[data-go=dashboard] .ic{background:var(--m-dashboard);--tc:#5664F5}.cc-gt[data-go=finance] .ic{background:var(--m-finance);--tc:#14B39A}.cc-gt[data-go=stock] .ic{background:var(--m-stock);--tc:#E9478C}.cc-gt[data-go=tickets] .ic{background:var(--m-tickets);--tc:#7C66F2}.cc-gt[data-go=registre] .ic{background:var(--m-registre);--tc:#1FAF85}.cc-gt[data-go=obligations] .ic{background:var(--m-obligations);--tc:#F0573C}.cc-gt[data-go=pointeuse] .ic{background:var(--m-pointeuse);--tc:#2F86F5}.cc-gt[data-go=planning] .ic{background:var(--m-planning);--tc:#A45CF2}.cc-gt[data-go=staff] .ic{background:var(--m-staff);--tc:#2EB65A}.cc-gt[data-go=equipe] .ic{background:var(--m-equipe);--tc:#2EB65A}.cc-gt[data-go=avis] .ic{background:var(--m-avis);--tc:#FBB224}.cc-gt[data-go=imprimante] .ic{background:var(--m-imprimante);--tc:#6E7896}.cc-gt[data-go=reglages] .ic{background:var(--m-reglages);--tc:#6E7896}
.cc-gt .ic{color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.08),0 8px 16px -8px var(--tc,#4A1FE6),0 2px 4px -2px rgb(var(--sk) / .2)}
.cc-gt .ic .ico{stroke-width:2}
.cc-gt .ic .ico path[fill=currentColor]{opacity:.32}

/* night mode: elements whose light look cannot be expressed with tokens */
@media (prefers-color-scheme:dark){
  :root{--toast-bg:rgba(38,41,82,.96)}
  .grain{opacity:.035;mix-blend-mode:overlay}
  .boot{background:radial-gradient(52vmax 44vmax at 4% 10%,rgba(58,31,176,.7),rgba(58,31,176,0) 70%),radial-gradient(46vmax 40vmax at 104% 36%,rgba(14,63,122,.7),rgba(14,63,122,0) 70%),radial-gradient(44vmax 38vmax at 10% 96%,rgba(75,26,143,.6),rgba(75,26,143,0) 70%),var(--bg)}
  .seg .knob{background:rgb(70 74 128 / .9)}
  .chip.on:hover{background:#fff}
  .toast{box-shadow:0 0 0 .5px rgba(255,255,255,.1) inset,0 18px 40px -14px rgba(0,0,0,.8)}
  .ava{border-color:var(--solid)}
  .hero{box-shadow:0 26px 50px -24px rgba(90,50,255,.55),0 0 0 .5px rgba(255,255,255,.12) inset}
  .cam{box-shadow:0 0 0 .5px rgba(255,255,255,.08)}
  .label{box-shadow:0 0 0 .5px rgba(255,255,255,.1),0 12px 30px -16px rgba(0,0,0,.8)}
  .ic{background:linear-gradient(160deg,rgba(157,133,255,.24),rgba(120,90,255,.1));box-shadow:inset 0 0 0 .5px rgba(180,160,255,.18),inset 0 1px 0 rgba(255,255,255,.08)}
  .ic.ok{background:linear-gradient(160deg,rgba(61,220,151,.22),rgba(61,220,151,.08))}
  .ic.bad{background:linear-gradient(160deg,rgba(255,107,133,.22),rgba(255,107,133,.08))}
  .ic.warn{background:linear-gradient(160deg,rgba(255,181,71,.22),rgba(255,181,71,.08))}
  .btn.soft:hover{background:var(--glass-hi);filter:brightness(1.15)}
  .iconbtn:hover{background:var(--glass-hi)}
  .li.tap:hover{background:rgb(255 255 255 / .04)}
  .scale i{box-shadow:0 3px 10px rgba(0,0,0,.5),0 0 0 3px var(--ink)}
  .check{box-shadow:0 6px 14px -6px rgba(61,220,151,.5)}
  .check svg{stroke:#04150D}
  .pill.bad .dot{animation-name:beatd}
  .statusveil{background:linear-gradient(180deg,rgba(7,8,26,.8),rgba(7,8,26,0))}
  img{filter:brightness(.94)}
}
@keyframes beatd{0%,100%{box-shadow:0 0 0 0 rgba(255,107,133,.5)}50%{box-shadow:0 0 0 5px rgba(255,107,133,0)}}
@media (prefers-reduced-motion:reduce){.skel::after{animation:none}.st{animation:none}}

/* night mode for the areas whose stylesheet hardcodes light values (releve.css, labels.css): token fallbacks, higher specificity */
@media (prefers-color-scheme:dark){
  html .rel-sum.full{background:linear-gradient(135deg,rgba(61,220,151,.14),rgba(61,220,151,.05)),var(--glass)}
  html .rel-opt:hover,html .rel-act:hover{background:var(--glass-hi)}
  html .rel-hdot,html .rel-legend i.s{background:var(--solid)}
  html .rel-pt.soir,html .rel-pt.bad.soir{fill:var(--solid)}
  html .rel-pt.midi,html .rel-pt.bad.midi{stroke:var(--solid)}
  html .rel-chart .col{fill:rgba(255,255,255,.025)}
  html .rel-chart .gl{stroke:rgba(255,255,255,.07)}
  html .rel-chart .cross{stroke:rgba(255,255,255,.3)}
  html .rel-slot.soir,html .rel-grph em,html .lb-status.s-out,html .lb-evi.t-out,html .lb-qid,html .lb-x,html .lb-evi.t-undo{background:rgba(255,255,255,.07)}
  html .lb-reason .rd,html .lb-radio{box-shadow:0 0 0 2px rgba(255,255,255,.24) inset}
  html .lb-sw{background:rgba(255,255,255,.16)}
  html .lb-stage .btn.soft{color:#0E1330}
  html .lb-qr .lb-qid{background:rgba(14,19,48,.06);color:#0E1330}
}
/* side nav on short laptop screens: smaller module tiles keep every entry in view */
@media (min-width:960px) and (max-height:900px){.side .navs .nav .ico{width:24px;height:24px;padding:4px;border-radius:8px}.side .navs .nav{padding-block:5px}}
/* phones/tablets: the animated aurora and the blended grain sit behind every scrolling list and cost a full-screen repaint per frame.
   Freeze the aurora (same look, no motion) and drop the grain so scrolling stays at 60 fps. */
@media (pointer:coarse){.aurora i{animation:none!important;will-change:auto}.grain{display:none}}

/* diagnostics overlay (?debug=1, ?debug=0 to stop): live layout numbers for a screen recording */
.ggdbg{position:absolute;z-index:9999;left:6px;top:calc(var(--sat,0px) + 40px);pointer-events:none;font:600 10px/1.35 ui-monospace,Menlo,monospace;color:#0f0;background:rgba(0,0,0,.78);padding:5px 7px;border-radius:8px;white-space:pre;max-width:60vw}