/* ============================================================
   GamePanel – Cyberpunk Dark Theme
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ── Cyberpunk palette ──────────────────────────────── */
  --cyan:         #00fffb;
  --cyan-dim:     rgba(0, 255, 251, 0.12);
  --cyan-glow:    rgba(0, 255, 251, 0.22);
  --cyan-dark:    #00c8c5;

  --orange:       #ffae00;
  --orange-dim:   rgba(255, 174, 0, 0.12);
  --orange-glow:  rgba(255, 174, 0, 0.25);

  --purple:       #7e03aa;
  --purple-dim:   rgba(126, 3, 170, 0.18);
  --purple-glow:  rgba(126, 3, 170, 0.3);

  --pink:         #ff5ef7;
  --pink-dim:     rgba(255, 94, 247, 0.12);

  --green:        #39ff14;
  --green-dim:    rgba(57, 255, 20, 0.12);

  /* ── Semantic aliases ───────────────────────────────── */
  --accent:       var(--cyan);
  --accent-2:     #7dfffc;
  --accent-dark:  var(--cyan-dark);
  --accent-glow:  var(--cyan-dim);
  --accent-grad:  linear-gradient(135deg, #00fffb 0%, #7e03aa 100%);

  /* ── Backgrounds ────────────────────────────────────── */
  --bg-base:      #080312;
  --bg-card:      #0d0520;
  --bg-card2:     #130830;
  --bg-sidebar:   #060115;

  /* ── Borders ────────────────────────────────────────── */
  --border:       rgba(0, 255, 251, 0.09);
  --border-hover: rgba(0, 255, 251, 0.22);

  /* ── Text ───────────────────────────────────────────── */
  --text:         #dff8ff;
  --text-soft:    #6abcc7;
  --muted:        #304a52;

  /* ── Layout ─────────────────────────────────────────── */
  --sidebar-w:    252px;
  --radius:       12px;
  --radius-sm:    8px;
  --radius-xs:    6px;

  --shadow:       0 4px 24px rgba(0, 0, 0, 0.8);
  --shadow-lg:    0 8px 48px rgba(0, 0, 0, 0.9);
  --t:            .17s ease;

  /* ── Neon glows ─────────────────────────────────────── */
  --glow-cyan:    0 0 8px rgba(0,255,251,.6), 0 0 24px rgba(0,255,251,.25);
  --glow-orange:  0 0 8px rgba(255,174,0,.6), 0 0 24px rgba(255,174,0,.25);
  --glow-purple:  0 0 8px rgba(126,3,170,.6), 0 0 24px rgba(126,3,170,.25);
}

/* ── Reset & Base ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  background: var(--bg-base);
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Ambient background glow */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 15% 10%,  rgba(126,3,170,.18)   0%, transparent 45%),
    radial-gradient(ellipse at 85% 90%,  rgba(0,255,251,.07)   0%, transparent 40%),
    radial-gradient(ellipse at 50% 50%,  rgba(255,94,247,.04)  0%, transparent 55%);
}

