/* A7R II de Bolso — estilos. Cores em tokens; tema claro/escuro pelo sistema; modo noturno vermelho em .app.red */
:root{
  /* Layout: app de ecrã inteiro — cabeçalho, conteúdo que rola e barra de separadores em baixo. */
  --bg:#ECEFF1; --surface:#FFFFFF; --surface-2:#E2E6E9; --ink:#14181B; --muted:#56606A; --line:#CBD2D7;
  --accent:#CF5E18; --accent-ink:#FFFFFF; --accent-soft:#F6E1D2;
  --frame:#1A1E22; --body:#262B30; --body-2:#373E44; --body-3:#525C64; --body-ink:#ECEFF1;
  --rec:#D23A2E; --lamp:#E8A33A;
  --screen:#0A0C0E; --screen-ink:#F1F3F4; --screen-dim:#8E98A0; --shade:rgba(0,0,0,.45);
  --sky-1:#16212B; --sky-2:#3A5163; --land-1:#262B24; --land-2:#101310;
  --nv-0:#000000; --nv-1:#0D0100; --nv-2:#1A0302; --nv-3:#3A0905; --nv-4:#9E2016; --nv-5:#FF3B2E;
  --logo-red:#E10000;
  --f-display:"Barlow Condensed","Arial Narrow",sans-serif;
  --f-body:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E1113; --surface:#161A1D; --surface-2:#1F2428; --ink:#E6E9EB; --muted:#9AA4AD; --line:#2A3137;
    --accent:#EE7A30; --accent-ink:#170B03; --accent-soft:#3B2415; --logo-red:#FF1E1E;
    --frame:#000000; --body:#2A3035; --body-2:#3A4248; --body-3:#5A646C; --body-ink:#ECEFF1;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1113; --surface:#161A1D; --surface-2:#1F2428; --ink:#E6E9EB; --muted:#9AA4AD; --line:#2A3137;
  --accent:#EE7A30; --accent-ink:#170B03; --accent-soft:#3B2415; --logo-red:#FF1E1E;
  --frame:#000000; --body:#2A3035; --body-2:#3A4248; --body-3:#5A646C; --body-ink:#ECEFF1;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--f-body);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-underline-offset:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.app{
  --a-bg:var(--bg); --a-surface:var(--surface); --a-surface-2:var(--surface-2); --a-ink:var(--ink); --a-muted:var(--muted); --a-line:var(--line);
  --a-accent:var(--accent); --a-accent-ink:var(--accent-ink); --a-accent-soft:var(--accent-soft);
  --a-screen:var(--screen); --a-screen-ink:var(--screen-ink); --a-screen-dim:var(--screen-dim);
  --a-body:var(--body); --a-body-2:var(--body-2); --a-body-3:var(--body-3); --a-body-ink:var(--body-ink);
  --a-rec:var(--rec); --a-lamp:var(--lamp); --a-sky-1:var(--sky-1); --a-sky-2:var(--sky-2); --a-land-1:var(--land-1); --a-land-2:var(--land-2);
  height:100%;border-radius:36px;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  background:var(--a-bg);color:var(--a-ink);font-size:15px;line-height:1.45;position:relative
}
.app.red{
  --a-bg:var(--nv-0); --a-surface:var(--nv-1); --a-surface-2:var(--nv-2); --a-ink:var(--nv-5); --a-muted:var(--nv-4); --a-line:var(--nv-3);
  --a-accent:var(--nv-5); --a-accent-ink:var(--nv-0); --a-accent-soft:var(--nv-2);
  --a-screen:var(--nv-0); --a-screen-ink:var(--nv-5); --a-screen-dim:var(--nv-4);
  --a-body:var(--nv-1); --a-body-2:var(--nv-2); --a-body-3:var(--nv-3); --a-body-ink:var(--nv-5);
  --a-rec:var(--nv-5); --a-lamp:var(--nv-4); --a-sky-1:var(--nv-0); --a-sky-2:var(--nv-2); --a-land-1:var(--nv-1); --a-land-2:var(--nv-0);
  color-scheme:dark
}
.a-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 18px 12px;border-bottom:1px solid var(--a-line);background:var(--a-surface)}
.brand{font:700 1.35rem/1 var(--f-display);letter-spacing:.01em}
.brand small{font:600 .95rem/1 var(--f-display);color:var(--a-muted);margin-left:4px}
.nightbtn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--a-line);background:var(--a-surface-2);color:var(--a-ink);border-radius:999px;padding:6px 12px;font:600 .82rem/1 var(--f-body);cursor:pointer}
.nightbtn i{width:10px;height:10px;border-radius:50%;background:var(--nv-5);display:block}
.nightbtn[aria-pressed="true"]{border-color:var(--a-accent)}
.a-main{overflow-y:auto;overscroll-behavior:contain;padding:14px 14px 24px;scrollbar-width:thin}
.a-nav{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--a-line);background:var(--a-surface);padding:6px 4px 12px}
.a-nav button{display:grid;justify-items:center;gap:3px;background:none;border:0;color:var(--a-muted);font:600 .72rem/1 var(--f-body);padding:6px 0;cursor:pointer;border-radius:10px}
.a-nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.a-nav button[aria-current="page"]{color:var(--a-accent)}

