.header{position:fixed;top:0;left:0;right:0;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 2px 20px #00000014;z-index:1000;border-bottom:1px solid rgba(0,0,0,.06)}.header-container{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;max-width:100%;height:50px}.header-left{display:flex;align-items:center;gap:30px}.logo{font-size:26px;font-weight:700;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;cursor:pointer;letter-spacing:1px}.nav-menu{display:flex;gap:20px;flex-wrap:wrap}.mobile-menu-toggle{display:none;background:none;border:none;font-size:24px;cursor:pointer;color:#333;padding:5px 10px}@media (max-width: 1024px){.mobile-menu-toggle{display:block}.nav-menu{position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;padding:10px 0;box-shadow:0 4px 8px #0000001a;display:none}.nav-menu.mobile-open{display:flex}.nav-item{padding:12px 20px;width:100%}}.nav-item{color:#666;text-decoration:none;font-size:15px;padding:8px 16px;border-radius:8px;transition:all .3s;font-weight:500;position:relative}.nav-item:hover{background-color:#f0f7ff;color:#1890ff}.nav-item.active{color:#1890ff;background-color:#e6f7ff;font-weight:600}.nav-item.active:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:60%;height:2px;background:linear-gradient(90deg,#1890ff,#52c41a);border-radius:2px}.header-right{display:flex;gap:15px;align-items:center}.header-link{color:#666;font-size:14px;cursor:pointer;padding:5px 10px;border-radius:4px;transition:background-color .3s}.header-link:hover{background-color:#f0f0f0}.sidebar{width:200px;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-right:1px solid rgba(0,0,0,.06);position:fixed;left:0;top:50px;bottom:0;overflow-y:auto;z-index:100;box-shadow:2px 0 10px #0000000a}.sidebar-overlay{display:none}.sidebar-close{display:none;background:none;border:none;font-size:28px;color:#666;cursor:pointer;padding:0;line-height:1}@media (max-width: 768px){.sidebar-overlay{display:block;position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;z-index:199}.sidebar{transform:translate(-100%);transition:transform .3s}.sidebar.mobile-open{transform:translate(0)}.sidebar-close{display:block}.sidebar-header{display:flex;justify-content:space-between;align-items:center}}.sidebar-header{padding:20px 15px;border-bottom:1px solid #e8e8e8}.sidebar-title{font-size:16px;font-weight:700;color:#333}.sidebar-nav{padding:10px 0}.sidebar-item{padding:14px 20px;cursor:pointer;color:#666;font-size:14px;transition:all .3s cubic-bezier(.4,0,.2,1);border-left:3px solid transparent;position:relative;margin:2px 8px;border-radius:8px}.sidebar-item:hover{background:linear-gradient(90deg,#1890ff14,#1890ff05);color:#1890ff;transform:translate(4px)}.sidebar-item.active{background:linear-gradient(90deg,#1890ff26,#1890ff0d);color:#1890ff;border-left-color:#1890ff;font-weight:600;box-shadow:0 2px 8px #1890ff1a}.tool-card{background:#fff;border:1px solid #e8e8e8;border-radius:12px;padding:20px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;height:100%;min-height:140px;box-shadow:0 2px 8px #0000000a;position:relative;overflow:hidden}.tool-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#1890ff,#52c41a,#faad14,#f5222d);opacity:0;transition:opacity .3s}.tool-card:hover{border-color:#1890ff;box-shadow:0 8px 24px #1890ff26;transform:translateY(-4px)}.tool-card:hover:before{opacity:1}.tool-icon{width:48px;height:48px;margin-bottom:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:10px;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);transition:transform .3s}.tool-card:hover .tool-icon{transform:scale(1.1) rotate(5deg)}.tool-icon img{width:100%;height:100%;object-fit:contain;border-radius:8px;padding:4px}.tool-icon-placeholder{width:48px;height:48px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;font-weight:700;box-shadow:0 4px 12px #667eea4d}.tool-info{flex:1}.tool-name{font-size:16px;font-weight:600;color:#1a1a1a;margin-bottom:8px;line-height:1.4;transition:color .3s}.tool-card:hover .tool-name{color:#1890ff}.tool-description{font-size:13px;color:#666;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.main-content{flex:1;margin-left:200px;margin-right:20px;padding:30px 40px;min-height:calc(100vh - 50px);background:linear-gradient(135deg,#f5f7fa,#c3cfe2);margin-top:50px}@media (max-width: 768px){.main-content{margin-left:0;padding:15px}}.content-header{margin-bottom:20px}.category-header-row{display:flex;align-items:center;gap:15px;margin-bottom:15px}.mobile-category-toggle{display:none;background:#1890ff;color:#fff;border:none;padding:8px 15px;border-radius:4px;cursor:pointer;font-size:14px}.category-title{font-size:28px;font-weight:700;color:#1a1a1a;margin:0;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}@media (max-width: 768px){.mobile-category-toggle{display:block}.category-title{font-size:20px}}.banner{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:18px 24px;border-radius:12px;margin-bottom:24px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 16px #667eea4d;position:relative;overflow:hidden}.banner:before{content:"";position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.2) 0%,transparent 70%);animation:shimmer 3s infinite}@keyframes shimmer{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.banner:hover{transform:translateY(-3px);box-shadow:0 8px 24px #667eea66}.banner-content{font-size:15px;font-weight:600;position:relative;z-index:1;letter-spacing:.5px}.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}@media (max-width: 768px){.tools-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}}.no-results{text-align:center;padding:60px 20px;color:#999;font-size:16px}.app{display:flex;flex-direction:column;min-height:100vh}.app-body{display:flex;flex:1;margin-top:60px;position:relative}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);background-attachment:fixed;color:#333;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{min-height:100vh}