*{box-sizing:border-box;margin:0;padding:0}html,body{margin:0;padding:0;overflow-x:hidden}header{color:#fff;cursor:default!important;position:fixed;top:0;left:0;width:100%;height:64px;background:#1e1e23eb;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998;display:flex;align-items:center;justify-content:space-between;padding:0 16px;box-shadow:0 2px 10px #00000040;box-sizing:border-box;gap:.75rem;flex-wrap:wrap}body{font-family:Merriweather,serif;background-color:#1e1e2f;color:#fff;margin:0;padding:1rem}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-image:url(http://raw.githubusercontent.com/iuhence/genshin/refs/heads/main/backgrounds/Luna_I_KV_1_asddzr%20Upscaled.jpg);background-size:cover;background-repeat:no-repeat;background-position:center;opacity:.19;z-index:-1;pointer-events:none}.sidebar{position:fixed;z-index:9997;top:0;left:0;height:100vh;width:75px;background-color:#1e1e23eb;border-right:2px solid rgba(50,50,55,.92);transition:width .35s ease;overflow:hidden;display:flex;flex-direction:column;padding-top:20px}.sidebar:hover{width:200px}.sidebar-icons{margin-top:50px}.sidebar-item{display:flex;align-items:center;padding:2px 6px;margin:4px 8px;color:#ccc;text-decoration:none;border-radius:12.5px;background-color:transparent;transition:background-color .5s ease,color .2s ease}.sidebar-item:hover,.sidebar-item.active{background-color:#5a5a5abf}.icon{font-size:.75rem;width:45px;height:45px;display:flex;align-items:center;justify-content:center}.label{opacity:0;margin-left:7.5px;transition:opacity .2s ease;white-space:normal;font-family:Merriweather,serif;font-weight:700;font-size:16px}.sidebar:hover .label{opacity:1}.sidebar-divider{border:none;border-top:1px solid #555;margin:12px 8px;opacity:.6}.logo-container{display:relative;justify-content:center;align-items:center;width:100%}.logo-image{height:50px;width:auto;transition:transform .3s ease;transform:scale(1);background:none;transform:scale(1.15);z-index:999}.logo-image:hover{transform:scale(1.25)}.box-elements,.box-weapons,.box-rarity{display:flex;gap:8px;flex-wrap:wrap;z-index:9999}.button-filter{background-color:#1e1e23eb;border:2px solid #fff;border-radius:5px;width:36px;height:36px;cursor:pointer;justify-items:center;align-items:center;transition:background-color .2s;font-family:Merriweather,serif;font-weight:700;color:#fff;overflow:hidden}.button-filter img{width:100%;height:100%;opacity:1;padding:2px}.button-filter:hover,.button-filter.active{border:2px solid #FF8900;background-color:#000}.sort-toggle{background-color:#1e1e23eb;border:2px solid #fff;border-radius:5px;width:40px;height:40px;cursor:pointer;justify-items:center;align-items:center;transition:background-color .2s;font-family:Merriweather,serif;font-weight:700;color:#fff;overflow:hidden}.filter-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#0f0f14f2;display:flex;align-items:center;justify-content:center;z-index:999}.filter-modal-content{margin:70px 5px 80px 80px;background:#1c1c24;border-radius:10px;padding:20px;max-width:80%;color:#fff;position:relative}.close-btn{position:relative;top:-10px;right:-290px;background:none;border:none;font-size:20px;color:#fff;cursor:pointer}.mobile-filter{background-color:#1e1e23eb;border:2px solid #fff;border-radius:5px;cursor:pointer;align-items:center;padding:10px;transition:background-color .2s;font-family:Merriweather,serif;color:#fff}.mobile-filter-toggle{display:none;margin-bottom:-20px}#search-bar{display:flex;top:0;align-items:center;gap:10px;justify-content:flex-end;margin-right:0;z-index:999}#search-input{padding:10px 16px;border-radius:5px;border:2px solid #ccc;background-color:#1e1e23eb;color:#fff;font-family:Merriweather,serif;font-size:14px;font-weight:700;width:100%;transition:border-color .2s ease}#search-input::placeholder{color:#ccc;font-family:Merriweather,serif;font-size:14px;font-weight:700;opacity:1}#search-input::-webkit-input-placeholder,#search-input:-ms-input-placeholder,#search-input::-ms-input-placeholder{color:#ccc;font-family:Merriweather,serif;font-size:14px;font-weight:700;opacity:1}#search-input:focus{outline:none;border-color:#fff;background-color:#2a2a2a}#clear-btn{background-color:#1e1e23bf;padding:17px 16px 2px;border-radius:5px;border:2px solid #ccc;font-size:14px;cursor:pointer;color:#ccc;transition:color .2s;height:100%;justify-content:start}#clear-btn:hover{color:#fff}.filter-left{display:flex;align-items:center;gap:20px}.filter-right{display:flex;align-items:center;gap:8px;margin-left:auto}.vertical-divider{height:36px;width:1.25px;background-color:#fff5;margin-left:2px;margin-right:2px;opacity:.4}.character-ssr{background:linear-gradient(135deg,#ffb347,#fc3)}.character-sr{background:linear-gradient(135deg,#c084fc,#a855f7)}.character-r{background:linear-gradient(135deg,#9ca3af,#6b7280)}.page-wrapper{min-height:calc(100vh - 20px)}.footer{font-family:Merriweather,serif;color:#fff;position:fixed;bottom:0;left:0;width:100%;height:50px;background:#1e1e23eb;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:999;display:flex;align-items:center;justify-content:space-between;padding:0 16px;box-shadow:0 -2px 10px #00000040;box-sizing:border-box;gap:.75rem}.footer-container{width:100%;max-width:100vw;padding:0 16px;z-index:199;display:flex;justify-content:space-between;align-items:center}.social-link{display:flex;align-items:center;padding-top:8px}.social-icon{width:24px;height:24px;fill:#fff;transition:fill .2s ease}.social-link:hover .social-icon{fill:#ffe479}.character-element{position:absolute;top:5px;right:5px;width:20px;height:20px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));z-index:1}.modal-overlay{z-index:9999}.mobile-nav{display:none;position:fixed;bottom:0;left:0;width:100%;height:64px;background-color:#1e1e23eb;border-top:2px solid rgba(50,50,55,.92);box-shadow:0 -2px 10px #0000002e;justify-content:space-around;align-items:center;z-index:9999}.icon{font-size:0;width:45px;height:45px;display:flex;justify-content:center;align-items:center;color:#ccc;transition:color .2s ease}@media (max-width: 1024px){.sidebar{display:none}.mobile-nav{display:flex}body{padding-bottom:64px}.sidebar-item{width:45px;padding:2px}.label{display:none}}
