html,body{overflow:auto;height:100%}html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;background:transparent}html,body{scrollbar-width:none;-ms-overflow-style:none}.header{position:fixed;top:0;left:0;width:100%;background:linear-gradient(to bottom,#cbe4fb,#93c7f8);border-bottom:1px solid #f3f4f6;box-shadow:0 3px 10px #0000000a;z-index:100;font-family:Inter,sans-serif;transition:all .3s ease}.header.scrolled{box-shadow:0 4px 14px #00000014;background:#fffffffa;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.header .container{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;height:72px}.logo img{height:65px;width:auto;transition:transform .25s ease}.logo img:hover{transform:scale(1.05)}.nav-menu{display:flex;align-items:center;gap:30px}.nav-menu a{display:flex;align-items:center;gap:8px;color:#1f2937;text-decoration:none;font-weight:500;font-size:16px;transition:all .25s ease;position:relative;padding:4px 0}.nav-menu a i{width:20px;text-align:center;font-size:16px;color:#f97316;flex-shrink:0}.nav-menu a:hover{color:#f97316}.nav-menu a:hover i{color:#fb923c}.nav-menu a:after{content:"";position:absolute;left:0;bottom:-4px;width:0%;height:2px;background:#f97316;transition:width .25s ease;border-radius:10px}.nav-menu a:hover:after{width:100%}.auth-buttons{display:flex;gap:14px}.auth-buttons a{display:inline-flex;align-items:center;justify-content:center;min-width:110px;padding:9px 16px;border-radius:9999px;font-weight:500;text-decoration:none;transition:all .3s ease;font-size:15px}.auth-buttons a i{margin-right:5px}.btn-login{border:1.5px solid #f97316;color:#f97316;background:transparent}.btn-login:hover{background:#fff7ed;transform:translateY(-2px)}.btn-register{background:#f97316;color:#fff;border:1.5px solid #fffcf9}.btn-register:hover{background:#fb923c;box-shadow:0 4px 10px #f973164d;transform:translateY(-2px)}.user-info{position:relative;display:flex;align-items:center;gap:10px;cursor:pointer;font-family:Arial,sans-serif}.user-avatar{width:34px;height:34px;border-radius:50%;background:#fef3c7;color:#f97316;font-weight:700;display:flex;justify-content:center;align-items:center;text-transform:uppercase;transition:background .25s,color .25s}.user-info:hover .user-avatar{background:#fff7ed;color:#f97316}.user-details{display:flex;flex-direction:column}.username{font-weight:600;font-size:14px;color:#1f2937}.balance{font-size:13px;color:#6b7280}.dropdown-icon{font-size:12px;color:#6b7280}.user-dropdown{position:absolute;top:130%;right:0;background:#fff;border:1px solid #f1f1f1;border-radius:8px;box-shadow:0 6px 20px #00000014;width:190px;opacity:0;visibility:hidden;transition:all .25s ease;z-index:50;overflow:hidden}.user-dropdown.show{opacity:1;visibility:visible}.user-dropdown a,.user-dropdown button{display:block;padding:10px 16px;color:#374151;text-decoration:none;font-size:14px;width:100%;text-align:left;background:transparent;border:none;cursor:pointer;transition:all .25s}.user-dropdown a:hover,.user-dropdown button:hover{background:#fff7ed;color:#f97316}.mobile-menu-btn{display:block;background:none;border:none;cursor:pointer;padding:8px}.mobile-menu-btn:hover{color:#f97316}.menu-icon{width:24px;height:24px;color:#4b5563}@media(min-width:768px){.mobile-menu-btn{display:none}}.mobile-menu{display:none;flex-direction:column;background:#fff;border-top:1px solid #f3f3f3;width:70%;max-width:320px;position:fixed;top:60px;left:0;height:calc(100vh - 140px);overflow-y:auto;transition:transform .35s ease;transform:translate(-100%);box-shadow:4px 0 12px #0000000d;border-radius:0 12px 12px 0;padding:0}.mobile-menu.active{transform:translate(0)}.mobile-menu a{display:flex;align-items:center;gap:10px;padding:14px 24px;border-bottom:1px solid #f3f3f3;color:#1f2937;font-weight:500;font-size:15.5px;text-decoration:none;transition:all .25s ease}.mobile-menu a i{width:22px;text-align:center;font-size:16px;color:#f97316;flex-shrink:0}.mobile-menu a:hover{background:#fff7ed;color:#f97316}.mobile-menu a:hover i{color:#fb923c}.mobile-auth{display:flex;flex-direction:row;gap:12px;padding:14px;justify-content:center;border-top:1px solid #f5f5f5;margin-top:auto}.mobile-auth a{flex:1;text-align:center;padding:10px 0;border-radius:9999px;font-weight:500;text-decoration:none;transition:all .25s}.mobile-auth .btn-login{border:1.5px solid #f97316;color:#f97316}.mobile-auth .btn-login:hover{background:#fff7ed}.mobile-auth .btn-register{background:#f97316;color:#fff}.mobile-auth .btn-register:hover{background:#fb923c}.mobile-user{border-top:1px solid #f0f0f0;padding:16px 20px;background:#fff;border-radius:10px;box-shadow:0 1px 4px #0000000d;margin-top:12px}.mobile-user .user-summary{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:8px}.mobile-user .username{font-weight:600;color:#1f2937;font-size:15px}.mobile-user .balance{font-size:14px;color:#4b5563;background:#fef3c7;padding:3px 8px;border-radius:6px;font-weight:500}.mobile-user .user-menu{display:flex;flex-direction:column;margin-top:10px}.mobile-user .user-menu a,.mobile-user .user-menu button{display:flex;align-items:center;gap:10px;font-size:15px;color:#374151;background:none;border:none;text-align:left;cursor:pointer;transition:all .25s;padding:10px 0 10px 4px}.mobile-user .user-menu i{width:22px;text-align:center;font-size:16px;color:#f97316}.mobile-user .user-menu a:hover,.mobile-user .user-menu button:hover{color:#f97316;background:#fff7ed;padding-left:10px}.mobile-user .user-menu a:hover i,.mobile-user .user-menu button:hover i{color:#fb923c}@media(max-width:768px){.header .container{height:60px;padding:0 20px}.nav-menu,.auth-buttons,.user-info{display:none!important}.mobile-menu-btn{display:block}.mobile-menu{display:flex}.logo img{height:60px}}.filter-bar{margin-bottom:16px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}.filter-bar .input-search{padding:8px 12px;border:1px solid #ccc;border-radius:6px;font-size:14px;width:100%;max-width:300px;outline:none;transition:all .25s ease}.filter-bar .input-search:focus{border-color:#f97316;box-shadow:0 0 5px #f973164d}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
