*{margin:0;padding:0;box-sizing:border-box}:root{--primary-color:#2d7a4e;--primary-dark:#1e5436;--primary-light:#3a9460;--accent-color:#4caf50;--accent-light:#81c784;--bg-primary:#fff;--bg-secondary:#f8f9fa;--bg-tertiary:#e9ecef;--border-color:#dee2e6;--text-primary:#212529;--text-secondary:#6c757d;--text-light:#adb5bd;--success:#28a745;--danger:#dc3545;--warning:#ffc107;--info:#17a2b8;--shadow-sm:0 1px 2px rgba(0,0,0,0.05);--shadow-md:0 4px 6px rgba(0,0,0,0.07);--shadow-lg:0 10px 15px rgba(0,0,0,0.1);--transition:all .3s ease;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px}body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;font-size:14px;line-height:1.5;color:var(--text-primary);background-color:var(--bg-secondary);overflow-x:hidden}.top-nav{background:white;border-bottom:1px solid var(--border-color);padding:var(--spacing-md) 0;position:sticky;top:0;z-index:1001;box-shadow:var(--shadow-sm)}.top-nav-container{max-width:1920px;margin:0 auto;padding:0 var(--spacing-lg);display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-lg)}.nav-menu{display:flex;gap:var(--spacing-lg);align-items:center}.nav-link{color:var(--text-primary);text-decoration:none;font-weight:500;font-size:15px;padding:var(--spacing-sm) var(--spacing-md);border-radius:6px;transition:var(--transition)}.nav-link:hover{background:var(--bg-secondary);color:var(--primary-color)}.nav-link.active{background:var(--primary-color);color:white}.nav-actions{display:flex;gap:var(--spacing-sm)}.mobile-menu-toggle{display:none;background:0;border:0;font-size:24px;color:var(--text-primary);cursor:pointer;padding:var(--spacing-sm);transition:var(--transition)}.mobile-menu-toggle:hover{color:var(--primary-color);transform:scale(1.1)}.header{background:linear-gradient(135deg,var(--primary-color) 0,var(--primary-dark) 100%);color:white;padding:var(--spacing-lg) 0;box-shadow:var(--shadow-md)}.header-title{text-align:center;margin-bottom:var(--spacing-lg)}.header-logo{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:var(--spacing-md)}.header-logo-icon{width:70px;height:70px;flex-shrink:0;animation:headerFloat 3s ease-in-out infinite;filter:drop-shadow(0 6px 12px rgba(0,0,0,0.3))}@keyframes headerFloat{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-8px) rotate(-3deg)}75%{transform:translateY(-5px) rotate(3deg)}}.header-logo-icon svg{width:100%;height:100%;filter:drop-shadow(0 4px 10px rgba(255,255,255,0.3))}.header-title h1{font-size:48px;font-weight:900;color:white;margin:0;text-shadow:0 4px 8px rgba(0,0,0,0.3);letter-spacing:-1px;background:linear-gradient(180deg,#fff 0,#e0f2e9 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;position:relative;animation:titleShine 3s ease-in-out infinite}@keyframes titleShine{0%,100%{filter:brightness(1)}50%{filter:brightness(1.2)}}.header-title p{font-size:16px;opacity:.95;color:white}.header-container{max-width:1920px;margin:0 auto;padding:0 var(--spacing-lg);display:flex;flex-direction:column;align-items:center;gap:var(--spacing-lg)}.header-actions{display:flex;gap:var(--spacing-sm);align-items:center}.logo{display:flex;align-items:center;gap:12px;font-size:24px;font-weight:700;cursor:pointer;transition:var(--transition);text-decoration:none;position:relative}.logo:hover{transform:translateY(-2px)}.logo-icon{width:42px;height:42px;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:var(--transition);animation:subtleFloat 3s ease-in-out infinite}@keyframes subtleFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-2deg)}}.logo:hover .logo-icon{animation:logoSpin .6s ease}@keyframes logoSpin{0%{transform:rotate(0) scale(1)}50%{transform:rotate(-10deg) scale(1.1)}100%{transform:rotate(0) scale(1)}}.logo-icon svg{width:100%;height:100%;filter:drop-shadow(0 3px 6px rgba(45,122,78,0.3))}.logo-text{color:var(--text-primary);font-size:26px;letter-spacing:-1px;font-weight:800;background:linear-gradient(135deg,var(--primary-color),var(--primary-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;position:relative;text-shadow:0 2px 4px rgba(45,122,78,0.1)}.logo-accent{color:var(--accent-color);font-weight:900;font-size:28px;display:inline-block;animation:accentPulse 2s ease-in-out infinite;background:linear-gradient(135deg,#4caf50,#81c784);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}@keyframes accentPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}.cleaning-options{display:flex;gap:var(--spacing-sm);flex-wrap:wrap;justify-content:center;max-width:1200px}.pill-option{display:inline-flex;align-items:center;cursor:pointer;user-select:none}.pill-option input[type="checkbox"]{display:none}.pill-text{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:20px;color:white;font-size:12px;font-weight:500;transition:var(--transition);white-space:nowrap}.pill-option:hover .pill-text{background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.3);transform:translateY(-1px)}.pill-option input[type="checkbox"]:checked+.pill-text{background:var(--accent-color);border-color:var(--accent-light);box-shadow:0 2px 8px rgba(76,175,80,0.3)}.pill-option input[type="checkbox"]:checked+.pill-text i{animation:iconPulse .5s ease}@keyframes iconPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}.header-right{display:flex;gap:var(--spacing-sm);align-items:center}.btn-clean{display:flex;align-items:center;gap:var(--spacing-sm);padding:10px 20px;background:var(--accent-color);color:white;border:0;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:var(--transition);box-shadow:0 2px 8px rgba(76,175,80,0.3)}.btn-clean:hover{background:var(--accent-light);transform:translateY(-2px);box-shadow:0 4px 12px rgba(76,175,80,0.4)}.btn-clean:active{transform:translateY(0)}.btn-help{padding:10px;background:rgba(255,255,255,0.1);color:white;border:1px solid rgba(255,255,255,0.2);border-radius:8px;cursor:pointer;transition:var(--transition);font-size:18px;width:40px;height:40px;display:flex;align-items:center;justify-content:center}.btn-help:hover{background:rgba(255,255,255,0.2);transform:scale(1.1)}.main-container{display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:600px;max-width:1920px;margin:0 auto;background:var(--bg-secondary)}#converter{scroll-margin-top:80px}.panel{display:flex;flex-direction:column;background:var(--bg-primary);border:1px solid var(--border-color);overflow:hidden}.left-panel{border-right:2px solid var(--border-color)}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md);background:var(--bg-secondary);border-bottom:1px solid var(--border-color);flex-shrink:0}.panel-title{display:flex;align-items:center;gap:var(--spacing-sm);font-size:16px;font-weight:600;color:var(--text-primary)}.panel-title i{color:var(--primary-color);font-size:18px}.toolbar{display:flex;gap:var(--spacing-xs);align-items:center;flex-wrap:wrap}.tool-btn{padding:6px 10px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:4px;cursor:pointer;transition:var(--transition);color:var(--text-primary);font-size:14px}.tool-btn:hover{background:var(--primary-light);color:white;border-color:var(--primary-light)}.tool-btn:active,.tool-btn.active{background:var(--primary-color);color:white}.toolbar-divider{width:1px;height:24px;background:var(--border-color);margin:0 4px}.tool-select{padding:6px 10px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:4px;cursor:pointer;font-size:13px;color:var(--text-primary);transition:var(--transition)}.tool-select:hover{border-color:var(--primary-color)}.tool-color{width:32px;height:32px;padding:2px;border:1px solid var(--border-color);border-radius:4px;cursor:pointer}.view-options{display:flex;gap:var(--spacing-xs)}.view-btn{display:flex;align-items:center;gap:6px;padding:6px 12px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;color:var(--text-secondary);transition:var(--transition)}.view-btn:hover{background:var(--bg-tertiary);color:var(--text-primary)}.view-btn.active{background:var(--primary-color);color:white;border-color:var(--primary-color)}.panel-body{flex:1;overflow:auto;padding:var(--spacing-md);background:var(--bg-primary)}.editor{min-height:100%;padding:var(--spacing-md);background:white;border:1px solid var(--border-color);border-radius:8px;outline:0;font-size:14px;line-height:1.6;color:var(--text-primary)}.editor:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(45,122,78,0.1)}.editor p{margin-bottom:1em}.editor ul,.editor ol{margin-left:1.5em;margin-bottom:1em}.editor li{margin-bottom:.5em}.editor:empty:before{content:"Start typing here...";color:var(--text-light)}.output-container{height:100%}.code-output{min-height:100%;padding:var(--spacing-md);background:#f8f9fa;border:1px solid var(--border-color);border-radius:8px;font-family:'Courier New',Consolas,Monaco,monospace;font-size:13px;line-height:1.6;color:#333;overflow-x:auto;white-space:pre-wrap;word-wrap:break-word}.code-output code{display:block}.preview-output{min-height:100%;padding:var(--spacing-md);background:white;border:1px solid var(--border-color);border-radius:8px;font-size:14px;line-height:1.6}.panel-footer{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md);background:var(--bg-secondary);border-top:1px solid var(--border-color);flex-shrink:0}.stats{display:flex;gap:var(--spacing-md);font-size:13px;color:var(--text-secondary)}.separator{color:var(--border-color)}.actions{display:flex;gap:var(--spacing-sm)}.btn-action{display:flex;align-items:center;gap:6px;padding:8px 16px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:6px;cursor:pointer;font-size:13px;font-weight:500;color:var(--text-primary);transition:var(--transition)}.btn-action:hover{background:var(--primary-color);color:white;border-color:var(--primary-color);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.btn-action:active{transform:translateY(0)}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);z-index:2000;align-items:center;justify-content:center;animation:fadeIn .3s ease}.modal.active{display:flex}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.modal-content{background:white;border-radius:12px;width:90%;max-width:700px;max-height:85vh;overflow:hidden;display:flex;flex-direction:column;animation:slideUp .3s ease;box-shadow:var(--shadow-lg)}@keyframes slideUp{from{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-lg);background:linear-gradient(135deg,var(--primary-color) 0,var(--primary-dark) 100%);color:white}.modal-header h2{display:flex;align-items:center;gap:var(--spacing-sm);font-size:20px;font-weight:600}.modal-close{background:rgba(255,255,255,0.2);border:0;color:white;font-size:20px;cursor:pointer;width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:var(--transition)}.modal-close:hover{background:rgba(255,255,255,0.3);transform:scale(1.1)}.modal-body{padding:var(--spacing-lg);overflow-y:auto}.help-section{margin-bottom:var(--spacing-lg)}.help-section h3{display:flex;align-items:center;gap:var(--spacing-sm);font-size:16px;font-weight:600;color:var(--primary-color);margin-bottom:var(--spacing-md)}.help-section ol,.help-section ul{margin-left:var(--spacing-lg)}.help-section li{margin-bottom:var(--spacing-sm);line-height:1.6}.help-section kbd{display:inline-block;padding:2px 8px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:4px;font-family:monospace;font-size:12px}.toast{position:fixed;bottom:30px;right:30px;display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-lg);background:var(--success);color:white;border-radius:8px;box-shadow:var(--shadow-lg);font-size:14px;font-weight:500;z-index:3000;transform:translateX(400px);transition:transform .3s ease}.toast.show{transform:translateX(0)}.toast i{font-size:18px}.container{max-width:1200px;margin:0 auto;padding:0 var(--spacing-lg)}.section-header{text-align:center;margin-bottom:var(--spacing-xl)}.section-header h2{font-size:36px;font-weight:700;color:var(--text-primary);margin-bottom:var(--spacing-sm)}.section-header p{font-size:18px;color:var(--text-secondary)}.features-section{padding:80px 0;background:white}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-xl)}.feature-card{text-align:center;padding:var(--spacing-xl);background:var(--bg-secondary);border-radius:12px;transition:var(--transition);border:1px solid var(--border-color)}.feature-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--primary-light)}.feature-icon{width:80px;height:80px;margin:0 auto var(--spacing-md);background:linear-gradient(135deg,var(--primary-color),var(--primary-light));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:36px;color:white}.feature-card h3{font-size:22px;font-weight:600;margin-bottom:var(--spacing-sm);color:var(--text-primary)}.feature-card p{font-size:15px;line-height:1.6;color:var(--text-secondary)}.howto-section{padding:80px 0;background:var(--bg-secondary)}.howto-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-lg)}@media(max-width:1200px){.howto-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.howto-grid{grid-template-columns:1fr}}.howto-step{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--spacing-md);padding:var(--spacing-xl);background:white;border-radius:12px;box-shadow:var(--shadow-sm);transition:var(--transition)}.howto-step:hover{box-shadow:var(--shadow-md);transform:translateY(-5px);border:2px solid var(--primary-light)}.step-number{flex-shrink:0;width:60px;height:60px;background:linear-gradient(135deg,var(--primary-color),var(--primary-light));color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;box-shadow:0 4px 12px rgba(45,122,78,0.3);margin-bottom:var(--spacing-sm)}.step-content{flex:1;display:flex;flex-direction:column;align-items:center}.step-content h3{font-size:20px;font-weight:600;margin-bottom:var(--spacing-md);color:var(--text-primary)}.step-content p{font-size:15px;line-height:1.7;color:var(--text-secondary)}.about-section{padding:80px 0;background:white}.about-content{display:grid;grid-template-columns:2fr 1fr;gap:var(--spacing-xl);align-items:center}.about-text h2{font-size:36px;font-weight:700;color:var(--text-primary);margin-bottom:var(--spacing-md)}.about-text p{font-size:16px;line-height:1.8;color:var(--text-secondary);margin-bottom:var(--spacing-md)}.about-stats{display:flex;gap:var(--spacing-xl);margin-top:var(--spacing-xl)}.stat{text-align:center}.stat-number{font-size:42px;font-weight:700;color:var(--primary-color);margin-bottom:var(--spacing-xs)}.stat-label{font-size:14px;color:var(--text-secondary);font-weight:500}.about-image{display:flex;align-items:center;justify-content:center}.footer{background:#1a1a1a;color:white;padding:60px 0 30px}.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--spacing-xl);margin-bottom:var(--spacing-xl)}.footer-logo{display:flex;align-items:center;gap:14px;margin-bottom:var(--spacing-md);transition:var(--transition)}.footer-logo:hover{transform:translateY(-3px)}.footer-logo-icon{width:52px;height:52px;flex-shrink:0;transition:var(--transition)}.footer-logo:hover .footer-logo-icon{animation:footerLogoRotate .6s ease}@keyframes footerLogoRotate{0%{transform:rotate(0) scale(1)}50%{transform:rotate(-15deg) scale(1.15)}100%{transform:rotate(0) scale(1)}}.footer-logo-icon svg{width:100%;height:100%;filter:drop-shadow(0 3px 6px rgba(129,199,132,0.4))}.footer-logo h3{font-size:28px;font-weight:900;margin:0;letter-spacing:-1px;background:linear-gradient(135deg,#fff,#81c784);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 2px 4px rgba(0,0,0,0.2)}.footer-column h3{font-size:18px;font-weight:600;margin-bottom:var(--spacing-md);color:white}.footer-column p{font-size:14px;line-height:1.6;color:#b0b0b0;margin-bottom:var(--spacing-md)}.footer-column ul{list-style:none}.footer-column ul li{margin-bottom:var(--spacing-sm)}.footer-column ul li a{color:#b0b0b0;text-decoration:none;font-size:14px;transition:var(--transition)}.footer-column ul li a:hover{color:var(--accent-light);padding-left:5px}.social-links{display:flex;gap:var(--spacing-md);margin-top:var(--spacing-md)}.social-links a{width:40px;height:40px;background:rgba(255,255,255,0.1);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:18px;transition:var(--transition)}.social-links a:hover{background:var(--primary-color);transform:translateY(-3px)}.footer-bottom{text-align:center;padding-top:var(--spacing-lg);border-top:1px solid rgba(255,255,255,0.1);color:#b0b0b0;font-size:14px}.footer-bottom p{margin:5px 0}.footer-bottom i{color:#e74c3c}.ad-container{margin:var(--spacing-lg) auto;max-width:1200px;padding:0 var(--spacing-md)}.ad-horizontal{display:flex;justify-content:center}.ad-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-xl);background:var(--bg-tertiary);border:2px dashed var(--border-color);border-radius:8px;color:var(--text-secondary);transition:var(--transition);min-height:100px;width:100%}.ad-placeholder:hover{background:#e9ecef;border-color:var(--primary-light)}.ad-placeholder i{font-size:32px;margin-bottom:var(--spacing-sm);color:var(--text-light)}.ad-placeholder p{font-size:14px;font-weight:600;margin-bottom:var(--spacing-xs)}.ad-placeholder small{font-size:12px;color:var(--text-light)}@media(max-width:1200px){.cleaning-options{gap:6px}.pill-text{font-size:11px;padding:5px 10px}}@media(max-width:992px){.nav-menu{display:none;position:absolute;top:100%;left:0;right:0;background:white;flex-direction:column;padding:var(--spacing-md);box-shadow:0 4px 12px rgba(0,0,0,0.1);border-top:2px solid var(--primary-color);animation:slideDown .3s ease}@keyframes slideDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.nav-menu.active{display:flex}.nav-link{padding:var(--spacing-md);border-bottom:1px solid var(--border-color);text-align:center;font-size:16px}.nav-link:last-child{border-bottom:0}.mobile-menu-toggle{display:block}.top-nav{position:relative}.cleaning-options{flex-direction:column;align-items:stretch}.pill-text{justify-content:center}.main-container{grid-template-columns:1fr;height:auto}.left-panel{border-right:0;border-bottom:2px solid var(--border-color)}.panel-body{min-height:400px}.about-content{grid-template-columns:1fr}.about-image{display:none}.features-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}}@media(max-width:768px){.header-title h1{font-size:24px}.header-title p{font-size:14px}.section-header h2{font-size:28px}.section-header p{font-size:16px}.features-section,.howto-section,.about-section{padding:50px 0}.toolbar{flex-wrap:wrap;gap:4px}.tool-btn{padding:8px;font-size:12px}.panel-header{flex-direction:column;gap:var(--spacing-sm);align-items:flex-start}.panel-footer{flex-direction:column;gap:var(--spacing-sm);align-items:stretch}.stats{justify-content:center}.actions{justify-content:stretch}.btn-action{flex:1;justify-content:center}.about-stats{flex-direction:column;gap:var(--spacing-md)}}@media(max-width:480px){.logo{font-size:16px}.top-nav-container{padding:0 var(--spacing-md)}.container{padding:0 var(--spacing-md)}.btn-clean{width:100%;justify-content:center}.toolbar-divider{display:none}.tool-select{flex:1;min-width:80px}.pill-text{font-size:11px;padding:5px 10px}.feature-card,.howto-step{padding:var(--spacing-md)}.feature-icon{width:60px;height:60px;font-size:28px}.step-number{width:40px;height:40px;font-size:20px}}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:5px}::-webkit-scrollbar-thumb:hover{background:var(--primary-light)}@media print{.header,.panel-header,.panel-footer,.ad-container,.toast,.modal{display:none !important}.main-container{display:block}.panel{border:0;page-break-inside:avoid}}.hidden{display:none !important}.text-center{text-align:center}.mt-1{margin-top:var(--spacing-sm)}.mt-2{margin-top:var(--spacing-md)}.mt-3{margin-top:var(--spacing-lg)}.mb-1{margin-bottom:var(--spacing-sm)}.mb-2{margin-bottom:var(--spacing-md)}.mb-3{margin-bottom:var(--spacing-lg)}.p-1{padding:var(--spacing-sm)}.p-2{padding:var(--spacing-md)}.p-3{padding:var(--spacing-lg)}