/* Painel Admin do Astor v2.1 — tema neon vivo, espelho do rosto */
:root {
  --cyan: #3ee9ff;
  --cyan-dim: rgba(62,233,255,.14);
  --stroke: rgba(62,233,255,.22);
  --bg: #05070d;
  --bg2: #0a0e18;
  --panel: #0d1220;
  --text: #eafcff;
  --muted: rgba(234,252,255,.5);
  --danger: #ff5468;
  --ok: #39e07a;
  --warn: #ffc24b;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  background:
    radial-gradient(90vmax 60vmax at 70% -10%, rgba(62,233,255,.05), transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: "Inter","Segoe UI",system-ui,sans-serif; font-size: 15px;
  min-height: 100vh;
}
.hidden { display:none !important; }
.muted { color: var(--muted); }
button { cursor:pointer; font-family:inherit; }
input, select {
  background: var(--bg2); border:1px solid var(--stroke); border-radius:10px;
  color: var(--text); padding:10px 12px; font-size:14px; outline:none;
  transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-dim); }
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-thumb { background: rgba(62,233,255,.18); border-radius:8px; }
::-webkit-scrollbar-track { background: transparent; }

/* marca (olhinhos que piscam) */
.brand { display:inline-flex; gap:7px; padding:10px 12px; border:1.5px solid var(--stroke); border-radius:14px; }
.brand .eye { width:12px; height:16px; border:4px solid var(--cyan); border-radius:50%;
  box-shadow:0 0 8px rgba(62,233,255,.6); display:inline-block; animation: blink 5s infinite; }
.brand .eye:nth-child(2) { animation-delay:.05s; }
.brand.sm { padding:8px 10px; } .brand.sm .eye { width:9px; height:12px; border-width:3px; }
.brand.lg { padding:14px 16px; } .brand.lg .eye { width:16px; height:22px; border-width:5px; }
@keyframes blink { 0%,94%,100% { transform:scaleY(1) } 96% { transform:scaleY(.08) } }

/* ---------- login ---------- */
.login { position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(80vmax 60vmax at 50% 30%, #070b14, #01020a); z-index:50; }
.login-card { width:min(400px,92vw); background:var(--panel); border:1px solid var(--stroke);
  border-radius:20px; padding:34px; display:flex; flex-direction:column; gap:14px; text-align:center;
  animation: rise .5s cubic-bezier(.22,1,.36,1); }
.login-card h1 { font-size:28px; } .login-card h1 span { color:var(--cyan); font-weight:400; }
.login-msg { min-height:20px; font-size:13px; color:var(--danger); }
@keyframes rise { from { transform:translateY(14px); opacity:0 } }

/* ---------- layout ---------- */
.app { display:flex; min-height:100vh; }
.side { width:224px; background:var(--bg2); border-right:1px solid var(--stroke);
  padding:20px 14px; display:flex; flex-direction:column; gap:18px; position:sticky; top:0; height:100vh; }
.brand-row { display:flex; align-items:center; gap:10px; }
.brand-row small { display:block; color:var(--muted); font-size:11px; }

/* espelho vivo da cabeça */
.mirror { background:var(--bg); border:1px solid var(--stroke); border-radius:16px;
  padding:14px 10px 10px; display:flex; flex-direction:column; align-items:center; gap:8px;
  transition: box-shadow .4s; }
.m-eyes { display:flex; gap:16px; }
.m-eye { width:16px; height:21px; border:5px solid var(--cyan); border-radius:50%;
  box-shadow:0 0 8px rgba(62,233,255,.55); display:inline-block;
  transition: height .25s ease, border-width .25s ease, border-radius .25s ease, border-color .25s; }
.m-mouth { width:52px; height:20px; }
.m-mouth path { stroke: var(--cyan); stroke-width:5; stroke-linecap:round;
  filter: drop-shadow(0 0 4px rgba(62,233,255,.5)); }
.mirror span { font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.mirror[data-hs="listening"] { box-shadow: 0 0 18px var(--cyan-dim); }
.mirror[data-hs="listening"] .m-eye { height:25px; }
.mirror[data-hs="speaking"] .m-eye { animation: mtalk .5s ease-in-out infinite; }
.mirror[data-hs="thinking"] .m-eyes { transform: translate(3px,-3px); }
.mirror[data-hs="sleeping"] .m-eye { height:4px; border-width:2.5px; border-radius:4px; }
.mirror[data-hs="sleeping"] { opacity:.55; }
.mirror[data-hs="happy"] .m-eye { height:10px; border-bottom-color:transparent;
  border-left-color:transparent; border-right-color:transparent;
  border-radius:50% 50% 50% 50% / 100% 100% 0 0; }
@keyframes mtalk { 0%,100% { transform:scaleY(1) } 50% { transform:scaleY(.75) } }

#nav { display:flex; flex-direction:column; gap:4px; }
#nav button { background:none; border:none; color:var(--muted); text-align:left;
  padding:11px 14px; border-radius:10px; font-size:14px; border-left:2px solid transparent;
  transition: background .15s, color .15s, border-color .15s, padding-left .15s; }
#nav button:hover { background:var(--cyan-dim); color:var(--text); padding-left:17px; }
#nav button.active { background:var(--cyan-dim); color:var(--cyan); font-weight:600;
  border-left:2px solid var(--cyan); border-radius:0 10px 10px 0; }
.side-foot { margin-top:auto; display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); }
.dot { width:9px; height:9px; border-radius:50%; background:var(--ok); box-shadow:0 0 6px var(--ok); }
.dot.off { background:var(--danger); box-shadow:0 0 6px var(--danger); }

