.tools-container{max-width:1400px;margin:0 auto;padding:20px;min-height:100vh}
.nav-tabs{border:none;margin-bottom:24px}
.nav-tabs .nav-link{border:none;color:#666;padding:8px 16px;margin-right:24px;position:relative;transition:.3s}
.nav-tabs .nav-link:hover{color:#1890ff;transform:translateY(-2px)}
.nav-tabs .nav-link.active{color:#1890ff;background:0 0}
.nav-tabs .nav-link.active:after{content:'';position:absolute;bottom:-2px;left:0;width:100%;height:2px;background:#1890ff;transform:scaleX(0);animation:.3s forwards navLineIn}
.tool-card{border-radius:12px;overflow:hidden;transition:.3s cubic-bezier(.4, 0, .2, 1);height:100%;border:1px solid #eee;position:relative;animation:.5s forwards fadeIn;opacity:0;transform:translateY(20px);backdrop-filter:blur(10px)}
.tool-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.12)}
.tool-img-wrapper{position:relative;overflow:hidden}
.tool-img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .5s cubic-bezier(.4, 0, .2, 1)}
.tool-card:hover .tool-img{transform:scale(1.1)}
.tool-info{padding:16px;position:relative}
.tool-name{font-size:16px;font-weight:500;margin-bottom:8px}
.tool-desc{font-size:14px;color:#666}
.use-btn{background:#1890ff;color:#fff;padding:6px 16px;border-radius:4px;border:none;font-size:14px;cursor:pointer;transition:.3s;opacity:0;position:absolute;right:16px;top:25%;transform:translateY(-50%)}
.tool-card:hover .use-btn{opacity:1}
.use-btn:hover{background:#40a9ff;transform:translateY(-50%) scale(1.05)}
.tool-tag{position:absolute;top:12px;right:12px;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:500;z-index:1;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.sub-category{border:none;gap:8px;width:100%;margin-top:12px}
.sub-category .nav-link{padding:4px 12px;border-radius:16px;font-size:14px;color:#666;background:#f5f5f5;transition:.3s}
.sub-category .nav-link:hover{color:#1890ff;background:#e6f7ff}
.sub-category .nav-link.active{color:#fff;background:#1890ff}
@keyframes navLineIn{
from{transform:scaleX(0)}
to{transform:scaleX(1)}
}
@keyframes fadeIn{
from{opacity:0;transform:translateY(20px)}
to{opacity:1;transform:translateY(0)}
}
@keyframes fadeOut{
from{opacity:1;transform:translateY(0)}
to{opacity:0;transform:translateY(20px)}
}
[data-bs-theme=dark]{background-color:#1a1a1a;color:#fff}
[data-bs-theme=dark] .tool-card{background:#2d2d2d;border-color:#404040}
[data-bs-theme=dark] .nav-tabs .nav-link,[data-bs-theme=dark] .tool-desc{color:#999}
[data-bs-theme=dark] .nav-tabs .nav-link.active{color:#1890ff}
[data-bs-theme=dark] .use-btn{background:#177ddc}
[data-bs-theme=dark] .use-btn:hover{background:#1890ff}
[data-bs-theme=dark] .sub-category .nav-link{background:#2d2d2d;color:#999}
[data-bs-theme=dark] .sub-category .nav-link:hover{background:#177ddc;color:#fff}
[data-bs-theme=dark] .sub-category .nav-link.active{background:#1890ff;color:#fff}
@media (max-width:1400px){
.tools-container{max-width:1200px}
}
@media (max-width:992px){
.row-cols-lg-5>*{width:33.333333%}
}
@media (max-width:768px){
.row-cols-md-3>*{width:50%}
}
@media (max-width:576px){
.row-cols-1>*{width:100%}
}
.theme-toggle{width:40px;height:40px;border-radius:8px;border:1px solid #eee;background:0 0;color:#666;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.3s;margin-left:16px;flex-shrink:0}
.theme-toggle:hover{background:#f5f5f5;color:#1890ff;transform:translateY(-2px)}
[data-bs-theme=dark] .theme-toggle{border-color:#404040;color:#999}
[data-bs-theme=dark] .theme-toggle:hover{background:#2d2d2d;color:#1890ff}
.nav-wrapper{position:relative}