/* ================================================================
   HOMESERVER THEME — edit :root to retheme the entire UI
   ================================================================ */

:root {
  /* Background */
  --bg:       #323222;
  --bg-from:  #404030;
  --bg-mid:   #3a3826;

  /* Accents */
  --green:    #00e87a;
  --orange:   #fb923c;
  --red:      #f87171;
  --yellow:   #fbbf24;

  /* Text */
  --text:     #f0ece0;
  --muted:    #a09484;

  /* Cards / bubbles */
  --card-bg:     rgba(255,248,225,.18);
  --card-border: rgba(255,235,175,.38);
  --card-shadow: 0 8px 32px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.25);
  --row-border:  rgba(255,235,175,.20);

  /* Navigation */
  --nav-bg:     rgba(55,54,36,.98);
  --nav-border: rgba(255,235,175,.32);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

body {
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, var(--bg-from) 0%, var(--bg) 55%),
    radial-gradient(ellipse 60% 80% at 80% 70%, var(--bg-mid)  0%, var(--bg) 55%);
  color: var(--text);
  font-family: 'Courier New', monospace;
  font-size: 13px;
  min-height: 100vh;
}

body::before, body::after {
  content:''; position:fixed; border-radius:50%;
  filter:blur(80px); pointer-events:none; z-index:0;
}
body::before {
  width:500px; height:500px;
  background: radial-gradient(circle, rgba(0,232,122,.05) 0%, transparent 70%);
  top:-100px; left:-100px;
}
body::after {
  width:400px; height:400px;
  background: radial-gradient(circle, rgba(251,146,60,.09) 0%, transparent 70%);
  bottom:-80px; right:-60px;
}

/* ── Navigation ──────────────────────────────────────────────── */
nav {
  position:relative; z-index:10;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  padding:.6rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.nav-title {
  font-size:.72rem; color:var(--green);
  letter-spacing:3px; text-transform:uppercase;
  text-shadow:0 0 12px rgba(0,232,122,.4);
}
.nav-left  { display:flex; align-items:center; gap:1rem; }
.nav-right { display:flex; align-items:center; gap:1rem; }
.nav-home {
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.72rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--bg); background:var(--green);
  text-decoration:none; padding:.35rem .95rem;
  border-radius:20px; white-space:nowrap;
  box-shadow:0 0 10px rgba(0,232,122,.35);
  transition:opacity .15s,box-shadow .15s;
}
.nav-home:hover { opacity:.85; box-shadow:0 0 18px rgba(0,232,122,.55); }
.nav-meta { font-size:.65rem; color:var(--muted); }

/* ── Card / bubble ───────────────────────────────────────────── */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow: var(--card-shadow);
}
.card-title {
  font-size:.65rem; text-transform:uppercase;
  letter-spacing:.1em; color:var(--muted);
  margin-bottom:.75rem;
  display:flex; align-items:center; gap:.4rem;
}

/* ── Data rows ───────────────────────────────────────────────── */
.row {
  display:flex; justify-content:space-between; align-items:center;
  padding:.22rem 0; border-bottom:1px solid var(--row-border);
}
.row:last-child { border-bottom:none; }
.label { color:var(--muted); font-size:.78rem; }
.value { color:var(--text); text-align:right; font-variant-numeric:tabular-nums; }
.value.hot  { color:var(--red); }
.value.warn { color:var(--orange); }
.value.ok   { color:var(--green); }

/* ── Badges ──────────────────────────────────────────────────── */
.badge {
  display:inline-block; padding:2px 10px;
  border-radius:20px; font-size:.7rem; font-weight:600;
}
.badge.active, .badge.up, .badge.online {
  background:rgba(0,200,100,.13); color:var(--green);
  border:1px solid rgba(0,200,100,.3);
}
.badge.inactive {
  background:rgba(255,235,175,.06); color:var(--muted);
}
.badge.down, .badge.offline {
  background:rgba(248,113,113,.13); color:var(--red);
  border:1px solid rgba(248,113,113,.3);
}
.badge.warn {
  background:rgba(251,146,60,.13); color:var(--orange);
  border:1px solid rgba(251,146,60,.3);
}

/* ── Progress bars ───────────────────────────────────────────── */
.bar-wrap {
  background:rgba(255,235,175,.22);
  border-radius:4px; height:6px; width:120px;
  overflow:hidden; display:inline-block; vertical-align:middle;
}
.bar { height:100%; border-radius:4px; transition:width .5s; }
.bar.low  { background:var(--green); }
.bar.med  { background:var(--orange); }
.bar.high { background:var(--red); }