.main { flex:1; padding:22px 28px; max-width:1240px; }
.top { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; gap:12px; flex-wrap:wrap; }
.top h2 { font-size:22px; }
.top-right { display:flex; align-items:center; gap:10px; }
.chip { background:var(--bg2); border:1px solid var(--stroke); border-radius:20px;
  padding:6px 14px; font-size:12px; color:var(--muted); }
.chip.good { color:var(--ok); border-color:rgba(57,224,122,.35); }
.chip.bad { color:var(--danger); border-color:rgba(255,84,104,.35); }

/* ---------- views / painéis ---------- */
.view { animation: fadein .3s ease; }
@keyframes fadein { from { opacity:0; transform:translateY(6px) } }
.panel { background:var(--panel); border:1px solid var(--stroke); border-radius:16px; padding:20px;
  transition: border-color .25s; }
.panel:hover { border-color: rgba(62,233,255,.35); }
.panel h3 { font-size:15px; margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.panel h4 { font-size:13px; margin:16px 0 8px; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; }
.panel.narrow { max-width:480px; display:flex; flex-direction:column; gap:8px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
@media (max-width:960px){ .grid2{grid-template-columns:1fr} .side{width:64px}
  .side b,.side small,#nav button{font-size:0} #nav button{padding:11px} .brand-row div{display:none}
  .mirror span{display:none} }

/* ---------- cards de robô ---------- */
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; margin-bottom:18px; }
.rcard { background:var(--panel); border:1px solid var(--stroke); border-radius:16px; padding:16px;
  display:flex; flex-direction:column; gap:8px; cursor:pointer;
  transition: transform .2s, border-color .2s, box-shadow .2s; }
.rcard:hover { transform: translateY(-2px); }
.rcard.selected { border-color:var(--cyan); box-shadow:0 0 16px var(--cyan-dim); }
.rcard .rhead { display:flex; align-items:center; gap:8px; }
.rcard .rhead b { font-size:16px; }
.rcard .rid { font-size:11px; color:var(--muted); }
.rcard .rrow { display:flex; justify-content:space-between; font-size:13px; color:var(--muted); }
.rcard .rrow b { color:var(--text); }
.badges { display:flex; gap:6px; flex-wrap:wrap; margin-top:2px; }
.badge { font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:3px 9px;
  border-radius:12px; border:1px solid var(--stroke); color:var(--muted); }
.badge.on { color:var(--cyan); border-color:var(--cyan); background:var(--cyan-dim); }

/* ---------- sensores ---------- */
.sensors { display:flex; flex-direction:column; gap:16px; }
.s-head { display:flex; justify-content:space-between; align-items:baseline; }
.sensor label { font-size:12px; color:var(--muted); }
.sensor b { font-size:19px; }
.bar { height:7px; background:var(--bg2); border-radius:6px; margin:7px 0 6px; overflow:hidden; }
.bar i { display:block; height:100%; width:0%; background:var(--cyan); border-radius:6px;
  box-shadow:0 0 8px rgba(62,233,255,.5); transition:width .3s; }
.bar i.low { background:var(--danger); box-shadow:0 0 8px var(--danger); }
.sensor canvas { width:100%; height:46px; display:block; opacity:.9; }
.sensor-row { display:flex; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--muted); }

