* { box-sizing: border-box; }
body { font: 14px/1.4 system-ui, sans-serif; margin: 0; background: #1a1a1a; color: #ddd; }
main { max-width: 1100px; margin: 2rem auto; padding: 1rem; }
header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
h1 { margin: 0; color: #d97a3c; }
.login-box { max-width: 360px; margin: 6rem auto; padding: 2rem; background: #222; border-radius: 8px; }
.login-box label { display: block; margin-bottom: 1rem; }
.login-box input { width: 100%; padding: .5rem; background: #111; color: #ddd; border: 1px solid #444; border-radius: 4px; }
button { padding: .5rem 1rem; background: #d97a3c; color: #fff; border: none; border-radius: 4px; cursor: pointer; }
button.logout { background: #444; }
#status-card { padding: 1rem; background: #222; border-radius: 8px; margin-bottom: 1rem; }
.status-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; align-items: center; }
.badge { padding: .25rem .75rem; border-radius: 4px; font-weight: bold; }
.badge.on { background: #2a7a2a; color: #fff; }
.badge.off { background: #7a2a2a; color: #fff; }
.badge.starting { background: #7a6a2a; color: #fff; }
.controls { display: flex; gap: .5rem; margin-bottom: 1rem; }
.console { background: #000; padding: 1rem; border-radius: 8px; }
.console pre { height: 400px; overflow-y: auto; background: #000; color: #6f6; padding: .5rem; margin: 0 0 .5rem; font: 12px/1.3 monospace; white-space: pre-wrap; }
.console form { display: flex; gap: .5rem; }
.console input { flex: 1; padding: .5rem; background: #111; color: #ddd; border: 1px solid #333; border-radius: 4px; }
.err { color: #f66; }

/* nav */
.topnav { display: flex; gap: .25rem; }
.topnav a { padding: .4rem .9rem; background: #222; color: #aaa; border-radius: 4px; text-decoration: none; font-weight: 500; }
.topnav a:hover { background: #2a2a2a; color: #ddd; }
.topnav a.active { background: #d97a3c; color: #fff; }
.server-id { color: #888; font-size: 12px; margin-left: auto; margin-right: 1rem; font-family: monospace; }

/* config page */
.cfg-page { display: grid; grid-template-columns: 220px 1fr; gap: 1.5rem; }
.cfg-tabs { display: flex; flex-direction: column; gap: .25rem; }
.cfg-tabs .tab { background: #222; color: #aaa; border: none; padding: .65rem .9rem; text-align: left; border-radius: 4px; cursor: pointer; font: inherit; }
.cfg-tabs .tab:hover { background: #2a2a2a; color: #ddd; }
.cfg-tabs .tab.active { background: #d97a3c; color: #fff; }
.cfg-content { background: #1f1f1f; padding: 1.5rem; border-radius: 8px; min-height: 400px; }
.cfg-content h2 { margin-top: 0; color: #d97a3c; }
.cfg-content .hint { background: #2a2a2a; padding: .5rem .75rem; border-left: 3px solid #d97a3c; border-radius: 4px; margin-bottom: 1.5rem; color: #ccc; }

.opt-list { display: flex; flex-direction: column; gap: .75rem; }
.opt-row { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; padding: .75rem 1rem; background: #1a1a1a; border-radius: 6px; border: 1px solid #2a2a2a; }
.opt-row:hover { border-color: #3a3a3a; }
.opt-meta label { display: block; margin-bottom: .15rem; }
.opt-meta .key { display: inline-block; font-size: 11px; color: #777; margin-bottom: .25rem; }
.opt-meta .desc { margin: 0; color: #aaa; font-size: 13px; }
.opt-form { display: flex; gap: .5rem; align-items: center; }
.opt-form input[type="number"], .opt-form input[type="text"] { padding: .35rem .5rem; background: #0d0d0d; color: #ddd; border: 1px solid #333; border-radius: 4px; min-width: 180px; max-width: 260px; }
.opt-form button { padding: .4rem .8rem; }
.opt-status { font-size: 12px; min-width: 100px; }
.opt-status .ok { color: #6f6; }
.opt-status .err { color: #f66; }

.wipe-badge { display: inline-block; background: #7a2a2a; color: #fff; padding: 1px 6px; border-radius: 3px; font-size: 10px; margin-left: .5rem; }

/* switch (bool inputs) */
.switch { position: relative; display: inline-block; width: 44px; height: 22px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; cursor: pointer; inset: 0; background: #333; border-radius: 22px; transition: .2s; }
.switch span:before { content: ""; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px; background: #aaa; border-radius: 50%; transition: .2s; }
.switch input:checked + span { background: #d97a3c; }
.switch input:checked + span:before { transform: translateX(22px); background: #fff; }

.cfg-footer { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #2a2a2a; display: flex; gap: 1rem; align-items: center; }

/* moderation */
.mod-section { margin-bottom: 2rem; }
.mod-section h3 { margin: 0 0 .25rem; color: #ddd; }
.mod-table { width: 100%; border-collapse: collapse; margin-top: .5rem; background: #1a1a1a; border-radius: 4px; overflow: hidden; }
.mod-table th, .mod-table td { padding: .5rem .75rem; text-align: left; border-bottom: 1px solid #2a2a2a; }
.mod-table th { background: #222; color: #aaa; font-weight: 500; font-size: 12px; }
.mod-table code { font-size: 12px; }
.mod-add { display: flex; gap: .5rem; margin-top: .5rem; }
.mod-add input { flex: 1; padding: .35rem .5rem; background: #0d0d0d; color: #ddd; border: 1px solid #333; border-radius: 4px; }

/* RCON page — fluid 3-column layout that fits any viewport ≥ 900px */
body:has(.rcon-page) main { max-width: none; padding: 1rem 1.5rem; }
.rcon-page {
  display: grid;
  grid-template-columns: minmax(260px, 22%) minmax(0, 1fr) minmax(220px, 18%);
  gap: 1rem;
  min-height: 75vh;
}
.rcon-players, .rcon-console, .rcon-quick { background: #1a1a1a; border-radius: 8px; padding: 1rem; min-width: 0; }
.rcon-console { background: #000; }
.rcon-console h2 { margin-top: 0; color: #d97a3c; }
.rcon-console pre {
  background: #000; color: #6f6;
  height: 55vh; overflow-y: auto; overflow-x: hidden;
  padding: .5rem; margin: 0 0 .5rem;
  font: 12px/1.35 monospace;
  white-space: pre-wrap; word-break: break-word;
  border: 1px solid #222; border-radius: 4px;
}
.rcon-console form { display: flex; gap: .5rem; }
.rcon-console form input { flex: 1; min-width: 0; padding: .5rem; background: #111; color: #ddd; border: 1px solid #333; border-radius: 4px; font: 13px/1.2 monospace; }

/* Responsive: collapse to single column under 1100px */
@media (max-width: 1100px) {
  .rcon-page { grid-template-columns: 1fr; }
  .rcon-players, .rcon-quick { max-height: none; }
}

.rcon-toast { min-height: 22px; margin-top: .5rem; font-size: 12px; color: #aaa; }

.players-header { color: #aaa; margin-bottom: .5rem; font-size: 13px; border-bottom: 1px solid #2a2a2a; padding-bottom: .25rem; }
.players-list { list-style: none; margin: 0; padding: 0; max-height: 35vh; overflow-y: auto; }
.player-row { padding: .5rem; border-radius: 4px; margin-bottom: .3rem; background: #0f0f0f; border: 1px solid #222; min-width: 0; }
.player-row:hover { border-color: #3a3a3a; }
.player-name { font-weight: 600; color: #ddd; word-break: break-word; }
.player-sub { font-size: 11px; color: #888; word-break: break-all; overflow-wrap: anywhere; }
.player-sub code { font-size: 10px; }
.player-actions { display: flex; gap: .3rem; margin-top: .4rem; }
.player-actions button { padding: .25rem .55rem; font-size: 11px; border-radius: 3px; }
.btn-kick { background: #a05000; }
.btn-ban { background: #7a2a2a; }
.btn-info { background: #444; }
.empty { color: #777; font-style: italic; }

.player-info-panel { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #2a2a2a; }
.player-info h3 { margin: 0 0 .5rem; color: #d97a3c; font-size: 14px; }
.player-info p { margin: .25rem 0; font-size: 12px; color: #bbb; }
.player-info code { font-size: 11px; }

.rcon-quick h3 { margin: 0 0 .5rem; color: #d97a3c; font-size: 14px; }
.qa-section { margin-bottom: 1rem; padding-bottom: .75rem; border-bottom: 1px solid #2a2a2a; }
.qa-section:last-child { border-bottom: none; }
.qa-section h4 { margin: 0 0 .4rem; color: #aaa; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.qa-section button { display: block; width: 100%; margin-bottom: .25rem; padding: .4rem .55rem; text-align: left; font-size: 12px; background: #2a2a2a; }
.qa-section button:hover { background: #333; }
.qa-section button.danger { background: #5a2a2a; }
.qa-section button.danger:hover { background: #7a2a2a; }
.qa-section form { margin-bottom: .3rem; }
.qa-section input[type="text"] { width: 100%; padding: .35rem .5rem; background: #0d0d0d; color: #ddd; border: 1px solid #333; border-radius: 3px; font-size: 12px; margin-bottom: .25rem; }

/* Plugins page */
.plugins-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 38%); gap: 1rem; }
.plugins-main { background: #1a1a1a; padding: 1rem 1.25rem; border-radius: 8px; }
.plugins-main h2 { margin-top: 0; color: #d97a3c; }
.plugins-detail { background: #1a1a1a; padding: 1rem 1.25rem; border-radius: 8px; min-height: 60vh; }

.plugin-upload { display: flex; gap: .75rem; align-items: center; padding: .75rem; background: #2a2a2a; border-radius: 6px; margin-bottom: 1rem; flex-wrap: wrap; }
.plugin-upload label { display: flex; flex-direction: column; gap: .25rem; flex: 1; min-width: 220px; }
.plugin-upload label span { color: #aaa; font-size: 12px; }
.plugin-upload input[type="file"] { color: #ddd; }
.plugin-upload .link-out { color: #d97a3c; text-decoration: none; font-size: 13px; }

.plugin-table { width: 100%; border-collapse: collapse; margin-top: .5rem; }
.plugin-table th, .plugin-table td { padding: .55rem .65rem; border-bottom: 1px solid #2a2a2a; text-align: left; vertical-align: top; font-size: 13px; }
.plugin-table th { background: #222; color: #aaa; font-weight: 500; font-size: 11px; text-transform: uppercase; }
.plugin-table td .key { color: #777; font-size: 11px; }
.plugin-table td .desc { color: #aaa; font-size: 11px; display: block; margin-top: .15rem; max-width: 320px; }
.plugin-actions { display: flex; flex-wrap: wrap; gap: .25rem; }
.plugin-actions button { padding: .25rem .55rem; font-size: 11px; }
.plugin-actions button.danger { background: #7a2a2a; }
.plugin-actions button:disabled { opacity: .4; cursor: not-allowed; }

.badge { padding: 2px 8px; border-radius: 3px; font-size: 11px; font-weight: 600; }

.plugin-toast { min-height: 22px; margin-top: 1rem; font-size: 12px; }
.plugin-toast .ok { color: #6f6; }
.plugin-toast .err { color: #f66; }

.plugin-detail-card h3 { margin-top: 0; color: #d97a3c; }
.plugin-detail-card textarea { width: 100%; padding: .5rem; background: #0d0d0d; color: #ddd; border: 1px solid #333; border-radius: 4px; font: 12px/1.4 monospace; resize: vertical; box-sizing: border-box; }
.plugin-detail-card .row { display: flex; gap: .5rem; margin-top: .5rem; }

/* Wipe modal + danger button */
.controls button.danger { background: #7a2a2a; margin-left: auto; }
.controls button.danger:hover { background: #9a3a3a; }
.modal { background: #1a1a1a; color: #ddd; border: 1px solid #3a3a3a; border-radius: 8px; padding: 1.5rem 1.75rem; max-width: 500px; }
.modal::backdrop { background: rgba(0,0,0,.7); }
.modal h3 { margin-top: 0; color: #f44; }
.modal label { display: block; margin: .75rem 0; padding: .5rem; background: #2a2a2a; border-radius: 4px; cursor: pointer; }
.modal label:hover { background: #333; }
.modal label b { color: #d97a3c; }
.wipe-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
.wipe-actions button.danger { background: #7a2a2a; }
#wipe-result { margin-top: .75rem; min-height: 22px; }
#wipe-result .ok { color: #6f6; display: block; padding: .5rem; background: #1a3a1a; border-radius: 4px; }
#wipe-result .err { color: #f66; display: block; padding: .5rem; background: #3a1a1a; border-radius: 4px; }

/* Responsive: plugins page collapses under 1000px */
@media (max-width: 1000px) {
  .plugins-page { grid-template-columns: 1fr; }
}