@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&family=Orbitron:wght@700&display=swap');
:root { --p: #5e72e4; --bg: #0f0c29; --card: rgba(255,255,255,0.05); }
* { box-sizing: border-box; }
body { margin:0; font-family:'Noto Sans SC'; background:var(--bg); color:#fff; overflow:hidden; }
body::before { content:''; position:absolute; width:100%; height:100%; background:linear-gradient(135deg, #0f0c29, #302b63, #24243e); z-index:-1; }

.screen { width:100vw; height:100vh; display:flex; }
.sidebar { width:260px; background:rgba(0,0,0,0.3); padding:20px; display:flex; flex-direction:column; border-right:1px solid rgba(255,255,255,0.1); }
.content { flex:1; padding:40px; overflow-y:auto; }

.avatar { width:80px; height:80px; border-radius:50%; margin:0 auto 20px; border:2px solid #fff; background-size:cover; }
.menu-item { padding:15px; margin:5px 0; border-radius:10px; cursor:pointer; transition:0.3s; display:flex; gap:10px; font-weight:bold; }
.menu-item:hover, .menu-item.active { background:var(--p); box-shadow:0 5px 15px rgba(94,114,228,0.4); }

.card { background:var(--card); backdrop-filter:blur(20px); border-radius:20px; padding:25px; margin-bottom:20px; border:1px solid rgba(255,255,255,0.1); }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:15px; }
.g-item { background:rgba(255,255,255,0.05); padding:15px; border-radius:15px; text-align:center; transition:0.3s; border:1px solid rgba(255,255,255,0.1); }
.g-item:hover { transform:translateY(-5px); border-color:var(--p); }
.g-img { width:48px; height:48px; image-rendering:pixelated; margin-bottom:10px; }

button { background:var(--p); color:#fff; border:none; padding:8px 15px; border-radius:8px; cursor:pointer; font-weight:bold; width:100%; margin-top:10px; }
input, select { width:100%; padding:10px; background:rgba(0,0,0,0.3); border:1px solid rgba(255,255,255,0.2); color:#fff; border-radius:8px; margin:5px 0; }

.cat-bar { display:flex; gap:10px; overflow-x:auto; margin-bottom:20px; padding-bottom:5px; }
.cat-btn { padding:5px 15px; background:rgba(255,255,255,0.1); border-radius:20px; cursor:pointer; white-space:nowrap; }
.cat-btn.active { background:var(--p); }

.modal { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); display:none; justify-content:center; align-items:center; z-index:99; }
.m-box { background:#1a1a2e; padding:30px; border-radius:20px; width:400px; text-align:center; border:1px solid var(--p); }

.login-box { width:400px; margin:auto; text-align:center; padding:40px; border-radius:20px; background:var(--card); backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,0.1); }