/* Text selection */
::selection { background: rgba(0,255,251,.25); color: #fff; }

/* ── Scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,255,251,.2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,255,251,.4); }

/* ── Colour helpers ────────────────────────────────────── */
.text-accent { color: var(--cyan) !important; }
.text-soft   { color: var(--text-soft); }
.bg-accent   { background: var(--cyan) !important; }

.btn-accent {
  background: var(--cyan);
  color: #060115;
  border: none;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .78rem;
  box-shadow: 0 0 14px rgba(0,255,251,.35);
  transition: box-shadow var(--t), transform var(--t), background var(--t);
}
.btn-accent:hover  {
  background: #7dfffc;
  color: #060115;
  box-shadow: var(--glow-cyan);
  transform: translateY(-1px);
}
.btn-accent:active { transform: scale(.97); }

.btn-outline-accent { border-color: var(--cyan); color: var(--cyan); }
.btn-outline-accent:hover {
  background: var(--cyan-dim);
  color: var(--cyan);
  box-shadow: var(--glow-cyan);
}

/* ── Bootstrap badge overrides → cyberpunk neon ── */
.badge.bg-success {
  background: rgba(57,255,20,.12)  !important;
  color: var(--green)  !important;
  border: 1px solid rgba(57,255,20,.3);
}
.badge.bg-danger {
  background: rgba(255,0,64,.12)   !important;
  color: #ff0040           !important;
  border: 1px solid rgba(255,0,64,.3);
}
.badge.bg-warning {
  background: rgba(255,174,0,.12)  !important;
  color: var(--orange)     !important;
  border: 1px solid rgba(255,174,0,.3);
}
.badge.bg-secondary {
  background: rgba(0,255,251,.07)  !important;
  color: var(--text-soft)  !important;
  border: 1px solid var(--border);
}
.badge.bg-accent,
.badge.bg-info {
  background: rgba(0,255,251,.12)  !important;
  color: var(--cyan)       !important;
  border: 1px solid rgba(0,255,251,.3);
}

/* ── Bootstrap button overrides ── */
.btn-success    { background: rgba(57,255,20,.15); border-color: rgba(57,255,20,.4); color: var(--green); }
.btn-success:hover { background: rgba(57,255,20,.25); border-color: var(--green); color: var(--green); box-shadow: 0 0 12px rgba(57,255,20,.3); }
.btn-outline-success { border-color: rgba(57,255,20,.5); color: var(--green); }
.btn-outline-success:hover { background: rgba(57,255,20,.15); border-color: var(--green); color: var(--green); }

.btn-danger    { background: rgba(255,0,64,.15); border-color: rgba(255,0,64,.4); color: #ff0040; }
.btn-danger:hover { background: rgba(255,0,64,.25); border-color: #ff0040; color: #ff0040; box-shadow: 0 0 12px rgba(255,0,64,.3); }
.btn-outline-danger { border-color: rgba(255,0,64,.4); color: #ff0040; }
.btn-outline-danger:hover { background: rgba(255,0,64,.15); border-color: #ff0040; color: #ff0040; }

.btn-warning    { background: rgba(255,174,0,.15); border-color: rgba(255,174,0,.4); color: var(--orange); }
.btn-warning:hover { background: rgba(255,174,0,.25); border-color: var(--orange); color: var(--orange); box-shadow: var(--glow-orange); }
.btn-outline-warning { border-color: rgba(255,174,0,.4); color: var(--orange); }
.btn-outline-warning:hover { background: rgba(255,174,0,.15); border-color: var(--orange); color: var(--orange); }

.btn-outline-secondary { border-color: var(--border-hover); color: var(--text-soft); }
.btn-outline-secondary:hover { background: rgba(0,255,251,.06); color: var(--cyan); border-color: var(--border-hover); }

.btn-outline-info { border-color: rgba(0,255,251,.35); color: var(--cyan); }
.btn-outline-info:hover { background: var(--cyan-dim); border-color: var(--cyan); color: var(--cyan); box-shadow: var(--glow-cyan); }

/* ── Layout ────────────────────────────────────────────── */
#app-wrapper { height: 100vh; overflow: hidden; position: relative; z-index: 1; }

/* ── Sidebar ───────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  transition: transform .25s cubic-bezier(.4,0,.2,1);
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
}

/* Sidebar top purple glow */
.sidebar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 250px;
  background: radial-gradient(ellipse at 50% 0%, rgba(126,3,170,.3) 0%, transparent 70%);
  pointer-events: none;
}

.sidebar .brand {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .1rem .4rem;
  border-radius: var(--radius-xs);
  transition: opacity var(--t);
  position: relative;
}
.sidebar .brand:hover { opacity: .8; }
.sidebar .brand .brand-icon {
  width: 34px; height: 34px;
  background: linear-gradient(135deg, var(--purple), var(--cyan));
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 0 14px rgba(0,255,251,.3), 0 0 28px rgba(126,3,170,.2);
}
.sidebar .brand span {
  font-size: 1rem;
  font-weight: 700;
  background: linear-gradient(90deg, var(--cyan), var(--pink));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -.01em;
}

.sidebar .nav-link {
  color: var(--text-soft);
  border-radius: var(--radius-xs);
  padding: .48rem .75rem;
  font-size: .87rem;
  font-weight: 500;
  transition: background var(--t), color var(--t), border-color var(--t), box-shadow var(--t);
  border-left: 2px solid transparent;
  margin-left: -1px;
  position: relative;
  display: flex;
  align-items: center;
}
.sidebar .nav-link i { opacity: .6; transition: opacity var(--t); }
.sidebar .nav-link:hover {
  background: rgba(0,255,251,.05);
  color: var(--cyan);
  border-left-color: rgba(0,255,251,.3);
}
.sidebar .nav-link:hover i { opacity: 1; }
.sidebar .nav-link.active {
  background: rgba(0,255,251,.08);
  color: var(--cyan);
  border-left-color: var(--cyan);
  font-weight: 600;
  box-shadow: inset 0 0 20px rgba(0,255,251,.04);
  text-shadow: 0 0 10px rgba(0,255,251,.4);
}
.sidebar .nav-link.active i { opacity: 1; }

.sidebar-label {
  color: var(--muted);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  padding: .25rem .75rem;
  display: block;
}

/* ── Main Content ──────────────────────────────────────── */
#main-content {
  background: var(--bg-base);
  height: 100vh;
  overflow-y: auto;
  position: relative;
  z-index: 1;
}

.page-title {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--cyan);
  text-shadow: 0 0 20px rgba(0,255,251,.3);
}

/* ── Cards ─────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--t), box-shadow var(--t);
}
.card:hover { border-color: rgba(0,255,251,.18); }
.card-body { padding: 1.35rem; }

/* ── Stat Cards ────────────────────────────────────────── */
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.stat-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,255,251,.025) 0%, transparent 60%);
  pointer-events: none;
  border-radius: inherit;
}
.stat-card:hover {
  border-color: rgba(0,255,251,.22);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0,255,251,.08);
}

