:root {
    --bg: #f3f7fd;
    --surface: #ffffff;
    --text: #162133;
    --muted: #5f6e82;
    --primary: #0f766e;
    --primary-dark: #0a5d57;
    --border: #d7e2ef;
    --radius: 14px;
    --shadow: 0 10px 28px rgba(15, 36, 64, .08);
}
html.dark {
    --bg: #0f1726;
    --surface: #1a2538;
    --text: #ecf2fb;
    --muted: #aebcd0;
    --primary: #1bb7a9;
    --primary-dark: #109789;
    --border: #33465c;
    --shadow: 0 10px 24px rgba(0,0,0,.35);
}
* { box-sizing: border-box; }
html { background: #f3f7fd; }
html.dark { background: #0f1726; }
body { margin:0; font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif; background: var(--bg); color:var(--text); min-height:100vh; }
.container { width:min(1120px,92%); margin:0 auto; }
.site-header { position: sticky; top:0; z-index:100; border-bottom:1px solid var(--border); backdrop-filter: blur(8px); background: rgba(255,255,255,.92); }
html.dark .site-header { background: rgba(26,37,56,.95); }
.nav-wrap { display:flex; gap:1rem; justify-content:space-between; align-items:center; padding:.8rem 0; flex-wrap:wrap; }
.logo { text-decoration:none; color:var(--text); font-weight:700; display:inline-flex; align-items:center; gap:.6rem; }
.logo-badge { width:36px; height:36px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(130deg,var(--primary),#2f9dfb); }
.nav-links { display:flex; gap:.9rem; flex-wrap:wrap; }
.nav-links a { text-decoration:none; color:var(--text); font-weight:600; }
.nav-links a:hover { color:var(--primary); }
.main-area { padding:1.5rem 0 2.5rem; }
.ad-placeholder { border:1px dashed #8eb4d6; border-radius:10px; padding:.8rem; text-align:center; color:var(--muted); background: linear-gradient(130deg,rgba(59,130,246,.08),rgba(15,118,110,.08)); min-height:90px; display:flex; align-items:center; justify-content:center; }
.ad-top { margin-top:.9rem; min-height:90px; }
.ad-inline { margin:1rem 0; min-height:90px; }
.tool-side { min-width:0; }
.tool-side .ad-placeholder { min-height:250px; }
.hero-grid { display:grid; grid-template-columns: 1.6fr 1fr; gap:1rem; }
.hero-card, .card, .tool-main, .tool-side, .simple-page { border:1px solid var(--border); background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); padding:1rem; }
.eyebrow { font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--primary); font-weight:700; }
.card-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin-top:1rem; }
.card .icon { width:40px; height:40px; border-radius:10px; background: rgba(15,118,110,.14); color:var(--primary-dark); display:flex; align-items:center; justify-content:center; font-weight:800; margin-bottom:.6rem; }
.btn,.btn-link,.btn-secondary { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; border-radius:10px; padding:.56rem .9rem; border:1px solid transparent; cursor:pointer; font-weight:600; }
.btn { background:var(--primary); color:#fff; }
.btn:hover { background:var(--primary-dark); }
.btn-secondary { background:transparent; border-color:var(--border); color:var(--text); }
.btn-link { color:var(--primary-dark); padding-left:0; }
.search-inline { display:flex; gap:.6rem; margin-top:1rem; }
input,textarea,select { width:100%; border:1px solid var(--border); border-radius:10px; padding:.65rem .75rem; font:inherit; background:var(--surface); color:var(--text); }
input:focus,textarea:focus,select:focus { outline:2px solid rgba(27,183,169,.25); border-color:var(--primary); }
.breadcrumb { display:flex; gap:.45rem; color:var(--muted); font-size:.92rem; margin-bottom:.8rem; }
.breadcrumb a { text-decoration:none; color:var(--primary-dark); }
.tool-layout { display:grid; grid-template-columns:2fr 320px; gap:1rem; }
.tool-form { display:grid; gap:.65rem; }
.result-box { border:1px dashed var(--border); border-radius:10px; padding:1rem; margin-top:1rem; background: rgba(15,118,110,.06); }
.seo-rich-content { margin-top:1.2rem; border-top:1px solid var(--border); padding-top:1rem; }
.seo-rich-content h2 { margin:1rem 0 .6rem; font-size:1.2rem; }
.seo-rich-content p { margin:.6rem 0; color:var(--text); line-height:1.75; }
.howto-list { margin:.4rem 0 1rem 1.2rem; padding:0; }
.howto-list li { margin:.4rem 0; line-height:1.65; }
.faq-list { display:grid; gap:.6rem; margin-top:.5rem; }
.faq-item { border:1px solid var(--border); border-radius:10px; padding:.75rem; background:rgba(15,118,110,.04); }
.faq-item h3 { margin:0 0 .35rem; font-size:1rem; }
.faq-item p { margin:0; line-height:1.65; color:var(--muted); }
.alert { padding:.66rem .78rem; border-radius:10px; }
.alert.error { background:#ffe6eb; border:1px solid #ffc7d3; color:#a61a41; }
.alert.success { background:#defde8; border:1px solid #b7f2cb; color:#166534; }
.stats-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(130px,1fr)); gap:.7rem; }
.stat-card { border:1px solid var(--border); border-radius:10px; text-align:center; padding:.8rem; }
.stat-card span { display:block; font-size:1.25rem; font-weight:700; }
.table-wrap { overflow:auto; }
table { width:100%; min-width:480px; border-collapse:collapse; }
th,td { border:1px solid var(--border); padding:.5rem; text-align:left; }
.check-list .pass { color:#15803d; }
.check-list .fail { color:#b91c1c; }
.site-footer { margin-top:2rem; border-top:1px solid var(--border); background:var(--surface); }
.footer-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; padding:1rem 0; }
.footer-links { display:flex; gap:.8rem; flex-wrap:wrap; }
.footer-links a { text-decoration:none; color:var(--muted); }
.footer-copy { text-align:center; color:var(--muted); padding-bottom:1rem; }
.live-search-results { margin-top:.7rem; display:grid; gap:.5rem; }
.live-item { border:1px solid var(--border); border-radius:10px; padding:.6rem; background:var(--surface); }
.tool-actions { margin: 10px 0; }
.btn-favorite { display: inline-flex; align-items: center; gap: 5px; padding: 8px 16px; border-radius: 20px; border: 2px solid #e74c3c; background: transparent; color: #e74c3c; cursor: pointer; font-weight: 600; transition: all 0.2s; }
.btn-favorite:hover { background: #e74c3c; color: white; }
.btn-favorite.active { background: #e74c3c; color: white; }
.btn-favorite.active::before { content: ''; }
.related-tools { margin-top:1.5rem; border-top:1px solid var(--border); padding-top:1rem; }
.related-tools h2 { margin:0 0 1rem; font-size:1.2rem; }
.related-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap:.8rem; }
.related-card { display:block; text-decoration:none; border:1px solid var(--border); border-radius:var(--radius); padding:.8rem; background:var(--surface); transition:box-shadow .2s,transform .2s; }
.related-card:hover { box-shadow:var(--shadow); transform:translateY(-2px); }
.related-card h3 { margin:0 0 .4rem; font-size:1rem; color:var(--primary-dark); }
.related-card p { margin:0 0 .5rem; font-size:.88rem; color:var(--muted); line-height:1.5; }
.related-cat { font-size:.78rem; color:var(--primary); font-weight:600; }
.category-intro { margin-bottom:1.5rem; }
.category-intro h1 { margin:0 0 .5rem; }
.intro-text { font-size:1.05rem; line-height:1.7; color:var(--muted); margin:0 0 .5rem; max-width:700px; }
.intro-stats { font-weight:600; color:var(--primary); margin:0; }
.blog-hero { text-align:center; padding:2rem 0; margin-bottom:1rem; }
.blog-hero h1 { font-size:2rem; margin:0; }
.blog-tagline { color:var(--muted); font-size:1.1rem; margin:.5rem 0 0; }
.blog-empty { text-align:center; padding:3rem; color:var(--muted); }
.blog-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap:1.5rem; }
.blog-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; transition:transform .2s,box-shadow .2s; }
.blog-card:hover { transform:translateY(-4px); box-shadow:0 16px 40px rgba(15,36,64,.15); }
.blog-card-image { height:180px; overflow:hidden; }
.blog-card-image img { width:100%; height:100%; object-fit:cover; }
.blog-card-content { padding:1.25rem; }
.blog-card-date { font-size:.82rem; color:var(--muted); }
.blog-card-content h2 { margin:.5rem 0; font-size:1.2rem; }
.blog-card-content h2 a { text-decoration:none; color:var(--text); }
.blog-card-content h2 a:hover { color:var(--primary); }
.blog-card-content p { color:var(--muted); font-size:.92rem; line-height:1.6; margin:.5rem 0 1rem; }
.blog-post { max-width:800px; margin:0 auto; }
.blog-post-header { text-align:center; margin-bottom:2rem; }
.blog-post-date { font-size:.9rem; color:var(--muted); }
.blog-post-header h1 { font-size:2rem; margin:.5rem 0; }
.blog-post-author { font-size:.9rem; color:var(--muted); }
.blog-post-image { margin-bottom:1.5rem; border-radius:var(--radius); overflow:hidden; }
.blog-post-image img { width:100%; height:auto; }
.blog-post-content { font-size:1.05rem; line-height:1.8; }
.blog-post-content p { margin:1rem 0; }
.blog-post-nav { margin-top:2rem; text-align:center; padding-top:2rem; border-top:1px solid var(--border); }
.share-buttons { display:flex; align-items:center; gap:.5rem; margin:1rem 0; }
.share-label { font-weight:600; color:var(--muted); font-size:.9rem; }
.share-btn { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; text-decoration:none; font-weight:700; font-size:.85rem; transition:transform .2s,opacity .2s; }
.share-btn:hover { transform:scale(1.1); opacity:.85; }
.share-btn.twitter { background:#000; color:#fff; }
.share-btn.facebook { background:#1877f2; color:#fff; }
.share-btn.linkedin { background:#0a66c2; color:#fff; }
.share-btn.whatsapp { background:#25d366; color:#fff; }
.share-btn.pinterest { background:#e60023; color:#fff; }
.stats-highlight { display:flex; justify-content:space-between; align-items:center; padding:.5rem 0; border-bottom:1px solid var(--border); }
.stats-highlight:last-child { border-bottom:none; }
.stat-num { font-size:1.4rem; font-weight:800; color:var(--primary); }
.stat-lbl { font-size:.9rem; color:var(--muted); }
.compare-hero { text-align:center; padding:2rem 0; margin-bottom:1rem; }
.compare-hero h1 { font-size:2rem; margin:0; }
.compare-tagline { color:var(--muted); font-size:1.1rem; margin:.5rem 0 0; }
.compare-categories, .compare-popular, .compare-tips { margin-bottom:2rem; }
.compare-categories h2, .compare-popular h2, .compare-tips h2 { margin-bottom:1rem; }
.compare-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem; }
.compare-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; box-shadow:var(--shadow); }
.compare-card h3 { margin:0 0 .75rem; color:var(--primary-dark); }
.compare-card p { color:var(--muted); font-size:.92rem; margin:0 0 1rem; line-height:1.6; }
.compare-features { list-style:none; padding:0; margin:0 0 1rem; }
.compare-features li { padding:.4rem 0; border-bottom:1px solid var(--border); font-size:.88rem; }
.compare-features li:last-child { border-bottom:none; }
.compare-features strong { color:var(--primary); }
.compare-actions { margin-top:auto; }
.tips-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:1rem; }
.tip-box { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem; }
.tip-icon { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; background:var(--primary); color:#fff; border-radius:50%; font-weight:700; margin-bottom:.75rem; }
.tip-box h4 { margin:0 0 .5rem; }
.tip-box p { margin:0; color:var(--muted); font-size:.88rem; line-height:1.6; }
.testimonials-section { margin:2.5rem 0; padding:2rem 0; border-top:1px solid var(--border); }
.testimonials-section h2 { text-align:center; margin-bottom:1.5rem; font-size:1.6rem; }
.testimonials-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); gap:1.5rem; max-width:1000px; margin:0 auto; }
.testimonial-card { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:1.5rem; box-shadow:0 4px 12px rgba(0,0,0,0.06); transition:transform .2s,box-shadow .2s; }
.testimonial-card:hover { transform:translateY(-4px); box-shadow:0 12px 24px rgba(0,0,0,0.1); }
.testimonial-stars { color:#f59e0b; font-size:1.2rem; margin-bottom:.75rem; letter-spacing:2px; }
.testimonial-quote { font-size:1rem; line-height:1.75; color:var(--text); margin:0 0 1.25rem; font-style:italic; flex-grow:1; }
.testimonial-author { display:flex; align-items:center; gap:.875rem; border-top:1px solid var(--border); padding-top:1rem; margin-top:auto; }
.testimonial-avatar { width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,var(--primary),#2f9dfb); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.2rem; flex-shrink:0; }
.testimonial-info { display:flex; flex-direction:column; gap:.15rem; }
.testimonial-info strong { font-size:1rem; font-weight:600; }
.testimonial-info span { font-size:.85rem; color:var(--muted); }
@media (max-width:900px) { .hero-grid,.tool-layout,.footer-grid,.testimonials-grid{grid-template-columns:1fr;} .search-inline{flex-direction:column;} }