/* ============================================
   DNS History - Component Styles
   ============================================ */

/* ── Hero Search ── */
.hero {
  padding: var(--sp-20) 0 var(--sp-16);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -200px; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 400px;
  background: radial-gradient(ellipse, var(--c-pulse-dim) 0%, transparent 70%);
  pointer-events: none;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--c-pulse-dim);
  border: 1px solid rgba(0,229,160,0.2);
  color: var(--c-pulse);
  font-size: var(--text-xs);
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--sp-6);
}

.hero-eyebrow .dot {
  width: 6px; height: 6px;
  background: var(--c-pulse);
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.7); }
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  margin-bottom: var(--sp-4);
  letter-spacing: -0.04em;
}

.hero h1 em {
  font-style: normal;
  color: var(--c-pulse);
}

.hero-sub {
  color: var(--c-text-2);
  font-size: var(--text-lg);
  margin-bottom: var(--sp-10);
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Search Box ── */
.search-box {
  max-width: 640px;
  margin: 0 auto var(--sp-6);
  position: relative;
}

.search-form {
  display: flex;
  align-items: center;
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-xl);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-5);
  gap: var(--sp-3);
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

.search-form:focus-within {
  border-color: var(--c-pulse);
  box-shadow: 0 0 0 3px var(--c-pulse-dim), var(--shadow-md);
}

.search-icon {
  color: var(--c-text-3);
  flex-shrink: 0;
  width: 18px; height: 18px;
}

.search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--c-text);
  font-size: var(--text-base);
  font-family: var(--font-body);
}

.search-input::placeholder { color: var(--c-text-3); }

.search-btn {
  background: var(--c-pulse);
  color: #0D0F14;
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--sp-3) var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast), transform var(--dur-fast);
  white-space: nowrap;
}

.search-btn:hover { background: #33FFBA; transform: translateY(-1px); }
.search-btn:active { transform: translateY(0); }

/* ── Search Chips ── */
.search-chips {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: var(--sp-8);
}

.chip {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  color: var(--c-text-2);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: border-color var(--dur-fast), color var(--dur-fast),
              background var(--dur-fast);
  white-space: nowrap;
}

.chip:hover {
  border-color: var(--c-pulse);
  color: var(--c-pulse);
  background: var(--c-pulse-dim);
}

/* ── Stats Bar ── */
.stats-bar {
  display: flex;
  gap: var(--sp-8);
  justify-content: center;
  flex-wrap: wrap;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--c-pulse);
  display: block;
  letter-spacing: -0.03em;
}

