:root{
  --bg-void:#050705;
  --bg-panel:#0a120c;
  --phosphor:#3dff7a;
  --phosphor-dim:#12522c;
  --phosphor-faint:#0c2c1a;
  --amber:#ffb627;
  --gold:#ffd23f;
  --alert:#ff4444;
  --bezel-1:#1b1d1c;
  --bezel-2:#0d0e0d;
  --glass:#040b06;
}

*{box-sizing:border-box;}
html,body{
  margin:0;padding:0;height:100%;
  background:#000;
  font-family:'Space Mono',monospace;
  color:var(--phosphor);
  overflow-x:hidden;
}

.stage{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:radial-gradient(ellipse at 50% 20%, #0d1410 0%, #000 70%);
}

.monitor{
  position:relative;
  width:100%;
  max-width:900px;
  background:linear-gradient(160deg,var(--bezel-1),var(--bezel-2) 70%);
  border-radius:28px;
  padding:26px 26px 34px;
  box-shadow:0 30px 60px rgba(0,0,0,.7), inset 0 0 0 1px #2b2d2b, inset 0 2px 4px rgba(255,255,255,.04);
}
.monitor::before{
  content:"CRONOBOY  ·  UNIDADE DE ANÁLISE TEMPORAL  ·  MOD. LC-83";
  position:absolute;
  top:6px; left:50%; transform:translateX(-50%);
  font-family:'Press Start 2P',monospace;
  font-size:7px;
  letter-spacing:2px;
  color:#4a4d4a;
}
.brand-plate{ display:flex; justify-content:space-between; align-items:center; padding:0 6px 14px; }
.brand-plate .logo{ font-family:'Press Start 2P',monospace; font-size:13px; color:#8f938f; letter-spacing:1px; }
.brand-plate .logo span{ color:var(--amber); }
.led-row{ display:flex; gap:8px; align-items:center; }
.led{ width:8px;height:8px;border-radius:50%; background:#2a2e2a; box-shadow:inset 0 0 2px #000; }
.led.on{ background:var(--phosphor); box-shadow:0 0 6px var(--phosphor), 0 0 2px var(--phosphor); }
.led.on.amber{ background:var(--amber); box-shadow:0 0 6px var(--amber); }
.led.on.alert{ background:var(--alert); box-shadow:0 0 6px var(--alert); }

.screen-frame{
  background:#000;
  border-radius:14px;
  padding:4px;
  box-shadow:inset 0 0 0 2px #1a1c1a, inset 0 0 30px rgba(0,0,0,.9);
}
.screen{
  position:relative;
  background:radial-gradient(ellipse at 50% 0%, #0a1a10 0%, var(--glass) 60%);
  border-radius:10px;
  overflow:hidden;
  min-height:600px;
  padding:18px 20px 16px;
  display:flex;
  flex-direction:column;
  gap:14px;
  filter:contrast(1.08) brightness(1.02);
}
.screen::before{
  content:"";
  position:absolute; inset:0;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 1px, rgba(0,0,0,.28) 2px, rgba(0,0,0,.28) 3px);
  pointer-events:none;
  mix-blend-mode:multiply;
  z-index:8;
}
.screen::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0,0,0,.65) 100%);
  pointer-events:none;
  z-index:9;
}
.flicker{ animation:flicker 6.4s infinite; }
@keyframes flicker{ 0%,96%,100%{opacity:1;} 97%{opacity:.86;} 98%{opacity:1;} 99%{opacity:.9;} }

/* ---- fundo de circuito animado: dá a sensação de "máquina viva" mesmo
   parada, e reage quando o Cronoboy está falando ---- */
.circuit-bg{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; opacity:.28; pointer-events:none;
  transition:opacity .4s ease, filter .4s ease;
}
.circuit-bg .trace{
  fill:none; stroke:var(--phosphor-dim); stroke-width:.6;
  stroke-dasharray:5 4; animation:circuitFlow 7s linear infinite;
}
.circuit-bg .trace-b{ stroke:var(--phosphor-faint); animation-duration:10s; animation-direction:reverse; }
.circuit-bg .trace-c{ stroke:var(--amber); opacity:.45; animation-duration:13s; }
@keyframes circuitFlow{ to{ stroke-dashoffset:-90; } }
.circuit-bg .node{
  fill:var(--phosphor); transform-box:fill-box; transform-origin:center;
  animation:nodePulse 3.6s ease-in-out infinite;
}
.circuit-bg .node-b{ fill:var(--amber); animation-delay:1.1s; animation-duration:4.4s; }
.circuit-bg .node-c{ fill:var(--gold); animation-delay:2.1s; animation-duration:5.1s; }
@keyframes nodePulse{ 0%,100%{ opacity:.2; transform:scale(1); } 50%{ opacity:1; transform:scale(1.8); } }

