@import "https://fonts.googleapis.com/css2?family=Product+Sans:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap";
:root{--bg-primary:#fff;--bg-secondary:#f8f9fa;--bg-tertiary:#f1f3f4;--accent-blue:#1a73e8;--accent-blue-hover:#1557b0;--text-primary:#202124;--text-secondary:#5f6368;--text-tertiary:#70757a;--border-color:#dadce0;--shadow-sm:0 1px 2px #0000001a;--shadow-md:0 2px 8px #00000026;--shadow-lg:0 4px 16px #0003;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--transition:all .2s ease;--font-main:"Product Sans","Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}@media (prefers-color-scheme:dark){:root{--bg-primary:#1a1a1a;--bg-secondary:#252525;--bg-tertiary:#2d2d2d;--text-primary:#e8eaed;--text-secondary:#9aa0a6;--text-tertiary:#70757a;--border-color:#3c4043}}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-main);background-color:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;min-height:100vh;line-height:1.6}main{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:0 1rem}h1,h2,h3,h4,h5,h6{font-family:var(--font-main);color:var(--text-primary);margin-bottom:.5em;line-height:1.3}h1{font-size:2.5rem;font-weight:500}h2{font-size:2rem;font-weight:500}h3{font-size:1.5rem;font-weight:500}h4{font-size:1.25rem;font-weight:500}p{color:var(--text-secondary);margin-bottom:1em}a{color:var(--accent-blue);transition:var(--transition);text-decoration:none}a:hover{text-decoration:underline}header{background:var(--bg-primary);border-bottom:1px solid var(--border-color);z-index:100;padding:.75rem 1.5rem;position:sticky;top:0}.header-inner{justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;display:flex}.logo{color:var(--text-primary);align-items:center;gap:.5rem;font-size:1.25rem;font-weight:500;text-decoration:none;display:flex}.logo:hover{text-decoration:none}.logo-icon{background:var(--accent-blue);border-radius:var(--radius-sm);color:#fff;justify-content:center;align-items:center;width:32px;height:32px;font-weight:700;display:flex}nav ul{gap:1.5rem;list-style:none;display:flex}.nav-link{color:var(--text-secondary);border-radius:var(--radius-sm);padding:.5rem;font-size:.875rem;font-weight:500}.nav-link:hover{background:var(--bg-secondary);text-decoration:none}.search-container{text-align:center;max-width:600px;margin:2rem auto}.search-box{background:var(--bg-secondary);border:1px solid var(--border-color);transition:var(--transition);border-radius:24px;align-items:center;padding:.75rem 1.25rem;display:flex}.search-box:focus-within{border-color:var(--accent-blue);box-shadow:var(--shadow-md)}.search-input{color:var(--text-primary);background:0 0;border:none;outline:none;flex:1;font-size:1rem}.tools-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;padding:1rem 0;display:grid}.tool-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);transition:var(--transition);padding:1.25rem;text-decoration:none;display:block}.tool-card:hover{border-color:var(--accent-blue);box-shadow:var(--shadow-sm);text-decoration:none}.tool-card h3{margin-bottom:.5rem;font-size:1.1rem}.tool-card p{color:var(--text-secondary);margin:0;font-size:.875rem}.input-field,input[type=text],input[type=number],textarea,select{border:1px solid var(--border-color);border-radius:var(--radius-md);width:100%;font-size:1rem;font-family:var(--font-main);background:var(--bg-primary);color:var(--text-primary);transition:var(--transition);padding:.75rem 1rem}.input-field:focus,input:focus,textarea:focus,select:focus{border-color:var(--accent-blue);outline:none;box-shadow:0 0 0 2px #1a73e833}.btn-primary,button,.button{background:var(--accent-blue);color:#fff;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition);font-size:.875rem;font-weight:500;font-family:var(--font-main);border:none;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1.5rem;display:inline-flex}.btn-primary:hover,button:hover{background:var(--accent-blue-hover);box-shadow:var(--shadow-sm)}.btn-secondary{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{background:var(--bg-tertiary)}.tool-container{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);margin:1rem 0;padding:2rem}.content-section{margin:2rem 0}.content-section h2{border-bottom:1px solid var(--border-color);margin-bottom:1rem;padding-bottom:.5rem}.faq-item{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);margin-bottom:1rem;overflow:hidden}.faq-question{cursor:pointer;justify-content:space-between;align-items:center;padding:1rem;font-weight:500;display:flex}.faq-answer{color:var(--text-secondary);padding:0 1rem 1rem;display:none}.faq-item.active .faq-answer{display:block}footer{background:var(--bg-secondary);border-top:1px solid var(--border-color);margin-top:3rem;padding:2rem}footer a{color:var(--text-secondary);margin:0 .75rem}footer a:hover{color:var(--accent-blue)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2rem}.flex{display:flex}.flex-center{justify-content:center;align-items:center;display:flex}.flex-between{justify-content:space-between;align-items:center;display:flex}.gap-1{gap:.5rem}.gap-2{gap:1rem}.gap-3{gap:1.5rem}@media (max-width:768px){h1{font-size:1.75rem}h2{font-size:1.5rem}.tools-grid{grid-template-columns:1fr}nav ul{flex-wrap:wrap;gap:.5rem}.tool-container{padding:1rem}}.breadcrumb{color:var(--text-secondary);align-items:center;gap:.5rem;margin-bottom:1rem;font-size:.875rem;display:flex}.breadcrumb a{color:var(--accent-blue)}.breadcrumb span{color:var(--text-primary)}article{max-width:800px;margin:0 auto}.loading{opacity:.6;pointer-events:none}.skeleton{background:linear-gradient(90deg,var(--bg-tertiary)25%,var(--bg-secondary)50%,var(--bg-tertiary)75%);border-radius:var(--radius-sm);background-size:200% 100%;animation:1.5s infinite skeleton-loading}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}@media print{header,footer,.no-print{display:none}body{color:#000;background:#fff}}