/* ==============================
   YaMa Servers UK
   Global Design System (LOCKED)
   ============================== */


/* ---------- VARIABLES ---------- */
:root {
  --primary: #194fa5;
  --primary-soft: #60a5fa;
  --bg-dark: #1e1e1e;
  --card-dark: #2a2a2a;
  --text-main: #ffffff;
  --text-muted: #aaa;
}


/* ---------- BASE RESET ---------- */
body {
  background: var(--bg-dark);
  color: var(--text-main);
  font-family: 'Manrope', system-ui, sans-serif;
  margin: 0;
  padding: 0;
  text-align: center;
}


/* ---------- NAVBAR ---------- */
.navbar {
  height: 64px;
  width: 100%;
  background: linear-gradient(180deg, #1C4FA1, #163a75);
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  display: flex;
  justify-content: center;
}

.navbar-inner {
  max-width: 1300px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.brand {
  font-size: 24px;
  font-weight: 700;
  color: white;
  text-decoration: none;
}

.nav-center a {
  color: #dbeafe;
  font-weight: 600;
  font-size: 13px;
  padding: 6px 10px;
  margin: 0 10px;
  text-decoration: none;
}

.nav-center a.active {
  background: linear-gradient(145deg,#255bb5,#1c4091);
  border-radius: 6px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.6);
}

.discord-btn {
  background: linear-gradient(135deg,#5865F2,#3843c9);
  color: white;
  font-weight: 700;
  font-size: 12px;
  padding: 8px 18px;
  border-radius: 999px;
  text-decoration: none;
}


/* ---------- PAGE HEADER ---------- */
.page-header {
  max-width: 1000px;
  margin: 22px auto 20px;
  text-align: center;
}

.page-header h1 {
  color: var(--primary);
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 6px;
}

.page-header .sub {
  color: var(--text-muted);
  font-size: 13px;
}


/* ---------- CONTAINER ---------- */
.container { 
  max-width: 1000px; 
  margin: 15px auto; 
  padding: 0 20px; 
}


/* ---------- CARD ---------- */
.card {
  background: var(--card-dark);
  padding: 14px;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  margin: 15px auto;
}


/* ---------- BUTTON ---------- */
.ui-btn {
  background: linear-gradient(135deg,#151515,#0e0e0e);
  border: 1px solid rgba(96,165,250,.25);
  color: #dbeafe;
  padding: 10px 18px;
  font-weight: 600;
  border-radius: 10px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 0 18px rgba(59,130,246,.15);
}


/* ---------- TABLE ---------- */
table {
  width: 100%;
  font-size: 13px;
  border-collapse: collapse;
}

th {
  background: #232323;
  color: #aaa;
  font-weight: 600;
}

td, th {
  padding: 8px 10px;
  border-bottom: 1px solid #333;
}


/* ---------- FOOTER LINK ---------- */
.back-link {
  display: inline-block;
  margin-top: 15px;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid