/* Estilos compartilhados pelo painel (hub.html) e pela administracao (admin.html). */
:root{
  --bg:#0b0f17; --panel:#111827; --line:#1f2937; --tx:#e5e7eb; --mut:#94a3b8;
  --green:#34d399; --red:#ef4444; --amber:#f59e0b; --blue:#60a5fa;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--tx);
  font-family:-apple-system,system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  display:flex; flex-direction:column; height:100dvh; overflow:hidden;
  user-select:none; -webkit-user-select:none;
}
header{
  display:flex; align-items:center; gap:.5rem;
  padding:calc(env(safe-area-inset-top) + .55rem) .8rem .55rem;
  background:var(--panel); border-bottom:1px solid var(--line);
}
#dot{width:10px;height:10px;border-radius:50%;background:#6b7280;flex:none}
#dot.ok{background:var(--green)} #dot.bad{background:var(--red)}
#dot.man{background:var(--amber)} #dot.off{background:#6b7280}
#status{font-size:.85rem;font-weight:600;flex:1;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
#lat{font-size:.7rem;color:var(--mut)}
main{flex:1;position:relative;overflow:hidden;background:#000}
.viewport{position:absolute;inset:0;overflow:hidden;touch-action:none}
.screen{
  position:absolute;top:0;left:0;width:100%;transform-origin:0 0;
  image-rendering:auto;
}
.hint{
  position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
  background:rgba(17,24,39,.85);border:1px solid var(--line);
  color:var(--mut);font-size:.65rem;padding:.3rem .6rem;border-radius:999px;
  white-space:nowrap;pointer-events:none;transition:opacity .4s;
}
.flash{
  position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;
  border:2px solid var(--green);border-radius:50%;pointer-events:none;
  animation:fl .35s ease-out forwards;
}
@keyframes fl{from{opacity:1;transform:scale(.6)}to{opacity:0;transform:scale(1.5)}}
.trail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  transition:opacity .4s}
.trail polyline{fill:none;stroke:var(--blue);stroke-width:4;
  stroke-linecap:round;stroke-linejoin:round;opacity:.85}
footer{
  background:var(--panel);border-top:1px solid var(--line);
  padding:.5rem .6rem calc(env(safe-area-inset-bottom) + .5rem);
  display:flex;flex-direction:column;gap:.45rem;
}
.row{display:flex;gap:.45rem}
button{
  flex:1;min-height:44px;border:1px solid var(--line);border-radius:.6rem;
  background:#0d1420;color:var(--tx);font-size:.8rem;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:.25rem;
  font-family:inherit;cursor:pointer;
}
button:active{background:#1a2436}
button:disabled{opacity:.45;cursor:default}
.ctl{flex:0 0 46px;font-size:1.05rem}
.amber{border-color:#7c4a03;color:var(--amber)}
.green{border-color:#065f46;color:var(--green)}
.red{border-color:#7f1d1d;color:var(--red)}
#toast{
  position:fixed;left:50%;bottom:118px;transform:translateX(-50%);
  background:#1f2937;border:1px solid #374151;color:var(--tx);
  font-size:.78rem;padding:.55rem .9rem;border-radius:.6rem;
  max-width:92vw;text-align:center;opacity:0;transition:opacity .25s;
  pointer-events:none;z-index:9;
}
#toast.show{opacity:1}
/* pontos da dica de IA (seguem zoom e arraste da imagem) */
.marks{position:absolute;inset:0;pointer-events:none}
.mark{position:absolute;width:0;height:0}
.mark b{position:absolute;left:-12px;top:-12px;width:24px;height:24px;border-radius:50%;
  background:rgba(217,70,239,.9);border:2px solid #fff;color:#fff;font-size:.72rem;
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px rgba(0,0,0,.4)}
.mark span{position:absolute;left:15px;top:-10px;white-space:nowrap;font-size:.68rem;
  background:rgba(17,24,39,.88);color:#f5d0fe;padding:.12rem .4rem;border-radius:.35rem}
.mark.on b{background:var(--green);transform:scale(1.35);transition:transform .15s}
.mark.sug b{background:rgba(0,0,0,.35);border:2px dashed #f0abfc;color:#f0abfc}
.mark.sug span{opacity:.75}