:root{--bg:#0b0f19;--surface:#111827;--surface-card:#161f33;--surface-card-hover:#1c2742;--border:#243250;--border-focus:#3b82f6;--text:#f1f5f9;--text-muted:#94a3b8;--text-sub:#64748b;--primary:#3b82f6;--primary-glow:rgba(59,130,246,0.25);--primary-hover:#2563eb;--accent:#06b6d4;--success:#10b981;--warning:#f59e0b;--error:#ef4444;--radius:12px;--radius-sm:8px;--shadow:0 10px 25px -5px rgba(0,0,0,0.5),0 8px 10px -6px rgba(0,0,0,0.5);--font-sans:'Inter',system-ui,-apple-system,sans-serif;--font-heading:'Outfit',sans-serif}[data-theme="light"]{--bg:#f8fafc;--surface:#ffffff;--surface-card:#f1f5f9;--surface-card-hover:#e2e8f0;--border:#cbd5e1;--border-focus:#2563eb;--text:#0f172a;--text-muted:#475569;--text-sub:#64748b;--primary:#2563eb;--primary-glow:rgba(37,99,235,0.15);--primary-hover:#1d4ed8;--accent:#0891b2;--success:#059669;--warning:#d97706;--error:#dc2626;--shadow:0 10px 25px -5px rgba(0,0,0,0.08),0 8px 10px -6px rgba(0,0,0,0.04)}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{font-family:var(--font-sans);background-color:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column}a{color:inherit;text-decoration:none;transition:color .2s}button,input,select,textarea{font-family:inherit;font-size:inherit}button{cursor:pointer;border:none;background:none}.container{width:100%;max-width:1240px;margin:0 auto;padding:0 20px}.header{position:sticky;top:0;z-index:100;background:rgba(17,24,39,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}[data-theme="light"] .header{background:rgba(255,255,255,.9)}.header-inner{display:flex;align-items:center;justify-content:space-between;height:70px}.brand{display:flex;align-items:center;gap:12px;font-family:var(--font-heading);font-weight:700;font-size:1.35rem;color:var(--text)}.brand-icon{width:36px;height:36px;background:linear-gradient(135deg,var(--primary),var(--accent));border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:1.1rem;box-shadow:0 4px 12px var(--primary-glow)}.brand-name span{color:var(--primary)}.nav{display:flex;align-items:center;gap:24px}.nav-link{font-size:.92rem;font-weight:500;color:var(--text-muted);display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:var(--radius-sm);transition:all .2s}.nav-link:hover{color:var(--text);background:var(--surface-card)}.dropdown{position:relative}.dropdown-menu{position:absolute;top:100%;left:0;min-width:280px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:10px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(6px);transition:all .2s ease-in-out;z-index:110;display:grid;grid-template-columns:1fr;max-height:420px;overflow-y:auto}.dropdown:hover .dropdown-menu,.dropdown:focus-within .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}.dropdown-item{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:.875rem;color:var(--text-muted);border-radius:var(--radius-sm);transition:all .15s}.dropdown-item:hover{color:var(--text);background:var(--surface-card);padding-left:18px}.dropdown-item svg{width:15px;height:15px;color:var(--primary);flex-shrink:0}.nav-actions{display:flex;align-items:center;gap:12px}.theme-toggle{width:40px;height:40px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);display:flex;align-items:center;justify-content:center;transition:all .2s}.theme-toggle:hover{border-color:var(--primary);color:var(--primary)}.mobile-toggle{display:none;width:40px;height:40px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);align-items:center;justify-content:center}.breadcrumbs{padding:18px 0;font-size:.85rem;color:var(--text-sub)}.breadcrumb-list{display:flex;align-items:center;gap:8px;list-style:none;flex-wrap:wrap}.breadcrumb-item{display:flex;align-items:center;gap:8px}.breadcrumb-item a{color:var(--text-muted)}.breadcrumb-item a:hover{color:var(--primary)}.breadcrumb-separator{color:var(--text-sub)}.breadcrumb-current{color:var(--primary);font-weight:600}.hero{padding:40px 0 30px;text-align:center}.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.3);color:var(--primary);border-radius:999px;font-size:.85rem;font-weight:600;margin-bottom:20px;letter-spacing:.5px}.hero-title{font-family:var(--font-heading);font-size:clamp(2rem,4vw+1rem,3.4rem);font-weight:800;line-height:1.15;letter-spacing:-.02em;margin-bottom:16px;background:linear-gradient(135deg,var(--text) 40%,var(--primary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.hero-subtitle{font-size:clamp(1rem,1.2vw+.7rem,1.25rem);color:var(--text-muted);max-width:760px;margin:0 auto 28px;font-weight:400}.app-section{margin-bottom:60px}.app-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:28px;align-items:start}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;padding-bottom:14px;border-bottom:1px solid var(--border)}.card-title{font-family:var(--font-heading);font-size:1.2rem;font-weight:700;display:flex;align-items:center;gap:10px}.card-badge{font-size:.75rem;padding:3px 10px;border-radius:999px;background:var(--surface-card);color:var(--text-muted);font-weight:600;border:1px solid var(--border)}.presets-bar{margin-bottom:22px}.preset-label{font-size:.82rem;font-weight:600;color:var(--text-sub);text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px;display:block}.preset-chips{display:flex;flex-wrap:wrap;gap:8px}.preset-btn{font-size:.8rem;font-weight:600;padding:6px 13px;border-radius:999px;background:var(--surface-card);border:1px solid var(--border);color:var(--text-muted);transition:all .2s}.preset-btn:hover,.preset-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:20px}.form-group{display:flex;flex-direction:column;gap:6px}.form-label{font-size:.85rem;font-weight:600;color:var(--text);display:flex;align-items:center;justify-content:space-between}.form-label small{color:var(--text-sub);font-weight:400}.input-wrapper{position:relative;display:flex;align-items:center}.form-input{width:100%;height:44px;padding:0 45px 0 14px;background:var(--surface-card);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:.95rem;font-weight:500;transition:all .2s}.form-input:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 3px var(--primary-glow)}.input-unit{position:absolute;right:14px;color:var(--text-sub);font-size:.85rem;font-weight:600;pointer-events:none}.advanced-options{background:var(--surface-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px;margin-bottom:22px}.advanced-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.select-input{width:100%;height:40px;padding:0 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:.88rem;outline:none}.toggle-row{display:flex;align-items:center;justify-content:space-between;padding-top:10px;border-top:1px solid var(--border);margin-top:12px}.toggle-switch{position:relative;display:inline-block;width:44px;height:24px}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;inset:0;background:var(--border);transition:.3s;border-radius:24px}.toggle-slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background:white;transition:.3s;border-radius:50%}.toggle-switch input:checked + .toggle-slider{background:var(--primary)}.toggle-switch input:checked + .toggle-slider:before{transform:translateX(20px)}.validation-alert{display:none;background:rgba(239,68,68,.12);border:1px solid var(--error);color:var(--error);padding:10px 14px;border-radius:var(--radius-sm);font-size:.85rem;margin-bottom:18px;align-items:center;gap:8px}.validation-alert.active{display:flex}.btn-group{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:10px}.btn{height:46px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--radius-sm);font-size:.92rem;font-weight:600;transition:all .2s}.btn-primary{background:var(--primary);color:#fff;box-shadow:0 4px 14px var(--primary-glow)}.btn-primary:hover:not(:disabled){background:var(--primary-hover);transform:translateY(-1px)}.btn-primary:disabled{opacity:.65;cursor:not-allowed;transform:none}.btn-secondary{background:var(--surface-card);border:1px solid var(--border);color:var(--text)}.btn-secondary:hover{background:var(--surface-card-hover);color:var(--text)}.btn-outline{border:1px solid var(--border);color:var(--text-muted)}.btn-outline:hover{border-color:var(--text);color:var(--text)}.output-card{display:flex;flex-direction:column;gap:20px}.tabs{display:flex;align-items:center;gap:4px;background:var(--surface-card);padding:4px;border-radius:var(--radius-sm);border:1px solid var(--border);overflow-x:auto}.tab-btn{padding:8px 14px;font-size:.82rem;font-weight:600;color:var(--text-muted);border-radius:6px;transition:all .2s;white-space:nowrap}.tab-btn.active{background:var(--surface);color:var(--primary);box-shadow:0 2px 6px rgba(0,0,0,.15)}.code-box{position:relative;background:#060a12;border:1px solid var(--border);border-radius:var(--radius-sm);padding:18px;overflow-x:auto;font-family:'Courier New',Courier,monospace;font-size:.95rem;color:#38bdf8;min-height:90px;display:flex;align-items:center;word-break:break-all}[data-theme="light"] .code-box{background:#f1f5f9;color:#0284c7;border-color:#cbd5e1}.copy-float{position:absolute;top:10px;right:10px}.math-breakdown{background:var(--surface-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px;font-size:.83rem;color:var(--text-muted)}.math-breakdown-title{font-weight:700;color:var(--text);margin-bottom:8px;font-size:.88rem;display:flex;align-items:center;gap:6px}.math-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:center}.math-item{background:var(--surface);padding:8px;border-radius:6px;border:1px solid var(--border)}.math-val{font-family:monospace;font-weight:700;color:var(--text);font-size:.9rem}.preview-wrapper{background:var(--surface-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:18px}.preview-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-size:.85rem}.slider-control{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}.range-slider{width:100%;height:6px;-webkit-appearance:none;appearance:none;background:var(--border);border-radius:6px;outline:none}.range-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--primary);cursor:pointer;box-shadow:0 0 10px var(--primary)}.range-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--primary);cursor:pointer;border:none;box-shadow:0 0 10px var(--primary)}.preview-display-box{background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius-sm);padding:24px;text-align:center;overflow:hidden;min-height:130px;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:width .1s linear}.preview-sample-text{font-family:var(--font-heading);font-weight:700;color:var(--text);line-height:1.2;transition:font-size .05s linear}.preview-info-badge{margin-top:10px;font-size:.75rem;padding:3px 10px;border-radius:999px;background:var(--surface-card);color:var(--text-sub);border:1px solid var(--border);font-family:monospace}.chart-card{margin-top:24px}.chart-container{position:relative;width:100%;height:220px}.tools-preview-section{padding:50px 0;background:var(--surface-card);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.section-head{text-align:center;margin-bottom:34px}.section-title{font-family:var(--font-heading);font-size:1.85rem;font-weight:700;margin-bottom:10px;letter-spacing:-.01em}.section-sub{color:var(--text-muted);font-size:.98rem;max-width:640px;margin:0 auto}.tools-grid-flat{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}.tool-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 18px;display:flex;align-items:center;gap:12px;color:var(--text);font-size:.88rem;font-weight:600;transition:all .2s}.tool-item:hover{border-color:var(--primary);background:var(--surface-card-hover);color:var(--primary);transform:translateY(-2px)}.tool-icon-mini{width:28px;height:28px;border-radius:6px;background:rgba(59,130,246,.12);color:var(--primary);display:flex;align-items:center;justify-content:center;flex-shrink:0}.features-section{padding:65px 0}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}.feature-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:26px;transition:all .2s}.feature-box:hover{border-color:var(--primary);transform:translateY(-3px);box-shadow:var(--shadow)}.feature-icon{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,rgba(59,130,246,.15),rgba(6,182,212,.15));color:var(--primary);display:flex;align-items:center;justify-content:center;margin-bottom:18px}.feature-title{font-family:var(--font-heading);font-size:1.15rem;font-weight:700;margin-bottom:8px}.feature-desc{color:var(--text-muted);font-size:.88rem;line-height:1.55}.how-section{padding:60px 0;background:var(--surface-card);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:30px}.step-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;position:relative}.step-number{width:36px;height:36px;border-radius:50%;background:var(--primary);color:#fff;font-weight:700;font-size:.95rem;display:flex;align-items:center;justify-content:center;margin-bottom:16px}.step-title{font-family:var(--font-heading);font-size:1.05rem;font-weight:700;margin-bottom:8px}.step-text{color:var(--text-muted);font-size:.86rem}.seo-article-section{padding:60px 0}.seo-article-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:36px;line-height:1.75;color:var(--text-muted);font-size:.96rem}.seo-article-card h2{font-family:var(--font-heading);font-size:1.65rem;font-weight:800;color:var(--text);margin-bottom:16px}.seo-article-card p{margin-bottom:16px}.seo-article-card strong{color:var(--text)}.faq-section{padding:60px 0;background:var(--surface-card);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.faq-list{max-width:840px;margin:0 auto;display:flex;flex-direction:column;gap:14px}.faq-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.faq-question{width:100%;padding:18px 22px;text-align:left;font-family:var(--font-heading);font-size:1.05rem;font-weight:600;color:var(--text);display:flex;align-items:center;justify-content:space-between;gap:16px}.faq-icon{transition:transform .2s;flex-shrink:0;color:var(--primary)}.faq-item.open .faq-icon{transform:rotate(180deg)}.faq-answer{max-height:0;overflow:hidden;transition:max-height .3s ease-out;padding:0 22px;color:var(--text-muted);font-size:.92rem;line-height:1.65}.faq-item.open .faq-answer{max-height:300px;padding:0 22px 20px}.cta-section{padding:70px 0;text-align:center}.cta-box{background:linear-gradient(135deg,rgba(59,130,246,.12),rgba(6,182,212,.1));border:1px solid var(--border);border-radius:var(--radius);padding:50px 30px;max-width:900px;margin:0 auto}.cta-title{font-family:var(--font-heading);font-size:clamp(1.75rem,3vw,2.3rem);font-weight:800;margin-bottom:14px}.cta-sub{color:var(--text-muted);font-size:1rem;max-width:600px;margin:0 auto 28px}.cta-buttons{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}.footer{background:var(--surface);border-top:1px solid var(--border);padding:60px 0 30px;margin-top:auto}.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:36px;margin-bottom:40px}.footer-brand-col p{color:var(--text-muted);font-size:.875rem;margin-top:14px;line-height:1.6}.footer-col-title{font-family:var(--font-heading);font-size:.95rem;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:.05em;margin-bottom:18px}.footer-links{list-style:none;display:flex;flex-direction:column;gap:9px}.footer-links a{color:var(--text-muted);font-size:.84rem;transition:all .15s}.footer-links a:hover{color:var(--primary);padding-left:4px}.footer-bottom{padding-top:28px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;font-size:.82rem;color:var(--text-sub)}.footer-legal-links{display:flex;gap:18px}.footer-legal-links a{color:var(--text-muted)}.footer-legal-links a:hover{color:var(--primary)}.trademark-disclaimer{font-size:.78rem;color:var(--text-sub);margin-top:12px;line-height:1.5}.cookie-banner{position:fixed;bottom:20px;right:20px;max-width:420px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);z-index:999;display:flex;flex-direction:column;gap:14px;animation:slideUp .3s ease-out}.cookie-banner p{font-size:.85rem;color:var(--text-muted);line-height:1.5}.cookie-banner a{color:var(--primary);text-decoration:underline}.cookie-actions{display:flex;gap:10px}.cookie-btn{padding:8px 16px;font-size:.82rem;font-weight:600;border-radius:var(--radius-sm)}.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--surface);color:var(--text);border:1px solid var(--border);padding:12px 22px;border-radius:999px;font-size:.88rem;font-weight:600;box-shadow:var(--shadow);display:flex;align-items:center;gap:10px;z-index:1000;opacity:0;transition:all .3s ease-in-out;pointer-events:none}.toast.active{transform:translateX(-50%) translateY(0);opacity:1}@keyframes slideUp{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}@media(max-width:1024px){.app-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}}@media(max-width:768px){.nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--border);flex-direction:column;padding:16px 20px;gap:8px}.nav.active{display:flex}.dropdown{width:100%}.dropdown-menu{position:static;width:100%;box-shadow:none;border:none;padding:4px 0 4px 10px;opacity:1;visibility:visible;transform:none;display:none}.dropdown.active .dropdown-menu{display:grid}.mobile-toggle{display:flex}.form-grid{grid-template-columns:1fr}.advanced-grid{grid-template-columns:1fr}.btn-group{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.cookie-banner{left:20px;right:20px;max-width:none}}