@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --bg: #0a0e1a;
  --surface: #111827;
  --elevated: #1a2332;
  --border: #1e293b;
  --border-hover: rgba(239,68,68,0.4);
  --green: #22c55e;
  --green-glow: rgba(34,197,94,0.2);
  --red: #ef4444;
  --red-glow: rgba(239,68,68,0.2);
  --amber: #f59e0b;
  --text: #ffffff;
  --text2: #e2e8f0;
  --text3: #94a3b8;
  --font-mono: 'JetBrains Mono', 'Consolas', monospace;
  --font-sans: 'Inter', 'Segoe UI', -apple-system, sans-serif;
  --radius: 4px;
  --radius-lg: 6px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: var(--font-sans); background: var(--bg); color: var(--text);
  min-height:100vh; font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9999;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px);
  opacity:0.1;
}
a { color: var(--red); text-decoration:none; }
.container { max-width:1320px; margin:0 auto; padding:0 24px; }

.navbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; margin-bottom:24px;
  border-bottom:1px solid var(--border); flex-wrap:wrap; gap:10px;
}
.logo {
  font-size:24px; font-weight:700;
  color: var(--red); letter-spacing:-0.3px;
  display:flex; align-items:center; gap:8px;
}
.logo .dot {
  width:8px; height:8px; background:var(--green); border-radius:50%;
  animation:pulse 2s infinite; box-shadow:0 0 8px var(--green-glow);
}
.nav-links { display:flex; gap:2px; flex-wrap:wrap; align-items:center; }
.nav-links a {
  color: var(--text2); text-decoration:none; padding:7px 14px;
  border-radius:var(--radius); font-size:15px; font-weight:500; transition:all .15s;
}
.nav-links a:hover { color:var(--text); background:rgba(239,68,68,0.06); }
.nav-links a.active { color: var(--red); background:rgba(239,68,68,0.08); }

.lang-dropdown { position:relative; display:inline-block; margin-left:6px; }
.lang-dropdown select {
  appearance:none; -webkit-appearance:none;
  background:var(--surface); border:1px solid var(--border); color:var(--text);
  padding:6px 26px 6px 10px; border-radius:var(--radius); font-size:12px;
  font-weight:600; cursor:pointer; font-family:var(--font-mono);
}
.lang-dropdown::after {
  content:'\25BC'; position:absolute; right:7px; top:50%;
  transform:translateY(-50%); color:var(--text3); font-size:7px; pointer-events:none;
}

.admin-only { display:none; }
.admin-visible .admin-only { display:inline-flex; }

.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:10px; margin-bottom:20px; }
.stat-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:18px;
  transition:border-color .2s;
}
.stat-card:hover { border-color: var(--border-hover); }
.stat-card .label {
  font-family: var(--font-mono); font-size:11px; color:var(--text3);
  text-transform:uppercase; letter-spacing:1px; margin-bottom:8px;
}
.stat-card .value { font-family: var(--font-mono); font-size:28px; font-weight:700; }
.stat-card .value.g { color:var(--green); }
.stat-card .value.r { color:var(--red); }
.stat-card .value.y { color:var(--amber); }

.section {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:22px; margin-bottom:16px;
}
.section h2 {
  font-family: var(--font-mono); font-size:13px; font-weight:600;
  color: var(--text2); margin-bottom:14px; text-transform:uppercase;
  letter-spacing:0.5px; display:flex; align-items:center; gap:8px;
}
.section h2::before { content:''; display:inline-block; width:3px; height:15px; background:var(--red); border-radius:1px; }

.table { width:100%; font-size:14px; border-collapse:collapse; }
.table th {
  text-align:left; color:var(--text3); font-size:11px; text-transform:uppercase;
  letter-spacing:.8px; padding:9px 12px; font-weight:500; font-family:var(--font-mono);
  border-bottom:1px solid var(--border);
}
.table td { padding:11px 12px; border-bottom:1px solid rgba(30,41,59,0.5); font-size:14px; }

.badge { padding:3px 10px; border-radius:3px; font-size:11px; font-weight:600; display:inline-block; font-family:var(--font-mono); }
.badge-red { background:rgba(239,68,68,0.1); color:var(--red); border:1px solid rgba(239,68,68,0.2); }
.badge-green { background:rgba(34,197,94,0.1); color:var(--green); border:1px solid rgba(34,197,94,0.2); }
.badge-gold { background:rgba(245,158,11,0.1); color:var(--amber); border:1px solid rgba(245,158,11,0.2); }
.badge-ghost { background:transparent; color:var(--text3); border:1px solid var(--border); }