.stat-label {
  font-size: var(--text-xs);
  color: var(--c-text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Record Type Filter ── */
.record-filter {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}

.rtype-btn {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  color: var(--c-text-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--dur-fast);
}

.rtype-btn:hover,
.rtype-btn.active {
  background: var(--c-accent-dim);
  border-color: var(--c-accent);
  color: var(--c-accent);
}

.rtype-btn[data-type="A"].active    { background: rgba(0,229,160,.12); border-color: var(--c-pulse); color: var(--c-pulse); }
.rtype-btn[data-type="MX"].active   { background: rgba(245,158,11,.12); border-color: var(--c-warn); color: var(--c-warn); }
.rtype-btn[data-type="NS"].active   { background: rgba(167,139,250,.12); border-color: #A78BFA; color: #A78BFA; }
.rtype-btn[data-type="TXT"].active  { background: rgba(251,191,36,.12); border-color: #FBBF24; color: #FBBF24; }
.rtype-btn[data-type="SOA"].active  { background: rgba(249,115,22,.12); border-color: #F97316; color: #F97316; }
.rtype-btn[data-type="CNAME"].active { background: rgba(236,72,153,.12); border-color: #EC4899; color: #EC4899; }
.rtype-btn[data-type="AAAA"].active { background: rgba(59,130,246,.12); border-color: #3B82F6; color: #3B82F6; }

/* ── DNS Records Timeline ── */
.results-section {
  margin-top: var(--sp-8);
}

.results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-6);
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.results-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
}

.results-title span {
  color: var(--c-pulse);
  font-family: var(--font-mono);
}

.results-meta {
  font-size: var(--text-sm);
  color: var(--c-text-3);
}

/* Domain Info Card */
.domain-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.domain-info h3 {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  color: var(--c-text);
  margin-bottom: var(--sp-1);
}

.domain-meta {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.domain-meta-item {
  font-size: var(--text-sm);
  color: var(--c-text-3);
}

.domain-meta-item strong {
  color: var(--c-text-2);
}

.domain-actions {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.action-link {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  color: var(--c-text-2);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-sm);
  transition: all var(--dur-fast);
}

.action-link:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
  background: var(--c-accent-dim);
}

/* ── Timeline ── */
.timeline {
  position: relative;
}

/* Signature: The pulse line */
.timeline::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent 0%,
    var(--c-border) 5%,
    var(--c-border) 95%,
    transparent 100%
  );
}

.timeline-group {
  margin-bottom: var(--sp-6);
}

.timeline-group-label {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  padding-left: 48px;
}

.rtype-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 2px var(--sp-2);
  border-radius: 3px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.rtype-badge.A     { background: var(--c-pulse-dim); color: var(--c-pulse); }
.rtype-badge.MX    { background: rgba(245,158,11,.12); color: #F59E0B; }
.rtype-badge.NS    { background: rgba(167,139,250,.12); color: #A78BFA; }
.rtype-badge.TXT   { background: rgba(251,191,36,.12); color: #FBBF24; }
.rtype-badge.SOA   { background: rgba(249,115,22,.12); color: #F97316; }
.rtype-badge.CNAME { background: rgba(236,72,153,.12); color: #EC4899; }
.rtype-badge.AAAA  { background: rgba(59,130,246,.12); color: #3B82F6; }
.rtype-badge.PTR   { background: rgba(20,184,166,.12); color: #14B8A6; }

.timeline-item {
  position: relative;
  padding-left: 48px;
  margin-bottom: var(--sp-3);
}

.timeline-dot {
  position: absolute;
  left: 14px; top: 16px;
  width: 12px; height: 12px;
  background: var(--c-surface);
  border: 2px solid var(--c-border-2);
  border-radius: 50%;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.timeline-item:hover .timeline-dot {
  border-color: var(--c-pulse);
  box-shadow: 0 0 8px var(--c-pulse-glow);
}

.timeline-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-5);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.timeline-card:hover {
  border-color: var(--c-border-2);
  box-shadow: var(--shadow-sm);
}

.timeline-dates {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.date-range {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--c-text-3);
}

.date-range strong {
  color: var(--c-text-2);
}

.date-duration {
  font-size: var(--text-xs);
  color: var(--c-text-3);
  background: var(--c-surface-2);
  padding: 1px var(--sp-2);
  border-radius: var(--radius-sm);
}

.record-value {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--c-text);
  word-break: break-all;
}

.record-detail {
  margin-top: var(--sp-2);
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.record-detail-item {
  font-size: var(--text-xs);
  color: var(--c-text-3);
}

.record-detail-item span {
  color: var(--c-text-2);
}

/* ── Pagination ── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-10);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-border);
}

.page-btn {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  color: var(--c-text-2);
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--dur-fast);
  min-width: 36px;
  text-align: center;
}

.page-btn:hover {
  border-color: var(--c-pulse);
  color: var(--c-pulse);
  background: var(--c-pulse-dim);
}

.page-btn.active {
  background: var(--c-pulse);
  border-color: var(--c-pulse);
  color: #0D0F14;
  font-weight: 600;
}

.page-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ── Subdomains Table ── */
.subdomains-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.subdomains-table th {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text-3);
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-border);
}

.subdomains-table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-border);
  vertical-align: middle;
}

.subdomains-table tr:hover td {
  background: var(--c-surface-2);
}

.subdomain-name {
  font-family: var(--font-mono);
  color: var(--c-accent);
  font-size: var(--text-sm);
}

/* ── Cards for Quick Links ── */
.quick-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-10);
}

.quick-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  text-decoration: none;
  transition: border-color var(--dur-base), box-shadow var(--dur-base),
              transform var(--dur-base) var(--ease-out);
}

.quick-card:hover {
  border-color: var(--c-pulse);
  box-shadow: var(--shadow-pulse);
  transform: translateY(-2px);
  color: inherit;
}

.quick-card-icon {
  font-size: 1.5rem;
  margin-bottom: var(--sp-3);
}

.quick-card h3 {
  font-size: var(--text-base);
  margin-bottom: var(--sp-2);
}

.quick-card p {
  font-size: var(--text-sm);
  color: var(--c-text-3);
  line-height: 1.5;
}

/* ── Empty / Error States ── */
.empty-state {
  text-align: center;
  padding: var(--sp-16) var(--sp-8);
}

.empty-state-icon {
  font-size: 3rem;
  margin-bottom: var(--sp-4);
  opacity: 0.4;
}

.empty-state h3 {
  color: var(--c-text-2);
  margin-bottom: var(--sp-3);
}

.empty-state p {
  color: var(--c-text-3);
  max-width: 360px;
  margin: 0 auto var(--sp-6);
}

/* ── Loading Skeleton ── */
.skeleton {
  background: linear-gradient(90deg,
    var(--c-surface) 25%,
    var(--c-surface-2) 50%,
    var(--c-surface) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-line {
  height: 14px;
  margin-bottom: var(--sp-2);
}

.skeleton-card {
  height: 80px;
  margin-bottom: var(--sp-3);
  border-radius: var(--radius-md);
}

/* ── Toast ── */
.toast-container {
  position: fixed;
  bottom: var(--sp-6);
  right: var(--sp-6);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.toast {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-2);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--text-sm);
  color: var(--c-text);
  box-shadow: var(--shadow-lg);
  animation: toast-in 0.25s var(--ease-out);
  max-width: 320px;
}

.toast.success { border-left: 3px solid var(--c-pulse); }
.toast.error   { border-left: 3px solid var(--c-error); }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .hero { padding: var(--sp-12) 0 var(--sp-10); }
  .stats-bar { gap: var(--sp-6); }
  .domain-card { flex-direction: column; }
  .results-header { flex-direction: column; align-items: flex-start; }
  .timeline::before { left: 12px; }
  .timeline-item { padding-left: 36px; }
  .timeline-dot { left: 6px; }
  .quick-links { grid-template-columns: 1fr; }
}