/* LumiWatch Admin — mesma paleta do dashboard (ADR-009); browser moderno. */
:root {
  --bg: #05080d; --panel: #0b131d; --panel2: #0e1723; --line: rgba(124, 235, 250, .14);
  --cy: #33e1f2; --cy2: #7cf0fb; --ok: #4be6c9; --warn: #8f7dff; --bad: #ff5a6e;
  --tx: #eaf3f8; --tx2: #90a8bb; --dim: #5a7086;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--tx); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  background-image: linear-gradient(rgba(124,235,250,.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(124,235,250,.03) 1px, transparent 1px);
  background-size: 32px 32px;
  min-height: 100vh;
}
a { color: var(--cy2); text-decoration: none; }
a:hover { text-decoration: underline; }
header.top {
  display: flex; align-items: center; gap: 16px; padding: 12px 24px;
  border-bottom: 1px solid var(--line); background: rgba(5,8,13,.85);
}
.brand { font-weight: 600; letter-spacing: 6px; color: var(--cy2); text-shadow: 0 0 10px rgba(51,225,242,.6); }
.brand small { display: block; letter-spacing: 3px; font-size: 9px; color: var(--tx2); text-shadow: none; }
header.top .sp { flex: 1; }
header.top .who { color: var(--tx2); font-size: 13px; }
main { max-width: 1180px; margin: 0 auto; padding: 24px; }
h1 { font-size: 20px; letter-spacing: 3px; text-transform: uppercase; margin: 0 0 16px; }
h2 { font-size: 13px; letter-spacing: 4px; color: var(--cy2); text-transform: uppercase; margin: 0 0 12px; }
h2::before { content: "// "; color: var(--cy); font-family: var(--mono); letter-spacing: 0; }
.pn {
  position: relative; background: var(--panel); padding: 16px 18px; margin-bottom: 16px;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.pn::before { content: ""; position: absolute; left: 14px; top: 0; width: 40%; height: 2px;
  background: linear-gradient(90deg, var(--cy), transparent); }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--tx2); font-weight: 500; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.mono { font-family: var(--mono); }
.dim { color: var(--dim); }
.tag { display: inline-block; padding: 1px 8px; font: 600 11px var(--mono); letter-spacing: 1px; color: #05080d; }
.tag.ok { background: var(--ok); } .tag.warn { background: var(--warn); } .tag.bad { background: var(--bad); }
.tag.info { background: #3b8eff; } .tag.off { background: #243044; color: var(--tx2); }
.btn {
  display: inline-block; border: 0; cursor: pointer; padding: 9px 18px; font: 600 13px var(--mono); letter-spacing: 2px;
  color: #05080d; background: var(--cy); text-transform: uppercase;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.btn.ghost { background: #0f3a47; color: var(--cy2); }
.btn.small { padding: 4px 10px; font-size: 11px; }
input[type=email], input[type=password], input[type=text], textarea {
  width: 100%; padding: 9px 11px; color: var(--tx); background: var(--panel2); border: 1px solid var(--line);
  font: 14px var(--mono); outline: none;
}
input:focus, textarea:focus { border-color: var(--cy); box-shadow: 0 0 0 2px rgba(51,225,242,.2); }
textarea { min-height: 60vh; resize: vertical; line-height: 1.45; tab-size: 2; }
label { display: block; color: var(--tx2); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; margin: 12px 0 4px; }
.err { border-left: 3px solid var(--bad); background: rgba(255,90,110,.1); padding: 10px 12px; margin-bottom: 12px; }
.okmsg { border-left: 3px solid var(--ok); background: rgba(75,230,201,.08); padding: 10px 12px; margin-bottom: 12px; }
.login { max-width: 380px; margin: 12vh auto; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.kv { display: grid; grid-template-columns: 160px 1fr; gap: 4px 12px; font-size: 14px; }
.kv div:nth-child(odd) { color: var(--tx2); }

/* feedback de acções: botão "a aplicar", banner com o progresso no gateway */
@keyframes lw-spin { to { transform: rotate(360deg); } }
@keyframes lw-stripes { to { background-position: 40px 0; } }
@keyframes lw-pulse { 50% { box-shadow: 0 0 0 4px rgba(51,225,242,.15), 0 0 18px rgba(51,225,242,.35); } }
.spin { display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -2px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: lw-spin .7s linear infinite; }
.btn.busy { cursor: progress; color: #05080d; animation: lw-pulse 1.2s ease-in-out infinite, lw-stripes .6s linear infinite;
  background: repeating-linear-gradient(-45deg, var(--cy) 0 10px, var(--cy2) 10px 20px); background-size: 40px 40px; }
.btn.ghost.busy { color: #05080d; }
.btn:disabled { opacity: 1; }
.okmsg.applying { border-left-color: var(--cy); animation: lw-pulse 1.4s ease-in-out infinite; }
.okmsg.applying .spin { color: var(--cy); }
.okmsg.done { border-left-color: var(--ok); color: var(--ok); }
.okmsg.done .spin, .err .spin { display: none; }
/* confirmação em dois passos dentro da página */
.confirmbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; padding: 10px 12px;
  border-left: 3px solid var(--warn); background: rgba(143,125,255,.12); }
.confirmbar .q { flex: 1 1 260px; font-weight: 600; }
.confirmbar .btn.yes { background: var(--warn); }