/* ---------- visão do Astor ---------- */
.vision-wrap { position:relative; background:#020409; border:1px solid var(--stroke);
  border-radius:12px; overflow:hidden; margin-bottom:8px; }
#vision { width:100%; height:auto; display:block; }
.vision-empty { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:13px; letter-spacing:.15em; text-transform:uppercase;
  background:rgba(2,4,9,.55); transition: opacity .4s; }
.vision-empty.off { opacity:0; pointer-events:none; }

/* ---------- conversas ---------- */
.convo { display:flex; flex-direction:column; gap:8px; max-height:300px; overflow-y:auto; }
.bub { max-width:85%; padding:10px 14px; border-radius:14px; font-size:13px; line-height:1.45;
  animation: fadein .25s ease; }
.bub.user { align-self:flex-start; background:var(--bg2); border:1px solid var(--stroke);
  border-bottom-left-radius:4px; }
.bub.astor { align-self:flex-end; background:var(--cyan-dim); border:1px solid var(--stroke);
  color:var(--text); border-bottom-right-radius:4px; }
.bub small { display:block; font-size:10px; color:var(--muted); margin-bottom:3px;
  letter-spacing:.12em; text-transform:uppercase; }
.empty { color:var(--muted); font-size:13px; padding:18px; text-align:center;
  border:1px dashed var(--stroke); border-radius:12px; }

/* ---------- eventos ---------- */
.events { list-style:none; max-height:300px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; }
.events li { padding:8px 12px; background:var(--bg2); border-left:3px solid var(--cyan);
  border-radius:0 8px 8px 0; font-size:13px; animation: fadein .25s ease; }
.events li.warn { border-color:var(--warn); }
.events li.err { border-color:var(--danger); }
.events li small { color:var(--muted); margin-right:8px; }

