body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.App{display:flex;flex-direction:column;min-height:100vh;background-color:#1d2633;color:#f4f4f9;font-family:Arial,sans-serif}.App-page{display:flex;flex-direction:column;min-height:100vh;width:100%;max-width:1400px;margin:0 auto}.App-header{display:flex;align-items:center;padding:15px 5%;border-bottom:1px solid #31926a;width:100%;box-sizing:border-box}.logo{height:60px;width:auto;transition:transform .3s ease}.logo:hover{transform:scale(1.05)}.header-right-content{display:flex;align-items:center;margin-left:auto}#App-header-menu{display:flex;gap:15px}.App-header-menu-item{background:none;border:none;color:#ebecf4;cursor:pointer;font-size:1rem;padding:8px 15px;border-radius:4px;transition:all .3s ease}.App-header-menu-item:hover{background-color:#282c34;color:#08f1c3;transform:translateY(-2px)}.notification-bell{background:none;border:none;color:#ebecf4;font-size:1.2rem;cursor:pointer;padding:8px;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;margin-left:20px;transition:all .3s ease}.notification-bell:hover{background-color:#282c34;color:#08f1c3;transform:rotate(15deg) scale(1.1)}.login-button{background:none;border:none;color:#ebecf4;font-size:.9rem;cursor:pointer;padding:8px;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;margin-left:20px;transition:all .3s ease}.login-button:hover{background-color:#282c34;color:#08f1c3;scale:1.1;transform:translateY(-2px)}.user-info{display:flex;align-items:center;justify-content:center;gap:30px;margin:30px 0;padding:20px;background-color:#282c34;border-radius:8px;transition:all .3s ease}.user-info:hover{box-shadow:0 0 15px #08f1c34d;transform:translateY(-3px)}.xp-bar{flex:1;max-width:300px;height:15px;background-color:#ebecf4;border-radius:10px;overflow:hidden;transition:all .3s ease;color:#282c34;text-align:center;font-size:small;opacity:.7}.xp-bar:hover{transform:scaleY(1.2);box-shadow:0 0 10px #31926a80;opacity:1}.xp-progress{height:100%;width:70%;position:relative;overflow:hidden;transition:width .5s ease;text-align:center;font-size:small;background:linear-gradient(90deg,#36c5f0 7.6%,#44eb99 86.89%)}.xp-progress:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,#2a73d2,#a129f7);transform:translate(-100%);transition:transform .8s ease-out}.xp-bar:hover .xp-progress:before{transform:translate(0)}.xp-progress:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(-45deg,rgba(255,255,255,.1) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.1) 50%,rgba(255,255,255,.1) 75%,transparent 75%,transparent);background-size:20px 20px;opacity:.5}.user-avatar{width:100px;height:100px;border-radius:50%;border:3px solid #08f1c3;object-fit:cover;transition:all .3s ease}.user-avatar:hover{transform:scale(1.1);box-shadow:0 0 20px #08f1c380;border-color:#4190d1}.user-details{flex:1;max-width:300px;transition:all .3s ease}.user-details:hover{transform:translate(5px)}.user-nickname{font-size:1.5rem;color:#08f1c3;margin:0 0 5px;transition:all .3s ease}.user-nickname:hover{color:#4190d1;text-shadow:0 0 10px rgba(65,144,209,.5)}.user-groups{color:#ebecf4;font-size:.9rem;transition:all .3s ease}.user-groups:hover{color:#08f1c3;transform:translate(5px)}.widgets-area{display:grid;cursor:arrow;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin:30px 0}.widget:hover{box-shadow:0 0 15px #08f1c34d;transform:translateY(-3px)}.widget{background-color:#282c34;border-radius:8px;padding:20px;min-height:150px}.widget-title{font-style:bold;transition:all .3s ease;cursor:pointer}.widget-title:hover{color:#9a2df5;transform:translate(5px)}.widget-description{font-size:.9rem;color:#ebecf4;margin-bottom:10px;transition:all .3s ease}.widget-datetime{text-align:center;font-size:.9rem;color:#ebecf4;margin-top:5px;margin-bottom:15px;transition:all .3s ease}.widget-datetime:hover{font-size:1.2rem}.widget-price{font-size:.9rem;color:#08f1c3;margin-top:5px;margin-bottom:15px;transition:all .3s ease;display:flex;flex-direction:row;width:auto;justify-content:flex-start;align-items:center;gap:20px}.widget-price:hover{font-size:1rem;color:#9a2df5}.App-footer{padding:20px 5%;border-top:1px solid #31926a;text-align:center;color:#ebecf4;font-size:.9rem;width:100%;box-sizing:border-box}.close-app-button{background-color:#9430f3;color:#fff;border:none;border-radius:10px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;margin:20px auto;display:block;transition:all .2s ease;box-shadow:0 2px 8px #0000001a}.close-app-button:hover{background-color:#7a1dd9;transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.close-app-button:active{transform:translateY(0);box-shadow:0 2px 6px #0000001a}@media (prefers-color-scheme: dark){.close-app-button{background-color:#9430f3;color:#fff}}@media (prefers-color-scheme: light){.close-app-button{background-color:#9430f3;color:#fff}}@media (max-width: 768px){.App-header,.header-content{flex-direction:column;align-items:flex-start}#App-header-menu{flex-wrap:wrap;margin:15px 0}.user-info{flex-direction:column;text-align:center}.xp-bar,.user-details{max-width:100%}.widgets-area{grid-template-columns:1fr}}