:root {
  --bg: #f4f1f0;
  --panel: #f8f5f4;
  --line: #d8d2cf;
  --line-2: #c6bfbc;
  --text: #221f1f;
  --muted: #5f5959;
  --mono: "IBM Plex Mono", "Courier New", monospace;
  
  
    --bg-color: #eaeaea;
    --result-color: white;
    --text-bg: rgba(255, 255, 255, 1);
    --text-color: #333;
    --text-color: #333;
    --brand-color: #9aa6af;
    --brand-shadow-color: none;
    --scrollbar-color: #a2a0a0;
    --main-text-color: white;
    --main-bg: rgba(0, 0, 0, 0.8);
    --main-shadow-color: rgb(0 0 0 / 10%);
    --tabel-th-color: lightgray;
    --tabel-a-color: #a4dcff;
    --domain-color: #26caff;
    --search-box-color: #7f8eb0;
    --price-box-color: whitesmoke;
    --search-input-color: white;
    --search-input-text-color: black;
    --search-button-text-color: #fff;
    --search-button-color1: rgb(3, 169, 244);
    --search-button-color2: rgb(244, 65, 165);
    --search-button-color3: rgb(255, 235, 59);
    --search-button-color4: rgb(9, 168, 244);
    --home-label-color: black;
    --cost-color: gainsboro;
    --footer-color: #7f8eb0;
    --whois-db-time-color: rgba(255, 255, 255, 0.2);
    --watermark-color: rgba(200, 200, 200, 1);
    --open-history-svg-color: #576a96;
    --twentyyears-before-color1: white;
    --twentyyears-before-color2: #0b4ee617;
    --twentyyears-after-color1: rgb(3, 169, 244);
    --twentyyears-after-color2: rgb(244, 65, 165);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: #f0eceb;
}

body {
  font-family: "Inter", sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 900px at 50% -280px, #fff 0%, #f5f2f1 58%, #f0eceb 100%);
}

