:root {
  color-scheme: dark;
  --bg: #071018;
  --surface: #0d1823;
  --surface-2: #132231;
  --border: #23384a;
  --text: #edf5fb;
  --muted: #9eb0bf;
  --accent: #23b6e6;
  --accent-strong: #0d8fbd;
  --success: #45d29a;
  --warning: #f4be55;
  --danger: #ff6f78;
  --shadow: 0 24px 80px rgba(0, 0, 0, .32);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: radial-gradient(circle at 15% 0%, #123047 0, transparent 33%), var(--bg); color: var(--text); }
button, input { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.shell { width: min(1480px, calc(100% - 32px)); margin: 0 auto; padding: 32px 0 56px; }
.auth-card { width: min(460px, 100%); margin: 8vh auto 0; padding: 34px; background: rgba(13, 24, 35, .96); border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow); }
.brand-mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(135deg, var(--accent), #6ae0ff); color: #04202b; font-weight: 900; letter-spacing: -.04em; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -.045em; }
h2 { margin-bottom: 6px; font-size: 1.1rem; }
.eyebrow { margin: 18px 0 5px; color: var(--accent); font-size: .74rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.eyebrow.danger { color: var(--danger); }
.muted { color: var(--muted); line-height: 1.55; }
label { display: grid; gap: 8px; margin: 20px 0; color: #d7e4ed; font-size: .88rem; font-weight: 700; }
input { width: 100%; border: 1px solid var(--border); border-radius: 11px; background: #08131d; color: var(--text); padding: 12px 13px; outline: none; }
input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(35, 182, 230, .14); }
button { border: 0; border-radius: 10px; padding: 11px 15px; font-weight: 800; transition: transform .15s ease, opacity .15s ease, background .15s ease; }
button:hover { transform: translateY(-1px); }
button:disabled { cursor: not-allowed; opacity: .42; transform: none; }
.primary { background: var(--accent); color: #03222e; }
.primary:hover { background: #66d9f5; }
.ghost { background: #162635; color: #dceaf3; border: 1px solid #2a4254; }
.danger-button { background: var(--danger); color: #25070a; }
.full { width: 100%; }
.error-text { min-height: 1.2em; color: var(--danger); font-size: .9rem; }
.topbar, .section-heading, .dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.top-actions, .toolbar-actions, .dialog-actions, .card-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.badge { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 7px 10px; font-size: .76rem; font-weight: 900; }
.badge.success { color: #9ff5cd; background: rgba(69, 210, 154, .12); border: 1px solid rgba(69, 210, 154, .28); }
.badge.warning { color: #ffe1a0; background: rgba(244, 190, 85, .1); border: 1px solid rgba(244, 190, 85, .3); }
.badge.danger { color: #ffb0b5; background: rgba(255, 111, 120, .1); border: 1px solid rgba(255, 111, 120, .28); }
.badge.neutral { color: #b9d0df; background: rgba(158, 176, 191, .1); border: 1px solid var(--border); }
.status-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 24px 0; }
.status-card, .panel, .source-card { background: rgba(13, 24, 35, .9); border: 1px solid var(--border); border-radius: 17px; box-shadow: 0 12px 35px rgba(0, 0, 0, .14); }
.status-card { display: grid; gap: 8px; padding: 20px; }
.status-card span, .status-card small { color: var(--muted); }
.status-card strong { font-size: 1.55rem; }
.panel { padding: 20px; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 22px; }
.compact-field { min-width: 155px; margin: 0; gap: 5px; font-size: .72rem; }
.compact-field input { padding: 10px 11px; text-transform: uppercase; }
.sources-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; margin: 16px 0 24px; }
.source-card { padding: 20px; }
.source-card-header { display: flex; justify-content: space-between; gap: 16px; }
.source-card h3 { margin: 4px 0; font-size: 1.08rem; overflow-wrap: anywhere; }
.source-code { color: var(--muted); font: 700 .76rem ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.source-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.meta-box { padding: 12px; background: #09141e; border: 1px solid #1b3041; border-radius: 11px; }
.meta-box span { display: block; color: var(--muted); font-size: .7rem; margin-bottom: 5px; }
.meta-box strong { font-size: .88rem; overflow-wrap: anywhere; }
details { margin: 14px 0; border-top: 1px solid #1d3243; padding-top: 12px; }
summary { cursor: pointer; color: #c8dae6; font-size: .86rem; font-weight: 800; }
pre { max-height: 420px; overflow: auto; padding: 15px; border: 1px solid #22394a; border-radius: 12px; background: #07121b; color: #cde0ea; font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.audit-panel { margin-top: 10px; }
.table-wrap { overflow-x: auto; margin-top: 14px; }
table { width: 100%; border-collapse: collapse; font-size: .84rem; }
th, td { padding: 12px 10px; border-bottom: 1px solid #1d3243; text-align: left; vertical-align: top; }
th { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
dialog { width: min(600px, calc(100% - 28px)); border: 1px solid var(--border); border-radius: 20px; background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(1, 7, 12, .78); backdrop-filter: blur(4px); }
.dialog-form { padding: 6px; }
.icon-button { width: 36px; height: 36px; padding: 0; border-radius: 10px; background: #172735; color: var(--text); font-size: 1.45rem; }
.dialog-actions { justify-content: flex-end; margin-top: 22px; }
.security-note, .confirm-code { padding: 12px; border: 1px solid #254158; border-radius: 10px; background: #0a1721; color: #bcd0de; font-size: .84rem; }
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 20; max-width: min(440px, calc(100% - 40px)); padding: 14px 16px; border-radius: 12px; background: #173044; border: 1px solid #2d536c; box-shadow: var(--shadow); font-weight: 700; }
.toast.error { background: #3a161a; border-color: #743039; }
.empty-state { grid-column: 1 / -1; padding: 45px 25px; text-align: center; color: var(--muted); border: 1px dashed #2b4558; border-radius: 16px; }
@media (max-width: 850px) {
  .status-grid { grid-template-columns: 1fr; }
  .toolbar, .topbar { align-items: stretch; flex-direction: column; }
  .toolbar-actions { align-items: stretch; }
  .toolbar-actions > * { flex: 1 1 170px; }
  .source-meta { grid-template-columns: 1fr; }
}

.status-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.clients-toolbar { margin-top: 10px; }
.clients-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; margin: 16px 0 24px; }
.client-card { padding: 20px; background: rgba(13, 24, 35, .9); border: 1px solid var(--border); border-radius: 17px; box-shadow: 0 12px 35px rgba(0, 0, 0, .14); }
.client-card h3 { margin: 4px 0; font-size: 1.08rem; overflow-wrap: anywhere; }
.permission-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 18px; }
.permission-fieldset { margin: 20px 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: #09141e; }
.permission-fieldset legend { padding: 0 7px; color: #d7e4ed; font-size: .85rem; font-weight: 800; }
.check-row { display: flex; grid-template-columns: none; align-items: center; gap: 10px; margin: 10px 0; color: #d7e4ed; font-size: .88rem; font-weight: 700; }
.check-row input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
input[readonly] { opacity: .72; cursor: not-allowed; }
@media (max-width: 1100px) { .status-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 850px) { .status-grid--four { grid-template-columns: 1fr; } }


/* v0.1.15 ephemeral live node flow */
.flow-dialog{width:min(1180px,96vw);max-width:none}.flow-dialog-form{width:100%;max-width:none}.flow-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}.flow-nodes{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-bottom:14px}.flow-node{border:1px solid var(--line,#d0d5dd);border-radius:10px;padding:12px;background:rgba(127,127,127,.05)}.flow-node h3{margin:0 0 8px;font-size:14px}.flow-node-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:12px}.flow-node-grid span{color:var(--muted,#667085)}.flow-table-wrap{max-height:52vh;overflow:auto}.flow-table td,.flow-table th{white-space:nowrap}.flow-event-bad{font-weight:700;color:#b42318}.flow-event-warn{font-weight:700;color:#b54708}.flow-event-good{font-weight:700;color:#067647}


/* v0.1.16 live-flow interaction hardening */
#flowButton{border-color:rgba(52,120,246,.55);box-shadow:inset 0 0 0 1px rgba(52,120,246,.08)}
.flow-dialog[open]{display:block}.flow-dialog-form{max-height:90vh;overflow:hidden}.flow-nodes:empty::after{content:"Sin snapshot todavía. La ventana permanecerá abierta mientras conecta.";display:block;color:var(--muted,#667085);padding:12px;border:1px dashed var(--line,#d0d5dd);border-radius:10px}.flow-table-wrap tbody:empty::after{content:"Esperando tráfico real del pool…";display:block;padding:14px;color:var(--muted,#667085)}

.delete-inline-error{margin:8px 0 0;padding:10px 12px;border:1px solid rgba(255,100,120,.55);border-radius:10px;background:rgba(120,20,35,.22);color:#ff9aa8;font-weight:700;}