/* ---------- controle ---------- */
.speed-row { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.speed-row input { padding:0; accent-color:var(--cyan); }
.dpad { display:grid; grid-template-columns:repeat(3,76px); grid-auto-rows:76px; gap:10px;
  justify-content:center; margin-bottom:18px; }
.pad { background:var(--bg2); border:1px solid var(--stroke); border-radius:16px;
  color:var(--cyan); font-size:24px; user-select:none; touch-action:none;
  transition: background .1s, border-color .1s, transform .1s; }
.pad:active { background:var(--cyan-dim); border-color:var(--cyan); transform:scale(.96); }
.pad.stop { color:var(--danger); }
.btn { border:none; border-radius:12px; padding:11px 18px; font-size:14px; font-weight:600;
  transition: transform .1s, filter .15s; }
.btn:active { transform:scale(.97); }
.btn:hover { filter:brightness(1.12); }
.btn.primary { background:var(--cyan); color:#032027; box-shadow:0 0 18px var(--cyan-dim); }
.btn.danger { background:var(--danger); color:#2a040a; }
.btn.ghost { background:var(--bg2); color:var(--text); border:1px solid var(--stroke); }
.btn.sm { padding:7px 12px; font-size:13px; }
.w100 { width:100%; }
.sm-note { font-size:12px; margin-top:10px; }
.say-row { display:flex; gap:10px; margin-bottom:12px; }
.say-row input { flex:1; }
.modes { display:flex; gap:8px; flex-wrap:wrap; }
.mode { background:var(--bg2); border:1px solid var(--stroke); color:var(--muted);
  padding:9px 16px; border-radius:20px; font-size:13px; transition: all .15s; }
.mode.active { color:var(--cyan); border-color:var(--cyan); background:var(--cyan-dim); }
.husky-row { display:flex; gap:8px; flex-wrap:wrap; }
.husky-row select { flex:1; }
.cmdlog { margin-top:14px; font-size:12px; color:var(--muted); max-height:120px; overflow-y:auto;
  font-family:ui-monospace,monospace; display:flex; flex-direction:column; gap:3px; }

/* ---------- produtos ---------- */
.prod-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; margin:14px 0; }
.pcard { background:var(--bg2); border:1px solid var(--stroke); border-radius:14px; padding:14px;
  display:flex; flex-direction:column; gap:6px; animation: fadein .3s ease; }
.pcard .pname { font-weight:600; font-size:14px; }
.pcard .pprice { color:var(--cyan); font-weight:700; font-size:18px; }
.pcard .pmeta { font-size:12px; color:var(--muted); }
.pcard input { padding:6px 8px; font-size:12px; }

/* ---------- tabelas / forms ---------- */
.form-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.form-row input, .form-row select { flex:1; min-width:90px; }
.tbl { width:100%; border-collapse:collapse; font-size:13px; }
.tbl th { text-align:left; color:var(--muted); font-weight:500; padding:8px; border-bottom:1px solid var(--stroke); }
.tbl td { padding:8px; border-bottom:1px solid rgba(62,233,255,.08); }
.tbl tr { transition: background .15s; }
.tbl tbody tr:hover { background:rgba(62,233,255,.05); }
.tbl .del { background:none; border:none; color:var(--danger); font-size:15px; }
.logs-head { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.logs-head h3 { margin:0; flex:1; }
.chk { font-size:13px; color:var(--muted); display:flex; gap:6px; align-items:center; }
.lvl { padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600; }
.lvl.INFO { background:var(--cyan-dim); color:var(--cyan); }
.lvl.WARN, .lvl.WARNING { background:rgba(255,194,75,.15); color:var(--warn); }
.lvl.ERROR, .lvl.CRITICAL { background:rgba(255,84,104,.15); color:var(--danger); }

/* ---------- calibração ---------- */
.calib-groups { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:16px; }
.calib-group { background:var(--bg2); border:1px solid var(--stroke); border-radius:14px; padding:16px; }
.calib-group h4 { margin:0 0 12px; font-size:12px; color:var(--cyan); text-transform:uppercase; letter-spacing:.14em; }
.calib-row { display:grid; grid-template-columns:1fr 110px 58px; gap:10px; align-items:center; padding:7px 0; }
.calib-row label { font-size:13px; color:var(--text); cursor:help; }
.calib-row input[type="range"] { padding:0; accent-color:var(--cyan); }
.calib-row .cval { font-size:13px; color:var(--cyan); font-variant-numeric:tabular-nums; text-align:right; }
.calib-row.changed label { color:var(--warn); }
.calib-row input[type="checkbox"] { width:18px; height:18px; accent-color:var(--cyan); justify-self:end; }

/* ---------- toasts ---------- */
.toasts { position:fixed; right:18px; bottom:18px; display:flex; flex-direction:column; gap:8px; z-index:60; }
.toast { background:var(--panel); border:1px solid var(--stroke); border-left:3px solid var(--cyan);
  border-radius:10px; padding:12px 16px; font-size:13px; animation:tin .25s ease; max-width:340px; }
.toast.err { border-left-color:var(--danger); }
.toast.ok { border-left-color:var(--ok); }
@keyframes tin { from { transform:translateY(8px); opacity:0 } }
label { font-size:12px; color:var(--muted); }

/* ---- Cartão de segurança + banner de emergência (T-19 / URA-016) ---- */
.estop-banner {
  background: #ff2d46; color: #fff; font-weight: 700; letter-spacing: .3px;
  padding: 12px 16px; border-radius: 10px; margin-bottom: 14px; text-align: center;
  box-shadow: 0 0 24px rgba(255, 45, 70, .55); animation: estopPulse 1.1s infinite;
}
@keyframes estopPulse { 0%,100% { opacity: 1 } 50% { opacity: .72 } }
.panel.safety { border: 1px solid rgba(62,233,255,.18); }
.safety-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin-top: 8px;
}
.safety-grid .sf {
  background: rgba(255,255,255,.03); border-radius: 8px; padding: 8px 10px;
  display: flex; flex-direction: column; gap: 3px;
}
.safety-grid .sf label { font-size: 11px; opacity: .7; text-transform: uppercase; letter-spacing: .4px; }
.safety-grid .sf b { font-size: 16px; font-variant-numeric: tabular-nums; }
.safety-grid .sf b.bad { color: #ff5468; }