:root{--primary-color: #2a9d8f;--primary-hover: #218579;--primary-light: #e0f5f2;--bg-primary: #dfe3e6;--bg-secondary: #f4f4f9;--bg-card: #ffffff;--bg-input: #f8fafc;--text-primary: #333333;--text-secondary: #666666;--text-muted: #9ca3af;--text-inverse: #ffffff;--success-color: #2a9d8f;--error-color: #d62828;--warning-color: #f77f00;--info-color: #457b9d;--border-color: #dddddd;--border-radius-sm: 4px;--border-radius-md: 8px;--border-radius-lg: 12px;--shadow-sm: 0 2px 5px rgba(0, 0, 0, .1);--shadow-md: 0 4px 10px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 30px rgba(0, 0, 0, .06);--spacing-xs: 5px;--spacing-sm: 10px;--spacing-md: 15px;--spacing-lg: 20px;--spacing-xl: 30px;--transition-fast: .2s ease;--transition-normal: .3s ease;--transition-slow: .35s ease}html{height:100%;overflow-y:auto;scrollbar-gutter:stable;background:var(--bg-primary)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background-color:var(--bg-secondary);color:var(--text-primary);min-height:100vh;width:100%;margin:0 auto;padding-bottom:var(--spacing-lg);border-radius:var(--border-radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;align-items:center}header{background-color:var(--primary-color);color:var(--text-inverse);padding:var(--spacing-lg);width:100%;height:150px;text-align:center;box-shadow:var(--shadow-sm);position:relative}header h1{margin-bottom:var(--spacing-sm);font-weight:600}.back-btn{display:inline-block;color:var(--text-inverse);text-decoration:none;padding:var(--spacing-xs) var(--spacing-md);background-color:#fff3;border-radius:var(--border-radius-sm);transition:background-color var(--transition-normal);margin-left:auto;align-self:center}.back-btn:hover{background-color:#ffffff4d}#searchInput{padding:var(--spacing-sm) var(--spacing-md);font-size:16px;width:60%;max-width:400px;border:none;border-radius:var(--border-radius-sm);box-shadow:var(--shadow-sm);transition:all var(--transition-normal)}#searchInput:focus{outline:none;box-shadow:0 3px 10px #0003;transform:translateY(-2px)}main{display:flex;flex-direction:column;align-items:center;margin-top:var(--spacing-xl);width:100%;padding:0 var(--spacing-lg)}.tool-list{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:var(--spacing-lg);width:90%;max-width:1200px;animation:fadeIn var(--transition-normal) ease}.tool-item{background-color:var(--bg-card);border-radius:var(--border-radius-lg);padding:var(--spacing-lg) var(--spacing-md);width:220px;text-align:center;cursor:pointer;transition:transform var(--transition-slow),box-shadow var(--transition-slow);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;align-items:center}.tool-item:hover{transform:translateY(-7px) scale(1.02);box-shadow:0 12px 25px #00000026}.tool-item h3{margin:var(--spacing-md) 0 var(--spacing-sm);color:var(--primary-color);font-weight:600;transition:color var(--transition-normal)}.tool-item:hover h3{color:var(--primary-hover)}.tool-item p{color:var(--text-secondary);font-size:14px;line-height:1.6}.tool-icon{width:60px;height:60px;background-color:var(--primary-light);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:var(--spacing-sm);position:relative;transition:transform var(--transition-slow)}.tool-item:hover .tool-icon{transform:scale(1.1) rotate(3deg)}.tool-icon:before{font-size:24px;color:var(--primary-color)}.tool-icon.json:before{content:"📄"}.tool-icon.ip:before{content:"🌐"}.tool-icon.qrcode:before{content:"🔍"}.tool-icon.md5:before{content:"🔒"}.tool-icon.base64:before{content:"🔓"}.tool-icon.zip:before{content:"🗜️"}.tool-icon.pdf:before{content:"📑"}.tool-icon.icon:before{content:"🎨"}.tool-icon.speed:before{content:"⚡"}.tool-icon.p⇌y:before{content:"🔄"}.tool-icon.timestamp:before{content:"⏰"}.tool-icon.screen:before{content:"🖥️"}.tool-icon.idQuery:before{content:"🆔"}.tool-icon.cron:before{content:"📅"}.tool-icon.pdfToWord:before{content:"📝"}.tool-icon.mortgage:before{content:"🏠";font-size:28px}.tool-icon.jetbra:before{content:"🛠️";font-size:20px}.tool-icon.ocr:before{content:"📸";font-size:22px}.tool-icon.shop:before{content:"🏪";font-size:28px}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes cardIn{0%{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:768px){.tool-list{justify-content:center}}