/* macdetect.com — tool pages (forms, results) built on the app.css design system */

.tool-head{max-width:820px;margin:0 auto;padding:28px 0 10px}
.tool-head h1{margin:0 0 8px;font-size:clamp(24px,4vw,34px);font-weight:800;letter-spacing:-.02em}
.tool-head .sub{font-size:15px;color:var(--text2);line-height:1.6;max-width:60ch}

.tool-form{max-width:820px;margin:0 auto}
.tool-form .form-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px;box-shadow:var(--shadow)}
.field-row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.field{display:flex;flex-direction:column;gap:6px;flex:1;min-width:180px}
.field label{font-size:11.5px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.06em}
.tinput{height:44px;border:1px solid var(--border);border-radius:10px;background:var(--codebg);color:var(--text);font:500 14px var(--mono);padding:0 14px;width:100%}
.tinput:focus{border-color:var(--blueHi);box-shadow:0 0 0 3px var(--ring)}
select.tinput{cursor:pointer}
.tool-form .btn{height:44px;padding:0 22px;font-size:14px}

.result-area{max-width:820px;margin:22px auto 0}
.result-area:empty{display:none}
.spinner{width:22px;height:22px;border:2.5px solid var(--border);border-top-color:var(--blueHi);border-radius:50%;animation:spin .7s linear infinite;margin:24px auto}
@keyframes spin{to{transform:rotate(360deg)}}
.err-box{background:var(--card);border:1px solid var(--border);border-left:3px solid var(--crit,#f45d72);border-radius:12px;padding:16px 18px;color:var(--text2);font-size:13.5px}

.kv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.kv{background:var(--card);padding:13px 16px}
.kv .k{font-size:11px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.07em;margin-bottom:5px}
.kv .v{font:500 14px var(--mono);word-break:break-word}

.rec-table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.rec-table th{font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--text2);text-align:left;padding:10px 14px;background:var(--codebg);border-bottom:1px solid var(--border)}
.rec-table td{padding:10px 14px;border-bottom:1px solid var(--border);font:500 13px var(--mono);vertical-align:top}
.rec-table tr:last-child td{border-bottom:none}
.rec-type{display:inline-block;font:600 10.5px var(--mono);padding:2px 7px;border-radius:6px;background:rgba(37,99,235,.16);color:var(--blueHi)}

.pill{display:inline-flex;align-items:center;gap:6px;font:600 11.5px var(--mono);padding:4px 10px;border-radius:99px}
.pill.ok{background:rgba(55,201,138,.14);color:#37c98a}
.pill.bad{background:rgba(244,93,114,.14);color:#f45d72}
.pill.warn{background:rgba(244,183,63,.15);color:#f4b73f}
.pill .dot{width:6px;height:6px;border-radius:99px;background:currentColor}

.port-list,.bl-list{display:flex;flex-direction:column;gap:8px}
.port-item,.bl-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 15px;background:var(--card);border:1px solid var(--border);border-radius:10px}
.port-item .p{font:600 14px var(--mono)} .port-item .svc{font-size:12px;color:var(--text2)}
.bl-item .z{font:500 12.5px var(--mono);color:var(--text2)}

.summary-line{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.summary-line .big{font:700 22px var(--mono)}

.hop-list{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.hop{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:10px 15px;border-bottom:1px solid var(--border)}
.hop:last-child{border-bottom:none}
.hop .n{font:700 13px var(--mono);color:var(--text2)}
.hop .h{font:500 13px var(--mono);word-break:break-all}
.hop .h .ip{color:var(--text2);font-size:11.5px}
.hop .rtt{font:500 12.5px var(--mono);color:var(--teal)}

.geo-map{margin-top:16px;border:1px solid var(--border);border-radius:12px;overflow:hidden;height:280px;background:var(--codebg)}
.geo-map iframe{width:100%;height:100%;border:0;filter:saturate(.9)}

.tool-prose{max-width:820px;margin:48px auto 0;padding-bottom:64px}
.tool-prose h2{font-size:20px;font-weight:800;letter-spacing:-.02em;margin:28px 0 10px}
.tool-prose p{font-size:14.5px;line-height:1.7;color:var(--text2);margin:0 0 12px}