*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Helvetica','Arial',sans-serif;background:#0a0a0a;color:#e5e5e5;min-height:100vh;padding:15px}
.container{max-width:480px;margin:0 auto}
.header-section{text-align:center;padding:20px 0 30px}
.header-section h1{font-size:28px;font-weight:700;color:#fff;margin-bottom:8px;letter-spacing:-0.5px}
.header-section p{font-size:14px;color:#888}
.vip-notice{background:linear-gradient(135deg,#1a1a1a 0%,#0d0d0d 100%);border:1px solid #2a2a2a;border-radius:12px;padding:16px;margin-bottom:25px}
.vip-notice-content{display:flex;align-items:center;gap:12px}
.vip-notice-icon{width:40px;height:40px;background:linear-gradient(135deg,#d4a017 0%,#b8860b 100%);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.vip-notice-icon i{font-size:20px;color:#fff}
.vip-notice-text h3{font-size:14px;font-weight:600;color:#d4a017;margin-bottom:3px}
.vip-notice-text p{font-size:12px;color:#666}
.stats-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:25px}
.stat-item{background:#111;border:1px solid #1a1a1a;border-radius:10px;padding:15px 10px;text-align:center}
.stat-number{font-size:22px;font-weight:700;color:#d4a017;margin-bottom:3px}
.stat-label{font-size:11px;color:#666}
.category-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;margin-bottom:20px;scrollbar-width:none}
.category-tabs::-webkit-scrollbar{display:none}
.category-tab{padding:8px 16px;background:#111;border:1px solid #1a1a1a;color:#888;font-size:13px;border-radius:20px;white-space:nowrap;cursor:pointer;transition:all 0.2s}
.category-tab.active{background:#d4a017;border-color:#d4a017;color:#000;font-weight:600}
.tools-list{display:flex;flex-direction:column;gap:12px}
.tool-item{background:#111;border:1px solid #1a1a1a;border-radius:12px;padding:16px;transition:all 0.2s}
.tool-item:hover{border-color:#2a2a2a}
.tool-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px}
.tool-icon{width:44px;height:44px;background:linear-gradient(135deg,#1a1a1a 0%,#0d0d0d 100%);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tool-icon i{font-size:20px;color:#d4a017}
.tool-info{flex:1}
.tool-name{font-size:15px;font-weight:600;color:#e5e5e5;margin-bottom:4px}
.tool-desc{font-size:13px;color:#888;line-height:1.4;margin-bottom:10px}
.tool-tags{display:flex;gap:6px;flex-wrap:wrap}
.tool-tag{font-size:11px;padding:4px 10px;border-radius:12px;font-weight:500}
.tag-plugin{background:rgba(212,160,23,0.1);color:#d4a017;border:1px solid rgba(212,160,23,0.3)}
.tag-website{background:rgba(100,100,100,0.1);color:#888;border:1px solid rgba(100,100,100,0.3)}
.tag-vip{background:rgba(212,160,23,0.15);color:#d4a017;border:1px solid rgba(212,160,23,0.4)}
.tool-item.vip-only{position:relative}
.tool-item.vip-only .tool-name{color:#d4a017}
.vip-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:#d4a017;margin-left:8px}
.vip-badge i{font-size:14px}
.load-more{text-align:center;padding:20px 0;color:#666;font-size:13px}
.footer-note{text-align:center;padding:30px 20px;color:#444;font-size:12px}
.search-box{background:#111;border:1px solid #1a1a1a;border-radius:10px;padding:12px 16px;margin-bottom:20px;display:flex;align-items:center;gap:10px}
.search-box i{color:#666;font-size:18px}
.search-box input{flex:1;background:none;border:none;color:#e5e5e5;font-size:14px;outline:none}
.search-box input::placeholder{color:#666}
@media (max-width:480px){body{padding:10px}
.header-section h1{font-size:24px}
.stat-number{font-size:18px}
.tool-header{gap:10px}
.tool-icon{width:40px;height:40px}
}