.segs{display:flex;gap:4px;padding:3px;border-radius:10px;background:var(--a-surface-2);margin-bottom:12px;overflow-x:auto;scrollbar-width:none}
.seg{flex:1 0 auto;border:0;background:none;color:var(--a-muted);font:600 .8rem/1 var(--f-body);padding:8px 10px;border-radius:8px;cursor:pointer;white-space:nowrap}
.seg.on{background:var(--a-surface);color:var(--a-ink);box-shadow:0 1px 2px var(--shade)}
.fig{background:var(--a-surface);border:1px solid var(--a-line);border-radius:14px;padding:10px 6px}
.fig svg{display:block;width:100%;height:auto}
.figcap{font:500 .72rem/1.3 var(--f-mono);color:var(--a-muted);margin:6px 2px 12px;letter-spacing:.02em}
.b-body{fill:var(--a-body);stroke:var(--a-body-3);stroke-width:1}
.b-lens{fill:var(--a-body-2);stroke:var(--a-body-3);stroke-width:1}
.b-ctl{fill:var(--a-body-2);stroke:var(--a-body-3);stroke-width:1}
.b-ctl2{fill:var(--a-body-3)}
.b-screen{fill:var(--a-screen);stroke:var(--a-body-3);stroke-width:1}
.b-rec{fill:var(--a-rec)}
.b-lamp{fill:var(--a-lamp)}
.b-txt{fill:var(--a-body-ink);font:600 6.5px var(--f-display);text-anchor:middle;pointer-events:none}
.b-txt.s{font-size:5.2px}
.b-ink{fill:var(--a-body-ink);pointer-events:none}
.b-line{stroke:var(--a-body-ink);fill:none;stroke-width:1.1;pointer-events:none}
.b-tick{stroke:var(--a-body-ink);fill:none;stroke-width:2.5;stroke-dasharray:1 3.2;opacity:.7;pointer-events:none}
.b-lbl{fill:var(--a-muted);font:500 7px var(--f-mono);text-anchor:middle;letter-spacing:.08em}
g[data-part]{cursor:pointer}
g[data-part]:hover .b-ctl,g[data-part].sel .b-ctl{fill:var(--a-body-3)}
g[data-part].sel>:first-child{stroke:var(--a-accent);stroke-width:2}
.badge{cursor:pointer}
.badge circle{fill:var(--a-accent);stroke:var(--a-surface);stroke-width:1.5}
.badge text{fill:var(--a-accent-ink);font:700 8.5px var(--f-body);text-anchor:middle;dominant-baseline:central;pointer-events:none}
.badge.on circle{stroke:var(--a-ink);stroke-width:2}
.badge:focus-visible{outline:none}
.badge:focus-visible circle{stroke:var(--a-ink);stroke-width:2.5}

.info{background:var(--a-surface);border:1px solid var(--a-line);border-radius:14px;padding:14px;margin-bottom:16px;scroll-margin-top:10px}
.info header{display:flex;gap:10px;align-items:flex-start;margin-bottom:8px}
.info h3{font:700 1.2rem/1.1 var(--f-display);margin:0;text-wrap:balance}
.info .en{margin:3px 0 0;font:400 .76rem/1.35 var(--f-mono);color:var(--a-muted)}
.info dl{margin:0;display:grid;gap:8px}
.info dt{font:600 .7rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--a-muted)}
.info dd{margin:2px 0 0}
.num{flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--a-accent);color:var(--a-accent-ink);font:700 .78rem/1 var(--f-body)}
.tip{margin:10px 0 0;padding:9px 11px;border-radius:10px;background:var(--a-accent-soft);font-size:.9rem}
.tip b{font:600 .68rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--a-accent);margin-right:6px}
.modes{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.modes li{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:baseline;font-size:.88rem}
.modes b{font:700 .95rem/1 var(--f-display);text-align:center;background:var(--a-surface-2);border-radius:6px;padding:4px 0}
.modes small{display:block;font:400 .7rem/1.3 var(--f-mono);color:var(--a-muted)}
.lh{font:600 .72rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--a-muted);margin:18px 2px 8px}
.plist,.ilist,.slist,.rlist,.mlist{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.row{width:100%;display:flex;gap:10px;align-items:center;text-align:left;background:var(--a-surface);border:1px solid var(--a-line);border-radius:12px;padding:9px 11px;color:var(--a-ink);font:inherit;cursor:pointer}
.row:hover{border-color:var(--a-muted)}
.row.on{border-color:var(--a-accent)}
.row .txt{min-width:0;flex:1}
.row b{display:block;font-weight:600;line-height:1.25}
.row small{display:block;color:var(--a-muted);font-size:.8rem;line-height:1.3}
.hint{color:var(--a-muted);font-size:.9rem;margin:4px 2px 14px}

.mbar{background:var(--a-screen);border-radius:12px;padding:4px;margin-bottom:10px;display:grid;gap:4px}
.mtabs{display:grid;grid-template-columns:repeat(6,1fr);gap:2px}
.mpages{display:flex;flex-wrap:wrap;gap:3px;padding:4px 2px 2px;border-top:1px solid var(--a-body-3)}
.mpg{min-width:30px;height:28px;border:0;border-radius:7px;background:none;color:var(--a-screen-dim);font:700 .9rem/1 var(--f-display);cursor:pointer;font-variant-numeric:tabular-nums}
.mpg.on{background:var(--a-screen-ink);color:var(--a-screen)}
.pgn{font:600 .8rem/1 var(--f-mono);color:var(--a-accent);margin-left:4px;font-variant-numeric:tabular-nums}
.mpath{font:500 .72rem/1.4 var(--f-mono);color:var(--a-muted);margin:0 0 8px!important}
.olist{display:grid;gap:4px;margin:4px 0 8px}
.opt{border:1px solid var(--a-line);border-radius:8px;background:var(--a-surface-2)}
.ol{display:flex;align-items:center;gap:8px;padding:7px 10px;font:500 .86rem/1.3 var(--f-body)}
summary.ol{cursor:pointer;list-style:none}
summary.ol::-webkit-details-marker{display:none}
summary.ol::after{content:"";margin-left:auto;width:7px;height:7px;border-right:2px solid var(--a-muted);border-bottom:2px solid var(--a-muted);transform:rotate(-45deg);transition:transform .15s;flex:none}
details[open]>summary.ol::after{transform:rotate(45deg)}
.olc{font:500 .64rem/1 var(--f-mono);color:var(--a-muted);padding:2px 5px;border-radius:4px;border:1px solid var(--a-line)}
.def{font:600 .58rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--a-accent);white-space:nowrap}
.sub{display:flex;flex-wrap:wrap;gap:5px;padding:0 10px 10px}
.sub span{font:500 .74rem/1.2 var(--f-mono);padding:4px 7px;border-radius:6px;background:var(--a-surface);border:1px solid var(--a-line)}
.sub span.d{border-color:var(--a-accent);color:var(--a-accent)}
.fwtag{font:600 .6rem/1 var(--f-mono);padding:3px 5px;border-radius:4px;border:1px solid var(--a-accent);color:var(--a-accent);letter-spacing:.04em}
.pgnav{display:flex;justify-content:space-between;gap:8px;margin:10px 0 0}
.pgbtn{border:1px solid var(--a-line);background:var(--a-surface);color:var(--a-ink);border-radius:999px;padding:7px 12px;font:600 .8rem/1 var(--f-body);cursor:pointer}
.fwbar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:18px 2px 6px;font:600 .72rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--a-muted)}
.fwbar .segs{margin:0}
.fwnote{font-size:.78rem;line-height:1.4;color:var(--a-muted);margin:0 2px}
.mtab{display:grid;justify-items:center;gap:4px;border:0;background:none;color:var(--a-screen-dim);padding:8px 0 7px;border-radius:9px;cursor:pointer;font:600 .62rem/1 var(--f-body)}
.mtab svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mtab.on{background:var(--a-accent);color:var(--a-accent-ink)}
.mhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:2px 2px 10px}
.mhead b{font:700 1.15rem/1.1 var(--f-display)}
.mhead span{font:400 .74rem/1.2 var(--f-mono);color:var(--a-muted);text-align:right}
.mi .row{flex-wrap:wrap}
.mi-en{font:600 1rem/1.2 var(--f-display);letter-spacing:.01em}
.mi-pt{color:var(--a-muted);font-size:.84rem}
.fn{font:600 .62rem/1 var(--f-mono);padding:3px 5px;border-radius:4px;background:var(--a-surface-2);color:var(--a-ink);letter-spacing:.04em}
.chev{width:14px;height:14px;flex:none;fill:none;stroke:var(--a-muted);stroke-width:2;transition:transform .15s}
.mi.open .chev{transform:rotate(90deg)}
.mi-body{padding:10px 12px 12px;margin-top:-4px;border:1px solid var(--a-accent);border-top:0;border-radius:0 0 12px 12px;background:var(--a-surface)}
.mi.open .row{border-color:var(--a-accent);border-radius:12px 12px 0 0}
.mi-body p{margin:0 0 8px}
.opts{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 6px}
.opts span{font:500 .72rem/1.2 var(--f-mono);padding:4px 7px;border-radius:6px;background:var(--a-surface-2)}
.ref{font:400 .72rem/1.3 var(--f-mono);color:var(--a-muted);margin:8px 0 0!important}

