*{box-sizing:border-box}
html,body{margin:0;width:100vw;height:100vh;overflow:hidden;font-family:Inter,system-ui,sans-serif;background:#090b0f;color:#edf1f7}
:root{--bg:#090b0f;--panel:#101318;--panel2:#151920;--line:#252b33;--muted:#78818e;--text:#edf1f7;--accent:#7e91ff}
.page{width:calc(100vw / 1.3);height:calc(100vh / 1.3);zoom:1.3;transform-origin:0 0;display:flex;flex-direction:column;background:radial-gradient(900px 600px at 55% 20%,#141a26 0%,#090b0f 60%)}

.header{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid var(--line);background:#0e1116;flex:none}
.brand{display:flex;align-items:center;gap:11px}
.brand-icon{width:31px;height:31px;border:1px solid #39435a;border-radius:9px;display:grid;place-items:center;background:#141a27}
.brand-icon svg{width:17px;fill:none;stroke:#9aa8ff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.brand strong{display:block;font-size:12px}.brand span{display:block;color:#596270;font-size:8px;letter-spacing:.12em;margin-top:3px}
.header-actions{display:flex;align-items:center;gap:8px}
.state{color:#5d6672;font-size:9px;margin-right:7px}
.btn{border:1px solid var(--line);background:#151920;color:#aab3bf;height:35px;padding:0 12px;border-radius:8px;cursor:pointer;font-size:10px;transition:.15s}
.btn:hover{border-color:#3a4350;color:#fff}
.btn.primary{background:#7081eb;border-color:#7e8fff;color:#fff}.btn.primary:hover{background:#7d8df3}
.btn.subtle{background:transparent}
.btn.danger{border-color:#4b2d36;color:#e29aa8;background:rgba(239,68,68,.08)}.btn.danger:hover{background:rgba(239,68,68,.18)}

.shell{display:grid;grid-template-columns:210px minmax(0,1fr);min-height:0;flex:1}
.sidebar{border-right:1px solid var(--line);background:#0e1116;padding:20px 10px;display:flex;flex-direction:column;min-height:0;overflow:hidden}
#categories{flex:1;overflow-y:auto;overflow-x:hidden;padding-right:4px}
#categories::-webkit-scrollbar{width:3px}#categories::-webkit-scrollbar-thumb{background:#2a3040;border-radius:9px}
.side-label,.overline{font-size:8px;letter-spacing:.16em;color:#626c79;font-weight:600}
.side-label{padding:0 10px 10px}
.category{width:100%;height:34px;border:0;background:transparent;border-radius:8px;color:#818b99;display:flex;align-items:center;gap:8px;padding:0 10px;cursor:pointer;text-align:left;margin:1px 0;transition:.14s}
.category svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.category span{flex:1;font-size:10px}.category b{font-size:9px;color:#555f6c;font-weight:500}
.category.active{background:#1b2028;color:#eef2f8}.category.active svg{color:#91a0ff}
.cat-group{margin-top:6px}
.cat-group-head{width:100%;height:28px;border:0;background:transparent;color:#505b69;display:flex;align-items:center;gap:6px;padding:0 10px;cursor:pointer;font-size:8px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;transition:.14s}
.cat-group-head svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .2s;flex-shrink:0}
.cat-group.collapsed .cat-group-head svg{transform:rotate(0deg)}
.cat-group:not(.collapsed) .cat-group-head svg{transform:rotate(90deg)}
.cat-group-items{overflow:hidden;transition:max-height .25s ease}
.cat-group.collapsed .cat-group-items{max-height:0!important}
.cat-group:not(.collapsed) .cat-group-items{max-height:600px}
.sidebar-bottom{margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.inventory-mini{padding:0 9px 8px;cursor:pointer;transition:.14s;border-radius:8px}
.inventory-mini:hover{background:rgba(126,145,255,.06)}
.inventory-mini>div:first-child{display:flex;justify-content:space-between;color:#737e8c;font-size:9px}
.inventory-mini b{color:#dfe5ed;font-weight:600}
.mini-bar{height:3px;background:#20252d;border-radius:99px;margin-top:6px;overflow:hidden}
.mini-bar i{display:block;width:0;height:100%;background:#7182ea;transition:.2s}


.inventory-list{max-height:220px;overflow-y:auto;padding:0 4px 8px}
.inventory-list::-webkit-scrollbar{width:4px}.inventory-list::-webkit-scrollbar-thumb{background:#2a3040;border-radius:9px}
.inv-item{display:flex;align-items:center;gap:7px;padding:5px 6px;border-radius:7px;background:#151920;border:1px solid transparent;cursor:pointer;transition:.14s;margin-bottom:3px}
.inv-item:hover{border-color:#2c3540;background:#1a2028}
.inv-item-img{width:28px;height:20px;border-radius:4px;background:#0d1116;display:grid;place-items:center;overflow:hidden;flex-shrink:0}
.inv-item-img img{max-width:100%;max-height:100%;object-fit:contain}
.inv-item-info{flex:1;min-width:0}
.inv-item-info b{display:block;font-size:8px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inv-item-info span{display:block;font-size:7px;color:#626d7a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inv-item-del{width:18px;height:18px;border:0;background:transparent;color:#666;border-radius:4px;display:grid;place-items:center;cursor:pointer;opacity:0;transition:.12s;flex-shrink:0}
.inv-item:hover .inv-item-del{opacity:1}.inv-item-del:hover{color:#eb4b4b;background:rgba(239,68,68,.12)}
.inventory-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 0;color:#505b69;font-size:9px}

.clear-btn{width:100%;height:32px;background:transparent;border:1px solid #2c3038;border-radius:8px;color:#777f8b;display:flex;gap:7px;align-items:center;justify-content:center;cursor:pointer;font-size:9px;transition:.14s}
.clear-btn:hover{color:#df9ba7;border-color:#52343c}
.clear-btn svg{width:13px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.content{min-width:0;overflow:auto;padding:28px 32px 80px}
.content-head{display:flex;align-items:end;justify-content:space-between;gap:20px}
.content h1{font-size:22px;font-weight:500;letter-spacing:-.035em;margin:7px 0 4px}
.content-head p{font-size:10px;color:#697380;margin:0}
.search{width:270px;height:38px;border-bottom:1px solid #303741;display:flex;align-items:center;gap:9px;color:#697482;transition:.2s}
.search:focus-within{border-color:#4b69ff;color:#aab8ff}
.search svg,.modal-search-wrap svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.search input,.modal-search-wrap input{border:0;outline:0;background:transparent;color:#eef2f8;width:100%;font-size:10px}
.search input::placeholder,.modal-search-wrap input::placeholder{color:#5f6977}
.toolbar{min-height:32px;display:flex;align-items:center;gap:8px;margin-bottom:14px}
.result-count{color:#555f6c;font-size:9px}
.chip{height:28px;border:1px solid transparent;border-radius:8px;background:transparent;color:#697481;padding:0 9px;cursor:pointer;font-size:9px;transition:.14s}
.chip:hover,.chip.active{background:#191e25;border-color:#2c323b;color:#e7ebf1}
.chip.active{box-shadow:0 0 0 1px rgba(126,145,255,.12)}
.rarity-dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:4px}
.modal-filters{display:flex;gap:4px;padding:0 18px 10px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:2px}


.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:9px;padding-bottom:32px}
.grid.no-anim .weapon-card{animation:none!important}
.weapon-card{height:155px;border:1px solid #242a32;background:#12161c;border-radius:11px;cursor:pointer;position:relative;overflow:hidden;transition:transform .18s cubic-bezier(.2,.8,.2,1),border-color .18s,background .18s,box-shadow .18s;animation:cardIn .42s cubic-bezier(.2,.8,.2,1) both}
.weapon-card:hover{border-color:#5b6bff60;background:#171c24;transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.35),0 0 0 1px rgba(91,107,255,.08)}
.weapon-card:active{transform:translateY(-1px) scale(.985)}
.weapon-image{height:110px;display:grid;place-items:center;background:radial-gradient(110px 52px at 50% 55%,#252c37,transparent 75%);overflow:hidden;padding:8px}
.weapon-image img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 12px 8px #0009);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.weapon-card:hover .weapon-image img{transform:scale(1.06)}
@keyframes cardIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.weapon-info{padding:7px 10px;border-top:1px solid rgba(255,255,255,.02)}
.weapon-info b{font-size:10px;font-weight:500}.weapon-info span{display:block;color:#626d7a;font-size:8px;margin-top:3px}
.weapon-arrow{position:absolute;right:8px;bottom:8px;width:20px;height:20px;border:1px solid #2d3540;border-radius:6px;display:grid;place-items:center;color:#737f8e;transition:.15s}
.weapon-card:hover .weapon-arrow{border-color:#5b6bff;color:#aab6ff;background:rgba(91,107,255,.08)}
.weapon-arrow svg{width:11px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sentinel{height:1px}.empty{grid-column:1/-1;text-align:center;padding:60px 20px;color:#626c79;font-size:10px}


.knife-grid,.music-grid{padding:14px 18px 18px;overflow:auto;flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-content:start}
.knife-card,.music-card{border:1px solid #242a32;background:#12161c;border-radius:11px;overflow:hidden;cursor:pointer;transition:.14s;animation:cardIn .35s both}
.knife-card:hover,.music-card:hover{border-color:#5b6bff60;background:#171c24;transform:translateY(-2px)}
.knife-img{height:100px;display:grid;place-items:center;background:radial-gradient(90px 45px at 50% 52%,#29313e,transparent 70%);padding:10px;overflow:hidden}
.knife-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 10px 6px #0009);transition:.25s}
.knife-card:hover .knife-img img{transform:scale(1.05)}
.knife-info,.music-info{padding:8px 10px;border-top:1px solid rgba(255,255,255,.03)}
.knife-info b,.music-info b{display:block;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.knife-info span,.music-info span{display:block;color:#5f6a78;font-size:7px;margin-top:2px}
.music-img{height:100px;display:grid;place-items:center;background:radial-gradient(90px 45px at 50% 52%,#29313e,transparent 70%);padding:10px;overflow:hidden}
.music-img img{max-width:100%;max-height:80px;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 10px 6px #0009);transition:.25s}
.music-card:hover .music-img img{transform:scale(1.05)}
.music-img svg{opacity:.6}
.music-info{min-height:40px}
.music-info b{font-size:9px;line-height:1.2;word-wrap:break-word;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}


.modal{position:fixed;top:0;left:0;width:calc(100vw / 1.3);height:calc(100vh / 1.3);z-index:10;display:none;align-items:center;justify-content:center;padding:28px;pointer-events:none;zoom:1.3}
.modal.open{display:flex;pointer-events:auto;animation:modalFadeIn .22s ease}
.modal.closing{display:flex;pointer-events:none;animation:modalFadeOut .18s ease forwards}
.modal.open .modal-backdrop{animation:backdropIn .25s ease}
.modal.closing .modal-backdrop{animation:backdropOut .18s ease forwards}
.modal.open .modal-card,.modal.open .editor-card{animation:modalPop .32s cubic-bezier(.2,.8,.2,1)}
.modal.closing .modal-card,.modal.closing .editor-card{animation:modalPopOut .18s ease forwards}
@keyframes modalFadeIn{from{opacity:0}to{opacity:1}}
@keyframes modalFadeOut{from{opacity:1}to{opacity:0}}
@keyframes backdropIn{from{opacity:0}to{opacity:1}}
@keyframes backdropOut{from{opacity:1}to{opacity:0}}
@keyframes modalPop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes modalPopOut{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(8px) scale(.98)}}
.modal-backdrop{position:absolute;inset:0;background:#030508b8;backdrop-filter:blur(10px)}
.modal-card,.editor-card{position:relative;z-index:1;background:#11151b;border:1px solid #2b323c;border-radius:15px;box-shadow:0 30px 100px #000b;overflow:hidden}
.modal-card{width:min(980px,92vw);height:min(720px,88vh);display:flex;flex-direction:column;min-height:0}
.modal-head{height:64px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);flex:none}
.modal-head h2{font-size:15px;font-weight:500;margin:6px 0 0}
.close{width:30px;height:30px;border:1px solid #2a3038;border-radius:8px;background:#161a20;color:#75808d;display:grid;place-items:center;cursor:pointer;transition:.14s}
.close:hover{color:#fff;border-color:#3a4250;transform:rotate(90deg)}
.close svg{width:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.modal-search-wrap{height:44px;margin:10px 16px 6px;border:1px solid #252c35;background:#0d1116;border-radius:9px;display:flex;align-items:center;gap:8px;padding:0 12px;color:#65707e;transition:.15s;flex:none}
.modal-search-wrap:focus-within{border-color:#3d4a6a;box-shadow:0 0 0 3px rgba(91,107,255,.08)}
.modal-search-wrap span{font-size:9px;color:#596371;white-space:nowrap}


.skin-grid{padding:4px 16px 16px;overflow:auto;flex:1;min-height:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;align-content:start}
.skin-card{min-width:0;border:1px solid #252b34;border-radius:10px;background:#161a20;overflow:visible;cursor:pointer;position:relative;transition:.14s;animation:cardIn .32s both}
.skin-card:hover{border-color:#6171ad;background:#1a2028;transform:translateY(-2px)}
.skin-card::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--rarity);border-radius:0 0 10px 10px}
.skin-img{height:120px;display:grid;place-items:center;background:radial-gradient(100px 55px at 50% 52%,#29313e,transparent 72%);padding:10px;overflow:hidden}
.skin-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 10px 6px #0009);transition:.25s}
.skin-card:hover .skin-img img{transform:scale(1.04)}
.skin-info{padding:8px 10px;border-top:1px solid rgba(255,255,255,.03)}
.skin-info b{display:block;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.skin-info span{display:block;color:#606b78;font-size:7px;margin-top:2px}
.skin-tag{position:absolute;top:6px;right:6px;background:#7e91ff;color:#fff;font-size:7px;padding:2px 5px;border-radius:4px;font-weight:600}


.editor-card{width:min(700px,90vw);display:grid;grid-template-columns:42% 58%;border-radius:16px}
.editor-preview{min-height:440px;background:radial-gradient(180px 100px at 50% 50%,#30394a,transparent 70%),#0e1217;display:grid;place-items:center;position:relative;border-right:1px solid var(--line);padding:16px}
.editor-preview img{max-width:92%;max-height:340px;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 28px 20px #000b)}
#editorRarityLine{position:absolute;left:0;right:0;bottom:0;height:3px}
.editor-main{padding:22px 22px 20px;display:flex;flex-direction:column;min-height:0}
.editor-head{display:flex;justify-content:space-between;gap:10px;flex:none}
.editor-head h2{font-size:15px;font-weight:500;margin:7px 0 4px}
.muted{color:#697481;font-size:9px}
.controls{margin-top:24px;display:grid;gap:18px}
.control>div,.row{display:flex;justify-content:space-between;align-items:center;color:#8c96a4;font-size:9px}
.control b{color:#e8edf4;font-weight:500}
.control input{width:100%;accent-color:#8092ff;margin:10px 0 3px}
.control small{display:flex;justify-content:space-between;color:#505b69;font-size:7px}
.stepper{display:flex;border:1px solid #303740;border-radius:7px;overflow:hidden}
.stepper button{width:26px;height:24px;border:0;background:#1b2027;color:#8994a1;cursor:pointer;font-size:12px}
.stepper b{width:28px;display:grid;place-items:center;font-size:9px;font-weight:500}
.switch{width:34px;height:19px;border:1px solid #303742;background:#20252c;border-radius:99px;padding:2px;cursor:pointer;transition:.14s}
.switch i{display:block;width:13px;height:13px;background:#697481;border-radius:50%;transition:.15s}
.switch.on{background:#7183ee;border-color:#7183ee}.switch.on i{transform:translateX(13px);background:#fff}
.editor-actions{margin-top:24px}.wide{width:100%}
.hidden{display:none!important}
.toast{position:fixed;z-index:30;left:50%;bottom:24px;transform:translate(-50%,15px);opacity:0;background:#1b212a;border:1px solid #343d49;border-radius:9px;padding:10px 14px;color:#dce3ed;font-size:9px;transition:.18s;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:900px){.shell{grid-template-columns:170px 1fr}.skin-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.knife-grid,.music-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.editor-card{grid-template-columns:1fr;width:min(520px,92vw)}.editor-preview{min-height:220px;border-right:0;border-bottom:1px solid var(--line)}.header{padding:0 15px}.state{display:none}}
@media(max-width:650px){body{overflow:auto}.page{zoom:1;height:auto;width:auto}.shell{display:block}.sidebar{display:none}.content{padding:20px 14px}.content-head{display:block}.search{width:100%;margin-top:16px}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.modal{padding:10px}.modal-card{width:100%;height:94vh}.skin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.knife-grid,.music-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}