:root{
  --bg:#070a12;
  --panel:#0f1628cc;
  --line:#223252;
  --text:#e9eefc;
  --muted:#a9b5d6;

  --gold:#ffd36a;
  --silver:#d7dde7;
  --bronze:#d4a06a;

  --btn:#1b2a4a;
  --btn2:#12203b;

  --good:#58f2a6;
  --bad:#ff6b86;

  --shadow: 0 18px 40px rgba(0,0,0,.28);
  --radius: 20px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--text);
  background:
    radial-gradient(900px 520px at 18% 0%, rgba(63,50,140,.35), transparent 60%),
    radial-gradient(900px 520px at 86% 18%, rgba(130,35,80,.28), transparent 55%),
    radial-gradient(900px 520px at 50% 110%, rgba(20,90,120,.20), transparent 55%),
    var(--bg);
}

a{color:inherit; text-decoration:none}
.wrap{max-width:1100px;margin:0 auto;padding:22px}

.nav{
  position:sticky; top:0; z-index:10;
  backdrop-filter: blur(10px);
  background: rgba(7,10,18,.60);
  border-bottom:1px solid rgba(34,50,82,.75);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.brand{
  color:var(--gold);
  font-weight:900;
  letter-spacing:.12em;
  font-size:13px;
  opacity:.95;
  padding:14px 0;
}
.links{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.links a{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(160,175,220,.18);
  background:rgba(7,10,18,.30);
  color:rgba(210,220,255,.95);
  font-weight:800;
  font-size:13px;
}
.links a:hover{filter:brightness(1.1)}

h1{margin:14px 0 8px; font-size:36px; line-height:1.06}
p{color:var(--muted); line-height:1.5}

.card{
  margin-top:16px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.card-pad{padding:16px}

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:linear-gradient(180deg, var(--btn), var(--btn2));
  color:var(--text);
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px 16px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 12px 24px rgba(0,0,0,.25);
}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:rgba(15,22,40,.45); box-shadow:none}
.pill{
  border:1px dashed rgba(160,175,220,.35);
  color:var(--muted);
  font-size:12px;
  border-radius:999px;
  padding:8px 10px;
  user-select:none;
}

.footer{
  margin-top:22px;
  padding:16px 0 28px;
  color:rgba(170,185,220,.85);
  font-size:12px;
  border-top:1px solid rgba(34,50,82,.75);
}

/* ===== TIMELESS UI UPGRADE (safe) ===== */
:root{
  --bg0:#070A12;
  --bg1:#0B1020;
  --panel: rgba(10, 16, 34, .62);
  --panel2: rgba(10, 16, 34, .42);
  --stroke: rgba(120, 140, 200, .22);
  --text: rgba(245, 248, 255, .92);
  --muted: rgba(200, 210, 235, .72);
  --link: rgba(185, 169, 255, .95);
  --glow: rgba(160, 120, 255, .22);
}

html, body{
  background: radial-gradient(1200px 600px at 15% 10%, rgba(140,90,255,.18), transparent 60%),
              radial-gradient(900px 500px at 85% 20%, rgba(180,40,120,.12), transparent 60%),
              radial-gradient(1000px 600px at 55% 80%, rgba(60,140,255,.10), transparent 60%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  color: var(--text);
}

body{
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 18px 40px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Titles */
h1{
  font-size: clamp(34px, 4vw, 52px);
  margin: 6px 0 10px;
  letter-spacing: .2px;
}
p{ color: var(--muted); }

/* Links */
a{ color: var(--link); }
a:hover{ opacity: .92; }

/* Inputs / controls */
input[type="text"], input[type="search"]{
  width: 100%;
  max-width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--stroke);
  color: var(--text);
  padding: 12px 14px;
  border-radius: 14px;
  outline: none;
}
input[type="text"]::placeholder, input[type="search"]::placeholder{
  color: rgba(210,220,250,.55);
}

button{
  background: linear-gradient(180deg, rgba(185,169,255,.22), rgba(185,169,255,.10));
  border: 1px solid rgba(185,169,255,.35);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 14px;
  cursor: pointer;
}
button:hover{ filter: brightness(1.05); }

/* Table wrapper look (doesn’t touch JS) */
table{
  width: 100%;
  border-collapse: collapse;
  margin-top: 14px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset, 0 18px 40px rgba(0,0,0,.35);
}

thead th{
  background: rgba(255,255,255,.04);
  color: rgba(245,248,255,.88);
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 14px;
  border-bottom: 1px solid rgba(120, 140, 200, .22);
}

tbody tr:hover{
  background: rgba(255,255,255,.03);
}

tbody td{
  color: rgba(245,248,255,.90);
}

/* Footer already isolated */
.timeless-footer{
  margin-top: 60px;
  padding: 26px 18px;
  text-align: center;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset;
}

.timeless-footer .timeless-socials a{
  margin: 0 12px;
  text-decoration: none;
  font-weight: 700;
}

/* Small “glass” blocks you can reuse in pages */
.timeless-card{
  margin-top: 14px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: var(--panel2);
  box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset;
}

/* ===== TIMELESS THEME: purple + bright blue + vinotinto ===== */
:root{
  --bg0:#060812;
  --bg1:#0A0E1E;

  --purple:#A56BFF;
  --blue:#35B9FF;
  --vinotinto:#7D123C;

  --text: rgba(245, 248, 255, .92);
  --muted: rgba(205, 212, 235, .72);

  --stroke: rgba(160, 140, 255, .22);
  --panel: rgba(10, 16, 34, .62);
  --panel2: rgba(10, 16, 34, .42);

  --glowP: rgba(165, 107, 255, .28);
  --glowB: rgba(53, 185, 255, .20);
  --glowV: rgba(125, 18, 60, .18);
}

html, body{
  background:
    radial-gradient(900px 520px at 12% 14%, var(--glowB), transparent 60%),
    radial-gradient(860px 520px at 88% 18%, var(--glowP), transparent 60%),
    radial-gradient(900px 600px at 55% 92%, var(--glowV), transparent 62%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  color: var(--text);
}

body{
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 18px 44px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Titles */
h1{
  font-size: clamp(34px, 4.2vw, 54px);
  margin: 6px 0 10px;
  letter-spacing: .3px;
  text-shadow: 0 0 22px rgba(165,107,255,.14);
}
p{ color: var(--muted); }

/* Links */
a{
  color: rgba(185, 169, 255, .98);
  text-decoration: none;
}
a:hover{ opacity: .92; text-decoration: underline; }

/* Inputs */
input[type="text"], input[type="search"]{
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(160, 140, 255, .20);
  color: var(--text);
  padding: 12px 14px;
  border-radius: 16px;
  outline: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.02) inset;
}
input[type="text"]:focus, input[type="search"]:focus{
  border-color: rgba(53,185,255,.42);
  box-shadow:
    0 0 0 1px rgba(53,185,255,.18) inset,
    0 0 22px rgba(53,185,255,.14);
}
input::placeholder{ color: rgba(210,220,250,.55); }

/* Buttons */
button{
  background: linear-gradient(180deg, rgba(165,107,255,.22), rgba(53,185,255,.10));
  border: 1px solid rgba(165,107,255,.35);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 16px;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255,255,255,.02) inset;
}
button:hover{
  filter: brightness(1.06);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 0 26px rgba(165,107,255,.14);
}

/* Table panel (safe; does not affect your JS rendering styles) */
table{
  width: 100%;
  border-collapse: collapse;
  margin-top: 14px;
  background: var(--panel);
  border: 1px solid rgba(160,140,255,.20);
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.02) inset,
    0 18px 44px rgba(0,0,0,.38);
}

thead th{
  background:
    linear-gradient(90deg, rgba(53,185,255,.10), rgba(165,107,255,.10), rgba(125,18,60,.08));
  color: rgba(245,248,255,.88);
  font-weight: 900;
  letter-spacing: .7px;
  text-transform: uppercase;
  padding: 14px;
  border-bottom: 1px solid rgba(160,140,255,.18);
}

tbody tr:hover{ background: rgba(255,255,255,.03); }

/* Reusable glass card */
.timeless-card{
  margin-top: 14px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(160,140,255,.18);
  background: var(--panel2);
  box-shadow: 0 0 0 1px rgba(255,255,255,.02) inset;
}

/* Footer */
.timeless-footer{
  margin-top: 60px;
  padding: 26px 18px;
  text-align: center;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(160,140,255,.18);
  box-shadow: 0 0 0 1px rgba(255,255,255,.02) inset;
}

.timeless-footer .timeless-socials a{
  margin: 0 12px;
  font-weight: 800;
}

.timeless-footer .timeless-socials a:nth-child(1){ color: rgba(165,107,255,.98); } /* IG */
.timeless-footer .timeless-socials a:nth-child(2){ color: rgba(53,185,255,.98); }  /* TikTok */
.timeless-footer .timeless-socials a:nth-child(3){ color: rgba(245,248,255,.92); } /* Discord */
.timeless-footer .timeless-socials a:nth-child(4){ color: rgba(255,90,140,.92); }  /* WhatsApp accent */