.stat-icon {
  width: 46px; height: 46px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem;
  margin-bottom: .85rem;
}
.stat-icon--accent { background: rgba(0,255,251,.1); color: var(--cyan); box-shadow: 0 0 12px rgba(0,255,251,.15); }
.stat-icon--green  { background: rgba(57,255,20,.1);  color: var(--green); box-shadow: 0 0 12px rgba(57,255,20,.15); }
.stat-icon--muted  { background: rgba(255,255,255,.04); color: var(--text-soft); }

.stat-value { font-size: 2.3rem; font-weight: 800; line-height: 1; letter-spacing: -.045em; }
.stat-label { color: var(--muted); font-size: .72rem; margin-top: .35rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; }

.stat-pill {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .35rem .9rem;
  font-size: .82rem;
}

/* ── Server Cards ──────────────────────────────────────── */
.server-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.server-card:hover {
  border-color: rgba(0,255,251,.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0,255,251,.08), var(--shadow);
}
.server-card--online {
  border-color: rgba(0,255,251,.28);
  box-shadow: 0 0 18px rgba(0,255,251,.08), 0 0 0 1px rgba(0,255,251,.08);
}
.server-card--online:hover {
  border-color: rgba(0,255,251,.5);
  box-shadow: 0 0 24px rgba(0,255,251,.14), var(--glow-cyan);
}

.server-card__header {
  display: flex;
  align-items: center;
  padding: .9rem 1.1rem;
  gap: .75rem;
  background: linear-gradient(135deg, rgba(0,255,251,.02) 0%, transparent 100%);
  border-bottom: 1px solid var(--border);
}
.server-card__body  { padding: .75rem 1.1rem; }
.server-card__footer {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .65rem 1.1rem;
  background: rgba(0,0,0,.35);
  border-top: 1px solid var(--border);
}

.server-meta {
  display: flex;
  gap: .9rem;
  color: var(--muted);
  font-size: .78rem;
}
.server-meta span { display: flex; align-items: center; gap: .2rem; }

/* ── Server Card Components (new) ─────────────────────── */

/* Neon top accent line */
.sc-topbar {
  height: 2px;
  flex-shrink: 0;
}
.server-card--online .sc-topbar {
  animation: topbar-pulse 2.5s ease-in-out infinite;
}
@keyframes topbar-pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: .55; }
}

/* Header game icon */
.sc-game-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  transition: box-shadow var(--t);
}
.server-card:hover .sc-game-icon {
  box-shadow: 0 0 18px currentColor !important;
}

/* Server name & game label */
.sc-name {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.01em;
  line-height: 1.2;
}
.sc-game-label {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: .15rem;
  opacity: .85;
}

/* Stats grid */
.sc-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.sc-stat {
  padding: .6rem .5rem;
  text-align: center;
  position: relative;
}
.sc-stat + .sc-stat::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 1px;
  background: var(--border);
}
.sc-stat__label {
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: .2rem;
}
.sc-stat__value {
  font-size: .9rem;
  font-weight: 700;
  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

/* Live data section */
.sc-live {
  padding: .6rem 1.1rem;
  font-size: .78rem;
  border-bottom: 1px solid var(--border);
  min-height: 38px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Shared label */
.sc-shared {
  padding: .4rem 1.1rem;
  font-size: .75rem;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}

/* Manage button — cyan outline */
.sc-manage-btn {
  border: 1px solid var(--border-hover);
  color: var(--text-soft);
  background: transparent;
  font-size: .78rem;
  transition: all var(--t);
}
.sc-manage-btn:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  background: var(--cyan-dim);
  box-shadow: 0 0 10px rgba(0,255,251,.15);
}

/* Icon-only buttons in footer */
.sc-icon-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
}

/* ── Game Badge ────────────────────────────────────────── */
.game-badge {
  width: 40px; height: 40px;
  background: var(--cyan-dim);
  border-radius: var(--radius-xs);
  display: flex; align-items: center; justify-content: center;
  color: var(--cyan);
  font-size: 1.15rem;
  flex-shrink: 0;
  transition: background var(--t), box-shadow var(--t);
}
.server-card:hover .game-badge { box-shadow: 0 0 10px rgba(0,255,251,.2); }
.game-badge--lg {
  width: 50px; height: 50px;
  font-size: 1.4rem;
  border-radius: var(--radius-sm);
}

/* Game tinting via data-game on .server-card */
.server-card[data-game="cs2"]          { --gc: #ff4911; --gc-rgb: 255,73,17; }
.server-card[data-game="valheim"]      { --gc: #00ffd4; --gc-rgb: 0,255,212; }
.server-card[data-game="ark"]          { --gc: #39ff14; --gc-rgb: 57,255,20; }
.server-card[data-game="palworld"]     { --gc: #ff5ef7; --gc-rgb: 255,94,247; }
.server-card[data-game="7dtd"]         { --gc: #ff0040; --gc-rgb: 255,0,64; }
.server-card[data-game="satisfactory"] { --gc: #ffae00; --gc-rgb: 255,174,0; }
.server-card[data-game="windrose"]     { --gc: #00fffb; --gc-rgb: 0,255,251; }

.server-card .game-badge {
  background: rgba(var(--gc-rgb, 0,255,251), .12);
  color: var(--gc, var(--cyan));
}
.server-card:hover .game-badge {
  background: rgba(var(--gc-rgb, 0,255,251), .2);
  box-shadow: 0 0 12px rgba(var(--gc-rgb, 0,255,251), .25);
}
.server-card--online { --gc-rgb: 0,255,251; }

/* ── Status Badges ─────────────────────────────────────── */
.badge { font-weight: 600; letter-spacing: .02em; }

.status-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.status-dot--running {
  background: var(--cyan);
  animation: pulse-cyan 2.2s ease-out infinite;
}
@keyframes pulse-cyan {
  0%   { box-shadow: 0 0 0 0   rgba(0,255,251,.8); }
  60%  { box-shadow: 0 0 0 5px rgba(0,255,251,0);  }
  100% { box-shadow: 0 0 0 0   rgba(0,255,251,0);  }
}

/* ── Game Selection Cards ──────────────────────────────── */
.game-select-card {
  display: block;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem .75rem;
  cursor: pointer;
  text-align: center;
  transition: border-color var(--t), background var(--t), transform var(--t), box-shadow var(--t);
  height: 100%;
}
.game-select-card:hover {
  border-color: var(--gc, var(--cyan));
  background: var(--bg-card2);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(var(--gc-rgb, 0,255,251), .2);
}
.game-radio:checked + .game-select-card {
  border-color: var(--gc, var(--cyan));
  background: rgba(var(--gc-rgb, 0,255,251), .07);
  box-shadow: 0 0 0 3px rgba(var(--gc-rgb, 0,255,251), .15),
              0 0 20px rgba(var(--gc-rgb, 0,255,251), .12);
}

/* ── Avatar ────────────────────────────────────────────── */
.avatar {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--purple), var(--cyan));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.avatar--sm { width: 28px; height: 28px; font-size: .72rem; }

/* ── User info ─────────────────────────────────────────── */
.user-info { border-color: var(--border) !important; }
.user-info .avatar { box-shadow: 0 0 0 2px rgba(0,255,251,.25); }

/* ── Log console ───────────────────────────────────────── */
.log-console {
  background: #02010a;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .85rem 1rem;
  max-height: 340px;
  overflow-y: auto;
  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  font-size: .77rem;
  color: var(--cyan);
  line-height: 1.7;
  text-shadow: 0 0 6px rgba(0,255,251,.3);
}
.log-console pre { margin: 0; white-space: pre-wrap; word-break: break-all; }

/* ── Connection Info Box ───────────────────────────────── */
.conn-box {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .5rem .8rem;
  transition: border-color var(--t), box-shadow var(--t);
}
.conn-box:hover { border-color: rgba(0,255,251,.25); box-shadow: 0 0 10px rgba(0,255,251,.06); }
.conn-box code {
  flex: 1;
  font-size: .87rem;
  color: var(--cyan);
  background: transparent;
  padding: 0;
  word-break: break-all;
  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  text-shadow: 0 0 8px rgba(0,255,251,.3);
}
.conn-box .btn-copy,
.conn-box .copy-btn {
  flex-shrink: 0;
  padding: .22rem .52rem;
  font-size: .73rem;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: border-color var(--t), color var(--t), background var(--t), box-shadow var(--t);
}
.conn-box .btn-copy:hover,
.conn-box .copy-btn:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  background: var(--cyan-dim);
  box-shadow: var(--glow-cyan);
}

/* ── Server Details dl ─────────────────────────────────── */
.server-details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .42rem .9rem;
  font-size: .84rem;
  margin: 0;
}
.server-details dt { color: var(--text-soft); white-space: nowrap; font-weight: 500; }
.server-details dd { margin: 0; }

/* ── Tables ────────────────────────────────────────────── */
.table {
  color: var(--text);
  --bs-table-hover-bg:    rgba(0,255,251,.03);
  --bs-table-striped-bg:  rgba(0,255,251,.015);
}
.table th {
  color: var(--muted);
  font-weight: 700;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-color: var(--border);
  padding-top: .6rem;
  padding-bottom: .6rem;
}
.table td { border-color: var(--border); vertical-align: middle; }

/* ── Forms ─────────────────────────────────────────────── */
.form-control, .form-select {
  background: var(--bg-card2);
  border-color: var(--border);
  color: var(--text);
  border-radius: var(--radius-xs);
  font-size: .88rem;
  transition: border-color var(--t), box-shadow var(--t);
}
.form-control:focus, .form-select:focus {
  background: var(--bg-card2);
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0,255,251,.12), var(--glow-cyan);
  color: var(--text);
}
.form-control:hover:not(:focus),
.form-select:hover:not(:focus) { border-color: rgba(0,255,251,.2); }
.form-control::placeholder { color: var(--muted); }

.input-group-text {
  background: var(--bg-card2);
  border-color: var(--border);
  color: var(--text-soft);
  font-size: .88rem;
}
.form-label {
  color: var(--text-soft);
  font-size: .8rem;
  font-weight: 500;
  margin-bottom: .3rem;
}
.form-text { color: var(--muted); font-size: .76rem; }

/* Switches */
.form-check-input { background-color: var(--bg-card2); border-color: var(--border); }
.form-check-input:checked { background-color: var(--cyan); border-color: var(--cyan); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(0,255,251,.15); border-color: var(--cyan); }

/* ── Buttons ───────────────────────────────────────────── */
.btn {
  border-radius: var(--radius-xs);
  font-size: .85rem;
  font-weight: 500;
  transition: all var(--t);
  letter-spacing: .01em;
}
.btn-sm { font-size: .78rem; padding: .28rem .65rem; }
.btn:active { transform: scale(.97); }

/* ── Pill Tab Nav ──────────────────────────────────────── */
.pill-tabs {
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .3rem;
  display: flex;
  gap: .2rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.pill-tabs .nav-link {
  border-radius: var(--radius-xs);
  color: var(--muted);
  font-size: .84rem;
  font-weight: 500;
  padding: .44rem .9rem;
  border: none;
  flex: 1;
  text-align: center;
  white-space: nowrap;
  transition: background var(--t), color var(--t), box-shadow var(--t);
}
.pill-tabs .nav-link:hover { color: var(--cyan); background: rgba(0,255,251,.05); }
.pill-tabs .nav-link.active {
  background: var(--bg-card);
  color: var(--cyan);
  font-weight: 600;
  box-shadow: 0 1px 6px rgba(0,0,0,.5), 0 0 8px rgba(0,255,251,.08);
  text-shadow: 0 0 10px rgba(0,255,251,.4);
}

/* ── Nav tabs ──────────────────────────────────────────── */
.nav-tabs { border-color: var(--border); gap: .1rem; }
.nav-tabs .nav-link {
  color: var(--muted);
  border-color: transparent;
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  padding: .52rem .9rem;
  font-size: .84rem;
  font-weight: 500;
  transition: color var(--t), background var(--t);
}
.nav-tabs .nav-link:hover { color: var(--cyan); border-color: transparent; background: rgba(0,255,251,.04); }
.nav-tabs .nav-link.active {
  background: var(--bg-card2);
  border-color: var(--border) var(--border) var(--bg-card2);
  color: var(--cyan);
  font-weight: 600;
  text-shadow: 0 0 8px rgba(0,255,251,.3);
}

/* Nav pills */
.nav-pills .nav-link { border-radius: var(--radius-xs); color: var(--muted); font-size: .83rem; font-weight: 500; }
.nav-pills .nav-link.active { background: var(--cyan-dim); color: var(--cyan); }

/* ── Modal ─────────────────────────────────────────────── */
.modal-content {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg), 0 0 40px rgba(0,255,251,.05);
}
.modal-header, .modal-footer { border-color: var(--border); }

/* ── Alerts ────────────────────────────────────────────── */
.alert { border-radius: var(--radius-sm); font-size: .87rem; }
.alert-secondary { background: rgba(0,255,251,.04); border-color: var(--border); color: var(--text-soft); }
.alert-info      { background: rgba(0,255,251,.08); border-color: rgba(0,255,251,.2); color: var(--cyan); }
.alert-success   { background: rgba(57,255,20,.08);  border-color: rgba(57,255,20,.2);  color: var(--green); }
.alert-warning   { background: rgba(255,174,0,.08);  border-color: rgba(255,174,0,.2);  color: var(--orange); }
.alert-danger    { background: rgba(255,0,64,.08);   border-color: rgba(255,0,64,.2);   color: #ff0040; }

/* ── List Group ────────────────────────────────────────── */
.list-group-item { background: var(--bg-card2); border-color: var(--border); color: var(--text); transition: background var(--t); }
.list-group-item:hover { background: rgba(0,255,251,.03); }

/* ── Breadcrumb ────────────────────────────────────────── */
.breadcrumb { background: transparent; padding: 0; margin: 0; font-size: .78rem; }
.breadcrumb-item        { color: var(--muted); }
.breadcrumb-item a      { color: var(--text-soft); text-decoration: none; transition: color var(--t); }
.breadcrumb-item a:hover { color: var(--cyan); text-shadow: 0 0 8px rgba(0,255,251,.4); }
.breadcrumb-item.active { color: var(--text); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--muted); }

/* ── Skeleton loading ──────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--bg-card2) 25%, rgba(0,255,251,.05) 50%, var(--bg-card2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease infinite;
  border-radius: var(--radius-xs);
}
.skeleton-line { height: 11px; margin-bottom: 7px; }
.skeleton-line.w-75 { width: 75% !important; }
.skeleton-line.w-50 { width: 50% !important; }

/* ── Mobile backdrop ───────────────────────────────────── */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(8,3,18,.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fadeIn .2s ease;
}
.sidebar-backdrop.show { display: block; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Empty State ───────────────────────────────────────── */
.empty-state { text-align: center; padding: 5rem 2rem; }

/* ── Divider label ─────────────────────────────────────── */
.divider-label {
  display: flex; align-items: center; gap: .75rem;
  color: var(--muted); font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
  margin: 1.25rem 0 1rem;
}
.divider-label::before, .divider-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ── Login Page ────────────────────────────────────────── */
.login-page { background: var(--bg-base); overflow: hidden; }

/* Neon orbs */
.neon-orbs { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.neon-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .35;
}
.neon-orb--cyan   { width:350px;height:350px;background:var(--cyan);   top:-80px;   left:-80px;   animation: float-orb 9s ease-in-out infinite; }
.neon-orb--orange { width:280px;height:280px;background:var(--orange); bottom:-70px;right:-70px;  animation: float-orb 11s ease-in-out infinite reverse; animation-delay:-4s; }
.neon-orb--purple { width:300px;height:300px;background:var(--purple); bottom:20%;  left:20%;     animation: float-orb 13s ease-in-out infinite; animation-delay:-7s; }
.neon-orb--pink   { width:200px;height:200px;background:var(--pink);   top:30%;     right:15%;    animation: float-orb 10s ease-in-out infinite reverse; animation-delay:-2s; }

@keyframes float-orb {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(25px,-25px) scale(1.08); }
  66%     { transform: translate(-18px,18px) scale(.94); }
}

/* Spinning border wrapper */
.login-spin-wrap {
  position: relative;
  z-index: 1;
  border-radius: calc(var(--radius) + 2px);
  padding: 2px;
  overflow: hidden;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 0 60px rgba(0,255,251,.12), 0 0 120px rgba(126,3,170,.1);
}
.login-spin-wrap::before {
  content: '';
  position: absolute;
  inset: -100%;
  background: conic-gradient(
    from 0deg,
    var(--purple) 0%,
    var(--cyan)   22%,
    var(--pink)   44%,
    var(--orange) 66%,
    var(--cyan)   88%,
    var(--purple) 100%
  );
  animation: spin-border 3.5s linear infinite;
  z-index: 0;
}
@keyframes spin-border { to { transform: rotate(360deg); } }

.login-card {
  position: relative;
  z-index: 1;
  background: var(--bg-card);
  border-radius: var(--radius);
  border: none;
  padding: 2.75rem;
  width: 100%;
}

.logo-icon {
  width: 72px; height: 72px;
  background: linear-gradient(135deg, var(--purple), var(--cyan));
  border-radius: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 2rem; color: #fff;
  box-shadow: 0 0 0 8px rgba(0,255,251,.06), 0 0 40px rgba(0,255,251,.25), 0 0 80px rgba(126,3,170,.2);
}

/* Login fields */
.login-field { position: relative; margin-bottom: 1.1rem; }
.login-field label {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-soft);
  margin-bottom: .4rem;
}
.login-field input {
  width: 100%;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: .92rem;
  padding: .85rem 1rem .85rem 2.85rem;
  transition: border-color var(--t), box-shadow var(--t);
  outline: none;
  font-family: inherit;
}
.login-field input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0,255,251,.1), var(--glow-cyan);
}
.login-field input::placeholder { color: var(--muted); }
.login-field .field-icon {
  position: absolute;
  left: .9rem;
  top: 50%; transform: translateY(-50%);
  color: var(--muted);
  font-size: 1rem;
  pointer-events: none;
  transition: color var(--t);
}
.login-field:focus-within .field-icon { color: var(--cyan); }

