:root{ --bg:#111; --surface:#1a1a1a; --surface2:#222; --border:#2e2e2e; --orange:#ff6a00; --orange2:#ff9900; --orange-dim:#7a3200; --orange-glow:rgba(255,106,0,0.15); --text:#f5e6d0; --text-dim:#8a7a6a; --text-muted:#3a3028; --diamond:#4dd9e8; --dg:rgba(77,217,232,0.2); --danger:#e74c3c; --success:#2ecc71; --r:8px; }
* { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--bg); color:var(--text); font-family:'Nunito',sans-serif; min-height:100vh; overflow-x:hidden; }

body::before { content:''; position:fixed; inset:0; background-image:linear-gradient(rgba(255,106,0,0.04) 1px,transparent 1px), linear-gradient(90deg,rgba(255,106,0,0.04) 1px,transparent 1px); background-size:32px 32px; pointer-events:none; z-index:0; animation: gridDriftX 60s ease-in-out infinite alternate, gridDriftY 43s ease-in-out infinite alternate; }
@keyframes gridDriftX { 0% { background-position-x: 0px; } 100% { background-position-x: 1024px; } }
@keyframes gridDriftY { 0% { background-position-y: 0px; } 100% { background-position-y: 1024px; } }

.topbar { position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:11px 20px; background:rgba(17,17,17,0.96); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); }
.mc-title { font-family:'Press Start 2P',monospace; font-size:0.6rem; color:var(--orange); text-shadow:0 0 10px var(--orange); }
.mc-sub { font-size:0.73rem; color:var(--text-dim); margin-top:2px; font-weight:700; }
.topbar-right { display:flex; align-items:center; gap:12px; }

.user-pill { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:6px 12px; font-size:0.8rem; font-weight:700; color:var(--text-dim); display:flex; align-items:center; gap:6px; text-decoration:none; transition:0.15s;}
.user-pill:hover { border-color:var(--orange); }
.topbar-link { background:transparent; border:1px solid var(--border); border-radius:var(--r); padding:7px 12px; color:var(--text-dim); font-size:0.78rem; font-weight:700; cursor:pointer; transition:all 0.15s; text-decoration:none; font-family:'Nunito',sans-serif; white-space:nowrap; }
.topbar-link:hover { border-color:var(--orange); color:var(--orange); }
.topbar-link.danger:hover { border-color:var(--danger); color:var(--danger); }

.bell-btn { position:relative; cursor:pointer; font-size:1.3rem; text-decoration:none; }
.bell-badge { position:absolute; top:-5px; right:-8px; background:var(--danger); color:#fff; font-size:0.5rem; font-family:'Press Start 2P',monospace; padding:3px 5px; border-radius:10px; display:none; }

.main-container { position:relative; z-index:1; max-width:900px; margin:40px auto; padding:20px; text-align:center; }
.page-title { font-family:'Press Start 2P', monospace; font-size:1.3rem; color:var(--text); margin-bottom:10px; }
.subtitle { font-size:0.95rem; color:var(--text-dim); margin-bottom:40px; font-weight:700; }

.apps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; text-align: left; }
.app-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 25px; text-decoration: none; color: var(--text); transition: all 0.2s; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.app-card:hover { transform: translateY(-5px); border-color: var(--orange); box-shadow: 0 10px 30px rgba(0,0,0,0.6), 0 0 20px var(--orange-glow); }

.app-card.diamond:hover { border-color: var(--diamond); box-shadow: 0 10px 30px rgba(0,0,0,0.6), 0 0 20px var(--dg); }
.app-card.diamond .app-title { color: var(--diamond); }

.app-card.admin { border-color: var(--danger); background:rgba(231,76,60,0.05); }
.app-card.admin:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.6), 0 0 20px rgba(231,76,60,0.3); }
.app-card.admin .app-title { color: var(--danger); }

.app-icon { font-size: 2.8rem; }
.app-title { font-family: 'Press Start 2P', monospace; font-size: 0.75rem; color: var(--orange); line-height: 1.4; }
.app-desc { font-size: 0.9rem; color: var(--text-dim); line-height: 1.5; flex: 1; }

.setup-gate { position:fixed; inset:0; background:rgba(0,0,0,0.9); z-index:900; display:none; align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(8px); }
.auth-box { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:40px 32px; width:100%; max-width:380px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,0.8),0 0 40px var(--orange-glow); }
.auth-input { width:100%; background:var(--bg); border:1px solid var(--border); border-radius:var(--r); padding:12px 14px; color:var(--text); font-family:'Nunito',sans-serif; font-size:1rem; outline:none; transition:border-color 0.15s; margin-bottom:10px; text-align:center; }
.auth-input:focus { border-color:var(--orange); }
.auth-btn { width:100%; padding:13px; background:linear-gradient(135deg,var(--orange),var(--orange2)); border:none; border-radius:var(--r); font-family:'Press Start 2P',monospace; font-size:0.56rem; color:#000; cursor:pointer; }

@media (max-width: 768px) {
.topbar { flex-direction: column; gap: 12px; padding: 15px; text-align: center; }
.topbar-right { width: 100%; justify-content: center; flex-wrap: wrap; }
.apps-grid { grid-template-columns: 1fr; }
.main-container { padding: 15px; margin: 20px auto; }
}
::-webkit-scrollbar{height:4px; width:5px;}::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}