.layout{display:flex;flex-direction:column;min-height:100vh;background-color:var(--slate-50)}@media(min-width:768px){.layout{flex-direction:row}}.mobile-header{background-color:var(--slate-900);color:#fff;padding:var(--space-4);display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:50;box-shadow:var(--shadow-md)}@media(min-width:768px){.mobile-header{display:none}}.logo{display:flex;align-items:center;gap:var(--space-2);font-weight:700;font-size:1.125rem}.logo svg{color:var(--blue-400)}.sidebar{position:fixed;top:0;left:0;height:100vh;width:256px;background-color:var(--slate-900);color:var(--slate-300);display:flex;flex-direction:column;transition:transform .3s ease-in-out;z-index:40}.sidebar--closed{transform:translate(-100%)}.sidebar--open{transform:translate(0)}@media(min-width:768px){.sidebar{position:sticky;transform:translate(0)}}.sidebar-header{padding:var(--space-6);display:none;align-items:center;gap:var(--space-2);font-weight:700;font-size:1.25rem;color:#fff;border-bottom:1px solid var(--slate-800)}@media(min-width:768px){.sidebar-header{display:flex}}.sidebar-nav{flex:1;overflow-y:auto;padding:var(--space-6) var(--space-3);display:flex;flex-direction:column;gap:var(--space-1)}.nav-section-title{padding:0 var(--space-3);margin-bottom:var(--space-2);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--slate-500)}.nav-link{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border-radius:var(--radius-lg);transition:background-color .2s,color .2s;font-weight:500}.nav-link:hover{background-color:var(--slate-800);color:#fff}.nav-link--active{background-color:var(--blue-600);color:#fff;box-shadow:0 10px 15px -3px #1e3a8a80}.sidebar-footer{padding:var(--space-4);border-top:1px solid var(--slate-800);font-size:.75rem;color:var(--slate-500);text-align:center}.privacy-badge{padding:var(--space-4)}.privacy-card{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-3);border-radius:var(--radius-xl);background-color:#1e293b80;border:1px solid rgba(51,65,85,.5);text-align:center;transition:all .2s}.privacy-card:hover{background-color:var(--slate-800);border-color:#10b9814d}.privacy-icon-wrapper{width:40px;height:40px;margin:0 auto;border-radius:50%;background-color:#10b9811a;display:flex;align-items:center;justify-content:center;color:var(--emerald-400);transition:transform .2s}.privacy-card:hover .privacy-icon-wrapper{transform:scale(1.1)}.privacy-title{font-size:.75rem;font-weight:700;color:var(--slate-100);text-transform:uppercase;letter-spacing:.1em;margin-bottom:2px}.privacy-desc{font-size:10px;color:var(--slate-400);line-height:1.25}.main-content{flex:1;display:flex;flex-direction:column;min-width:0;height:100vh;overflow-y:auto}.content-wrapper{max-width:1536px;width:100%;margin:0 auto;padding:var(--space-4);flex:1;display:flex;flex-direction:column}@media(min-width:768px){.content-wrapper{padding:var(--space-8)}}.page-header{margin:var(--space-4) 0}.page-title{font-size:1.5rem;font-weight:700;color:var(--slate-900)}@media(min-width:768px){.page-title{font-size:1.875rem}}.page-subtitle{color:var(--slate-500);margin-top:var(--space-1)}.content-card{background-color:#fff;border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);border:1px solid var(--slate-200);flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:500px}.mobile-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#00000080;z-index:30}@media(min-width:768px){.mobile-overlay{display:none}}.home-container{padding:var(--space-4);height:100%;overflow-y:auto}@media(min-width:768px){.home-container{padding:var(--space-6)}}@media(min-width:1024px){.home-container{padding:var(--space-8)}}.home-hero{text-align:center;max-width:672px;margin:0 auto var(--space-12)}.home-title{font-size:1.875rem;font-weight:800;color:var(--slate-900);margin-bottom:var(--space-4)}@media(min-width:768px){.home-title{font-size:2.25rem}}.home-subtitle{color:var(--slate-600);font-size:1.125rem}.tools-grid{display:grid;grid-template-columns:1fr;gap:var(--space-6)}@media(min-width:768px){.tools-grid{grid-template-columns:repeat(2,1fr)}}@media(min-width:1024px){.tools-grid{grid-template-columns:repeat(3,1fr)}}@media(min-width:1280px){.tools-grid{grid-template-columns:repeat(4,1fr)}}@media(min-width:1536px){.tools-grid{grid-template-columns:repeat(5,1fr)}}.tool-card{display:flex;flex-direction:column;padding:var(--space-6);border-radius:var(--radius-xl);border:1px solid transparent;transition:all .3s}.tool-card:hover{box-shadow:var(--shadow-md)}.tool-icon-box{margin-bottom:var(--space-4);background-color:#fff;width:56px;height:56px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);transition:transform .3s}.tool-card:hover .tool-icon-box{transform:scale(1.1)}.tool-card-title{font-size:1.25rem;font-weight:700;color:var(--slate-900);margin-bottom:var(--space-2);transition:color .2s}.tool-card:hover .tool-card-title{color:var(--blue-600)}.tool-card-desc{color:var(--slate-600);margin-bottom:var(--space-4);font-size:.875rem;line-height:1.625}.tool-card-link{display:flex;align-items:center;color:var(--blue-600);font-weight:600;font-size:.875rem;margin-top:auto}.tool-card-link svg{margin-left:var(--space-1);transition:transform .3s}.tool-card:hover .tool-card-link svg{transform:translate(4px)}.tool-blue{background-color:var(--blue-50);border-color:var(--blue-100)}.tool-green{background-color:var(--green-50);border-color:var(--green-100)}.tool-orange{background-color:var(--orange-50);border-color:var(--orange-100)}.tool-pink{background-color:var(--pink-50);border-color:var(--pink-100)}.tool-purple{background-color:var(--purple-50);border-color:var(--purple-100)}.home-info-section{margin-top:var(--space-16);background-color:var(--slate-100);border-radius:var(--radius-lg);padding:var(--space-6);text-align:center;border:1px solid var(--slate-200)}.home-info-title{font-weight:700;color:var(--slate-800);margin-bottom:var(--space-2)}.home-info-desc{color:var(--slate-500);font-size:.875rem;max-width:672px;margin:0 auto}.tool-container{display:flex;flex-direction:column;height:100%;min-height:70vh}.tool-header{padding:var(--space-3);border-bottom:1px solid var(--slate-100);display:flex;justify-content:space-between;align-items:center;background-color:var(--slate-50)}@media(min-width:768px){.tool-header{padding:var(--space-4)}}.tool-title-small{font-weight:600;color:var(--slate-700)}.tool-actions{display:flex;gap:var(--space-2);margin-left:auto}.tool-textarea{flex:1;width:100%;padding:var(--space-4);resize:none;border:none;outline:none;font-family:inherit;font-size:1.125rem;line-height:1.625;color:var(--slate-800);min-height:400px}@media(min-width:768px){.tool-textarea{padding:var(--space-6)}}.tool-textarea:focus{box-shadow:inset 0 0 0 2px #3b82f61a}.tool-stats-bar{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--slate-200);background-color:var(--slate-50);overflow:hidden}@media(min-width:768px){.tool-stats-bar{grid-template-columns:repeat(4,1fr)}}.stat-box{padding:var(--space-4);text-align:center;border-right:1px solid var(--slate-200)}.stat-box:last-child{border-right:none}@media(max-width:767px){.stat-box:nth-child(2n){border-right:none}}.stat-value{font-size:1.5rem;font-weight:700;color:var(--slate-800)}.stat-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--slate-500);margin-top:var(--space-1)}.btn{display:flex;align-items:center;gap:var(--space-2);padding:.5rem 1rem;font-size:.875rem;font-weight:700;border-radius:var(--radius-lg);transition:all .2s;box-shadow:var(--shadow-sm);border:1px solid var(--slate-300);background-color:#fff;color:var(--slate-700)}.btn:active{transform:scale(.95)}.btn:hover{background-color:var(--slate-50)}.btn-red{color:#dc2626}.btn-red:hover{background-color:#fef2f2;border-color:#fecaca}.tool-input-group{display:flex;align-items:center;gap:var(--space-2)}.tool-input{width:128px;padding:.5rem .75rem;border:1px solid var(--slate-300);border-radius:var(--radius-md);outline:none;font-family:inherit;font-size:.875rem}.tool-input:focus{border-color:var(--blue-500);box-shadow:0 0 0 2px #3b82f61a}.preset-group{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:flex-end}.preset-btn{padding:.25rem .75rem;font-size:.75rem;font-weight:700;border-radius:9999px;border:1px solid var(--slate-200);background-color:#fff;color:var(--slate-700);transition:all .2s}.preset-btn:hover{border-color:var(--blue-300);color:var(--blue-600)}.preset-btn--active{background-color:var(--blue-600);color:#fff;border-color:var(--blue-600);box-shadow:var(--shadow-md)}.tool-about-section{padding:var(--space-6);background-color:#fff;border-top:1px solid var(--slate-200)}.tool-about-title{font-size:.875rem;font-weight:700;color:var(--slate-900);margin-bottom:var(--space-2)}.tool-about-text{font-size:.875rem;color:var(--slate-600);line-height:1.625}.tool-dual-pane{display:flex;flex:1;flex-direction:column;min-height:500px}@media(min-width:768px){.tool-dual-pane{flex-direction:row}}.pane{flex:1;display:flex;flex-direction:column;border-right:1px solid var(--slate-200)}.pane:last-child{border-right:none}.pane-header{padding:var(--space-2) var(--space-4);background-color:var(--slate-50);border-bottom:1px solid var(--slate-200);display:flex;justify-content:space-between;align-items:center;font-size:.75rem;font-weight:600;color:var(--slate-600);text-transform:uppercase}.code-editor{flex:1;width:100%;padding:var(--space-4);font-family:Monaco,Menlo,Ubuntu Mono,Consolas,monospace;font-size:.875rem;border:none;background-color:#1e293b;color:#e2e8f0;resize:none;outline:none}:root{--font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";--slate-50: #f8fafc;--slate-100: #f1f5f9;--slate-200: #e2e8f0;--slate-300: #cbd5e1;--slate-400: #94a3b8;--slate-500: #64748b;--slate-600: #475569;--slate-700: #334155;--slate-800: #1e293b;--slate-900: #0f172a;--blue-50: #eff6ff;--blue-100: #dbeafe;--blue-400: #60a5fa;--blue-500: #3b82f6;--blue-600: #2563eb;--blue-900: #1e3a8a;--emerald-400: #34d399;--emerald-500: #10b981;--emerald-600: #059669;--orange-50: #fff7ed;--orange-100: #ffedd5;--orange-500: #f97316;--orange-600: #ea580c;--pink-50: #fdf2f8;--pink-100: #fce7f3;--pink-500: #ec4899;--pink-600: #db2777;--purple-50: #faf5ff;--purple-100: #f3e8ff;--purple-500: #a855f7;--purple-600: #9333ea;--green-50: #f0fdf4;--green-100: #dcfce7;--green-500: #22c55e;--green-600: #16a34a;--surface: #ffffff;--bg-main: var(--slate-50);--text-main: var(--slate-900);--text-muted: var(--slate-500);--border-color: var(--slate-200);--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--radius-sm: .125rem;--radius-md: .375rem;--radius-lg: .5rem;--radius-xl: .75rem;--radius-2xl: 1rem;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1)}@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/inter-v20-regular.woff2) format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/inter-v20-medium.woff2) format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/inter-v20-semibold.woff2) format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/inter-v20-bold.woff2) format("woff2")}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-sans);background-color:var(--bg-main);color:var(--text-main);line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh}h1,h2,h3,h4,h5,h6{color:var(--slate-900)}a{text-decoration:none;color:inherit}button{font-family:inherit;cursor:pointer}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--slate-100)}::-webkit-scrollbar-thumb{background:var(--slate-300);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--slate-400)}.code-editor::-webkit-scrollbar-track{background:var(--slate-800)}.code-editor::-webkit-scrollbar-thumb{background:var(--slate-600)}.code-editor::-webkit-scrollbar-thumb:hover{background:var(--slate-500)}.container{width:100%;max-width:1280px;margin-left:auto;margin-right:auto;padding-left:var(--space-4);padding-right:var(--space-4)}@media(min-width:768px){.container{padding-left:var(--space-8);padding-right:var(--space-8)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.flex{display:flex}.flex-col{flex-direction:column}.inline-flex{display:inline-flex}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.flex-1{flex:1 1 0%}.gap-1{gap:var(--space-1)}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.m-auto{margin:auto}.mx-auto{margin-left:auto;margin-right:auto}.my-4{margin-top:var(--space-4);margin-bottom:var(--space-4)}.mt-1{margin-top:var(--space-1)}.mt-2{margin-top:var(--space-2)}.mr-1{margin-right:var(--space-1)}.ml-2{margin-left:var(--space-2)}.ml-4{margin-left:var(--space-4)}.ml-6{margin-left:var(--space-6)}.p-2{padding:var(--space-2)}.p-3{padding:var(--space-3)}.p-4{padding:var(--space-4)}.p-6{padding:var(--space-6)}.px-2{padding-left:var(--space-2);padding-right:var(--space-2)}.px-4{padding-left:var(--space-4);padding-right:var(--space-4)}.py-1{padding-top:var(--space-1);padding-bottom:var(--space-1)}.py-2{padding-top:var(--space-2);padding-bottom:var(--space-2)}.text-xs{font-size:.75rem}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.text-2xl{font-size:1.5rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.font-medium{font-weight:500}.font-mono{font-family:Monaco,Menlo,Ubuntu Mono,Consolas,monospace}.uppercase{text-transform:uppercase}.tracking-widest{letter-spacing:.1em}.tracking-wider{letter-spacing:.05em}.italic{font-style:italic}.text-center{text-align:center}.text-gray-400{color:#9ca3af}.text-gray-500{color:#6b7280}.text-gray-800{color:#1f2937}.text-slate-400{color:var(--slate-400)}.text-slate-500{color:var(--slate-500)}.text-slate-800{color:var(--slate-800)}.text-purple-600{color:var(--purple-500)}.text-blue-600{color:var(--blue-600)}.text-green-600{color:var(--green-500)}.text-orange-600{color:var(--orange-500)}.bg-gray-100{background-color:#f3f4f6}.bg-purple-100{background-color:var(--purple-50)}.rounded-md{border-radius:var(--radius-md)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-full{border-radius:9999px}.border{border:1px solid var(--border-color)}.border-dashed{border-style:dashed}.border-gray-300{border-color:#d1d5db}