/* ── Misc ──────────────────────────────────────────────── */
.install-page { background: var(--bg-base); }
.collapse.show { margin-top: 0; }
.live-query { line-height: 1.55; }
.live-query details summary { list-style: none; }
.live-query details summary::-webkit-details-marker { display: none; }

@keyframes spin-slow { to { transform: rotate(360deg); } }
.spin-slow { display: inline-block; animation: spin-slow 2s linear infinite; }

@keyframes slideIn {
  from { transform: translateY(10px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ── Mobile Sidebar ────────────────────────────────────── */
@media (max-width: 991px) {
  .sidebar {
    position: fixed;
    z-index: 1050;
    transform: translateX(-100%);
    top: 0; left: 0;
    height: 100%;
  }
  .sidebar.show {
    transform: translateX(0);
    box-shadow: 8px 0 40px rgba(0,255,251,.08), 8px 0 80px rgba(0,0,0,.8);
  }
  #main-content { overflow-x: hidden; }
}

/* ── Backup list ──────────────────────────────────────────────── */
.backup-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.backup-row {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .75rem 1rem;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color .18s, background .18s;
}
.backup-row:hover {
  border-color: var(--border-hover);
  background: rgba(0,255,251,.04);
}
.backup-row__icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--cyan-dim);
  color: var(--cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.backup-row__info {
  flex: 1;
  min-width: 0;
}
.backup-row__name {
  font-weight: 600;
  font-size: .85rem;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.backup-row__meta {
  font-size: .75rem;
  color: var(--text-soft);
  margin-top: .15rem;
}

/* ── Config section headings ──────────────────────────────────── */
.cfg-section-heading {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-soft);
  padding: .35rem 0 .35rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: .25rem;
}

/* ── Schedule tab ─────────────────────────────────────────────── */
.schedule-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem .85rem;
  padding: .75rem 1rem;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: .5rem;
  transition: border-color .18s, background .18s, opacity .18s;
}
.schedule-row:hover { border-color: var(--border-hover); }
.schedule-row--disabled { opacity: .45; }

.schedule-row__time {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--orange);
  letter-spacing: -.03em;
  min-width: 56px;
  text-shadow: 0 0 10px rgba(255,174,0,.4);
}
.schedule-row__days {
  display: flex;
  gap: .3rem;
  flex-wrap: wrap;
}
.schedule-row__label {
  font-size: .78rem;
  color: var(--text-soft);
  background: var(--orange-dim);
  padding: .15rem .55rem;
  border-radius: 99px;
}
.schedule-row__meta {
  font-size: .75rem;
  color: var(--text-soft);
}
.schedule-row__actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
}

