/* Shared styles for tool pages */
.tool-page { padding-top: 100px; padding-bottom: 80px; max-width: 720px; margin: 0 auto; }
.tool-page h1 { font-size: 28px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.tool-page .tool-desc { font-size: 14px; color: var(--text-secondary); margin-bottom: 24px; }

.tool-input-row { display: flex; gap: 12px; margin-bottom: 16px; }
.tool-input-row input, .tool-input-row select {
  padding: 10px 14px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px;
  font-size: 14px; outline: none; font-family: var(--font-body); color: var(--text-primary);
}
.tool-input-row input:focus, .tool-input-row select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim);
}
.tool-input-row input { flex: 1; }
.tool-input-row select { color: var(--text-primary); }
.tool-input-row select option { background: var(--bg-secondary); color: var(--text-primary); }
.tool-input-row .mono { font-family: var(--font-mono); }

.tool-btn {
  padding: 10px 20px; background: var(--accent); color: #fff; border: none;
  border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer;
  font-family: var(--font-body);
}
.tool-btn:hover { background: var(--accent-bright); }
.tool-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.tool-error { color: #ff6b6b; font-size: 14px; margin-bottom: 16px; }

.tool-result { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.tool-result table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tool-result th { background: var(--bg-secondary); text-align: left; padding: 8px 16px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary); font-weight: 600; }
.tool-result td { padding: 8px 16px; border-top: 1px solid var(--border); color: var(--text-secondary); }
.tool-result tr:hover { background: var(--bg-secondary); }
.tool-result .mono { font-family: var(--font-mono); font-size: 13px; }

.resolver-card { border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 12px; background: var(--bg-secondary); }
.resolver-card .resolver-name { font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary); margin-bottom: 8px; }
.resolver-card .record { font-family: var(--font-mono); font-size: 13px; color: var(--text-primary); margin-bottom: 4px; }
.resolver-card .ttl { font-size: 12px; color: var(--text-tertiary); }
.resolver-card .no-records { font-size: 13px; color: var(--text-tertiary); }

