:root{
  --bg:#0b0f14;
  --card:#121822;
  --muted:#9aa7b7;
  --text:#e7eef7;
  --line:#223043;
  --blue:#2f80ed;
  --green:#2ecc71;
  --yellow:#f2c94c;
  --red:#eb5757;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

.hidden{ display:none !important; }
.mt8{ margin-top:8px; }
.mt12{ margin-top:12px; }
.muted{ color:var(--muted); }

.app{
  max-width:1200px;
  margin:0 auto;
  padding:16px;
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px;
  background:linear-gradient(180deg, #111826, #0b0f14);
  border:1px solid var(--line);
  border-radius:14px;
}

.brand .logo{ font-weight:800; letter-spacing:0.4px; }
.brand .sub{ color:var(--muted); font-size:12px; margin-top:2px; }

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

/* ONLINE INDICATOR */
.net{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#0f1520;
}
.dot{
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-block;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.35) inset;
}
.dot.green{ background: var(--green); }
.dot.red{ background: var(--red); }
.dot.yellow{ background: var(--yellow); }
.netLabel{
  font-size:12px;
  color:var(--muted);
  font-weight:800;
  letter-spacing:0.4px;
}

/* RUN STATUS */
.runStatus{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-left:10px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#0f1520;
}
.runStatusText{
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  letter-spacing:0.2px;
}
.spinner{
  width:14px;
  height:14px;
  border-radius:50%;
  border:2px solid rgba(154,167,183,0.35);
  border-top-color: rgba(231,238,247,0.9);
  animation: spin 0.9s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* LAYOUT */
.app-shell .layout{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:12px;
  margin-top:12px;
}
@media (max-width: 980px){
  .app-shell .layout{ grid-template-columns:1fr; }
}

.sidebar{
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(18,24,34,0.55);
  padding:12px;
  position:sticky;
  top:12px;
  height: fit-content;
}
@media (max-width: 980px){
  .sidebar{ position:static; }
}
.content{ min-width:0; }

.acc{
  border:1px solid var(--line);
  border-radius:14px;
  background:#0f1520;
  overflow:hidden;
  margin-bottom:10px;
}
.acc[open]{ box-shadow:0 0 0 1px rgba(47,128,237,0.12) inset; }
.acc-head{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
  padding:12px;
  user-select:none;
}
.acc-head::-webkit-details-marker{ display:none; }
.acc-title{ font-weight:800; letter-spacing:0.2px; }
.acc-sub{ color:var(--muted); font-size:12px; }
.acc-body{
  padding:12px;
  border-top:1px solid rgba(34,48,67,0.6);
}

/* PANEL */
.panel{
  margin-top:0;
  padding:12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(18,24,34,0.6);
}

.panel-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}

.panel-title{ font-weight:700; }
.area-buttons{ display:flex; gap:8px; flex-wrap:wrap; }

.btn{
  background:#162032;
  color:var(--text);
  border:1px solid var(--line);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
}
.btn:hover{ filter:brightness(1.08); }
.btn.primary{
  background:var(--blue);
  border-color:#1f5fb6;
}
.btn.blue{
  background:#123055;
  border-color:#1f5fb6;
}

.select,.input,.textarea{
  width:100%;
  background:#0f1520;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 10px;
  outline:none;
}
.textarea{ resize:vertical; }

.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
@media (max-width: 980px){
  .grid-2{ grid-template-columns:1fr; }
}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
}
.card-title{ font-weight:700; margin-bottom:10px; }

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.form-grid label{ font-size:12px; color:var(--muted); }
.form-grid label .input,
.form-grid label .select{ margin-top:6px; }
.form-grid .row{
  grid-column:1 / -1;
  display:flex;
  gap:10px;
  align-items:center;
  color:var(--text);
}

.modebar{
  display:flex;
  gap:8px;
  margin-top:12px;
  align-items:center;
  flex-wrap:wrap;
}

.chips{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}
.chip{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#0f1520;
  color:var(--muted);
  font-size:12px;
}
.chip b{ color:var(--text); font-weight:700; }

.spec-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
@media (max-width: 980px){
  .spec-grid{ grid-template-columns:repeat(2, 1fr); }
}
.btn.spec{
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.btn.spec.selected{
  border-color: #2f80ed;
  background:#122742;
}
.btn.spec.primarySpec{
  border-color: #2ecc71;
  box-shadow:0 0 0 1px rgba(46,204,113,0.35) inset;
}

.alerts{ margin-top:12px; }
.alert{
  border:1px solid var(--line);
  background:#0f1520;
  padding:10px 12px;
  border-radius:14px;
  margin-bottom:8px;
}
.alert.red{ border-color:rgba(235,87,87,0.6); }
.alert.yellow{ border-color:rgba(242,201,76,0.6); }
.alert.green{ border-color:rgba(46,204,113,0.6); }

.welcome{
  margin-top:12px;
  border:1px dashed var(--line);
  border-radius:14px;
  padding:24px;
  background:rgba(15,21,32,0.4);
}
.welcome-title{ font-size:18px; font-weight:800; }

.output{ margin-top:12px; }
.kpis{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
}
.kpi{
  padding:12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(18,24,34,0.8);
}
.kpi-label{ color:var(--muted); font-size:12px; }
.kpi-val{ font-size:22px; font-weight:900; margin-top:6px; }

.tabs{
  display:flex;
  gap:8px;
  margin:12px 0;
}
.tab{
  background:#0f1520;
  color:var(--muted);
  border:1px solid var(--line);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
}
.tab.active{
  color:var(--text);
  border-color:#2f80ed;
  background:#122742;
}

.pre{
  white-space:pre-wrap;
  margin:0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size:12px;
  color:#cfe0f5;
}

.row-wrap{ display:flex; gap:8px; flex-wrap:wrap; }