:root{--primary-color:#3b82f6;--primary-dark:#2563eb;--primary-light:#60a5fa;--secondary-color:#8b5cf6;--success-color:#10b981;--warning-color:#f59e0b;--danger-color:#ef4444;--dark-color:#0f172a;--gray-50:#f8fafc;--gray-100:#f1f5f9;--gray-200:#e2e8f0;--gray-300:#cbd5e1;--gray-400:#94a3b8;--gray-500:#64748b;--gray-600:#475569;--gray-700:#334155;--gray-800:#1e293b;--gray-900:#0f172a;--border-radius-sm:8px;--border-radius-md:12px;--border-radius-lg:16px;--border-radius-xl:24px;--shadow-sm:0 1px 2px rgba(0,0,0,0.05);--shadow-md:0 4px 6px -1px rgba(0,0,0,0.1);--shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1);--shadow-xl:0 20px 25px -5px rgba(0,0,0,0.1);--transition:all 0.3s ease}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Inter',sans-serif;background-color:var(--gray-50);color:var(--gray-800);line-height:1.6}a{text-decoration:none;color:inherit}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--gray-200);border-radius:4px}::-webkit-scrollbar-thumb{background:var(--gray-400);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--gray-500)}.container{max-width:1400px;margin:0 auto;padding:0 24px}.header{background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--gray-200);position:sticky;top:0;z-index:100}.nav-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:16px 0;gap:16px}.logo-area{display:flex;align-items:center}.logo-link{display:flex;align-items:center;gap:12px}.logo-icon{width:40px;height:40px;background:linear-gradient(135deg, var(--primary-color), var(--primary-dark));border-radius:var(--border-radius-md);display:flex;align-items:center;justify-content:center;font-size:22px;color:white;box-shadow:0 4px 12px rgba(59,130,246,0.3)}.logo-text{font-size:1.5rem;font-weight:700;background:linear-gradient(135deg, var(--gray-800), var(--primary-color));background-clip:text;-webkit-background-clip:text;color:transparent}.search-box{flex:1;max-width:400px;position:relative}.search-box i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:#fff}.search-box input{width:100%;padding:12px 16px 12px 44px;border:1px solid var(--gray-200);border-radius:40px;font-size:0.9rem;background:var(--gray-100);transition:var(--transition)}.search-box input:focus{outline:none;border-color:var(--primary-color);background:white;box-shadow:0 0 0 3px rgba(59,130,246,0.1)}.user-area{display:flex;gap:12px;align-items:center}.user-area span{cursor:pointer;padding:8px 16px;border-radius:40px;font-size:0.9rem;font-weight:500;transition:var(--transition)}.user-area span:hover{background:var(--gray-100)}.btn-outline{background:transparent;border:1px solid var(--gray-300);padding:8px 16px;border-radius:40px;cursor:pointer;transition:var(--transition);font-weight:500;font-size:0.9rem}.btn-outline:hover{background:var(--gray-100);border-color:var(--gray-400)}.btn-outline-light{background:transparent;border:1px solid var(--gray-300);padding:8px 16px;border-radius:40px;cursor:pointer;transition:var(--transition);font-weight:500;font-size:0.9rem}.btn-outline-light:hover{background:var(--gray-100);border-color:var(--gray-400)}.categories-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:32px 0 24px;padding-bottom:8px;border-bottom:1px solid var(--gray-200);overflow-x:auto}.cat-btn{background:transparent;border:none;padding:8px 20px;font-size:0.9rem;font-weight:500;border-radius:40px;cursor:pointer;transition:var(--transition);color:var(--gray-600)}.cat-btn i{margin-right:8px}.cat-btn.active{background:var(--primary-color);color:white;box-shadow:0 2px 8px rgba(59,130,246,0.3)}.cat-btn:not(.active):hover{background:var(--gray-200);color:var(--gray-800)}.tools-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));gap:24px;margin:32px 0 56px}.tool-card{background:white;border-radius:var(--border-radius-xl);padding:20px;transition:var(--transition);border:1px solid var(--gray-200);cursor:pointer;display:flex;align-items:center;gap:16px;box-shadow:var(--shadow-sm)}.tool-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--primary-light)}.tool-icon{width:56px;height:56px;background:linear-gradient(135deg, #eff6ff, #dbeafe);border-radius:var(--border-radius-lg);display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--primary-color)}.tool-info h4{font-size:1.1rem;font-weight:600;margin-bottom:6px}.tool-info p{font-size:0.8rem;color:var(--gray-500)}.feature-banner{background:linear-gradient(135deg, #eef2ff 0, #fff 100%);border-radius:var(--border-radius-xl);padding:32px 40px;margin:16px 0 32px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;border:1px solid #e0e7ff}.feature-text h3{font-size:1.5rem;font-weight:700;margin-bottom:8px}.feature-text p{color:var(--gray-600)}.feature-btn{background:var(--dark-color);color:white;border:none;padding:12px 28px;border-radius:40px;font-weight:500;cursor:pointer;transition:var(--transition)}.feature-btn:hover{background:var(--gray-800);transform:scale(.98)}.tool-page-container{max-width:1200px;margin:0 auto;padding:40px 24px}.tool-header{text-align:center;margin-bottom:40px}.tool-header h1{font-size:2rem;font-weight:700;margin-bottom:12px;background:linear-gradient(135deg, var(--gray-800), var(--primary-color));background-clip:text;-webkit-background-clip:text;color:transparent}.tool-header p{color:var(--gray-500);font-size:1rem}.tool-card-panel{background:white;border-radius:var(--border-radius-xl);padding:32px;box-shadow:var(--shadow-md);border:1px solid var(--gray-200)}.textarea-input{width:100%;min-height:200px;padding:16px;border:1px solid var(--gray-300);border-radius:var(--border-radius-md);font-family:'Monaco','Menlo',monospace;font-size:14px;resize:vertical;transition:var(--transition)}.textarea-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(59,130,246,0.1)}.button-group{display:flex;gap:12px;margin:20px 0;flex-wrap:wrap}.btn-primary{background:var(--primary-color);color:white;border:none;padding:10px 24px;border-radius:var(--border-radius-md);cursor:pointer;font-weight:500;transition:var(--transition)}.btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px)}.btn-primary-sm{background:linear-gradient(135deg, var(--primary-color), var(--primary-dark));border:none;padding:8px 20px;border-radius:40px;color:white;font-size:0.8rem;cursor:pointer;transition:all 0.3s}.btn-secondary{background:var(--gray-200);color:var(--gray-700);border:none;padding:10px 24px;border-radius:var(--border-radius-md);cursor:pointer;font-weight:500;transition:var(--transition)}.btn-secondary:hover{background:var(--gray-300)}.btn-secondary-sm{background:linear-gradient(135deg, var(--gray-200), var(--gray-700));border:none;padding:8px 20px;border-radius:40px;color:white;font-size:0.8rem;cursor:pointer;transition:all 0.3s}.result-area{background:var(--gray-50);border-radius:var(--border-radius-md);padding:16px;margin-top:20px;border:1px solid var(--gray-200)}.result-label{font-weight:600;margin-bottom:12px;color:var(--gray-700)}.result-content{font-family:'Monaco','Menlo',monospace;font-size:14px;word-break:break-all;white-space:pre-wrap}footer{background:white;border-top:1px solid var(--gray-200);padding:32px 0;margin-top:60px}.footer-content{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;color:var(--gray-500);font-size:0.85rem}.footer-links{display:flex;gap:24px}.footer-links a:hover{color:var(--primary-color)}@media (max-width:768px){.container{padding:0 16px}.nav-bar{flex-direction:column;align-items:stretch}.search-box{max-width:100%}.logo-text{font-size:1.3rem}.tools-grid{grid-template-columns:1fr}.feature-banner{flex-direction:column;text-align:center;gap:20px;padding:24px}.tool-card-panel{padding:20px}.footer-content{flex-direction:column;text-align:center}}@media (max-width:480px){.tool-header h1{font-size:1.5rem}.button-group{flex-direction:column}.btn-primary,.btn-secondary{width:100%}}.toast-notification{position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--gray-800);color:white;padding:12px 24px;border-radius:48px;display:flex;align-items:center;gap:10px;font-size:0.9rem;font-weight:500;z-index:1000;opacity:0;transition:all 0.3s ease;box-shadow:var(--shadow-lg);pointer-events:none}.toast-notification.show{transform:translateX(-50%) translateY(0);opacity:1}.toast-notification i{font-size:1.1rem}.toast-notification.toast-success{background:var(--success-color)}.toast-notification.toast-success i{color:white}.toast-notification.toast-error{background:var(--danger-color)}.toast-notification.toast-error i{color:white}.toast-notification.toast-info{background:var(--primary-color)}.toast-notification.toast-info i{color:white}.toast-notification.toast-warning{background:var(--warning-color)}@media (max-width:768px){.toast-notification{bottom:20px;padding:10px 20px;font-size:0.85rem;max-width:90%;white-space:nowrap}}@media (max-width:480px){.toast-notification{white-space:normal;text-align:center;max-width:85%;border-radius:20px}}.search-btn{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:var(--primary-color);border:none;color:white;width:36px;height:36px;border-radius:40px;cursor:pointer;transition:all 0.2s}.search-btn:hover{background:var(--primary-dark)}.empty-state{text-align:center;padding:60px;color:var(--gray-400)}.empty-state i{font-size:48px;margin-bottom:16px}.search-result-empty{padding:16px;text-align:center;color:var(--gray-500)}.nav-link{color:var(--gray-600);text-decoration:none;padding:8px 16px;border-radius:40px;transition:all 0.2s}.nav-link:hover{background:var(--gray-100);color:var(--primary-color)}.logo-text span{color:var(--primary-color)}.hot-tools-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));gap:20px;margin-top:20px}.search-result{background:white;border-bottom:1px solid var(--gray-200);position:sticky;top:72px;z-index:99;box-shadow:0 4px 12px rgba(0,0,0,0.05)}.search-result-header{display:flex;justify-content:space-between;align-items:center;padding:12px 0;font-weight:500}.search-result-list{display:flex;flex-wrap:wrap;gap:12px;padding-bottom:16px}.search-result-item{background:var(--gray-100);padding:6px 16px;border-radius:30px;font-size:0.85rem;cursor:pointer;transition:all 0.2s}.search-result-item:hover{background:var(--primary-color);color:white}.search-result #closeSearch{border:none;cursor:pointer}footer .copy{font-size:14px;text-align:center}.float-toolbar{position:fixed;bottom:80px;right:20px;z-index:1000;display:flex;flex-direction:column;gap:10px}.toolbar-item{width:48px;height:48px;background:white;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s ease;box-shadow:0 4px 15px rgba(0,0,0,0.1);border:1px solid rgba(0,0,0,0.05);position:relative;color:var(--gray-700)}.toolbar-item i{font-size:1.2rem;margin-bottom:2px}.toolbar-label{font-size:0.55rem;font-weight:500}.toolbar-item:hover{transform:translateY(-3px);background:var(--primary-color);color:white;box-shadow:0 8px 20px rgba(59,130,246,0.3)}.toolbar-divider{width:30px;height:1px;background:var(--gray-200);margin:5px auto}#backToTopBtn{opacity:0;visibility:hidden;transition:all 0.3s}#backToTopBtn.show{opacity:1;visibility:visible}.share-panel,.feedback-panel,.fontscale-panel{position:fixed;bottom:200px;right:80px;width:280px;background:white;border-radius:16px;box-shadow:0 20px 40px rgba(0,0,0,0.15);z-index:1001;opacity:0;visibility:hidden;transform:translateX(20px);transition:all 0.3s ease;border:1px solid var(--gray-200)}.share-panel.show,.feedback-panel.show,.fontscale-panel.show{opacity:1;visibility:visible;transform:translateX(0)}.share-header,.feedback-header,.fontscale-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--gray-200);font-weight:600;background:linear-gradient(135deg, var(--gray-50), #fff);border-radius:16px 16px 0 0}.share-close,.feedback-close,.fontscale-close{background:transparent;border:none;font-size:1rem;cursor:pointer;color:var(--gray-500);padding:4px}.share-content{display:grid;grid-template-columns:repeat(3, 1fr);gap:12px;padding:16px}.share-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;border-radius:12px;cursor:pointer;transition:all 0.2s;background:var(--gray-50)}.share-item i{font-size:1.4rem}.share-item span{font-size:0.7rem;color:var(--gray-600)}.share-item:hover{background:var(--primary-color);color:white;transform:translateY(-2px)}.share-item:hover span{color:white}.feedback-body{padding:16px}.feedback-type{display:flex;gap:16px;margin-bottom:16px}.feedback-type label{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:0.85rem}.feedback-textarea{width:100%;min-height:100px;padding:10px;border:1px solid var(--gray-300);border-radius:8px;resize:vertical;font-family:inherit;margin-bottom:12px}.feedback-contact{margin-bottom:16px}.feedback-contact input{width:100%;padding:8px 12px;border:1px solid var(--gray-300);border-radius:8px}.feedback-actions{display:flex;gap:12px;justify-content:flex-end}.fontscale-body{padding:16px}.fontscale-presets{display:flex;gap:12px;margin-bottom:20px;justify-content:center}.fontscale-preset{width:50px;padding:8px 0;background:var(--gray-100);border:1px solid var(--gray-200);border-radius:30px;cursor:pointer;transition:all 0.2s;font-weight:500}.fontscale-preset.active{background:var(--primary-color);color:white;border-color:var(--primary-color)}.fontscale-slider{display:flex;align-items:center;gap:15px;margin-bottom:20px}.fontscale-slider span{color:var(--gray-600);font-weight:500}.fontscale-slider input{flex:1}.fontscale-reset{text-align:center}.float-toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--gray-800);color:white;padding:10px 20px;border-radius:40px;display:flex;align-items:center;gap:10px;font-size:0.85rem;z-index:2000;opacity:0;transition:all 0.3s ease;white-space:nowrap;box-shadow:0 4px 15px rgba(0,0,0,0.2)}.float-toast.show{transform:translateX(-50%) translateY(0);opacity:1}.float-toast.toast-success{background:#10b981}.float-toast.toast-error{background:#ef4444}.float-toast.toast-info{background:var(--primary-color)}body.dark-mode{background:#1a1a2e;color:#e0e0e0}body.dark-mode .header,body.dark-mode .tool-card-panel,body.dark-mode .editor-panel,body.dark-mode .result-area,body.dark-mode .share-panel,body.dark-mode .feedback-panel,body.dark-mode .fontscale-panel{background:#2d2d44;border-color:#3d3d5c}body.dark-mode .toolbar-item{background:#2d2d44;color:#e0e0e0;border-color:#3d3d5c}body.dark-mode .toolbar-item:hover{background:var(--primary-color);color:white}body.dark-mode .share-item{background:#3d3d5c;color:#e0e0e0}body.dark-mode .feedback-textarea,body.dark-mode .feedback-contact input{background:#3d3d5c;border-color:#4d4d6c;color:#e0e0e0}@media (max-width:768px){.float-toolbar{bottom:20px;right:15px;gap:8px}.toolbar-item{width:42px;height:42px}.toolbar-item i{font-size:1rem}.toolbar-label{font-size:0.5rem}.share-panel,.feedback-panel,.fontscale-panel{width:260px;bottom:auto;top:50%;right:20px;transform:translateY(-50%)}.share-panel.show,.feedback-panel.show,.fontscale-panel.show{transform:translateY(-50%)}.float-toast{white-space:normal;text-align:center;max-width:85%;line-height:1.4}}