/* ============================================================
   VManNet Demo — replicates the actual platform layout
   (variables and selectors taken from Scripts/Django/Frontend/new.py)
   ============================================================ */
:root {
  --bg:#0a0e0d;
  --panel:rgba(16,22,21,0.82);
  --panel-border:rgba(125,227,138,0.12);
  --teal:#1E8A7A;
  --teal-bright:#2bc2a8;
  --green:#7de38a;
  --amber:#ffb547;
  --red:#ff5c5c;
  --text:#e8efeb;
  --text-dim:#8c9a93;
  --text-mute:#5e6b65;
  --grid: rgba(255,255,255,0.035);
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  overflow: hidden;
}
body {
  background:
    radial-gradient(circle at 20% 10%, rgba(30,138,122,0.10), transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(125,227,138,0.06), transparent 40%),
    var(--bg);
}

/* ---------------- TOPBAR ---------------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index: 10;
  display: flex; align-items: center; gap: 20px; padding: 0 20px;
  background: linear-gradient(180deg, rgba(10,14,13,0.95), rgba(10,14,13,0.55));
  border-bottom: 1px solid var(--panel-border);
  backdrop-filter: blur(12px);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -0.01em; }
.brand .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .4 } }
.crumb { color: var(--text-mute); font-size: 13px; }
.crumb .sep { margin: 0 8px; color: var(--text-mute); }
.crumb b { color: var(--text); font-weight: 500; }
.tabs { display: flex; gap: 2px; margin-left: 8px; }
.tab { padding: 6px 14px; font-size: 13px; color: var(--text-dim); border-radius: 6px; cursor: pointer; transition: all .15s; text-decoration: none; display: inline-block; }
.tab:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.tab.active { color: var(--text); background: rgba(30,138,122,0.18); box-shadow: inset 0 0 0 1px rgba(30,138,122,0.35); }
.spacer { flex: 1; }
.search { position: relative; }
.search input {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  color: var(--text);
  font: 13px/1 'JetBrains Mono', monospace;
  padding: 8px 12px 8px 32px; border-radius: 6px; width: 260px; outline: none;
}
.search input:focus { border-color: rgba(30,138,122,0.5); background: rgba(30,138,122,0.06); }
.search svg { position: absolute; left: 10px; top: 9px; opacity: .5; }
.btn {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); color: var(--text);
  padding: 7px 12px; border-radius: 6px; font: 500 13px 'Space Grotesk'; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; transition: all .15s;
}
.btn:hover { background: rgba(30,138,122,0.15); border-color: rgba(30,138,122,0.4); }
.btn.primary { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn.primary:hover { background: var(--teal-bright); }

/* ---------------- PAGE WRAP ---------------- */
.page { position: fixed; inset: 56px 0 0 0; overflow: hidden; }
.page[hidden] { display: none; }

/* shared scrollable page for non-grid tabs (graficos, modems, clientes, config, etc.) */
.page-wrap { position: absolute; inset: 0; overflow: auto; padding: 24px 32px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head h1 { margin: 0; font: 600 22px/1.2 'Space Grotesk'; letter-spacing: -0.01em; }
.page-head .lead { margin: 4px 0 0; color: var(--text-dim); font-size: 13.5px; max-width: 640px; }
.page-actions { display: flex; gap: 10px; align-items: center; }
.seg { display: inline-flex; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; padding: 3px; }
.seg button { background: transparent; border: none; color: var(--text-dim); padding: 6px 12px; border-radius: 4px; font: 500 12px 'Space Grotesk'; cursor: pointer; }
.seg button.active { background: rgba(30,138,122,0.25); color: var(--text); }

/* ---------------- SIDE (sidebar in estado/topo/mapa) ---------------- */
.side {
  padding: 18px 16px;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(15,21,19,0.6), rgba(10,14,13,0.2));
  border-right: 1px solid var(--panel-border);
}
.side.right { border-right: none; border-left: 1px solid var(--panel-border); }
.side h4 { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-mute); margin: 0 0 10px; font-weight: 500; }
.side section { margin-bottom: 22px; }

