:root{
  --bg:#ffffff;
  --surface:#F3F5F4;
  --ink:#12181A;
  --ink-soft:#1E2328;
  --primary:#146356;
  --primary-dark:#0E4A40;
  --accent:#FF6A4D;
  --border:#E1E5E3;
  --card-bg:#ffffff;
  --radius:14px;
}
html[data-theme="dark"]{
  --bg:#0E1416; --surface:#161D1F; --ink:#F2F5F4; --ink-soft:#9AA5A3;
  --primary:#2FA98D; --primary-dark:#25846E; --border:#26302E; --card-bg:#161D1F;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
[id]{scroll-margin-top:90px;}
body{margin:0;font-family:'Inter',sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;transition:background .3s ease,color .3s ease;}
h1,h2,h3,.display{font-family:'Space Grotesk',sans-serif;letter-spacing:-0.02em;margin:0;}
.mono{font-family:'IBM Plex Mono',monospace;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px;}

/* NAV */
header.site{position:sticky;top:0;z-index:50;background:color-mix(in srgb, var(--bg) 92%, transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);}
nav.main{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:16px;}
.logo{display:flex;align-items:center;gap:8px;font-size:19px;font-weight:700;}
.logo svg{width:26px;height:26px;flex-shrink:0;}
.nav-links{display:flex;gap:26px;font-size:14px;font-weight:500;color:var(--ink-soft);}
.nav-links a:hover{color:var(--primary);}
.nav-right{display:flex;align-items:center;gap:14px;}
.nav-cta{background:var(--primary);color:#fff;padding:9px 18px;border-radius:999px;font-size:14px;font-weight:600;white-space:nowrap;}
.nav-cta:hover{background:var(--primary-dark);}
.theme-toggle{width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:var(--surface);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
.theme-toggle svg{width:18px;height:18px;color:var(--ink);}
@media (max-width:860px){.nav-links{display:none;}}

/* BREADCRUMB */
.breadcrumb{padding-top:16px;padding-bottom:16px;font-size:13.5px;color:var(--ink-soft);}
.breadcrumb a{margin-right:2px;}
.breadcrumb a:hover{color:var(--primary);}
.breadcrumb .sep{margin:0 6px;opacity:0.5;}

/* TOOL HERO */
.tool-hero{padding:12px 0 36px;}
.tool-hero .cat-tag{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--primary);background:color-mix(in srgb, var(--primary) 12%, transparent);padding:5px 12px;border-radius:999px;margin-bottom:14px;}
.tool-hero h1{font-size:36px;font-weight:700;}
@media (max-width:560px){.tool-hero h1{font-size:27px;}}
.tool-hero p.lead{font-size:16px;color:var(--ink-soft);margin-top:12px;max-width:640px;line-height:1.6;}

/* TOOL CARD (the actual widget container) */
.tool-panel{background:var(--card-bg);border:1px solid var(--border);border-radius:20px;padding:32px;margin:28px 0;box-shadow:0 20px 50px -30px rgba(20,24,26,0.15);}
@media (max-width:560px){.tool-panel{padding:20px;}}
.field-label{font-size:13px;font-weight:600;color:var(--ink-soft);margin-bottom:6px;display:block;}
.field{width:100%;border:1.5px solid var(--border);border-radius:10px;padding:12px 14px;font-size:15px;font-family:'Inter',sans-serif;background:var(--bg);color:var(--ink);outline:none;}
.field:focus{border-color:var(--primary);}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:560px){.field-row{grid-template-columns:1fr;}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 24px;border-radius:12px;font-size:15px;font-weight:600;transition:transform .15s ease;cursor:pointer;border:none;}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-2px);}
.btn-secondary{background:var(--surface);color:var(--ink);border:1px solid var(--border);}
.btn-secondary:hover{transform:translateY(-2px);border-color:var(--primary);}
.result-box{margin-top:22px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px;display:none;}
.result-box.show{display:block;}
.result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px;}
.result-item .num{font-family:'IBM Plex Mono',monospace;font-size:26px;font-weight:700;color:var(--primary);}
.result-item .lbl{font-size:12.5px;color:var(--ink-soft);margin-top:4px;}
.toolbar-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;border-top:1px solid var(--border);padding-top:20px;}
.pct-tab.active{background:var(--primary);color:#fff;border-color:var(--primary);}

/* ARTICLE / SECTIONS */
.tool-section{padding-top:32px;padding-bottom:32px;border-top:1px solid var(--border);}
.tool-section p{line-height:1.75;margin-bottom:14px;}
.tool-section p:last-child{margin-bottom:0;}
.tool-section h2{font-size:22px;font-weight:700;margin-bottom:16px;}
.steps{counter-reset:step;list-style:none;padding:0;margin:0;}
.steps li{position:relative;padding-left:44px;margin-bottom:16px;font-size:15px;color:var(--ink-soft);line-height:1.6;}
.steps li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;width:30px;height:30px;background:var(--primary);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;font-family:'IBM Plex Mono',monospace;}
.video-embed{aspect-ratio:16/9;background:var(--surface);border:1px solid var(--border);border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--ink-soft);font-size:14px;gap:8px;overflow:hidden;position:relative;}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:none;}
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
@media (max-width:820px){.features-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.features-grid{grid-template-columns:1fr;}}
.feature-card{border:1px solid var(--border);border-radius:12px;padding:18px;text-align:center;background:var(--card-bg);}
.feature-card .ico{font-size:26px;margin-bottom:8px;}
.feature-card h4{font-size:14.5px;font-weight:600;}