.lcd{position:relative;aspect-ratio:3/2;width:100%;max-width:100%;border-radius:10px;overflow:hidden;background:linear-gradient(180deg,var(--a-sky-1) 0%,var(--a-sky-2) 54%,var(--a-land-1) 55%,var(--a-land-2) 100%);color:var(--a-screen-ink)}
.lcd .af{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.lcd .af path{stroke:var(--a-screen-ink);stroke-width:1.2;fill:none;opacity:.75}
.lcd{container-type:inline-size}
.hud{position:absolute;display:inline-flex;align-items:center;gap:.8cqw;background:none;border:0;color:inherit;padding:.7cqw;border-radius:.8cqw;cursor:pointer;line-height:0}
.hud:hover{background:var(--shade)}
.hud.on{outline:1.5px solid var(--a-accent);background:var(--shade)}
.pi{display:inline-block;flex:none;background:currentColor;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.pi.fill{width:100%;height:100%}
.glyph{flex:none;width:68px;height:38px;display:flex;padding:6px;border-radius:7px;background:var(--a-screen);color:var(--a-screen-ink)}
.shot{display:flex;justify-content:center;align-items:center;background:var(--a-screen);color:var(--a-screen-ink);border-radius:10px;padding:14px;margin:4px 0 10px}
.shot .pi{max-width:100%}
.vars{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:6px;margin:4px 0 10px}
.var{display:grid;justify-items:center;align-content:start;gap:7px;padding:10px 4px 8px;border-radius:9px;background:var(--a-screen);color:var(--a-screen-ink);text-align:center;min-width:0}
.var .pi{max-width:100%}
.var span{font:500 .7rem/1.25 var(--f-body);color:var(--a-screen-dim)}
.ii.open .row{border-color:var(--a-accent);border-radius:12px 12px 0 0}
.ii.open .chev{transform:rotate(90deg)}
.ibox{padding:12px;border:1px solid var(--a-accent);border-top:0;border-radius:0 0 12px 12px;background:var(--a-surface);scroll-margin-top:10px}
.idesc{margin:0 0 10px}
.info .idesc{margin-top:2px}
.zone{font:600 .64rem/1 var(--f-mono);padding:3px 6px;border-radius:4px;border:1px solid var(--a-line);color:var(--a-muted)}

.rc .row{align-items:flex-start;flex-direction:column;gap:2px}
.tag{font:600 .64rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--a-accent)}
.rc ol{margin:0;padding:10px 12px 12px 34px;border:1px solid var(--a-accent);border-top:0;border-radius:0 0 12px 12px;background:var(--a-surface);display:grid;gap:7px;font-size:.92rem}
.rc.open .row{border-color:var(--a-accent);border-radius:12px 12px 0 0}
.rc ol li::marker{font:700 .9rem var(--f-display);color:var(--a-accent)}
kbd{font:600 .78rem/1 var(--f-display);letter-spacing:.03em;padding:2px 6px;border-radius:5px;background:var(--a-body);color:var(--a-body-ink);border:1px solid var(--a-body-3);white-space:nowrap}

.sbox{display:flex;align-items:center;gap:8px;background:var(--a-surface);border:1px solid var(--a-line);border-radius:12px;padding:0 12px;margin-bottom:10px}
.sbox:focus-within{border-color:var(--a-accent)}
.sbox svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--a-muted);stroke-width:2}
.sbox input{flex:1;min-width:0;border:0;background:none;color:var(--a-ink);font:400 1rem var(--f-body);padding:11px 0;outline:none}
.qchips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.qchips button{border:1px solid var(--a-line);background:var(--a-surface-2);color:var(--a-ink);border-radius:999px;padding:5px 10px;font:500 .8rem/1 var(--f-body);cursor:pointer}
.count{font:400 .74rem/1 var(--f-mono);color:var(--a-muted);margin:0 2px 8px}
.kind{flex:none;font:600 .6rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--a-accent);width:62px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

