:root {
    --bg:        #0d0b09;
    --bg-2:      #16120e;
    --panel:     #1c1712;
    --panel-2:   #221b15;
    --rust:      #cf6a2e;   /* primary rust orange */
    --rust-2:    #e8843f;   /* brighter accent */
    --ember:     #f4a259;   /* highlight */
    --steel:     #8a9ba8;   /* cool contrast */
    --text:      #ece4da;
    --text-dim:  #9c9088;
    --line:      #2e251d;
    --green:     #6cc24a;
    --radius:    14px;
    --maxw:      1180px;
  }

  * { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Chakra Petch', sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
    /* subtle grain + warm vignette for atmosphere */
    background-image:
      radial-gradient(circle at 50% -10%, rgba(207,106,46,0.18), transparent 55%),
      radial-gradient(circle at 90% 100%, rgba(138,155,168,0.06), transparent 40%);
    background-attachment: fixed;
  }
  h1,h2,h3,.display { font-family:'Oswald', sans-serif; letter-spacing:0.5px; text-transform:uppercase; }
  a { color:inherit; text-decoration:none; }
  .wrap { max-width:var(--maxw); margin:0 auto; padding:0 24px; }
  .accent { color:var(--rust-2); }

  /* ---------- NAV ---------- */
  header {
    position:sticky; top:0; z-index:50;
    backdrop-filter: blur(10px);
    background: rgba(13,11,9,0.72);
    border-bottom:1px solid var(--line);
  }
  nav { display:flex; align-items:center; justify-content:space-between; height:68px; }
  .logo { display:flex; align-items:center; gap:12px; font-family:'Oswald'; font-weight:700; font-size:1.25rem; text-transform:uppercase; }
  .logo .mark {
    width:34px; height:34px; border-radius:8px;
    background:linear-gradient(135deg, var(--rust), var(--rust-2));
    display:grid; place-items:center; font-size:18px;
    box-shadow:0 0 18px rgba(207,106,46,0.5);
  }
  .nav-links { display:flex; gap:30px; align-items:center; }
  .nav-links a { color:var(--text-dim); font-weight:500; font-size:0.95rem; transition:color .2s; }
  .nav-links a:hover { color:var(--text); }
  .btn {
    display:inline-flex; align-items:center; gap:8px;
    background:linear-gradient(135deg, var(--rust), var(--rust-2));
    color:#1a0f06; font-weight:600; font-family:'Chakra Petch';
    padding:11px 22px; border-radius:10px; font-size:0.95rem;
    border:none; cursor:pointer; transition:transform .15s, box-shadow .2s;
    box-shadow:0 6px 20px rgba(207,106,46,0.35);
  }
  .btn:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(207,106,46,0.5); }
  .btn.ghost { background:transparent; color:var(--text); border:1px solid var(--line); box-shadow:none; }
  .btn.ghost:hover { border-color:var(--rust); color:var(--ember); }
  .nav-toggle { display:none; background:none; border:none; color:var(--text); font-size:1.6rem; cursor:pointer; }

  /* ---------- HERO ---------- */
  .hero { position:relative; padding:120px 0 90px; text-align:center; }
  .hero .tag {
    display:inline-block; font-size:0.8rem; letter-spacing:2px; text-transform:uppercase;
    color:var(--ember); border:1px solid var(--line); padding:7px 16px; border-radius:30px;
    margin-bottom:28px; background:var(--panel);
  }
  .hero h1 {
    font-size:clamp(2.6rem, 6vw, 5rem); line-height:1.02; font-weight:700;
    margin-bottom:22px;
  }
  .hero h1 span { color:var(--rust-2); display:block; }
  .hero p { max-width:620px; margin:0 auto 38px; color:var(--text-dim); font-size:1.12rem; }
  .hero-cta { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

  .stats { display:flex; gap:48px; justify-content:center; margin-top:70px; flex-wrap:wrap; }
  .stat .num { font-family:'Oswald'; font-size:2.4rem; font-weight:700; color:var(--text); }
  .stat .lbl { color:var(--text-dim); font-size:0.85rem; text-transform:uppercase; letter-spacing:1px; }

  /* ---------- SECTION SHELL ---------- */
  section { padding:90px 0; }
  .sec-head { text-align:center; margin-bottom:56px; }
  .sec-head .eyebrow { color:var(--rust-2); font-size:0.82rem; letter-spacing:3px; text-transform:uppercase; font-weight:600; }
  .sec-head h2 { font-size:clamp(2rem,4vw,2.9rem); margin:12px 0 14px; }
  .sec-head p { color:var(--text-dim); max-width:560px; margin:0 auto; }

  /* ---------- FEATURES ---------- */
  .grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:22px; }
  .card {
    background:linear-gradient(160deg, var(--panel), var(--panel-2));
    border:1px solid var(--line); border-radius:var(--radius);
    padding:30px; transition:transform .2s, border-color .2s;
    position:relative; overflow:hidden;
  }
  .card::before {
    content:""; position:absolute; inset:0 0 auto 0; height:3px;
    background:linear-gradient(90deg, var(--rust), transparent);
    opacity:0; transition:opacity .25s;
  }
  .card:hover { transform:translateY(-4px); border-color:var(--rust); }
  .card:hover::before { opacity:1; }
  .card .ico { font-size:2rem; margin-bottom:16px; display:block; }
  .card h3 { font-size:1.25rem; margin-bottom:10px; color:var(--text); }
  .card p { color:var(--text-dim); font-size:0.96rem; }

  /* ---------- COMMANDS ---------- */
  #commands { background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .cmd-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; }
  .cmd {
    display:flex; gap:16px; align-items:flex-start;
    background:var(--panel); border:1px solid var(--line);
    border-radius:12px; padding:18px 20px; transition:border-color .2s;
  }
  .cmd:hover { border-color:var(--rust); }
  .cmd code {
    font-family:'Chakra Petch'; font-weight:600; color:var(--ember);
    background:rgba(207,106,46,0.1); padding:4px 10px; border-radius:6px;
    white-space:nowrap; font-size:0.92rem;
  }
  .cmd .desc { color:var(--text-dim); font-size:0.92rem; }

  /* ---------- DOCS ---------- */
  .docs-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px; }
  .doc-card { background:linear-gradient(160deg,var(--panel),var(--panel-2)); border:1px solid var(--line); border-radius:var(--radius); padding:28px; transition:transform .2s,border-color .2s; }
  .doc-card:hover { transform:translateY(-4px); border-color:var(--rust); }
  .doc-card h3 { display:flex; align-items:center; gap:10px; font-size:1.15rem; margin-bottom:10px; }
  .doc-card p { color:var(--text-dim); font-size:0.95rem; margin-bottom:16px; }
  .doc-card a { color:var(--rust-2); font-weight:600; font-size:0.9rem; }
  .doc-card a:hover { color:var(--ember); }

  /* ---------- CTA BAND ---------- */
  .cta-band { text-align:center; }
  .cta-inner {
    background:linear-gradient(135deg, rgba(207,106,46,0.14), rgba(34,27,21,0.6));
    border:1px solid var(--rust); border-radius:20px; padding:64px 32px;
  }
  .cta-inner h2 { font-size:clamp(1.8rem,4vw,2.8rem); margin-bottom:16px; }
  .cta-inner p { color:var(--text-dim); max-width:480px; margin:0 auto 30px; }

  /* ---------- FOOTER ---------- */
  footer { border-top:1px solid var(--line); padding:50px 0 30px; background:var(--bg-2); }
  .foot-grid { display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-bottom:36px; }
  .foot-col h4 { font-family:'Oswald'; text-transform:uppercase; font-size:0.9rem; letter-spacing:1px; margin-bottom:14px; color:var(--text); }
  .foot-col a { display:block; color:var(--text-dim); font-size:0.92rem; margin-bottom:9px; transition:color .2s; }
  .foot-col a:hover { color:var(--ember); }
  .foot-brand { max-width:280px; }
  .foot-brand p { color:var(--text-dim); font-size:0.92rem; margin-top:12px; }
  .foot-bottom { text-align:center; color:var(--text-dim); font-size:0.85rem; padding-top:24px; border-top:1px solid var(--line); }

  /* ---------- reveal animation ---------- */
  .reveal { opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
  .reveal.in { opacity:1; transform:none; }

  /* ---------- responsive ---------- */
  @media (max-width:760px) {
    .nav-links { display:none; }
    .nav-toggle { display:block; }
    .nav-links.open {
      display:flex; flex-direction:column; position:absolute; top:68px; left:0; right:0;
      background:var(--bg-2); padding:24px; gap:18px; border-bottom:1px solid var(--line);
    }
    .stats { gap:32px; }
  }

/* ============================================================
   SHARED PAGE COMPONENTS (features / commands / docs)
   ============================================================ */

/* page hero (smaller than home hero) */
.page-hero { padding:80px 0 40px; text-align:center; }
.page-hero .tag {
  display:inline-block; font-size:0.8rem; letter-spacing:2px; text-transform:uppercase;
  color:var(--ember); border:1px solid var(--line); padding:7px 16px; border-radius:30px;
  margin-bottom:22px; background:var(--panel);
}
.page-hero h1 { font-size:clamp(2.2rem,5vw,3.6rem); line-height:1.05; margin-bottom:16px; }
.page-hero p { max-width:620px; margin:0 auto; color:var(--text-dim); font-size:1.08rem; }

/* search / filter bar */
.toolbar { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin:0 auto 44px; max-width:760px; }
.search {
  flex:1; min-width:240px; display:flex; align-items:center; gap:10px;
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:0 16px;
  transition:border-color .2s;
}
.search:focus-within { border-color:var(--rust); }
.search input {
  flex:1; background:none; border:none; outline:none; color:var(--text);
  font-family:'Chakra Petch'; font-size:1rem; padding:13px 0;
}
.search input::placeholder { color:var(--text-dim); }
.search .ico { font-size:1.05rem; color:var(--text-dim); }

.count-pill { color:var(--text-dim); font-size:0.85rem; align-self:center; }

/* category filter chips */
.chips { display:flex; gap:9px; flex-wrap:wrap; justify-content:center; margin-bottom:40px; }
.chip {
  background:var(--panel); border:1px solid var(--line); color:var(--text-dim);
  padding:7px 15px; border-radius:30px; font-size:0.85rem; cursor:pointer;
  font-family:'Chakra Petch'; transition:all .18s; white-space:nowrap;
}
.chip:hover { color:var(--text); border-color:var(--rust); }
.chip.active { background:linear-gradient(135deg,var(--rust),var(--rust-2)); color:#1a0f06; border-color:transparent; font-weight:600; }

/* group heading inside lists */
.group-head {
  font-family:'Oswald'; text-transform:uppercase; letter-spacing:1px;
  font-size:1.15rem; color:var(--ember); margin:38px 0 16px;
  display:flex; align-items:center; gap:12px;
}
.group-head::after { content:""; flex:1; height:1px; background:var(--line); }

/* command row */
.cmd-row {
  display:flex; gap:18px; align-items:flex-start;
  background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:16px 20px; margin-bottom:12px;
  transition:border-color .18s, transform .18s;
}
.cmd-row:hover { border-color:var(--rust); transform:translateX(3px); }
.cmd-row code {
  font-family:'Chakra Petch'; font-weight:600; color:var(--ember);
  background:rgba(207,106,46,0.1); padding:5px 11px; border-radius:6px;
  white-space:nowrap; font-size:0.92rem; flex-shrink:0; min-width:160px;
}
.cmd-row .desc { color:var(--text-dim); font-size:0.95rem; }

/* docs accordion */
.doc-item { background:var(--panel); border:1px solid var(--line); border-radius:12px; margin-bottom:12px; overflow:hidden; transition:border-color .2s; }
.doc-item.open { border-color:var(--rust); }
.doc-q {
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  color:var(--text); font-family:'Oswald'; text-transform:uppercase; letter-spacing:.5px;
  font-size:1.05rem; padding:20px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.doc-q:hover { color:var(--ember); }
.doc-q .arrow { color:var(--rust-2); transition:transform .25s; font-size:1.1rem; flex-shrink:0; }
.doc-item.open .doc-q .arrow { transform:rotate(90deg); }
.doc-a { max-height:0; overflow:hidden; transition:max-height .3s ease; }
.doc-a-inner { padding:0 22px 22px; color:var(--text-dim); font-size:0.97rem; line-height:1.7; white-space:pre-wrap; }
.doc-a-inner code { font-family:'Chakra Petch'; color:var(--ember); background:rgba(207,106,46,0.1); padding:2px 7px; border-radius:5px; font-size:0.9em; }
.doc-a-inner strong { color:var(--text); }

/* tab switcher (player / admin) */
.tabs { display:flex; gap:8px; justify-content:center; margin-bottom:34px; }
.tab-btn {
  background:var(--panel); border:1px solid var(--line); color:var(--text-dim);
  padding:10px 26px; border-radius:10px; cursor:pointer; font-family:'Oswald';
  text-transform:uppercase; letter-spacing:1px; font-size:0.92rem; transition:all .18s;
}
.tab-btn:hover { color:var(--text); }
.tab-btn.active { background:linear-gradient(135deg,var(--rust),var(--rust-2)); color:#1a0f06; border-color:transparent; }

.empty { text-align:center; color:var(--text-dim); padding:50px 0; font-size:1.05rem; }
.feat-grid-full { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.feat-tile {
  display:flex; gap:14px; align-items:center;
  background:linear-gradient(160deg,var(--panel),var(--panel-2));
  border:1px solid var(--line); border-radius:12px; padding:18px 20px;
  transition:transform .18s, border-color .18s;
}
.feat-tile:hover { transform:translateY(-3px); border-color:var(--rust); }
.feat-tile .fico { font-size:1.6rem; flex-shrink:0; }
.feat-tile .fname { font-family:'Oswald'; text-transform:uppercase; letter-spacing:.5px; font-size:1rem; color:var(--text); }

/* ============================================================
   STATUS / UPDATES / LOGIN / ADMIN page components
   ============================================================ */

/* live status badge */
.status-hero { text-align:center; padding:70px 0 30px; }
.status-dot {
  display:inline-flex; align-items:center; gap:12px;
  background:var(--panel); border:1px solid var(--line); border-radius:40px;
  padding:14px 28px; font-family:'Oswald'; text-transform:uppercase; letter-spacing:1px; font-size:1.1rem;
}
.dot { width:14px; height:14px; border-radius:50%; flex-shrink:0; }
.dot.on  { background:var(--green); box-shadow:0 0 14px var(--green); animation:pulse 2s infinite; }
.dot.off { background:#e74c3c; box-shadow:0 0 14px #e74c3c; }
.dot.unknown { background:var(--text-dim); }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.45;} }

.status-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin:40px 0; }
.status-card { background:linear-gradient(160deg,var(--panel),var(--panel-2)); border:1px solid var(--line); border-radius:var(--radius); padding:26px; text-align:center; }
.status-card .big { font-family:'Oswald'; font-size:2.4rem; font-weight:700; color:var(--text); }
.status-card .lbl { color:var(--text-dim); font-size:0.85rem; text-transform:uppercase; letter-spacing:1px; margin-top:6px; }

/* uptime bar graph */
.uptime-wrap { background:linear-gradient(160deg,var(--panel),var(--panel-2)); border:1px solid var(--line); border-radius:var(--radius); padding:28px; }
.uptime-wrap h3 { font-family:'Oswald'; text-transform:uppercase; letter-spacing:1px; margin-bottom:6px; }
.uptime-sub { color:var(--text-dim); font-size:0.9rem; margin-bottom:22px; }
.bars { display:flex; gap:3px; align-items:flex-end; height:120px; }
.bar { flex:1; min-width:3px; border-radius:3px 3px 0 0; background:var(--green); transition:opacity .2s; position:relative; }
.bar:hover { opacity:0.7; }
.bar.miss { background:var(--line); }
.bars-legend { display:flex; justify-content:space-between; color:var(--text-dim); font-size:0.78rem; margin-top:10px; }

/* update / changelog entries */
.release { background:linear-gradient(160deg,var(--panel),var(--panel-2)); border:1px solid var(--line); border-radius:var(--radius); padding:26px 28px; margin-bottom:20px; }
.release-date { font-family:'Oswald'; text-transform:uppercase; letter-spacing:1px; color:var(--ember); font-size:1.05rem; margin-bottom:16px; }
.entry { display:flex; gap:12px; align-items:flex-start; margin-bottom:12px; }
.badge { font-family:'Oswald'; text-transform:uppercase; font-size:0.72rem; letter-spacing:1px; padding:4px 10px; border-radius:6px; flex-shrink:0; min-width:74px; text-align:center; }
.badge.Added   { background:rgba(108,194,74,0.15); color:#8fdc6a; }
.badge.Updated { background:rgba(52,152,219,0.15); color:#5dade2; }
.badge.Fixed   { background:rgba(241,196,15,0.15); color:#f4d03f; }
.badge.Removed { background:rgba(231,76,60,0.15); color:#ec7063; }
.entry .etext { color:var(--text-dim); font-size:0.96rem; padding-top:2px; }

/* login + admin */
.panel-box { background:linear-gradient(160deg,var(--panel),var(--panel-2)); border:1px solid var(--line); border-radius:var(--radius); padding:34px; margin-bottom:20px; }
.discord-btn {
  display:inline-flex; align-items:center; gap:10px; background:#5865F2; color:#fff;
  font-family:'Chakra Petch'; font-weight:600; padding:14px 28px; border-radius:10px;
  font-size:1rem; border:none; cursor:pointer; transition:transform .15s, box-shadow .2s;
  box-shadow:0 6px 20px rgba(88,101,242,0.4);
}
.discord-btn:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(88,101,242,0.55); }

.me-bar { display:flex; align-items:center; gap:14px; margin-bottom:26px; }
.me-bar img { width:48px; height:48px; border-radius:50%; border:2px solid var(--rust); }
.me-bar .uname { font-family:'Oswald'; font-size:1.2rem; text-transform:uppercase; letter-spacing:.5px; }
.me-bar .role { color:var(--ember); font-size:0.8rem; text-transform:uppercase; letter-spacing:1px; }

.guild-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.guild-card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:20px; transition:border-color .2s; }
.guild-card:hover { border-color:var(--rust); }
.guild-head { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.guild-icon { width:44px; height:44px; border-radius:12px; background:var(--panel-2); display:grid; place-items:center; font-family:'Oswald'; font-size:1.2rem; color:var(--ember); overflow:hidden; flex-shrink:0; }
.guild-icon img { width:100%; height:100%; object-fit:cover; }
.guild-name { font-family:'Oswald'; text-transform:uppercase; letter-spacing:.5px; font-size:1.02rem; line-height:1.2; }
.guild-sub { color:var(--text-dim); font-size:0.8rem; }
.guild-stats { display:flex; gap:18px; margin:12px 0; color:var(--text-dim); font-size:0.88rem; }
.guild-stats b { color:var(--text); font-family:'Oswald'; }
.btn.sm { padding:8px 16px; font-size:0.85rem; }
.btn.danger { background:linear-gradient(135deg,#c0392b,#e74c3c); box-shadow:0 6px 18px rgba(231,76,60,0.35); color:#fff; }
.pill-in   { display:inline-block; font-size:0.72rem; text-transform:uppercase; letter-spacing:1px; padding:3px 10px; border-radius:20px; background:rgba(108,194,74,0.15); color:#8fdc6a; }
.pill-out  { display:inline-block; font-size:0.72rem; text-transform:uppercase; letter-spacing:1px; padding:3px 10px; border-radius:20px; background:rgba(231,76,60,0.12); color:#ec7063; }

/* admin form */
.field { margin-bottom:16px; }
.field label { display:block; font-family:'Oswald'; text-transform:uppercase; letter-spacing:1px; font-size:0.82rem; color:var(--text-dim); margin-bottom:7px; }
.field select, .field textarea, .field input {
  width:100%; background:var(--bg-2); border:1px solid var(--line); border-radius:10px;
  color:var(--text); font-family:'Chakra Petch'; font-size:0.98rem; padding:12px 14px; outline:none;
}
.field select:focus, .field textarea:focus, .field input:focus { border-color:var(--rust); }
.field textarea { resize:vertical; min-height:90px; }

.draft-row { display:flex; gap:12px; align-items:flex-start; background:var(--bg-2); border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin-bottom:10px; }
.draft-row .etext { flex:1; color:var(--text-dim); font-size:0.94rem; }
.x-btn { background:none; border:1px solid var(--line); color:var(--text-dim); border-radius:8px; padding:5px 11px; cursor:pointer; font-size:0.85rem; transition:all .15s; flex-shrink:0; }
.x-btn:hover { border-color:#e74c3c; color:#ec7063; }

.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--panel); border:1px solid var(--rust); color:var(--text); padding:13px 24px; border-radius:10px; font-size:0.95rem; opacity:0; transition:opacity .3s; pointer-events:none; z-index:100; }
.toast.show { opacity:1; }
.note { color:var(--text-dim); font-size:0.9rem; line-height:1.6; }
.loading { text-align:center; color:var(--text-dim); padding:40px 0; }