:root{--primary:#8758FF;--primary-alt:#5B42F3;--secondary:#00F5FF;--secondary-alt:#00CCDF;--dark:#111827;--darker:#0B0F19;--light:#E1E1FF;--success:#00E0A0;--danger:#FF445A;--warning:#FFB830;--panel-bg:rgba(17,24,39,0.85);--panel-border:rgba(91,66,243,0.3);--glass-effect:rgba(255,255,255,0.05)}.modern-dashboard-container{width:100%;height:100vh;position:relative;overflow:hidden;color:var(--light);font-family:Inter,sans-serif}.dashboard-content{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;display:flex;flex-direction:column}.top-nav{justify-content:space-between;padding:1.5rem 2rem;width:100%;position:relative;z-index:20}.profile-section,.top-nav{display:flex;align-items:center}.profile-section{gap:1rem}.profile-avatar{width:50px;height:50px;border-radius:10px;background:linear-gradient(135deg,var(--primary),var(--primary-alt));display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:white;position:relative;box-shadow:0 0 20px rgba(135,88,255,.5);border:2px solid rgba(255,255,255,.1);transition:all .3s ease}.profile-avatar:hover{transform:translateY(-5px);box-shadow:0 10px 25px rgba(135,88,255,.6)}.level-indicator{position:absolute;top:-8px;right:-8px;background:var(--secondary);color:var(--darker);font-size:.7rem;font-weight:700;height:22px;width:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 10px rgba(0,245,255,.7)}.xp-progress{flex:1;margin-left:1rem;max-width:250px}.xp-bar{height:6px;background:rgba(255,255,255,.1);overflow:hidden}.xp-bar,.xp-fill{border-radius:4px;position:relative}.xp-fill{height:100%;background:linear-gradient(90deg,var(--secondary),var(--primary))}.xp-glow{position:absolute;top:0;right:0;width:20px;height:100%;background:linear-gradient(90deg,rgba(0,245,255,0),rgba(0,245,255,.7));filter:blur(4px)}.xp-text{display:flex;justify-content:space-between;font-size:.75rem;margin-top:.5rem;color:var(--light);opacity:.8}.actions-container{display:flex;gap:1rem}.action-button,.settings-button{width:46px;height:46px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;background:rgba(255,255,255,.05);border:1px solid var(--panel-border);color:var(--light);cursor:pointer;transition:all .3s ease;box-shadow:0 4px 6px rgba(0,0,0,.1)}.action-button:hover,.settings-button:hover{background:rgba(255,255,255,.1);transform:translateY(-3px);box-shadow:0 10px 20px rgba(0,0,0,.2);border-color:var(--primary)}.game-area{flex:1;position:relative;overflow:hidden}.character-container,.game-area{display:flex;align-items:center;justify-content:center}.character-container{position:absolute;width:100%;height:100%}.character-placeholder{display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:2rem;color:var(--light);opacity:.7}.character-icon{font-size:5rem;margin-bottom:1rem;background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.left-sidebar,.right-sidebar{position:absolute;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:1rem;padding:2rem;z-index:20}.left-sidebar{left:2rem}.right-sidebar{right:2rem}.sidebar-button{width:60px;height:60px;border-radius:12px;background:var(--panel-bg);border:1px solid var(--panel-border);display:flex;align-items:center;justify-content:center;color:var(--light);font-size:1.5rem;cursor:pointer;transition:all .3s ease;backdrop-filter:blur(10px);box-shadow:0 10px 20px rgba(0,0,0,.2)}.sidebar-button:hover{transform:translateX(0) translateY(-5px);border-color:var(--primary);color:var(--secondary);box-shadow:0 15px 30px rgba(0,0,0,.3)}.left-sidebar .sidebar-button:hover{transform:translateX(5px)}.right-sidebar .sidebar-button:hover{transform:translateX(-5px)}.sidebar-button.active{background:linear-gradient(135deg,rgba(91,66,243,.2),rgba(0,245,255,.1));border-color:var(--primary);color:var(--secondary);box-shadow:0 0 20px rgba(91,66,243,.3)}.bottom-task-bar{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);background:var(--panel-bg);backdrop-filter:blur(10px);border-radius:16px;padding:1rem 2rem;display:flex;gap:1.5rem;z-index:20;border:1px solid var(--panel-border);box-shadow:0 10px 30px rgba(0,0,0,.3)}.task-button{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.25rem;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid transparent;color:var(--light);font-size:.9rem;font-weight:500;cursor:pointer;transition:all .3s ease}.task-button:hover{background:rgba(255,255,255,.1);border-color:var(--primary);transform:translateY(-3px)}.task-button .icon{font-size:1.2rem;color:var(--secondary)}.stats-modal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--panel-bg);border-radius:16px;border:1px solid var(--panel-border);backdrop-filter:blur(20px);padding:2rem;width:80%;max-width:800px;max-height:80vh;overflow-y:auto;z-index:100;display:none;box-shadow:0 20px 40px rgba(0,0,0,.4)}.stats-modal.visible{display:block}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--panel-border)}.modal-title{font-size:1.5rem;font-weight:600;background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.close-button{background:none;border:none;color:var(--light);font-size:1.5rem;cursor:pointer;opacity:.7;transition:all .2s ease}.close-button:hover{opacity:1;color:var(--danger)}.particles{position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none}@media (max-width:1200px){.left-sidebar,.right-sidebar{padding:1rem}.sidebar-button{width:50px;height:50px;font-size:1.2rem}}@media (max-width:768px){.top-nav{padding:1rem}.xp-progress{max-width:150px}.left-sidebar,.right-sidebar{padding:.5rem}.sidebar-button{width:45px;height:45px;border-radius:10px;font-size:1rem}.bottom-task-bar{width:90%;flex-wrap:wrap;justify-content:center}}@keyframes floatAnimation{0%{transform:translateY(0)}50%{transform:translateY(-15px)}to{transform:translateY(0)}}@keyframes glowPulse{0%{filter:drop-shadow(0 0 5px var(--primary-alt))}50%{filter:drop-shadow(0 0 15px var(--primary))}to{filter:drop-shadow(0 0 5px var(--primary-alt))}}.float{animation:floatAnimation 4s ease-in-out infinite}.pulse{animation:glowPulse 2s ease-in-out infinite}