@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Newsreader:opsz,wght@6..72,600&family=JetBrains+Mono:wght@500&display=swap');

:root{
  --bg:#f6f8fb;
  --panel:#ffffff;
  --panel-2:#f1f5f9;
  --text:#0c1a2b;
  --muted:#516174;
  --line:#d8e0ea;
  --link:#1679c6;
  --link-visited:#0f5aa0;
  --accent:#0ea5a4;
  --accent-2:#2563eb;
  --ok:#16a34a;
  --warn:#f59e0b;
  --bad:#ef4444;
  --radius:18px;
  --shadow:0 20px 50px rgba(12,26,43,.08);
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans:"Manrope", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --display:"Newsreader", "Times New Roman", serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  position:relative;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(900px 600px at 10% -10%, rgba(14,165,164,.16), transparent 55%),
    radial-gradient(900px 600px at 90% 0%, rgba(37,99,235,.12), transparent 60%),
    linear-gradient(0deg, rgba(12,26,43,.02), rgba(12,26,43,.02)),
    repeating-linear-gradient(90deg, rgba(12,26,43,.03) 0 1px, transparent 1px 120px);
  z-index:-1;
  pointer-events:none;
}

a{
  color:var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
}
a:visited{color:var(--link-visited)}
a:hover{opacity:.9}
a:focus{
  outline:3px solid rgba(14,165,164,.3);
  outline-offset:2px;
  border-radius:10px;
}

.wrap{max-width:1100px;margin:0 auto;padding:24px}

