/* Free-tools pages. Loaded AFTER assets/style.css — reuses its tokens and the
   site nav / footer, and only adds the tool-specific components. */

.tool { --good:#5fd07a; --bad:#ff6a7a; display:block; padding-top:26px; padding-bottom:64px; } /* side padding from .container */
.tool h1 { font-size:26px; font-weight:800; letter-spacing:-0.01em; margin:20px 0 8px; }
.tool h2 { font-size:18px; font-weight:700; margin:30px 0 10px; }
.tool h3 { font-size:12px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; margin:22px 0 8px; }
.tool .lede { font-size:16px; color:var(--text-dim); max-width:72ch; margin:0 0 22px; }
.crumb { font:11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); margin:6px 0 0; }
.crumb a { color:var(--text-faint); }

/* form */
.t-form { display:flex; gap:10px; margin:8px 0 4px; flex-wrap:wrap; align-items:flex-start; }
.t-form input[type=text], .t-form textarea {
  flex:1; min-width:260px; background:var(--bg-alt); border:1px solid var(--border); color:var(--text);
  border-radius:12px; padding:12px 14px; font-size:14px; font-family:var(--sans);
}
.t-form textarea { width:100%; min-height:150px; font-family:var(--mono); font-size:12.5px; line-height:1.5; resize:vertical; }
.t-form input:focus, .t-form textarea:focus { outline:none; border-color:var(--accent); }
.t-form button {
  background:var(--accent); color:#06120f; border:0; border-radius:12px;
  padding:12px 24px; font-weight:700; font-size:14px; cursor:pointer; white-space:nowrap;
}
.t-form button:disabled { opacity:.55; cursor:default; }
.t-hint { font-size:12px; color:var(--text-faint); margin:2px 0 0; }
.t-hint a { color:var(--text-dim); }

