:root {
  /* Dark theme, higher information density */
  --bg: #272d3b;
  --card: #11131c;
  --text: #e7ebf3;
  --muted: #a5aec3;
  --border: #1b2130;
  --accent: #3b82f6;
  --accent-2: #1f2937;
  --accent-alt: #10b981;

  --radius: 8px;
  --pad: 10px;
  --gap: 10px;
  --font-size: 14px;

  /* Light background for user-input controls */
  --input-bg: #F2F2F2;
  --input-ink: #111213;
  --placeholder: #6b7280;
}

/* Reset + base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji","Segoe UI Emoji";
  font-size: var(--font-size);
  background: radial-gradient(1200px 700px at 10% -10%, #0f1527 0%, var(--bg) 40%),
              radial-gradient(1000px 600px at 120% 0%, #0d1321 0%, var(--bg) 30%);
  color: var(--text);
}

/* Full-width container; no centered max-width */
.container { padding: 0; }

/* Top bar — 50px tall, left-aligned title + logout */
.topbar {
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: linear-gradient(#121725, #0e1220);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.topbar-left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.topbar h1 {
  font-size: 16px;
  margin: 0;
  line-height: 1;
}

/* Cards, headings, inputs */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: calc(var(--pad) + 2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
h1, h2 { margin: 0 0 8px 0; font-weight: 600; }

/* Labels + form controls */
label { display: grid; gap: 4px; margin: 0; }
input, textarea, button, select { font: inherit; }

/* User-input controls: light background */
input, textarea, select {
  width: 100%;
  color: var(--input-ink);
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  outline: none;
}
input::placeholder, textarea::placeholder { color: var(--placeholder); }
input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(59,130,246,0.25);
}

/* RCON output is readonly — keep it dark for contrast */
#out[readonly] {
  background: #0e1220;
  color: var(--text);
  border: 1px solid var(--border);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--accent);
  color: white;
  border: 1px solid var(--accent);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { filter: brightness(1.15); }
.btn:active { transform: translateY(1px); }
.btn-outline { background: transparent; color: var(--text); border-color: var(--accent-2); }
.btn-alt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; background: var(--accent-alt); color: #062d20;
  border: 1px solid var(--accent-alt); border-radius: 6px; cursor: pointer; white-space: nowrap;
}
.btn-xs { padding: 4px 8px; font-size: 12px; line-height: 1; }

.button-row { display: flex; gap: var(--gap); flex-wrap: wrap; }
.button-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
@media (max-width: 1200px) { .button-grid { grid-template-columns: repeat(2, 1fr); } }

/* === 3-column layout === */
.layout-3col {
  display: grid;
  grid-template-columns:
    minmax(320px, 500px)    /* col 1 */
    minmax(280px, 350px)    /* col 2: was 300–400 */
    minmax(420px, 800px);   /* col 3 */
  gap: 12px;
  align-items: start;
  padding: 12px;
  justify-content: start;
}
.col1 { max-width: 500px; }
.col2 { max-width: 350px; }
.col3 { max-width: 800px; }

/*@media (max-width: 1500px) {
  .layout-3col { grid-template-columns: 1fr 1fr 1fr; }
}*/
@media (max-width: 1100px) {
  .layout-3col { grid-template-columns: 1fr; }
  .col1, .col2, .col3 { max-width: none; }
}

/* Map preview */
.thumb-wrap {
  aspect-ratio: 16 / 9;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: #0e1220 center/cover no-repeat;
  margin-bottom: 8px;
}
.thumb-wrap img { width: 100%; height: 100%; object-fit: cover; }

/* Map list — compact, classic listbox feel */
.map-list {
  display: block;                 /* no grid; just a scrolling list */
  max-height: 72vh;
  overflow: auto;
  background: #F2F2F2;           /* light like inputs */
  color: var(--input-ink);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px;                   /* small gutter */
  font-size: 13px;                /* slightly smaller for density */
  line-height: 1.2;               /* tight rows */
}