@media (prefers-reduced-motion: reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ---------- PWA: a app ocupa o ecrã inteiro ---------- */
html,body{height:100%;margin:0}
body{background:var(--bg);overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
.app{position:fixed;top:0;bottom:0;left:0;right:0;margin:0 auto;max-width:560px;height:auto;border-radius:0}
@media (min-width:600px){.app{border-left:1px solid var(--line);border-right:1px solid var(--line)}}
.a-head{padding-top:calc(12px + env(safe-area-inset-top,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.a-main{padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px))}
.a-nav{padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);user-select:none;-webkit-user-select:none}

/* logótipo α7RII no cabeçalho: α7 II na cor do texto, R em vermelho (duas máscaras) */
.brand{position:relative;height:22px;aspect-ratio:488 / 119;flex:none}
.lg{position:absolute;inset:0;-webkit-mask:url(img/logo-white.png) center / contain no-repeat;mask:url(img/logo-white.png) center / contain no-repeat;background:var(--a-ink)}
.lg-r{-webkit-mask-image:url(img/logo-red.png);mask-image:url(img/logo-red.png);background:var(--logo-red)}
.app.red .lg-r{background:var(--a-ink)}
.brandrow{display:flex;align-items:flex-end;gap:9px;min-width:0}
.ver{font:500 .68rem/1 var(--f-mono);color:var(--a-muted);letter-spacing:.02em;white-space:nowrap;padding-bottom:1px;font-variant-numeric:tabular-nums}

/* aviso de nova versão, mostrado uma vez depois de uma atualização */
.toast{position:absolute;z-index:5;left:50%;transform:translateX(-50%);top:calc(60px + env(safe-area-inset-top,0px));display:flex;align-items:center;gap:10px;max-width:calc(100% - 32px);padding:9px 10px 9px 14px;border-radius:12px;border:1px solid var(--a-accent);background:var(--a-surface);color:var(--a-ink);font-size:.86rem;box-shadow:0 10px 30px -10px var(--shade)}
.toast b{color:var(--a-accent)}
.toast button{border:0;background:none;color:var(--a-muted);font:600 1rem/1 var(--f-body);padding:4px 6px;cursor:pointer}
button.ver{border:0;background:none;cursor:pointer;padding:6px 2px;margin:-6px 0 -5px;text-decoration:underline dotted;text-underline-offset:3px}
.toast.upd{align-items:flex-start;width:min(420px,calc(100% - 24px));max-width:none}
.upd-b{display:grid;gap:7px;line-height:1.35;min-width:0}
.upd-b small{font:500 .68rem/1.45 var(--f-mono);color:var(--a-muted)}
.toast .upd-go{justify-self:start;border:1px solid var(--a-accent);background:var(--a-accent);color:var(--a-accent-ink);border-radius:999px;padding:7px 14px;font:600 .82rem/1 var(--f-body)}

/* figuras do manual (frente, lados, base): desenho como máscara + números tocáveis */
.mfigs{display:grid;justify-items:center;gap:12px;padding:12px 10px;color:var(--a-ink)}
.mfig{margin:0;width:100%;max-width:100%}
.mfig-box{position:relative;width:100%}
.mimg{position:absolute;inset:0;background:currentColor;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.mfig figcaption{font:500 .7rem/1.3 var(--f-mono);color:var(--a-muted);margin-top:6px;text-align:center}
.spot{position:absolute;padding:0;border:0;background:none;border-radius:2px;cursor:pointer}
.spot::after{content:"";position:absolute;inset:-5px -8px}
.spot span{display:none}
.spot.on{background:var(--a-accent);box-shadow:0 0 0 2px var(--a-accent)}
.spot{container-type:size}
.spot.on span{display:grid;place-items:center;position:absolute;inset:0;color:var(--a-accent-ink);font:700 9px/1 var(--f-body);font-size:max(8px,70cqh)}
.spot:focus-visible{outline:2px solid var(--a-ink);outline-offset:2px}
.num.nn{background:var(--a-surface-2);color:var(--a-muted)}
.segs.figmode{margin:-4px 0 14px}
.segs.figmode .seg{font-size:.74rem;padding:7px 8px}

/* calculadora NPF dentro da receita das estrelas */
.rc.withcalc ol{border-radius:0;border-bottom:0}
.npf{padding:10px 12px 12px;border:1px solid var(--a-accent);border-top:1px dashed var(--a-line);border-radius:0 0 12px 12px;background:var(--a-surface)}
.npf-t{margin:0 0 8px;font:600 .66rem/1.2 var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--a-accent)}
.npf-row{display:flex;flex-wrap:wrap;gap:10px}
.npf label{display:grid;gap:4px;font:600 .66rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--a-muted)}
.npf input,.npf select{font:500 1rem var(--f-body);color:var(--a-ink);background:var(--a-bg);border:1px solid var(--a-line);border-radius:8px;padding:7px 9px;width:120px}
.npf-out{margin:10px 0 0;font-size:.95rem}
.npf-out b{font:700 1.4rem/1 var(--f-display);color:var(--a-accent);font-variant-numeric:tabular-nums}
.credits{margin:20px 2px 4px;font-size:.76rem;line-height:1.45;color:var(--a-muted)}