.filter { display: flex; align-items: center; justify-content: space-between; padding: 6px 2px; cursor: pointer; user-select: none; }
.filter:hover { color: #fff; }
.filter .lbl { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-dim); }
.filter input[type=checkbox] { appearance: none; width: 14px; height: 14px; border: 1px solid rgba(255,255,255,0.2); border-radius: 3px; cursor: pointer; position: relative; }
.filter input[type=checkbox]:checked { background: var(--teal); border-color: var(--teal); }
.filter input[type=checkbox]:checked::after {
  content: ''; position: absolute; inset: 2px;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M6 12L2 8l1.4-1.4L6 9.2l6.6-6.6L14 4z'/%3E%3C/svg%3E");
}
.filter .count { font: 11px/1 'JetBrains Mono'; color: var(--text-mute); }
.filter .swatch { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.filter .line { width: 18px; height: 2px; flex-shrink: 0; }
.quick { display: flex; flex-direction: column; gap: 4px; }
.quick button {
  display: flex; align-items: center; justify-content: space-between;
  background: transparent; border: 1px solid transparent;
  color: var(--text-dim); padding: 8px 10px; border-radius: 6px;
  cursor: pointer; font: 13px 'Space Grotesk'; text-align: left;
}
.quick button:hover { color: var(--text); background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.05); }
.quick button.active { color: var(--text); background: rgba(30,138,122,0.12); border-color: rgba(30,138,122,0.3); }

.kv { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; font-size: 13px; padding: 4px 0; }
.kv .k { color: var(--text-mute); }
.kv .v { color: var(--text); font-family: 'JetBrains Mono', monospace; font-size: 12px; text-align: right; }

/* ---------------- ESTADO TAB ---------------- */
.estado-wrap { position: absolute; inset: 0; display: grid; grid-template-columns: 260px 1fr; overflow: hidden; }
.estado-main { position: relative; overflow: auto; padding: 0 24px 20px; }
.estado-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 20px 0 18px; }
.estado-stat { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 10px; padding: 14px 16px; backdrop-filter: blur(8px); }
.estado-stat .l { font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--text-mute); }
.estado-stat .v { font: 600 22px/1 'JetBrains Mono'; margin-top: 6px; font-variant-numeric: tabular-nums; }
.estado-stat .v.green { color: var(--green); }
.estado-stat .v.amber { color: var(--amber); }
.estado-stat .v.red { color: var(--red); }

.tbl-wrap { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 10px; position: relative; }
.tbl-head {
  display: grid;
  grid-template-columns: 24px minmax(150px,1.3fr) 110px 110px 90px 80px 70px 60px 80px 90px 90px 90px 40px;
  gap: 8px; padding: 10px 14px;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute);
  border-bottom: 1px solid var(--panel-border);
  position: sticky; top: 0; z-index: 5;
  background: rgba(10,14,13,0.98); backdrop-filter: blur(8px);
  border-top-left-radius: 10px; border-top-right-radius: 10px;
}
.tbl-row {
  display: grid;
  grid-template-columns: 24px minmax(150px,1.3fr) 110px 110px 90px 80px 70px 60px 80px 90px 90px 90px 40px;
  gap: 8px; padding: 9px 14px;
  font-size: 12.5px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  align-items: center; cursor: pointer;
}
.tbl-row:hover { background: rgba(30,138,122,0.06); }
.tbl-row .nm { font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbl-row .mono { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text-dim); }
.tbl-row .ip-link { color: var(--teal-bright); text-decoration: none; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; }
.tbl-row .ip-link:hover { text-decoration: underline; }
.tbl-row .caret { color: var(--text-mute); transition: transform .15s; display: inline-block; }
.tbl-row.expanded .caret { transform: rotate(90deg); color: var(--teal-bright); }
.tbl-row .menu-btn { background: transparent; border: none; color: var(--text-dim); cursor: pointer; padding: 4px; border-radius: 4px; font-size: 16px; line-height: 1; }
.tbl-row .menu-btn:hover { background: rgba(255,255,255,0.06); color: var(--teal-bright); }