.top{
  position:sticky;top:0;z-index:5;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(216,224,234,.85);
}
.top-inner{display:flex;justify-content:space-between;align-items:center;gap:16px}
.brand{
  font-weight:800;
  color:var(--text);
  text-decoration:none;
  letter-spacing:.2px;
}
.brand:hover{opacity:.95}
.nav{display:flex;gap:10px;flex-wrap:wrap}
.nav a{
  padding:8px 12px;
  border:1px solid rgba(216,224,234,.95);
  border-radius:999px;
  background:rgba(255,255,255,.9);
  text-decoration:none;
  color:var(--text);
}
.nav a:hover{border-color:rgba(14,165,164,.35);background:#f8fbff}

.hero{
  padding:20px;
  border:1px solid rgba(216,224,234,.95);
  border-radius:var(--radius);
  background:var(--panel);
  box-shadow:var(--shadow);
  animation:fadeUp .7s ease both;
}
h1{
  margin:0 0 10px 0;
  font-size:30px;
  font-family:var(--display);
  letter-spacing:.2px;
}
h2{margin:0 0 8px 0}
h3{margin:0 0 8px 0}
.sub{margin:0 0 12px 0;color:var(--muted);line-height:1.55}
.muted{color:var(--muted)}
.small{font-size:13px}

.search{display:flex;gap:10px;margin-top:10px}
.search input{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(216,224,234,.95);
  background: #f8fbff;
  color:var(--text);
}
.search input:focus{outline:2px solid rgba(14,165,164,.35);border-color:rgba(14,165,164,.35)}
.search button{
  padding:12px 16px;
  border-radius:14px;
  border:1px solid rgba(14,165,164,.35);
  background: linear-gradient(135deg, rgba(14,165,164,.95), rgba(37,99,235,.9));
  color:#fff;
  cursor:pointer;
  font-weight:700;
}
.search button:hover{filter:saturate(1.05)}

.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.chip{
  display:inline-block;
  padding:8px 12px;
  border:1px solid rgba(216,224,234,.95);
  border-radius:999px;
  background: rgba(255,255,255,.85);
  color:var(--text);
  text-decoration:none;
}
.chip:hover{border-color:rgba(14,165,164,.35)}

.cards{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
  margin-top:16px;
}
.card{
  grid-column: span 4;
  border:1px solid rgba(216,224,234,.95);
  border-radius:var(--radius);
  background:var(--panel);
  overflow:hidden;
  box-shadow:var(--shadow);
  animation:floatIn .7s ease both;
}
.card:nth-child(1){animation-delay:.08s}
.card:nth-child(2){animation-delay:.14s}
.card:nth-child(3){animation-delay:.2s}
.card-head{padding:14px;border-bottom:1px solid rgba(216,224,234,.9)}
.card-title{font-weight:800}
.card-body{padding:14px;display:flex;flex-direction:column;gap:10px}

.meta{
  margin-top:16px;
  border:1px solid rgba(216,224,234,.95);
  border-radius:var(--radius);
  background:var(--panel);
  padding:14px;
  box-shadow:var(--shadow);
}
.meta-grid{display:grid;grid-template-columns: repeat(3, 1fr);gap:12px}
.meta-val{margin-top:6px;font-size:14px}

.tablewrap{
  margin-top:18px;
  border:1px solid rgba(216,224,234,.95);
  border-radius:var(--radius);
  background:var(--panel);
  overflow:hidden;
  box-shadow:var(--shadow);
  animation:fadeUp .7s ease both;
  animation-delay:.15s;
}
.tablehead{display:flex;justify-content:space-between;align-items:flex-end;padding:14px;border-bottom:1px solid rgba(216,224,234,.95)}
.scroll{overflow:auto}

.dns-table{
  width:100%;
  border-collapse:collapse;
  table-layout: fixed;
}
.dns-table th, .dns-table td{
  padding:10px 12px;
  border-bottom:1px solid rgba(216,224,234,.95);
  text-align:left;
  vertical-align:top;
  font-size: 15px;
}
.dns-table th{
  position:sticky;top:0;z-index:2;
  background: var(--panel-2);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.dns-table th:nth-child(1) { width: 240px; }
.dns-table th:nth-child(2) { width: 125px; }
.dns-table th:nth-child(3) { width: 90px; }
.dns-table th:nth-child(4) { width: auto; }
.dns-table th:nth-child(5) { width: 90px; }
.dns-table th:nth-child(6) { width: 210px; }
.dns-table th:nth-child(7) { width: 200px; }

.dns-table tr:hover td{background: rgba(14,165,164,.05)}

code{
  font-family:var(--mono);
  font-size:14px;
  background:#f3f6fb;
  padding:2px 6px;
  border-radius:8px;
}
.card code { font-size: 15px; font-weight: 700; }
.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nowrap{white-space:nowrap}
.date-cell{font-size:13px}

.copyline{display:flex;gap:10px;align-items:center;justify-content:space-between}
.copy{
  border:1px solid rgba(14,165,164,.45);
  background: rgba(14,165,164,.12);
  color:var(--text);
  padding:6px 10px;
  border-radius:10px;
  cursor:pointer;
  font-size:12px;
  font-weight:700;
}
.copy:hover{background: rgba(14,165,164,.2)}
.copy.copied{
  border-color: rgba(22,163,74,.45);
  background: rgba(22,163,74,.15);
}

.mini{
  margin-left:8px;
  border:1px solid rgba(216,224,234,.95);
  background: rgba(248,251,255,.9);
  color:var(--text);
  padding:6px 10px;
  border-radius:10px;
  cursor:pointer;
  font-size:12px;
}
.mini:hover{border-color:rgba(14,165,164,.35)}

.status{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid rgba(216,224,234,.95);
  background:#fff;
}
.s-ok{border-color: rgba(22,163,74,.35); background: rgba(22,163,74,.08); color: var(--ok)}
.s-nx_hijack{border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.08); color: var(--warn)}
.s-timeout, .s-bad{border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.08); color: var(--bad)}
.s-unk{border-color: rgba(81,97,116,.35); background: rgba(81,97,116,.06); color: var(--muted)}

