* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #101317;
  color: #e9eef2;
}
.layout { display: grid; grid-template-columns: 230px 1fr; min-height: 100vh; }
.sidebar {
  border-right: 1px solid #2b3138;
  background: #161b21;
  padding: 16px 12px;
}
.sidebar h1 { margin: 0 0 16px 0; font-size: 22px; }
.side-nav { display: grid; gap: 8px; margin-bottom: 16px; }
a { color: #8ec7ff; text-decoration: none; }
.side-nav a {
  display: block;
  padding: 10px 12px;
  border: 1px solid #2f3740;
  border-radius: 6px;
  background: #1a2028;
  color: #dce7f3;
}
.side-nav a.active {
  background: #1f3a56;
  border-color: #315981;
  color: #ffffff;
  font-weight: 700;
}
.sidebar form button { width: 100%; }
.content { padding: 20px; max-width: 1100px; margin: 0 auto; }
.center { min-height: 100vh; display: grid; place-items: center; }
.panel, .card {
  background: #1c2127;
  border: 1px solid #2b3138;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.stack { display: grid; gap: 8px; }
.inline { display: inline-flex; gap: 8px; align-items: center; }
.row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #2b3138;
}
input, select, button {
  border: 1px solid #3a424b;
  background: #0f1215;
  color: #f1f5f9;
  padding: 8px 10px;
  border-radius: 6px;
}
.password-field {
  display: grid;
  grid-template-columns: 1fr 42px;
  align-items: stretch;
  width: 100%;
}
.password-field input {
  width: 100%;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.password-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background: #202833;
  color: #dce7f3;
  padding: 0;
  font-size: 17px;
  line-height: 1;
}
.password-toggle.active {
  background: #315981;
  color: #ffffff;
}
button { cursor: pointer; background: #295075; border-color: #3d6a92; font-weight: 700; }
button:hover { filter: brightness(1.08); }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #3a424b;
  border-radius: 6px;
  padding: 8px 12px;
  color: #f1f5f9;
  background: #26313d;
  font-weight: 700;
}
.btn.primary { background: #295075; border-color: #3d6a92; }
.btn.success { background: #1f6a3b; border-color: #2f9151; }
.btn.danger { background: #7a2c2c; border-color: #9c4242; }
.btn.warn { background: #6f5422; border-color: #987433; }
.btn.ghost { background: #232a33; border-color: #3a424b; }
.muted { color: #a5b3c1; }
.error { color: #ff8080; }
.ok { color: #90ee90; }
.warn-text { color: #facc15; font-weight: 700; }
.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 12px;
}
.metric-card {
  border: 1px solid #2b3138;
  border-radius: 8px;
  background: #151a20;
  padding: 14px;
}
.metric-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}
.metric-head span {
  color: #aab6c6;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
.metric-head strong {
  font-size: 22px;
}
.meter {
  height: 16px;
  overflow: hidden;
  border: 1px solid #34404c;
  border-radius: 8px;
  background: #0f1215;
}
.meter span {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: 8px;
  background: linear-gradient(90deg, #2f9151, #facc15);
}
.meter.memory span {
  background: linear-gradient(90deg, #3d6a92, #4ade80);
}
.account-form {
  max-width: 520px;
}
.user-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.user-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(320px, 2fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid #2b3138;
  background: #151a20;
  border-radius: 8px;
  padding: 12px;
}
.badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid #8a6b25;
  border-radius: 6px;
  background: #3a2d13;
  color: #facc15;
  padding: 3px 7px;
  margin-left: 8px;
  font-size: 12px;
  font-weight: 700;
}
.reset-form input[type="password"] {
  min-width: 180px;
}
.checkbox-label {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: #c8d3df;
  font-size: 13px;
}
.checkbox-label input {
  width: auto;
}
.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
  border: 1px solid #2b3138;
}
.status-dot.online { background: #4ade80; }
.status-dot.pending { background: #facc15; }
.status-dot.offline { background: #ef4444; }
.server-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #2b3138;
  background: #1c222b;
  border-radius: 8px;
  padding: 14px;
  color: #e9eef2;
}
.server-link:hover {
  border-color: #4a617a;
  background: #202935;
}
.server-info {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}
.info-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border: 1px solid #2f3740;
  background: #151a20;
  border-radius: 6px;
  padding: 10px 12px;
}
.info-row span { color: #a5b3c1; }
.info-row strong { color: #ffffff; }
.config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 14px;
  margin: 16px 0;
}
.config-card {
  display: grid;
  gap: 8px;
  background: #1b2028;
  border: 1px solid #2b3138;
  border-radius: 8px;
  padding: 14px;
}
.config-label {
  color: #aab6c6;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
.config-card input {
  width: 100%;
  min-height: 34px;
}
.config-help {
  color: #7f8c9d;
  font-size: 12px;
  line-height: 1.35;
}
.advanced-config {
  border: 1px solid #2b3138;
  border-radius: 8px;
  padding: 12px;
  background: #151a20;
}
.advanced-config summary {
  cursor: pointer;
  color: #dce7f3;
  font-weight: 700;
}
.advanced-config .terminal { margin-top: 12px; }
pre {
  white-space: pre-wrap;
  background: #111418;
  border: 1px solid #2b3138;
  border-radius: 6px;
  padding: 10px;
}
.terminal-window {
  height: calc(100vh - 230px);
  min-height: 360px;
  max-height: 760px;
  overflow: auto;
  margin: 14px 0 0;
  font-family: "Courier New", monospace;
  font-size: 13px;
  line-height: 1.4;
}
.terminal {
  width: 100%;
  min-height: 420px;
  background: #0f1215;
  color: #f1f5f9;
  border: 1px solid #3a424b;
  border-radius: 6px;
  padding: 10px;
  font-family: "Courier New", monospace;
  font-size: 13px;
}
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { border-right: 0; border-bottom: 1px solid #2b3138; }
  .metric-grid { grid-template-columns: 1fr; }
  .config-grid { grid-template-columns: 1fr; }
  .user-row { grid-template-columns: 1fr; }
  .reset-form { align-items: stretch; }
  .terminal-window { height: calc(100vh - 330px); }
}