:root { --accent: #00d2ff; --danger: #ff4d4d; --bg: #010a14; }

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', sans-serif; background: var(--bg); color: white; height: 100vh; overflow: hidden; }

.wallpaper { position: fixed; inset: 0; z-index: -1; background: linear-gradient(rgba(1,10,20,0.8), rgba(1,10,20,0.8)), url('https://i.imgur.com/wasey9r.png') no-repeat center / 30%; }

/* SIDEBAR */
.sidebar { width: 300px; background: rgba(0,0,0,0.95); border-right: 2px solid var(--accent); display: flex; flex-direction: column; height: 100%; }
.sidebar-logo { width: 100px; margin: 20px; }

/* AUTH */
#login-overlay { position: fixed; inset: 0; background: #000; display: flex; justify-content: center; align-items: center; z-index: 9999; }
.auth-box { background: rgba(2, 15, 28, 0.95); padding: 40px; border: 2px solid var(--accent); border-radius: 15px; text-align: center; width: 350px; }

/* NAV & CONTENT */
#mdt-app { display: flex; width: 100%; height: 100%; }
.content { flex: 1; padding: 30px; overflow-y: auto; }
.nav-item { padding: 15px 25px; cursor: pointer; color: #888; font-weight: bold; border-left: 5px solid transparent; }
.nav-item.active { color: var(--accent); background: rgba(0,210,255,0.1); border-left: 5px solid var(--accent); }

/* DESIGN ELEMENTS */
.btn-glow { width: 100%; padding: 10px; background: var(--accent); border: none; cursor: pointer; font-weight: bold; margin-top: 10px; }
.card { background: rgba(2, 15, 28, 0.9); border: 1px solid rgba(0,210,255,0.2); padding: 15px; border-radius: 8px; margin-bottom: 10px; }
.iframe-container { width: 100%; height: 70vh; background: #fff; border-radius: 5px; overflow: hidden; }
.iframe-container iframe { width: 100%; height: 100%; border: none; }

/* BADGE */
.user-badge { margin-top: auto; padding: 20px; border-top: 1px solid var(--accent); display: flex; align-items: center; gap: 10px; }
.badge-grade { font-size: 10px; color: var(--accent); text-transform: uppercase; }
.badge-name { display: block; font-weight: bold; }