.page-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(to right, rgba(90, 84, 84, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(90, 84, 84, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 50% -20%, #000 20%, transparent 78%);
}

.wrap {
  width: min(960px, calc(100% - 48px));
  margin-inline: auto;
}

.topbar {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand-logo {
  width: auto;
  display: inline-flex;
  align-items: center;
}

.brand-logo svg {
  width: auto;
  height: 70px;
  display: block;
}

.nav {
  display: flex;
  align-items: center;
  gap: 27px;
}

.nav a {
  text-decoration: none;
  color: #4d4848;
  font-size: 14px;
  font-weight: 500;
}

.nav a.free {
  color: #201d1d;
  font-weight: 700;
}

.menu-btn {
  display: none;
  border: 0;
  background: transparent;
  color: #3f3a3a;
  font-size: 14px;
}

.announcement {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(248, 244, 243, 0.84));
  color: #585252;
  font-size: 14px;
}

.announcement p {
  margin: 0;
}

.announcement a {
  color: #262222;
  font-weight: 600;
}

.tag {
  border: 1px solid #c8c1bf;
  background: #f7f5f4;
  border-radius: 999px;
  height: 22px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #1f1b1b;
}

.hero {
  text-align: center;
  padding-top: 18px;
}

.hero h1 {
  margin: 12px 0 0;
  font-size: clamp(38px, 7.8vw, 70px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 900;
}

.title-lg {
  font-size: clamp(44px, 7.2vw, 78px);
}

.subtitle {
  width: min(900px, 100%);
  margin: 22px auto 0;
  color: #5f5959;
  font-size: clamp(18px, 2.25vw, 31px);
  line-height: 1.28;
  font-weight: 500;
}

.subtitle-lg {
  font-size: clamp(14px, 0.85vw, 18px);
}

.install-panel {
  width: min(840px, 100%);
  margin: 34px auto 0;
  border: 1px solid var(--line);
  border-radius: 15px;
  overflow: hidden;
  background: #f7f4f3;
  box-shadow: 0 14px 32px rgba(48, 39, 39, 0.1);
}

.search-panel {
  padding: 14px;
}

.whois-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.whois-form input {
  height: 46px;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  background: #fbf9f8;
  padding: 0 14px;
  font: inherit;
  font-size: 15px;
  color: #262222;
}

.whois-form button {
  height: 46px;
  border: 1px solid #292525;
  border-radius: 11px;
  background: #292525;
  color: #f4f0ef;
  font: inherit;
  font-weight: 600;
  padding: 0 16px;
  cursor: pointer;
}

.whois-form button:disabled {
  opacity: 0.7;
  cursor: wait;
}

.quick-list {
  margin-top: 10px;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

.quick-btn {
  border: 1px solid var(--line);
  background: #f4efee;
  color: #4d4747;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 13px;
  padding: 6px 10px;
  flex: 0 0 auto;
  cursor: pointer;
}

.quick-empty {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  color: #8f8787;
  font-family: var(--mono);
  font-size: 12px;
}

.tabs {
  display: flex;
  gap: 3px;
  padding: 5px;
  border-bottom: 1px solid var(--line);
  background: #efebea;
}

.tab {
  border: 0;
  background: transparent;
  color: #666060;
  font-family: var(--mono);
  font-size: 14px;
  border-radius: 8px;
  padding: 10px 13px;
  cursor: pointer;
}

.tab.is-active {
  background: #f7f4f3;
  color: #221e1e;
  box-shadow: inset 0 0 0 1px var(--line);
}

.code-row {
  text-align: left;
  padding: 16px 18px;
}

.code-row code {
  font-family: var(--mono);
  font-size: 16px;
  color: #2a2626;
}

.video-shell {
  width: min(1000px, 100%);
  margin: 26px auto 0;
  border-radius: 14px;
  border: 1px solid #cbc4c1;
  overflow: hidden;
  background: #120f0f;
  box-shadow: 0 20px 42px rgba(20, 15, 15, 0.22);
}

.shell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, #2b2525 0%, #221d1d 100%);
}

.shell-top {
  height: 34px;
  border-bottom: 1px solid #3a3131;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.shell-top span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #696060;
}

.shell-status {
 margin-bottom: 1rem;
}

.shell-top strong,
.shell-status {
  margin-left: 4px;
  color: #bfb6b6;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
}

.shell-content {
  position: relative;
  padding: 24px;
  text-align: left;
  color: #cfc7c7;
  background-image: radial-gradient(900px 420px at 50% 0, rgba(115, 100, 100, 0.15), transparent 70%);
}

.result-meta {
  position: absolute;
  right: 24px;
  bottom: 16px;
  color: #9d9292;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1;
}

.shell-content pre {
  margin: 0;
}

.shell-content code {
  font-family: var(--mono);
  font-size: 14px;
}

.hint {
  margin: 0;
  color: #b7acac;
  font-family: var(--mono);
  font-size: 14px;
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.result-grid article {
  border: 1px solid #3a3131;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  padding: 12px;
}

.result-grid small {
  display: block;
  color: #9f9393;
  font-size: 12px;
}

.result-grid strong {
  display: block;
  margin-top: 7px;
  color: #efe8e8;
  font-size: 14px;
  line-height: 1.4;
  word-break: break-word;
}

.ns-list {
  margin-top: 14px;
}

.ns-list h3 {
  margin: 0;
  color: #b7acac;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
}

.ns-list ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.ns-list li {
  color: #e9e1e1;
  font-family: var(--mono);
  font-size: 13px;
}

.raw-panel {
  margin-top: 14px;
  border: 1px solid #3a3131;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  padding: 10px 12px;
}

.raw-panel summary {
  cursor: pointer;
  color: #b7acac;
  font-family: var(--mono);
  font-size: 13px;
}

.raw-panel pre {
  margin: 10px 0 0;
  max-height: 280px;
  overflow: auto;
  color: #ddd5d5;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;
}

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

.section {
  margin-top: 82px;
}

.section h2,
.section h3 {
  margin: 0;
  font-size: clamp(30px, 5vw, 58px);
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.lead {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: clamp(17px, 2.1vw, 28px);
  line-height: 1.3;
}

.feature-grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.feature-grid article {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8f5f4;
  padding: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.feature-grid span {
  font-weight: 500;
  color: var(--muted);
}

.docs-link,
.zen a {
  display: inline-block;
  margin-top: 16px;
  color: #262222;
  font-weight: 700;
}

.stats {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.stats article {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8f5f4;
  padding: 16px;
}

.stats small {
  display: block;
  color: var(--muted);
  font-family: var(--mono);
  margin-bottom: 12px;
}

.stats strong {
  display: block;
  font-size: clamp(32px, 6vw, 66px);
  line-height: 1;
  letter-spacing: -0.03em;
}

.stats span {
  color: var(--muted);
}

.faq details {
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}

.faq summary {
  cursor: pointer;
  font-weight: 600;
}

.faq p {
  margin: 8px 0 0;
  color: var(--muted);
}

.waitlist form {
  margin-top: 14px;
  display: flex;
  gap: 10px;
}

.waitlist input {
  flex: 1;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 11px 12px;
  font: inherit;
}

.waitlist button {
  border: 1px solid #262222;
  border-radius: 10px;
  background: #262222;
  color: #f5f1f0;
  font: inherit;
  font-weight: 600;
  padding: 11px 16px;
}

.footer {
  margin-top: 84px;
  margin-bottom: 32px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
}

.footer a {
  color: #4c4646;
  text-decoration: none;
  font-size: 14px;
}

.footer p {
  margin: 0;
  color: #625b5b;
  font-size: 14px;
}

@media (max-width: 920px) {
  .wrap {
    width: min(1120px, calc(100% - 24px));
  }

  .menu-btn {
    display: inline-flex;
  }

  .announcement {
    justify-content: flex-start;
    white-space: nowrap;
    overflow: auto;
    padding: 0 12px;
  }

  .shell-content {
    min-height: 260px;
  }

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

  .feature-grid,
  .stats {
    grid-template-columns: 1fr;
  }

  .waitlist form {
    flex-direction: column;
  }
}

/* ===== index_test.php compatibility bridge ===== */
#result {
  position: relative;
}

#main {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 10px;
  overflow: hidden;
  display: none;
  background: rgba(255, 255, 255, 0.01);
}

#main tbody th,
#main tbody td {
  border-bottom: 1px solid #2f2828;
  padding: 12px;
  text-align: left;
}

#main tbody th {
  width: 130px;
  color: #9f9393;
  font-family: var(--mono);
  font-size: 12px;
}

#main tbody td {
  color: #f0e8e8;
  font-weight: 600;
}

#main a {
  color: #e8dede;
}

#price_box {
  display: none;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

#price_box span {
  color: #bfb6b6;
  font-family: var(--mono);
  font-size: 12px;
}

