/* ============================================================
   SOPHI — Simulador Educacional
   css/sophi.css — a TELA do aparelho (fidelidade à imagem de
   referência + figuras do IFU 1401-0160-001-21, seção 6.1)
   ============================================================ */

:root {
  /* Paleta extraída da imagem de referência do dashboard */
  --scr-bg: #05080a;          /* fundo geral / gaps entre painéis */
  --panel: #10171c;           /* painel quase-preto com tom azul-esverdeado */
  --panel-2: #0c1216;         /* painéis passivos (centro/pedal) */
  --set: #c6d92e;             /* AMARELO-LIMA: setpoints (valores programados) */
  --act: #f2f5f5;             /* BRANCO: valores reais (performance atual) */
  --spc: #5bc2e7;             /* AZUL-CLARO: funções especiais (OCCLUSION/TRIGGER/Override/Dynamic) */
  --txt: #dfe6e8;             /* títulos de painel */
  --txt-dim: #8a979e;         /* unidades, rótulos secundários */
  --txt-faint: #55626a;       /* desabilitado */
  --tab-on: #1c7f96;          /* aba ativa (teal) */
  --tab-off: #161d22;         /* aba inativa */
  --line: #2a343b;            /* réguas/bordas sutis */
  --btn-ring: #b7c2c7;        /* borda dos botões circulares − + */
  --bar-track: #060a0c;       /* trilho das barras */
  --warn: #e6a23c;
  --err: #e05252;
  --ok: #35c46f;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  background: #1b2126;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--txt);
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ============ Disposição geral do app ============
   Coluna única: o aparelho é o protagonista. O painel do
   professor é uma gaveta retrátil (css/edu.css). */
.app {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-areas: "simbar" "stage";
  height: 100dvh;
}
.simbar { grid-area: simbar; }
.stage {
  grid-area: stage;
  display: grid;
  grid-template-rows: 1fr auto;
  min-width: 0; min-height: 0;
  padding: clamp(6px, 1.2vw, 18px);
  gap: clamp(6px, 1vw, 12px);
}

body.focus-mode .edu, body.focus-mode .pedal-dock, body.focus-mode .edu-handle { display: none; }

/* ============ Monitor (moldura física) ============ */
.monitor {
  align-self: center;
  justify-self: center;
  width: min(100%, calc((100dvh - 220px) * 1.62));
  background: linear-gradient(180deg, #e8eaeb 0%, #d5d9db 60%, #c4c9cc 100%);
  border-radius: clamp(8px, 1.2cqw, 18px);
  padding: clamp(5px, 0.65vw, 12px);
  box-shadow: 0 18px 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.7);
  position: relative;
  min-width: 0;
}
/* LED de status no braço do display (IFU 6.1.12, Table 11) */
.monitor::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -3px;
  transform: translateX(-50%);
  width: 18%; height: 5px;
  border-radius: 4px;
  background: var(--led, #ffffff);
  box-shadow: 0 0 12px 2px var(--led, #ffffff);
  opacity: var(--led-on, .85);
  transition: background .3s;
}
.monitor.led-blink::after { animation: ledblink var(--led-period, 1s) steps(1) infinite; }
@keyframes ledblink { 0% { opacity: .95; } 40% { opacity: .08; } 100% { opacity: .08; } }

/* ============ A TELA ============ */
.screen {
  aspect-ratio: 16 / 10;
  background: var(--scr-bg);
  border-radius: clamp(4px, 0.6cqw, 10px);
  overflow: hidden;
  display: grid;
  grid-template-rows: 6.2% 8.2% 1fr 7.4%;
  container-type: size;
  container-name: screen;
  position: relative;
  font-size: 2cqw;
  cursor: default;
}

/* ---------- HEADER (IFU 6.1.9, Fig. 17) ---------- */
.hdr {
  display: flex;
  align-items: center;
  gap: 2.2cqw;
  padding: 0 1.6cqw;
  background: #000;
  font-size: 1.55cqw;
  color: #cfd8dc;
}
.hdr .surgeon {
  display: flex; align-items: center; gap: .7cqw;
  cursor: pointer;
  white-space: nowrap;
}
.hdr .surgeon .chev { color: var(--txt-dim); font-size: 1.3cqw; letter-spacing: -0.2cqw; }
.hdr .spacer { flex: 1; }
.hdr .stat {
  display: grid;
  grid-template-rows: auto auto auto;
  justify-items: center;
  align-content: center;
  gap: .12cqw;
  font-size: .85cqw;
  color: var(--txt-dim);
  line-height: 1;
  max-height: 100%;
  overflow: hidden;
}
.hdr .stat .lbl { font-size: .85cqw; letter-spacing: .05cqw; }
.hdr .batt {
  width: 3.8cqw; height: 1.15cqw;
  border: 1px solid #6b7880;
  border-radius: .25cqw;
  position: relative;
  padding: .14cqw;
}
.hdr .batt::after {
  content: ""; position: absolute; right: -0.5cqw; top: 28%;
  width: .35cqw; height: 44%; background: #6b7880; border-radius: 0 .15cqw .15cqw 0;
}
.hdr .batt .fill { height: 100%; background: var(--ok); border-radius: .12cqw; }
.hdr .batt.low .fill { background: var(--warn); }
.hdr .bt { font-size: 1.1cqw; color: var(--ok); }
.hdr .clock { text-align: right; font-size: 1.5cqw; color: #cfd8dc; }
.hdr .clock .sw { display: block; font-size: 1.05cqw; color: var(--txt-dim); text-align: right; }

/* ---------- ABAS de função/programa (Fig. 3, área 2) ---------- */
.tabs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .35cqw;
  padding: .45cqw .45cqw 0 .45cqw;
  background: var(--scr-bg);
}
.tab {
  border: 0;
  background: var(--tab-off);
  color: var(--txt-dim);
  font: inherit;
  font-size: 1.75cqw;
  letter-spacing: .06cqw;
  border-radius: .35cqw .35cqw 0 0;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.tab.on { background: var(--tab-on); color: #fff; font-weight: 600; }
.tab:not(.on):hover { background: #1d262c; color: #b8c4ca; }

/* ---------- GRADE 2×3 de painéis (Fig. 3, área 3) ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: .45cqw;
  padding: .45cqw;
  min-height: 0;
}
.panel {
  background: linear-gradient(180deg, #121a20 0%, var(--panel) 55%, #0d1418 100%);
  border-radius: .4cqw;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.1cqw 1.4cqw 1cqw;
  min-height: 0;
  overflow: hidden;
}
.panel.passive { background: var(--panel-2); }
.panel .menu-btn {
  position: absolute;
  top: .8cqw; right: 1cqw;
  width: 2.3cqw; height: 2cqw;
  background: none; border: 0; cursor: pointer;
  display: grid; gap: .32cqw; align-content: center;
  padding: 0 .2cqw;
}
.panel .menu-btn span { height: .28cqw; background: #7d8a91; border-radius: .15cqw; }
.panel .menu-btn:hover span { background: #b6c2c8; }

/* Cabeçalho do painel: título + valor especial azul */
.p-head {
  display: flex;
  align-items: baseline;
  gap: 1cqw;
  padding-right: 3cqw;
  min-height: 2.6cqw;
}
.p-title { font-size: 1.85cqw; font-weight: 600; color: var(--txt); white-space: nowrap; }
.p-spc {
  margin-left: auto;
  color: var(--spc);
  font-size: 1.5cqw;
  display: flex; align-items: baseline; gap: .5cqw;
  white-space: nowrap;
  cursor: pointer;
}
.p-spc .v { font-size: 2.2cqw; font-weight: 600; }
.p-spc .u { font-size: 1.1cqw; line-height: 1; text-align: left; }
.p-spc.edit .v { color: #aee3f7; text-shadow: 0 0 .8cqw rgba(91,194,231,.6); }
.p-spc.hidden { visibility: hidden; }
/* Setpoints do canto que NÃO são função especial (ex.: Low da diatermia) */
.p-spc.lime { color: var(--set); }
.p-spc.lime.edit .v { color: #e4f38a; text-shadow: 0 0 .8cqw rgba(198,217,46,.6); }

/* Barra horizontal fina (trilho + atual + marcadores) */
.p-bar {
  height: 1cqw;
  background: var(--bar-track);
  border-radius: .2cqw;
  position: relative;
  margin: .55cqw 0 .3cqw;
  overflow: visible;
}
.p-bar .fill {
  position: absolute; inset: 0 auto 0 0;
  width: 0%;
  background: var(--act);
  border-radius: .2cqw;
  transition: width .06s linear;
}
.p-bar .tick {
  position: absolute; top: -0.35cqw; bottom: -0.35cqw;
  width: .45cqw; border-radius: .15cqw;
  transform: translateX(-50%);
}
.p-bar .tick.set { background: var(--set); }
.p-bar .tick.spc { background: var(--spc); }

/* Corpo do painel: valor grande */
.p-body {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  min-height: 0;
}
.p-side { display: flex; flex-direction: column; gap: .55cqw; }

.big {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: .6cqw;
  cursor: pointer;
  line-height: .9;
}
.big .v {
  font-size: 6.4cqw;
  font-weight: 600;
  color: var(--set);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.1cqw;
}
.big .u {
  font-size: 1.35cqw;
  color: var(--txt-dim);
  display: grid;
  line-height: 1.05;
  text-align: left;
}
.big.actual .v { color: var(--act); }
.big.blue .v { color: var(--spc); }
.big.edit .v { text-shadow: 0 0 1.2cqw rgba(198,217,46,.55); }
/* Valor real (branco) tocado exibe-se na cor de setpoint por 2 s (IFU 6.1.2) */
.big.actual.edit .v { color: var(--set); }
.big .sub {
  font-size: 1.35cqw; color: var(--txt-dim);
  font-variant-numeric: tabular-nums;
}

/* Setpoint pequeno (laranja/lima) exibido junto ao valor real quando ativo */
.mini-set {
  font-size: 1.9cqw; color: var(--set); font-weight: 600;
  font-variant-numeric: tabular-nums;
  align-self: flex-start;
}

/* EPT (Effective Phaco Time) */
.ept {
  font-size: 1.35cqw;
  color: var(--txt-dim);
  text-align: right;
  font-variant-numeric: tabular-nums;
  margin-top: -0.4cqw;
}

/* Botões − / + circulares */
.p-ctl {
  display: flex;
  align-items: center;
  gap: 2.2cqw;
  justify-content: center;
  padding-top: .4cqw;
}
.rbtn {
  width: 3.4cqw; height: 3.4cqw;
  border-radius: 50%;
  border: .18cqw solid var(--btn-ring);
  background: transparent;
  color: var(--btn-ring);
  font-size: 2.2cqw;
  line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background .1s, transform .05s;
  touch-action: manipulation;
}
.rbtn:hover { background: rgba(255,255,255,.07); }
.rbtn:active { transform: scale(.93); background: rgba(255,255,255,.14); }
.rbtn:disabled { opacity: .25; cursor: default; }

/* Botões de modulação CONT / PULSE / BURST (Fig. 4/5) */
.mods { display: flex; flex-direction: column; gap: .55cqw; }
.mod {
  min-width: 7.2cqw;
  padding: .4cqw 1cqw;
  border: .14cqw solid #45525a;
  border-radius: .35cqw;
  background: transparent;
  color: var(--txt-faint);
  font: inherit; font-size: 1.35cqw; letter-spacing: .08cqw;
  cursor: pointer;
  text-align: center;
}
.mod.on { border-color: #dfe6e8; color: #eef3f4; font-weight: 600; }
.mod:hover:not(.on) { border-color: #6b7880; color: #9aa7ad; }

/* Botões retangulares vazados (PRIME / TEST / OCCLUSION / IRR / CONT IRR) */
.obtn {
  min-width: 11cqw;
  padding: .55cqw 1.6cqw;
  border: .14cqw solid #566269;
  border-radius: .35cqw;
  background: transparent;
  color: #aeb9bf;
  font: inherit; font-size: 1.5cqw; letter-spacing: .12cqw;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: border-color .15s, color .15s;
}
.obtn:hover { border-color: #8a979e; color: #d5dde0; }
.obtn.on { border-color: #eef3f4; color: #ffffff; font-weight: 600; }
.obtn.blue { border-color: var(--spc); color: var(--spc); }
.obtn:disabled { opacity: .3; cursor: default; }
.obtn.small { min-width: 6.4cqw; padding: .3cqw .8cqw; font-size: 1.15cqw; }

/* Painel central inferior: PRIME/TEST/OCCLUSION + Step Mode (Fig. 20) */
.center-stack {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3cqw;
}
.center-stack .col { display: flex; flex-direction: column; gap: 1cqw; align-items: center; }
.stepmode { display: flex; flex-direction: column; align-items: center; gap: .5cqw; font-size: 1.5cqw; }
.stepmode .sm-prev, .stepmode .sm-next { color: var(--txt-faint); font-size: 1.35cqw; }
.stepmode .sm-cur { color: #fff; font-weight: 600; font-size: 1.7cqw; }
.stepmode .rbtn { width: 3cqw; height: 3cqw; }

/* Contagem do PRIME */
.prime-timer {
  font-variant-numeric: tabular-nums;
  color: var(--spc);
  font-size: 1.6cqw;
  text-align: center;
}

/* ---------- Pedal (painel inferior direito, Fig. 8) ---------- */
.pedal-viz { flex: 1; display: grid; place-items: center; min-height: 0; }
.pedal-viz svg { width: 82%; height: 92%; }
.pedal-viz .rocker { fill: none; stroke: #5b686f; stroke-width: 2; }
.pedal-viz .rocker.hit { fill: #eef3f4; stroke: #eef3f4; }
.pedal-viz .body-out { fill: none; stroke: #b9c4c9; stroke-width: 2.5; }
.pedal-viz .body-in { fill: none; stroke: #eef3f4; stroke-width: 3.5; }
.pedal-viz .fan line { stroke: #5b686f; stroke-width: 2; }
.pedal-viz .fan line.cur { stroke: #eef3f4; stroke-width: 3; }
.pedal-viz .fan circle { fill: #9aa7ad; }
.pedal-viz .reflux-ind { fill: var(--spc); opacity: 0; }
.pedal-viz .reflux-ind.on { opacity: 1; }

/* ---------- FOOTER (IFU 6.1.10, Fig. 18) ---------- */
.ftr {
  display: grid;
  grid-template-columns: 1fr auto auto 1fr;
  align-items: center;
  background: #000;
  padding: 0 3cqw;
  gap: 6cqw;
}
.fbtn {
  background: none; border: 0;
  color: #cfd8dc;
  font: inherit; font-size: 1.75cqw; letter-spacing: .18cqw;
  cursor: pointer;
  padding: .6cqw 1cqw;
}
.fbtn:hover { color: #fff; }
.fbtn.dim { color: #55626a; }
.fbtn#fSave { justify-self: start; }
.fbtn#fEnd { justify-self: end; }
.fbtn .ico { font-size: 2cqw; }

/* ---------- Overlays na tela (parameter settings — Fig. 6/7/19/23/24) ---------- */
.ovl {
  position: absolute;
  inset: 0;
  background: rgba(2, 5, 7, .72);
  display: grid;
  place-items: center;
  z-index: 30;
}
.ovl .sheet {
  background: #0e1519;
  border: 1px solid #232d33;
  border-radius: .5cqw;
  padding: 2.2cqw 2.6cqw;
  min-width: 34cqw;
  max-width: 58cqw;
  max-height: 88cqh;
  overflow: auto;
  position: relative;
  box-shadow: 0 12px 40px rgba(0,0,0,.6);
}
.ovl .close {
  position: absolute; top: 1cqw; right: 1cqw;
  width: 2.8cqw; height: 2.8cqw;
  border-radius: 50%;
  border: .14cqw solid #8a979e;
  background: none; color: #cfd8dc;
  font-size: 1.6cqw; cursor: pointer;
  display: grid; place-items: center;
}
.ovl h3 { font-size: 2cqw; font-weight: 600; margin-bottom: 1.6cqw; color: #eef3f4; }
.ovl .row {
  display: flex; align-items: center; gap: 1.6cqw;
  margin-bottom: 1.2cqw;
  font-size: 1.55cqw; color: #b8c4ca;
}
.ovl .row .lbl { min-width: 13cqw; }
.ovl .choice {
  display: flex; flex-direction: column; gap: .5cqw;
}
.ovl .choice.h { flex-direction: row; }
.ovl .chip {
  min-width: 9.5cqw;
  padding: .45cqw 1.2cqw;
  border: .14cqw solid #45525a;
  border-radius: .3cqw;
  background: transparent;
  color: var(--txt-faint);
  font: inherit; font-size: 1.4cqw;
  cursor: pointer; text-align: center;
}
.ovl .chip.on { border-color: #eef3f4; color: #eef3f4; font-weight: 600; }
.ovl .num { color: var(--set); font-size: 1.8cqw; font-weight: 600; }
.ovl .num.blue { color: var(--spc); }
.ovl .hint { font-size: 1.2cqw; color: var(--txt-faint); margin-top: 1cqw; }
.ovl .modgroup { border-top: 1px solid var(--line); margin-top: 1.4cqw; padding-top: 1.2cqw; }
.ovl .modgroup .cap { font-size: 1.2cqw; color: var(--spc); letter-spacing: .1cqw; margin-bottom: .8cqw; }
.ovl .stack { display: flex; gap: 2cqw; align-items: flex-start; }
.ovl .kv { display: grid; grid-template-columns: auto auto; gap: .3cqw 1cqw; font-size: 1.4cqw; align-content: start; }
.ovl .kv .k { color: var(--txt-dim); }
.ovl .kv .v { color: var(--set); font-weight: 600; cursor: pointer; }
.ovl .kv .v.sel { outline: .14cqw solid var(--set); outline-offset: .2cqw; border-radius: .15cqw; }
.ovl .pm { display: flex; gap: 1.6cqw; justify-content: center; margin-top: 1.6cqw; }

/* Step Mode settings (Fig. 19) */
.steps-list { display: grid; gap: .55cqw; }
.steps-list .srow {
  display: grid; grid-template-columns: 3cqw 1fr 3cqw;
  align-items: center; gap: 1cqw;
  font-size: 1.5cqw; text-align: center;
}
.steps-list .srow .name { color: #eef3f4; }
.steps-list .srow .name.free { color: var(--txt-faint); }
.steps-list .cap { text-align: center; color: var(--txt-faint); font-size: 1.3cqw; }

/* Settings (engrenagem — Fig. 7) */
.set-row {
  display: grid;
  grid-template-columns: 12cqw 1fr auto;
  gap: 1.4cqw;
  align-items: center;
  font-size: 1.4cqw;
  color: #b8c4ca;
  margin-bottom: 1cqw;
}
.tgl {
  width: 5cqw; height: 1.9cqw;
  border-radius: 1cqw;
  background: #22303a;
  border: 0; cursor: pointer;
  position: relative;
}
.tgl::after {
  content: ""; position: absolute; top: .18cqw; left: .2cqw;
  width: 1.5cqw; height: 1.5cqw; border-radius: 50%;
  background: #7d8a91;
  transition: left .15s, background .15s;
}
.tgl.on { background: #14506b; }
.tgl.on::after { left: 3.2cqw; background: var(--spc); }
.slider { -webkit-appearance: none; appearance: none; width: 12cqw; height: .5cqw; border-radius: .25cqw; background: #22303a; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: #cfd8dc; cursor: pointer; }

/* ---------- Alarmes: banners inferiores (IFU cap. 8, Fig. 39–42)
   ERROR = vermelho (texto branco), WARNING = amarelo (texto escuro),
   MESSAGE = cinza-azulado (texto claro). Prefixo "ERROR <nº>:" em
   negrito + mensagem; botão "ok" à direita quando aplicável. ---------- */
.banners {
  position: absolute;
  left: 1.2%; right: 1.2%;
  bottom: 8.4%;                 /* logo acima do footer */
  display: flex; flex-direction: column; gap: .5cqw;
  z-index: 40;
}
.banner {
  display: flex; align-items: center; gap: 1.6cqw;
  padding: .8cqw 1.6cqw;
  border-radius: .25cqw;
  font-size: 1.55cqw;
  box-shadow: 0 6px 24px rgba(0,0,0,.5);
  animation: slidein .22s ease-out;
}
.banner .pfx { font-weight: 700; white-space: nowrap; }
.banner .msg { flex: 1; }
.banner.error, .banner.error-ok { background: #b3261e; color: #fff; }
.banner.warning { background: #e6b23c; color: #131313; }
.banner.message { background: #37444d; color: #eef3f4; }
.banner .okb {
  background: none;
  border: .14cqw solid currentColor;
  border-radius: .3cqw;
  color: inherit;
  font: inherit; font-size: 1.35cqw;
  padding: .25cqw 1.4cqw;
  cursor: pointer;
}
@keyframes slidein { from { opacity: 0; transform: translateY(1cqw); } }

/* Símbolo azul de garrafa BSS baixa (IFU 6.1.15) */
.bss-low {
  position: absolute;
  top: 9%; right: 2%;
  width: 3.4cqw; height: 4.4cqw;
  color: var(--spc);
  z-index: 35;
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .35; } }

/* Vídeo-inlay placeholder / tela desligada */
.screen.off .hdr, .screen.off .tabs, .screen.off .grid, .screen.off .ftr { visibility: hidden; }
.screen .boot {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: #05080a;
  z-index: 50;
  color: #3a7bbf;
}
.screen .boot .logo { font-size: 7cqw; font-weight: 700; letter-spacing: .1cqw; color: #2f7fd6; }
.screen .boot .logo small { display: block; font-size: 1.6cqw; color: var(--txt-dim); font-weight: 400; letter-spacing: .3cqw; }
.screen .boot .prog {
  width: 26cqw; height: .5cqw; margin-top: 2.4cqw;
  background: #101820; border-radius: .25cqw; overflow: hidden;
}
.screen .boot .prog .b { height: 100%; width: 0; background: #2f7fd6; transition: width .2s; }
.screen .boot .st { margin-top: 1cqw; font-size: 1.3cqw; color: var(--txt-dim); }

/* ============================================================
   MOTION — suave e "de aparelho de verdade" (transições curtas,
   easing físico, nada de saltos). Desligado automaticamente com
   prefers-reduced-motion (ver css/edu.css).
   ============================================================ */

/* Entrada dos painéis ao trocar de função/programa (com stagger) */
.grid.anim .panel {
  animation: panelin .34s cubic-bezier(.2, .85, .3, 1) backwards;
}
.grid.anim .panel:nth-child(2) { animation-delay: .04s; }
.grid.anim .panel:nth-child(3) { animation-delay: .08s; }
.grid.anim .panel:nth-child(4) { animation-delay: .06s; }
.grid.anim .panel:nth-child(5) { animation-delay: .10s; }
.grid.anim .panel:nth-child(6) { animation-delay: .14s; }
@keyframes panelin {
  from { opacity: 0; transform: translateY(1.2cqw) scale(.985); }
}

/* Marcadores das barras deslizam ao ajustar setpoint */
.p-bar .tick { transition: left .18s cubic-bezier(.2, .85, .3, 1); }

/* Valor grande dá um "pulso" quando ajustado (±) */
.big .v { transition: color .15s; }
.big .v.bump { animation: bump .22s cubic-bezier(.2, .85, .3, 1.2); }
@keyframes bump { 40% { transform: scale(1.07); } }
.p-spc .v.bump { animation: bump .22s cubic-bezier(.2, .85, .3, 1.2); }

/* Overlays de parâmetros surgem como no touchscreen real */
.ovl { animation: ovlin .18s ease-out; }
@keyframes ovlin { from { opacity: 0; } }
.ovl .sheet { animation: sheetin .24s cubic-bezier(.2, .9, .3, 1.1); }
@keyframes sheetin { from { opacity: 0; transform: translateY(1cqw) scale(.96); } }

/* SAVE? chama atenção suavemente quando há mudanças não salvas */
.fbtn#fSave:not(.dim) { animation: savepulse 2.2s ease-in-out infinite; }
@keyframes savepulse { 50% { color: #ffffff; text-shadow: 0 0 1cqw rgba(255,255,255,.45); } }

/* Abas: transição de cor já definida; adiciona leve escala ao ativar */
.tab.on { animation: tabon .2s ease-out; }
@keyframes tabon { from { transform: scale(.97); } }

/* Boot: logo respira enquanto o selftest roda */
.screen .boot .logo { animation: bootbreathe 2.4s ease-in-out infinite; }
@keyframes bootbreathe { 50% { opacity: .75; } }
.screen .boot .prog .b { transition: width .3s cubic-bezier(.2, .8, .4, 1); }

/* Banners saem deslizando */
.banner.out { animation: slideout .2s ease-in forwards; }
@keyframes slideout { to { opacity: 0; transform: translateY(1cqw); } }