:root{
  --bg:#eee7d8;
  --surface:#fffdf8;
  --surface-2:#e4dbc4;
  --border:#cabf9e;
  --border-strong:#a89b76;
  --text:#2a2117;
  --text-dim:#6b6047;
  --accent:#d9601c;
  --accent-soft:#fbe2cd;
  --ideal:#2f8f4e;
  --ideal-soft:#dcf0e1;
  --alerta:#c68a10;
  --alerta-soft:#faedc6;
  --critico:#d11a1a;
  --critico-soft:#f8d9d9;
  --shadow: 0 1px 2px rgba(40,28,10,.08), 0 10px 26px -14px rgba(40,28,10,.28);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#181310;
    --surface:#221b15;
    --surface-2:#2b231b;
    --border:#4a3b28;
    --border-strong:#6b5738;
    --text:#f4ead9;
    --text-dim:#ab9a7c;
    --accent:#ff8a3d;
    --accent-soft:rgba(255,138,61,.16);
    --ideal:#4ecb7d;
    --ideal-soft:rgba(78,203,125,.16);
    --alerta:#f0c33e;
    --alerta-soft:rgba(240,195,62,.16);
    --critico:#f03030;
    --critico-soft:rgba(240,48,48,.2);
    --shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 26px -14px rgba(0,0,0,.6);
  }
}

*{ box-sizing:border-box; }
.icon{ width:1em; height:1em; flex:none; display:inline-block; vertical-align:-0.15em; fill:currentColor; }
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

body{
  margin:0;
  background:
    radial-gradient(circle at 1px 1px, rgba(0,0,0,.035) 1px, transparent 0) 0 0/14px 14px,
    var(--bg);
  color:var(--text);
  font-family:"Nunito Sans", system-ui, sans-serif;
  padding: 20px 16px 48px;
}
@media (prefers-color-scheme: dark){
  body{
    background:
      radial-gradient(circle at 1px 1px, rgba(255,255,255,.035) 1px, transparent 0) 0 0/14px 14px,
      var(--bg);
  }
}

.wrap{ max-width: 1040px; margin: 0 auto; display:flex; flex-direction:column; gap:20px; }

header.top{ display:flex; flex-direction:column; gap:10px; position:relative; }
.who-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.who-row h1{ margin:0; }
.user-chip{ display:flex; align-items:center; gap:8px; font-size:.85rem; }
.user-pic{ width:28px; height:28px; border-radius:50%; }
.user-chip button{ padding:5px 10px; font-size:.75rem; }

body.login-body{ padding:0; }
.login-gate{
  height:100vh; height:100dvh;
  display:flex; align-items:center; justify-content:center;
  padding:24px 16px; background:var(--bg); overflow:hidden;
  box-sizing:border-box;
}
.login-card{
  max-width:360px; width:100%; text-align:center;
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  box-shadow:var(--shadow); padding:32px 24px; display:flex; flex-direction:column;
  align-items:center; gap:14px;
}
.login-card .eyebrow{ display:block; }
.login-card h1{ margin:0; }
.login-card .lede{ margin:0; max-width:none; }
.login-erro{ margin:0; font-size:.82rem; color:var(--critico); }
.eyebrow{
  font-family:"Space Mono", ui-monospace, monospace;
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); font-weight:700;
}
h1{
  font-family:"Bungee", system-ui, sans-serif;
  font-weight:400;
  font-size:clamp(2rem, 5vw, 3rem);
  line-height:1;
  letter-spacing:.01em;
  margin:0;
  text-wrap:balance;
  color:var(--text);
}
.lede{
  max-width:64ch;
  color:var(--text-dim);
  font-size:1rem;
  line-height:1.6;
  margin:0;
}
.lede strong{ color:var(--text); }

.draft-tag{
  display:inline-flex; align-self:flex-start; align-items:center; gap:6px;
  font-family:"Space Mono", ui-monospace, monospace;
  font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-soft);
  border:1px solid var(--accent);
  padding:4px 10px; border-radius:5px;
}

.legend{ display:flex; flex-wrap:wrap; gap:8px; }
.legend-chip{
  display:flex; align-items:center; gap:7px;
  font-size:.84rem; font-weight:600; padding:6px 12px; border-radius:8px;
  background:var(--surface); border:1px solid var(--border);
}
.dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.dot-ideal{ background:var(--ideal); }
.dot-alerta{ background:var(--alerta); }
.dot-critico{ background:var(--critico); }
.dot-off{ background:var(--text-dim); }
.conn-chip{ margin-left:auto; font-weight:600; }
@media (max-width: 720px){ .conn-chip{ margin-left:0; } }
.legend-chip .range{ font-family:"Space Mono", ui-monospace, monospace; color:var(--text-dim); font-size:.78rem; font-weight:400; }

.grid{
  display:grid;
  grid-template-columns: minmax(240px, 380px) 1fr;
  gap:18px;
}
@media (max-width: 720px){ .grid{ grid-template-columns: 1fr; } }

.card{
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow); padding:18px;
}
.card h2{
  font-family:"Bungee", system-ui, sans-serif;
  font-weight:400; font-size:1.15rem; letter-spacing:.01em;
  margin:0 0 4px;
}
.card .sub{ font-size:.85rem; color:var(--text-dim); margin:0 0 16px; line-height:1.5; }

