*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:16px;line-height:1.65;color:#1f3a3a;background:#fbfaf6}
a{color:#2a9d8f;text-decoration:none}a:hover{text-decoration:underline}
.skip-link{position:absolute;top:-100px;background:#2a9d8f;color:#fff;padding:12px 16px;z-index:1000}
.skip-link:focus{top:0}
.navbar{background:rgba(255,255,255,.95);border-bottom:1px solid #e3ddd0;padding:12px 20px;position:sticky;top:0;z-index:100}
.nav-inner{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}
.brand{font-weight:800;font-size:1.25rem;color:#2a9d8f}
.nav-links{display:none;gap:24px}
@media(min-width:768px){.nav-links{display:flex}}
.nav-links a{color:#455b5b;font-size:.9rem}
.hero{background:linear-gradient(135deg,#1e7268 0%,#2a9d8f 50%,#4bb3a4 100%);color:#fff;padding:100px 20px 60px;text-align:center}
.hero h1{font-size:2.5rem;margin-bottom:12px;font-weight:800;line-height:1.15}
.hero p{font-size:1.1rem;max-width:40rem;margin:0 auto;color:rgba(255,255,255,.9)}
section{padding:40px 20px;max-width:1200px;margin:0 auto}
section h2{font-size:1.75rem;margin-bottom:24px;text-align:center;font-weight:800}
.tool-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:640px){.tool-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.tool-grid{grid-template-columns:repeat(3,1fr)}}
.tool-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px 16px;background:#fff;border:1px solid #e3ddd0;border-radius:12px;transition:all .2s}
.tool-card:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(42,157,143,.15);border-color:#6bc4b7;text-decoration:none}
.tool-card h3{font-size:1rem;margin-bottom:8px;color:#1f3a3a}
.tool-card p{font-size:.85rem;color:#708585;margin-bottom:12px;flex:1}
.cat-pill{font-size:.7rem;font-weight:700;padding:4px 12px;background:#eaf7f5;color:#1e7268;border-radius:999px}
.tool-page{max-width:860px;margin:0 auto;padding:60px 20px 40px}
.breadcrumb{font-size:.85rem;color:#708585;margin-bottom:24px}
.tool-page h1{font-size:2rem;margin-bottom:12px;font-weight:800}
.tool-intro{font-size:1.05rem;color:#455b5b;margin-bottom:32px}
.tool-form{background:#fff;padding:28px;border:1px solid #e3ddd0;border-radius:12px;margin-bottom:36px}
.tool-form label{display:block;font-size:.85rem;font-weight:600;margin-bottom:6px;color:#1f3a3a}
.tool-form input,.tool-form textarea,.tool-form select{width:100%;padding:12px 14px;font-size:1rem;font-family:inherit;color:#1f3a3a;border:1.5px solid #cfc8b6;border-radius:8px;margin-bottom:16px;transition:border .2s}
.tool-form input:focus,.tool-form textarea:focus,.tool-form select:focus{outline:none;border-color:#2a9d8f;box-shadow:0 0 0 4px rgba(42,157,143,.12)}
.tool-form button{background:linear-gradient(135deg,#1e7268,#2a9d8f);color:#fff;border:none;padding:14px 28px;border-radius:8px;font-size:1rem;font-weight:700;cursor:pointer;width:100%;transition:transform .15s}
.tool-form button:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(42,157,143,.3)}
.tool-form .row{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:640px){.tool-form .row{grid-template-columns:1fr 1fr}}
.result-box{background:linear-gradient(135deg,#eaf7f5,#d9efeb);border:1px solid #6bc4b7;border-radius:12px;padding:24px;margin-top:24px;text-align:center}
.result-box h2{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:#708585;margin-bottom:8px;font-weight:700}
.result-value{font-size:2.75rem;font-weight:800;color:#1e7268;line-height:1.1;margin-bottom:8px}
.result-label{font-size:.9rem;color:#455b5b;font-weight:600}
.result-note{font-size:.85rem;color:#708585;margin-top:12px}
.error-box{background:#fee2e2;border-left:4px solid #dc2626;padding:12px 16px;border-radius:4px;margin-bottom:16px;color:#7f1d1d;font-size:.9rem}
.tool-content{margin-top:40px}
.tool-content h2{font-size:1.35rem;margin:32px 0 12px;text-align:left;font-weight:800}
.tool-content h3{font-size:1.1rem;margin:24px 0 10px;font-weight:700}
.tool-content p{margin-bottom:16px;color:#455b5b}
.tool-content ul,.tool-content ol{margin:0 0 16px 24px;color:#455b5b}
.tool-content li{margin-bottom:8px}
.tool-content table{width:100%;border-collapse:collapse;margin:16px 0;font-size:.9rem}
.tool-content th,.tool-content td{padding:10px 14px;text-align:left;border-bottom:1px solid #e3ddd0}
.tool-content th{background:#f3f0e8;font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em}
.slug-output{font-family:monospace;font-size:1.15rem;background:#fff;padding:14px 18px;border-radius:8px;border:1.5px dashed #6bc4b7;word-break:break-all;color:#1e7268;font-weight:700}
.placeholder-notice{background:#fff4e5;border-left:4px solid #e9c46a;padding:20px;border-radius:4px;margin:24px 0;color:#78350f}
.site-footer{background:#1f3a3a;color:#a8d5cf;padding:40px 20px 24px;text-align:center;margin-top:60px}
.footer-inner{max-width:1200px;margin:0 auto}
.footer-brand{font-weight:800;font-size:1.1rem;color:#fff;margin-bottom:20px}
.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 28px;margin-bottom:24px}
.footer-links a{color:#a8d5cf;font-size:.88rem}
.footer-links a:hover{color:#fff}
.footer-copy{font-size:.8rem;color:#7ba8a3}
.legal-page{max-width:800px;margin:0 auto;padding:60px 20px 40px}
.legal-page h1{font-size:2rem;margin-bottom:24px;font-weight:800}
.legal-page h2{font-size:1.35rem;margin:32px 0 12px;font-weight:700}
.legal-page p{margin-bottom:16px;color:#455b5b}
.info-box{background:#eaf7f5;border-left:4px solid #2a9d8f;padding:16px 20px;border-radius:4px;margin:24px 0;color:#1e7268;font-size:.92rem}