:root{
  --primary: rgb(23,13,86);
  --secondary: rgb(252,189,16);
  --online: rgb(40,167,69);
  --white: #ffffff;
}

*{box-sizing:border-box;margin:0;padding:0;font-family:Inter, Arial, sans-serif}
body{background:#f4f6fb;color:#111;min-height:100vh}
.topbar{
  background:var(--primary);
  color:var(--white);
  padding:18px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:600;
  font-size:18px;
}

.topbar .gear{
  font-size:20px;
  color:var(--white);
  text-decoration:none;
  margin-left:8px;
}
.topbar .gear:hover{opacity:0.8;}
.container{
  max-width:960px;
  margin:36px auto;
  padding:24px;
}
.node-card{
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  background:var(--white);
  border-radius:10px;
  padding:18px 22px;
  box-shadow:0 6px 18px rgba(11,12,40,0.08);
  border-left:6px solid var(--primary);
}

.card-right{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.card-actions{
  display:flex;
  gap:8px;
  align-items:center;
}

.node-title{font-size:20px;color:#111;font-weight:700;line-height:1.1;overflow-wrap:break-word;word-break:break-word}
.node-card > div:first-child{flex:1;min-width:0}
.node-light{
  width:28px;height:28px;border-radius:50%;
  background:var(--secondary);
  box-shadow:0 0 18px 6px rgba(252,189,16,0.22), 0 0 8px rgba(252,189,16,0.4) inset;
  margin-left:16px;
}

.node-light.online{
  background:var(--online);
  box-shadow:0 0 18px 6px rgba(40,167,69,0.22), 0 0 8px rgba(40,167,69,0.4) inset;
}

.node-light.offline{
  background: #dc3545; /* rojo */
  box-shadow:0 0 18px 6px rgba(220,53,69,0.22), 0 0 8px rgba(220,53,69,0.4) inset;
}

.node-light.disabled{
  background:#9aa0a6; /* gris */
  box-shadow:0 0 10px 4px rgba(150,150,150,0.12) inset;
}

.status-container{
  display:flex;
  align-items:center;
  gap:8px;
}

.status-container .node-light{margin-left:0;}

/* grid for node cards */
.nodes-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(400px,1fr));
  gap:16px;
  margin-top:16px;
}

/* Responsive */
@media(max-width:520px){
  .node-card{flex-direction:column;gap:12px;align-items:flex-start}
  .card-right{width:100%;flex-direction:row;justify-content:space-between}
  .card-actions{justify-content:flex-start}
}

/* modal and form styles */
.btn-primary{
  background:var(--primary);
  color:var(--white);
  border:none;
  padding:8px 16px;
  border-radius:4px;
  cursor:pointer;
  font-weight:600;
}
.btn-primary:hover{opacity:0.9}

.modal{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,0.4);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1000;
}
.modal[aria-hidden="false"]{display:flex}
.modal-content{
  background:var(--white);
  padding:24px;
  border-radius:8px;
  width:90%;
  max-width:400px;
  position:relative;
  box-shadow:0 6px 18px rgba(11,12,40,0.08);
}
.modal-close{
  position:absolute;
  top:12px;
  left:12px;
  background:transparent;
  border:none;
  font-size:20px;
  cursor:pointer;
}
.form-group{
  margin-bottom:16px;
  display:flex;
  flex-direction:column;
}
.form-group label{margin-bottom:4px;font-size:14px;}
.form-group input{padding:8px;border:1px solid #ccc;border-radius:4px;}

.node-table{
  width:100%;
  border-collapse:collapse;
  margin-top:16px;
}
.node-table th, .node-table td{
  border:1px solid #ddd;
  padding:8px;
  text-align:left;
}
.node-table th{background:var(--primary);color:var(--white);}

.btn-primary.small{padding:4px 8px;font-size:12px;}