#price_load {
  display: none;
  margin-top: 10px;
  color: #b7acac;
  font-family: var(--mono);
  font-size: 12px;
}

#error_box {
  margin-top: 10px;
  color: #ff9f9f;
  font-family: var(--mono);
  font-size: 12px;
  min-height: 18px;
}

#clear-input-btn {
  position: absolute;
  right: 92px;
  top: 23px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  color: #f1ebeb;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
}

#clear-input-btn:hover {
  background: rgba(255,255,255,0.28);
}

#clear-input-btn svg {
  width: 10px;
  height: 10px;
}

.global-loader-scope {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(10, 9, 9, 0.45);
  z-index: 10;
  border-radius: 0;
}

.gb-loader {
  width: 44px;
  height: 44px;
  border: 3px solid rgba(255,255,255,0.25);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: loader-spin .8s linear infinite;
  margin: 40px auto;
}

@keyframes loader-spin {
  to { transform: rotate(360deg); }
}

#metadata-toggle-box {
  text-align: left;
  margin-top: 12px;
  display: none;
}

#metadata-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #3a3131;
  background: rgba(255,255,255,0.02);
  border-radius: 10px;
  color: #bfb6b6;
  font-family: var(--mono);
  font-size: 12px;
  padding: 8px 10px;
  cursor: pointer;
}

.switch-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8f8282;
}

#metadata-card {
  margin-top: 12px;
  border: 1px solid #3a3131;
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  display: none;
}

.meta-header {
  color: #b7acac;
  font-family: var(--mono);
  font-size: 12px;
  padding: 10px 12px 0;
}

#text {
  margin: 0;
  max-height: 300px;
  overflow: auto;
  padding: 10px 12px 12px;
  color: #ddd5d5;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

