*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--accent:#7f77dd;--accent-light:#eeedfe;--accent-dark:#3c3489;--green:#1d9e75;--font:"Inter", system-ui, -apple-system, sans-serif;--sidebar-width:220px;--radius:10px;--radius-sm:6px;--transition:.15s ease}html{font-size:16px}body{font-family:var(--font);color:#e8e6f0;-webkit-font-smoothing:antialiased;background:#0f0f13;line-height:1.6}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#fff3}h1,h2,h3{color:#f0eefa;font-weight:500;line-height:1.3}p{color:#a09db8}input,select,textarea{border-radius:var(--radius-sm);color:#e8e6f0;width:100%;font-size:14px;font-family:var(--font);transition:border-color var(--transition);background:#ffffff0d;border:.5px solid #ffffff1a;outline:none;padding:8px 12px}input::placeholder{color:#ffffff40}input:focus,select:focus{border-color:var(--accent);background:#7f77dd14}select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a09db8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-position:right 10px center;background-repeat:no-repeat;padding-right:32px}select option{color:#e8e6f0;background:#1a1a24}button{border-radius:var(--radius-sm);color:#e8e6f0;font-size:13px;font-family:var(--font);cursor:pointer;transition:background var(--transition), border-color var(--transition), transform var(--transition);background:#ffffff0f;border:.5px solid #ffffff1f;padding:8px 16px}button:hover{background:#ffffff1a;border-color:#fff3}button:active{transform:scale(.98)}button:disabled{opacity:.4;cursor:not-allowed;transform:none}button.primary{background:var(--accent);border-color:var(--accent-dark);color:#fff;font-weight:500}button.primary:hover{background:#6e66cc}.card{border-radius:var(--radius);transition:border-color var(--transition);background:#ffffff0a;border:.5px solid #ffffff14;padding:1rem 1.25rem}.card:hover{border-color:#ffffff26}.stat-card{border-radius:var(--radius);background:#7f77dd14;border:.5px solid #7f77dd33;padding:1rem 1.25rem}.stat-card .label{color:#7875a0;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;font-size:12px}.stat-card .value{color:#f0eefa;font-size:26px;font-weight:600;line-height:1}.sidebar{background:#13131a;border-right:.5px solid #ffffff0f}.sidebar-link{border-radius:var(--radius-sm);color:#7875a0;transition:all var(--transition);align-items:center;gap:10px;margin-bottom:2px;padding:9px 12px;font-size:14px;text-decoration:none;display:flex}.sidebar-link:hover{color:#e8e6f0;background:#ffffff0d}.sidebar-link.active{color:#f0eefa;background:#7f77dd26;border:.5px solid #7f77dd40}.game-card{border-radius:var(--radius);cursor:pointer;transition:transform var(--transition), border-color var(--transition), box-shadow var(--transition);background:#ffffff0a;border:.5px solid #ffffff14;overflow:hidden}.game-card:hover{border-color:#7f77dd66;transform:translateY(-3px);box-shadow:0 8px 24px #0006}.game-card img{aspect-ratio:460/215;object-fit:cover;width:100%;display:block}.game-card .info{padding:8px 10px}.game-card .name{color:#e8e6f0;white-space:nowrap;text-overflow:ellipsis;margin-bottom:2px;font-size:12px;font-weight:500;overflow:hidden}.game-card .playtime{color:#7875a0;font-size:11px}.progress-bar{background:#ffffff14;border-radius:3px;height:6px;overflow:hidden}.progress-bar-fill{border-radius:3px;height:100%;transition:width .6s}.achievement-row{border-radius:var(--radius-sm);transition:border-color var(--transition);background:#ffffff08;border:.5px solid #ffffff12;align-items:center;gap:12px;padding:10px 12px;display:flex}.achievement-row.unlocked{background:#7f77dd0d;border-color:#7f77dd33}.achievement-row .icon{border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:16px;display:flex}.achievement-row.unlocked .icon{color:var(--accent);background:#7f77dd33}.achievement-row:not(.unlocked) .icon{color:#555;background:#ffffff0d}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:.4}50%{opacity:.7}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.fade-in{animation:.3s forwards fadeIn}.skeleton{border-radius:var(--radius);background:linear-gradient(90deg,#ffffff0a 25%,#ffffff14 50%,#ffffff0a 75%) 0 0/200% 100%;animation:1.5s infinite shimmer}a.active{color:#f0eefa!important;background:#7f77dd26!important;border:.5px solid #7f77dd40!important}img{max-width:100%}a{color:var(--accent);text-decoration:none}hr{border:none;border-top:.5px solid #ffffff14}