:root {
  --bg-primary: #000000;
  --bg-secondary: #0a0a0a;
  --bg-tertiary: #111111;
  --border-primary: #1a1a1a;
  --border-secondary: #333333;
  --text-primary: #ffffff;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;
  --accent-primary: #ffffff;
  --accent-secondary: #f4f4f5;
  --success: #22c55e;
  --error: #ef4444;
  --warning: #f59e0b;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Navigation */
.navbar {
  border-bottom: 1px solid var(--border-primary);
  background: var(--bg-primary);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(8px);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 1.125rem;
}

.nav-brand a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-primary);
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: 2rem;
}

.nav-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.2s;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--text-primary);
}

/* Hero Section */
.hero {
  padding: 4rem 0 6rem;
  text-align: center;
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1rem;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 50px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 2rem;
}

.hero-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}

.gradient-text {
  background: linear-gradient(135deg, #ffffff 0%, #a1a1aa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-description {
  font-size: 1.125rem;
  color: var(--text-secondary);
  margin-bottom: 3rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Search Section */
.search-section {
  margin-bottom: 4rem;
}

.search-input-wrapper {
  display: flex;
  align-items: center;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  padding: 0.75rem;
  margin-bottom: 1rem;
  transition: border-color 0.2s;
}

.search-input-wrapper:focus-within {
  border-color: var(--border-secondary);
}

.search-icon {
  color: var(--text-muted);
  margin-right: 0.75rem;
}

.search-input-wrapper input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 1rem;
  outline: none;
}

.search-input-wrapper input::placeholder {
  color: var(--text-muted);
}

.search-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--accent-primary);
  color: var(--bg-primary);
  border: none;
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.search-btn:hover {
  background: var(--accent-secondary);
}

.quick-examples {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.example-btn {
  background: transparent;
  border: 1px solid var(--border-primary);
  color: var(--text-secondary);
  border-radius: 6px;
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
}

.example-btn:hover {
  border-color: var(--border-secondary);
  color: var(--text-primary);
}

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}

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

.stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.stat-label {
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* Features Section */
.features-section {
  padding: 6rem 0;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-primary);
}

.section-header {
  text-align: center;
  margin-bottom: 4rem;
}

.section-header h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.section-header p {
  font-size: 1.125rem;
  color: var(--text-secondary);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
}

.feature-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  padding: 2rem;
  transition: border-color 0.2s;
}

.feature-card:hover {
  border-color: var(--border-secondary);
}

.feature-icon {
  width: 48px;
  height: 48px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  color: var(--text-secondary);
}

.feature-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.feature-card p {
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  color: var(--text-muted);
  padding: 0.25rem 0.75rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 500;
}

/* Footer */
.footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-primary);
  padding: 3rem 0 2rem;
}

.footer-content {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  margin-bottom: 2rem;
}

.footer-brand {
  max-width: 300px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 1.125rem;
  margin-bottom: 1rem;
}

.footer-brand p {
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.6;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.footer-column h4 {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--text-primary);
}

.footer-column a {
  display: block;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  transition: color 0.2s;
}

.footer-column a:hover {
  color: var(--text-primary);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  border-top: 1px solid var(--border-primary);
  font-size: 0.875rem;
  color: var(--text-muted);
}

.footer-stats {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Lookup Page */
.lookup-main {
  min-height: calc(100vh - 64px);
  padding: 2rem 0;
}

.lookup-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-primary);
}

.lookup-title h1 {
  font-size: 2rem;
  font-weight: 700;
  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
  margin-bottom: 0.5rem;
}

.lookup-type {
  display: flex;
  gap: 0.5rem;
}

