/* core styles */
:root {
  --bg-overlay: rgba(0, 0, 0, 0.45);
  --panel: rgba(20, 22, 26, 0.7);
  --card: rgba(32, 36, 42, 0.7);
  --text: #e6edf3;
  --muted: #9aa4ad;
  --accent: #00ff9c;
  --accent-2: #66e3ff;
  --border: #2a2f36;
  --shadow: 0 10px 30px rgba(0,0,0,0.25);
}
* { box-sizing: border-box; } html, body { height: 100%; }
body { margin: 0; color: var(--text); font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu; background: #0a0f13; overflow-x: hidden; }
#matrix-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; background: #000; }
.matrix-overlay { position: relative; z-index: 1; min-height: 100vh; background: linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.55)); }
.site-header { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; backdrop-filter: blur(6px); background: var(--bg-overlay); border-bottom: 1px solid var(--border); position: sticky; top:0; z-index: 2000;  }
.brand .brand-link { text-decoration:none; color: var(--text); } .brand-title { font-weight:800; } .brand-sub { display:block; font-size:12px; color: var(--muted); }
.top-nav ul { list-style:none; margin:0; padding:0; display:flex; gap:18px; align-items:center; }
.top-nav a { color: var(--text); text-decoration: none; opacity: .9; } .top-nav a:hover { color: var(--accent); }
.container { display:grid; grid-template-columns: 320px 1fr; gap:20px; padding:20px; }
.sidebar { background: var(--panel); border:1px solid var(--border); border-radius:16px; padding:16px; box-shadow: var(--shadow); align-self:start; position: sticky; top:80px;   }
.content { display:block; background:transparent; padding:0; }
.panel, .card { background: var(--card); border:1px solid var(--border); border-radius:16px; padding:16px; margin-bottom:20px; box-shadow: var(--shadow); }
.hero { padding:20px; border:1px solid var(--border); border-radius:16px; background: rgba(6, 20, 12, 0.88); box-shadow: var(--shadow); margin-bottom:20px; }
.grid.two-col { display:grid; grid-template-columns: 1fr 1fr; gap:20px; }
.responsive { width:100%; height:auto; border-radius:12px; }
.badge { display:inline-block; margin-left:8px; padding:2px 8px; border-radius:12px; font-size:12px; background: rgba(0, 255, 156, .15); border: 1px solid rgba(0,255,156,.4); color: var(--accent); }
.tools-list { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:16px; }
.list { padding-left: 18px; } .list li { margin: 8px 0; }
.muted { color: var(--muted); font-size: 13px; } .small { font-size: 14px; }
.btn { display:inline-block; padding:10px 14px; border-radius:12px; border:1px solid var(--border); background: rgba(255,255,255,.02); color: var(--text); text-decoration:none; }
.btn:hover { border-color: var(--accent); color: var(--accent); }
.form { display:grid; gap:12px; max-width:420px; }
.form label { display:grid; gap:6px; } .form input { padding:10px 12px; border-radius:10px; border:1px solid var(--border); background: rgba(0,0,0,.25); color: var(--text); }
.form textarea { width:100%; }
.alert.error { background: rgba(255, 70, 70, .15); border: 1px solid rgba(255,70,70,.4); color: #ff8b8b; padding: 10px 12px; border-radius: 12px; margin-bottom: 12px; }
.ad-rotator { display:grid; gap:8px; align-items:center; justify-items:center; }
.ad-rotator img { width:100%; max-width:260px; height:auto; border-radius:12px; border:1px solid var(--border); }
.video-embed { position:relative; width:100%; padding-bottom:56.25%; border-radius:12px; overflow:hidden; border:1px solid var(--border); }
.video-embed iframe { position:absolute; inset:0; width:100%; height:100%; }
.site-footer { text-align:center; padding:30px 10px 50px; color: var(--muted); }
@media (max-width: 1000px) { .container { grid-template-columns:1fr; } .sidebar { position: static;  } .grid.two-col { grid-template-columns:1fr; } }
.admin-links .btn.active{border-color:var(--accent);color:var(--accent);}

/* Mutated Mods badge color */
.badge.paid{color:#ffd166;border-color:rgba(255,209,102,.4);background:rgba(255,209,102,.15);}
/* Ad rotator dots */
.ad-dots{display:flex;gap:6px;justify-content:center;align-items:center}
.ad-dots .dot{width:8px;height:8px;border-radius:50%;border:1px solid var(--border);background:rgba(255,255,255,.08);cursor:pointer}
.ad-dots .dot.active{background:var(--accent);border-color:rgba(0,255,156,.5)}

.video-embed iframe{width:100%;min-height:320px;border-radius:12px}


/* Sidebar: no inner scrollbars; grows with page */
.sidebar { overflow: visible !important; max-height: none !important; }

/* Prevent embeds from overlaying the top nav */
.video-embed, .video-embed iframe { z-index: 0; }