#tooltip {
  visibility: hidden;
  position: absolute;
  background: #fff;
  color: #333;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  z-index: 1000;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}

#tooltip.show {
  visibility: visible;
  opacity: 1;
}

/* ===== History drawer (from style.css adapted) ===== */
#history-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 99;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#history {
  position: fixed;
  top: 0;
  right: -350px;
  width: 320px;
  height: 100%;
  background: #f6f3f2;
  z-index: 100;
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
  transition: right 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  flex-direction: column;
  color: #2b2525;
  font-family: Inter, "Microsoft YaHei", sans-serif;
}

#history.show {
  right: 0 !important;
}

.history-header {
  padding: 20px;
  font-size: 18px;
  font-weight: 600;
  border-bottom: 1px solid #e5dfdc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #332e2e;
}

.history-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  color: #474141;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.history-close-btn:hover {
  opacity: 1;
}

.history-close-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  display: block;
}

#history-list-container {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 0;
}

.history-footer {
  padding: 12px 20px;
  font-size: 11px;
  color: #8b8383;
  border-top: 1px solid #ece7e5;
  text-align: center;
  opacity: 0.8;
  letter-spacing: 0.3px;
}

.history-group {
  border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}

.history-group-title {
  padding: 15px 20px;
  font-size: 13px;
  color: #7f7676;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(128, 128, 128, 0.04);
}

.history-group-title:hover {
  background: rgba(128, 128, 128, 0.09);
}

.history-group-title::after {
  content: '▼';
  font-size: 10px;
  transition: transform 0.3s;
  opacity: 0.5;
}

.history-group.collapsed .history-group-title::after {
  transform: rotate(-90deg);
}

.history-items-container {
  max-height: 1000px;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

.history-group.collapsed .history-items-container {
  max-height: 0;
}

.history-item {
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.2s;
  border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}

.history-item:hover {
  background-color: rgba(128, 128, 128, 0.08);
}

.history-item-domain {
  font-size: 15px;
  font-weight: 500;
  color: #272b2d;
  margin-bottom: 2px;
}

.history-item-time {
  font-size: 12px;
  color: #8a8888;
}

.history-item-status {
  font-size: 12px;
  padding: 8px 8px;
  border-radius: 4px;
  background: rgba(128, 128, 128, 0.1);
  color: #403636;
}

#history-list-container::-webkit-scrollbar {
  width: 4px;
}

#history-list-container::-webkit-scrollbar-thumb {
  background: #b5adad;
  border-radius: 2px;
}

#footer-info {
  width: min(960px, calc(100% - 48px));
  margin: 26px auto 20px;
  color: #625b5b;
  font-size: 14px;
}

@media screen and (max-width: 630px) {
  #history {
    width: 85vw;
    right: -95vw;
  }

  #history.show {
    right: 0 !important;
  }

  #clear-input-btn {
    right: 80px;
    top: 21px;
  }

  #footer-info {
    width: calc(100% - 24px);
    font-size: 12px;
    margin: 20px auto 14px;
  }
}

/* ===== index_test final result-card overrides (3.html aligned) ===== */
#error_box {
  display: none;
  margin-top: 10px;
  color: #ffb2b2;
  font-family: var(--mono);
  font-size: 13px;
  min-height: 0;
  text-align: left;
}

#main {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}

#price_box.shell-status {
  margin: 0 0 12px;
  color: #bfb6b6;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;
}

#result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

#result-grid[hidden],
#ns-list[hidden] {
  display: none !important;
}

#result-grid article.result-card {
  border: 1px solid #3a3131;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  padding: 10px 12px;
}

#result-grid .result-card table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

#result-grid .result-card th {
  width: 94px;
  padding: 0;
  text-align: left;
  vertical-align: top;
}

#result-grid .result-card th span {
  display: inline-block;
  border: 1px solid #4a3f3f;
  border-radius: 999px;
  padding: 2px 8px;
  color: #9f9393;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: 0.01em;
}

#result-grid .result-card td {
  padding: 1px 0 0;
  color: #efe8e8;
  font-size: 14px;
  line-height: 1.45;
  word-break: break-word;
}

