body{font-family:"Inter",sans-serif;background:linear-gradient(160deg, #f0f4ff 0%, #e8eeff 40%, #f5f0ff 100%)}.hero-section{padding:100px 0 70px;background:linear-gradient(135deg, #4361ee 0%, #3a0ca3 50%, #7209b7 100%);color:#fff;position:relative;overflow:hidden}.hero-section::after{content:"";position:absolute;bottom:-2px;left:0;right:0;height:50px;background:linear-gradient(160deg, #f0f4ff 0%, #e8eeff 40%, #f5f0ff 100%);clip-path:ellipse(55% 100% at 50% 100%)}.hero-title{font-size:clamp(1.6rem,3.5vw,2.5rem);font-weight:800;margin-bottom:10px}.hero-desc{font-size:1rem;opacity:.9;max-width:560px}.tool-wrapper{margin-top:-25px;position:relative;z-index:10;padding-bottom:2rem}.tool-card{background:#fff;border-radius:20px;padding:2rem;box-shadow:0 4px 24px rgba(67,97,238,.08);border:1px solid rgba(67,97,238,.08)}.tab-bar{display:flex;gap:0;margin-bottom:1.5rem;border-bottom:2px solid #eef2f6}.input-tab{padding:10px 24px;cursor:pointer;border:none;background:none;font-size:.9rem;font-weight:600;color:#94a3b8;transition:all .2s;border-bottom:2px solid rgba(0,0,0,0);margin-bottom:-2px}.input-tab.active{color:#4361ee;border-bottom-color:#4361ee}.input-tab:hover{color:#4361ee}.upload-zone{border:2.5px dashed rgba(67,97,238,.3);border-radius:14px;padding:2rem 1.2rem;text-align:center;background:rgba(67,97,238,.03);cursor:pointer;transition:all .3s;margin-bottom:1rem}.upload-zone:hover{border-color:#4361ee;background:rgba(67,97,238,.07)}#htmlCode{font-family:"Courier New",monospace;min-height:220px;width:100%;padding:14px;border:2px solid #e2e8f0;border-radius:10px;font-size:13px;resize:vertical;transition:border-color .3s;background:#1a1a2e;color:#e0e0e0;tab-size:2;white-space:pre;overflow-x:auto}#htmlCode:focus{border-color:#4361ee;outline:none}.settings-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(170px, 1fr));gap:12px;margin:1rem 0}.setting-card{background:#f8fafc;border-radius:10px;padding:12px 14px;border:1px solid #eef2f6}.setting-card label{font-size:.8rem;font-weight:600;color:#475569;display:block;margin-bottom:6px}.setting-card label i{width:16px;margin-right:6px;color:#4361ee}.setting-card select,.setting-card input[type=checkbox]{width:100%;padding:5px 8px;border:1px solid #d1d9e6;border-radius:6px;font-size:.85rem}.checkbox-group{display:flex;flex-wrap:wrap;gap:8px}.checkbox-group label{display:flex;align-items:center;gap:6px;font-weight:400;font-size:.82rem;cursor:pointer;color:#334155}.checkbox-group input{width:auto}.preview-wrap{background:#1a1a2e;border-radius:10px;overflow:hidden;margin-top:1rem;border:1px solid #e2e8f0}.preview-header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:hsla(0,0%,100%,.05);border-bottom:1px solid hsla(0,0%,100%,.08)}.preview-header span{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#89a}#previewBody{min-height:150px;overflow:auto}.progress-wrap{margin-top:16px}.progress{height:8px;border-radius:8px;background:#eef2f6;overflow:hidden}.progress-bar{height:100%;width:0%;border-radius:8px;background:linear-gradient(90deg, #4361ee, #7209b7);transition:width .3s}.loading-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:9999;backdrop-filter:blur(4px)}.loading-overlay.active{display:flex}.loader-box{background:#fff;border-radius:16px;padding:2.5rem;text-align:center;max-width:340px;box-shadow:0 20px 60px rgba(0,0,0,.2)}.spinner{width:44px;height:44px;border:4px solid #eef2f6;border-top-color:#4361ee;border-radius:50%;animation:spin .7s linear infinite;margin:0 auto 16px}@keyframes spin{to{transform:rotate(360deg)}}.notification{position:fixed;top:20px;right:20px;background:#1e293b;color:#fff;padding:14px 22px;border-radius:12px;font-size:.9rem;box-shadow:0 8px 30px rgba(0,0,0,.2);transform:translateY(-20px);opacity:0;transition:all .3s;z-index:10000;max-width:380px}.notification.show{transform:translateY(0);opacity:1}.notification.n-success{background:#059669}.notification.n-error{background:#dc2626}.notification.n-warning{background:#d97706}.content-section{padding:30px 0}.content-card{background:#fff;border-radius:20px;padding:36px;margin-bottom:28px;box-shadow:0 4px 24px rgba(67,97,238,.08);border:1px solid rgba(67,97,238,.08)}.content-card h2{font-size:1.3rem;margin-bottom:14px}.content-card p{color:#475569;margin-bottom:12px;line-height:1.8}.content-card ul{color:#475569;margin-bottom:12px;padding-left:20px}.content-card ul li{margin-bottom:5px}.related-tools{padding:30px 0}.related-tools h2{text-align:center;font-size:1.4rem;margin-bottom:6px}.related-tools>p{text-align:center;color:#64748b;margin-bottom:24px}.related-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(170px, 1fr));gap:14px}.related-card{background:#fff;border:1px solid #eef2f6;border-radius:14px;padding:16px;text-align:center;text-decoration:none;transition:all .3s;display:flex;flex-direction:column;align-items:center;gap:6px}.related-card:hover{border-color:#4361ee;box-shadow:0 4px 16px rgba(67,97,238,.1);transform:translateY(-2px)}.related-icon{font-size:1.6rem;color:#4361ee}.related-name{font-weight:700;font-size:.85rem;color:#1e293b}.related-desc{font-size:.75rem;color:#64748b;line-height:1.3}.case-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));gap:16px;margin-top:12px}.case-card{background:#f8fafc;border-radius:12px;padding:18px;border:1px solid #eef2f6}.case-number{width:28px;height:28px;background:linear-gradient(135deg, #4361ee, #7209b7);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;margin-bottom:8px}.case-card h3{font-size:.95rem;margin-bottom:6px;color:#1e293b}.case-detail{font-size:.82rem;color:#475569;margin-bottom:4px}.faq-list{max-width:800px;margin:0 auto}.faq-item{border:1px solid #eef2f6;border-radius:10px;margin-bottom:8px;overflow:hidden}.faq-question{width:100%;padding:14px 18px;background:#fff;border:none;display:flex;justify-content:space-between;align-items:center;font-size:.9rem;font-weight:600;color:#1e293b;cursor:pointer;text-align:left}.faq-question:hover{background:#f8fafc}.faq-toggle{transition:transform .3s;font-size:.8rem;color:#94a3b8}.faq-item.open .faq-toggle{transform:rotate(180deg)}.faq-answer{padding:0 18px;max-height:0;overflow:hidden;transition:all .3s}.faq-item.open .faq-answer{max-height:600px;padding:0 18px 14px}.faq-answer div{font-size:.88rem;color:#475569;line-height:1.7}.usage-guide{max-width:800px;margin:0 auto}.usage-step{display:flex;gap:16px;margin-bottom:18px;align-items:flex-start}.usage-step-num{width:32px;height:32px;min-width:32px;background:linear-gradient(135deg, #4361ee, #7209b7);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700}.usage-step-content h3{font-size:.95rem;margin-bottom:4px;color:#1e293b}.usage-step-content p{font-size:.85rem;color:#64748b;margin:0}.trust-bar{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-bottom:28px}.trust-item{display:flex;align-items:center;gap:8px;font-size:.85rem;color:#475569}.trust-item i{color:#4361ee;font-size:1rem}.url-input-group{display:flex;gap:8px;margin-bottom:1rem}.url-input-group input{flex:1;padding:10px 14px;border:2px solid #e2e8f0;border-radius:10px;font-size:.9rem;transition:border-color .3s}.url-input-group input:focus{border-color:#4361ee;outline:none}.examples-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:1rem;justify-content:center}.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:8px;border:none;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-primary{background:#4361ee;color:#fff}.btn-primary:hover{background:#3651d4}.btn-success{background:#059669;color:#fff}.btn-success:hover{background:#047857}.btn-outline{background:rgba(0,0,0,0);border:2px solid rgba(67,97,238,.3);color:#4361ee}.btn-outline:hover{background:rgba(67,97,238,.06);border-color:#4361ee}.btn-sm{padding:6px 14px;font-size:.8rem}.btn-lg{padding:12px 28px;font-size:.95rem}.w-100{width:100%}.d-none{display:none !important}.text-center{text-align:center}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.gap-2{gap:8px}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.success-box{background:linear-gradient(135deg, #059669, #10b981);border-radius:14px;padding:24px;text-align:center;color:#fff;margin-top:1rem}.success-box h4{color:#fff;margin-bottom:4px}.success-box p{color:hsla(0,0%,100%,.9);margin-bottom:12px;font-size:.9rem}#backToTop{position:fixed;bottom:30px;right:30px;width:44px;height:44px;border-radius:50%;background:#4361ee;color:#fff;border:none;font-size:1.2rem;cursor:pointer;box-shadow:0 4px 16px rgba(67,97,238,.3);opacity:0;transform:translateY(20px);transition:all .3s;z-index:999}.show{opacity:1 !important;transform:translateY(0) !important}@media(max-width: 768px){.tool-card{padding:1.2rem}}.settings-grid{grid-template-columns:1fr 1fr}.hero-section{padding:70px 0 50px}#app-content[data-theme=light]{--app-bg:#f0f4ff;--card-bg:#fff;--card-border:#e2e8f0;--text-primary:#1e293b;--text-secondary:#475569;--section-bg:#f8fafc}#app-content[data-theme=dark]{--app-bg:#0f172a;--card-bg:#1e293b;--card-border:#334155;--text-primary:#f1f5f9;--text-secondary:#94a3b8;--section-bg:#1e293b}#app-content[data-theme=light] .tool-card,#app-content[data-theme=dark] .tool-card{background:var(--card-bg);border-color:var(--card-border)}#app-content[data-theme=light] .content-card,#app-content[data-theme=dark] .content-card{background:var(--card-bg);border-color:var(--card-border);color:var(--text-primary)}#app-content[data-theme=light] .content-card h2,#app-content[data-theme=dark] .content-card h2,#app-content[data-theme=light] .content-card h3,#app-content[data-theme=dark] .content-card h3{color:var(--text-primary)}#app-content[data-theme=light] .content-card p,#app-content[data-theme=dark] .content-card p,#app-content[data-theme=light] .content-card li,#app-content[data-theme=dark] .content-card li{color:var(--text-secondary)}#app-content[data-theme=light] .setting-card,#app-content[data-theme=dark] .setting-card{background:var(--section-bg);border-color:var(--card-border)}#app-content[data-theme=light] .setting-card select{background:#fff;color:var(--text-primary);border-color:#d1d9e6}#app-content[data-theme=dark] .setting-card select{background:#334155;color:#f1f5f9;border-color:#475569}#app-content[data-theme=light] .setting-card label,#app-content[data-theme=dark] .setting-card label{color:var(--text-secondary)}#app-content[data-theme=light] .checkbox-group label,#app-content[data-theme=dark] .checkbox-group label{color:var(--text-secondary)}#app-content[data-theme=light] .tab-bar,#app-content[data-theme=dark] .tab-bar{border-bottom-color:var(--card-border)}#app-content[data-theme=light] .input-tab,#app-content[data-theme=dark] .input-tab{color:var(--text-secondary)}#app-content[data-theme=light] .input-tab.active,#app-content[data-theme=dark] .input-tab.active{color:#4361ee}#app-content[data-theme=light] .faq-section .faq-question,#app-content[data-theme=dark] .faq-section .faq-question{color:var(--text-primary);background:var(--card-bg)}#app-content[data-theme=light] .faq-section .faq-answer,#app-content[data-theme=dark] .faq-section .faq-answer{color:var(--text-secondary)}#app-content[data-theme=light] .faq-section .faq-answer div,#app-content[data-theme=dark] .faq-section .faq-answer div{color:var(--text-secondary)}#app-content[data-theme=light] .faq-item,#app-content[data-theme=dark] .faq-item{border-color:var(--card-border)}#app-content[data-theme=light] .usage-step-content h3,#app-content[data-theme=dark] .usage-step-content h3{color:var(--text-primary)}#app-content[data-theme=light] .usage-step-content p,#app-content[data-theme=dark] .usage-step-content p{color:var(--text-secondary)}#app-content[data-theme=light] .trust-bar,#app-content[data-theme=dark] .trust-bar{background:var(--card-bg);border-color:var(--card-border)}#app-content[data-theme=light] .trust-bar span,#app-content[data-theme=dark] .trust-bar span{color:var(--text-secondary)}#app-content[data-theme=light] .related-card,#app-content[data-theme=dark] .related-card{background:var(--card-bg);border-color:var(--card-border)}#app-content[data-theme=light] .related-card .related-name,#app-content[data-theme=dark] .related-card .related-name{color:var(--text-primary)}#app-content[data-theme=light] .related-card .related-desc,#app-content[data-theme=dark] .related-card .related-desc{color:var(--text-secondary)}#app-content[data-theme=light] .case-card,#app-content[data-theme=dark] .case-card{background:var(--section-bg);border-color:var(--card-border)}#app-content[data-theme=light] .case-card h3,#app-content[data-theme=dark] .case-card h3{color:var(--text-primary)}#app-content[data-theme=light] .case-card .case-detail,#app-content[data-theme=dark] .case-card .case-detail{color:var(--text-secondary)}#app-content[data-theme=light] .privacy-note p,#app-content[data-theme=dark] .privacy-note p{color:var(--text-secondary)}#app-content[data-theme=light] .url-input-group input,#app-content[data-theme=light] .multi-url-input input{background:var(--card-bg);border:2px solid var(--card-border) !important;color:var(--text-primary)}#app-content[data-theme=dark] .url-input-group input,#app-content[data-theme=dark] .multi-url-input input{background:var(--card-bg);border:2px solid var(--card-border) !important;color:var(--text-primary)}#app-content[data-theme=light] .preview-wrap,#app-content[data-theme=dark] .preview-wrap{background:var(--card-bg);border-color:var(--card-border)}#app-content[data-theme=light] .preview-header span,#app-content[data-theme=dark] .preview-header span{color:var(--text-secondary)}#app-content[data-theme=light] .upload-zone,#app-content[data-theme=dark] .upload-zone{background:rgba(67,97,238,.04);border-color:rgba(67,97,238,.2)}.theme-inline-btn{width:38px;height:38px;border-radius:8px;border:2px solid #e2e8f0;background:#fff;color:#1e293b;font-size:16px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;flex-shrink:0}#app-content[data-theme=light] .theme-inline-btn{border-color:#e2e8f0;background:#fff;color:#1e293b}#app-content[data-theme=dark] .theme-inline-btn{border-color:#334155;background:#1e293b;color:#f1f5f9}.theme-inline-btn:hover{border-color:#4361ee}.theme-inline-btn .fa-sun{display:none}#app-content[data-theme=light] .theme-inline-btn .fa-sun{display:inline}#app-content[data-theme=light] .theme-inline-btn .fa-moon{display:none}