/* ═══════════════════════════════════════════════════════════════
   Data Conversion Center — Global Design System
   Single source of truth for site-wide styles.
   Page-specific overrides go in each page's <style> block.
   ═══════════════════════════════════════════════════════════════ */

/* ── Design Tokens ── */
:root {
  --blue:#3db8f5; --blue-dark:#2c9ad8;
  --blue-glow:rgba(61,184,245,.12);
  --accent-gradient:linear-gradient(135deg, #3db8f5 0%, #8b5cf6 100%);
  --bg:#0a0c10; --bg-card:#12151c; --bg-raised:#181c28;
  --border:#1e2536; --border-lit:#2a3550;
  --text:#eaf0f8; --text-muted:#7b8da6;
  --radius:12px; --radius-lg:16px; --radius-full:20px;
  --green:#4caf50; --red:#e05555; --yellow:#f5a623;
}

/* ── Reset ── */
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);line-height:1.6;background-image:radial-gradient(ellipse 80% 50% at 50% -20%, rgba(61,184,245,.04), transparent);}
a{color:var(--blue);text-decoration:none;}
a:hover{text-decoration:underline;}

/* ── Focus States ── */
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px;}
button:focus-visible,a:focus-visible,.btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}

/* ── Skip Nav ── */
.skip-nav{position:absolute;top:-100%;left:0;background:var(--blue);color:#fff;padding:.75rem 1.5rem;z-index:9999;font-size:.9rem;font-weight:600;border-radius:0 0 8px 0;transition:top .2s;}
.skip-nav:focus{top:0;outline:2px solid #fff;}

/* ── Cookie Banner ── */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;background:rgba(18,21,28,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--border);padding:1rem 2rem;display:flex;align-items:center;justify-content:center;gap:1.5rem;flex-wrap:wrap;z-index:10000;font-size:.88rem;color:var(--text-muted);box-shadow:0 -4px 24px rgba(0,0,0,.4);}
.cookie-banner a{color:var(--blue);}
.cookie-banner button{padding:.5rem 1.25rem;border-radius:8px;font-size:.85rem;font-weight:600;cursor:pointer;border:none;transition:all .2s;}
.cookie-accept{background:var(--blue);color:#fff;}
.cookie-accept:hover{background:var(--blue-dark);}
.cookie-decline{background:transparent;border:1px solid var(--border);color:var(--text-muted);}
.cookie-decline:hover{border-color:var(--blue);color:var(--blue);}

/* ── Header ── */
header{background:rgba(8,10,14,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border);padding:.75rem 0;position:sticky;top:0;z-index:100;}
.header-content{max-width:1100px;margin:0 auto;padding:0 2rem;display:flex;align-items:center;justify-content:space-between;}
.hc{max-width:1100px;margin:0 auto;padding:0 2rem;display:flex;align-items:center;justify-content:space-between;}
.logo{height:48px;}
.back-link{color:var(--text-muted);font-size:.82rem;display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .85rem;background:var(--bg-raised);border:1px solid var(--border);border-radius:8px;text-decoration:none;transition:all .2s;}
.back-link:hover{border-color:var(--blue);color:var(--blue);text-decoration:none;}
.bl{color:var(--text-muted);font-size:.82rem;display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .85rem;background:var(--bg-raised);border:1px solid var(--border);border-radius:8px;text-decoration:none;transition:all .2s;}
.bl:hover{border-color:var(--blue);color:var(--blue);text-decoration:none;}
.trust-badges{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-left:auto;}
.trust-badge{display:flex;align-items:center;gap:.35rem;padding:.3rem .7rem;background:rgba(61,184,245,.06);border:1px solid rgba(61,184,245,.1);border-radius:8px;font-size:.72rem;font-weight:500;color:var(--text-muted);white-space:nowrap;letter-spacing:.01em;}
.trust-badge .tb-icon{font-size:.8rem;}
@media(max-width:900px){.trust-badges{display:none;}}

/* ── Breadcrumb ── */
.breadcrumb{max-width:1100px;margin:1.25rem auto 0;padding:0 2rem;font-size:.82rem;color:var(--text-muted);}
.breadcrumb a{color:var(--text-muted);transition:color .15s;}
.breadcrumb a:hover{color:var(--blue);text-decoration:none;}
.bc{max-width:1100px;margin:1.25rem auto 0;padding:0 2rem;font-size:.82rem;color:var(--text-muted);}
.bc a{color:var(--text-muted);transition:color .15s;}
.bc a:hover{color:var(--blue);text-decoration:none;}

/* ── Layout ── */
.wrap{max-width:1100px;margin:0 auto;padding:0 2rem 5rem;}

/* ── Hero ── */
.hero{padding:2rem 0 1.5rem;}
.hero h1{font-size:1.85rem;font-weight:800;margin-bottom:.5rem;line-height:1.25;background:linear-gradient(135deg, var(--text) 40%, var(--blue) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hero p{color:var(--text-muted);font-size:.95rem;max-width:680px;}

/* ── Tool Box ── */
.tool-box{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2rem;margin:1.5rem 0;box-shadow:0 4px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.03);}

/* ── Upload Area ── */
.upload-area{border:2px dashed transparent;border-radius:var(--radius-lg);padding:2.5rem;text-align:center;cursor:pointer;transition:all .25s ease;margin-bottom:1.5rem;background:linear-gradient(var(--bg-raised), var(--bg-raised)) padding-box, linear-gradient(135deg, var(--border-lit), var(--border)) border-box;}
.upload-area:hover,.upload-area.drag{background:linear-gradient(var(--bg-raised), var(--bg-raised)) padding-box, var(--accent-gradient) border-box;box-shadow:0 0 30px rgba(61,184,245,.06);}
.upload-icon{font-size:2rem;margin-bottom:.5rem;width:56px;height:56px;margin:0 auto .75rem;display:flex;align-items:center;justify-content:center;background:var(--blue-glow);border-radius:14px;border:1px solid rgba(61,184,245,.12);}
.upload-area h3{margin-bottom:.4rem;font-size:1rem;}
.upload-area p{color:var(--text-muted);font-size:.85rem;}
input[type=file]{display:none;}

/* ── Drop Zone (compact inline) ── */
.drop-zone{border:2px dashed transparent;border-radius:var(--radius);padding:.75rem 1rem;text-align:center;cursor:pointer;transition:all .25s ease;margin-bottom:.5rem;display:flex;align-items:center;justify-content:center;gap:.5rem;background:linear-gradient(var(--bg-raised), var(--bg-raised)) padding-box, linear-gradient(135deg, var(--border-lit), var(--border)) border-box;}
.drop-zone:hover,.drop-zone.dragover{background:linear-gradient(var(--bg-raised), var(--bg-raised)) padding-box, var(--accent-gradient) border-box;}
.drop-zone.dragover{box-shadow:0 0 20px rgba(61,184,245,.1);}
.drop-icon{font-size:1.1rem;}
.drop-text{font-size:.85rem;color:var(--text-muted);}
.drop-text strong{color:var(--text);}
.drop-link{color:var(--blue);cursor:pointer;text-decoration:underline;}
.drop-link:hover{color:var(--blue-dark);}
.drop-zone input[type=file]{display:none;}
.drop-file-name{display:none;align-items:center;gap:.5rem;padding:.45rem .75rem;background:var(--bg);border:1px solid var(--border);border-radius:6px;font-size:.82rem;color:var(--text-muted);margin-bottom:.5rem;}
.drop-file-name.show{display:flex;}
.drop-file-name span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.drop-file-name button{background:none;border:none;color:#e05555;cursor:pointer;font-size:.9rem;padding:0 .25rem;}

/* ── File List ── */
.file-list{margin:.5rem 0 1.5rem;}
.file-item{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);padding:.75rem 1rem;margin-bottom:.5rem;display:flex;justify-content:space-between;align-items:center;transition:border-color .15s;}
.file-item:hover{border-color:var(--border-lit);}
.file-name{font-size:.9rem;font-weight:500;}
.file-size{font-size:.8rem;color:var(--text-muted);}
.remove-btn{background:none;border:none;color:#e05555;cursor:pointer;font-size:1.1rem;padding:.2rem .4rem;transition:transform .15s;}
.remove-btn:hover{transform:scale(1.15);}

/* ── Options ── */
.options{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);padding:1.2rem;margin-bottom:1.5rem;}
.opt-row{margin-bottom:.85rem;}
.opt-row:last-child{margin:0;}
.opt-row label{display:block;font-size:.85rem;color:var(--text-muted);margin-bottom:.35rem;}
.opt-row select,.opt-row input[type=number],.opt-row input[type=text]{width:100%;padding:.5rem .75rem;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:.9rem;transition:border-color .2s;}
.opt-row select:focus,.opt-row input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-glow);}
.range-row{display:flex;align-items:center;gap:.75rem;}
.range-row input[type=range]{flex:1;}
.range-val{color:var(--blue);font-weight:600;font-size:.9rem;min-width:2.5rem;}

/* ── Buttons ── */
.btn{width:100%;padding:.85rem;background:var(--accent-gradient);color:#fff;border:none;border-radius:var(--radius);font-size:.95rem;font-weight:600;cursor:pointer;transition:all .25s ease;box-shadow:0 2px 12px rgba(61,184,245,.18);letter-spacing:.01em;}
.btn:hover{box-shadow:0 4px 20px rgba(61,184,245,.28);transform:translateY(-1px);}
.btn:active{transform:translateY(0);box-shadow:0 2px 8px rgba(61,184,245,.15);}
.btn:disabled{background:var(--border);color:var(--text-muted);cursor:not-allowed;box-shadow:none;transform:none;}
.btn.ghost{background:var(--bg-raised);border:1px solid var(--border);color:var(--text);box-shadow:none;}
.btn.ghost:hover{border-color:var(--blue);color:var(--blue);box-shadow:none;transform:none;}
.btn-row{display:flex;gap:.5rem;margin-top:1rem;flex-wrap:wrap;}
.btn-row .btn{width:auto;flex:1;min-width:100px;padding:.7rem 1rem;font-size:.9rem;}
.btn-secondary{background:var(--bg-raised);border:1px solid var(--border);color:var(--text);box-shadow:none;}
.btn-secondary:hover{background:var(--border);box-shadow:none;transform:none;}
.btn-danger{background:transparent;border:1px solid var(--border);color:var(--text-muted);box-shadow:none;}
.btn-danger:hover{border-color:#e05555;color:#e05555;background:rgba(224,85,85,.06);box-shadow:none;transform:none;}

/* ── Progress ── */
.progress{height:6px;background:var(--border);border-radius:3px;overflow:hidden;margin:1rem 0;display:none;}
.progress-fill{height:100%;background:var(--accent-gradient);width:0%;transition:width .3s;}

/* ── Results ── */
.result{display:none;background:var(--bg-raised);border:1px solid var(--border-lit);border-radius:var(--radius-lg);padding:1.75rem;text-align:center;margin-top:1.5rem;}
.result.show{display:block;}
.result h3{margin-bottom:.5rem;font-size:1.1rem;}
.result p{color:var(--text-muted);font-size:.9rem;margin-bottom:1.25rem;}
.dl-btn{display:inline-block;padding:.8rem 2rem;background:var(--accent-gradient);color:#fff;border:none;border-radius:var(--radius);font-size:.95rem;font-weight:600;cursor:pointer;transition:all .25s ease;text-decoration:none;box-shadow:0 2px 12px rgba(61,184,245,.18);}
.dl-btn:hover{box-shadow:0 4px 20px rgba(61,184,245,.28);transform:translateY(-1px);text-decoration:none;}
.reset-btn{background:none;border:1px solid var(--border);border-radius:var(--radius);color:var(--text-muted);padding:.6rem 1.5rem;margin-top:.75rem;cursor:pointer;display:none;font-size:.88rem;transition:all .2s;}
.reset-btn:hover{border-color:var(--blue);color:var(--blue);}

/* ── Status Bar ── */
.status-bar{display:none;padding:.65rem 1rem;border-radius:var(--radius);font-size:.85rem;margin-top:.75rem;}
.status-bar.show{display:block;}
.status-bar.ok{background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.2);color:#34d399;}
.status-bar.error{background:rgba(224,85,85,.08);border:1px solid rgba(224,85,85,.2);color:#e05555;}
.status-bar a{color:inherit;text-decoration:underline;}

/* ── Code / Split Layout ── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
@media(max-width:700px){.split{grid-template-columns:1fr;}}
.split-label{font-size:.85rem;color:var(--text-muted);margin-bottom:.4rem;font-weight:500;}
.code{width:100%;min-height:200px;padding:.85rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;font-size:.88rem;line-height:1.6;resize:vertical;transition:border-color .2s;}
.code:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-glow);}
.output-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem;}
.copy-btn{background:var(--bg-raised);border:1px solid var(--border);border-radius:8px;color:var(--text-muted);padding:.4rem .9rem;font-size:.82rem;cursor:pointer;transition:all .2s;}
.copy-btn:hover{border-color:var(--blue);color:var(--blue);}

/* ── Text Tools ── */
.text-tool{margin:1.5rem 0;}
.text-tool textarea{width:100%;height:200px;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:1rem;font-family:monospace;font-size:.9rem;resize:vertical;transition:border-color .2s;}
.text-tool textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-glow);}
.text-output{background:var(--bg-raised);border:1px solid var(--border-lit);border-radius:var(--radius);padding:1.25rem;margin-top:1rem;display:none;}
.text-output.show{display:block;}

/* ── FAQ ── */
.faq-section{margin:2.5rem 0;}
.faq-section h2{font-size:1.1rem;font-weight:700;margin-bottom:.75rem;}
.faq-item{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:.5rem;overflow:hidden;transition:border-color .15s;}
.faq-item:hover{border-color:var(--border-lit);}
.faq-q{display:flex;justify-content:space-between;align-items:center;padding:.85rem 1.2rem;cursor:pointer;font-size:.92rem;font-weight:500;background:var(--bg-raised);transition:color .15s;}
.faq-q:hover{color:var(--blue);}
.faq-arrow{font-size:.72rem;color:var(--text-muted);transition:transform .3s;}
.faq-q.open .faq-arrow{transform:rotate(180deg);}
.faq-a{display:none;padding:.85rem 1.2rem;font-size:.88rem;color:var(--text-muted);line-height:1.7;border-top:1px solid var(--border);}
.faq-a.open{display:block;}

/* ── Related Tags ── */
.related{margin:2rem 0;}
.related h2{font-size:.8rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.6rem;}
.tag-list{display:flex;flex-wrap:wrap;gap:.4rem;}
.tag{padding:.3rem .75rem;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-full);font-size:.82rem;color:var(--text);text-decoration:none;transition:all .2s;}
.tag:hover{border-color:var(--blue);color:var(--blue);text-decoration:none;}
/* ── Related Posts (blog) ── */
.related-posts{max-width:900px;margin:2rem auto;padding:0 1rem;}
.related-posts h2{font-size:1.1rem;margin-bottom:.75rem;}
.related-posts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.75rem;}
.related-post-card{display:block;padding:.85rem 1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);text-decoration:none;transition:all .2s;}
.related-post-card:hover{border-color:var(--blue);transform:translateY(-1px);text-decoration:none;box-shadow:0 4px 16px rgba(61,184,245,.06);}
.related-post-title{color:var(--text);font-size:.88rem;font-weight:500;line-height:1.35;}