#result-grid .result-card td a {
  color: #efe8e8;
  text-decoration: none;
}

#ns-list {
  margin-top: 14px;
  border: 1px solid #3a3131;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  padding: 12px;
}

#ns-list h3 {
  margin: 0;
  color: #b7acac;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
}

#ns-list ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

#ns-list li {
  color: #e9e1e1;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.45;
}

#metadata-toggle-box {
  margin-top: 14px;
}

#metadata-toggle {
  justify-content: flex-start;
  border: 1px solid #3a3131;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  color: #bfb6b6;
  font-family: var(--mono);
  font-size: 13px;
  padding: 10px 12px;
}

.switch-dot {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #8f8282;
  border-radius: 0;
}

#metadata-toggle.active .switch-dot {
  border-width: 8px 5px 0 5px;
  border-color: #8f8282 transparent transparent transparent;
}

#metadata-card {
  margin-top: 10px;
  border: 1px solid #3a3131;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}

#text {
  max-height: 360px;
  margin: 0;
  padding: 10px 12px 12px;
  color: #ddd5d5;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
}

#text::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

#text::-webkit-scrollbar-track {
  background: #201b1b;
  border-radius: 10px;
}

#text::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #5a5050 0%, #3f3737 100%);
  border-radius: 10px;
  border: 1px solid #2b2525;
}

#text::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #6e6262 0%, #4b4141 100%);
}

.result-meta,
#result-meta {
  position: absolute;
  right: 24px;
  bottom: 5px;
  color: #9d9292;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1;
}

@media (max-width: 920px) {
  #result-grid {
    grid-template-columns: 1fr;
  }

  #result-grid .result-card th {
    width: 86px;
  }
}

/* ===== macOS light window style for result shell ===== */
#result-shell.video-shell {
  border: 1px solid #d8d2cf;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8f5f4 0%, #f2eeed 100%);
  box-shadow: 0 18px 42px rgba(47, 39, 39, 0.14), 0 2px 10px rgba(47, 39, 39, 0.08);
  overflow: hidden;
}

#result-shell .shell-head {
  background: linear-gradient(180deg, #f7f4f3 0%, #ede8e6 100%);
  border-bottom: 1px solid #d8d2cf;
}

#result-shell .shell-top {
  border-bottom: 0;
  height: 38px;
  gap: 7px;
}

#result-shell .shell-top span:nth-child(1) {
  background: #ff5f57;
  box-shadow: inset 0 0 0 1px #e0453f;
}

#result-shell .shell-top span:nth-child(2) {
  background: #febc2e;
  box-shadow: inset 0 0 0 1px #e0a325;
}

#result-shell .shell-top span:nth-child(3) {
  background: #28c840;
  box-shadow: inset 0 0 0 1px #21ab36;
}

#result-shell .shell-top strong {
  color: #5d5555;
  margin-left: 6px;
}

#result-shell #brand {
  color: #6a6161 !important;
}

#result-shell .shell-content {
  color: #2d2828;
  background:
    radial-gradient(760px 360px at -6% -30%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(760px 360px at 110% -30%, rgba(230, 224, 221, 0.3), transparent 58%),
    linear-gradient(180deg, #faf7f6 0%, #f2eeed 100%);
}

#result-shell #price_box.shell-status,
#result-shell #price_box span {
  color: #6a6161;
}

#result-shell #result-grid article.result-card {
  border: 1px solid #d7d0cd;
  background: linear-gradient(180deg, #fffefe 0%, #f7f4f3 100%);
  box-shadow: 0 6px 14px rgba(51, 43, 43, 0.08);
}

#result-shell #result-grid .result-card th span {
  border: 1px solid #d9d2cf;
  background: #f3efee;
  color: #7a7070;
}

#result-shell #result-grid .result-card td,
#result-shell #result-grid .result-card td a {
  color: #2f2929;
}

#result-shell #ns-list {
  border: 1px solid #d7d0cd;
  background: linear-gradient(180deg, #fffefe 0%, #f7f4f3 100%);
  box-shadow: 0 6px 14px rgba(51, 43, 43, 0.08);
}

#result-shell #ns-list h3 {
  color: #7a7070;
}

