/* ============ LG COMMAND CENTER · HUD ============ */
:root {
  --bg: #04080f;
  --bg2: #060c17;
  --panel: rgba(9, 19, 34, 0.62);
  --panel-solid: #0a1524;
  --line: rgba(56, 189, 248, 0.16);
  --line-strong: rgba(56, 189, 248, 0.38);
  --cyan: #22d3ee;
  --cyan-hi: #7df9ff;
  --amber: #ffb454;
  --red: #ff5d6c;
  --green: #34d399;
  --text: #d8e8f4;
  --dim: #64809a;
  --dimmer: #3a5165;
  --mono: 'Share Tech Mono', monospace;
  --ui: 'Rajdhani', sans-serif;
  --display: 'Orbitron', sans-serif;
  --chamfer: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { color-scheme: dark; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--ui);
  font-size: 15px;
  min-height: 100vh;
  overflow-x: hidden;
}
::selection { background: rgba(34, 211, 238, 0.28); }
.hidden { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--ui); cursor: pointer; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(56,189,248,.22); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- fundo ---------- */
.bg-grid {
  position: fixed; inset: -60% -20%; z-index: -3; pointer-events: none;
  background-image:
    linear-gradient(rgba(56,189,248,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,189,248,.05) 1px, transparent 1px);
  background-size: 46px 46px;
  transform: perspective(900px) rotateX(28deg) translateY(-4%);
  animation: gridDrift 34s linear infinite;
}
@keyframes gridDrift { to { background-position: 0 46px, 46px 0; } }
.bg-vignette {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(34,211,238,.10), transparent 60%),
    radial-gradient(ellipse 120% 90% at 50% 115%, rgba(2,6,16,.9), transparent 55%),
    radial-gradient(ellipse 55% 55% at 50% 50%, transparent 55%, rgba(2,5,12,.75));
}
.bg-scan {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.16) 2px 4px);
}

/* ---------- painel base ---------- */
.panel {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  clip-path: var(--chamfer);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.panel::before, .panel::after {
  content: ''; position: absolute; width: 18px; height: 18px; pointer-events: none;
  border-color: var(--line-strong); border-style: solid;
}
.panel::before { top: 0; left: 0; border-width: 1.5px 0 0 1.5px; }
.panel::after { bottom: 0; right: 0; border-width: 0 1.5px 1.5px 0; }

/* ---------- reactor / anéis ---------- */
.reactor { width: 150px; height: 150px; }
.reactor.small { width: 84px; height: 84px; }
.reactor.tiny { width: 34px; height: 34px; }
.r-ring { fill: none; stroke: var(--cyan); stroke-width: 2; transform-origin: 100px 100px; opacity: .85; }
.r1 { stroke-dasharray: 90 34 8 34 90 34 8 34; animation: spin 9s linear infinite; }
.r2 { stroke-dasharray: 40 18; stroke-width: 1.4; opacity: .5; animation: spin 14s linear infinite reverse; }
.r3 { stroke-dasharray: 12 10; stroke-width: 1; opacity: .35; animation: spin 6s linear infinite; }
.r-core {
  fill: var(--cyan);
  filter: drop-shadow(0 0 6px var(--cyan)) drop-shadow(0 0 18px rgba(34,211,238,.55));
  animation: pulse 3.2s ease-in-out infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .55; } }

/* ---------- boot ---------- */
.boot {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: var(--bg); transition: opacity .6s ease;
}
.boot.out { opacity: 0; pointer-events: none; }
.boot-core { display: grid; place-items: center; gap: 22px; }
.boot-title {
  font-family: var(--display); font-weight: 800; font-size: clamp(18px, 3.4vw, 30px);
  letter-spacing: .34em; color: var(--cyan-hi);
  text-shadow: 0 0 8px rgba(125,249,255,.6), 0 0 28px rgba(34,211,238,.35);
}
.boot-log {
  font-family: var(--mono); font-size: 12px; color: var(--dim);
  min-height: 5.2em; width: min(420px, 82vw); text-align: left;
}
.boot-log div::before { content: '▸ '; color: var(--cyan); }