.type-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.type-badge.domain {
  background: rgba(34, 197, 94, 0.1);
  color: var(--success);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.type-badge.ip {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.lookup-actions {
  display: flex;
  gap: 0.75rem;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.action-btn.primary {
  background: var(--accent-primary);
  color: var(--bg-primary);
  border-color: var(--accent-primary);
}

.action-btn.primary:hover:not(:disabled) {
  background: var(--accent-secondary);
}

.action-btn.secondary {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.action-btn.secondary:hover:not(:disabled) {
  background: var(--bg-tertiary);
  border-color: var(--border-secondary);
}

.action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* IP Layout */
.ip-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
}

.main-panel,
.side-panel {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  overflow: hidden;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid var(--border-primary);
  background: var(--bg-tertiary);
}

.panel-header h2,
.panel-header h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
}

.panel-actions {
  display: flex;
  gap: 0.5rem;
}

.toggle-raw {
  background: transparent;
  border: 1px solid var(--border-primary);
  color: var(--text-secondary);
  border-radius: 6px;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
}

.toggle-raw:hover {
  border-color: var(--border-secondary);
  color: var(--text-primary);
}

.panel-content {
  padding: 1.5rem;
}

/* Tabs */
.tabs-container {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  overflow: hidden;
}

.tabs-header {
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-primary);
}

.tab-buttons {
  display: flex;
}

.tab-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  background: transparent;
  color: var(--text-secondary);
  border: none;
  padding: 1rem 1.5rem;
  cursor: pointer;
  transition: all 0.2s;
  border-right: 1px solid var(--border-primary);
  font-weight: 500;
}

.tab-btn:last-child {
  border-right: none;
}

.tab-btn:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.tab-btn.active {
  background: var(--accent-primary);
  color: var(--bg-primary);
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

/* Loading States */
.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: var(--text-muted);
}

.spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border-primary);
  border-top: 2px solid var(--text-muted);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

.spinner-small {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-primary);
  border-top: 2px solid var(--text-muted);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Data Display */
.data-grid {
  display: grid;
  gap: 1rem;
}

.data-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
}

.data-item.full-width {
  grid-column: 1 / -1;
}

.data-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
}

.data-value {
  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
  font-size: 0.875rem;
  color: var(--text-primary);
  word-break: break-all;
}

.ns-item {
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--border-primary);
}

.ns-item:last-child {
  border-bottom: none;
}

.status-badge {
  display: inline-block;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  color: var(--text-secondary);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  margin-right: 0.5rem;
  margin-bottom: 0.25rem;
}

/* DNS Records */
.dns-grid {
  display: grid;
  gap: 2rem;
}

.dns-section {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  overflow: hidden;
}

.dns-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-primary);
}

.dns-header h3 {
  font-size: 1rem;
  font-weight: 600;
}

.record-count {
  background: var(--bg-secondary);
  color: var(--text-muted);
  padding: 0.25rem 0.5rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 500;
}

.dns-records {
  padding: 1rem;
  display: grid;
  gap: 1rem;
}

.dns-record {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  padding: 1rem;
}

.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-primary);
}

.record-type {
  background: var(--bg-primary);
  color: var(--text-primary);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
}

.record-ttl {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
}

.record-content {
  display: grid;
  gap: 0.5rem;
}

.record-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0;
}

.field-name {
  color: var(--text-muted);
  font-size: 0.875rem;
  text-transform: capitalize;
  min-width: 80px;
}

.field-value {
  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
  font-size: 0.875rem;
  color: var(--text-primary);
  text-align: right;
  word-break: break-all;
}

/* Geo Layout */
.geo-layout {
  display: grid;
  gap: 2rem;
}

.geo-main {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: 2rem;
}

.location-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.location-icon {
  width: 64px;
  height: 64px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}

.location-text h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.location-text p {
  color: var(--text-muted);
  font-size: 0.875rem;
}

.coordinates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
}

.coord-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
}

.coord-label {
  display: block;
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}

.coord-value {
  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
}

.geo-network {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: 1.5rem;
}

.geo-network h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.network-grid {
  display: grid;
  gap: 1rem;
}

.network-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
}

.network-label {
  color: var(--text-muted);
  font-size: 0.875rem;
}

.network-value {
  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
  font-size: 0.875rem;
  color: var(--text-primary);
  font-weight: 500;
}

/* Raw Data */
.raw-data {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1rem;
}

.raw-data pre {
  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
  font-size: 0.75rem;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.4;
}

/* Error States */
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: var(--error);
  text-align: center;
}

/* Tools Page */
.tools-main {
  min-height: calc(100vh - 64px);
  padding: 2rem 0;
}

.page-header {
  text-align: center;
  margin-bottom: 3rem;
}

.page-header h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.page-header p {
  font-size: 1.125rem;
  color: var(--text-secondary);
}

