.tool-page{--bg:var(--color-bg);--surface:var(--color-surface);--surface2:var(--color-bg-secondary);--border:var(--color-border);--border-strong:var(--color-border);--accent:var(--color-accent);--accent-glow:var(--color-accent-glow);--text:var(--color-text);--muted:var(--color-text-muted);--muted2:color-mix(in srgb,var(--color-text-muted) 80%,var(--color-text));--success:#22c55e;--danger:#f87171;--mono:var(--font-mono);--sans:var(--font-sans);--radius:var(--radius-md);max-width:1000px;margin:0 auto;padding:2rem 1.25rem 4rem;font-family:var(--font-sans);color:var(--color-text);min-height:calc(100vh - var(--navbar-height) - var(--subnav-height))}.tool-page .tab-nav{display:flex;gap:4px;flex-wrap:wrap;background:var(--color-bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);padding:6px;margin-bottom:1.5rem;overflow-x:auto;scrollbar-width:none}.tool-page .tab-nav::-webkit-scrollbar{display:none}.tool-page .tab-btn{flex-shrink:0;padding:8px 16px;background:transparent;border:1px solid transparent;border-radius:var(--radius-md);color:var(--muted);font-family:var(--font-sans);font-size:.875rem;font-weight:500;cursor:pointer;transition:all .15s ease;white-space:nowrap}.tool-page .tab-btn:hover{color:var(--text);background:var(--color-surface-high);border-color:transparent}.tool-page .tab-btn.active{color:var(--color-accent-on);background:linear-gradient(45deg,var(--color-accent),var(--color-accent-dim));border-radius:var(--radius-full);box-shadow:0 4px 16px var(--color-accent-glow)}.tool-page .tab-panel{display:none}.tool-page .tab-panel.active{display:block}.tool-page .panel-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;margin-bottom:1rem;box-shadow:0 2px 40px rgba(0,0,0,.08);transition:background .15s ease}.tool-page .btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:var(--radius-full);font-family:var(--font-sans);font-size:.875rem;font-weight:500;cursor:pointer;border:1px solid transparent;transition:all .15s ease;white-space:nowrap}.tool-page .btn-primary{background:linear-gradient(45deg,var(--color-accent),var(--color-accent-dim));color:var(--color-accent-on);border-color:transparent}.tool-page .btn-primary:hover{box-shadow:0 4px 20px var(--color-accent-glow);filter:brightness(1.12)}.tool-page .btn-secondary{background:var(--color-surface-high);color:var(--muted);border-color:var(--color-border-ghost)}.tool-page .btn-secondary:hover{color:var(--text);background:var(--color-surface-bright)}.tool-page .code-area,.tool-page textarea{width:100%;background:var(--color-surface-high);border:1px solid var(--color-border);color:var(--text);padding:12px 14px;border-radius:var(--radius-md);font-family:var(--mono);font-size:.875rem;outline:none;resize:vertical;transition:border-color .15s ease,box-shadow .15s ease;line-height:1.7}.tool-page .code-area:focus,.tool-page textarea:focus{border-color:rgba(57,184,253,.4);box-shadow:0 0 0 3px var(--color-accent-glow);caret-color:var(--color-accent)}.tool-page .code-area::placeholder,.tool-page textarea::placeholder{color:var(--muted)}.tool-page .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:rgba(15,25,48,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--color-text);padding:10px 20px;border-radius:var(--radius-full);font-size:.85rem;opacity:0;transition:all .25s;z-index:9999;pointer-events:none;white-space:nowrap}.tool-page .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.tool-page .page-header{margin-bottom:2rem}.tool-page .page-header h1{font-family:var(--font-display);font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-bottom:.5rem}.tool-page .page-header .tagline{color:var(--muted2);font-size:1rem;line-height:1.6}.tool-page .field-group{display:flex;flex-direction:column;gap:6px}.tool-page .field-label{font-size:.8rem;font-weight:600;color:var(--muted2)}.tool-page .calc-input{width:100%;background:var(--color-surface-high);border:1px solid var(--color-border);color:var(--text);padding:12px 14px;border-radius:var(--radius-sm);font-family:var(--mono);font-size:.95rem;outline:none;transition:border-color .15s,box-shadow .15s}.tool-page .calc-input:focus{border-color:rgba(57,184,253,.4);box-shadow:0 0 0 3px var(--color-accent-glow);caret-color:var(--color-accent)}.tool-page .calc-input::placeholder{color:var(--muted);font-family:var(--font-sans);font-size:.85rem}.tool-page .io-label{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;display:block}.tool-page .error-msg{font-family:var(--mono);font-size:.75rem;color:var(--danger);min-height:18px;padding-top:4px}.tool-page select{background:var(--color-surface-high);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:8px 12px;font-family:var(--font-sans);font-size:.875rem;color:var(--text);outline:none;cursor:pointer;transition:border-color .15s,box-shadow .15s}.tool-page select:focus{border-color:rgba(57,184,253,.4);box-shadow:0 0 0 3px var(--color-accent-glow)}.tool-page .btn-row{display:flex;gap:8px;margin-top:1rem;flex-wrap:wrap}.seo-section{--_border:var(--border,var(--color-border));--_text:var(--text,var(--color-text));--_muted:var(--muted2,var(--color-text-muted));--_surface:var(--surface,var(--color-surface));margin-top:2.5rem;border-top:1px solid var(--_border);padding-top:2rem;max-width:1000px}.seo-section h2{font-family:var(--font-display);font-size:1.35rem;font-weight:700;letter-spacing:-.01em;margin-bottom:.75rem;color:var(--_text)}.seo-section h3{font-size:1rem;font-weight:600;margin-bottom:.4rem;color:var(--_text)}.seo-section p{font-size:.9rem;line-height:1.7;color:var(--_muted);margin-bottom:1rem}.seo-section ol,.seo-section ul{padding-left:1.25rem;margin-bottom:1rem}.seo-section li{font-size:.9rem;line-height:1.7;color:var(--_muted);margin-bottom:.35rem}.seo-steps{flex-direction:column;margin-bottom:1rem}.seo-step,.seo-steps{display:flex;gap:12px}.seo-step{align-items:flex-start}.seo-step-num{width:28px;height:28px;border-radius:50%;background:linear-gradient(45deg,var(--color-accent),var(--color-accent-dim));color:var(--color-accent-on);font-size:.78rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}.seo-step p{margin:0}.seo-faq{display:flex;flex-direction:column;gap:8px}.seo-faq details{background:var(--_surface);border:1px solid var(--_border);border-radius:var(--radius-md);overflow:hidden}.seo-faq summary{padding:12px 16px;font-size:.9rem;font-weight:600;color:var(--_text);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}.seo-faq summary::-webkit-details-marker{display:none}.seo-faq summary:after{content:"+";font-size:1.1rem;color:var(--_muted);transition:transform .2s ease}.seo-faq details[open] summary:after{content:"−"}.seo-faq details p{padding:0 16px 12px;margin:0}@media (max-width:480px){.tool-page{padding:1rem .75rem 2rem}.tool-page .panel-card{padding:1rem}.tool-page .btn{padding:10px 14px;min-height:44px;font-size:.8rem}.tool-page .tab-nav{flex-wrap:wrap;overflow-x:visible}.tool-page .tab-btn{padding:8px 12px;font-size:.75rem;min-height:44px}}[data-theme=light] .tool-page{--surface:var(--color-surface-low);--surface2:var(--color-bg-secondary);--border:var(--color-border-ghost);--border-strong:var(--color-border);--accent-glow:color-mix(in srgb,var(--color-accent) 10%,transparent)}[data-theme=light] .tool-page .tab-nav{background:var(--color-surface)}[data-theme=light] .tool-page .tab-btn:hover{background:rgba(0,98,140,.06)}[data-theme=light] .tool-page .tab-btn.active{color:var(--color-bg-secondary);background:var(--color-accent);box-shadow:0 4px 16px color-mix(in srgb,var(--color-accent) 30%,transparent)}[data-theme=light] .tool-page .panel-card{background:var(--color-bg-secondary);box-shadow:0 2px 40px rgba(12,49,78,.06)}[data-theme=light] .tool-page .btn-primary{background:var(--color-accent);color:var(--color-bg-secondary)}[data-theme=light] .tool-page .btn-secondary{background:var(--color-surface-low)}[data-theme=light] .tool-page .calc-input:focus,[data-theme=light] .tool-page .code-area:focus,[data-theme=light] .tool-page textarea:focus{border-color:rgba(0,98,140,.25);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--color-primary-container) 40%,transparent)}[data-theme=light] .tool-page select:focus{border-color:rgba(0,98,140,.25)}[data-theme=light] .tool-page .toast{background:rgba(12,49,78,.85)}