/* Day chips (read-only display) */
.day-chip {
  font-size: .7rem;
  font-weight: 600;
  padding: .15rem .45rem;
  border-radius: 5px;
  background: var(--bg-card);
  color: var(--muted);
  border: 1px solid var(--border);
}
.day-chip--on {
  background: var(--orange-dim);
  color: var(--orange);
  border-color: rgba(255,174,0,.25);
}

/* Day picker (interactive buttons) */
.day-picker {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
}
.day-btn {
  font-size: .75rem;
  font-weight: 600;
  padding: .3rem .6rem;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--bg-card2);
  color: var(--text-soft);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  user-select: none;
}
.day-btn:hover {
  border-color: var(--orange);
  color: var(--orange);
}
.day-btn.active {
  background: var(--orange-dim);
  border-color: rgba(255,174,0,.35);
  color: var(--orange);
}

/* ── Activity log ─────────────────────────────────────────────── */
.activity-log {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.activity-item {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.activity-item:last-child { border-bottom: none; }

.activity-item__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  flex-shrink: 0;
  margin-top: .1rem;
}
.activity-item__body {
  flex: 1;
  min-width: 0;
}
.activity-item__action {
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-main);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem;
}
.activity-item__detail {
  font-size: .75rem;
  font-weight: 400;
  color: var(--text-soft);
  background: var(--bg-card2);
  border: 1px solid var(--border);
  padding: .1rem .45rem;
  border-radius: 5px;
  font-family: monospace;
}
.activity-item__meta {
  font-size: .73rem;
  color: var(--text-soft);
  margin-top: .2rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .1rem;
}
.activity-item__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: .6rem;
  opacity: .7;
}