/* estado "falando": o fundo vivo se intensifica, o olho pulsa mais rápido e
   os anéis ganham um brilho pulsante — a máquina reage à própria voz */
.screen.speaking .circuit-bg{ opacity:.6; filter:brightness(1.3) saturate(1.3); }
.screen.speaking .core .pupil{ animation-duration:.5s; }
.screen.speaking .ring{ animation:ringGlow 1.1s ease-in-out infinite; }
@keyframes ringGlow{ 0%,100%{ box-shadow:none; border-color:var(--phosphor-faint); } 50%{ box-shadow:0 0 12px var(--phosphor); border-color:var(--phosphor); } }

/* blip: um pulso curto no núcleo a cada "palavra" sintetizada */
.core.blip svg{ animation:coreBlip .18s ease-out; }
@keyframes coreBlip{ 0%{ filter:drop-shadow(0 0 2px var(--phosphor)); } 40%{ filter:drop-shadow(0 0 14px var(--phosphor)) brightness(1.6); } 100%{ filter:drop-shadow(0 0 2px var(--phosphor)); } }

.statusbar{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:13px; letter-spacing:1px; color:var(--phosphor-dim);
  border-bottom:1px solid var(--phosphor-faint); padding-bottom:8px; z-index:2;
}
.statusbar .id{ color:var(--phosphor); text-shadow:0 0 6px var(--phosphor); }
.statusbar .state-tag{ padding:2px 8px; border:1px solid currentColor; border-radius:2px; font-size:11px; }
.statusbar .state-tag.alert-tag{ color:var(--alert); }
.statusbar .state-tag.amber-tag{ color:var(--amber); }
.statusbar .state-tag.gold-tag{ color:var(--gold); }
.statusbar .clock{ font-variant-numeric:tabular-nums; }

.viewport{
  position:relative; flex:1; min-height:260px;
  display:flex; align-items:center; justify-content:center; z-index:2;
}

.scan-stage{ position:relative; width:250px; height:250px; }

.photo-preview{
  position:absolute; inset:0;
  border-radius:50%;
  overflow:hidden;
  background:#020402;
  box-shadow:inset 0 0 0 1px var(--phosphor-faint);
}
.photo-preview img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:grayscale(1) brightness(0.9) contrast(1.3) sepia(1) hue-rotate(60deg) saturate(4);
  opacity:0;
  transition:opacity .5s ease;
}
.photo-preview img.live{ opacity:.85; }

.ring{ position:absolute; inset:0; border-radius:50%; border:1px solid var(--phosphor-faint); pointer-events:none; }
.ring.r2{ inset:24px; }
.ring.r3{ inset:48px; }

.crosshair{ position:absolute; inset:0; pointer-events:none; }
.crosshair::before,.crosshair::after{ content:""; position:absolute; background:var(--phosphor-faint); }
.crosshair::before{ left:0; right:0; top:50%; height:1px; }
.crosshair::after{ top:0; bottom:0; left:50%; width:1px; }

.sweep{
  position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg, rgba(61,255,122,.55), transparent 30%);
  animation:spin 2.6s linear infinite;
  opacity:0; transition:opacity .3s; pointer-events:none;
}
@keyframes spin{ to{ transform:rotate(360deg);} }

.pulse-ring{
  position:absolute; inset:0;
  border-radius:50%;
  border:1px solid var(--phosphor);
  pointer-events:none;
  opacity:0;
  animation:sonarPulse 3.2s ease-out infinite;
}
.pulse-ring.pr2{ animation-delay:1.06s; }
.pulse-ring.pr3{ animation-delay:2.13s; }
@keyframes sonarPulse{
  0%{ transform:scale(.55); opacity:.65; border-width:2px; }
  70%{ opacity:.12; }
  100%{ transform:scale(1.05); opacity:0; border-width:1px; }
}