.tbl-detail { padding: 14px 18px 18px 42px; background: rgba(8,12,11,0.55); border-bottom: 1px solid rgba(255,255,255,0.03); }
.tbl-detail .bw-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.tbl-detail .bw-card { background: rgba(30,138,122,0.08); border-left: 3px solid var(--teal-bright); border-radius: 6px; padding: 8px 12px; }
.tbl-detail .bw-card.mt { border-left-color: #00838f; background: rgba(0,131,143,0.08); }
.tbl-detail .bw-card .l { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); }
.tbl-detail .bw-card .v { font: 600 16px 'JetBrains Mono'; margin-top: 3px; color: var(--text); }
.tbl-detail .info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 24px; }
.tbl-detail .info-row { display: grid; grid-template-columns: 110px 1fr; gap: 8px; font-size: 11.5px; align-items: baseline; }
.tbl-detail .info-row .k { color: var(--text-mute); font-weight: 500; }
.tbl-detail .info-row .v { color: var(--text); font-family: 'JetBrains Mono', monospace; word-break: break-word; }
.tbl-detail .detail-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.tbl-detail .detail-head h5 { margin: 0; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-bright); font-weight: 600; }
.tbl-detail .reinit-btn { background: transparent; border: 1px solid rgba(38,198,218,0.5); color: #26c6da; font: 500 11px 'Space Grotesk'; padding: 5px 12px; border-radius: 5px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.tbl-detail .reinit-btn:hover { background: rgba(38,198,218,0.1); }

.group-hdr {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: rgba(30,138,122,0.08);
  border-bottom: 1px solid var(--panel-border);
  cursor: pointer; user-select: none;
  position: sticky; top: 32px; z-index: 1;
  backdrop-filter: blur(6px);
}
.group-hdr .arrow { width: 14px; color: var(--teal-bright); transition: transform .2s; }
.group-hdr.collapsed .arrow { transform: rotate(-90deg); }
.group-hdr .title { color: var(--teal-bright); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; flex: 1; }
.group-hdr .pill { background: rgba(84,110,122,0.2); color: #90caf9; font: 500 10.5px 'JetBrains Mono'; padding: 3px 8px; border-radius: 10px; }
.group-hdr .pill.on { background: rgba(76,175,80,0.15); color: #81c784; }
.group-hdr .pill.off { background: rgba(244,67,54,0.15); color: #e57373; }

.status-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 10px; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; }
.status-chip.on { background: rgba(76,175,80,0.16); color: #81c784; }
.status-chip.off { background: rgba(244,67,54,0.15); color: #e57373; }
.status-chip.warn { background: rgba(255,193,7,0.15); color: #ffb74d; }
.status-chip .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.sig-chip { display: inline-flex; align-items: center; gap: 4px; font-family: 'JetBrains Mono', monospace; font-size: 11px; padding: 2px 6px; border-radius: 6px; }
.sig-chip.good { background: rgba(76,175,80,0.12); color: #81c784; }
.sig-chip.fair { background: rgba(255,193,7,0.12); color: #ffb74d; }
.sig-chip.poor { background: rgba(244,67,54,0.12); color: #e57373; }
.sig-chip.na { color: var(--text-mute); }

.role-chip { padding: 2px 8px; border-radius: 10px; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; display: inline-block; }
.role-chip.master { background: rgba(25,118,210,0.35); color: #90caf9; border: 1px solid rgba(66,165,245,0.4); }
.role-chip.managed { background: rgba(0,150,136,0.3); color: #80cbc4; border: 1px solid rgba(38,166,154,0.4); }
.ping-ok { color: #81c784; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; }
.ping-warn { color: #ffb74d; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; }
.ping-bad { color: #e57373; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; }
.caidas-bad { color: #e57373; font-weight: 600; }
.caidas-ok { color: var(--text-dim); }
.est-empty { padding: 60px; text-align: center; color: var(--text-mute); font-size: 13px; }

/* ---------------- TOPOLOGIA ---------------- */
.app { position: absolute; inset: 0; display: grid; grid-template-columns: 260px 1fr 340px; }
.stage { position: relative; overflow: hidden; background: var(--bg); }
.grid-bg { position: absolute; inset: 0; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%); }
svg#graph { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; }
svg#graph.dragging { cursor: grabbing; }
.stats { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; gap: 8px; pointer-events: none; }
.stat { background: var(--panel); border: 1px solid var(--panel-border); padding: 10px 14px; border-radius: 8px; backdrop-filter: blur(8px); pointer-events: auto; }
.stat .label { font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--text-mute); }
.stat .value { font: 600 20px/1 'JetBrains Mono'; margin-top: 4px; font-variant-numeric: tabular-nums; }
.stat .value.green { color: var(--green); }
.stat .value.amber { color: var(--amber); }
.stat .value.red { color: var(--red); }
.zoom { position: absolute; right: 16px; bottom: 16px; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--panel-border); border-radius: 8px; overflow: hidden; backdrop-filter: blur(8px); }
.zoom button { width: 36px; height: 36px; background: transparent; border: none; color: var(--text); cursor: pointer; font: 500 16px 'JetBrains Mono'; border-bottom: 1px solid var(--panel-border); }
.zoom button:last-child { border-bottom: none; }
.zoom button:hover { background: rgba(30,138,122,0.15); }
.legend { position: absolute; left: 16px; bottom: 16px; background: var(--panel); border: 1px solid var(--panel-border); padding: 12px 14px; border-radius: 8px; backdrop-filter: blur(8px); font-size: 12px; max-width: 240px; }
.legend h5 { margin: 0 0 8px; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--text-mute); font-weight: 500; }
.legend .row { display: flex; align-items: center; gap: 8px; margin: 5px 0; color: var(--text-dim); }
.legend .swatch { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.tooltip { position: absolute; pointer-events: none; z-index: 5; background: rgba(8,12,11,0.96); border: 1px solid var(--panel-border); padding: 8px 10px; border-radius: 6px; font-size: 12px; transform: translate(8px, 8px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .12s; }
.tooltip.show { opacity: 1; }
.tooltip .name { font-weight: 600; }
.tooltip .meta { color: var(--text-dim); font: 11px 'JetBrains Mono'; margin-top: 2px; }
.node-label { font: 500 11px 'JetBrains Mono'; fill: var(--text-dim); pointer-events: none; text-anchor: middle; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; }
.ins-empty { color: var(--text-mute); font-size: 13px; line-height: 1.6; padding: 24px 4px; text-align: center; }
.ins-empty .emoji { font-size: 28px; margin-bottom: 8px; opacity: .5; }

/* ---------------- MAPA ---------------- */
.mapa-wrap { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto; overflow: hidden; }
.mapa-main { position: relative; overflow: hidden; display: grid; grid-template-columns: 260px 1fr; height: calc(70vh - 28px); }
#mapBox { position: relative; width: 100%; height: 100%; background: #0c1412; }
#mapBox .leaflet-container { background: #0c1412; font-family: 'Space Grotesk', system-ui, sans-serif; }
.mapa-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.mapa-summary .s { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 10px; padding: 10px 12px; }
.mapa-summary .s .l { font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--text-mute); }
.mapa-summary .s .v { font: 600 18px/1 'JetBrains Mono'; margin-top: 4px; font-variant-numeric: tabular-nums; }
.mapa-summary .s .v.green { color: var(--green); }
.mapa-summary .s .v.red { color: var(--red); }
.mapa-nogps { position: relative; overflow: auto; max-height: 30vh; padding: 14px 24px; border-top: 1px solid var(--panel-border); background: rgba(10,14,13,0.55); }
.mapa-nogps h3 { color: #e57373; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 10px; font-weight: 600; }
.mapa-pop { font-family: 'Space Grotesk', system-ui, sans-serif; color: #0a0e0d; min-width: 180px; }
.mapa-pop b { display: block; font-size: 13px; margin-bottom: 4px; color: #0a0e0d; }
.mapa-pop .ip { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: #455a64; }
.mapa-pop .st { margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.mapa-pop .st.on { background: rgba(129,199,132,0.3); color: #2e7d32; }
.mapa-pop .st.off { background: rgba(229,115,115,0.3); color: #c62828; }
.mapa-pop .st.warn { background: rgba(255,204,128,0.3); color: #ef6c00; }
.leaflet-popup-content-wrapper { background: #fff; border-radius: 8px; }
.mapa-marker { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #0a0e0d; box-shadow: 0 0 8px currentColor; }
.leaflet-control-attribution { background: rgba(10,14,13,0.7) !important; color: var(--text-mute) !important; font-size: 10px !important; }
.leaflet-control-attribution a { color: var(--text-dim) !important; }
.leaflet-bar a { background: rgba(10,14,13,0.85) !important; color: var(--text) !important; border-color: var(--panel-border) !important; }
.nogps-tbl { display: grid; grid-template-columns: 24px minmax(180px,1.6fr) 140px 100px 100px; gap: 8px; padding: 8px 14px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); background: rgba(10,14,13,0.6); border: 1px solid var(--panel-border); border-bottom: none; border-radius: 8px 8px 0 0; }
.nogps-row { display: grid; grid-template-columns: 24px minmax(180px,1.6fr) 140px 100px 100px; gap: 8px; padding: 8px 14px; font-size: 12.5px; border: 1px solid var(--panel-border); border-top: none; border-bottom: none; background: var(--panel); }
.nogps-row:last-child { border-bottom: 1px solid var(--panel-border); border-radius: 0 0 8px 8px; }

/* ---------------- GRAFICOS ---------------- */
.metric-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.metric-card { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 10px; padding: 16px 18px; backdrop-filter: blur(8px); }
.metric-card.wide { grid-column: span 2; }
.mc-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.mc-head > span:first-child { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); font-weight: 500; }
.mc-val { font: 600 18px/1 'JetBrains Mono'; font-variant-numeric: tabular-nums; }
.mc-val.green { color: var(--green); }
.mc-val.amber { color: var(--amber); }
.mc-val.red { color: var(--red); }
.chart-big { width: 100%; height: 140px; display: block; }

/* ---------------- MODEMS ---------------- */
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; background: var(--panel); border: 1px solid var(--panel-border); border-radius: 10px; padding: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); }
.ipt { background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.08); color: var(--text); padding: 9px 11px; border-radius: 6px; font: 13px/1 'JetBrains Mono', monospace; outline: none; }
.ipt:focus { border-color: var(--teal-bright); }
.modems-actions { display: flex; gap: 8px; margin: 14px 0; }
.build-log { background: #000; border: 1px solid #1a1a1a; border-radius: 6px; padding: 14px; font: 12px/1.55 'JetBrains Mono', monospace; min-height: 220px; color: var(--text-dim); }

/* ---------------- SSH ---------------- */
.ssh-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 14px; height: calc(100vh - 196px); min-height: 480px; }
.ssh-left, .ssh-right { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; overflow: hidden; backdrop-filter: blur(8px); }
.ssh-bar { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.ssh-bar .lbl { flex: 1; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); }
.ssh-bar input { flex: 1.5; min-width: 0; }
.ssh-bar .mono { color: var(--teal-bright); font-family: 'JetBrains Mono', monospace; text-transform: none; letter-spacing: 0; }
.chip-list { flex: 1; min-height: 120px; max-height: 240px; overflow-y: auto; padding: 8px; background: rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.06); border-radius: 6px; display: flex; flex-wrap: wrap; gap: 5px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: rgba(10,14,13,0.6); border: 1px solid rgba(255,255,255,0.06); border-radius: 99px; font: 500 11.5px/1 'Space Grotesk'; color: var(--text-dim); cursor: pointer; transition: all .12s; }
.chip:hover { color: var(--text); border-color: rgba(255,255,255,0.15); }
.chip.is-on { background: rgba(43,194,168,0.12); border-color: var(--teal-bright); color: var(--teal-bright); }
.chip .vendor { font-family: 'JetBrains Mono', monospace; font-size: 10px; opacity: 0.7; }
.preset-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.preset { background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.08); color: var(--text-dim); padding: 6px 10px; border-radius: 4px; font: 500 11.5px/1.2 'JetBrains Mono', monospace; cursor: pointer; }
.preset:hover { color: var(--teal-bright); border-color: rgba(43,194,168,0.4); }
.cmd-input { width: 100%; font-family: 'JetBrains Mono', monospace; resize: none; margin-bottom: 12px; }
#sshRun { align-self: flex-start; }
.terminal-head { display: flex; align-items: center; gap: 6px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--panel-border); }
.terminal-head .dot { width: 11px; height: 11px; border-radius: 50%; box-shadow: none; animation: none; }
.terminal-head .dot-r { background: #ff5f57; }
.terminal-head .dot-y { background: #ffbd2e; }
.terminal-head .dot-g { background: #27c93f; }
.terminal-head .mono { margin-left: 8px; color: var(--text-mute); font-size: 11.5px; }
#terminal { flex: 1; overflow-y: auto; background: rgba(0,0,0,0.45); border-radius: 6px; padding: 14px; font: 500 12px/1.55 'JetBrains Mono', monospace; color: var(--text); margin: 0; white-space: pre-wrap; word-break: break-all; }
#terminal .host { color: var(--teal-bright); }
#terminal .ok   { color: var(--green); }
#terminal .err  { color: var(--red); }
#terminal .dim  { color: var(--text-dim); }

/* ---------------- CONFIG / AYUDA ---------------- */
.cfg-grid, .help-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cfg-card { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 10px; padding: 16px 18px; backdrop-filter: blur(8px); }
.cfg-card h3 { margin: 0 0 12px; font: 600 13px 'Space Grotesk'; letter-spacing: 0; color: var(--teal-bright); }
.kv2 { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.03); font-size: 12.5px; }
.kv2:last-child { border-bottom: none; }
.kv2 > span:first-child { color: var(--text-dim); }
.kv2 > span:last-child { color: var(--text); }
.mono { font-family: 'JetBrains Mono', monospace; }
.dim { color: var(--text-dim); }
.claude-box { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 10px; padding: 18px; }
.claude-box .lbl { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 6px; }

/* ---------------- TOAST ---------------- */
#toastHolder { position: fixed; bottom: 24px; right: 24px; z-index: 500; display: flex; flex-direction: column; gap: 8px; }
.toast { background: #0f2020; border: 1px solid var(--teal); color: var(--text); padding: 11px 18px; border-radius: 8px; font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); animation: slideIn .25s ease; }
@keyframes slideIn { from { transform: translateX(20px); opacity: 0 } to { transform: none; opacity: 1 } }
.act-menu { position: fixed; z-index: 200; background: #0f2020; border: 1px solid var(--panel-border); border-radius: 7px; min-width: 230px; box-shadow: 0 8px 32px rgba(0,0,0,.75); padding: 4px 0; display: none; }
.act-menu.open { display: block; }
.act-menu .item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; cursor: pointer; color: #cfd8dc; font-size: 13px; }
.act-menu .item:hover { background: rgba(30,138,122,0.12); }

/* ---------------- Scrollbar ---------------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }