*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;line-height:1.6;color:#333;background-color:#f5f5f5;overflow-x:hidden}:root{--primary-color:#2c3e50;--primary-dark:#1a252f;--primary-light:#34495e;--secondary-color:#3498db;--danger-color:#e74c3c;--warning-color:#f39c12;--success-color:#27ae60;--text-color:#2c3e50;--text-light:#7f8c8d;--bg-color:#ecf0f1;--border-color:#bdc3c7;--shadow:0 2px 8px rgba(0,0,0,0.1);--shadow-md:0 4px 12px rgba(0,0,0,0.15);--shadow-lg:0 8px 24px rgba(0,0,0,0.15);--transition:all 0.3s ease}:root.theme-slate{--primary-color:#2c3e50;--primary-dark:#1a252f;--primary-light:#34495e}:root.theme-navy{--primary-color:#1a3a52;--primary-dark:#0f2438;--primary-light:#2c5aa0}:root.theme-charcoal{--primary-color:#36454f;--primary-dark:#1f2937;--primary-light:#4a5568}:root.theme-indigo{--primary-color:#4c63a6;--primary-dark:#3c4e8c;--primary-light:#5d73c1}:root.theme-teal{--primary-color:#2d5f6f;--primary-dark:#1a3840;--primary-light:#3d7c8f}a{color:var(--primary-color);text-decoration:none;transition:var(--transition)}a:hover{color:var(--primary-dark)}button{cursor:pointer;border:none;font-family:inherit;transition:var(--transition)}.container{max-width:1200px;margin:0 auto;padding:0 1rem}.btn{padding:0.75rem 1.5rem;border-radius:4px;font-size:1rem;font-weight:500;cursor:pointer;border:none;transition:var(--transition);display:inline-block;text-align:center}.btn-primary{background-color:var(--primary-color);color:white}.btn-primary:hover{background-color:var(--primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn-secondary{background-color:var(--secondary-color);color:white}.btn-secondary:hover{background-color:#1976d2;transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn-small{padding:0.5rem 1rem;font-size:0.875rem}.btn-large{padding:1rem 2rem;font-size:1.125rem}.header{background-color:white;box-shadow:var(--shadow);position:sticky;top:0;z-index:100}.header-container{max-width:1200px;margin:0 auto;padding:1rem;display:flex;justify-content:space-between;align-items:center}.mobile-header-left,.mobile-header-center,.mobile-header-right{display:none}@media (max-width:768px){.header-container{padding:0.75rem;display:flex;justify-content:space-between;align-items:center;gap:0}.mobile-header-left,.mobile-header-center,.mobile-header-right{display:flex;align-items:center;justify-content:center}.mobile-header-left{flex:1;justify-content:flex-start}.mobile-header-center{flex:1;justify-content:center}.mobile-header-right{flex:1;justify-content:flex-end}}.logo{display:flex;align-items:center;gap:0.5rem;font-size:1.25rem;font-weight:bold;color:var(--primary-color)}.logo-icon{display:none}.logo-text{display:block}.logo-mobile{position:static;transform:none;font-size:1rem;margin:0;font-weight:bold;color:var(--primary-color);white-space:nowrap}.mobile-home-link{color:var(--primary-color);font-weight:600;font-size:0.95rem;padding:0.5rem 1rem;border-radius:4px;transition:var(--transition);position:relative;z-index:10}.mobile-home-link:hover,.mobile-home-link:active{background-color:var(--bg-color)}.nav{display:flex;gap:2rem}.nav-link{color:var(--text-color);padding:0.5rem 0;border-bottom:2px solid transparent;transition:var(--transition)}.nav-link:hover,.nav-link.active{color:var(--primary-color);border-bottom-color:var(--primary-color)}.menu-toggle{display:none;flex-direction:column;gap:5px;background:none;padding:0;position:relative;z-index:10}.menu-toggle span{width:25px;height:3px;background-color:var(--text-color);border-radius:2px;transition:var(--transition)}.menu-toggle.active span:nth-child(1){transform:rotate(45deg) translate(10px,10px)}.menu-toggle.active span:nth-child(2){opacity:0}.menu-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(7px,-7px)}.mobile-menu{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background-color:white;z-index:99;flex-direction:column;overflow:hidden}.mobile-menu.active{display:flex}.mobile-menu-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid var(--border-color);position:sticky;top:0;background-color:white}.mobile-menu-header h2{margin:0;font-size:1.5rem}.mobile-menu-close{background:none;font-size:1.5rem;cursor:pointer;color:var(--text-color);width:40px;height:40px;display:flex;align-items:center;justify-content:center}.mobile-menu-content{flex:1;padding:1.5rem;overflow-y:auto;-webkit-overflow-scrolling:touch}.mobile-menu-section-title{font-size:1.1rem;margin-bottom:1rem;color:var(--text-color)}.mobile-tools-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-bottom:1.5rem}.mobile-tool-item{display:flex;flex-direction:column;align-items:center;padding:1.5rem;background-color:var(--bg-color);border-radius:8px;transition:var(--transition);color:var(--text-color);text-decoration:none;border:1px solid var(--border-color)}.mobile-tool-item:active{background-color:var(--primary-light);color:white}.mobile-tool-icon{font-size:2rem;margin-bottom:0.5rem}.mobile-tool-name{font-size:0.9rem;text-align:center;font-weight:500}.settings-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;padding:0.5rem;transition:transform 0.3s ease}.settings-btn:hover{transform:rotate(20deg)}.settings-panel{position:fixed;top:0;right:0;bottom:0;width:100%;max-width:400px;background-color:white;box-shadow:-4px 0 12px rgba(0,0,0,0.15);z-index:300;display:flex;flex-direction:column;animation:slideIn 0.3s ease}.settings-panel.hidden{display:none}@keyframes slideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}.settings-panel-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid #ecf0f1}.settings-panel-header h2{margin:0;font-size:1.25rem}.settings-panel-header .close-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;color:#7f8c8d;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center}.settings-panel-content{flex:1;overflow-y:auto;padding:1rem}.settings-group{margin-bottom:2rem}.group-title{margin:0 0 1rem 0;font-size:0.95rem;font-weight:600;color:#2c3e50;text-transform:uppercase;letter-spacing:0.5px}.settings-options{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem}.settings-option{display:flex;flex-direction:column;align-items:center;gap:0.5rem;padding:1rem;border:2px solid #ecf0f1;border-radius:6px;background-color:white;cursor:pointer;transition:all 0.3s ease;color:#2c3e50}.settings-option:hover{border-color:#bdc3c7;background-color:#f5f5f5}.settings-option.active{border-color:var(--primary-color);background-color:var(--primary-color);color:white}.option-flag,.option-icon{font-size:1.5rem}.option-name{font-size:0.85rem;font-weight:500}.color-option .option-color{width:28px;height:28px;border-radius:4px;border:2px solid rgba(0,0,0,0.1)}.settings-option.active .option-color{border-color:white;box-shadow:0 0 0 2px white,0 0 0 4px #2c3e50}.custom-color-option{grid-column:1 / -1}.about-group{text-align:center;border-top:1px solid #ecf0f1;padding-top:1.5rem}.about-text{margin:0;font-size:0.85rem;color:#7f8c8d}.color-picker-dialog{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:1000}.color-picker-modal{background-color:white;border-radius:8px;box-shadow:0 10px 40px rgba(0,0,0,0.2);width:90%;max-width:400px}.color-picker-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid #ecf0f1}.color-picker-header h3{margin:0;font-size:1.1rem}.color-picker-header .close-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;color:#7f8c8d;padding:0}.color-picker-content{padding:1.5rem}.color-input-group{margin-bottom:1.5rem}.color-input-group label{display:block;margin-bottom:0.5rem;color:#2c3e50;font-weight:500;font-size:0.95rem}.color-input-wrapper{display:flex;gap:0.5rem;align-items:center}.color-input{flex:1;height:40px;border:1px solid #bdc3c7;border-radius:4px;cursor:pointer}.color-value{min-width:70px;text-align:center;font-family:monospace;font-size:0.9rem;color:#7f8c8d}.color-picker-actions{display:flex;gap:0.5rem;margin-top:1.5rem}.color-picker-actions .btn{flex:1}@media (max-width:768px){.settings-btn{display:none}.settings-panel{display:none !important}.settings-options{grid-template-columns:1fr}.custom-color-option{grid-column:auto}}.main-content{flex:1;padding:2rem 0}.hero{background:linear-gradient(135deg,var(--primary-color),var(--primary-light));color:white;padding:3rem 1rem;text-align:center;margin-bottom:3rem}.hero-content{max-width:1200px;margin:0 auto}.hero-title{font-size:2.5rem;margin-bottom:1rem;font-weight:700;line-height:1.2}.hero-subtitle{font-size:1.1rem;margin-bottom:2rem;opacity:0.95;line-height:1.6}.section-title{font-size:2rem;margin-bottom:2rem;text-align:center;color:var(--text-color)}.footer{background-color:#333;color:white;padding:2rem 1rem;margin-top:3rem}.footer .container{text-align:center}.footer p{margin-bottom:1rem}.footer-links{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap}.footer-links a{color:#ccc}.footer-links a:hover{color:white}input,textarea,select{width:100%;padding:0.75rem;border:1px solid var(--border-color);border-radius:4px;font-family:inherit;font-size:1rem;transition:var(--transition)}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(76,175,80,0.1)}textarea{resize:vertical;min-height:100px}@media (max-width:768px){html{font-size:14px}.header-container{padding:0.75rem;display:flex;justify-content:space-between;align-items:center;gap:0}.mobile-header-left,.mobile-header-center,.mobile-header-right{display:flex;align-items:center}.mobile-header-left{flex:1;justify-content:flex-start}.mobile-header-center{flex:1;justify-content:center}.mobile-header-right{flex:1;justify-content:flex-end}.nav{display:none}.menu-toggle{display:flex}.logo{display:none}.logo>.logo-text{display:none}.logo-mobile>.logo-text{display:inline}.logo-mobile{display:inline-block !important;font-size:1rem;white-space:nowrap}.mobile-home-link{display:inline-block;font-size:0.9rem}.hero-title{font-size:1.75rem}.hero-subtitle{font-size:1rem}.section-title{font-size:1.5rem}.footer-links{gap:1rem;font-size:0.9rem}.btn{width:100%;padding:0.75rem}.container{padding:0 0.75rem}}@media (min-width:769px){.header-container{display:flex !important;grid-template-columns:unset;gap:unset}.mobile-header-left,.mobile-header-center,.mobile-header-right{display:none}.logo-mobile{display:none}.mobile-home-link{display:none}}@media (max-width:480px){html{font-size:13px}.hero{padding:2rem 0.5rem}.hero-title{font-size:1.5rem}.hero-subtitle{font-size:0.9rem}.section-title{font-size:1.25rem;margin-bottom:1.5rem}.footer{padding:1.5rem 0.5rem}.footer-links{flex-direction:column;gap:0.5rem}}.tool-card,.feature-item{background:white;border-radius:8px;padding:1.5rem;text-align:center;transition:var(--transition);box-shadow:var(--shadow)}.tool-card:hover,.feature-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.tool-icon{font-size:2.5rem;margin-bottom:1rem}.tool-card h3,.feature-item h3{margin-bottom:0.5rem;color:var(--text-color)}.tool-card p,.feature-item p{color:var(--text-light);font-size:0.9rem}.tools-grid,.features-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.5rem}@media (max-width:768px){.tools-grid,.features-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}}@media (max-width:480px){.tools-grid,.features-grid{grid-template-columns:1fr;gap:1rem}}.alert{padding:1rem;border-radius:4px;margin-bottom:1rem}.alert-success{background-color:#d4edda;color:#155724;border:1px solid #c3e6cb}.alert-error{background-color:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.alert-info{background-color:#d1ecf1;color:#0c5460;border:1px solid #bee5eb}.alert-warning{background-color:#fff3cd;color:#856404;border:1px solid #ffeeba}.loading{opacity:0.6;pointer-events:none}:disabled{opacity:0.5;cursor:not-allowed}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}.hidden{display:none !important}.visible{display:block !important}.mt-1{margin-top:0.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}.mb-1{margin-bottom:0.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2rem}.p-1{padding:0.5rem}.p-2{padding:1rem}.p-3{padding:1.5rem}.p-4{padding:2rem}