.reticle{ position:absolute; inset:30px; pointer-events:none; opacity:0; transition:opacity .4s ease; }
.reticle.show{ opacity:1; }
.reticle .corner{ position:absolute; width:18px; height:18px; border:2px solid var(--phosphor); filter:drop-shadow(0 0 4px var(--phosphor)); }
.reticle .tl{ top:0; left:0; border-right:none; border-bottom:none; }
.reticle .tr{ top:0; right:0; border-left:none; border-bottom:none; }
.reticle .bl{ bottom:0; left:0; border-right:none; border-top:none; }
.reticle .br{ bottom:0; right:0; border-left:none; border-top:none; }
.reticle.locked .corner{ border-color:var(--gold); filter:drop-shadow(0 0 6px var(--gold)); }
.reticle.error .corner{ border-color:var(--alert); filter:drop-shadow(0 0 6px var(--alert)); }

.core{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:60px; height:60px; display:flex; align-items:center; justify-content:center; z-index:1;
}
.core svg{ width:100%; height:100%; }
.core .pupil{ transform-origin:32px 32px; animation:pulse 2.2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.12); opacity:.75; } }

.item-slot{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:50px; filter:drop-shadow(0 0 10px var(--phosphor));
  opacity:0; transition:opacity .5s ease; z-index:4;
}

.scanbar{
  position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg, transparent, var(--phosphor), transparent);
  box-shadow:0 0 10px var(--phosphor);
  opacity:0; z-index:3;
}
.scanbar.active{ animation:scanpass 1.8s linear infinite; opacity:1; }
@keyframes scanpass{ 0%{ top:6%; } 50%{ top:94%; } 100%{ top:6%; } }

.glitch-flash{
  position:absolute; inset:0; background:var(--phosphor);
  opacity:0; pointer-events:none; z-index:10; mix-blend-mode:overlay;
}
.glitch-flash.play{ animation:gflash .35s steps(2,end); }
.glitch-flash.alert{ background:var(--alert); }
@keyframes gflash{ 0%{ opacity:0; } 30%{ opacity:.5; } 60%{ opacity:0; } 80%{ opacity:.25; } 100%{ opacity:0; } }

.waveform{ display:flex; align-items:flex-end; gap:4px; height:56px; opacity:0; transition:opacity .3s ease; }
.waveform span{
  width:5px; background:var(--phosphor); box-shadow:0 0 6px var(--phosphor);
  border-radius:2px; animation:bar 1s ease-in-out infinite;
}
.waveform span:nth-child(1){ animation-delay:.0s; }
.waveform span:nth-child(2){ animation-delay:.1s; }
.waveform span:nth-child(3){ animation-delay:.2s; }
.waveform span:nth-child(4){ animation-delay:.3s; }
.waveform span:nth-child(5){ animation-delay:.4s; }
.waveform span:nth-child(6){ animation-delay:.5s; }
.waveform span:nth-child(7){ animation-delay:.15s; }
@keyframes bar{ 0%,100%{ height:10px; } 50%{ height:48px; } }

.process-row{ z-index:2; display:flex; flex-direction:column; gap:6px; opacity:0; transition:opacity .3s ease; }
.process-row .caption{
  font-family:'VT323',monospace; font-size:17px; letter-spacing:.5px;
  color:var(--amber); text-shadow:0 0 4px rgba(255,182,39,.5); min-height:22px;
}
.process-row .track{ height:10px; background:var(--phosphor-faint); border-radius:5px; overflow:hidden; position:relative; }
.process-row .fill{
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--phosphor-dim),var(--phosphor));
  box-shadow:0 0 8px var(--phosphor);
  transition:width .3s linear;
}
.process-row .pct-line{ display:flex; justify-content:space-between; font-size:11px; letter-spacing:1px; color:var(--phosphor-dim); }