#result-shell #ns-list li {
  color: #3e3636;
}

#result-shell #metadata-toggle {
  border: 1px solid #d7d0cd;
  background: #f5f1f0;
  color: #655c5c;
}

#result-shell .switch-dot {
  border-color: transparent transparent transparent #7d7373;
}

#result-shell #metadata-toggle.active .switch-dot {
  border-color: #7d7373 transparent transparent transparent;
}

#result-shell #metadata-card {
  border: 1px solid #d7d0cd;
  background: linear-gradient(180deg, #fffefe 0%, #f7f4f3 100%);
}

#result-shell .meta-header {
  color: #7a7070;
}

#result-shell #text {
  color: #3a3232;
}

#result-shell #text::-webkit-scrollbar-track {
  background: #ebe5e3;
}

#result-shell #text::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #b4a9a6 0%, #9e918d 100%);
  border: 1px solid #d8cfcc;
}

#result-shell #text::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #9f928e 0%, #887a76 100%);
}

#result-shell .result-meta,
#result-shell #result-meta {
  color: #837878;
}


/* 标签样式 */
        .label {
            padding: 0 4px;
            font-size: 11px;
            font-family: "Microsoft JhengHei", "Apple LiGothic Medium,Microsoft YaHei", "Arial", cursive;
            border-radius: 4px;
            margin-right: 5px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            vertical-align: middle;
            height: 20px;
            line-height: 1;
            box-sizing: border-box;
            position: relative;
            top: -1px;
        }

        .TwentyYearsOld {
            position: relative;
            z-index: 0;
            overflow: hidden;
            border-radius: 3px;
            padding: 0 4px;
            text-align: center;
            font-size: 11px;
            font-family: "Microsoft JhengHei", "Apple LiGothic Medium,Microsoft YaHei", "Arial", cursive;
            transition: .2s all linear;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            vertical-align: middle;
            color: #fff;
            height: 20px;
            line-height: 1;
            box-sizing: border-box;
            margin-right: 5px;
            top: -1px;
        }

        .TwentyYearsOld:before {
            content: "";
            position: absolute;
            z-index: -2;
            left: -50%;
            top: -50%;
            width: 200%;
            height: 200%;
            background: conic-gradient(from 90deg, #0000 70%, #0b4ee617 80%, white);
            animation: rotate20 3s linear infinite;
        }

        .TwentyYearsOld::after {
            background: linear-gradient(85.95deg, rgb(3, 169, 244) 10.96%, rgb(244, 65, 165) 89.04%);
            content: '';
            position: absolute;
            z-index: -1;
            left: 2px;
            top: 2px;
            width: calc(100% - 4px);
            height: calc(100% - 4px);
            border-radius: 3px;
        }

        @keyframes rotate20 {
            to { transform: rotate(360deg) }
        }

        .TenYearsOld {
            background-color: #d614d6;
            color: white;
            padding: 0 4px;
            font-size: 11px;
            font-family: "Microsoft JhengHei", "Apple LiGothic Medium,Microsoft YaHei", "Arial", cursive;
            border-radius: 3px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            vertical-align: middle;
            height: 20px;
            line-height: 1;
            box-sizing: border-box;
            margin-right: 5px;
            top: -1px;
            position: relative;
        }

        .FiveYearsOld {
            background-color: #2196F3;
            color: white;
            padding: 0 4px;
            font-size: 11px;
            font-family: "Microsoft JhengHei", "Apple LiGothic Medium,Microsoft YaHei", "Arial", cursive;
            border-radius: 3px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            vertical-align: middle;
            height: 20px;
            line-height: 1;
            box-sizing: border-box;
            margin-right: 5px;
            top: -1px;
            position: relative;
        }

        .AuthLabel {
            background: linear-gradient(135deg, #1098ad, #07b39b);
            color: white;
            padding: 0 4px;
            font-size: 11px;
            font-family: "Microsoft JhengHei", "Apple LiGothic Medium,Microsoft YaHei", "Arial", cursive;
            border-radius: 4px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            vertical-align: middle;
            height: 20px;
            line-height: 1;
            box-sizing: border-box;
            margin-right: 5px;
            top: -1px;
            position: relative;
            box-shadow: 0 2px 5px rgba(16, 152, 173, 0.3);
        }

        /* DNSSEC SVG */
        #dnssec-svg {
            height: 22px;
            width: 22px;
            display: inline !important;
            vertical-align: middle;
        }

        /* 预加载动画 */
        @keyframes gb-loader-animation-expand {
            0% { transform: rotate(0deg); }
            70%, 80%, 90%, 100% { transform: rotate(720deg); }
            80%, 90% { top: calc(50% - .5em); box-shadow: 0 0 0 0 currentColor, 0 0 0 0 currentColor; }
            0%, 20%, 30%, 80%, 100% { top: calc(50% - 2em); box-shadow: -1.35em 2.25em 0 0 currentColor, 1.35em 2.25em 0 0 currentColor; }
            0%, 20%, 30%, 100% { animation-timing-function: cubic-bezier(0.45, 0.1, 0.15, 1); }
        }

        .global-loader-scope .gb-loader {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            vertical-align: top;
        }

        .global-loader-scope .gb-loader::after {
            position: absolute;
            width: 1em;
            height: 1em;
            content: "";
            background-color: currentColor;
            border-radius: 50%;
            transform-origin: 50% 2em;
        }

        .global-loader-scope .gb-loader--lg {
            width: 64px;
            height: 64px;
            top: 60px; /* 调整高度，避免与 Logo 重叠 */
            left: calc(50% - 32px);
        }

        .global-loader-scope .gb-loader--lg::after {
            will-change: transform, box-shadow;
            backface-visibility: hidden;
            animation-name: gb-loader-animation-expand;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            color: rgb(154, 166, 175);
            font-size: 16px;
        }

        .global-loader-scope {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: none;
        }

        /* 滚动条 */
        #result::-webkit-scrollbar-track {
            border-radius: 5px;
            background-color: transparent;
        }

        #result::-webkit-scrollbar-track-piece {
            background-color: transparent;
        }

        #result::-webkit-scrollbar-thumb {
            border-radius: 5px;
            background: var(--scrollbar-color);
        }

        #result::-webkit-scrollbar-thumb:hover {
            background-color: dimgrey;
        }

        /* 状态标签颜色（已注册/未注册等） */
        .status-registered {
            color: #282828;
        }
        
        