/* ── Metrics bars ─────────────────────────────────────────────── */
.metrics-bar {
  height: 6px;
  border-radius: 99px;
  background: var(--bg-card2);
  overflow: hidden;
}
.metrics-bar__fill {
  height: 100%;
  border-radius: 99px;
  transition: width .5s ease;
}
.metrics-bar__fill--cpu     { background: linear-gradient(90deg, var(--orange), #ff4444); }
.metrics-bar__fill--ram     { background: linear-gradient(90deg, var(--cyan), var(--purple)); }
.metrics-bar__fill--players { background: linear-gradient(90deg, var(--green), var(--cyan)); }

/* ── File manager ─────────────────────────────────────────────── */
.fm-pathbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .15rem;
  font-size: .82rem;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .5rem .85rem;
}
.fm-crumb {
  color: var(--cyan);
  text-decoration: none;
  font-weight: 500;
}
.fm-crumb:hover { text-decoration: underline; }
.fm-crumb-sep { color: var(--muted); margin: 0 .15rem; }

.fm-table {
  width: 100%;
  border-collapse: collapse;
}
.fm-table thead th {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-soft);
  padding: .6rem 1rem;
  border-bottom: 1px solid var(--border);
}
.fm-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.fm-table tbody tr:last-child { border-bottom: none; }
.fm-table tbody tr:hover { background: rgba(0,255,251,.03); }
.fm-table td { padding: .55rem 1rem; font-size: .85rem; vertical-align: middle; }
.fm-link {
  display: flex;
  align-items: center;
  color: var(--text-main);
  text-decoration: none;
  font-weight: 500;
}
.fm-link:hover { color: var(--cyan); }
.fm-link--plain { display: flex; align-items: center; color: var(--text-soft); }
.fm-meta { color: var(--text-soft); font-size: .78rem; white-space: nowrap; }

