:root{--bg-color:#0f172a;--surface-color:#1e293b;--surface-hover:#334155;--border-color:#334155;--text-primary:#f8fafc;--text-secondary:#94a3b8;--text-muted:#64748b;--accent:#3b82f6;--accent-hover:#2563eb;--accent-light:#3b82f626;--danger:#ef4444;--success:#22c55e;--warning:#f59e0b;--radius:12px;--radius-sm:8px;--transition:.2s ease}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-color);color:var(--text-primary);min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.6}.navbar{background:var(--surface-color);border-bottom:1px solid var(--border-color);z-index:1000;position:sticky;top:0}.nav-container{justify-content:space-between;align-items:center;max-width:1200px;height:60px;margin:0 auto;padding:0 20px;display:flex}.logo-link{color:var(--text-primary);align-items:center;gap:8px;font-size:1.25rem;font-weight:800;text-decoration:none;display:flex}.logo-link svg{flex-shrink:0;width:28px;height:28px}.logo-link span span{color:var(--accent)}.nav-links{align-items:center;gap:24px;display:flex}.nav-links a{color:var(--text-secondary);transition:color var(--transition);white-space:nowrap;font-size:.95rem;font-weight:500;text-decoration:none}.nav-links a:hover,.nav-links a.active{color:var(--accent)}.nav-lang-switcher{position:relative}.nav-lang-btn{border:1px solid var(--border-color);color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition);background:0 0;align-items:center;gap:6px;padding:6px 12px;font-size:.85rem;font-weight:500;display:flex}.nav-lang-btn:hover{border-color:var(--accent);color:var(--accent)}.nav-lang-btn svg{width:16px;height:16px}.nav-lang-dropdown{background:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--radius-sm);z-index:1001;min-width:140px;margin-top:8px;display:none;position:absolute;top:100%;right:0;overflow:hidden;box-shadow:0 8px 24px #0000004d}.nav-lang-dropdown.open{display:block}.nav-lang-dropdown a{color:var(--text-secondary);transition:all var(--transition);align-items:center;gap:8px;padding:10px 16px;font-size:.9rem;text-decoration:none;display:flex}.nav-lang-dropdown a:hover{background:var(--surface-hover);color:var(--accent)}.nav-mobile-toggle{color:var(--text-primary);cursor:pointer;background:0 0;border:none;padding:4px;display:none}.nav-mobile-toggle svg{width:24px;height:24px}.main-layout{gap:20px;max-width:1400px;margin:0 auto;padding:20px;display:flex}.sidebar-ad{display:none}.content-wrapper{flex:1;min-width:0;max-width:1000px;margin:0 auto}.ad-space{background:var(--surface-color);border:1px dashed var(--border-color);border-radius:var(--radius);text-align:center;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:24px;padding:20px;font-size:.8rem;display:none}.hero{text-align:center;padding:40px 20px 30px}.hero h1{background:linear-gradient(135deg, var(--text-primary) 0%, var(--accent) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:12px;font-size:2.5rem;font-weight:800}.hero p{color:var(--text-secondary);max-width:600px;margin:0 auto;font-size:1.1rem}.tools-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;padding:20px 0;display:grid}.tool-card{background:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--radius);color:var(--text-primary);transition:all var(--transition);flex-direction:column;align-items:flex-start;gap:12px;padding:28px 24px;text-decoration:none;display:flex;position:relative;overflow:hidden}.tool-card:before{content:"";background:var(--accent);transform-origin:0;height:3px;transition:transform var(--transition);position:absolute;top:0;left:0;right:0;transform:scaleX(0)}.tool-card:hover{border-color:var(--accent);background:var(--surface-hover);transform:translateY(-2px);box-shadow:0 8px 24px #3b82f61a}.tool-card:hover:before{transform:scaleX(1)}.tool-card-icon{background:var(--accent-light);border-radius:var(--radius-sm);flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;display:flex}.tool-card-icon svg{width:28px;height:28px;color:var(--accent);stroke:var(--accent)}.tool-card h3{margin:0;font-size:1.1rem;font-weight:600}.tool-card p{color:var(--text-secondary);margin:0;font-size:.875rem;line-height:1.5}.tool-card .tool-card-arrow{color:var(--accent);align-items:center;gap:4px;margin-top:auto;font-size:.85rem;font-weight:500;display:flex}.tool-page{padding:30px 0}.tool-header{text-align:center;margin-bottom:30px}.tool-header h1{margin-bottom:8px;font-size:2rem;font-weight:800}.tool-header p{color:var(--text-secondary);max-width:600px;margin:0 auto;font-size:1rem}.tool-container{background:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--radius);max-width:800px;margin:0 auto;padding:32px}.upload-zone{border:2px dashed var(--border-color);border-radius:var(--radius);text-align:center;cursor:pointer;transition:all var(--transition);margin-bottom:20px;padding:40px 20px}.upload-zone:hover,.upload-zone.dragover{border-color:var(--accent);background:var(--accent-light)}.upload-zone svg{width:48px;height:48px;color:var(--text-muted);margin-bottom:12px}.upload-zone p{color:var(--text-secondary);font-size:.95rem}.upload-zone .upload-formats{color:var(--text-muted);margin-top:8px;font-size:.8rem}.btn{border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition);border:none;justify-content:center;align-items:center;gap:8px;padding:10px 24px;font-size:.95rem;font-weight:600;text-decoration:none;display:inline-flex}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{border:1px solid var(--border-color);color:var(--text-secondary);background:0 0}.btn-secondary:hover{border-color:var(--accent);color:var(--accent)}.btn-danger{background:var(--danger);color:#fff}.btn-block{width:100%}.input-group{gap:10px;max-width:600px;margin:0 auto;display:flex}.input-group input{background:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);transition:border-color var(--transition);outline:none;flex:1;padding:12px 16px;font-size:.95rem}.input-group input:focus{border-color:var(--accent)}select.form-control,input.form-control{background:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);transition:border-color var(--transition);outline:none;padding:10px 14px;font-size:.9rem}select.form-control:focus,input.form-control:focus{border-color:var(--accent)}label.form-label{color:var(--text-secondary);margin-bottom:6px;font-size:.85rem;font-weight:500;display:block}.form-row{flex-wrap:wrap;gap:16px;margin-bottom:16px;display:flex}.form-row>div{flex:1;min-width:150px}.progress-bar{background:var(--bg-color);border-radius:3px;width:100%;height:6px;margin:16px 0;overflow:hidden}.progress-bar-fill{background:var(--accent);border-radius:3px;height:100%;transition:width .3s}.status-message{border-radius:var(--radius-sm);margin:16px 0;padding:12px 16px;font-size:.9rem}.status-info{background:var(--accent-light);color:var(--accent);border:1px solid var(--accent)}.status-success{color:var(--success);border:1px solid var(--success);background:#22c55e1a}.status-error{color:var(--danger);border:1px solid var(--danger);background:#ef44441a}.status-warning{color:var(--warning);border:1px solid var(--warning);background:#f59e0b1a}.result-area{margin-top:24px}.result-item{background:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--radius-sm);flex-wrap:wrap;align-items:center;gap:16px;margin-bottom:12px;padding:16px;display:flex}.result-item img{border-radius:var(--radius-sm);-o-object-fit:cover;object-fit:cover;max-width:120px;max-height:120px}.result-item .result-info{flex:1;min-width:200px}.result-item .result-info h4{margin-bottom:4px;font-size:.95rem}.result-item .result-info p{color:var(--text-secondary);font-size:.8rem}.result-item .result-actions{gap:8px;display:flex}.media-gallery{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-top:20px;display:grid}.media-item{background:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--radius-sm);transition:border-color var(--transition);overflow:hidden}.media-item:hover{border-color:var(--accent)}.media-item video,.media-item img{width:100%;display:block}.media-item .media-info{padding:12px}.media-item .media-info p{color:var(--text-secondary);margin-bottom:8px;font-size:.8rem}.article-box{background:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--radius);margin-bottom:24px;padding:32px}.article-box h1{margin-bottom:12px;font-size:1.8rem}.article-box h2{color:var(--text-primary);margin:24px 0 12px;font-size:1.3rem}.article-box h3{margin:20px 0 8px;font-size:1.1rem}.article-box p{color:var(--text-secondary);margin-bottom:12px}.article-box ul,.article-box ol{margin:12px 0 12px 24px}.article-box li{color:var(--text-secondary);margin-bottom:8px}.article-box a{color:var(--accent);text-decoration:none}.article-box a:hover{text-decoration:underline}.article-box strong{color:var(--text-primary)}.legal-warning{border:1px solid var(--warning);border-radius:var(--radius-sm);background:#f59e0b14;margin:20px 0;padding:16px}.legal-warning h3{color:var(--warning);margin-top:0}.legal-warning p{color:var(--text-secondary);margin-bottom:0}.blog-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-top:20px;display:grid}.blog-card{background:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--radius);color:var(--text-primary);transition:all var(--transition);text-decoration:none;overflow:hidden}.blog-card:hover{border-color:var(--accent);transform:translateY(-2px)}.blog-card .blog-card-body{padding:20px}.blog-card .blog-card-body h3{margin-bottom:8px;font-size:1.1rem}.blog-card .blog-card-body p{color:var(--text-secondary);font-size:.875rem}.blog-card .blog-card-body .blog-tag{color:var(--accent);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;font-size:.75rem;font-weight:600;display:inline-block}.faq-item{background:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--radius-sm);margin-bottom:12px;overflow:hidden}.faq-question{cursor:pointer;transition:background var(--transition);justify-content:space-between;align-items:center;padding:16px 20px;font-size:.95rem;font-weight:600;display:flex}.faq-question:hover{background:var(--surface-hover)}.faq-question .faq-toggle{transition:transform var(--transition);flex-shrink:0;margin-left:12px}.faq-question.open .faq-toggle{transform:rotate(180deg)}.faq-answer{max-height:0;transition:max-height .3s;overflow:hidden}.faq-answer.open{max-height:500px}.faq-answer p{color:var(--text-secondary);padding:0 20px 16px;font-size:.9rem}footer{background:var(--surface-color);border-top:1px solid var(--border-color);margin-top:40px;padding:30px 20px}.footer-content{text-align:center;max-width:1000px;margin:0 auto}.footer-content p{color:var(--text-secondary);margin-bottom:10px;font-size:.85rem}.footer-content a{color:var(--accent);text-decoration:none}.footer-content a:hover{text-decoration:underline}.footer-content .copyright{opacity:.6;margin-top:20px;font-size:.8rem}.footer-tools{flex-wrap:wrap;justify-content:center;gap:8px 16px;margin:16px 0;display:flex}.footer-tools a{color:var(--text-secondary);font-size:.8rem}.footer-tools a:hover{color:var(--accent)}.cookie-banner{background:var(--surface-color);border-top:1px solid var(--border-color);text-align:center;z-index:9999;width:100%;padding:20px;display:none;position:fixed;bottom:0;left:0;box-shadow:0 -4px 20px #0000004d}.cookie-banner-inner{flex-direction:column;align-items:center;gap:15px;max-width:1000px;margin:0 auto;display:flex}.cookie-banner p{color:var(--text-secondary);margin:0;font-size:.9rem;line-height:1.5}.cookie-banner a{color:var(--accent);text-decoration:none}.cookie-banner-buttons{gap:10px;display:flex}.privacy-badge{border:1px solid var(--success);color:var(--success);background:#22c55e1a;border-radius:20px;align-items:center;gap:6px;margin-bottom:20px;padding:6px 14px;font-size:.8rem;font-weight:500;display:inline-flex}.privacy-badge svg{width:14px;height:14px}.palette-grid{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:20px;display:flex}.palette-swatch{text-align:center;width:80px}.palette-swatch .swatch-color{border-radius:var(--radius-sm);border:2px solid var(--border-color);cursor:pointer;width:80px;height:80px;transition:transform var(--transition);margin-bottom:6px}.palette-swatch .swatch-color:hover{transform:scale(1.05)}.palette-swatch .swatch-hex{color:var(--text-secondary);font-family:monospace;font-size:.75rem}.cropper-container{max-width:100%;margin:20px 0}.cropper-preview{flex-wrap:wrap;gap:20px;margin-top:16px;display:flex}.cropper-preview-item{text-align:center}.cropper-preview-item .preview-img{border:2px solid var(--border-color);border-radius:var(--radius-sm);overflow:hidden}.cropper-preview-item p{color:var(--text-secondary);margin-top:6px;font-size:.8rem}#qr-canvas{border-radius:var(--radius-sm);background:#fff;margin:20px auto;padding:20px;display:block}#qr-reader{border-radius:var(--radius);width:100%;max-width:400px;margin:20px auto;overflow:hidden}@media (width<=1024px){.sidebar-ad{display:none}}@media (width<=768px){.nav-links{background:var(--surface-color);border-bottom:1px solid var(--border-color);flex-direction:column;gap:16px;padding:20px;display:none;position:absolute;top:60px;left:0;right:0}.nav-links.open,.nav-mobile-toggle{display:flex}.hero h1{font-size:1.8rem}.hero p{font-size:1rem}.tools-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}.tool-container{padding:20px}.input-group,.form-row{flex-direction:column}.article-box{padding:20px}.article-box h1{font-size:1.4rem}}@media (width<=480px){.tools-grid,.blog-grid{grid-template-columns:1fr}.main-layout{padding:10px}.hero{padding:20px 10px}}.seo-content{max-width:720px;color:var(--text-secondary);margin:40px auto;padding:0 20px;line-height:1.7}.seo-content h2{color:var(--text-primary);margin:32px 0 12px;font-size:1.4rem;font-weight:700}.seo-content h2:first-child{margin-top:0}.seo-content ol,.seo-content ul{margin:8px 0 16px;padding-left:24px}.seo-content li{margin-bottom:8px}.seo-content p{margin:8px 0}