.tools-grid {
  display: grid;
  gap: 2rem;
  max-width: 800px;
  margin: 0 auto;
}

.tool-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  padding: 2rem;
}

.tool-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.tool-icon {
  width: 48px;
  height: 48px;
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}

.tool-card h2 {
  font-size: 1.25rem;
  font-weight: 600;
}

.tool-card p {
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}

/* Bulk Tool */
.bulk-tool textarea {
  width: 100%;
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: 1rem;
  color: var(--text-primary);
  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
  font-size: 0.875rem;
  resize: vertical;
  margin-bottom: 1rem;
}

.bulk-tool textarea::placeholder {
  color: var(--text-muted);
}

.tool-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--accent-primary);
  color: var(--bg-primary);
  border: none;
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 1.5rem;
}

.tool-btn:hover:not(:disabled) {
  background: var(--accent-secondary);
}

.tool-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bulk-results-grid {
  display: grid;
  gap: 1rem;
}

.bulk-result-item {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: 1rem;
}

.bulk-result-item.error {
  border-color: rgba(239, 68, 68, 0.3);
}

.bulk-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.result-status.success {
  color: var(--success);
}

.result-status.error {
  color: var(--error);
}

.bulk-field {
  display: flex;
  justify-content: space-between;
  padding: 0.25rem 0;
  font-size: 0.875rem;
}

.bulk-field span:first-child {
  color: var(--text-muted);
}

.bulk-view-link {
  display: inline-block;
  color: var(--accent-primary);
  text-decoration: none;
  font-size: 0.875rem;
  margin-top: 0.5rem;
  transition: opacity 0.2s;
}

.bulk-view-link:hover {
  opacity: 0.8;
}

/* Validator Tool */
.validator-tool input,
.ip-tool input {
  width: 100%;
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: 0.75rem;
  color: var(--text-primary);
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.validator-tool input::placeholder,
.ip-tool input::placeholder {
  color: var(--text-muted);
}

.validation-success,
.ip-result {
  color: var(--success);
  font-size: 0.875rem;
}

.validation-error,
.ip-result.error {
  color: var(--error);
  font-size: 0.875rem;
}

.ip-field {
  padding: 0.25rem 0;
  font-size: 0.875rem;
}

/* About Page */
.about-main {
  min-height: calc(100vh - 64px);
  padding: 2rem 0;
}

.about-hero {
  text-align: center;
  margin-bottom: 4rem;
}

.about-hero h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.about-subtitle {
  font-size: 1.125rem;
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
}

.about-content {
  max-width: 800px;
  margin: 0 auto;
}

.about-section {
  margin-bottom: 3rem;
}

.about-section h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.about-section p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.about-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin: 3rem 0;
}

.about-feature {
  text-align: center;
  padding: 2rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
}

.about-feature .feature-icon {
  margin: 0 auto 1rem;
}

.about-feature h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.about-feature p {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.data-sources {
  list-style: none;
  padding: 0;
}

.data-sources li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border-primary);
  color: var(--text-secondary);
}

.data-sources li:last-child {
  border-bottom: none;
}

.data-sources strong {
  color: var(--text-primary);
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.tech-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: 1.5rem;
}