.pager{display:flex;gap:10px;align-items:center;justify-content:center;padding:14px}
.btn{
  display:inline-block;
  padding:8px 12px;
  border-radius:12px;
  border:1px solid rgba(216,224,234,.95);
  background: rgba(248,251,255,.9);
  text-decoration:none;
  color:var(--text);
}
.btn:hover{border-color:rgba(14,165,164,.35)}
.btn.disabled{opacity:.5}

.note{
  margin-top:18px;
  padding:14px;
  border:1px solid rgba(216,224,234,.95);
  border-radius:var(--radius);
  background: #f8fbff;
}

.alert{
  margin-top:12px;
  padding:12px;
  border:1px solid rgba(245,158,11,.35);
  border-radius:var(--radius);
  background: rgba(245,158,11,.08);
  color:#7a4a00;
}
.alert-bad{
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.08);
  color:#7a1f1f;
}

.footer{
  margin-top:26px;
  border-top:1px solid rgba(216,224,234,.95);
  background: rgba(248,251,255,.85);
}
.footer-inner{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center}

.whois{
  margin-top:14px;
  padding:14px;
  border:1px solid rgba(216,224,234,.95);
  border-radius:var(--radius);
  background: #f8fbff;
  overflow:auto;
  max-height: 70vh;
}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  border:0;
}

.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:12px;
}
.country{
  grid-column: span 3;
  border:1px solid rgba(216,224,234,.95);
  border-radius:16px;
  background: var(--panel);
  padding:12px;
  text-decoration:none;
  color:var(--text);
  box-shadow:var(--shadow);
}
.country:hover{border-color:rgba(14,165,164,.35)}
.country-cc{font-weight:900;font-size:18px;color:var(--text)}
.country-name{margin-top:6px;color:var(--muted)}
.country-cnt{margin-top:8px;color:var(--text);font-weight:700}

@media (max-width: 980px){
  .card{grid-column: span 6}
  .meta-grid{grid-template-columns: 1fr}
  .country{grid-column: span 6}
}
@media (max-width: 640px){
  .card{grid-column: span 12}
  .country{grid-column: span 12}
  .search{flex-direction:column}
  .top-inner{align-items:flex-start}
}

/* Country Dropdown Styles */
.country-alert {
  padding: 14px;
  border-bottom: 1px solid rgba(216,224,234,.95);
  background: rgba(14,165,164,.06);
  color: #0f4b4b;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
}
.alert-text {
  font-size: 14px;
}

.c-dropdown {
  position: relative;
  width: 200px;
}

.c-drop-btn {
  width: 100%;
  padding: 8px 12px;
  background: var(--panel);
  border: 1px solid rgba(216,224,234,.95);
  color: var(--text);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
}
.c-drop-btn:hover {
  border-color: rgba(14,165,164,.35);
}
.c-drop-btn .arrow {
  font-size: 10px;
  opacity: 0.7;
}

.c-drop-menu {
  position: absolute;
  top: 100%;
  right: 0;
  width: 260px;
  background: var(--panel);
  border: 1px solid rgba(216,224,234,.95);
  border-radius: 8px;
  margin-top: 6px;
  box-shadow: 0 12px 32px rgba(12,26,43,.12);
  z-index: 100;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.c-search-wrap {
  padding: 8px;
  border-bottom: 1px solid rgba(216,224,234,.95);
}
.c-search-wrap input {
  width: 100%;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid rgba(216,224,234,.95);
  background: #f8fbff;
  color: var(--text);
  font-family: var(--sans);
  font-size: 13px;
}
.c-search-wrap input:focus {
  outline: 2px solid rgba(14,165,164,.35);
  border-color: rgba(14,165,164,.35);
}

.c-list {
  max-height: 250px;
  overflow-y: auto;
}

.c-item {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  color: var(--text);
  font-size: 13px;
  border-bottom: 1px solid rgba(216,224,234,.6);
}
.c-item:last-child { border-bottom: none; }
.c-item:hover {
  background: rgba(14,165,164,.08);
  color: var(--text);
}
.c-item.hidden {
  display: none;
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes floatIn{
  from{opacity:0;transform:translateY(14px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important}
}