/* image human check (same look as /free-scan) */
.t-human { margin:12px 0 0; }
.t-human[hidden], .t-captcha[hidden] { display:none; }
.t-human-check { display:inline-flex; align-items:center; gap:8px; color:var(--text-dim); cursor:pointer; font-size:13.5px; }
.t-human-check input { width:14px; height:14px; margin:0; flex:none; accent-color:var(--accent); }
.t-captcha { width:fit-content; max-width:100%; margin-top:12px; padding:14px; border:1px solid var(--border); border-radius:10px; background:var(--surface); }
.t-captcha-title { margin:0 0 10px; color:var(--text); font-size:14px; font-weight:650; }
.t-captcha-grid { display:grid; grid-template-columns:repeat(9, minmax(0, 1fr)); gap:4px; width:540px; max-width:100%; }
.t-captcha-tile { position:relative; overflow:hidden; aspect-ratio:1; padding:0; border:2px solid transparent; border-radius:6px; background:var(--bg-alt); cursor:pointer; }
.t-captcha-tile img { display:block; width:100%; height:100%; object-fit:cover; }
.t-captcha-tile[aria-pressed="true"] { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent); }
.t-captcha-tile[aria-pressed="true"]::after { content:"\2713"; position:absolute; right:2px; bottom:2px; width:16px; height:16px; border-radius:50%; background:var(--accent); color:var(--bg); font-size:11px; font-weight:700; line-height:16px; text-align:center; }
.t-captcha-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:10px; }
.t-captcha-actions button { padding:4px 0; border:0; background:transparent; color:var(--text-dim); text-decoration:underline; cursor:pointer; font:inherit; font-size:12px; }
.t-captcha-status { color:var(--text-dim); font-size:12px; }
.t-captcha-status.err { color:#ff6a7a; }
/* phones: 9-in-a-row tiles get too small to recognise, so use a 3x3 grid */
@media (max-width:640px) { .t-captcha { width:auto; } .t-captcha-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; width:100%; max-width:320px; } }
.t-msg { margin:14px 0; font-size:13.5px; color:var(--text-dim); min-height:1em; }
.t-msg.err { color:#ff6a7a; }
.spin {
  display:inline-block; width:13px; height:13px; border:2px solid var(--border); border-top-color:var(--accent);
  border-radius:50%; animation:t-sp .7s linear infinite; vertical-align:-2px; margin-right:7px;
}
@keyframes t-sp { to { transform:rotate(360deg); } }

/* result */
.t-result { margin-top:10px; }
.verdict {
  display:flex; align-items:center; gap:16px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px 18px; margin:14px 0 6px;
}
.verdict .badge {
  font-size:30px; font-weight:800; line-height:1; padding:10px 16px; border-radius:12px;
  background:var(--surface-2); border:1px solid var(--border); white-space:nowrap;
}
.verdict .vtext { color:var(--text-dim); font-size:14px; }
.verdict .vtext b { color:var(--text); display:block; font-size:15px; margin-bottom:2px; }
.badge.r-good { color:#5fd07a; } .badge.r-fair, .badge.r-warn { color:var(--warn); }
.badge.r-poor, .badge.r-bad { color:#ff6a7a; } .badge.r-na { color:var(--text-dim); }

.t-result table, .pane table { width:100%; border-collapse:collapse; font-size:13px; margin:4px 0 8px; }
.t-result th, .t-result td, .pane th, .pane td {
  text-align:left; padding:7px 10px; border-bottom:1px solid var(--border); vertical-align:top;
}
.t-result td:first-child, .pane td:first-child { color:var(--text-dim); width:230px; white-space:nowrap; }
.t-result td.val, .pane td.val { color:var(--text); word-break:break-word; font-family:var(--mono); font-size:12.5px; }
td.val.v-good { color:#5fd07a; } td.val.v-warn { color:var(--warn); } td.val.v-bad { color:#ff6a7a; }
@media (max-width:640px) { .t-result td:first-child, .pane td:first-child { width:auto; white-space:normal; } }
.t-note { font-size:12px; color:var(--text-faint); margin:16px 0 0; border-top:1px solid var(--border); padding-top:12px; }

/* SEO copy block */
.tool-copy { margin:44px 0 10px; color:var(--text-dim); font-size:14px; max-width:76ch; }
.tool-copy h2 { color:var(--text); }
.tool-copy ul { padding-left:20px; }
.tool-copy li { margin:5px 0; }
.tool-copy code {
  font-family:var(--mono); font-size:12.5px; background:var(--surface-2); border:1px solid var(--border);
  border-radius:5px; padding:1px 5px; color:var(--text);
}

/* hub */
.t-hero { padding:30px 0 6px; }
.t-hero h1 { font-size:30px; font-weight:800; letter-spacing:-0.02em; margin:0 0 8px; }
.t-hero .lede { font-size:17px; color:var(--text-dim); max-width:70ch; margin:0; }
.t-hero .lede a { color:var(--accent); }
.t-search { max-width:620px; margin:24px 0 8px; }
.t-search label { display:block; margin-bottom:7px; color:var(--text-dim); font-size:13px; font-weight:650; }
.t-search input { box-sizing:border-box; width:100%; border:1px solid var(--border); border-radius:12px; padding:12px 14px; background:var(--bg-alt); color:var(--text); font:14px var(--sans); }
.t-search input:focus { outline:none; border-color:var(--accent); }
.t-search-status { min-height:1em; margin:6px 2px 0; color:var(--text-faint); font-size:12px; }
.t-card[hidden], .t-grid[hidden], .t-cat[hidden] { display:none; }
.t-cat { margin:36px 0 12px; font-size:12px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.08em; font-family:var(--mono); }
.t-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:14px; }
.t-card {
  position:relative; display:block; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px 54px 16px 18px;
  transition:border-color .15s ease, transform .15s ease, background .15s ease;
}
.t-card:hover { border-color:#7c3aed; transform:translateY(-2px); background:var(--surface-2); }
.t-card b { display:block; font-size:14.5px; margin-bottom:5px; color:var(--text); }
.t-card span { color:var(--text-dim); font-size:12.5px; line-height:1.5; }
/* dark-purple "open" arrow on every tool card */
.t-card::after {
  content:""; position:absolute; top:16px; right:16px; width:26px; height:26px; border-radius:50%;
  background:#6d28d9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 13px no-repeat;
  box-shadow:0 2px 8px rgba(76,29,149,.45);
  transition:transform .15s ease, background-color .15s ease;
}
.t-card:hover::after { background-color:#8b5cf6; transform:translateX(3px); }
.hub-note { font-size:12px; color:var(--text-faint); margin:36px 0 0; }
.hub-note a { color:var(--text-dim); }

/* client-only tools (jwt / sla / fingerprint / har / URL and Base64 converters) */
.pane { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; margin:12px 0; }
.table-scroll { max-width:100%; overflow-x:auto; }
.pane pre { margin:0; font-family:var(--mono); font-size:12.5px; line-height:1.55; white-space:pre-wrap; word-break:break-word; color:var(--text); }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:720px) { .grid2 { grid-template-columns:1fr; } }
.field { margin:10px 0; }
.field label { display:block; font-size:12px; color:var(--text-dim); margin-bottom:5px; }
.field input, .field select, .field textarea {
  width:100%; background:var(--bg-alt); border:1px solid var(--border); color:var(--text);
  border-radius:10px; padding:10px 12px; font-size:14px; font-family:var(--sans);
}
.field textarea:focus, .field input:focus, .field select:focus { outline:none; border-color:var(--accent); }
.kpi { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin:10px 0; }
.kpi div { background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:12px; text-align:center; }
.kpi b { display:block; font-size:18px; color:var(--text); }
.kpi span { font-size:11px; color:var(--text-dim); }
.wf-row { display:grid; grid-template-columns:200px 1fr 54px; gap:8px; align-items:center; font-size:11px; padding:2px 0; }
.wf-lab { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text-dim); font-family:var(--mono); }
.wf-trk { position:relative; height:13px; background:var(--surface-2); border-radius:3px; overflow:hidden; }
.wf-bar { position:absolute; top:0; height:100%; background:var(--accent); min-width:1px; }
.wf-ms { text-align:right; font-family:var(--mono); color:var(--text-dim); }
@media (max-width:700px) { .wf-row { grid-template-columns:110px 1fr 40px; } }
.t-file { cursor:pointer; text-decoration:underline; color:var(--text-dim); }
.t-file input { display:none; }