/* ---------- login ---------- */
.login { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; }
.login-card {
  display: grid; place-items: center; gap: 14px;
  padding: 44px 46px 36px; width: min(400px, 90vw); text-align: center;
}
.login-card h1 {
  font-family: var(--display); font-size: 17px; font-weight: 800;
  letter-spacing: .3em; color: var(--text);
}
.login-sub { font-family: var(--mono); font-size: 11px; letter-spacing: .3em; color: var(--dim); }
.login-card input {
  width: 100%; margin-top: 8px; padding: 12px 14px; text-align: center;
  background: rgba(4,10,20,.8); border: 1px solid var(--line-strong); color: var(--cyan-hi);
  font-family: var(--mono); font-size: 15px; letter-spacing: .32em; outline: none;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.login-card input:focus { border-color: var(--cyan); box-shadow: 0 0 0 1px rgba(34,211,238,.35), 0 0 22px rgba(34,211,238,.18); }
.login-card button {
  width: 100%; padding: 11px; background: rgba(34,211,238,.12);
  border: 1px solid var(--cyan); color: var(--cyan-hi);
  font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: .3em;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: background .2s, box-shadow .2s;
}
.login-card button:hover { background: rgba(34,211,238,.24); box-shadow: 0 0 24px rgba(34,211,238,.3); }
.login-err { font-family: var(--mono); font-size: 12px; color: var(--red); min-height: 1.2em; }
.login-card.shake { animation: shake .4s; }
@keyframes shake { 20%,60% { transform: translateX(-7px); } 40%,80% { transform: translateX(7px); } }

/* ---------- hud shell ---------- */
.hud {
  max-width: 1560px; margin: 0 auto; padding: 18px clamp(12px, 2.4vw, 30px) 8px;
  display: flex; flex-direction: column; gap: 16px; min-height: 100vh;
}
.hud > * { animation: riseIn .55s cubic-bezier(.2,.9,.25,1) both; }
.hud > *:nth-child(2) { animation-delay: .1s; }
.hud > *:nth-child(3) { animation-delay: .2s; }
.hud > *:nth-child(4) { animation-delay: .28s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(16px); } }

/* header */
.hud-header {
  display: flex; align-items: center; gap: 22px; padding: 13px 22px;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--cyan); }
.brand-mark { width: 26px; height: 26px; filter: drop-shadow(0 0 6px rgba(34,211,238,.6)); animation: pulse 3.2s infinite; }
.brand-name { font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: .22em; color: var(--text); white-space: nowrap; }
.brand-name em { font-style: normal; color: var(--cyan-hi); }
.sysline {
  display: flex; align-items: center; gap: 9px; margin: 0 auto;
  font-family: var(--mono); font-size: 12px; letter-spacing: .24em; color: var(--dim);
}
.sys-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dim); }
.sysline.ok #sys-status { color: var(--green); }
.sysline.ok .sys-dot { background: var(--green); box-shadow: 0 0 10px var(--green); animation: pulse 2.4s infinite; }
.sysline.warn #sys-status { color: var(--amber); }
.sysline.warn .sys-dot { background: var(--amber); box-shadow: 0 0 10px var(--amber); animation: pulse 1.4s infinite; }
.sysline.crit #sys-status { color: var(--red); }
.sysline.crit .sys-dot { background: var(--red); box-shadow: 0 0 12px var(--red); animation: pulse .8s infinite; }
.header-right { display: flex; align-items: center; gap: 14px; }
.clock { font-family: var(--mono); font-size: 20px; color: var(--cyan-hi); text-shadow: 0 0 10px rgba(125,249,255,.4); }
.hdate { font-family: var(--mono); font-size: 11px; color: var(--dim); letter-spacing: .12em; text-transform: uppercase; }
.hbtn {
  padding: 6px 13px; background: transparent; border: 1px solid var(--line-strong);
  color: var(--cyan); font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  transition: all .18s;
}
.hbtn:hover { background: rgba(34,211,238,.14); box-shadow: 0 0 16px rgba(34,211,238,.22); }
.hbtn.dim { color: var(--dim); border-color: var(--line); }