/* --- truck diagram --- */
.truck-box{
  position:relative; width:100%; max-width:280px; margin:34px auto 30px;
  aspect-ratio: 200 / 340;
}
.truck-art{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.t-body{ fill:var(--surface); stroke:var(--border-strong); stroke-width:2; }
.t-cab{ fill:var(--surface-2); stroke:var(--border-strong); stroke-width:2; }
.t-glass{ fill:var(--accent-soft); stroke:var(--border); opacity:.85; }
.t-rib{ stroke:var(--border); stroke-width:1.5; opacity:.6; }
.t-axle{ stroke:var(--border-strong); stroke-width:4; }
.t-tag{ font-family:"Space Mono", ui-monospace, monospace; font-size:11px; letter-spacing:.08em; fill:var(--text-dim); opacity:.7; }
.axle-label{
  position:absolute; left:50%; transform:translateX(-50%);
  font-family:"Space Mono", ui-monospace, monospace;
  font-size:.64rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-dim); z-index:1; white-space:nowrap;
}
.axle-label.front{ top:-6%; }
.axle-label.rear{ bottom:-6%; }

.wheel{
  position:absolute; z-index:2;
  width:24%; height:21%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  border-radius:9px; border:2.5px solid var(--wheel-color, var(--border-strong));
  background:var(--wheel-soft, var(--surface-2));
  color:var(--wheel-color, var(--text));
  font-family:inherit; padding:0;
  transition: background .35s ease, border-color .35s ease, color .35s ease, box-shadow .3s ease;
}
.wheel.status-ideal{ --wheel-color:var(--ideal); --wheel-soft:var(--ideal-soft); }
.wheel.status-alerta{ --wheel-color:var(--alerta); --wheel-soft:var(--alerta-soft); }
.wheel.status-critico{ --wheel-color:var(--critico); --wheel-soft:var(--critico-soft); animation: overheat-glow 2.2s ease-in-out infinite; }
.wheel .code{ font-family:"Bungee", system-ui, sans-serif; font-weight:400; font-size:.78rem; letter-spacing:.02em; opacity:.85; }
.wheel .temp{ font-family:"Space Mono", ui-monospace, monospace; font-weight:700; font-size:clamp(.8rem,3.6vw,.95rem); font-variant-numeric:tabular-nums; }

@keyframes overheat-glow{
  0%, 100%{ box-shadow:0 0 0 0 transparent; }
  50%{ box-shadow:0 0 0 4px var(--critico-soft); }
}

.w-de{ top:19.5%; left:2%; }
.w-dd{ top:19.5%; right:2%; }
.w-te{ top:72.5%; left:2%; }
.w-td{ top:72.5%; right:2%; }


/* --- como funciona (dialog) --- */
.pipeline{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:.82rem; }
.pipeline .stage{
  background:var(--surface-2); border:1px solid var(--border); border-radius:7px;
  padding:7px 10px; font-family:"Space Mono", ui-monospace, monospace; font-size:.75rem;
}
.pipeline .arrow{ color:var(--text-dim); }
.status-note{
  margin-top:14px; padding:10px 12px; border-radius:9px;
  background:var(--accent-soft); border:1px solid var(--accent);
  font-size:.84rem; line-height:1.55;
}
.status-note strong{ color:var(--accent); }

/* --- botões --- */
button{
  display:inline-flex; align-items:center; gap:7px;
  font-family:"Nunito Sans", system-ui, sans-serif; font-weight:700; font-size:.83rem;
  border-radius:8px; padding:8px 14px; cursor:pointer; border:1px solid var(--border-strong);
  background:var(--surface-2); color:var(--text);
}
button:hover{ border-color:var(--accent); color:var(--accent); }
button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
button:disabled{ opacity:.55; cursor:default; color:var(--text); }

/* --- log --- */
#log{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; max-height:260px; overflow-y:auto; }
.log-empty{ font-size:.85rem; color:var(--text-dim); padding:6px 2px; }
.log-item{
  position:relative; flex-shrink:0;
  display:flex; gap:10px; align-items:flex-start; padding:9px 10px 9px 14px; border-radius:9px;
  background:var(--surface-2); border:1px solid var(--border); font-size:.85rem; line-height:1.45;
  overflow:hidden;
}
.log-item .icon{ width:15px; height:15px; margin-top:3px; }
.log-item.status-ideal .icon{ color:var(--ideal); }
.log-item.status-alerta .icon{ color:var(--alerta); }
.log-item.status-critico .icon{ color:var(--critico); }
.log-item .time{ font-family:"Space Mono", ui-monospace, monospace; font-size:.7rem; color:var(--text-dim); display:block; margin-bottom:2px; }
.log-item.status-critico{ border-color:var(--critico); }
.log-item.status-critico::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--critico);
}
.log-item.status-alerta{ border-color:var(--alerta); }
.log-item.status-ideal{ border-color:var(--ideal); }

footer{
  font-size:.78rem; color:var(--text-dim); border-top:1px solid var(--border);
  padding-top:14px; line-height:1.6;
}

.log-card #log{ max-height:470px; overflow-y:auto; }

.info-dialog{
  width:min(560px, calc(100% - 32px)); padding:20px;
  background:var(--surface); color:var(--text);
  border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow);
}
.info-dialog::backdrop{ background:rgba(0,0,0,.55); }
.info-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.info-head h2{ font-family:"Bungee", system-ui, sans-serif; font-weight:400; font-size:1.15rem; margin:0; }
.info-head button{ padding:5px 10px; font-size:.75rem; }
.info-dialog h3{ font-size:.95rem; margin:18px 0 2px; }
.info-dialog .sub{ font-size:.85rem; color:var(--text-dim); margin:0 0 10px; line-height:1.5; }