/* ── Content Sections ── */
.content-section{margin:2.5rem 0;}
.content-section h2{font-size:1.1rem;font-weight:700;margin-bottom:.85rem;color:var(--text);padding-left:1rem;position:relative;}
.content-section h2::before{content:'';position:absolute;left:0;top:.15em;width:3px;height:1em;background:var(--accent-gradient);border-radius:2px;}
.content-section p{color:var(--text-muted);font-size:.92rem;line-height:1.8;margin-bottom:.9rem;}
.content-section ul{list-style:none;margin-bottom:.9rem;}
.content-section ul li{color:var(--text-muted);font-size:.92rem;line-height:1.7;padding:.2rem 0 .2rem 1.25rem;position:relative;}
.content-section ul li::before{content:'→';position:absolute;left:0;color:var(--blue);font-size:.8rem;}

/* ── Tables ── */
.format-table{width:100%;border-collapse:collapse;margin:1rem 0 1.5rem;font-size:.88rem;}
.format-table th{background:var(--bg-raised);color:var(--blue);padding:.65rem .85rem;text-align:left;font-weight:600;border:1px solid var(--border);}
.format-table td{padding:.55rem .85rem;border:1px solid var(--border);color:var(--text-muted);vertical-align:top;}
.format-table tr:nth-child(even) td{background:rgba(255,255,255,.015);}

/* ── Blog Section ── */
.blog-section{margin:2.5rem 0;}
.blog-section h2{font-size:1.1rem;font-weight:700;margin-bottom:.75rem;}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.75rem;}
.blog-card{display:block;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;text-decoration:none;transition:all .25s ease;}
.blog-card:hover{border-color:var(--blue);text-decoration:none;transform:translateY(-2px);box-shadow:0 4px 16px rgba(61,184,245,.06);}
.blog-card h3{font-size:.9rem;color:var(--text);margin-bottom:.3rem;font-weight:600;}
.blog-card h4{font-size:.9rem;color:var(--text);margin-bottom:.3rem;}
.blog-card p{font-size:.8rem;color:var(--text-muted);}
.blog-tag{display:inline-block;font-size:.68rem;color:var(--blue);background:rgba(61,184,245,.08);padding:.15rem .5rem;border-radius:4px;margin-bottom:.4rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;}

/* ── Share Button ── */
.share-bar{display:flex;align-items:center;gap:.5rem;margin-top:1rem;padding-top:.75rem;border-top:1px solid var(--border);flex-wrap:wrap;}
.share-bar-label{font-size:.75rem;color:var(--text-muted);font-weight:500;margin-right:.15rem;}
.share-btn{display:inline-flex;align-items:center;gap:5px;background:var(--bg-raised);border:1px solid var(--border);color:var(--text-muted);font-size:.78rem;font-weight:500;padding:.4rem .75rem;border-radius:8px;cursor:pointer;transition:all .2s;font-family:inherit;}
.share-btn:hover{color:var(--text);border-color:var(--blue);background:rgba(61,184,245,.06);}
.share-btn.copied{color:var(--green);border-color:rgba(76,175,80,.25);background:rgba(76,175,80,.06);}
.share-btn svg{width:14px;height:14px;flex-shrink:0;}
.share-btn--x:hover{border-color:#1da1f2;color:#1da1f2;background:rgba(29,161,242,.06);}
.share-btn--li:hover{border-color:#0a66c2;color:#0a66c2;background:rgba(10,102,194,.06);}
.share-btn--rd:hover{border-color:#ff4500;color:#ff4500;background:rgba(255,69,0,.06);}
.share-btn--hn:hover{border-color:#ff6600;color:#ff6600;background:rgba(255,102,0,.06);}

/* ── Misc ── */
.browse-link{color:var(--blue);cursor:pointer;font-weight:700;text-decoration:underline;text-underline-offset:3px;transition:color .2s;}
.browse-link:hover{color:#fff;}

/* ── Related Grid (SQL tools) ── */
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.6rem;margin-top:.75rem;}
.rel-link{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);text-decoration:none;color:var(--text);font-size:.88rem;font-weight:500;transition:all .2s;}
.rel-link:hover{border-color:var(--blue);text-decoration:none;transform:translateY(-1px);box-shadow:0 4px 16px rgba(61,184,245,.06);}
.rel-link .icon{font-size:1.1rem;}

/* ── Footer ── */
footer{background:#080a0e;border-top:1px solid var(--border);padding:3rem 2rem 2rem;margin-top:4rem;}
.footer-wrap{max-width:1100px;margin:0 auto;}
.footer-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2rem;margin-bottom:2rem;}
.footer-grid{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2rem;}
.footer-col h3{color:var(--blue);font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.75rem;}
.footer-col ul{list-style:none;}
.footer-col li{margin-bottom:.3rem;}
.footer-col a{color:var(--text-muted);font-size:.85rem;display:block;padding:.1rem 0;transition:color .15s;}
.footer-col a:hover{color:var(--blue);text-decoration:none;}
.footer-bottom{padding-top:1.5rem;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem;color:var(--text-muted);font-size:.82rem;}
.footer-links{display:flex;gap:1.2rem;font-size:.82rem;}
.footer-links a{color:var(--text-muted);transition:color .15s;}
.footer-links a:hover{color:var(--blue);text-decoration:none;}

/* ── Category Nav (header) ── */
.cat-nav{display:flex;align-items:center;gap:2px;margin-left:auto;margin-right:.75rem;flex-wrap:nowrap;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none;}
.cat-nav::-webkit-scrollbar{display:none;}
.cat-pill{padding:.3rem .65rem;font-size:.72rem;font-weight:600;color:var(--text-muted);text-decoration:none;border-radius:6px;white-space:nowrap;transition:all .18s;letter-spacing:.01em;}
.cat-pill:hover{color:var(--text);background:var(--bg-raised);text-decoration:none;}
.cat-pill.active{color:var(--blue);background:rgba(61,184,245,.08);text-decoration:none;}
@media(max-width:768px){.cat-nav{display:none;}}

/* ── Header Search Button ── */
.header-search-btn{display:inline-flex;align-items:center;gap:8px;padding:.4rem .9rem .4rem .75rem;background:var(--bg-raised);border:1px solid var(--border);border-radius:8px;color:var(--text-muted);font-size:.8rem;font-family:inherit;cursor:pointer;transition:all .2s;white-space:nowrap;flex-shrink:0;}
.header-search-btn:hover{border-color:var(--blue);color:var(--text);}
.header-search-btn svg{flex-shrink:0;opacity:.6;}
.header-search-btn kbd{display:inline-flex;align-items:center;gap:2px;background:var(--bg);border:1px solid var(--border);border-radius:5px;padding:2px 7px;font-size:.65rem;color:var(--text-muted);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;line-height:1.3;pointer-events:none;box-shadow:0 1px 0 rgba(0,0,0,.3);margin-left:4px;}
.header-search-text{opacity:.6;}
@media(max-width:500px){.header-search-text{display:none;}.header-search-btn kbd{display:none;}}

/* ── Trust Bar (below hero) ── */
.trust-bar{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;margin-top:1rem;padding:.65rem 0;font-size:.78rem;color:var(--text-muted);opacity:.7;}
.trust-bar span{display:flex;align-items:center;gap:.35rem;white-space:nowrap;}


/* ═══ Shared component styles extracted from inline CSS ═══ */
.hc{max-width:1100px;margin:0 auto;padding:0 2rem;display:flex;align-items:center;justify-content:space-between;}
.bl{color:var(--text-muted);font-size:.9rem;}
.bl:hover{color:var(--blue);text-decoration:none;}
.bc{max-width:780px;margin:1.25rem auto 0;padding:0 2rem;font-size:.85rem;color:var(--text-muted);}
.bc a{color:var(--text-muted);}
h1{font-size:2rem;font-weight:800;line-height:1.25;margin-bottom:.6rem;}
.byline{font-size:.88rem;color:var(--text-muted);margin-bottom:2.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border);}
h2{font-size:1.35rem;font-weight:700;margin:2.5rem 0 .75rem;}
h3{font-size:1.05rem;font-weight:600;margin:1.75rem 0 .5rem;color:var(--blue);}
p{color:var(--text-muted);margin-bottom:1.1rem;font-size:.97rem;}
ul,ol{color:var(--text-muted);padding-left:1.5rem;margin-bottom:1.1rem;}
li{margin-bottom:.45rem;font-size:.97rem;}
strong{color:var(--text);}
code{background:var(--bg-raised);border:1px solid var(--border);border-radius:4px;padding:.15em .4em;font-family:'Fira Mono',monospace;font-size:.86em;color:var(--blue);}
pre{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem 1.5rem;overflow-x:auto;margin:1.25rem 0;}
pre code{background:none;border:none;padding:0;color:var(--text);font-size:.88rem;line-height:1.65;}
blockquote{border-left:3px solid var(--blue);padding:.75rem 1.25rem;margin:1.5rem 0;background:var(--bg-card);border-radius:0 var(--radius) var(--radius) 0;}
blockquote p{margin:0;font-style:italic;}
table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.9rem;}
th{text-align:left;padding:.6rem .9rem;border-bottom:2px solid var(--border);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);background:var(--bg-raised);}
td{padding:.6rem .9rem;border-bottom:1px solid var(--border);color:var(--text-muted);}
td:first-child{color:var(--text);}
tr:last-child td{border-bottom:none;}
.callout{background:var(--bg-card);border:1px solid var(--border-lit);border-left:3px solid var(--blue);border-radius:var(--radius);padding:1rem 1.25rem;margin:1.5rem 0;}
.callout p{margin:0;font-size:.93rem;}
.cta{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;margin:2.5rem 0;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.cta p{margin:0;font-size:.93rem;color:var(--text-muted);}
.toc{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.2rem 1.5rem;margin:1.5rem 0;}
.toc h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:.65rem;margin-top:0;}
.toc ol{margin:0;padding-left:1.2rem;}
.toc li{margin-bottom:.3rem;font-size:.88rem;}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.75rem;margin-top:1rem;}
.rel-link{display:flex;align-items:center;gap:.5rem;padding:.65rem .9rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);font-size:.85rem;color:var(--text-muted);transition:.15s;}
.rel-link:hover{border-color:var(--blue);color:var(--blue);text-decoration:none;}
.icon{font-size:1rem;}
.author-bio{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.75rem 2rem;margin:3rem 0 2rem;}
.author-bio-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.25rem;padding-bottom:1rem;border-bottom:1px solid var(--border);}
.author-bio-avatar{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--blue-dark));display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:700;color:#fff;flex-shrink:0;}
.author-bio-name{font-size:1.1rem;font-weight:700;color:var(--text);}
.author-bio-role{font-size:.85rem;color:var(--text-muted);}
.author-bio p{font-size:.92rem;color:var(--text-muted);margin-bottom:.85rem;line-height:1.7;}
.author-bio ul{color:var(--text-muted);padding-left:1.5rem;margin-bottom:1rem;font-size:.92rem;}
.author-bio li{margin-bottom:.35rem;font-size:.92rem;}
.author-bio-details{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.25rem;margin:1.25rem 0;}
.author-bio-detail-title{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text);margin-bottom:.6rem;}
.author-bio-details ul{margin-bottom:0;}
.author-bio-mission{font-style:italic;color:var(--blue) !important;margin-bottom:0 !important;}
@media(max-width:860px){.trust-badges{display:none;}}
.bc{max-width:820px;margin:1.25rem auto 0;padding:0 2rem;font-size:.85rem;color:var(--text-muted);}
.post-tag{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--blue);background:rgba(61,184,245,.1);border:1px solid rgba(61,184,245,.2);border-radius:4px;padding:.2rem .6rem;margin-bottom:.75rem;}
h1{font-size:2rem;font-weight:800;line-height:1.22;margin-bottom:.6rem;}
.byline{font-size:.88rem;color:var(--text-muted);padding-bottom:1.5rem;border-bottom:1px solid var(--border);margin-bottom:2rem;}
h2{font-size:1.3rem;font-weight:700;margin:2.5rem 0 .75rem;padding-left:.85rem;border-left:3px solid var(--blue);}
h3{font-size:1rem;font-weight:700;margin:1.75rem 0 .5rem;color:var(--blue);}
p{color:var(--text-muted);margin-bottom:1rem;font-size:.97rem;}
ul,ol{color:var(--text-muted);padding-left:1.5rem;margin-bottom:1rem;}
li{margin-bottom:.4rem;font-size:.97rem;}
code{background:var(--bg-raised);border:1px solid var(--border);border-radius:4px;padding:.15em .4em;font-family:'Fira Mono',monospace;font-size:.84em;color:var(--blue);}
pre{background:#090b0e;border:1px solid var(--border-lit);border-radius:var(--radius);padding:1.1rem 1.4rem;overflow-x:auto;margin:1.1rem 0;}
pre code{background:none;border:none;padding:0;color:#a8d8a8;font-size:.81rem;line-height:1.65;}
.toc{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem 1.4rem;margin:1.5rem 0 2.25rem;}
.toc-title{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:.6rem;}
.toc li{margin-bottom:.28rem;font-size:.88rem;}
.cta{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.35rem 1.5rem;margin:2rem 0;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.step-block{margin:2.25rem 0 0;}
.step-header{display:flex;align-items:center;gap:.85rem;margin-bottom:.85rem;}
.step-num{min-width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;font-size:.92rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.step-title{font-size:1.2rem;font-weight:700;color:var(--text);}
.callout{background:rgba(61,184,245,.06);border:1px solid rgba(61,184,245,.2);border-left:3px solid var(--blue);border-radius:var(--radius);padding:.85rem 1.1rem;margin:1rem 0;}
.callout p{margin:0;font-size:.9rem;}
.callout.tip{background:rgba(76,175,80,.06);border-color:rgba(76,175,80,.2);border-left-color:var(--green);}
.callout.warn{background:rgba(232,160,48,.06);border-color:rgba(232,160,48,.2);border-left-color:var(--amber);}
.rel{margin:3rem 0 0;}
.rel h2{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:.75rem;border:none;padding:0;}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.6rem;}
.rc{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);padding:.85rem 1rem;transition:border-color .2s;}
.rc:hover{border-color:var(--blue);text-decoration:none;}
.rc span{display:block;font-size:.69rem;font-weight:700;text-transform:uppercase;color:var(--blue);margin-bottom:.22rem;}
.rc strong{display:block;font-size:.85rem;color:var(--text);line-height:1.4;}
@media(max-width:600px){h1{font-size:1.55rem;}.cta{flex-direction:column;}}
.rel h2{font-size:.85rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.75rem;}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.65rem;}
.rc{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);padding:.9rem 1.1rem;transition:border-color .2s;}
.rc span{display:block;font-size:.7rem;font-weight:700;color:var(--blue);text-transform:uppercase;margin-bottom:.25rem;}
.rc strong{display:block;font-size:.86rem;color:var(--text);line-height:1.4;}
@media(max-width:600px){h1{font-size:1.5rem;}.cta{flex-direction:column;}}
.range-row input { flex:1; }
.unit-grid { display:grid; grid-template-columns:1fr auto 1fr; gap:1rem; align-items:end; margin:1.5rem 0; }
.unit-mid { text-align:center; color:var(--text-muted); font-size:1.5rem; padding-bottom:.4rem; }
.unit-group label { display:block; font-size:.85rem; color:var(--text-muted); margin-bottom:.35rem; }
.unit-group input,.unit-group select { width:100%; padding:.65rem .85rem; background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); font-size:1rem; }
.unit-group input:focus,.unit-group select:focus { outline:none; border-color:var(--blue); }
.unit-result { text-align:center; font-size:2rem; font-weight:700; color:var(--blue); padding:1.5rem; background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius-lg); margin-top:1rem; min-height:80px; }
.gen-output { background:var(--bg-raised); border:1px solid var(--border-lit); border-radius:var(--radius); padding:1.25rem; margin-top:1rem; display:none; word-break:break-all; font-family:monospace; font-size:1.1rem; }
.gen-output.show { display:block; }
.color-tool { text-align:center; }
.color-picker-big { width:100%; height:180px; border:none; cursor:pointer; border-radius:var(--radius); margin-bottom:1rem; }
.color-values { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1rem; }
.color-val { background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius); padding:.75rem; text-align:center; cursor:pointer; }
.color-val:hover { border-color:var(--blue); }
.color-val label { display:block; font-size:.72rem; color:var(--text-muted); margin-bottom:.25rem; text-transform:uppercase; }
.color-val span { font-family:monospace; font-size:.9rem; }
.grad-preview { height:140px; border-radius:var(--radius); margin:1rem 0; border:1px solid var(--border); }
.grad-code { background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; font-family:monospace; font-size:.85rem; color:var(--text-muted); word-break:break-all; }
.palette-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:.6rem; margin-top:1rem; }
.swatch { border-radius:var(--radius); overflow:hidden; cursor:pointer; border:1px solid var(--border); }
.swatch:hover { border-color:var(--blue); }
.swatch-color { height:90px; }
.swatch-label { padding:.35rem; text-align:center; font-family:monospace; font-size:.72rem; background:var(--bg-raised); color:var(--text-muted); }
.stat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:1rem; }
.stat-box { background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; text-align:center; }
.stat-num { font-size:2rem; font-weight:700; color:var(--blue); }
.stat-label { font-size:.8rem; color:var(--text-muted); }
.two-input { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
.diff-line { padding:.2rem .5rem; margin:.1rem 0; border-radius:4px; font-family:monospace; font-size:.88rem; }
.diff-added { background:rgba(76,175,80,.15); color:#4caf50; }
.diff-removed { background:rgba(224,85,85,.15); color:#e05555; }
.diff-same { color:var(--text-muted); }
.qr-canvas { border-radius:var(--radius); border:1px solid var(--border); background:white; padding:12px; margin:0 auto 1rem; display:block; }
.big-output { font-size:1.2rem; font-family:monospace; background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; word-break:break-all; cursor:pointer; }
.big-output:hover { border-color:var(--blue); }
@media(max-width:600px) { .unit-grid { grid-template-columns:1fr; } .unit-mid { display:none; } .color-values { grid-template-columns:1fr 1fr; } .palette-grid { grid-template-columns:repeat(3,1fr); } .two-input { grid-template-columns:1fr; } .stat-grid { grid-template-columns:1fr 1fr; } }
.upload-area:hover { border-color:var(--blue); background:rgba(61,184,245,.04); }
.opt-row select,.opt-row input[type=number] { width:100%; padding:.5rem .75rem; background:var(--bg-card); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:.9rem; }
.field{margin-bottom:1rem;}
.field label{display:block;font-size:.83rem;font-weight:600;color:var(--text-muted);margin-bottom:.35rem;}
.field label .req{color:var(--blue);font-size:.72rem;font-weight:500;margin-left:.35rem;}
.field input,.field select,.field textarea{width:100%;padding:.6rem .85rem;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:.9rem;font-family:inherit;transition:border-color .2s;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);}
.field select option{background:var(--bg-card);}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;}
.field-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.75rem;}
.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;}
.form-col h3,.output-col h3{font-size:.78rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:1.25rem;padding-bottom:.5rem;border-bottom:1px solid var(--border);}
textarea.code-out{width:100%;height:300px;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);color:#a8d8a8;padding:1.1rem;font-family:'Fira Mono','Cascadia Code',monospace;font-size:.82rem;resize:vertical;line-height:1.65;}
textarea.code-out:focus{outline:none;border-color:var(--blue);}
.copy-btn.copied{border-color:var(--green);color:var(--green);}
.out-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;}
.status{display:none;align-items:center;gap:.5rem;padding:.6rem 1rem;border-radius:var(--radius);font-size:.85rem;margin-bottom:.75rem;}
.status.ok{display:flex;background:rgba(76,175,80,.1);border:1px solid rgba(76,175,80,.25);color:var(--green);}
.status.err{display:flex;background:rgba(224,85,85,.1);border:1px solid rgba(224,85,85,.25);color:#e05555;}
.tab-strip{display:flex;gap:.25rem;margin-bottom:.75rem;background:var(--bg-raised);border:1px solid var(--border);border-radius:8px;padding:3px;}
.tab-btn{flex:1;padding:.4rem .6rem;border:none;background:transparent;color:var(--text-muted);font-size:.78rem;font-weight:600;cursor:pointer;border-radius:5px;transition:all .2s;font-family:inherit;}
.tab-btn.active{background:var(--border-lit);color:var(--text);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}
.ex-block{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;margin:.75rem 0;}
.ex-block h4{font-size:.88rem;font-weight:700;color:var(--blue);margin-bottom:.5rem;}
.ex-block pre{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;font-family:'Fira Mono','Cascadia Code',monospace;font-size:.8rem;color:#a8d8a8;overflow-x:auto;line-height:1.65;margin:.75rem 0;}
.ex-block p{font-size:.88rem;color:var(--text-muted);line-height:1.7;margin-bottom:.5rem;}
.content-section pre{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem;font-family:'Fira Mono',monospace;font-size:.82rem;color:#a8d8a8;overflow-x:auto;margin:1rem 0;line-height:1.65;}
.fmt-table{width:100%;border-collapse:collapse;margin:1rem 0 1.5rem;font-size:.88rem;}
.fmt-table th{background:var(--bg-raised);color:var(--blue);padding:.6rem .85rem;text-align:left;font-weight:600;border:1px solid var(--border);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;}
.fmt-table td{padding:.55rem .85rem;border:1px solid var(--border);color:var(--text-muted);vertical-align:top;}
.fmt-table td:first-child{color:var(--text);font-weight:500;}
.fmt-table tr:nth-child(even) td{background:rgba(255,255,255,.015);}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.6rem;margin-top:.75rem;}
.rel-link{display:flex;align-items:center;gap:.6rem;padding:.65rem .9rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);font-size:.85rem;color:var(--text);transition:border-color .2s;}
.rel-link:hover{border-color:var(--blue);text-decoration:none;}
.rel-link .icon{font-size:1rem;}
.opt-row select,.opt-row input[type=number],.opt-row input[type=text],.opt-row input[type=search] { width:100%; padding:.5rem .75rem; background:var(--bg-card); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:.9rem; }
.text-output pre,.text-output textarea { white-space:pre-wrap; word-break:break-all; font-size:.88rem; color:var(--text-muted); background:transparent; border:none; width:100%; resize:none; color:var(--text); }
.gen-output { background:var(--bg-raised); border:1px solid var(--border-lit); border-radius:var(--radius); padding:1.25rem; margin-top:1rem; display:none; word-break:break-all; font-family:monospace; }
.color-val { background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius); padding:.75rem; text-align:center; }
.color-val span { font-family:monospace; font-size:.9rem; cursor:pointer; }
.grad-preview { height:140px; border-radius:var(--radius); margin:1rem 0; border:1px solid var(--border); transition:background .3s; }
.grad-code { background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; font-family:monospace; font-size:.85rem; color:var(--text-muted); word-break:break-all; margin-top:.75rem; }
.big-result { font-size:2.5rem; font-weight:700; color:var(--blue); font-family:monospace; padding:1.5rem; background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius); text-align:center; margin:1rem 0; word-break:break-all; }
.qr-result { text-align:center; margin-top:1rem; }
.qr-result canvas { border-radius:var(--radius); border:1px solid var(--border); }
.diff-output { background:var(--bg-raised); border:1px solid var(--border-lit); border-radius:var(--radius); padding:1.25rem; margin-top:1rem; font-size:.88rem; line-height:1.8; }
.same { color:var(--text-muted); }
.added { color:#4caf50; background:rgba(76,175,80,.1); }
.removed { color:#e05555; background:rgba(224,85,85,.1); }
textarea.code{width:100%;height:260px;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:1rem;font-family:'Fira Mono','Cascadia Code',monospace;font-size:.88rem;resize:vertical;tab-size:2;}
textarea.code:focus{outline:none;border-color:var(--blue);}
input.inp{width:100%;padding:.75rem 1rem;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:.95rem;font-family:inherit;}
input.inp:focus{outline:none;border-color:var(--blue);}
select.sel{padding:.65rem .9rem;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:.9rem;cursor:pointer;}
.status-bar.err{background:rgba(224,85,85,.12);border:1px solid rgba(224,85,85,.3);color:#e05555;}
.status-bar.info{background:rgba(61,184,245,.1);border:1px solid rgba(61,184,245,.3);color:var(--blue);}
.result-box{background:var(--bg-raised);border:1px solid var(--border-lit);border-radius:var(--radius);padding:1.25rem;margin-top:1rem;display:none;}
.result-box.show{display:block;}
.result-box pre,.result-box code{font-family:'Fira Mono','Cascadia Code',monospace;font-size:.88rem;white-space:pre-wrap;word-break:break-all;color:var(--text);}
.big-val{font-size:2rem;font-weight:700;color:var(--blue);font-family:monospace;padding:1.25rem;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);text-align:center;margin:.75rem 0;word-break:break-all;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:.75rem 0;}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin:.75rem 0;}
.val-card{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);padding:.9rem 1.1rem;}
.val-card label{display:block;font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.35rem;}
.val-card .val{font-family:monospace;font-size:1rem;color:var(--text);word-break:break-all;cursor:pointer;}
.val-card .val:hover{color:var(--blue);}
.val-card .val-hint{font-size:.75rem;color:var(--text-muted);margin-top:.2rem;}
.cluster-nav{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;margin:1.5rem 0 2rem;}
.cluster-nav h3{font-size:.78rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:1rem;}
.cluster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:.5rem;}
.cluster-link{display:flex;align-items:center;gap:.6rem;padding:.6rem .85rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);font-size:.83rem;color:var(--text);transition:border-color .2s;}
.cluster-link:hover{border-color:var(--blue);text-decoration:none;}
.cluster-link.active{border-color:var(--blue);background:rgba(61,184,245,.07);color:var(--blue);}
.cl-icon{font-size:.95rem;flex-shrink:0;}
.faq-a a,
td:first-child{color:var(--text);font-weight:500;}
.win{color:var(--green);font-weight:600;}
.verdict{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;margin:2rem 0;display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.verdict-box h3{margin-top:0;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;}
.verdict-box ul{margin:0;padding-left:1.2rem;}
.verdict-box li{font-size:.88rem;margin-bottom:.3rem;}
.verdict-box.a{border-left:3px solid var(--amber);}
.verdict-box.b{border-left:3px solid var(--blue);}
@media(max-width:600px){.verdict{grid-template-columns:1fr;}}
.faq-item:last-child{border-bottom:none;}
.compare-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.75rem;margin:1rem 0;}
.compare-link{display:block;padding:.75rem 1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);font-size:.85rem;color:var(--text-muted);}
.compare-link:hover{border-color:var(--blue);color:var(--blue);text-decoration:none;}
/* Tool box */
.tool-box{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2rem;margin:1.5rem 0;}
.btn.danger{background:#e05555;}
.btn.danger:hover{background:#c04040;}
/* Preview pane (markdown) */
.preview-pane{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;min-height:260px;overflow-y:auto;}
.preview-pane h1,.preview-pane h2,.preview-pane h3{margin:.75rem 0 .4rem;font-weight:700;}
.preview-pane h1{font-size:1.5rem;border-bottom:1px solid var(--border);padding-bottom:.4rem;}
.preview-pane h2{font-size:1.2rem;}
.preview-pane p{color:var(--text-muted);margin-bottom:.75rem;font-size:.95rem;}
.preview-pane code{background:var(--bg-card);border:1px solid var(--border);border-radius:4px;padding:.1em .4em;font-family:monospace;font-size:.88em;color:var(--blue);}
.preview-pane pre{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;overflow-x:auto;margin-bottom:.75rem;}
.preview-pane pre code{background:none;border:none;padding:0;color:var(--text);}
.preview-pane blockquote{border-left:3px solid var(--blue);padding:.5rem 1rem;color:var(--text-muted);margin:.75rem 0;}
.preview-pane ul,.preview-pane ol{padding-left:1.5rem;color:var(--text-muted);margin-bottom:.75rem;}
.preview-pane a{color:var(--blue);}
.preview-pane table{width:100%;border-collapse:collapse;font-size:.9rem;margin-bottom:.75rem;}
.preview-pane th{text-align:left;padding:.5rem .75rem;border-bottom:2px solid var(--border);font-size:.8rem;text-transform:uppercase;color:var(--text-muted);}
.preview-pane td{padding:.5rem .75rem;border-bottom:1px solid var(--border);color:var(--text-muted);}
.preview-pane strong{color:var(--text);}
/* Cluster nav */
.cluster-nav{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;margin:2rem 0;}
.cluster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.6rem;}
.cluster-link{display:flex;align-items:center;gap:.6rem;padding:.65rem .9rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);font-size:.85rem;color:var(--text);transition:border-color .2s;}
.cluster-link .cl-icon{font-size:1rem;flex-shrink:0;}
/* Blog posts */
/* FAQ */
.faq-a a{color:var(--blue);}
/* Footer */
.drop-zone .drop-text{font-size:.85rem;color:var(--text-muted);}
.drop-zone .drop-text strong{color:var(--text);}
.drop-zone .drop-link{color:var(--blue);cursor:pointer;text-decoration:underline;}
.mode-tabs{display:flex;gap:.5rem;margin-bottom:1.25rem;flex-wrap:wrap;}
.mode-tab{padding:.55rem 1.2rem;border-radius:var(--radius);font-size:.88rem;font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--bg-raised);color:var(--text-muted);transition:all .2s;}
.mode-tab:hover{border-color:var(--blue);color:var(--text);}
.mode-tab.active{background:var(--blue);color:#fff;border-color:var(--blue);}
.controls-row{display:flex;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap;align-items:center;}
.controls-row select,.controls-row input{padding:.5rem .75rem;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:.85rem;}
.controls-row select:focus,.controls-row input:focus{outline:none;border-color:var(--blue);}
.controls-row label{font-size:.8rem;color:var(--text-muted);font-weight:600;}
.editor-wrap{position:relative;}
.drop-overlay{display:none;position:absolute;inset:0;background:rgba(61,184,245,.08);border:2px dashed var(--blue);border-radius:var(--radius);z-index:10;pointer-events:none;align-items:center;justify-content:center;}
.drop-overlay.active{display:flex;}
.drop-overlay span{background:var(--bg-card);color:var(--blue);font-weight:700;font-size:.95rem;padding:.6rem 1.4rem;border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,.25);pointer-events:none;}
.file-hint{display:flex;align-items:center;justify-content:space-between;padding:.4rem .2rem;font-size:.78rem;color:var(--text-muted);}
.file-hint .browse-link{color:var(--blue);cursor:pointer;font-weight:600;text-decoration:none;transition:color .2s;}
.file-hint .browse-link:hover{color:var(--blue-dark);text-decoration:underline;}
.file-hint .file-name{color:var(--blue);font-weight:600;margin-left:.5rem;}
textarea.code{width:100%;height:280px;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:1rem 1rem 1rem 3.5rem;font-family:'Fira Mono','Cascadia Code','SF Mono',monospace;font-size:.88rem;resize:vertical;tab-size:2;line-height:1.65;counter-reset:line;}
.btn.sm{padding:.45rem 1rem;font-size:.82rem;}
.results-panel{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;margin:1.25rem 0;display:none;}
.results-panel.show{display:block;}
.result-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;}
.result-header h3{font-size:1rem;font-weight:700;}
.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .75rem;border-radius:20px;font-size:.78rem;font-weight:600;}
.badge.ok{background:rgba(76,175,80,.15);border:1px solid rgba(76,175,80,.3);color:#4caf50;}
.badge.err{background:rgba(224,85,85,.15);border:1px solid rgba(224,85,85,.3);color:#e05555;}
.badge.warn{background:rgba(245,166,35,.15);border:1px solid rgba(245,166,35,.3);color:#f5a623;}
.badge.info{background:rgba(61,184,245,.15);border:1px solid rgba(61,184,245,.3);color:#3db8f5;}
.error-list{list-style:none;}
.error-item{display:flex;align-items:flex-start;gap:.75rem;padding:.65rem .85rem;border-radius:var(--radius);margin-bottom:.4rem;font-size:.88rem;line-height:1.5;}
.error-item.error{background:rgba(224,85,85,.08);border:1px solid rgba(224,85,85,.15);}
.error-item.warning{background:rgba(245,166,35,.08);border:1px solid rgba(245,166,35,.15);}
.error-item .icon{font-size:1rem;flex-shrink:0;margin-top:.1rem;}
.error-item.error .icon{color:#e05555;}
.error-item.warning .icon{color:#f5a623;}
.stats-row{display:flex;gap:1.5rem;flex-wrap:wrap;margin-top:1rem;padding-top:.75rem;border-top:1px solid var(--border);}
.stat{display:flex;flex-direction:column;gap:.1rem;}
.stat-label{font-size:.72rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;}
.stat-val{font-size:.95rem;font-weight:600;}
.format-output{width:100%;min-height:200px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:1rem;font-family:'Fira Mono','Cascadia Code',monospace;font-size:.88rem;line-height:1.65;white-space:pre;overflow-x:auto;overflow-y:auto;max-height:500px;}
/* Explainer */
.explain-section{margin-bottom:1.25rem;}
.explain-section h4{font-size:.88rem;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem;}
.explain-summary{font-size:.95rem;color:var(--text);line-height:1.75;padding:1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:.5rem;}
.explain-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.75rem;}
.explain-card{padding:.85rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);}
.explain-card .label{font-size:.72rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.25rem;}
.explain-card .value{font-size:.9rem;font-weight:600;}
.complexity-bar{height:8px;border-radius:4px;background:var(--border);margin:.5rem 0;overflow:hidden;}
.complexity-fill{height:100%;border-radius:4px;transition:width .5s ease;}
.chip-list{display:flex;flex-wrap:wrap;gap:.4rem;}
.chip{padding:.25rem .6rem;background:var(--bg);border:1px solid var(--border);border-radius:6px;font-size:.8rem;color:var(--text-muted);}
/* Content sections */
.content-section ul,.content-section ol{color:var(--text-muted);padding-left:1.5rem;margin-bottom:1rem;}
.content-section pre{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem 1.5rem;overflow-x:auto;margin:1rem 0;}
.content-section pre code{background:none;border:none;padding:0;color:var(--text);font-size:.88rem;line-height:1.65;}
.cluster-nav{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;margin:2rem 0;}
.privacy-box{background:rgba(61,184,245,.06);border:1px solid rgba(61,184,245,.2);border-radius:var(--radius-lg);padding:1.5rem;margin:2rem 0;}
.privacy-box h3{font-size:1rem;font-weight:700;color:var(--blue);margin-bottom:.5rem;}
.privacy-box p{font-size:.88rem;color:var(--text-muted);line-height:1.8;margin:0;}
@media(max-width:768px){.controls-row{flex-direction:column;}.mode-tabs{flex-direction:column;gap:.35rem;}.explain-grid{grid-template-columns:1fr;}textarea.code{height:200px;}}
.error-item a.error-link{color:inherit;text-decoration:none;cursor:pointer;display:flex;align-items:flex-start;gap:.75rem;width:100%;}
.error-item a.error-link:hover{text-decoration:underline;}
.error-item .line-badge{display:inline-flex;align-items:center;gap:.25rem;background:rgba(224,85,85,.12);color:#e05555;font-size:.75rem;font-weight:700;padding:.15rem .5rem;border-radius:4px;white-space:nowrap;cursor:pointer;margin-left:.4rem;}
.error-item.warning .line-badge{background:rgba(245,166,35,.12);color:#f5a623;}
.error-item .fix-btn{display:inline-flex;align-items:center;gap:.3rem;margin-left:.5rem;padding:.2rem .6rem;font-size:.75rem;font-weight:600;background:rgba(61,184,245,.1);color:var(--blue);border:1px solid rgba(61,184,245,.25);border-radius:4px;cursor:pointer;transition:all .2s;white-space:nowrap;}
.error-item .fix-btn:hover{background:rgba(61,184,245,.2);border-color:var(--blue);}
.fix-suggestion{margin-top:.5rem;padding:.6rem .85rem;background:rgba(61,184,245,.06);border:1px solid rgba(61,184,245,.15);border-radius:6px;font-size:.82rem;line-height:1.6;color:var(--text);display:none;}
.fix-suggestion.show{display:block;}
.fix-suggestion code{background:rgba(61,184,245,.1);padding:.1rem .4rem;border-radius:3px;font-size:.8rem;}
.error-highlight{background:rgba(224,85,85,.2) !important;border-left:3px solid #e05555;padding-left:4px;}

/* ═══════════════════════════════════════════════════════════════
   Ad System — slot sizing (prevent CLS)
   Full styles live in assets/ads.css; these rules are the
   minimum needed before ads.css loads to hold layout space.
   ═══════════════════════════════════════════════════════════════ */
.ad-wrap{margin:24px 0;text-align:center;}
.ad-wrap.is-empty{display:none;}
.ad-label{font-size:.68rem;color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:.35rem;opacity:.6;}
.ad-slot{width:100%;display:block;background:transparent;overflow:hidden;}
.ad-slot.is-empty{display:none;}
.ad-slot-top{min-height:90px;max-width:970px;margin:0 auto;}
@media(max-width:768px){.ad-slot-top{min-height:50px;max-width:320px;}}
.ad-slot-tool-inline,.ad-slot-home-mid,.ad-slot-home-lower,.ad-slot-category-mid,.ad-slot-category-bottom,.ad-slot-blog-inline-1,.ad-slot-blog-inline-2,.ad-slot-blog-bottom,.ad-slot-tool-lower{min-height:280px;max-width:728px;margin:0 auto;}
.ad-slot-sidebar-sticky{min-height:600px;width:300px;max-width:300px;}
.ad-slot[data-debug="1"]{background:rgba(61,184,245,.07);border:1px dashed rgba(61,184,245,.35);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--blue);font-size:.75rem;font-family:monospace;letter-spacing:.04em;}