/* Public security tools */
.tool-hero { padding:44px 0 26px; }
.tool-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.tool-tile { display:flex; flex-direction:column; gap:10px; padding:24px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:var(--shadow); color:inherit; transition:transform .15s, border-color .15s; }
.tool-tile:hover { transform:translateY(-3px); border-color:rgba(26,111,216,.45); }
.tool-tile i { font-style:normal; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg,var(--navy),var(--blue)); color:#fff; font-size:20px; }
.tool-tile h3 { margin:0; font-size:18px; } .tool-tile p { margin:0; color:var(--steel); font-size:14px; flex:1; } .tool-tile small { color:var(--muted); font-size:12px; }
.tool-form { display:flex; gap:10px; margin:0 0 18px; } .tool-form input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=number]) { flex:1; padding:14px 16px; border:1px solid var(--line-2); border-radius:12px; font:inherit; font-size:16px; }
.tool-form textarea { width:100%; padding:14px; border:1px solid var(--line-2); border-radius:12px; font:13px ui-monospace,monospace; min-height:220px; }
.tool-privacy { display:flex; gap:8px; align-items:flex-start; font-size:13px; color:var(--steel); background:#e9fbf1; border:1px solid #c8efd9; border-radius:10px; padding:10px 14px; margin-bottom:18px; }
.tool-privacy b { color:#087443; }
.tv { padding:20px 22px; border-radius:16px; border:1px solid var(--line); background:#fff; margin-bottom:16px; }
.tv-badge { display:inline-block; font-weight:800; font-size:13px; letter-spacing:.06em; text-transform:uppercase; padding:6px 12px; border-radius:999px; margin-bottom:8px; }
.tv p { margin:0; color:var(--steel); } .tv-tip { margin-top:10px !important; font-size:13.5px; padding-top:10px; border-top:1px dashed var(--line); }
.tv-danger { border-color:#f3b9b9; background:#fff5f5; } .tv-danger .tv-badge { background:#b42318; color:#fff; }
.tv-warn { border-color:#f4d9a3; background:#fffaf0; } .tv-warn .tv-badge { background:#b54708; color:#fff; }
.tv-ok { border-color:#c8efd9; background:#f4fbf7; } .tv-ok .tv-badge { background:#087443; color:#fff; }
.tv-muted .tv-badge { background:var(--bg-3); color:var(--steel); }
.tf { display:grid; grid-template-columns:14px 1fr; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:#fff; margin-bottom:8px; font-size:14px; color:var(--steel); } .tf strong { color:var(--ink); display:block; margin-bottom:2px; }
.tf-dot { width:12px; height:12px; border-radius:50%; margin-top:4px; background:var(--muted); } .tf-danger .tf-dot { background:#b42318; } .tf-warn .tf-dot { background:#e39400; } .tf-info .tf-dot { background:var(--blue); } .tf-ok .tf-dot { background:#16a34a; }
.tool-table { width:100%; border-collapse:collapse; font-size:14px; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; margin:0 0 14px; } .tool-table th { text-align:left; width:220px; padding:10px 14px; background:var(--bg-2); color:var(--ink); font-weight:700; vertical-align:top; border-bottom:1px solid var(--line); } .tool-table td { padding:10px 14px; border-bottom:1px solid var(--line); color:var(--steel); overflow-wrap:anywhere; } .tool-table tr:last-child th,.tool-table tr:last-child td { border-bottom:0; }
.src-badge { display:inline-block; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:3px 9px; border-radius:999px; margin-right:6px; } .src-ok { background:#e9fbf1; color:#087443; } .src-danger { background:#b42318; color:#fff; } .src-muted { background:var(--bg-3); color:var(--muted); } .src-fail,.src-softfail { background:#fdecec; color:#b42318; }
.hash { font-family:ui-monospace,monospace; font-size:12px; background:var(--bg-2); padding:2px 6px; border-radius:6px; }
.muted { color:var(--muted); font-size:13px; }
.url-parts { display:flex; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--steel); margin:0 0 14px; } .url-parts b { color:var(--ink); }
.drop-zone { display:block; border:2px dashed var(--line-2); border-radius:18px; padding:40px 20px; text-align:center; background:#fff; cursor:pointer; transition:border-color .15s, background .15s; } .drop-zone.over,.drop-zone:hover { border-color:var(--blue); background:#f4f8ff; } .drop-zone input { display:none; } .drop-zone strong { display:block; font-size:17px; color:var(--ink); margin-bottom:4px; } .drop-zone .muted { display:block; }
.pw-meter { height:10px; border-radius:99px; background:var(--bg-3); overflow:hidden; margin:12px 0 6px; } .pw-meter::after { content:""; display:block; height:100%; width:var(--w,0%); border-radius:99px; transition:width .25s; background:#b42318; } .pw-meter[data-score="2"]::after { background:#e39400; } .pw-meter[data-score="3"]::after { background:#16a34a; } .pw-meter[data-score="4"]::after { background:#087443; }
.tool-sources { font-size:13px; color:var(--muted); border-top:1px solid var(--line); padding-top:14px; margin-top:24px; } .tool-sources a { color:var(--steel); }
.tool-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:28px; align-items:start; }
@media (max-width:980px) { .tool-grid { grid-template-columns:1fr 1fr; } .tool-layout { grid-template-columns:1fr; } }
@media (max-width:640px) { .tool-grid { grid-template-columns:1fr; } .tool-form { flex-direction:column; } .tool-table th { width:120px; } }


.tool-note { font-size:13px; color:var(--muted); border-top:1px solid var(--line); padding-top:14px; margin-top:24px; } .tool-note a { color:var(--steel); }
.dc-buttons { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.dc-result { background:var(--navy); color:#dbe5f6; padding:14px; border-radius:12px; overflow:auto; white-space:pre-wrap; word-break:break-all; font-size:13px; max-height:360px; margin:0 0 12px; }
.ioc-list { display:grid; gap:6px; } .ioc { display:flex; gap:10px; align-items:center; font-size:13.5px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:#fff; } .ioc code { font-size:12.5px; overflow-wrap:anywhere; } .ioc .res-type { margin:0; }
.pw-gen { border-top:1px solid var(--line); margin-top:24px; } .pw-gen-row { display:flex; flex-wrap:wrap; gap:14px; align-items:center; font-size:13.5px; color:var(--steel); } .pw-gen-row select, .pw-gen-row input[type=number] { margin-left:4px; padding:5px 8px; border:1px solid var(--line-2); border-radius:8px; font:inherit; }
.pw-gen-out { display:flex; gap:10px; align-items:center; margin:12px 0 6px; } .pw-gen-out code { flex:1; font-size:18px; padding:12px 14px; background:var(--bg-2); border-radius:10px; overflow-wrap:anywhere; min-height:46px; }
.me-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; } .me-card { padding:16px 18px; border:1px solid var(--line); border-radius:14px; background:#fff; } .me-card h3 { margin:0 0 8px; font-size:14px; color:var(--muted); font-weight:700; letter-spacing:.04em; text-transform:uppercase; } .me-card .big { font-size:22px; font-weight:800; color:var(--ink); overflow-wrap:anywhere; } .me-card dl { margin:8px 0 0; display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:13.5px; } .me-card dt { color:var(--muted); } .me-card dd { margin:0; color:var(--ink); overflow-wrap:anywhere; }
.dm-section { margin:0 0 18px; } .dm-section h3 { font-size:15px; margin:0 0 8px; display:flex; align-items:center; gap:10px; }
.breach { display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; padding:14px; border:1px solid var(--line); border-radius:12px; background:#fff; margin-bottom:8px; } .breach-date { font-family:ui-monospace,monospace; font-size:12.5px; color:var(--muted); white-space:nowrap; padding-top:3px; } .breach h4 { margin:0 0 4px; font-size:15px; } .breach p { margin:0 0 6px; font-size:13.5px; color:var(--steel); } .breach .data { display:flex; flex-wrap:wrap; gap:5px; } .breach .data span { font-size:11.5px; padding:2px 8px; border-radius:999px; background:var(--bg-2); color:var(--steel); } .breach .data span.hot { background:#fdecec; color:#b42318; }
@media (max-width:900px) { .cat { grid-template-columns:1fr; gap:10px; } .about-tools { grid-template-columns:1fr; } .me-grid { grid-template-columns:1fr; } .cat-list li { grid-template-columns:1fr; } .cat-since { display:none; } }

.tool-finder { margin:16px 0 0; max-width:560px; }
.tool-about { border-top:1px solid var(--line); margin-top:28px; padding-top:20px; } .tool-about h2 { font-size:19px; margin:0 0 12px; } .tool-about h2 + .tool-faq, .tool-about .tool-faq { margin-bottom:4px; }
.tool-steps { margin:0 0 24px; padding:0; list-style:none; counter-reset:step; display:grid; gap:10px; } .tool-steps li { counter-increment:step; display:grid; grid-template-columns:30px 1fr; gap:12px; } .tool-steps li::before { content:counter(step); width:26px; height:26px; border-radius:8px; background:var(--navy); color:#fff; font-weight:800; font-size:12.5px; display:grid; place-items:center; margin-top:2px; } .tool-steps strong { display:block; color:var(--ink); font-size:15px; grid-column:2; } .tool-steps p { margin:2px 0 0; color:var(--steel); font-size:14px; grid-column:2; }

/* ===== Tools hub v2 ===== */
.thero { background:radial-gradient(900px 420px at 85% -10%,rgba(26,111,216,.28),transparent 60%),radial-gradient(600px 300px at 0% 100%,rgba(34,197,94,.14),transparent 60%),linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 100%); color:#dbe5f6; padding:28px 0 44px; }
.crumbs-light a, .crumbs-light span, .crumbs-light .sep { color:#9fb0cb; } .crumbs-light a:hover { color:#fff; }
.thero-grid { display:grid; grid-template-columns:minmax(0,1.3fr) 340px; gap:40px; align-items:center; margin-top:18px; }
.thero-kicker { display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#7ac3ff; margin-bottom:12px; }
.thero h1 { color:#fff; font-size:clamp(32px,4.6vw,52px); line-height:1.06; letter-spacing:-.03em; margin:0 0 14px; } .thero p { font-size:17px; color:#b6c7e0; max-width:58ch; margin:0 0 22px; }
.thero-search { position:relative; max-width:640px; } .thero-search svg { position:absolute; left:16px; top:50%; width:20px; height:20px; transform:translateY(-50%); color:var(--muted); }
.thero-search input { width:100%; padding:16px 18px 16px 48px; border-radius:14px; border:1px solid rgba(255,255,255,.18); background:#fff; color:var(--ink); font:inherit; font-size:16px; box-shadow:0 10px 40px rgba(0,0,0,.25); } .thero-search input:focus { outline:3px solid rgba(122,195,255,.6); outline-offset:1px; }
.thero-quick { margin-top:12px; font-size:13.5px; color:#9fb0cb; } .thero-quick a { display:inline-block; margin:0 4px 4px 0; padding:4px 11px; border-radius:999px; border:1px solid rgba(255,255,255,.18); color:#fff; } .thero-quick a:hover { background:rgba(255,255,255,.12); }
.thero-facts { list-style:none; margin:0; padding:0; display:grid; gap:10px; } .thero-facts li { padding:14px 16px; border-radius:14px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); font-size:13.5px; color:#b6c7e0; } .thero-facts strong { display:block; color:#fff; margin-bottom:2px; font-size:14px; }
.tools-catalogue { padding:12px 0 40px; }
.tgroup { padding:34px 0 10px; } .tgroup-head { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:16px; } .tgroup-head h2 { margin:0; font-size:22px; letter-spacing:-.01em; } .tgroup-head p { margin:0; color:var(--muted); font-size:14px; }
.tgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.tcard { position:relative; display:flex; flex-direction:column; gap:4px; padding:22px 22px 18px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:var(--shadow); color:inherit; transition:transform .16s, box-shadow .16s, border-color .16s; min-height:196px; }
.tcard:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:rgba(26,111,216,.4); }
.tcard-icon { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg,#eaf4ff,#f1fbf5); color:var(--blue); margin-bottom:10px; } .tcard-icon svg { width:22px; height:22px; }
#accounts .tcard-icon { background:linear-gradient(135deg,#f1e9ff,#eaf4ff); color:#5b21b6; } #teams .tcard-icon { background:linear-gradient(135deg,#e9fbf1,#eaf4ff); color:var(--green-2); }
.tcard-q { font-size:17px; font-weight:800; color:var(--ink); line-height:1.25; letter-spacing:-.01em; } .tcard-n { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } .tcard-d { font-size:14px; color:var(--steel); margin-top:4px; flex:1; }
.tcard-go { margin-top:12px; display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:700; color:var(--blue); } .tcard:hover .tcard-go { gap:10px; }
.tcard-tag { position:absolute; top:14px; right:14px; font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:999px; background:#e9fbf1; color:#087443; }
.tabout { border-top:1px solid var(--line); margin-top:30px; padding-top:36px; } .tabout-grid { display:grid; grid-template-columns:1fr 1fr; gap:36px; } .tabout h2 { font-size:19px; margin:0 0 10px; } .tabout p, .tabout li { color:var(--steel); font-size:15px; line-height:1.65; } .tabout ul { margin:0; padding-left:20px; } .tabout li { margin-bottom:8px; }
.changelog { border-top:1px solid var(--line); padding-top:22px; margin-top:26px; } .changelog h2 { font-size:15px; margin:0 0 10px; } .changelog dl { display:grid; grid-template-columns:110px 1fr; gap:6px 16px; margin:0 0 10px; font-size:14px; } .changelog dt { color:var(--muted); font-family:ui-monospace,monospace; font-size:12.5px; } .changelog dd { margin:0; color:var(--steel); } .changelog p { font-size:13.5px; color:var(--muted); margin:0; }
/* tool pages: header */
.tool-hero { padding:36px 0 26px; } .tool-hero .crumbs { margin-bottom:10px; } .tool-hero h1 { font-size:clamp(28px,3.8vw,42px); letter-spacing:-.025em; margin:0 0 10px; }
@media (max-width:980px) { .thero-grid { grid-template-columns:1fr; } .thero-side { display:none; } .tgrid { grid-template-columns:1fr 1fr; } .tabout-grid { grid-template-columns:1fr; } }
@media (max-width:600px) { .tgrid { grid-template-columns:1fr; } .thero { padding-bottom:32px; } .tcard { min-height:0; } }