:root{--p:#0f63c8;--p2:#08468f;--bg:#f4f7fb;--card:#fff;--line:#dfe6ef;--text:#172033;--muted:#667085}
.tool-page{background:var(--bg);padding:26px 0 55px;min-height:75vh}
.tool-wrap{width:min(1100px,92%);margin:auto}
.tool-breadcrumb{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px;color:var(--muted)}
.tool-breadcrumb a{color:var(--p);font-weight:800}
.tool-panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:0 8px 28px #0000000d}
.tool-panel h1{margin:0 0 8px;color:var(--p2)}
.tool-panel p{color:var(--muted);line-height:1.6}
.tool-form{display:grid;gap:14px;margin-top:18px}
.tool-form label{font-weight:800}
.tool-form input,.tool-form select{padding:12px;border:1px solid #cbd5e1;border-radius:8px;font-size:15px;width:100%;box-sizing:border-box}
.tool-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.tool-btn{display:inline-flex;align-items:center;justify-content:center;background:var(--p);color:#fff;border:0;border-radius:8px;padding:11px 17px;font-weight:900;cursor:pointer}
.tool-btn.secondary{background:#111}
.preview{margin-top:20px;padding:18px;border:1px dashed #b8c4d3;border-radius:12px;background:#fbfcfe;text-align:center}
.preview canvas,.preview img{max-width:100%;height:auto}
.download-link{display:none;margin-top:14px}
.tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tool-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;text-align:center;box-shadow:0 7px 20px #0000000b}
.tool-card h2{font-size:18px;min-height:48px}
.tool-icon{font-size:38px}
.tool-card a{display:inline-flex;background:#111;color:#fff;padding:9px 15px;border-radius:7px;font-weight:800}
@media(max-width:900px){.tool-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.tool-grid{grid-template-columns:repeat(2,1fr)}.tool-row{grid-template-columns:1fr}}
@media(max-width:480px){.tool-grid{grid-template-columns:1fr}}