.fm-editor {
  width: 100%;
  min-height: 520px;
  background: #060115;
  color: #e0ffe0;
  border: none;
  outline: none;
  padding: 1.25rem;
  font-family: "JetBrains Mono", "Cascadia Code", "Fira Code", "Consolas", monospace;
  font-size: .82rem;
  line-height: 1.6;
  resize: vertical;
  border-radius: 0;
  tab-size: 2;
}
.fm-editor:focus { outline: none; }

/* ── Cron status box ─────────────────────────────────────────── */
.cron-status-box {
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .85rem 1rem;
}

/* ── Live Console ────────────────────────────────────────────── */
.live-console {
  background: #020109;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .5rem 0;
  height: 440px;
  overflow-y: auto;
  font-family: 'Courier New', Consolas, monospace;
  font-size: .76rem;
  line-height: 1.7;
  color: #b8f0ee;
  scroll-behavior: smooth;
}
.live-console pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
}

/* Each line is a block so border-left indicators work */
.console-line {
  display: block;
  padding: 0 .9rem 0 .65rem;
  border-left: 2px solid transparent;
}
.console-line:hover { background: rgba(255,255,255,.025); }

/* Severity coloring */
.console-line.cl-fatal {
  color: #ff6688;
  font-weight: 600;
  border-left-color: #ff1744;
  background: rgba(255,23,68,.07);
}
.console-line.cl-fatal:hover { background: rgba(255,23,68,.11); }

.console-line.cl-error {
  color: #ff7777;
  border-left-color: #ff4444;
  background: rgba(255,68,68,.05);
}
.console-line.cl-error:hover { background: rgba(255,68,68,.09); }

.console-line.cl-warn {
  color: #ffdd66;
  border-left-color: #ffae00;
  background: rgba(255,174,0,.05);
}
.console-line.cl-warn:hover { background: rgba(255,174,0,.09); }

.console-line.cl-ok {
  color: #66ff88;
  border-left-color: #39ff14;
  background: rgba(57,255,20,.04);
}
.console-line.cl-ok:hover { background: rgba(57,255,20,.08); }

.console-line.cl-debug {
  color: #556;
  border-left-color: transparent;
}

/* Inline highlights */
.cl-ts       { color: #9966cc; opacity: .85; }

/* Log-level badge spans — e.g. [INFO] [WARN] */
.cl-lv-info  { color: #55ddff; font-weight: 600; }
.cl-lv-warn  { color: #ffcc44; font-weight: 600; }
.cl-lv-error { color: #ff5555; font-weight: 600; }
.cl-lv-fatal { color: #ff2255; font-weight: 700; }
.cl-lv-debug { color: #666;    font-weight: 600; }
.cl-lv-ok    { color: #55ff77; font-weight: 600; }

/* Scrollbar */
.live-console::-webkit-scrollbar       { width: 5px; }
.live-console::-webkit-scrollbar-track { background: #020109; }
.live-console::-webkit-scrollbar-thumb { background: rgba(0,255,251,.18); border-radius: 3px; }
.live-console::-webkit-scrollbar-thumb:hover { background: rgba(0,255,251,.35); }