/* 状态标签 */
.label {
    padding: 0 4px;
    font-size: 11px;
    border-radius: 4px;
    margin-right: 5px;
    font-family: "Microsoft JhengHei", "Apple LiGothic Medium,Microsoft YaHei", "Arial", cursive;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    height: 20px;
    line-height: 1;
    box-sizing: border-box;
    position: relative;
    top: -1px;
}

.NewReg {
    background-color: #00c500;
    text-shadow: 0 0 10px var(--label-color1), 0 0 20px var(--label-color1), 0 0 30px var(--label-color1), 0 0 40px var(--label-color1);
    color: white;
}

.RedemptionPeriod {
    background-color: #25addb;
    text-shadow: 0 0 10px var(--label-color2), 0 0 20px var(--label-color2), 0 0 30px var(--label-color2), 0 0 40px var(--label-color2);
    color: white;
}

.Expired, .ExpiringSoon {
    background-color: #ff3b3b;
    text-shadow: 0 0 10px var(--label-color2), 0 0 20px var(--label-color2), 0 0 30px var(--label-color2), 0 0 40px var(--label-color2);
    color: white;
}

.PendingTransfer, .TransferPeriod {
    background-color: yellow;
    text-shadow: 0 0 10px var(--label-color3), 0 0 20px var(--label-color3), 0 0 30px var(--label-color3), 0 0 40px var(--label-color3);
    color: black;
}

.WillExpire, .AutoRenewPeriod {
    background-color: #ec8c00;
    text-shadow: 0 0 10px var(--label-color4), 0 0 20px var(--label-color4), 0 0 30px var(--label-color4), 0 0 40px var(--label-color4);
    color: white;
}

.PendingDelete {
    background-color: #f52d63;
    text-shadow: 0 0 10px var(--label-color5), 0 0 20px var(--label-color5), 0 0 30px var(--label-color5), 0 0 40px var(--label-color5);
    color: white;
}