.console{
  z-index:2; min-height:100px;
  border-top:1px solid var(--phosphor-faint); padding-top:10px;
  font-family:'VT323', monospace; font-size:19px; line-height:1.35;
  color:var(--phosphor); text-shadow:0 0 4px rgba(61,255,122,.5);
}
.console .muted{ color:var(--phosphor-dim); }
.console .amber-line{ color:var(--amber); text-shadow:0 0 4px rgba(255,182,39,.5); }
.console .gold-line{ color:var(--gold); text-shadow:0 0 6px rgba(255,210,63,.6); }
.console .alert-line{ color:var(--alert); text-shadow:0 0 4px rgba(255,68,68,.5); }
.cursor{
  display:inline-block; width:10px; height:18px; background:var(--phosphor);
  box-shadow:0 0 6px var(--phosphor); vertical-align:middle; animation:blink 1s step-end infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

.confidence{
  z-index:2; display:flex; align-items:center; gap:10px;
  font-size:12px; letter-spacing:1px; color:var(--phosphor-dim);
  opacity:0; transition:opacity .4s ease;
}
.confidence .track{ flex:1; height:8px; background:var(--phosphor-faint); border-radius:4px; overflow:hidden; }
.confidence .fill{
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--phosphor-dim),var(--phosphor));
  box-shadow:0 0 8px var(--phosphor);
  transition:width 1.1s cubic-bezier(.2,.8,.2,1);
}
.confidence .fill.gold{ background:linear-gradient(90deg,#7a6210,var(--gold)); box-shadow:0 0 8px var(--gold); }
.confidence .fill.amber{ background:linear-gradient(90deg,#7a4f10,var(--amber)); box-shadow:0 0 8px var(--amber); }
.confidence .pct{ color:var(--phosphor); min-width:44px; text-align:right; }

.mic-hint{ z-index:2; text-align:center; font-size:12px; letter-spacing:2px; color:var(--phosphor-dim); }
.mic-hint b{ color:var(--phosphor); }
.mic-hint.blink-red{
  color:var(--alert); font-weight:700;
  text-shadow:0 0 6px rgba(255,68,68,.6);
  animation:redBlink 1s step-end infinite;
}
@keyframes redBlink{ 50%{ opacity:.25; } }
.dot-pulse{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--alert); margin-right:6px; box-shadow:0 0 8px var(--alert);
  animation:dotpulse 1.1s ease-in-out infinite;
}
@keyframes dotpulse{ 0%,100%{opacity:.3;} 50%{opacity:1;} }

/* ---- painel de fotos ---- */
.photo-panel{
  max-width:900px; margin:16px auto 0;
  background:var(--bg-panel); border:1px solid var(--phosphor-dim); border-radius:6px;
  padding:16px 18px; display:flex; flex-direction:column; gap:12px;
}
.photo-panel .actions{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.cam-btn{
  background:var(--bg-panel); border:1px solid var(--phosphor-dim); color:var(--phosphor);
  font-family:'Space Mono',monospace; font-size:11px; letter-spacing:1px;
  padding:8px 14px; border-radius:4px; cursor:pointer;
}
.cam-btn:hover{ background:var(--phosphor-faint); }
.cam-btn:focus-visible{ outline:2px solid var(--phosphor); outline-offset:2px; }
.cam-btn:disabled{ opacity:.4; cursor:not-allowed; }
.cam-btn.primary{ border-color:var(--phosphor); color:var(--phosphor); }
.cam-btn.danger{ border-color:var(--alert); color:var(--alert); }

.photo-counter{ font-size:11px; color:#5c625c; letter-spacing:.5px; }
.photo-counter.ok{ color:var(--phosphor-dim); }
.photo-counter.warn{ color:var(--amber); }

.photo-grid{
  display:flex; flex-wrap:wrap; gap:8px;
}
.photo-thumb{
  position:relative;
  width:64px; height:64px;
  border-radius:4px;
  overflow:hidden;
  border:1px solid var(--phosphor-dim);
  background:#000;
}
.photo-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-thumb .remove-btn{
  position:absolute; top:2px; right:2px;
  width:16px; height:16px;
  background:rgba(5,7,5,.85);
  border:1px solid var(--alert);
  color:var(--alert);
  font-size:10px; line-height:1;
  border-radius:3px;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.photo-thumb .remove-btn:hover{ background:var(--alert); color:#000; }

.quality-warning{
  font-size:11px; color:var(--amber); letter-spacing:.5px; line-height:1.4;
}

/* ---- formulário de análise: modo / categoria / observações ---- */
.analysis-form{
  display:flex; flex-direction:column; gap:12px;
  border-top:1px solid var(--phosphor-faint); padding-top:12px;
}
.form-field{ display:flex; flex-direction:column; gap:4px; }
.form-field label{
  font-size:11px; letter-spacing:1px; color:var(--phosphor-dim); text-transform:uppercase;
}
.form-field select,
.form-field input[type="text"],
.form-field textarea{
  background:#050705; border:1px solid var(--phosphor-dim); color:var(--phosphor);
  font-family:'Space Mono',monospace; font-size:12px; padding:7px 9px; border-radius:3px;
  resize:vertical;
}
.form-field select:focus-visible,
.form-field input:focus-visible,
.form-field textarea:focus-visible{ outline:2px solid var(--phosphor); outline-offset:1px; }
.field-hint{ margin:0; font-size:10.5px; letter-spacing:.4px; color:#5c625c; }
.field-hint-warn{ color:var(--alert); }

.privacy-note{
  margin:0; font-size:10.5px; line-height:1.5; color:#5c625c; letter-spacing:.2px;
}
.privacy-note code{
  background:var(--phosphor-faint); color:var(--phosphor-dim); padding:1px 4px; border-radius:3px;
  font-family:'Space Mono',monospace; font-size:10px;
}

/* ---- painel visual completo de resultado ---- */
.result-panel{
  max-width:900px; margin:16px auto 0;
  display:none; flex-direction:column; gap:10px;
  background:var(--bg-panel); border:1px solid var(--phosphor-dim); border-radius:6px;
  padding:16px 18px;
  font-family:'Space Mono',monospace;
}
.result-panel.visible{ display:flex; }

.rp-section{
  border-top:1px solid var(--phosphor-faint); padding-top:10px;
}
.rp-section:first-child{ border-top:none; padding-top:0; }
.rp-title{
  margin:0 0 8px; font-family:'VT323',monospace; font-size:16px; letter-spacing:1.5px;
  color:var(--amber); text-shadow:0 0 4px rgba(255,182,39,.4);
}
.rp-row{ display:flex; gap:8px; font-size:12px; line-height:1.5; }
.rp-row + .rp-row{ margin-top:2px; }
.rp-label{ color:var(--phosphor-dim); min-width:120px; flex-shrink:0; text-transform:lowercase; }
.rp-value{ color:var(--phosphor); }
.rp-block{ margin-top:6px; }
.rp-block:first-child{ margin-top:0; }
.rp-block-label{ font-size:11px; color:var(--phosphor-dim); text-transform:lowercase; margin-bottom:3px; }
.rp-text{ margin:0; font-size:12.5px; line-height:1.5; color:var(--phosphor); }
.rp-list{ margin:0; padding-left:18px; font-size:12.5px; line-height:1.6; color:var(--phosphor); }
.rp-list li{ margin-bottom:2px; }

.rp-hypothesis{
  border-left:2px solid var(--phosphor-faint); padding-left:10px; margin-top:8px;
}
.rp-hypothesis:first-child{ margin-top:0; }
.rp-hyp-title{ font-size:12.5px; color:var(--phosphor); }
.rp-hyp-meta{ margin:2px 0; }
.rp-tag{
  display:inline-block; font-size:10px; letter-spacing:.5px; padding:1px 7px;
  border-radius:10px; border:1px solid var(--phosphor-dim); color:var(--phosphor-dim);
}
.rp-tag-high{ border-color:var(--phosphor); color:var(--phosphor); }
.rp-tag-medium{ border-color:var(--amber); color:var(--amber); }
.rp-tag-low{ border-color:#5c625c; color:#5c625c; }

/* ---- abas do painel de resultado ---- */
.tab-bar{
  display:flex; flex-wrap:wrap; gap:4px;
  border-top:1px solid var(--phosphor-faint); border-bottom:1px solid var(--phosphor-faint);
  padding:10px 0; overflow-x:auto;
}
.tab-btn{
  background:transparent; border:1px solid var(--phosphor-dim); color:var(--phosphor-dim);
  font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.5px;
  padding:6px 12px; border-radius:14px; cursor:pointer; white-space:nowrap;
}
.tab-btn:hover{ color:var(--phosphor); border-color:var(--phosphor); }
.tab-btn:focus-visible{ outline:2px solid var(--phosphor); outline-offset:2px; }
.tab-btn.active{
  background:var(--phosphor-faint); border-color:var(--phosphor); color:var(--phosphor);
  text-shadow:0 0 4px rgba(61,255,122,.4);
}
.tab-panels{ padding-top:4px; }
.tab-panel{ font-size:12.5px; }
.tab-panel[hidden]{ display:none; }

/* ---- painel de comandos (alternativa em botões aos comandos de voz) ---- */
.command-panel{
  max-width:900px; margin:12px auto 0;
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
}
.cmd-btn{
  background:var(--bg-panel); border:1px solid var(--phosphor-dim); color:var(--phosphor-dim);
  font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:.3px;
  padding:6px 10px; border-radius:4px; cursor:pointer;
}
.cmd-btn:hover{ color:var(--phosphor); border-color:var(--phosphor); }
.cmd-btn:focus-visible{ outline:2px solid var(--phosphor); outline-offset:2px; }

.backend-config{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:11px; color:#5c625c;
}
.backend-config input{
  background:#050705; border:1px solid var(--phosphor-dim); color:var(--phosphor);
  font-family:'Space Mono',monospace; font-size:11px; padding:5px 8px; border-radius:3px;
  min-width:220px;
}

.voice-status{
  max-width:900px; margin:10px auto 0; text-align:center;
  font-size:11px; letter-spacing:.5px; color:var(--phosphor-dim);
}
.voice-status.active{ color:var(--phosphor); text-shadow:0 0 4px rgba(61,255,122,.4); }
.voice-status.hearing{ color:var(--gold); text-shadow:0 0 4px rgba(255,210,63,.5); }

.demo-note{ text-align:center; color:#3a3d3a; font-size:11px; margin-top:10px; letter-spacing:.5px; }

@media (max-width:900px){
  .stage{ padding:16px; }
  .monitor{ padding:20px 18px 26px; }
  .photo-panel, .result-panel, .command-panel, .voice-status{ margin-left:12px; margin-right:12px; }
}

@media (max-width:560px){
  .screen{ min-height:600px; padding:14px 14px 12px; }
  .scan-stage{ width:190px; height:190px; }
  .console{ font-size:17px; }
  .brand-plate .logo{ font-size:11px; }
  .rp-row{ flex-direction:column; gap:2px; }
  .rp-label{ min-width:0; }
  .photo-panel .actions{ justify-content:center; }
  .cam-btn{ flex:1 1 calc(50% - 8px); text-align:center; }
}

@media (max-width:400px){
  .stage{ padding:8px; }
  .monitor{ padding:14px 10px 20px; border-radius:18px; }
  .monitor::before{ font-size:6px; letter-spacing:1px; }
  .screen{ min-height:520px; padding:10px 10px 10px; }
  .scan-stage{ width:150px; height:150px; }
  .statusbar{ font-size:11px; flex-wrap:wrap; gap:4px; }
  .console{ font-size:15px; }
  .brand-plate .logo{ font-size:10px; }
  .cam-btn, .cmd-btn{ flex:1 1 100%; }
  .photo-thumb{ width:52px; height:52px; }
  .rp-title{ font-size:14px; }
  .tab-btn{ font-size:10px; padding:5px 9px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; }
}

/* ===== override visual v2 ===== */
.brand-plate .logo{
  font-size:clamp(18px,4.5vw,30px);
  letter-spacing:2px;
  color:#eafff1;
  text-shadow:0 0 8px rgba(61,255,122,.55), 0 0 22px rgba(61,255,122,.28);
}
.brand-plate .logo span{
  color:var(--amber);
  text-shadow:0 0 8px rgba(255,182,39,.6), 0 0 22px rgba(255,182,39,.3);
}
.brand-plate{ padding:10px 14px 12px; }

body{
  background:
    radial-gradient(120% 80% at 50% 0%, #0d1a12 0%, transparent 60%),
    radial-gradient(100% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.75) 100%),
    var(--bg-void);
}

/* ===== fósforo v3: foto verde + scanlines ===== */
.photo-preview img{
  filter:grayscale(1) contrast(1.25) brightness(.85) sepia(1)
         hue-rotate(65deg) saturate(3.5);
}
.photo-preview{
  position:relative;
  box-shadow:0 0 18px rgba(61,255,122,.22), inset 0 0 30px rgba(0,0,0,.6);
}
.photo-preview::after{
  content:"";
  position:absolute; inset:0;
  background:repeating-linear-gradient(
    to bottom, rgba(0,0,0,.32) 0 1px, transparent 1px 3px);
  pointer-events:none;
  z-index:2;
}
.screen{ position:relative; }
.screen .crt-lines{
  position:absolute; inset:0;
  background:repeating-linear-gradient(
    to bottom, rgba(0,0,0,.18) 0 1px, transparent 1px 4px);
  pointer-events:none;
  z-index:10;
}

/* emoji some quando há foto real */
.scan-stage:has(#previewImg.live) .item-slot{
  opacity:0;
  transition:opacity .4s ease;
}
.item-slot{
  filter:grayscale(1) sepia(1) hue-rotate(65deg) saturate(3) brightness(1.1);
  transition:opacity .4s ease;
}

/* item-slot é irmão de .scan-stage, não filho */
.viewport:has(#previewImg.live) .item-slot{ opacity:0; }

/* foto visível sempre que houver src, sem depender da classe */
.photo-preview img[src]{ opacity:.85; }

/* ==== v4: baseado em [src], não na classe .live ==== */
.photo-preview{ z-index:6 !important; }
.photo-preview img[src]{ opacity:.9 !important; }
.scan-stage:has(#previewImg[src]) .item-slot{ display:none !important; }
.scan-stage:has(#previewImg[src]) .core{ opacity:.25 !important; }

/* ==== v5: corrige a regressão do v3 ==== */
.photo-preview{
  position:absolute !important;
  inset:0 !important;
  border-radius:50% !important;
  overflow:hidden !important;
}

/* ==== v6: radar maior ==== */
.scan-stage{ width:380px !important; height:380px !important; }
@media (max-width:560px){
  .scan-stage{ width:260px !important; height:260px !important; }
}

/* ==== v7: radar menor ==== */
.scan-stage{ width:220px !important; height:220px !important; }
@media (max-width:560px){
  .scan-stage{ width:170px !important; height:170px !important; }
}

/* ==== v8: radar grande, foto menor no centro ==== */
.scan-stage{ width:380px !important; height:380px !important; }
@media (max-width:560px){
  .scan-stage{ width:260px !important; height:260px !important; }
}
.photo-preview{ inset:90px !important; }
@media (max-width:560px){
  .photo-preview{ inset:60px !important; }
}

/* ==== v9: radar maior ainda, foto menor ainda ==== */
.scan-stage{ width:460px !important; height:460px !important; }
@media (max-width:560px){
  .scan-stage{ width:300px !important; height:300px !important; }
}
.photo-preview{ inset:160px !important; }
@media (max-width:560px){
  .photo-preview{ inset:105px !important; }
}

/* ==== v10: imagem inteira, área grande ==== */
.photo-preview{
  inset:70px !important;
  border-radius:8px !important;
}
@media (max-width:560px){
  .photo-preview{ inset:45px !important; }
}
.photo-preview img{
  object-fit:contain !important;
}

/* ==== v11: círculo de volta, fundo integrado ==== */
.photo-preview{
  border-radius:50% !important;
  background:radial-gradient(circle at 50% 45%, #0a1a10 0%, #040b06 70%) !important;
  box-shadow:0 0 22px rgba(61,255,122,.18),
             inset 0 0 0 1px var(--phosphor-faint),
             inset 0 0 40px rgba(0,0,0,.7) !important;
}

/* ==== v12: imagem inteira dentro do círculo ==== */
.photo-preview img{
  inset:15% !important;
  width:70% !important;
  height:70% !important;
  object-fit:contain !important;
}

/* ==== v13: materialização gradual ==== */
@keyframes materializar{
  0%{
    opacity:.12;
    filter:grayscale(1) sepia(1) hue-rotate(65deg) saturate(1)
           contrast(.35) brightness(1.5) blur(3px);
  }
  60%{
    opacity:.55;
    filter:grayscale(1) sepia(1) hue-rotate(65deg) saturate(2.5)
           contrast(.9) brightness(1.05) blur(1px);
  }
  100%{
    opacity:.9;
    filter:grayscale(1) sepia(1) hue-rotate(65deg) saturate(3.5)
           contrast(1.25) brightness(.85)
  }
}

/* ==== v14: materialização lenta, 60s ==== */
@keyframes materializar{
  0%{
    opacity:.04;
    filter:grayscale(1) sepia(1) hue-rotate(65deg) saturate(.5)
           contrast(.2) brightness(1.8) blur(5px);
  }
  25%{
    opacity:.18;
    filter:grayscale(1) sepia(1) hue-rotate(65deg) saturate(1.2)
           contrast(.45) brightness(1.4) blur(3px);
  }
  60%{
    opacity:.5;
    filter:grayscale(1) sepia(1) hue-rotate(65deg) saturate(2.2)
           contrast(.8) brightness(1.1) blur(1.5px);
  }
  100%{
    opacity:.9;
    filter:grayscale(1) sepia(1) hue-rotate(65deg) saturate(3.5)
           contrast(1.25) brightness(.85) blur(0);
  }
}
.photo-preview img[src]{
  animation:materializar 60s linear forwards !important;
}

/* ==== v14: materialização lenta, 60s ==== */
@keyframes materializar{
  0%{
    opacity:.04;
    filter:grayscale(1) sepia(1) hue-rotate(65deg) saturate(.5)
           contrast(.2) brightness(1.8) blur(5px);
  }
  25%{
    opacity:.18;
    filter:grayscale(1) sepia(1) hue-rotate(65deg) saturate(1.2)
           contrast(.45) brightness(1.4) blur(3px);
  }
  60%{
    opacity:.5;
    filter:grayscale(1) sepia(1) hue-rotate(65deg) saturate(2.2)
           contrast(.8) brightness(1.1) blur(1.5px);
  }
  100%{
    opacity:.9;
    filter:grayscale(1) sepia(1) hue-rotate(65deg) saturate(3.5)
           contrast(1.25) brightness(.85) blur(0);
  }
}
.photo-preview img[src]{
  animation:materializar 60s linear forwards !important;
}

/* ==== v14: materialização lenta, 60s ==== */
@keyframes materializar{
  0%{
    opacity:.04;
    filter:grayscale(1) sepia(1) hue-rotate(65deg) saturate(.5)
           contrast(.2) brightness(1.8) blur(5px);
  }
  25%{
    opacity:.18;
    filter:grayscale(1) sepia(1) hue-rotate(65deg) saturate(1.2)
           contrast(.45) brightness(1.4) blur(3px);
  }
  60%{
    opacity:.5;
    filter:grayscale(1) sepia(1) hue-rotate(65deg) saturate(2.2)
           contrast(.8) brightness(1.1) blur(1.5px);
  }
  100%{
    opacity:.9;
    filter:grayscale(1) sepia(1) hue-rotate(65deg) saturate(3.5)
           contrast(1.25) brightness(.85) blur(0);
  }
}
.photo-preview img[src]{
  animation:materializar 60s linear forwards !important;
}
@keyframes materializar{
0%{filter:grayscale(1) sepia(1) hue-rotate(65deg) saturate(.5) contrast(.2) brightness(1.8) blur(5px) opacity(.05);}
50%{filter:grayscale(1) sepia(1) hue-rotate(65deg) saturate(2) contrast(.7) brightness(1.2) blur(2px) opacity(.45);}
100%{filter:grayscale(1) sepia(1) hue-rotate(65deg) saturate(3.5) contrast(1.25) brightness(.85) blur(0) opacity(1);}
}
.photo-preview::before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(circle at 50% 45%,#0a1a10 0%,#040b06 70%);animation:veu 60s linear forwards;}
@keyframes veu{0%{opacity:.97;}30%{opacity:.8;}60%{opacity:.45;}100%{opacity:0;}}
.photo-preview::before{animation-duration:60s !important;animation-iteration-count:1 !important;animation-fill-mode:forwards !important;}
.scanbar{ z-index:7 !important; }
.scanbar.active{ animation-duration:4s !important; }
.sweep{ animation-duration:6s !important; }
.brand-sub{ font-size:10px; letter-spacing:4px; color:var(--phosphor-dim); text-align:center; margin-bottom:4px; opacity:.75; }
.brand-plate{ flex-wrap:wrap !important; justify-content:center !important; } .brand-sub{ flex-basis:100% !important; }
.brand-plate .logo{ margin-left:auto !important; } .brand-plate .led-row{ margin-left:auto !important; }
.brand-sub{ margin-top:10px !important; }
.brand-sub{ font-size:15px !important; letter-spacing:5px !important; color:var(--phosphor) !important; opacity:1 !important; text-shadow:0 0 6px var(--phosphor); }
.brand-plate{ position:relative !important; } .brand-plate .logo{ flex-basis:100% !important; text-align:center !important; margin:0 !important; } .brand-plate .led-row{ position:absolute !important; right:14px !important; bottom:14px !important; margin:0 !important; }
.waveform span{ animation:none !important; transform-origin:bottom !important; transition:none !important; }