.tech-item h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.tech-item p {
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Responsive Design */
@media (max-width: 768px) {
  .container {
    padding: 0 0.75rem;
  }

  .hero {
    padding: 2rem 0 3rem;
  }

  .hero-title {
    font-size: 2.5rem;
  }

  .search-input-wrapper {
    flex-direction: column;
    gap: 0.75rem;
  }

  .search-btn {
    width: 100%;
    justify-content: center;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .footer-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-links {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .lookup-header {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  .ip-layout {
    grid-template-columns: 1fr;
  }

  .tab-buttons {
    flex-direction: column;
  }

  .tab-btn {
    border-right: none;
    border-bottom: 1px solid var(--border-primary);
  }

  .tab-btn:last-child {
    border-bottom: none;
  }

  .coordinates {
    grid-template-columns: 1fr;
  }

  .record-field {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .field-value {
    text-align: left;
  }

  .about-features {
    grid-template-columns: 1fr;
  }

  .tech-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .nav-container {
    padding: 0 0.75rem;
  }

  .nav-links {
    gap: 1rem;
  }

  .hero-content {
    padding: 0 0.75rem;
  }

  .quick-examples {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .panel-header {
    padding: 1rem;
  }

  .panel-content {
    padding: 1rem;
  }

  .lookup-actions {
    flex-direction: column;
    width: 100%;
  }

  .action-btn {
    justify-content: center;
  }
}

/* Map Styles */
.map-container {
  margin-bottom: 2rem;
}

.map {
  height: 300px;
  border-radius: 8px;
  border: 1px solid var(--border-primary);
}

/* Domain Layout */
.domain-layout {
  display: grid;
  gap: 2rem;
}

.domain-header {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  padding: 2rem;
}

.domain-info h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
}

.domain-badges {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.type-badge.a-record {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

/* Compact Layout */
.compact-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  padding: 2rem;
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

.info-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: 1.5rem;
}

.info-card h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--text-primary);
}

.action-buttons {
  display: grid;
  gap: 0.75rem;
}

.action-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  color: var(--text-primary);
  border-radius: 6px;
  padding: 0.75rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
  justify-content: flex-start;
}

.action-button:hover {
  background: var(--bg-tertiary);
  border-color: var(--border-secondary);
}

/* DNS Header Controls */
.dns-header-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-primary);
}

.dns-view-toggle {
  display: flex;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  overflow: hidden;
}

.toggle-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border-right: 1px solid var(--border-primary);
}

.toggle-btn:last-child {
  border-right: none;
}

.toggle-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.toggle-btn.active {
  background: var(--accent-primary);
  color: var(--bg-primary);
}

.dns-view {
  padding: 2rem;
}

/* DNS Compact Grid */
.dns-compact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 1.5rem;
}

.dns-record-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  overflow: hidden;
}

.dns-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-primary);
}

.dns-card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 1rem;
}

.dns-card-count {
  background: var(--bg-secondary);
  color: var(--text-muted);
  padding: 0.25rem 0.5rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 500;
}

.dns-card-content {
  padding: 1rem;
  max-height: 300px;
  overflow-y: auto;
}

.dns-record-item {
  padding: 0.75rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  margin-bottom: 0.75rem;
}

.dns-record-item:last-child {
  margin-bottom: 0;
}

.record-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.record-value {
  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
  font-size: 0.875rem;
  color: var(--text-primary);
  font-weight: 500;
}

.record-ttl {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
}

.record-details {
  display: grid;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Locations Grid */
.locations-grid {
  display: grid;
  gap: 1rem;
}

.location-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: 1rem 1.5rem;
  transition: border-color 0.2s;
}

.location-item:hover {
  border-color: var(--border-secondary);
}

.location-ip {
  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 120px;
}

.location-details {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
}

.location-flag {
  font-size: 1.25rem;
}

.location-text {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.location-coordinates {
  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: right;
  min-width: 120px;
}

/* Responsive Updates */
@media (max-width: 768px) {
  .compact-layout {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1rem;
  }

  .dns-header-controls {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }

  .dns-view-toggle {
    width: 100%;
  }

  .toggle-btn {
    flex: 1;
    justify-content: center;
  }

  .dns-compact-grid {
    grid-template-columns: 1fr;
  }

  .location-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .location-details {
    width: 100%;
    justify-content: space-between;
  }

  .location-coordinates {
    text-align: left;
    min-width: auto;
  }

  .domain-badges {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Geo Details Grid */
.geo-details-grid {
  display: grid;
  gap: 1.5rem;
}

.geo-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: 1.5rem;
}

.geo-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.geo-card h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--text-primary);
}

.coordinates-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.network-details {
  display: grid;
  gap: 0.75rem;
}

/* Map Popup Styles */
.leaflet-popup-content {
  margin: 8px 12px;
  line-height: 1.4;
}

.map-popup h4 {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
}

.map-popup p {
  margin: 4px 0;
  font-size: 12px;
  color: #666;
}

/* Record Type Badge */
.record-type-badge {
  background: var(--bg-primary);
  color: var(--text-primary);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
}

/* Enhanced responsive design */
@media (max-width: 480px) {
  .coordinates-grid {
    grid-template-columns: 1fr;
  }

  .geo-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .map {
    height: 250px;
  }
}