/* FAQ ACCORDION */
.faq-item{border:1px solid var(--border);border-radius:12px;margin-bottom:10px;overflow:hidden;background:var(--card-bg);}
.faq-q{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;cursor:pointer;font-size:15px;font-weight:600;}
.faq-q .chev{transition:transform .25s ease;color:var(--primary);}
.faq-item.open .faq-q .chev{transform:rotate(180deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;font-size:14.5px;color:var(--ink-soft);line-height:1.6;}
.faq-item.open .faq-a{max-height:200px;}
.faq-a p{margin:0;padding:0 18px 16px;}

/* AI ASSISTANT */
.ai-panel{background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, transparent), color-mix(in srgb, var(--primary) 3%, transparent));border:1px solid var(--border);border-radius:16px;padding:24px;}
.ai-panel h3{font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px;}
.ai-q{background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin-top:12px;cursor:pointer;font-size:14.5px;font-weight:600;}
.ai-q:hover{border-color:var(--primary);}
.ai-a{font-size:14px;color:var(--ink-soft);padding:0 16px;margin-top:-4px;display:none;line-height:1.6;}
.ai-a.show{display:block;padding-bottom:14px;}
.ai-input-row{display:flex;gap:10px;margin-top:16px;}
.ai-input-row input{flex:1;}

/* RELATED TOOLS */
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media (max-width:760px){.related-grid{grid-template-columns:1fr;}}
.related-card{display:flex;align-items:center;gap:12px;border:1px solid var(--border);border-radius:12px;padding:16px;background:var(--card-bg);transition:all .2s ease;}
.related-card:hover{border-color:var(--primary);transform:translateY(-3px);}
.related-emoji{font-size:22px;width:42px;height:42px;border-radius:10px;background:var(--surface);display:flex;align-items:center;justify-content:center;flex-shrink:0;}

/* COMMENTS PLACEHOLDER */
.comments-placeholder{border:1px dashed var(--border);border-radius:14px;padding:28px;text-align:center;color:var(--ink-soft);font-size:14px;}
.comment-box{margin-top:6px;}
.comment-input-row{display:flex;gap:10px;flex-wrap:wrap;}
.comment-input-row .field{flex:1;min-width:200px;}
.comment-list{margin-top:18px;}
.comment-item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--border);}
.comment-item:last-child{border-bottom:none;}
.comment-avatar{width:36px;height:36px;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.comment-meta{font-size:12px;color:var(--ink-soft);margin-bottom:4px;}
.comment-text{font-size:14px;line-height:1.5;}

/* FOOTER */
footer.site{border-top:1px solid var(--border);padding:56px 0 28px;margin-top:20px;background:var(--surface);}

/* Compact tool-page footer */
.compact-footer{max-width:1200px;margin:0 auto;padding:26px 32px 14px;border-top:1px solid var(--border);margin-top:20px;text-align:center;background:var(--surface);}
.compact-footer-links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;}
.compact-footer-links a{font-size:13px;color:var(--ink-soft);text-decoration:underline;}
.compact-footer-links a:hover{color:var(--primary);}
.compact-footer-links .sep{color:var(--border);font-size:13px;}
.compact-footer-copy{text-align:center;font-size:12px;color:var(--ink-soft);padding:14px 32px 24px;background:var(--surface);}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:32px;margin-bottom:36px;}
@media (max-width:900px){.footer-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}
.footer-brand p{font-size:13.5px;color:var(--ink-soft);margin-top:12px;line-height:1.6;max-width:280px;}
.footer-col h5{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);margin-bottom:14px;}
.footer-col a{display:block;font-size:14px;color:var(--ink);margin-bottom:10px;}
.footer-col a:hover{color:var(--primary);}
.footer-bottom{border-top:1px solid var(--border);padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--ink-soft);}

/* MISC */
.two-col{display:grid;grid-template-columns:1.3fr 1fr;gap:32px;}
@media (max-width:900px){.two-col{grid-template-columns:1fr;}}
input[type=range]{accent-color:var(--primary);width:100%;}
.upload-drop{border:2px dashed var(--border);border-radius:14px;padding:32px;text-align:center;cursor:pointer;transition:all .2s ease;}
.upload-drop:hover{border-color:var(--primary);background:var(--surface);}
.upload-drop svg{color:var(--primary);margin-bottom:10px;}
.file-list{margin-top:14px;}
.file-chip{display:flex;justify-content:space-between;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 14px;font-size:13.5px;margin-bottom:8px;}
.strength-bar{height:8px;border-radius:99px;background:var(--border);overflow:hidden;margin-top:10px;}
.strength-bar div{height:100%;transition:all .3s ease;}
.copy-btn{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:13px;font-weight:600;cursor:pointer;}
.copy-btn:hover{border-color:var(--primary);color:var(--primary);}
table{width:100%;border-collapse:collapse;}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
@media (max-width:560px){.btn{min-height:44px;}}