* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Segoe UI", system-ui, sans-serif;
  background: #14161a;
  color: #e8e8e8;
}
.hidden { display: none !important; }
.muted { color: #9aa0a8; }
.error { color: #ff6b6b; }
.ok { color: #69db7c; }
button {
  background: #d33; color: #fff; border: 0; border-radius: 6px;
  padding: 8px 16px; font-size: 14px; cursor: pointer;
}
button:hover { background: #e44; }
button:disabled { background: #555; cursor: default; }
button.secondary { background: #2e3440; }
button.secondary:hover { background: #3b4252; }
input, select {
  background: #1e2228; color: #e8e8e8; border: 1px solid #333a44;
  border-radius: 6px; padding: 7px 10px; font-size: 14px;
}
input:focus, select:focus { outline: 1px solid #d33; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #c0c6cf; }

/* login */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-card {
  background: #1b1f26; padding: 36px 42px; border-radius: 12px; width: 340px;
  border: 1px solid #2a303a;
}
.login-card h1 { margin: 0; font-size: 22px; }
.login-card form { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }

/* layout */
header.topbar {
  display: flex; align-items: center; gap: 18px;
  background: #1b1f26; border-bottom: 1px solid #2a303a; padding: 10px 22px;
  position: sticky; top: 0; z-index: 10;
}
header.topbar h1 { font-size: 17px; margin: 0; }
header.topbar .status-pill {
  padding: 3px 12px; border-radius: 20px; font-size: 12px; font-weight: 600;
}
.status-pill.running { background: #143d1e; color: #69db7c; }
.status-pill.stopped { background: #3d1414; color: #ff6b6b; }
header.topbar nav { display: flex; gap: 4px; margin-left: auto; }
header.topbar nav button { background: transparent; color: #9aa0a8; }
header.topbar nav button.active { background: #2e3440; color: #fff; }

main { padding: 20px 22px 80px; max-width: 1500px; margin: 0 auto; }
.tab { display: none; }
.tab.active { display: block; }
h2 { font-size: 16px; border-bottom: 1px solid #2a303a; padding-bottom: 6px; margin: 26px 0 12px; }
h2:first-child { margin-top: 0; }

.grid-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.row { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }

/* pickers */
.cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px; max-height: 460px; overflow-y: auto; padding: 4px;
  border: 1px solid #2a303a; border-radius: 8px; background: #171a20;
}
.card {
  background: #1e2228; border: 2px solid transparent; border-radius: 8px;
  cursor: pointer; overflow: hidden; font-size: 12px;
}
.card img { width: 100%; height: 90px; object-fit: cover; display: block; background: #0d0f12; }
.card .card-label { padding: 6px 8px; line-height: 1.3; }
.card .card-sub { color: #9aa0a8; font-size: 11px; }
.card:hover { border-color: #555; }
.card.selected { border-color: #d33; }

/* entry list */
table.entries { width: 100%; border-collapse: collapse; font-size: 13px; }
table.entries th, table.entries td { padding: 6px 8px; border-bottom: 1px solid #2a303a; text-align: left; }
table.entries img.skin-thumb { width: 72px; height: 40px; object-fit: cover; border-radius: 4px; background: #0d0f12; }

/* server tab */
pre.ini, pre.log {
  background: #0d0f12; border: 1px solid #2a303a; border-radius: 8px;
  padding: 12px; font-size: 12px; overflow: auto; max-height: 420px; white-space: pre-wrap;
}
pre.log { max-height: 480px; }

/* results */
table.results { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 14px; }
table.results th, table.results td { padding: 5px 8px; border-bottom: 1px solid #2a303a; text-align: left; }

.toast {
  position: fixed; bottom: 18px; right: 18px; background: #2e3440; color: #fff;
  padding: 12px 18px; border-radius: 8px; border: 1px solid #444; max-width: 420px;
  white-space: pre-wrap; z-index: 100;
}
.badge-img { width: 22px; height: 22px; vertical-align: middle; margin-right: 6px; }
.search-input { width: 260px; }
fieldset { border: 1px solid #2a303a; border-radius: 8px; margin: 0 0 14px; }
fieldset legend { font-size: 13px; color: #c0c6cf; padding: 0 6px; }