.whois-output { padding: 16px; background: #1e1e2e; color: #a6e3a1; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; font-family: var(--font-mono); font-size: 12px; white-space: pre-wrap; max-height: 500px; overflow-y: auto; line-height: 1.5; }

.ip-display { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; background: var(--bg-secondary); }
.ip-display .ip { font-size: 28px; font-family: var(--font-mono); font-weight: 600; color: var(--text-primary); }
.ip-meta { border-top: 1px solid var(--border); }
.ip-meta-row { display: flex; padding: 12px 24px; border-bottom: 1px solid var(--border); }
.ip-meta-row:last-child { border-bottom: none; }
.ip-meta-label { width: 160px; font-size: 14px; color: var(--text-tertiary); }
.ip-meta-value { font-family: var(--font-mono); font-size: 14px; color: var(--text-primary); }

.copy-btn { padding: 8px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; color: var(--text-secondary); }
.copy-btn:hover { color: var(--text-primary); background: var(--bg-secondary); }

.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.status-open { background: #22c55e; }
.status-closed { background: #555; }

.cta-banner { margin-top: 40px; padding: 24px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; text-align: center; }
.cta-banner p { font-size: 14px; color: var(--text-secondary); margin-bottom: 12px; }

.result-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.result-row { display: flex; padding: 10px 20px; border-bottom: 1px solid var(--border); }
.result-row:nth-child(odd) { border-right: 1px solid var(--border); }
.result-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary); width: 120px; flex-shrink: 0; }
.result-value { font-size: 14px; color: var(--text-primary); font-family: var(--font-mono); }
.result-header { grid-column: 1 / -1; padding: 12px 20px; background: var(--bg-secondary); border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.binary-row { grid-column: 1 / -1; padding: 10px 20px; border-bottom: 1px solid var(--border); display: flex; }

@media (max-width: 768px) {
  .result-grid { grid-template-columns: 1fr; }
  .result-row:nth-child(odd) { border-right: none; }
}

/* Status indicator for blacklisted items */
.status-listed { background: #ef4444; }

/* Latency visual bar */
.latency-bar { display: inline-block; height: 8px; background: var(--bg-elevated); border-radius: 4px; width: 100px; vertical-align: middle; margin-left: 8px; overflow: hidden; }
.latency-bar-fill { height: 100%; background: var(--accent); border-radius: 4px; }

/* Subnet splitter visual tree */
.tree-container { margin-top: 16px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; font-family: var(--font-mono); font-size: 13px; }
.tree-node { padding: 4px 0 4px 20px; border-left: 2px solid var(--border); margin-left: 8px; color: var(--text-secondary); }
.tree-root { padding: 4px 0; font-weight: 600; color: var(--text-primary); }

/* Address space visualization bar */
.address-bar { height: 12px; border-radius: 6px; overflow: hidden; display: flex; margin-top: 12px; margin-bottom: 8px; border: 1px solid var(--border); }
.address-bar-network { background: var(--text-tertiary); }
.address-bar-usable { background: var(--accent); flex: 1; }
.address-bar-broadcast { background: var(--text-tertiary); }

/* Security checklist for HTTP headers */
.security-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; }
.security-check { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 6px 0; }
.security-pass { color: #16a34a; }
.security-fail { color: #ef4444; }

/* Status tags/pills */
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; }
.tag-pass { background: rgba(22, 163, 74, 0.1); color: #16a34a; }
.tag-fail { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.tag-warn { background: rgba(234, 179, 8, 0.1); color: #ca8a04; }
.tag-info { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.tag-neutral { background: var(--bg-elevated); color: var(--text-secondary); }

/* Mode selector tabs */
.mode-tabs { display: flex; gap: 0; margin-bottom: 16px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.mode-tab { flex: 1; padding: 8px 16px; font-size: 13px; font-weight: 500; text-align: center; cursor: pointer; background: var(--bg-secondary); border: none; color: var(--text-secondary); font-family: var(--font-body); border-right: 1px solid var(--border); }
.mode-tab:last-child { border-right: none; }
.mode-tab.active { background: var(--accent); color: #fff; }

/* Toggle switch for views */
.view-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); cursor: pointer; margin-bottom: 12px; }
.view-toggle:hover { color: var(--accent); }

/* Expiry date highlighting */
.expiry-danger { color: #ef4444; font-weight: 600; }
.expiry-warning { color: #ca8a04; font-weight: 600; }
.expiry-ok { color: #16a34a; }

/* Common subnets reference table */
.common-subnets { margin-top: 24px; }
.common-subnets summary { font-size: 14px; font-weight: 600; color: var(--text-secondary); cursor: pointer; padding: 8px 0; }
.common-subnets summary:hover { color: var(--accent); }

/* ICMP-style output */
.ping-output { padding: 16px; background: #1e1e2e; color: #a6e3a1; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; font-family: var(--font-mono); font-size: 13px; white-space: pre-wrap; line-height: 1.6; margin-top: 12px; }

/* Category header row in tables */
.category-header { background: var(--bg-secondary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary); }
.category-header td { padding: 8px 16px; border-top: 2px solid var(--border); }

/* Hop timeout display */
.hop-timeout { color: var(--text-tertiary); }

/* Auth result badges for email headers */
.auth-results { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }

/* Custom port input */
.port-input { width: 80px !important; flex: none !important; }

/* Response time badge */
.response-time { display: inline-block; padding: 2px 6px; background: var(--bg-elevated); border-radius: 4px; font-size: 11px; font-family: var(--font-mono); color: var(--text-tertiary); margin-left: 8px; }

/* Textarea for email headers */
.tool-textarea { width: 100%; min-height: 200px; padding: 12px 14px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-family: var(--font-mono); color: var(--text-primary); outline: none; resize: vertical; margin-bottom: 12px; }
.tool-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim); }