/* Each map row is just text with tiny padding; no borders */
.map-item {
  display: block;
  padding: 2px 6px;               /* compact row height */
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;             /* for hover/selection highlight */
}

/* Hover + selected states */
.map-item:hover {
  background: rgba(0,0,0,0.06);
}
.map-item.selected,
.map-item[aria-selected="true"] {
  background: rgba(59,130,246,0.22);
  outline: 1px solid var(--accent);
}

/* Optional: slimmer scrollbar (Chromium/Edge) */
.map-list::-webkit-scrollbar        { width: 10px; }
.map-list::-webkit-scrollbar-track  { background: #e5e7eb; }
.map-list::-webkit-scrollbar-thumb  { background: #c5cbd6; border-radius: 6px; }
.map-list::-webkit-scrollbar-thumb:hover { background: #b3bac7; }

/* Inline form rows — tighter */
.inline-row {
  display: grid;
  grid-auto-flow: column;
  gap: 8px;
  align-items: end;
  margin-top: 6px;
}
.rcon-row  { grid-template-columns: 1fr auto; }
.exec-row  { grid-template-columns: 1fr auto; }

.qc-row {
  display: grid;
  grid-template-columns: 1fr 110px auto; /* compact value field */
  gap: 8px;
  align-items: end;
  margin-top: 6px;
}

.status-row { margin-top: 6px; }
.mode-grid  { margin-top: 8px; }
.quick-grid { margin-top: 8px; }

.group-toggle .btn.active,
.group-toggle .btn[aria-pressed="true"] {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.muted { color: var(--muted); }
.error {
  color: #ff6b6b;
  background: #2a0f13;
  border: 1px solid #5b1b20;
  padding: 8px 10px;
  border-radius: 6px;
  margin-bottom: 8px;
}

/* --- FIX: remove default button chrome from map items --- */
/* Map list items: take full width and box-size correctly */
.map-list .map-item {
  display: block;        /* full row */
  width: 100%;           /* span the container */
  box-sizing: border-box;
  padding: 2px 6px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
}

/* Hover feedback */
.map-list .map-item:hover {
  background: rgba(0,0,0,0.08);
}

/* Strong, obvious selection (blue) */
.map-list .map-item.selected,
.map-list .map-item[aria-selected="true"] {
  background: var(--accent);   /* solid blue */
  color: #fff;                 /* readable text */
  outline: none;
}

/* Optional: keep focus-visible distinct but not faint */
.map-list .map-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 0;
  background: rgba(59,130,246,0.2);
}

/* Retro green terminal text (keep your existing #out rules; this just clarifies) */
#out,
#out[readonly] {
  background: #0e1220;
  color: #00ff66;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  text-shadow: 0 0 2px rgba(0,255,102,0.35);
  border: 1px solid var(--border);
}

/* Keep your existing #out styling (green mono, etc.) */

/* Terminal wrapper */
.terminal {
  position: relative;
  border-radius: 6px;    /* match textarea */
  overflow: hidden;      /* clip overlay to same shape */
}

/* Ensure textarea sits below overlay */
.terminal > textarea {
  position: relative;
  z-index: 1;
  width: 100%;
  display: block;
}

/* Scanlines overlay ON TOP of the text */
.terminal .scanlines {
  position: absolute;
  inset: 1px;                 /* sit just inside the textarea border */
  z-index: 2;
  pointer-events: none;
  border-radius: 4px;

  /* visible scanlines — no blend mode needed */
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(0, 255, 102, 0.2) 0px,   /* increase alpha for visibility */
      rgba(0, 255, 102, 0.1) 1px,
      transparent 1px,
      transparent 4px
    );
  /* If you want the effect stronger/weaker, tweak the 0.14 alpha or the 22px spacing */
}
/* Specific action button colors */
.btn-orange { background: #f59e0b; border-color: #f59e0b; color: white; }
.btn-green  { background: #10b981; border-color: #10b981; color: #062d20; }
.btn-purple { background: #8b5cf6; border-color: #8b5cf6; color: white; }
.btn-orange:hover, .btn-green:hover, .btn-purple:hover { filter: brightness(1.1);