.Expired {
    background-color: #f52d63;
    color: white;
}

.ServerHold, .Inactive { /* Added .Inactive based on user request logic */
    background-color: whitesmoke;
    text-shadow: 0 0 10px var(--label-color6), 0 0 20px var(--label-color6), 0 0 30px var(--label-color6), 0 0 40px var(--label-color6);
    color: black;
    font-weight: bold;
}

.PendingVerification {
    background-color: rgb(192, 192, 192);
    text-shadow: 0 0 10px var(--label-color7), 0 0 20px var(--label-color7), 0 0 30px var(--label-color7), 0 0 40px var(--label-color7);
    color: black;
}

.RenewTenYears {
    background-color: cyan;
    text-shadow: 0 0 10px var(--label-color8), 0 0 20px var(--label-color8), 0 0 30px var(--label-color8), 0 0 40px var(--label-color8);
    color: black;
}

.TenYearsOld {
    background-color: #d614d6;
    text-shadow: 0 0 10px var(--label-color9), 0 0 20px var(--label-color9), 0 0 30px var(--label-color9), 0 0 40px var(--label-color9);
    color: white;
}

.RenewPeriod {
    background-color: pink;
    text-shadow: 0 0 10px var(--label-color10), 0 0 20px var(--label-color10), 0 0 30px var(--label-color10), 0 0 40px var(--label-color10);
    color: black;
}

.ThirtyYearsOld {
    background-color: white;
    color: black;
    position: relative;
    z-index: 0;
    overflow: hidden;
    padding: 0 4px;
    font-size: 11px;
    font-family: "Microsoft JhengHei", "Apple LiGothic Medium,Microsoft YaHei", "Arial", cursive;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    height: 20px;
    line-height: 1;
    box-sizing: border-box;
    margin-right: 5px;
    margin-left: 5px;
    top: -1px;
}

@keyframes rotate30 {
    100% {
        transform: rotate(1turn);
    }
}

.ThirtyYearsOld::before {
    content: '';
    position: absolute;
    z-index: -2;
    left: -100%;
    top: -100%;
    width: 300%;
    height: 300%;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: linear-gradient(lime, lime), linear-gradient(#ff00ff, #ff00ff), linear-gradient(cyan, cyan), linear-gradient(#ff304f, #ff304f);
    animation: rotate30 4s linear infinite;
}

.ThirtyYearsOld::after {
    background-color: #ffb900;
    content: '';
    position: absolute;
    z-index: -1;
    left: 2px;
    top: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    border-radius: 5px;
    animation: opacityChange 3s infinite alternate;
}

@keyframes rotate20 {
    to {
        transform: rotate(360deg)
    }
}

.TwentyYearsOld {
    position: relative;
    z-index: 0;
    overflow: hidden;
    border-radius: 3px;
    padding: 0 4px;
    text-align: center;
    font-size: 11px;
    font-family: "Microsoft JhengHei", "Apple LiGothic Medium,Microsoft YaHei", "Arial", cursive;
    transition: .2s all linear;
    text-decoration: initial;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    color: #fff;
    height: 20px;
    line-height: 1;
    box-sizing: border-box;
    margin-right: 5px;
    top: -1px;
}

.TwentyYearsOld:before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 90deg, #0000 70%, var(--twentyyears-before-color2) 80%, var(--twentyyears-before-color1));
    animation: rotate20 3s linear infinite;
}

.TwentyYearsOld::after {
    background: linear-gradient(85.95deg, var(--twentyyears-after-color1) 10.96%, var(--twentyyears-after-color2) 89.04%);
    content: '';
    position: absolute;
    z-index: -1;
    left: 2px;
    top: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    border-radius: 3px;
}

.AuthLabel {
    background: linear-gradient(135deg, #1098ad, #07b39b);
    color: white;
    padding: 0 4px;
    font-size: 11px;
    font-family: "Microsoft JhengHei", "Apple LiGothic Medium,Microsoft YaHei", "Arial", cursive;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    height: 20px;
    line-height: 1;
    box-sizing: border-box;
    margin-right: 5px;
    top: -1px;
    position: relative;
    box-shadow: 0 2px 5px rgba(16, 152, 173, 0.3);
}