.site-header{position:sticky;top:0;z-index:100;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow-sm)}.header-inner{display:flex;align-items:center;height:var(--header-h);gap:2rem}.logo{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:1.15rem;color:var(--text);text-decoration:none;flex-shrink:0}.logo:hover{text-decoration:none}.logo-text{display:flex;flex-direction:column;line-height:1.1}.logo-tagline{font-size:.6rem;font-weight:400;color:var(--text-muted);letter-spacing:.02em}.header-nav{display:flex;align-items:center;gap:1.5rem;flex:1}.header-nav a{font-size:.9rem;font-weight:500;color:var(--text-muted);text-decoration:none;transition:color .15s}.header-nav a:hover{color:var(--primary);text-decoration:none}.header-actions{display:flex;align-items:center;gap:.5rem;margin-left:auto}.mobile-nav{display:flex;flex-direction:column;background:var(--surface);border-top:1px solid var(--border);padding:.5rem 1.25rem 1rem}.mobile-nav a{padding:.65rem 0;font-size:.95rem;font-weight:500;color:var(--text-muted);border-bottom:1px solid var(--border);text-decoration:none}.mobile-nav a:last-child{border-bottom:none}.mobile-menu-btn{display:none}@media(max-width:768px){.header-nav{display:none}.mobile-menu-btn{display:flex}}.site-footer{background:var(--surface);border-top:1px solid var(--border);margin-top:auto}.footer-inner{display:grid;grid-template-columns:220px 1fr;gap:3rem;padding:3rem 1.25rem 2rem}.footer-logo{display:block;font-weight:700;font-size:1.1rem;margin-bottom:.5rem}.footer-brand p{font-size:.85rem;color:var(--text-muted);line-height:1.6}.footer-links{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}.footer-col h4{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:.75rem}.footer-col a{display:block;font-size:.85rem;color:var(--text-muted);text-decoration:none;padding:.2rem 0;transition:color .15s}.footer-col a:hover{color:var(--primary);text-decoration:none}.footer-bottom{border-top:1px solid var(--border);padding:1rem 0}.footer-bottom-inner{display:flex;justify-content:space-between;font-size:.8rem;color:var(--text-muted)}@media(max-width:900px){.footer-inner{grid-template-columns:1fr;gap:2rem}.footer-links{grid-template-columns:1fr 1fr}.footer-bottom-inner{flex-direction:column;gap:.25rem;text-align:center}}@media(max-width:480px){.footer-links{grid-template-columns:1fr}}.tool-card{display:flex;align-items:flex-start;gap:.9rem;padding:1rem 1.1rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);text-decoration:none;color:var(--text);transition:border-color .15s,box-shadow .15s,transform .15s}.tool-card:hover{border-color:var(--primary);box-shadow:var(--shadow-md);transform:translateY(-1px);text-decoration:none}.tool-card-icon{font-size:1.6rem;flex-shrink:0;line-height:1;margin-top:.1rem}.tool-card-body{flex:1;min-width:0}.tool-card-title-row{display:flex;align-items:center;gap:.45rem;margin-bottom:.2rem}.tool-card-body h3{font-size:.9rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tool-card-body p{font-size:.78rem;color:var(--text-muted);line-height:1.4}.tool-card-arrow{font-size:.95rem;color:var(--text-muted);align-self:center;flex-shrink:0;transition:transform .15s,color .15s}.tool-card:hover .tool-card-arrow{transform:translate(3px);color:var(--primary)}.hero{background:linear-gradient(135deg,var(--primary-light) 0%,var(--bg) 65%);border-bottom:1px solid var(--border);padding:4rem 0 3rem}.hero-inner{display:flex;flex-direction:column;gap:1.25rem;max-width:640px}.hero-badge{display:inline-block;background:var(--primary-light);color:var(--primary);border:1px solid var(--primary);padding:.28rem .85rem;border-radius:99px;font-size:.75rem;font-weight:600;letter-spacing:.03em;width:fit-content}.hero h1{font-size:clamp(2rem,5vw,2.9rem);font-weight:800;line-height:1.15}.hero p{font-size:1rem;color:var(--text-muted);line-height:1.75;max-width:520px}.hero-search input{font-size:1rem;padding:.75rem 1rem;border-radius:var(--radius-md);border:1.5px solid var(--border);box-shadow:var(--shadow-sm);max-width:460px;width:100%}.hero-stats{display:flex;gap:2rem;padding-top:.25rem}.stat{display:flex;flex-direction:column}.stat span{font-size:1.75rem;font-weight:800;color:var(--primary);line-height:1}.stat small{font-size:.75rem;color:var(--text-muted);margin-top:.2rem}.sections{padding-top:3rem;padding-bottom:3rem;display:flex;flex-direction:column;gap:3.5rem}.section-header{display:flex;align-items:center;gap:.65rem;margin-bottom:1.1rem}.section-header h2{font-size:1.2rem;font-weight:700}.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:.7rem}@media(max-width:768px){.hero{padding:2rem 0 1.75rem}.sections{padding:2rem 0;gap:2.5rem}.tool-grid{grid-template-columns:1fr}.hero-stats{gap:1.5rem}}.faq-section{margin-top:3rem}.faq-section h2{font-size:1.25rem;font-weight:700;margin-bottom:1rem}.faq-list{display:flex;flex-direction:column;gap:.5rem}.faq-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}.faq-item summary{padding:.9rem 1.1rem;font-weight:500;font-size:.875rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none}.faq-item summary:after{content:"+";font-size:1.2rem;color:var(--text-muted);font-weight:300}.faq-item[open] summary:after{content:"−"}.faq-answer{padding:0 1.1rem .9rem}.faq-answer p{font-size:.85rem;color:var(--text-muted);line-height:1.7}.tool-page{padding-top:1.75rem;padding-bottom:4rem}.breadcrumb{display:flex;align-items:center;gap:.45rem;font-size:.8rem;color:var(--text-muted);margin-bottom:1.5rem}.breadcrumb a{color:var(--text-muted)}.breadcrumb a:hover{color:var(--primary);text-decoration:none}.tool-header{margin-bottom:1.5rem}.tool-header h1{font-size:1.75rem;font-weight:700;margin-bottom:.35rem}.tool-header p{font-size:.95rem}.tool-content{padding:1.5rem}@media(max-width:768px){.tool-page{padding-top:1.25rem;padding-bottom:2.5rem}.tool-content{padding:1rem}.tool-header h1{font-size:1.4rem}}.tool-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;margin-bottom:.75rem}.editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}.editor-pane{display:flex;flex-direction:column}.pane-label-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:.35rem}.pane-label-row label{margin:0}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}.stat-box{background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius-md);padding:1rem;display:flex;flex-direction:column;align-items:center;gap:.25rem}.stat-box-accent{background:var(--primary-light);border-color:var(--primary)}.stat-num{font-size:1.75rem;font-weight:800;color:var(--primary);line-height:1}.stat-label{font-size:.75rem;color:var(--text-muted);text-align:center}.mode-toggle{display:flex;gap:.4rem}.checkbox-label{display:flex;align-items:center;font-size:.875rem;font-weight:500;color:var(--text-muted);cursor:pointer;-webkit-user-select:none;user-select:none;margin:0}@media(max-width:768px){.editor-grid{grid-template-columns:1fr}.stats-grid{grid-template-columns:1fr 1fr}.tool-toolbar{flex-direction:column;align-items:flex-start}}@media(max-width:480px){.stats-grid{grid-template-columns:1fr}}.hash-list{display:flex;flex-direction:column;gap:.75rem}.hash-row{background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.9rem 1rem}.hash-label-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem}.hash-algo{font-weight:700;font-size:.85rem}.hash-value-row{display:flex;align-items:center;gap:.75rem}.hash-value{font-family:var(--font-mono);font-size:.78rem;word-break:break-all;flex:1;color:var(--text)}.jwt-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.jwt-section-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:.4rem}.jwt-pre{background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.9rem 1rem;font-family:var(--font-mono);font-size:.82rem;white-space:pre-wrap;word-break:break-word;color:var(--text);margin:0}@media(max-width:768px){.jwt-grid{grid-template-columns:1fr}}.ts-live{display:flex;justify-content:space-between;align-items:center;gap:1rem}.ts-live-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:.25rem}.ts-live-value{font-family:var(--font-mono);font-size:2rem;font-weight:800;color:var(--primary);line-height:1}.ts-live-sub{margin-top:.25rem}.ts-section h3{font-size:1rem;font-weight:600}.ts-result{background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.9rem 1rem;display:flex;flex-direction:column;gap:.5rem}.ts-result-row{display:flex;align-items:center;gap:1rem}.ts-result-row span:first-child{width:90px;flex-shrink:0}.regex-pattern-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:.75rem}.regex-input-wrap{display:flex;align-items:center;flex:1;min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}.regex-slash{padding:0 .5rem;font-family:var(--font-mono);font-size:1.2rem;color:var(--primary);flex-shrink:0}.regex-input{border:none!important;border-radius:0!important;box-shadow:none!important;flex:1}.regex-flags{border:none!important;border-left:1px solid var(--border)!important;border-radius:0!important;box-shadow:none!important}.regex-highlight-box{background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.9rem 1rem;font-family:var(--font-mono);font-size:.85rem;white-space:pre-wrap;word-break:break-word;line-height:1.8;min-height:60px}.regex-match{background:#fef08a;color:#713f12;border-radius:2px;padding:0 1px}[data-theme=dark] .regex-match{background:#854d0e;color:#fef08a}.regex-match-list{display:flex;flex-direction:column;gap:.4rem}.regex-match-item{display:flex;align-items:center;gap:.75rem;background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.5rem .9rem;font-size:.85rem;flex-wrap:wrap}.regex-match-idx{font-weight:700;color:var(--text-muted);min-width:2rem}.color-layout{display:flex;gap:1.5rem;align-items:flex-start}.color-preview-col{display:flex;flex-direction:column;align-items:center;gap:.75rem;flex-shrink:0}.color-swatch{width:120px;height:120px;border-radius:var(--radius-md);border:2px solid var(--border);box-shadow:var(--shadow-md)}.color-native-picker{width:120px!important;height:40px!important;padding:2px!important;cursor:pointer;border-radius:var(--radius-sm)}.color-inputs-col{flex:1;display:flex;flex-direction:column;gap:1rem}.color-field{display:flex;flex-direction:column}.rgb-inputs{display:flex;gap:.5rem}.rgb-channel{display:flex;flex-direction:column;align-items:center;gap:.25rem;flex:1}.rgb-label{font-size:.7rem;font-weight:700;color:var(--text-muted)}.rgb-channel input{text-align:center;padding:.5rem .25rem}@media(max-width:600px){.color-layout{flex-direction:column}.color-swatch{width:100%;height:80px}.color-native-picker{width:100%!important}}.diff-output{display:flex;flex-direction:column}.diff-output label{margin-bottom:.4rem}.diff-view{background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:.82rem;overflow-x:auto;max-height:400px;overflow-y:auto}.diff-line{display:flex;gap:.75rem;padding:.2rem .75rem;line-height:1.6;white-space:pre}.diff-same{color:var(--text-muted)}.diff-add{background:#dcfce7;color:#166534}.diff-remove{background:#fee2e2;color:#991b1b}[data-theme=dark] .diff-add{background:#14532d;color:#86efac}[data-theme=dark] .diff-remove{background:#450a0a;color:#fca5a5}.diff-marker{width:1rem;flex-shrink:0;font-weight:700}.diff-added-count{color:var(--success);font-weight:600}.diff-removed-count{color:var(--error);font-weight:600}.calc-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem}.calc-field{display:flex;flex-direction:column}.calc-result{background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius-md);padding:1.5rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.5rem}.calc-big-num{font-size:3rem;font-weight:800;color:var(--primary);line-height:1}.calc-label{font-size:.85rem;color:var(--text-muted)}.bmi-value{font-size:4rem;font-weight:800;line-height:1}.bmi-category{display:inline-block;padding:.35rem 1rem;border-radius:99px;font-weight:600;font-size:.9rem}.bmi-scale{display:flex;width:100%;height:12px;border-radius:99px;overflow:hidden;gap:2px}.bmi-scale-item{flex:1;border-radius:4px}.emi-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}.emi-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1rem;text-align:center}.emi-box-num{font-size:1.5rem;font-weight:800;color:var(--primary)}.emi-box-label{font-size:.75rem;color:var(--text-muted);margin-top:.25rem}.emi-table{width:100%;border-collapse:collapse;font-size:.82rem;margin-top:1rem}.emi-table th,.emi-table td{padding:.5rem .75rem;text-align:right;border-bottom:1px solid var(--border)}.emi-table th{background:var(--surface-alt);font-weight:600;color:var(--text-muted);text-transform:uppercase;font-size:.72rem;letter-spacing:.03em}.emi-table td:first-child,.emi-table th:first-child{text-align:left}.age-result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}.pct-section{background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius-md);padding:1.25rem}.pct-section h3{font-size:.9rem;font-weight:600;margin-bottom:.75rem}.pct-result{font-size:1.5rem;font-weight:800;color:var(--primary);margin-top:.5rem}.uuid-list{display:flex;flex-direction:column;gap:.4rem}.uuid-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.6rem 1rem}.uuid-row code{font-family:var(--font-mono);font-size:.82rem;word-break:break-all}.mode-buttons{display:flex;flex-wrap:wrap;gap:.5rem}@media(max-width:600px){.emi-summary,.age-result-grid{grid-template-columns:1fr}}.converter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}.converter-field{display:flex;flex-direction:column}@media(max-width:600px){.converter-grid{grid-template-columns:1fr}}#root{display:flex;flex-direction:column;min-height:100vh}:root{--bg: #f8fafc;--surface: #ffffff;--surface-alt: #f1f5f9;--border: #e2e8f0;--text: #1e293b;--text-muted: #64748b;--primary: #6366f1;--primary-hover: #4f46e5;--primary-light: #eef2ff;--success: #10b981;--error: #ef4444;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--shadow-sm: 0 1px 3px rgba(0,0,0,.07);--shadow-md: 0 4px 16px rgba(0,0,0,.1);--font: "Inter", system-ui, -apple-system, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--header-h: 64px;--max-w: 1200px}[data-theme=dark]{--bg: #0f172a;--surface: #1e293b;--surface-alt: #273448;--border: #334155;--text: #f1f5f9;--text-muted: #94a3b8;--primary: #818cf8;--primary-hover: #6366f1;--primary-light: #1e1b4b}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh;display:flex;flex-direction:column;transition:background .2s,color .2s}a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}img,svg{max-width:100%;display:block}.container{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 1.25rem}.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1.1rem;border:none;border-radius:var(--radius-sm);font-size:.875rem;font-weight:500;cursor:pointer;transition:background .15s,opacity .15s;font-family:var(--font);line-height:1.4}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-hover)}.btn-secondary{background:var(--surface-alt);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover{background:var(--border)}.btn-sm{padding:.3rem .75rem;font-size:.8rem}input,textarea,select{font-family:var(--font);font-size:.9rem;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.6rem .9rem;width:100%;outline:none;transition:border-color .15s}input:focus,textarea:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 3px #6366f11f}textarea{font-family:var(--font-mono);font-size:.85rem;resize:vertical;min-height:180px}label{display:block;font-size:.875rem;font-weight:500;color:var(--text-muted);margin-bottom:.35rem}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:1.5rem;box-shadow:var(--shadow-sm)}.badge{display:inline-block;padding:.15rem .55rem;border-radius:99px;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;background:var(--primary-light);color:var(--primary)}.alert{padding:.7rem 1rem;border-radius:var(--radius-sm);font-size:.85rem;border-left:3px solid}.alert-success{background:#ecfdf5;border-color:var(--success);color:#065f46}.alert-error{background:#fef2f2;border-color:var(--error);color:#991b1b}[data-theme=dark] .alert-success{background:#022c22;color:#6ee7b7}[data-theme=dark] .alert-error{background:#2d0a0a;color:#fca5a5}#copy-toast{position:fixed;bottom:1.5rem;right:1.5rem;background:#1e293b;color:#fff;padding:.55rem 1.1rem;border-radius:var(--radius-sm);font-size:.85rem;opacity:0;pointer-events:none;transition:opacity .2s;z-index:9999}#copy-toast.show{opacity:1}.text-muted{color:var(--text-muted)}.text-sm{font-size:.875rem}.font-mono{font-family:var(--font-mono)}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.gap-2{gap:.75rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}@media(max-width:768px){.hide-mobile{display:none!important}}