:root{
  --bg-deep:#151a13;
  --bg-panel:#1e2419;
  --bg-panel-2:#242b1e;
  --stone:#3a3a34;
  --grass:#5fa72e;
  --grass-light:#7cc93f;
  --dirt:#8b5a2b;
  --dirt-dark:#5e3c1b;
  --diamond:#4dd7e0;
  --gold:#f0b23c;
  --redstone:#e2472b;
  --text:#eef0e6;
  --text-dim:#a9b09c;
  --border:#40492f;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--bg-deep); color:var(--text);
  font-family:'Inter',sans-serif;
  background-image:
    radial-gradient(circle at 15% 10%, rgba(95,167,46,0.08), transparent 40%),
    radial-gradient(circle at 85% 30%, rgba(77,215,224,0.06), transparent 40%);
  min-height:100vh;
}
.pixel{ font-family:'Press Start 2P', monospace; }
.mono{ font-family:'VT323', monospace; }
a{ color:inherit; text-decoration:none; }

header{ position:sticky; top:0; z-index:50; background:rgba(21,26,19,0.94); backdrop-filter:blur(6px); border-bottom:3px solid var(--stone); }
.nav-wrap{ max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:16px 24px; flex-wrap:wrap; gap:12px; }
.logo{ display:flex; align-items:center; gap:12px; }
.logo-block{ width:30px; height:30px; background:linear-gradient(160deg, var(--grass-light) 0%, var(--grass) 55%, var(--dirt) 55%, var(--dirt-dark) 100%); border:2px solid #0f130d; }
.logo-text{ font-size:14px; letter-spacing:1px; }
.logo-text span{ color:var(--grass-light); }
nav ul{ display:flex; gap:26px; list-style:none; flex-wrap:wrap; }
nav a{ font-size:14px; color:var(--text-dim); font-weight:600; }
nav a:hover{ color:var(--grass-light); }
.nav-right{ display:flex; align-items:center; gap:14px; }

.btn{ display:inline-block; font-weight:800; font-size:14px; padding:14px 22px; border:2px solid #0f130d; cursor:pointer; }
.btn-sm{ padding:9px 16px; font-size:13px; }
.btn-primary{ background:var(--grass); color:#0f130d; }
.btn-primary:hover{ background:var(--grass-light); }
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--stone); }
.btn-ghost:hover{ border-color:var(--grass-light); color:var(--grass-light); }
.btn-danger{ background:var(--redstone); color:#fff; }
.btn-block{ width:100%; text-align:center; }

.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:11px; color:var(--gold); letter-spacing:2px; background:rgba(240,178,60,0.1); border:1px solid rgba(240,178,60,0.35); padding:8px 12px; margin-bottom:18px; }
.eyebrow::before{ content:"◆"; color:var(--gold); }

section, main.page{ max-width:1180px; margin:0 auto; padding:60px 24px; }
.section-head{ text-align:center; margin-bottom:44px; }
.section-head h1, .section-head h2{ font-size:22px; line-height:1.6; margin-bottom:14px; text-shadow:2px 2px 0 rgba(0,0,0,0.5); }
.section-head p{ color:var(--text-dim); max-width:520px; margin:0 auto; font-size:15px; line-height:1.7; }

.card{ background:var(--bg-panel); border:2px solid var(--border); padding:26px; }

.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.plan{ background:var(--bg-panel); border:2px solid var(--border); padding:30px 26px; position:relative; display:flex; flex-direction:column; }
.plan.popular{ border-color:var(--gold); background:var(--bg-panel-2); }
.plan-badge{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--gold); color:#1b1b1b; font-size:11px; font-weight:800; padding:5px 14px; border:2px solid #0f130d; white-space:nowrap; }
.plan-name{ font-size:13px; letter-spacing:1px; color:var(--grass-light); margin-bottom:8px; font-weight:800; }
.plan-price{ font-family:'VT323',monospace; font-size:40px; line-height:1; }
.plan-price span{ font-size:14px; color:var(--text-dim); font-family:'Inter',sans-serif; }
.plan-specs{ list-style:none; margin:20px 0; flex:1; }
.plan-specs li{ font-size:13.5px; padding:9px 0; border-bottom:1px dashed var(--border); color:var(--text-dim); }
.plan-specs li::before{ content:"▸ "; color:var(--grass-light); }

/* forms */
.auth-wrap{ max-width:420px; margin:60px auto; padding:0 24px; }
.form-card{ background:var(--bg-panel); border:2px solid var(--border); padding:34px 30px; }
.form-card h1{ font-size:17px; margin-bottom:8px; }
.form-card .sub{ color:var(--text-dim); font-size:13.5px; margin-bottom:26px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:12.5px; color:var(--text-dim); margin-bottom:6px; }
.field input{
  width:100%; padding:12px 14px; background:var(--bg-deep); border:2px solid var(--border);
  color:var(--text); font-family:'Inter',sans-serif; font-size:14px;
}
.field input:focus{ outline:none; border-color:var(--grass); }
.form-error{ background:rgba(226,71,43,0.15); border:1px solid var(--redstone); color:#ffb3a3; padding:10px 14px; font-size:13px; margin-bottom:18px; }
.form-success{ background:rgba(95,167,46,0.15); border:1px solid var(--grass); color:var(--grass-light); padding:10px 14px; font-size:13px; margin-bottom:18px; }
.divider{ display:flex; align-items:center; gap:12px; margin:22px 0; color:var(--text-dim); font-size:12px; }
.divider::before, .divider::after{ content:""; flex:1; height:1px; background:var(--border); }
.btn-google{ display:flex; align-items:center; justify-content:center; gap:10px; background:#fff; color:#222; font-weight:700; }
.form-footer{ text-align:center; margin-top:20px; font-size:13px; color:var(--text-dim); }
.form-footer a{ color:var(--grass-light); font-weight:700; }

/* dashboard / server list */
.server-list{ display:flex; flex-direction:column; gap:14px; }
.server-row{ display:flex; align-items:center; justify-content:space-between; background:var(--bg-panel); border:2px solid var(--border); padding:18px 22px; }
.server-row .name{ font-weight:700; font-size:15px; margin-bottom:4px; }
.server-row .meta{ font-size:12.5px; color:var(--text-dim); }
.status-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:6px; }
.status-running{ background:var(--grass-light); }
.status-offline{ background:var(--redstone); }

/* server detail: console + file manager */
.server-tabs{ display:flex; gap:8px; border-bottom:2px solid var(--border); margin-bottom:22px; }
.server-tab{ padding:12px 18px; font-size:13.5px; font-weight:700; color:var(--text-dim); border-bottom:3px solid transparent; cursor:pointer; }
.server-tab.active{ color:var(--grass-light); border-color:var(--grass-light); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

.console-box{ background:#0c0f0a; border:2px solid var(--border); height:420px; overflow-y:auto; padding:14px; font-family:'VT323',monospace; font-size:16px; color:#c9d6bd; }
.console-input-row{ display:flex; gap:10px; margin-top:12px; }
.console-input-row input{ flex:1; padding:12px 14px; background:var(--bg-panel); border:2px solid var(--border); color:var(--text); }
.power-buttons{ display:flex; gap:10px; margin-bottom:16px; }

.file-table{ width:100%; border-collapse:collapse; }
.file-table th{ text-align:left; font-size:12px; color:var(--text-dim); padding:10px 12px; border-bottom:2px solid var(--border); }
.file-table td{ padding:10px 12px; border-bottom:1px solid var(--border); font-size:13.5px; }
.file-table tr:hover{ background:var(--bg-panel-2); }
.file-name{ cursor:pointer; }
.file-name:hover{ color:var(--grass-light); }
.file-path-bar{ font-family:'VT323',monospace; font-size:16px; color:var(--text-dim); margin-bottom:12px; }

.editor-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.7); display:none; align-items:center; justify-content:center; z-index:100; }
.editor-box{ background:var(--bg-panel); border:2px solid var(--border); width:min(800px,90vw); }
.editor-box textarea{ width:100%; height:400px; background:#0c0f0a; color:#c9d6bd; border:none; padding:16px; font-family:'VT323',monospace; font-size:16px; resize:vertical; }
.editor-actions{ display:flex; justify-content:flex-end; gap:10px; padding:14px; border-top:2px solid var(--border); }

.alert-banner{ background:rgba(240,178,60,0.1); border:1px solid var(--gold); color:var(--gold); padding:14px 18px; margin-bottom:24px; font-size:13.5px; }

footer{ border-top:3px solid var(--stone); padding:30px 24px; text-align:center; color:var(--text-dim); font-size:12.5px; margin-top:40px; }

@media (max-width:900px){
  .pricing-grid{ grid-template-columns:1fr; }
  nav ul{ display:none; }
  .server-row{ flex-direction:column; align-items:flex-start; gap:10px; }
}