:root{
  --bg:#202225; --panel:#2b2d31; --panel-2:#2f3136; --text:#e6e6e6;
  --muted:#b8b8b8; --brand:#6a9955; --brand-2:#8bc284; --danger:#cc6666;
  --ok:#4caf50; --poll:#9ccc65; --stroke:#3d3f45; --stroke-2:#444;
  --shadow:0 8px 24px rgba(0,0,0,.35);
  --radius:10px;
}
html,body{height:100%}
body{
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  margin:0; padding:24px;
}
h1,h2,h3{margin:0 0 16px}
h1{font-size:28px}
h2{font-size:22px}
h3{font-size:18px;color:var(--muted)}
section{background:var(--panel); border:1px solid var(--stroke); border-radius:var(--radius); padding:16px; margin:16px 0; box-shadow:var(--shadow)}

input,button,textarea{font:inherit}
input[type="password"]{
  background:var(--panel-2); color:var(--text); border:1px solid var(--stroke-2);
  padding:10px 12px; border-radius:8px; min-width:220px;
}
button{
  background:var(--brand); color:#fff; border:none; padding:10px 16px; border-radius:8px; cursor:pointer;
  transition:transform .02s ease; box-shadow:0 2px 0 rgba(0,0,0,.25) inset;
}
button:hover{background:var(--brand-2)}
button:disabled{opacity:.6; cursor:not-allowed}
button.secondary{background:#3c3f44}
button.danger{background:var(--danger)}
.btn-row{display:flex; gap:8px; flex-wrap:wrap}
.status{font-weight:600; margin-top:8px}
.status-running{color:var(--ok)}
.status-stopped{color:var(--danger)}
.status-other{color:var(--muted)}

/* log */
#logControls{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:8px}
#liveDot{display:inline-block; width:10px; height:10px; border-radius:50%; background:#777; margin-left:6px}
#logDisplay{
  white-space:pre-wrap; background:#1e1e1e; color:#dcdcdc; padding:10px;
  border:1px solid var(--stroke-2); max-height:380px; overflow-y:auto; border-radius:8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", monospace;
}

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

.table-wrap{overflow:auto; border:1px solid var(--stroke); border-radius:8px}
table{width:100%; border-collapse:collapse; background:var(--panel-2)}
th,td{padding:10px 12px; border-bottom:1px solid var(--stroke)}
th{background:#24262a; text-align:left; color:#dcdcdc; position:sticky; top:0}
tr:hover td{background:#26292e}

/* Pair Server Settings and Admins vertically with stretchy textareas */
#server-settings-section,
#server-admins-section{
  display:flex;
  flex-direction:column;
}
#server-settings-section .json-editable,
#server-admins-section .json-editable{
  flex:1 1 auto;
  min-height:280px; /* matches the settings height you already use */
  resize:vertical;
}

/* Small path badge in Admins panel */
#server-admins-section .muted code{
  background:var(--panel-2);
  padding:2px 6px;
  border-radius:6px;
  border:1px solid var(--stroke-2);
}
#server-admins-section .btn-row label{ white-space:nowrap; }


.hidden{display:none}

/* modal + toast */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; align-items:center; justify-content:center; z-index:1000;
}
.modal{width:min(520px, 92vw); background:var(--panel); border:1px solid var(--stroke); border-radius:12px; box-shadow:var(--shadow); overflow:hidden}
.modal header{padding:14px 16px; font-weight:700; border-bottom:1px solid var(--stroke)}
.modal .content{padding:16px; color:#eaeaea}
.modal footer{padding:12px 16px; border-top:1px solid var(--stroke); display:flex; gap:8px; justify-content:flex-end}
.modal .danger{background:var(--danger)}
.modal .outline{background:transparent; border:1px solid var(--stroke); color:#fff}

.toast{
  position:fixed; right:16px; bottom:16px; background:#111; color:#fff; padding:10px 14px;
  border-radius:10px; border:1px solid #333; box-shadow:var(--shadow); opacity:.97; z-index:1100;
  transform:translateY(20px); transition:transform .15s ease, opacity .15s ease;
}
.toast.show{transform:translateY(0); opacity:1}

/* ===== Chart styles & helpers ===== */
.chart-wrap{ position:relative; }
.chart-legend{ margin-top:6px; color:var(--muted); font-size:13px }
.chart-line{ fill:none; stroke-width:2.0 }
.chart-grid{ stroke:#3b3d44; stroke-width:1 }
.chart-axis{ stroke:#595b63; stroke-width:1 }
.swatch{ display:inline-block; width:10px; height:10px; background:#4caf50; border-radius:2px; margin-right:6px; vertical-align:middle }

#cpuTooltip{
  position:absolute; display:none; pointer-events:none;
  background:#111; color:#fff; padding:6px 8px; border:1px solid #444;
  border-radius:6px; font-size:12px; transform:translate(-50%,-120%);
  box-shadow: var(--shadow);
}
.countdown{ height:6px; background:var(--panel); border:1px solid var(--stroke);
  border-radius:999px; overflow:hidden; margin-top:8px }
.countdown .bar{ height:100%; width:0%; background:#4caf50; transition:width .08s linear }

.guide{ stroke:#888; stroke-dasharray:3 3 }
.marker{ fill:#4caf50; stroke:#111; stroke-width:1.5 }