.btn { padding:10px 22px; border-radius:var(--radius); border:none; cursor:pointer; font-size:14px; font-weight:600; font-family:var(--font-sans); transition:all .15s; }
.btn-primary { background:var(--red); color:#fff; }
.btn-primary:hover { background:#dc2626; }
.btn-secondary { background:var(--surface); color:var(--text); border:1px solid var(--border); }
.btn-secondary:hover { border-color:var(--red); }
.btn-ghost { background:transparent; color:var(--text2); border:1px solid var(--border); }

.input, select, textarea {
  background:var(--bg); border:1px solid var(--border); color:var(--text);
  padding:11px 14px; border-radius:var(--radius); font-size:14px; font-family:var(--font-sans);
}
.input:focus, select:focus, textarea:focus { outline:none; border-color:var(--red); }
textarea { resize:vertical; min-height:100px; }
.form-group { margin-bottom:14px; }
.form-group label {
  display:block; font-size:12px; color:var(--text2); margin-bottom:4px;
  font-weight:500; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.5px;
}
.form-row { display:flex; gap:8px; flex-wrap:wrap; }

.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:768px){ .grid2{grid-template-columns:1fr;} }

@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

.feed-item { padding:12px 0; border-bottom:1px solid var(--border); font-size:14px; display:flex; align-items:flex-start; gap:10px; }
.feed-item:last-child { border-bottom:none; }

.step-box { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px; transition:border-color .2s; }
.step-box:hover { border-color:var(--border-hover); }
.step-box .step-num { font-family:var(--font-mono); font-size:26px; font-weight:700; color:var(--text3); }
.step-box .step-title { font-family:var(--font-mono); font-size:14px; font-weight:600; margin:6px 0 4px; color:var(--text); }
.step-box .step-desc { font-size:14px; color:var(--text2); line-height:1.7; }

.progress-bar { width:100%; height:3px; background:var(--bg); border-radius:2px; overflow:hidden; }
.progress-fill { height:100%; border-radius:2px; transition:width .3s; }
.progress-fill.r { background:var(--red); }

.toast { position:fixed; bottom:24px; right:24px; z-index:999; padding:10px 18px; border-radius:var(--radius); font-size:13px; display:none; font-family:var(--font-mono); }
.toast.ok { display:block; background:rgba(34,197,94,0.1); color:var(--green); border:1px solid rgba(34,197,94,0.25); }
.toast.err { display:block; background:rgba(239,68,68,0.1); color:var(--red); border:1px solid rgba(239,68,68,0.25); }

.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.75); z-index:100; align-items:center; justify-content:center; }
.modal-overlay.show { display:flex; }
.modal { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; width:90%; max-width:600px; max-height:85vh; overflow-y:auto; }
.modal h3 { font-family:var(--font-mono); font-size:15px; color:var(--text); margin-bottom:16px; }
.modal .actions { display:flex; gap:8px; margin-top:16px; }

.loader { width:16px; height:16px; border:2px solid var(--border); border-top-color:var(--red); border-radius:50%; animation:spin .6s linear infinite; display:inline-block; }
@keyframes spin { to{transform:rotate(360deg)} }

.empty-state { text-align:center; padding:40px 20px; color:var(--text3); font-size:13px; font-family:var(--font-mono); }

.atk-tag { display:inline-flex; align-items:center; gap:4px; padding:6px 14px; border-radius:3px; font-size:12px; font-weight:600; border:1px solid; cursor:pointer; transition:all .15s; font-family:var(--font-mono); }
.atk-tag.on { background:rgba(239,68,68,0.1); color:var(--red); border-color:rgba(239,68,68,0.3); }
.atk-tag.off { background:transparent; color:var(--text3); border-color:var(--border); }
.atk-tag:hover { border-color:var(--red); }

.helper-text { font-size:14px; color:var(--text2); line-height:1.7; }
.footer { text-align:center; padding:24px 0; color:var(--text3); font-size:12px; border-top:1px solid var(--border); margin-top:24px; font-family:var(--font-mono); }

/* Hidden nav items */
.hidden-nav { display:none !important; }
.visible-nav { display:inline-flex !important; }

/* Slider captcha */
.captcha-container { display:flex; align-items:center; gap:10px; flex:1; }
.captcha-track { position:relative; width:180px; height:36px; background:var(--bg); border:1px solid var(--border); border-radius:4px; overflow:hidden; flex-shrink:0; }
.captcha-fill { position:absolute; left:0; top:0; height:100%; width:0; background:rgba(34,197,94,0.2); transition:width .1s; }
.captcha-thumb { position:absolute; left:0; top:2px; width:32px; height:32px; background:var(--green); border-radius:3px; display:flex; align-items:center; justify-content:center; color:#000; font-weight:700; font-size:14px; cursor:grab; user-select:none; z-index:2; }
.captcha-label { font-size:11px; color:var(--text3); white-space:nowrap; }