.cat-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:clamp(13px,1.5vw,16px);display:grid}.cat-cell{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);text-align:center;flex-direction:column;align-items:center;gap:clamp(8px,1vw,10px);padding:clamp(14px,1.8vw,18px) clamp(8px,1vw,10px);transition:transform .18s,box-shadow .2s,border-color .2s;display:flex}.cat-cell:hover{box-shadow:var(--shadow-mystic);border-color:var(--color-gold);transform:translateY(-3px)}.cat-ico{background:var(--color-bg-alt);border:1px solid var(--color-border);border-radius:50%;place-items:center;width:clamp(46px,4.5vw,56px);height:clamp(46px,4.5vw,56px);font-size:clamp(22px,2.2vw,26px);display:grid}.cat-name{color:var(--color-ink);font-size:clamp(11.5px,1.1vw,13px)}.cat-element .cat-cell{background:var(--color-surface)}.cat-element .cat-ico{color:#fff}.cat-grid--diy .cat-cell{cursor:pointer}.cat-grid--diy .cat-cell:hover{border-color:var(--color-gold);transform:translateY(-3px);box-shadow:0 10px 30px #0000001f}.cat-enter{color:var(--color-gold);opacity:0;margin-left:auto;font-size:16px;transition:opacity .2s,transform .2s;transform:translate(-4px)}.cat-grid--diy .cat-name{display:inline}.cat-grid--diy .cat-cell{flex-direction:row;justify-content:center;gap:clamp(10px,1.2vw,12px);padding:clamp(13px,1.6vw,16px) clamp(15px,1.8vw,18px)}.cat-grid--diy .cat-ico{width:clamp(35px,3.5vw,42px);height:clamp(35px,3.5vw,42px);font-size:clamp(17px,1.8vw,20px)}.cat-grid--diy .cat-cell:hover .cat-enter{opacity:1;transform:translate(0)}
