/* =========================================================
   Minecraft Site – Modern Responsive + Dark Mode
   ========================================================= */
:root{
  --bg: #0b0f14;
  --bg-soft: #0f1520;
  --panel: #111927;
  --text: #e6edf3;
  --muted: #9fb3c8;
  --primary: #45d08f;
  --primary-600: #2fb77a;
  --accent: #7cc4ff;
  --ring: rgba(124,196,255,.45);
  --border: #243244;
  --shadow: 0 8px 30px rgba(0,0,0,.25);
}

:root[data-theme="light"]{
  --bg: #f6f8fb;
  --bg-soft: #f0f4f8;
  --panel: #ffffff;
  --text: #0b1220;
  --muted: #49566d;
  --primary: #1f9d5a;
  --primary-600: #178249;
  --accent: #0b6bcb;
  --ring: rgba(11,107,203,.25);
  --border: #d7e0ea;
  --shadow: 0 8px 24px rgba(0,0,0,.06);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
  }
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  display:flex;flex-direction:column;
}
img{max-width:100%;height:auto;border-radius:16px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:100%;max-width:1100px;margin:0 auto;padding:0 1rem}

/* Header / Nav */
.navbar{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(180%) blur(10px);
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  border-bottom:1px solid var(--border);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0;gap:.75rem}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700}
.logo{
  width:36px;height:36px;border-radius:10px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: var(--shadow);
}
.nav-links{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.nav-links a{
  padding:.55rem .8rem;border:1px solid var(--border);
  border-radius:999px;background:color-mix(in oklab, var(--panel) 85%, transparent);
  font-weight:600;
}
.nav-links a.active{border-color:color-mix(in oklab, var(--accent) 35%, var(--border));box-shadow:0 0 0 3px var(--ring)}
.nav-actions{display:flex;align-items:center;gap:.5rem}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:.55rem;border-radius:12px;border:1px solid var(--border);
  padding:.7rem 1rem;font-weight:700;background:var(--panel);box-shadow:var(--shadow);
}
.btn.primary{background:linear-gradient(135deg, var(--primary), var(--primary-600));color:white;border:none}
.btn.ghost{background:transparent}
.btn:focus-visible{outline:none;box-shadow:0 0 0 4px var(--ring)}

/* Hero */
.hero{padding:3.5rem 0 2rem}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:1.25rem;align-items:center}
.hero h1{font-size:clamp(2rem, 3.5vw, 3rem);line-height:1.1;margin:0 0 .6rem}
.hero p{color:var(--muted);margin:0 0 1rem}
.hero-card{
  background:linear-gradient(180deg, color-mix(in oklab, var(--panel) 90%, transparent), color-mix(in oklab, var(--bg-soft) 85%, transparent));
  border:1px solid var(--border);border-radius:20px;padding:1rem;box-shadow:var(--shadow);
}

/* Sections */
.section{padding:2rem 0}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.card{
  background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:1rem;box-shadow:var(--shadow);
}
.card h3{margin:.2rem 0 .5rem}
.badge{display:inline-flex;padding:.25rem .55rem;border-radius:999px;font-size:.8rem;border:1px solid var(--border);color:var(--muted)}

/* Footer */
footer{margin-top:auto;padding:2rem 0;border-top:1px solid var(--border);background:color-mix(in oklab, var(--bg-soft) 80%, transparent)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1rem}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;color:var(--muted);padding-top:1rem}

/* Forms */
input, select, textarea{
  width:100%;padding:.8rem;border-radius:12px;border:1px solid var(--border);
  background:var(--panel);color:var(--text);box-shadow:var(--shadow)
}
label{font-weight:700;display:block;margin:.6rem 0 .35rem}
textarea{min-height:140px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-actions{display:flex;gap:.6rem;align-items:center}

/* Tables */
.table{
  width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border-radius:16px;border:1px solid var(--border)
}
.table th,.table td{padding:.75rem 1rem;border-bottom:1px solid var(--border);text-align:left}
.table tr:last-child td{border-bottom:none}
.table th{color:var(--muted);font-weight:700;background:color-mix(in oklab, var(--panel) 90%, transparent)}

/* Responsive */
@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .form-row{grid-template-columns:1fr}
}
@media (max-width: 580px){
  .grid-3{grid-template-columns:1fr}
  .nav-links{display:none}
  .nav-links.open{display:flex}
}