/* ---------- telemetria ---------- */
.telemetry {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
}
.gauge, .stat { padding: 16px 10px 12px; display: grid; place-items: center; gap: 4px; }
.gauge { position: relative; }
.gauge svg { width: 92px; height: 92px; transform: rotate(-90deg); }
.g-bg { fill: none; stroke: rgba(56,189,248,.1); stroke-width: 7; stroke-dasharray: 4 3; }
.g-val {
  fill: none; stroke: var(--cyan); stroke-width: 7; stroke-linecap: butt;
  stroke-dasharray: 0 314.16; transition: stroke-dasharray .9s cubic-bezier(.2,.8,.3,1), stroke .4s;
  filter: drop-shadow(0 0 5px currentColor);
}
.gauge.warn .g-val { stroke: var(--amber); }
.gauge.crit .g-val { stroke: var(--red); }
.g-center {
  position: absolute; top: 16px; height: 92px; display: grid; place-items: center; align-content: center;
}
.g-center b { font-family: var(--mono); font-size: 21px; font-weight: 400; color: var(--text); }
.g-center i { font-family: var(--mono); font-style: normal; font-size: 10px; color: var(--dim); }
.gauge label, .stat label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .3em; color: var(--dim);
}
.g-sub { font-family: var(--mono); font-size: 10px; color: var(--dimmer); }
.stat { align-content: center; grid-template-columns: auto auto; column-gap: 12px; }
.stat b { font-family: var(--mono); font-size: 17px; font-weight: 400; color: var(--cyan-hi); }
.stat b.big { font-size: 34px; grid-column: 1 / -1; text-shadow: 0 0 14px rgba(125,249,255,.35); }
.stat span { font-family: var(--mono); font-size: 10px; color: var(--dim); letter-spacing: .18em; }
.stat label { grid-column: 1 / -1; margin-top: 2px; }

/* ---------- main ---------- */
.hud-main { display: grid; grid-template-columns: 1fr 330px; gap: 16px; align-items: start; flex: 1; }

/* apps */
.apps { display: flex; flex-direction: column; gap: 26px; }
.loading { font-family: var(--mono); color: var(--dim); letter-spacing: .3em; padding: 40px; text-align: center; }
.cat h2 {
  font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: .3em;
  color: var(--cyan); display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
  text-transform: uppercase;
}
.cat h2::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent); }
.cat h2 .count { font-family: var(--mono); font-size: 10px; color: var(--dimmer); letter-spacing: .1em; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 11px; }
.app {
  display: flex; gap: 12px; align-items: center; padding: 13px 15px;
  background: var(--panel); border: 1px solid var(--line);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: all .18s ease; position: relative; overflow: hidden;
}
.app::before {
  content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .25s;
  background: radial-gradient(140px 70px at var(--mx, 50%) var(--my, 50%), rgba(34,211,238,.13), transparent 70%);
  pointer-events: none;
}
.app:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: 0 6px 22px rgba(0,0,0,.4), 0 0 18px rgba(34,211,238,.08); }
.app:hover::before { opacity: 1; }
.app .ico { flex: none; width: 30px; height: 30px; color: var(--cyan); opacity: .9; }
.app .ico svg { width: 100%; height: 100%; }
.app-txt { min-width: 0; flex: 1; }
.app-txt b { display: block; font-size: 15px; font-weight: 600; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-txt span { display: block; font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--dimmer); }
.dot.ok { background: var(--green); box-shadow: 0 0 8px var(--green); animation: pulse 3s infinite; }
.dot.warn { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.dot.down { background: var(--red); box-shadow: 0 0 8px var(--red); animation: pulse 1s infinite; }
.app.parked { opacity: .42; filter: saturate(.4); }
.app.parked:hover { opacity: .75; }

/* widgets */
.widgets { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 14px; }
.widget { padding: 16px 18px 15px; }
.widget h2 {
  font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .28em;
  color: var(--cyan); margin-bottom: 13px; display: flex; justify-content: space-between; align-items: baseline;
}
.w-src { font-family: var(--mono); font-size: 9px; color: var(--dimmer); letter-spacing: .2em; }
.spend-now { display: grid; grid-template-columns: auto auto; gap: 2px 18px; align-items: baseline; margin-bottom: 10px; }
.spend-now b { font-family: var(--mono); font-size: 27px; font-weight: 400; color: var(--cyan-hi); text-shadow: 0 0 12px rgba(125,249,255,.3); }
.spend-now b.wk { font-size: 17px; color: var(--text); text-shadow: none; }
.spend-now span { font-family: var(--mono); font-size: 9px; color: var(--dim); letter-spacing: .24em; }
.spark { width: 100%; height: 56px; margin: 4px 0 8px; }
.spark polyline { fill: none; stroke: var(--cyan); stroke-width: 1.6; filter: drop-shadow(0 0 4px rgba(34,211,238,.5)); }
.spark polygon { fill: url(#sparkfill); opacity: .9; }
.models { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.models li { font-family: var(--mono); font-size: 11px; color: var(--dim); }
.models .bar { height: 3px; background: rgba(56,189,248,.14); margin-top: 3px; position: relative; }
.models .bar i { position: absolute; inset: 0 auto 0 0; background: var(--cyan); box-shadow: 0 0 6px rgba(34,211,238,.5); }
.models .mrow { display: flex; justify-content: space-between; gap: 8px; }
.models .mrow em { font-style: normal; color: var(--cyan-hi); }

.n8n-row { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 10px; }
.n8n-row b { font-family: var(--mono); font-size: 27px; font-weight: 400; color: var(--cyan-hi); }
.n8n-row b.err { color: var(--green); }
.n8n-row b.err.has { color: var(--amber); }
.n8n-row span { font-family: var(--mono); font-size: 9px; color: var(--dim); letter-spacing: .22em; }
.errlist { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.errlist li { font-family: var(--mono); font-size: 11px; color: var(--dim); border-left: 2px solid var(--amber); padding-left: 8px; }
.errlist li time { color: var(--dimmer); }

#alerts-body { display: flex; flex-direction: column; gap: 8px; }
.nominal {
  font-family: var(--mono); font-size: 12px; letter-spacing: .2em; color: var(--green);
  padding: 10px 0 4px; text-align: center;
}
.alert-item { font-family: var(--mono); font-size: 11.5px; padding: 7px 9px; border-left: 2px solid var(--amber); background: rgba(255,180,84,.06); color: var(--text); }
.alert-item.critical, .alert-item.crit { border-color: var(--red); background: rgba(255,93,108,.07); }
.alert-item small { display: block; color: var(--dim); }
.inc-item { font-family: var(--mono); font-size: 10.5px; color: var(--dimmer); display: flex; gap: 8px; }
.inc-item b { color: var(--dim); font-weight: 400; }
.inc-sep { font-family: var(--mono); font-size: 9px; letter-spacing: .26em; color: var(--dimmer); margin-top: 5px; }

/* footer */
.hud-footer {
  display: flex; justify-content: space-between; padding: 8px 6px 14px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--dimmer);
}

/* ---------- search ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 80; background: rgba(2,6,14,.72);
  backdrop-filter: blur(4px); display: grid; justify-items: center; padding-top: 14vh;
}
.search-box { width: min(560px, 92vw); height: fit-content; padding: 6px; }
.search-box input {
  width: 100%; padding: 15px 18px; background: transparent; border: none; outline: none;
  color: var(--cyan-hi); font-family: var(--mono); font-size: 17px; letter-spacing: .06em;
  border-bottom: 1px solid var(--line);
}
#search-results { list-style: none; max-height: 46vh; overflow-y: auto; }
#search-results li {
  display: flex; align-items: center; gap: 12px; padding: 11px 16px; cursor: pointer;
  border-left: 2px solid transparent;
}
#search-results li.sel, #search-results li:hover { background: rgba(34,211,238,.09); border-left-color: var(--cyan); }
#search-results .ico { width: 20px; height: 20px; color: var(--cyan); flex: none; }
#search-results .ico svg { width: 100%; height: 100%; }
#search-results b { font-size: 14.5px; font-weight: 600; }
#search-results span { font-size: 11.5px; color: var(--dim); margin-left: auto; font-family: var(--mono); }

/* ---------- chat ---------- */
.chat {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 70;
  width: min(430px, 96vw); display: flex; flex-direction: column;
  background: rgba(6, 13, 24, 0.92); border-left: 1px solid var(--line-strong);
  backdrop-filter: blur(18px);
  box-shadow: -20px 0 60px rgba(0,0,0,.5);
  animation: chatIn .3s cubic-bezier(.2,.9,.3,1);
}
@keyframes chatIn { from { transform: translateX(40px); opacity: 0; } }
.chat header {
  display: flex; align-items: center; gap: 12px; padding: 15px 18px;
  border-bottom: 1px solid var(--line);
}
.chat h3 { font-family: var(--display); font-size: 12px; letter-spacing: .3em; color: var(--text); }
#chat-state { font-family: var(--mono); font-size: 9.5px; letter-spacing: .24em; color: var(--dim); }
#chat-state.live { color: var(--cyan); }
#chat-close {
  margin-left: auto; background: none; border: none; color: var(--dim); font-size: 22px; line-height: 1;
}
#chat-close:hover { color: var(--cyan-hi); }
.chat-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.chat-hello { font-family: var(--mono); font-size: 12px; color: var(--dim); }
.presets { display: flex; flex-wrap: wrap; gap: 7px; }
.presets button {
  padding: 6px 11px; background: rgba(34,211,238,.07); border: 1px solid var(--line);
  color: var(--cyan); font-size: 12px; font-family: var(--ui); font-weight: 600;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.presets button:hover { background: rgba(34,211,238,.16); }
.msg { max-width: 92%; padding: 10px 13px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.msg.user {
  align-self: flex-end; background: rgba(34,211,238,.12); border: 1px solid var(--line-strong);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.msg.bot {
  align-self: flex-start; background: rgba(12,24,40,.75); border: 1px solid var(--line);
  border-left: 2px solid var(--cyan);
}
.msg.bot.streaming::after { content: '▊'; color: var(--cyan); animation: pulse 1s infinite; }
.chat-input { display: flex; gap: 8px; padding: 13px 15px; border-top: 1px solid var(--line); }
.chat-input input {
  flex: 1; padding: 11px 13px; background: rgba(4,10,20,.85); border: 1px solid var(--line);
  color: var(--text); font-family: var(--ui); font-size: 14px; outline: none;
}
.chat-input input:focus { border-color: var(--cyan); }
.chat-input button {
  padding: 0 17px; background: rgba(34,211,238,.14); border: 1px solid var(--cyan);
  color: var(--cyan-hi); font-size: 13px;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

/* ---------- responsivo ---------- */
@media (max-width: 1180px) {
  .hud-main { grid-template-columns: 1fr; }
  .widgets { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .telemetry { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .telemetry { grid-template-columns: repeat(2, 1fr); }
  .hud-header { flex-wrap: wrap; gap: 10px; }
  .sysline { order: 3; width: 100%; margin: 0; }
  .hdate { display: none; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* markdown lite no chat */
.msg.bot code {
  font-family: var(--mono); font-size: 12.5px; color: var(--cyan-hi);
  background: rgba(34,211,238,.09); padding: 1px 5px; border: 1px solid var(--line);
}
.msg.bot b { color: var(--cyan-hi); font-weight: 700; }
.msg.bot a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }