/* Free tools pages (/tools). Builds on site.css buttons and fonts. */
body { background: #f6f5f0; color: #14130f; margin: 0; }
.tool-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; max-width: 1040px; margin: 0 auto; flex-wrap: wrap; }
.tool-nav .logo { display: flex; align-items: center; gap: 8px; font-weight: 700; color: inherit; text-decoration: none; }
.tool-nav .logo img { width: 26px; height: 26px; }
.tool-nav nav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 14px; }
.tool-nav nav a:not(.btn) { color: inherit; opacity: .75; text-decoration: none; }
.tool-main { max-width: 760px; margin: 0 auto; padding: 120px 16px 64px; }
.tool-crumb { font-size: 14px; color: inherit; opacity: .6; text-decoration: none; }
.tool-main h1 { font-size: clamp(28px, 5vw, 42px); line-height: 1.1; margin: 14px 0 10px; letter-spacing: -.02em; }
.tool-lead { font-size: 18px; opacity: .78; margin: 0 0 24px; }
.tool-panel { background: #fff; border-radius: 20px; padding: 20px; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 30px rgba(0,0,0,.05); display: flex; flex-direction: column; gap: 8px; }
.tool-label { font-weight: 600; font-size: 14px; margin-top: 8px; }
.tool-input { width: 100%; box-sizing: border-box; border: 1px solid rgba(20,19,15,.15); border-radius: 12px; padding: 11px 12px; font: inherit; font-size: 16px; background: #fff; color: inherit; }
.tool-input:focus { outline: 2px solid #c8f03a; border-color: transparent; }
.tool-file { font: inherit; font-size: 14px; }
.tool-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 6px 0; }
.tool-out { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.tool-ok { color: #1c7a3a; font-weight: 600; margin: 4px 0; }
.tool-error { color: #b42318; font-weight: 600; margin: 4px 0; }
.tool-hint { font-size: 13px; opacity: .65; margin: 2px 0; }
.tool-link { display: block; word-break: break-all; background: #f1f0ea; padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.tool-qr { width: 220px; height: 220px; border-radius: 12px; background: #fff; border: 1px solid rgba(0,0,0,.08); }
.tool-table-wrap { overflow-x: auto; max-height: 420px; border: 1px solid rgba(0,0,0,.08); border-radius: 12px; }
.tool-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tool-table th, .tool-table td { padding: 8px 10px; text-align: start; border-bottom: 1px solid rgba(0,0,0,.06); }
.tool-table th { position: sticky; top: 0; background: #faf9f5; }
.tool-table tr.is-invalid td:last-child { color: #b42318; } .tool-table tr.is-duplicate td:last-child { color: #a15c07; } .tool-table tr.is-ok td:last-child { color: #1c7a3a; }
.tool-bubble { background: #dcf8c6; border-radius: 12px 12px 12px 4px; padding: 10px 12px; font-size: 15px; line-height: 1.45; min-height: 24px; white-space: normal; word-wrap: break-word; }
.tool-bubble code { font-family: ui-monospace, Menlo, monospace; }
.tool-templates { display: grid; gap: 12px; }
.tool-template { border: 1px solid rgba(0,0,0,.07); border-radius: 14px; padding: 12px; }
.tool-template h3 { margin: 0 0 8px; font-size: 16px; }
.tool-cta { margin: 28px 0; padding: 20px; border-radius: 20px; background: #0b0d0c; color: #f6f5f0; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.tool-cta p { margin: 0; font-size: 17px; }
.tool-faq details { background: #fff; border-radius: 12px; padding: 12px 14px; margin: 8px 0; }
.tool-faq summary { font-weight: 600; cursor: pointer; }
.tool-more { display: flex; flex-direction: column; gap: 6px; margin-top: 24px; }
.tool-more a { color: inherit; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.tool-card { background: #fff; border-radius: 18px; padding: 18px; color: inherit; text-decoration: none; box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: transform .15s; }
.tool-card:hover { transform: translateY(-2px); }
.tool-card h2 { font-size: 19px; margin: 0 0 6px; } .tool-card p { opacity: .7; margin: 0 0 10px; font-size: 15px; } .tool-card span { font-weight: 600; }
.tool-by { font-size: 13px; opacity: .55; margin-top: 36px; }