.tool-page{background:#f3f5f1;color:#10211d;min-height:100vh}.tool-page .site-header{height:82px}.tool-nav{display:flex;align-items:center;gap:25px;font-size:13px;font-weight:700;color:#b7ccc5}.tool-nav a:hover{color:#fff}.tool-nav .tool-home{border:1px solid #476b60;border-radius:100px;padding:11px 17px;color:#d6f6e9}.tool-wrap{max-width:1240px;margin:0 auto;padding:52px 5% 90px}.breadcrumb{display:flex;align-items:center;gap:9px;font-size:12px;color:#647b70;margin-bottom:32px}.breadcrumb a{color:#277561;font-weight:700}.breadcrumb span{color:#a2b6ac}.tool-intro{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end;margin-bottom:34px}.tool-intro h1{font-size:clamp(38px,4.7vw,64px);line-height:1.08;letter-spacing:-.055em;margin:12px 0 14px}.tool-intro>div>p:last-child{color:#63736b;line-height:1.7;margin:0;max-width:680px;font-size:15px}.tool-kicker{color:#35876e;font-size:10px;font-weight:800;letter-spacing:.15em;margin:0}.privacy-badge{font-size:11px;color:#25725a;background:#e0f1e6;padding:11px 14px;border:1px solid #c4e3d1;border-radius:100px;white-space:nowrap}.tool-panel{background:#fff;border:1px solid #d9e4db;border-radius:12px;box-shadow:0 12px 35px #1537240a;overflow:hidden}.panel-head{background:#102920;color:#e8fff2;padding:19px 25px;display:flex;justify-content:space-between;align-items:center;gap:15px}.panel-head strong{font-size:13px}.panel-head span{font-size:11px;color:#a5cabc}.panel-content{padding:25px}.tool-fields{display:grid;grid-template-columns:1fr 1fr;gap:20px}.tool-field{display:block;font-size:12px;font-weight:750;color:#234236;line-height:1.4}.tool-field small{display:block;font-weight:400;color:#72877b;margin-top:5px;font-size:12px}.tool-field input,.tool-field select,.tool-field textarea{display:block;width:100%;min-width:0;border:1px solid #c8d9cd;border-radius:6px;background:#fff;color:#17392b;padding:13px 14px;margin-top:8px;font-size:14px;line-height:1.5}.tool-field input:focus,.tool-field select:focus,.tool-field textarea:focus{outline:2px solid #58bd9d;outline-offset:2px}.tool-field textarea{min-height:275px;resize:vertical;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13px;line-height:1.6;tab-size:2}.tool-field textarea.output-short{min-height:100px}.tool-field input::placeholder,.tool-field textarea::placeholder{color:#93a49a}.tool-wide{grid-column:1/-1}.tool-buttons{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:20px}.tool-btn{border:1px solid #c1d8c9;background:#f7fbf7;color:#214b3b;padding:12px 17px;min-height:45px;border-radius:6px;font-size:12px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:background .15s}.tool-btn:hover{background:#e7f4eb}.tool-btn.primary{background:#0f3027;color:#f3fff9;border-color:#0f3027}.tool-btn.primary:hover{background:#205845}.tool-btn:disabled{opacity:.45;cursor:not-allowed}.inline-select{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:#48685b;margin-left:auto}.inline-select select{border:1px solid #c1d8c9;border-radius:6px;padding:10px;color:#214b3b;background:#fff}.tool-status{font-size:13px;line-height:1.55;min-height:20px;margin:15px 0 0;color:#316b50}.tool-status.error{color:#aa332d}.tool-help{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:42px}.tool-help h2{font-size:22px;line-height:1.2;margin:0 0 12px}.tool-help p,.tool-help li{font-size:14px;color:#62766c;line-height:1.75}.tool-help ol{padding-left:20px;margin:0}.tool-help-card{border-top:1px solid #cfded3;padding-top:23px}.tool-related{margin-top:48px;border-top:1px solid #cfddd4;padding-top:25px}.tool-related h2{font-size:11px;letter-spacing:.14em;color:#638377;margin:0 0 16px}.related-links{display:flex;flex-wrap:wrap;gap:12px}.related-links a{display:inline-block;background:#e6f0e8;border:1px solid #d3e4d7;border-radius:100px;padding:10px 14px;color:#2a6b54;font-size:12px;font-weight:700}.tool-footer{padding:25px 5%;background:#08121a;color:#91ada0;text-align:center;font-size:11px}.tool-footer a{color:#c3f3dc}.file-box{border:1px dashed #9ec9b0;background:#f4faf5;border-radius:8px;padding:24px}.file-box input{margin-top:12px;max-width:100%}.image-settings{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px}.image-preview{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;margin-top:20px}.image-preview img{display:block;max-width:100%;max-height:360px;border-radius:6px;object-fit:contain;background:#e7eee8}.image-meta{font-size:13px;color:#64796d;line-height:1.65}.image-meta strong{color:#1d4635}.note{font-size:12px;color:#708379;line-height:1.6}.tool-file-error{color:#aa332d}.tool-catalog-link{display:inline-flex;margin-top:16px;color:#3a705c;font-size:12px;text-decoration:underline;text-underline-offset:3px}
@media(max-width:800px){.tool-page .site-header{height:74px}.tool-wrap{padding:38px 6% 65px}.tool-intro{grid-template-columns:1fr;gap:18px}.privacy-badge{justify-self:start}.tool-fields{grid-template-columns:1fr}.tool-wide{grid-column:auto}.image-settings{grid-template-columns:1fr 1fr}.tool-help{grid-template-columns:1fr}.panel-content{padding:20px}.tool-nav{gap:15px}.tool-nav .tool-home{display:none}.inline-select{margin-left:0}.image-preview{grid-template-columns:1fr}}
@media(max-width:480px){.tool-page .brand-name{font-size:18px}.tool-page .brand img{height:36px;width:36px}.tool-nav{font-size:12px}.tool-intro h1{font-size:38px}.panel-head{padding:17px 20px}.panel-head span{display:none}.tool-field textarea{min-height:220px}.tool-buttons{align-items:stretch}.tool-btn{flex:1}.image-settings{grid-template-columns:1fr 1fr}}
.tool-page [hidden]{display:none!important}
.utility-inputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.utility-inputs .tool-field:has(textarea){grid-column:1/-1}.utility-inputs textarea{min-height:180px}.utility-check{display:flex;gap:10px;align-items:center;font-size:13px;color:#315547;line-height:1.5}.utility-check input{width:18px;height:18px;accent-color:#247c61}.tool-field textarea.utility-output{min-height:150px}.utility-preview{display:flex;gap:14px;flex-wrap:wrap;margin:20px 0}.utility-swatch{display:flex;flex-direction:column;gap:7px;color:#4e6d5e;font-size:11px;max-width:170px;overflow-wrap:anywhere}.utility-swatch-color{display:block;width:100px;height:65px;border:1px solid #b7c9bd;border-radius:6px}.utility-gradient{width:100%;height:100px;border-radius:6px}.directory-section{margin-top:40px}.directory-section h2{font-size:26px;margin:0 0 20px}.directory-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.directory-card{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid #d5e2d8;border-radius:7px;padding:20px;transition:border-color .2s,transform .2s}.directory-card:hover{border-color:#70b89c;transform:translateY(-3px)}.directory-card strong{font-size:15px;letter-spacing:-.02em}.directory-card span{font-size:13px;line-height:1.6;color:#677c70}@media(max-width:800px){.directory-grid{grid-template-columns:1fr 1fr}}@media(max-width:480px){.utility-inputs,.directory-grid{grid-template-columns:1fr}.utility-inputs .tool-field:has(textarea){grid-column:auto}.utility-swatch-color{width:70px;height:50px}}
.utility-qr{display:block;width:min(240px,100%);height:auto;background:#fff;border-radius:12px;margin:0 auto 16px}
.utility-shadow{width:110px;height:110px;margin:38px auto;border-radius:18px;background:#a8f8df}
[data-utility="qr-code-generator"] #utility-result>.tool-field,[data-utility="qr-code-generator"] #utility-copy{display:none}
.file-list{list-style:none;padding:0;margin:14px 0;display:grid;gap:8px}.file-list li{display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid #d5e2d8;border-radius:8px;background:#f7faf6;font-size:13px;overflow-wrap:anywhere}.file-list li span{flex:1;min-width:0}.file-order{border:1px solid #b5c8bc;border-radius:6px;background:#fff;color:#194636;min-width:30px;min-height:30px;cursor:pointer}.file-order:disabled{opacity:.35;cursor:default}.file-preview{display:block;max-width:min(100%,520px);max-height:400px;object-fit:contain;border:1px solid #d5e2d8;border-radius:8px;background:#fff;margin:14px auto}.file-result{margin-top:20px}.file-result[hidden],.file-preview[hidden],.file-list[hidden]{display:none}.file-note{font-size:13px;color:#62766d;line-height:1.5;margin:8px 0}


/* Semantic, crawlable category accordion keeps the directory short at any scale. */
.directory-search-link{display:inline-flex;align-items:center;justify-content:center;gap:7px;margin-top:17px;padding:11px 17px;border:1px solid #96c5ad;background:#effbf3;color:#1b694e;font-size:13px;font-weight:750;border-radius:999px}
.directory-search-link:hover{background:#d7f4e4}
details.directory-section{margin:12px 0 0;border:1px solid #d1e3d8;border-radius:12px;overflow:hidden;background:#fff}
details.directory-section:first-of-type{margin-top:35px}
details.directory-section>summary{display:flex;align-items:center;gap:15px;padding:19px 23px;cursor:pointer;list-style:none;font-size:18px;font-weight:780;color:#18382a;background:#fff}
details.directory-section>summary::-webkit-details-marker{display:none}
details.directory-section>summary:hover{background:#f4faf5}
details.directory-section>summary:focus-visible{outline:3px solid #45bfa8;outline-offset:-3px}
details.directory-section>summary small{font-size:12px;font-weight:650;color:#648071;margin-left:auto}
.directory-chevron{font-size:23px;color:#407a60;transform:rotate(0);transition:transform .2s}
details.directory-section[open] .directory-chevron{transform:rotate(180deg)}
details.directory-section .directory-grid{border-top:1px solid #e0eae2;padding:15px;gap:9px;margin:0;background:#f8faf8}
details.directory-section .directory-card{padding:15px;border-radius:9px;min-height:93px;gap:6px}
details.directory-section .directory-card strong{font-size:14px}
details.directory-section .directory-card span{font-size:12px;line-height:1.45}
@media(max-width:480px){details.directory-section>summary{padding:16px;font-size:16px}details.directory-section .directory-grid{padding:10px}}
@media(prefers-reduced-motion:reduce){.directory-chevron{transition:none}}