:root{--bg-page:#f4f4f4;--bg-white:#ffffff;--bg-secondary:#f8f9fa;--text-primary:#333333;--text-secondary:#666666;--text-light:#999999;--border:#dddddd;--border-dark:#cccccc;--primary:#4a90e2;--primary-hover:#357abd;--primary-light:#e8f1fb;--success:#27ae60;--success-bg:#d4edda;--error:#e74c3c;--error-bg:#f8d7da;--warning:#f39c12;--warning-bg:#fff3cd;--info:#3498db;--info-bg:#d1ecf1;--shadow-sm:0 1px 2px rgba(0, 0, 0, 0.05);--shadow-md:0 2px 4px rgba(0, 0, 0, 0.1);--shadow-lg:0 4px 8px rgba(0, 0, 0, 0.15);--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--spacing-xxl:48px;--radius-sm:3px;--radius-md:5px;--radius-lg:8px;--font-xs:12px;--font-sm:13px;--font-md:14px;--font-lg:16px;--font-xl:18px;--font-xxl:24px;--font-xxxl:36px;--transition-fast:0.15s ease;--transition-normal:0.2s ease;--transition-slow:0.3s ease;--z-dropdown:100;--z-modal:200;--z-tooltip:300}.dark-mode{--bg-page:#1a1a1a;--bg-white:#2a2a2a;--bg-secondary:#222222;--text-primary:#e0e0e0;--text-secondary:#b0b0b0;--text-light:#808080;--border:#3a3a3a;--border-dark:#4a4a4a;--primary-light:#1e3a5f;--success-bg:#1e4d2b;--error-bg:#4d1f1f;--warning-bg:#4d3d1a;--info-bg:#1a3d4d;--shadow-sm:0 1px 2px rgba(0, 0, 0, 0.2);--shadow-md:0 2px 4px rgba(0, 0, 0, 0.3);--shadow-lg:0 4px 8px rgba(0, 0, 0, 0.4)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,Helvetica,sans-serif;background:var(--bg-page);color:var(--text-primary);line-height:1.6;min-height:100vh}a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,h4,h5,h6{font-weight:400;color:var(--text-primary)}h1{font-size:var(--font-xxxl)}h2{font-size:var(--font-xxl)}h3{font-size:var(--font-xl)}h4{font-size:var(--font-lg)}p{margin-bottom:var(--spacing-md);color:var(--text-secondary)}ol,ul{margin-left:var(--spacing-lg);color:var(--text-secondary)}li{margin-bottom:var(--spacing-sm)}code{font-family:'Courier New',Consolas,monospace;background:var(--bg-secondary);padding:2px 6px;border-radius:var(--radius-sm);font-size:var(--font-sm)}.container{max-width:1200px;margin:0 auto;padding:var(--spacing-lg) var(--spacing-md)}.container-fluid{width:100%;padding:var(--spacing-lg) var(--spacing-md)}.hidden{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}::selection{background:var(--primary);color:#fff}:focus-visible{outline:2px solid var(--primary);outline-offset:2px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-page)}::-webkit-scrollbar-thumb{background:var(--border-dark);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-light)}.header{background:var(--bg-white);border-bottom:2px solid var(--border);padding:var(--spacing-md) 0}.header-content{max-width:1200px;margin:0 auto;padding:0 var(--spacing-md);display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-md)}.header-logo{display:flex;align-items:center;gap:var(--spacing-sm);text-decoration:none;color:var(--primary)}.header-logo h1{font-size:var(--font-xxl);color:var(--primary)}.header-logo:hover{text-decoration:none}.header-nav{display:flex;align-items:center;gap:var(--spacing-md)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);background:var(--primary);color:#fff;border:none;padding:10px 20px;font-size:var(--font-md);font-family:inherit;cursor:pointer;border-radius:var(--radius-sm);transition:background var(--transition-fast),transform var(--transition-fast);text-decoration:none;line-height:1.4}.btn:hover{background:var(--primary-hover);text-decoration:none}.btn:active{transform:translateY(1px)}.btn-secondary{background:var(--text-secondary)}.btn-secondary:hover{background:var(--text-primary)}.btn-outline{background:0 0;border:1px solid var(--border);color:var(--text-primary)}.btn-outline:hover{background:var(--border)}.btn-success{background:var(--success)}.btn-success:hover{background:#219a52}.btn-sm{padding:6px 12px;font-size:var(--font-sm)}.btn-lg{padding:14px 28px;font-size:var(--font-lg)}.btn-icon{padding:8px;min-width:36px}.card{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--spacing-lg)}.card-hover{transition:border-color var(--transition-normal),transform var(--transition-normal)}.card-hover:hover{border-color:var(--primary);transform:translateY(-2px)}.card-header{margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-md);border-bottom:1px solid var(--border)}.card-title{font-size:var(--font-xl);color:var(--primary);margin-bottom:var(--spacing-xs)}.card-description{color:var(--text-secondary);font-size:var(--font-md);margin:0}.tool-card{display:block;text-decoration:none;color:var(--text-primary)}.tool-card h2{font-size:var(--font-xl);color:var(--primary);margin-bottom:var(--spacing-sm)}.tool-card p{color:var(--text-secondary);font-size:var(--font-md);line-height:1.6;margin:0}.tool-card:hover{text-decoration:none}.category-card{text-align:center;padding:var(--spacing-xl)}.category-card-icon{font-size:32px;margin-bottom:var(--spacing-md)}.category-card h3{font-size:var(--font-xl);color:var(--primary);margin-bottom:var(--spacing-sm)}.category-card .tool-count{font-size:var(--font-sm);color:var(--text-light)}.tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-md)}.category-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--spacing-md)}.popular-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--spacing-md)}.editor-container{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md);margin-bottom:var(--spacing-md)}.editor-section{background:var(--bg-white);border:1px solid var(--border);display:flex;flex-direction:column;border-radius:var(--radius-sm);overflow:hidden}.editor-header{background:var(--bg-secondary);padding:var(--spacing-sm) var(--spacing-md);border-bottom:1px solid var(--border);font-weight:700;color:var(--text-primary);font-size:var(--font-md)}.editor{flex:1;min-height:400px;padding:var(--spacing-md);font-family:'Courier New',Consolas,monospace;font-size:var(--font-md);border:none;resize:vertical;background:var(--bg-white);color:var(--text-primary);line-height:1.5}.editor:focus{outline:0}.editor::placeholder{color:var(--text-light)}.controls{background:var(--bg-white);padding:var(--spacing-md);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:var(--spacing-md);display:flex;flex-wrap:wrap;gap:var(--spacing-sm)}.controls-group{display:flex;gap:var(--spacing-sm);padding-right:var(--spacing-md);border-right:1px solid var(--border)}.controls-group:last-child{border-right:none;padding-right:0}.message{padding:12px var(--spacing-md);margin-bottom:var(--spacing-md);border-radius:var(--radius-sm);display:none;font-size:var(--font-md)}.message.show{display:block}.message.success{background:var(--success-bg);color:var(--success);border:1px solid var(--success);display:block}.message.error{background:var(--error-bg);color:var(--error);border:1px solid var(--error);display:block}.message.warning{background:var(--warning-bg);color:var(--warning);border:1px solid var(--warning);display:block}.message.info{background:var(--info-bg);color:var(--info);border:1px solid var(--info);display:block}.drop-zone{border:2px dashed var(--border-dark);padding:var(--spacing-lg);text-align:center;color:var(--text-secondary);margin-bottom:var(--spacing-md);background:var(--bg-white);border-radius:var(--radius-sm);transition:all var(--transition-fast)}.drop-zone.dragover{border-color:var(--primary);background:var(--primary-light);color:var(--primary)}.file-upload{display:none}.info-section{background:var(--bg-white);padding:var(--spacing-lg);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:var(--spacing-md)}.info-section h2{font-size:var(--font-xl);margin-bottom:var(--spacing-md);color:var(--text-primary)}.info-section h3{font-size:var(--font-lg);margin:var(--spacing-md) 0 var(--spacing-sm);color:var(--text-primary)}.footer{background:var(--bg-white);border-top:2px solid var(--border);padding:var(--spacing-lg) 0;margin-top:var(--spacing-xl);text-align:center;color:var(--text-secondary);font-size:var(--font-sm)}.footer p{margin:var(--spacing-xs) 0;color:var(--text-secondary)}.search-container{position:relative;max-width:600px;margin:0 auto var(--spacing-xl)}.search-input{width:100%;padding:var(--spacing-md) var(--spacing-lg);padding-left:48px;font-size:var(--font-lg);font-family:inherit;border:2px solid var(--border);border-radius:var(--radius-md);background:var(--bg-white);color:var(--text-primary);transition:border-color var(--transition-fast)}.search-input:focus{outline:0;border-color:var(--primary)}.search-input::placeholder{color:var(--text-light)}.search-icon{position:absolute;left:var(--spacing-md);top:50%;transform:translateY(-50%);color:var(--text-light);font-size:var(--font-xl)}.search-shortcut{position:absolute;right:var(--spacing-md);top:50%;transform:translateY(-50%);background:var(--bg-secondary);color:var(--text-light);padding:4px 8px;border-radius:var(--radius-sm);font-size:var(--font-xs);font-family:monospace}.search-results{position:absolute;top:100%;left:0;right:0;background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-sm);margin-top:var(--spacing-xs);max-height:400px;overflow-y:auto;z-index:var(--z-dropdown);box-shadow:var(--shadow-lg);display:none}.search-results.show{display:block}.search-result-item{padding:var(--spacing-md);border-bottom:1px solid var(--border);cursor:pointer;display:block;text-decoration:none;color:var(--text-primary)}.search-result-item:last-child{border-bottom:none}.search-result-item.active,.search-result-item:hover{background:var(--primary-light)}.search-result-item h4{font-size:var(--font-md);color:var(--primary);margin-bottom:2px}.search-result-item p{font-size:var(--font-sm);color:var(--text-secondary);margin:0}.search-result-item .category-tag{font-size:var(--font-xs);color:var(--text-light);background:var(--bg-secondary);padding:2px 6px;border-radius:var(--radius-sm);margin-left:var(--spacing-sm)}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md)}.section-title{font-size:var(--font-xxl);color:var(--text-primary)}.section-link{font-size:var(--font-md);color:var(--primary)}.badge{display:inline-block;padding:2px 8px;font-size:var(--font-xs);border-radius:var(--radius-sm);background:var(--bg-secondary);color:var(--text-secondary)}.badge-primary{background:var(--primary-light);color:var(--primary)}.badge-success{background:var(--success-bg);color:var(--success)}.privacy-badge{font-size:var(--font-sm);color:var(--success);font-weight:700;padding:6px 12px;background:var(--success-bg);border-radius:var(--radius-sm);display:inline-block}.related-tools{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--spacing-lg);margin-bottom:var(--spacing-md)}.related-tools h3{font-size:var(--font-lg);margin-bottom:var(--spacing-md);color:var(--text-primary)}.related-tools-list{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);list-style:none;margin:0;padding:0}.related-tools-list li{margin:0}.related-tools-list a{display:inline-block;padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-size:var(--font-sm);transition:all var(--transition-fast)}.related-tools-list a:hover{background:var(--primary-light);border-color:var(--primary);color:var(--primary);text-decoration:none}.theme-toggle{background:var(--bg-white);border:1px solid var(--border);padding:8px 16px;font-size:var(--font-md);color:var(--text-primary);cursor:pointer;border-radius:var(--radius-sm);font-family:inherit;transition:background var(--transition-fast)}.theme-toggle:hover{background:var(--bg-secondary)}@media (max-width:768px){.header-content{flex-direction:column;text-align:center;gap:var(--spacing-sm)}.header-nav{width:100%;justify-content:center}.editor-container{grid-template-columns:1fr}.editor{min-height:300px}.controls{justify-content:center}.controls-group{border-right:none;padding-right:0}.tools-grid{grid-template-columns:1fr}.category-grid{grid-template-columns:repeat(2,1fr)}.popular-grid{grid-template-columns:repeat(2,1fr)}.search-shortcut{display:none}}@media (max-width:480px){.category-grid{grid-template-columns:1fr}.popular-grid{grid-template-columns:1fr}.btn{padding:8px 16px;font-size:var(--font-sm)}}