/* ==========================================================================
   next-whois 风格复刻：中性黑白配色 + 圆点背景 + 玻璃卡片 + 亮/暗双主题
   该文件在 head.php 中最后加载，用于覆盖旧版 index.css / index-extra.css。
   ========================================================================== */

:root {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --dot: 240 10% 3.9%;

  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;

  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;

  --border: 240 5.9% 90%;
  --border-hover: 240 5.9% 80%;

  --primary: 240 5.9% 10%;
  --primary-foreground: 0 0% 98%;

  --ring: 240 5% 64.9%;

  --radius: 0.75rem;
  --nav-h: 64px;

  /* 统一自然缓动（easeOutQuint 近似，收尾柔和），全站过渡/入场复用 */
  --ease-natural: cubic-bezier(0.22, 1, 0.36, 1);

  /* 阴影：采用略带冷调的深色（真实光影偏冷），比纯中性更自然耐看。
     统一的分层景深令牌，供卡片/搜索框/浮层复用，保证质感一致。 */
  --shadow-color: 235 42% 16%;
  --elev-1: 0 1px 2px hsl(var(--shadow-color) / 0.05),
            0 2px 6px -2px hsl(var(--shadow-color) / 0.06);
  --elev-2: 0 1px 3px hsl(var(--shadow-color) / 0.06),
            0 10px 28px -18px hsl(var(--shadow-color) / 0.22);
  --elev-3: 0 2px 6px hsl(var(--shadow-color) / 0.07),
            0 22px 48px -24px hsl(var(--shadow-color) / 0.32);

  /* 状态色（提示卡片 / 标签）*/
  --ok: 142 71% 29%;
  --ok-bg: 138 76% 97%;
  --warn: 35 92% 33%;
  --warn-bg: 55 92% 95%;
  --bad: 0 74% 42%;
  --bad-bg: 0 86% 97%;
  --info: 215 80% 50%;
  /* 溢价域名：金棕色，区别于普通状态色，凸显“高价值”属性 */
  --premium: 38 82% 38%;
  --premium-bg: 42 88% 95%;
  --neutral: 220 9% 46%;
  --neutral-bg: 220 14% 96%;
}

/* 主题切换的平滑过渡（回退方案：不支持 View Transitions 时由 JS 添加 .theme-transition）。
   使用统一缓动让黑白切换柔和淡入，消除硬切造成的晃眼闪屏。 */
.theme-transition,
.theme-transition *,
.theme-transition *::before,
.theme-transition *::after {
  transition: background-color 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    fill 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    stroke 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* View Transitions：禁用默认交叉淡入，改由 JS 驱动圆形扩散裁切，避免双重动画 */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
/* 新主题画面置于上层，配合 clip-path 圆形展开 */
::view-transition-new(root) {
  z-index: 1;
}
::view-transition-old(root) {
  z-index: 0;
}

/* 尊重减少动态偏好：直接硬切，不做过渡 */
@media (prefers-reduced-motion: reduce) {
  .theme-transition,
  .theme-transition *,
  .theme-transition *::before,
  .theme-transition *::after {
    transition: none !important;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}

[data-theme="dark"] {
  /* 深邃近黑（非纯黑），更耐看且不晃眼；卡片/边框抬升以形成层次 */
  --background: 240 8% 4%;
  --foreground: 0 0% 98%;
  --dot: 220 30% 90%;

  --card: 240 6% 9%;
  --card-foreground: 0 0% 98%;

  --muted: 240 5% 14%;
  --muted-foreground: 240 6% 68%;

  --border: 240 5% 17%;
  --border-hover: 240 5% 30%;

  --primary: 0 0% 98%;
  --primary-foreground: 240 8% 6%;

  --ring: 240 5% 55%;

  /* 暗色下阴影需更深更实（近纯黑），才能在深色卡片上形成可感知的景深 */
  --shadow-color: 240 60% 2%;
  --elev-1: 0 1px 2px hsl(var(--shadow-color) / 0.4),
            0 2px 6px -2px hsl(var(--shadow-color) / 0.45);
  --elev-2: 0 1px 3px hsl(var(--shadow-color) / 0.5),
            0 12px 30px -18px hsl(var(--shadow-color) / 0.7);
  --elev-3: 0 2px 8px hsl(var(--shadow-color) / 0.55),
            0 24px 52px -24px hsl(var(--shadow-color) / 0.8);

  --ok: 142 60% 55%;
  --ok-bg: 142 40% 12%;
  --warn: 42 90% 60%;
  --warn-bg: 42 50% 12%;
  --bad: 0 75% 65%;
  --bad-bg: 0 50% 13%;
  --info: 215 85% 65%;
  --premium: 42 88% 62%;
  --premium-bg: 40 45% 13%;
  --neutral: 220 10% 70%;
  --neutral-bg: 220 8% 16%;
}

/* ---------- 基础 ---------- */
html {
  background-color: hsl(var(--background));
  overflow-x: hidden;
}

body {
  background-color: hsl(var(--background)) !important;
  background-image: none !important;
  color: hsl(var(--foreground)) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC",
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  /* 更顺滑的字体渲染 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
  letter-spacing: 0.01em;
  transition: background-color 0.4s ease, color 0.4s ease;
  /* 弹性列布局，配合页脚 margin-top:auto 实现粘性页脚 */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  max-width: 100%;
}

/* 圆点背景（覆盖旧版网格背景）*/
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(hsl(var(--dot) / 0.14) 1px, transparent 1px) !important;
  background-size: 22px 22px !important;
  background-color: hsl(var(--background)) !important;
  opacity: 1;
  /* 圆点均匀铺满整个视口：fixed 定位在滚动时始终覆盖全屏，
     不再使用任何渐隐蒙版，确保顶部到页脚（公告/鸣谢/版权）背后
     都能完整看到圆点背景。 */
}

::selection {
  background: hsl(var(--foreground) / 0.15);
}

/* ---------- 顶部导航（玻璃胶囊）---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: 12px 16px;
}

.topbar-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 14px;
  border: 1px solid hsl(var(--border));
  border-radius: 9999px;
  background: hsl(var(--card) / 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 3px hsl(var(--foreground) / 0.05);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: hsl(var(--foreground));
  padding-right: 6px;
}

.brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.02em;
}

/* 动态 logo：呼吸缩放 + 光晕脉动 + 斜向流光扫过 */
.brand-logo.is-animated {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    hsl(var(--primary)) 0%,
    hsl(var(--primary) / 0.72) 50%,
    hsl(var(--primary)) 100%
  );
  background-size: 200% 200%;
  transform-origin: center;
  will-change: transform;
  animation: brand-logo-breathe 3s ease-in-out infinite,
             brand-logo-flow 4.5s ease infinite;
}

/* 斜向流光高光 */
.brand-logo.is-animated::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 28%,
    hsl(var(--primary-foreground) / 0.5) 50%,
    transparent 72%
  );
  transform: translateX(-130%);
  animation: brand-logo-shine 3s ease-in-out infinite;
}

@keyframes brand-logo-breathe {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 hsl(var(--primary) / 0);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 14px 1px hsl(var(--primary) / 0.35);
  }
}

@keyframes brand-logo-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes brand-logo-shine {
  0%, 55% { transform: translateX(-130%); }
  100% { transform: translateX(130%); }
}

@media (prefers-reduced-motion: reduce) {
  .brand-logo.is-animated {
    animation: none;
  }
  .brand-logo.is-animated::after {
    display: none;
  }
}

.brand-name {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.1em;
}

/* 文字标光束：一道高光沿字面横向滑过（用渐变 + background-clip 实现） */
.brand-name.is-shine {
  position: relative;
  background: linear-gradient(
    100deg,
    hsl(var(--foreground)) 0%,
    hsl(var(--foreground)) 38%,
    hsl(var(--foreground) / 0.35) 50%,
    hsl(var(--foreground)) 62%,
    hsl(var(--foreground)) 100%
  );
  background-size: 220% 100%;
  background-position: 120% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: brand-name-shine 4.5s ease-in-out infinite;
}

@keyframes brand-name-shine {
  0% { background-position: 120% 0; }
  55%, 100% { background-position: -40% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-name.is-shine {
    animation: none;
    background: none;
    -webkit-text-fill-color: currentColor;
    color: hsl(var(--foreground));
  }
}

.brand-badge {
  font-size: 11px;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: 9999px;
  padding: 1px 8px;
}

.topbar-divider {
  width: 1px;
  height: 20px;
  background: hsl(var(--border));
  margin: 0 2px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9999px;
  border: none;
  background: transparent;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.icon-btn:hover {
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
}

.icon-btn svg {
  width: 18px;
  height: 18px;
}

/* ============ 语言切换器 ============ */
.lang-switch {
  position: relative;
  display: inline-flex;
}

.lang-switch.open .lang-toggle {
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
}

.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 148px;
  padding: 6px;
  border-radius: calc(var(--radius) - 0.1rem);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  box-shadow: 0 10px 30px -12px hsl(240 10% 10% / 0.35), 0 2px 8px -4px hsl(240 10% 10% / 0.2);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transform-origin: top right;
  animation: lang-menu-in 0.14s ease;
}

.lang-menu[hidden] {
  display: none;
}

@keyframes lang-menu-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.lang-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: calc(var(--radius) - 0.35rem);
  background: transparent;
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.lang-option:hover {
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
}

.lang-option.is-active {
  color: hsl(var(--foreground));
  font-weight: 600;
}

.lang-option-check {
  width: 14px;
  height: 14px;
  flex: none;
  opacity: 0;
}

.lang-option.is-active .lang-option-check {
  opacity: 1;
}

/* 太阳 / 月亮图标堆叠并以旋转 + 缩放 + 淡入做柔和交叉切换 */
.theme-toggle {
  position: relative;
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 浅色：显示太阳，月亮旋出 */
.theme-toggle .icon-sun {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
}
.theme-toggle .icon-moon {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-90deg) scale(0.4);
}

/* 深色：显示月亮，太阳旋出 */
[data-theme="dark"] .theme-toggle .icon-sun {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg) scale(0.4);
}
[data-theme="dark"] .theme-toggle .icon-moon {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

/* ---------- header / 主区域 ---------- */
header {
  height: auto !important;
  padding: 8px 16px 24px !important;
  background: transparent !important;
}

header > div {
  gap: 16px !important;
  max-width: 720px !important;
  justify-content: flex-start !important;
}

/* 首页（无域名）：自然高度排布，避免把页脚/公告顶出首屏 */
body[data-has-domain="0"] header {
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 32px !important;
}

body[data-has-domain="0"] header > div {
  width: 100%;
}

/* ---------- 搜索框（整合胶囊）---------- */
form {
  display: block !important;
  width: 100%;
}

.search-and-button-container {
  position: relative;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 0 !important;
}

.search-box {
  position: relative;
  display: flex !important;
  align-items: center !important;
  width: 100%;
  max-width: none !important;
  height: 56px !important;
  padding: 0 6px 0 18px !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 9999px !important;
  background: hsl(var(--card) / 0.7) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--elev-1);
  transition: border-color 0.25s var(--ease-natural),
              box-shadow 0.25s var(--ease-natural);
}

.search-box:focus-within {
  border-color: hsl(var(--foreground) / 0.45) !important;
  /* 焦点环 + 轻微抬升，聚焦时更有回应与浮起感 */
  box-shadow: 0 0 0 4px hsl(var(--ring) / 0.18), var(--elev-2);
}

.search-input,
.search-box .input {
  flex: 1 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  color: hsl(var(--foreground)) !important;
  font-size: 16px !important;
  outline: none !important;
  box-shadow: none !important;
}

.search-input::placeholder,
.search-box .input::placeholder {
  color: hsl(var(--muted-foreground)) !important;
  opacity: 1 !important;
}

.search-clear {
  position: static !important;
  width: 30px !important;
  height: 30px !important;
  margin: 0 4px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 9999px !important;
  background: hsl(var(--muted)) !important;
  color: hsl(var(--muted-foreground)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  opacity: 0;
  visibility: hidden;
}

.search-clear:hover {
  background: hsl(var(--border-hover)) !important;
  color: hsl(var(--foreground)) !important;
}

.search-clear.visible {
  opacity: 1;
  visibility: visible;
}

.search-clear svg {
  width: 14px !important;
  height: 14px !important;
}

/* 提交按钮：圆形深色图标按钮，嵌入胶囊右侧 */
.search-button {
  position: relative;
  flex-shrink: 0;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border-radius: 9999px !important;
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  transition: opacity 0.2s ease, transform 0.1s ease;
}

/* 查询加载态：隐藏放大镜，显示旋转环 + 居中停止方块（提示可点击取消） */
.search-button.is-loading > svg { opacity: 0; }
.search-button.is-loading { cursor: pointer; }
.search-button.is-loading::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  border: 2px solid hsl(var(--primary-foreground) / 0.35);
  border-top-color: hsl(var(--primary-foreground));
  animation: nw-spin 0.7s linear infinite;
}
/* 居中停止方块：明确暗示点击按钮可暂停/取消查询 */
.search-button.is-loading::before {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 1.5px;
  background: hsl(var(--primary-foreground));
  z-index: 1;
}

.search-button:hover {
  opacity: 0.9;
}

.search-button:active {
  transform: scale(0.96);
}

.search-button > span {
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  height: 1px !important;
  width: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
}

.search-button > svg {
  font-size: 18px;
  width: 18px;
  height: 18px;
}

/* ---------- 键盘快捷键提示（kbd）---------- */
.nw-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 1px solid hsl(var(--border));
  border-bottom-width: 2px;
  border-radius: 5px;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  line-height: 1;
}

/* 搜索框内左侧的 "/" 提示：仅在桌面（精确指针）显示。
   移动端触屏没有物理键盘、无法“按 / 聚焦”，该提示不仅无意义，
   还会挤占输入框起始处、让文本光标与 "/" 徽标视觉重叠。默认隐藏，
   仅在大屏 + 鼠标设备显示（与下方 .nw-hotkeys 的显示条件保持一致）。 */
.nw-kbd-inline {
  display: none;
  margin-right: 10px;
  flex-shrink: 0;
}
@media (min-width: 768px) and (pointer: fine) {
  .nw-kbd-inline {
    display: inline-flex;
  }
}

/* 搜索框下方的快捷键提示行（右对齐）*/
/* 键盘快捷键提示：仅在大屏 + 精确指针（鼠标）设备显示；移动/触屏设备隐藏 */
.nw-hotkeys {
  display: none;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  margin: 8px 2px 0;
  font-size: 11px;
  color: hsl(var(--muted-foreground) / 0.7);
  user-select: none;
}

@media (min-width: 768px) and (pointer: fine) {
  .nw-hotkeys { display: flex; }
}

.nw-hotkey-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ---------- TODAY 历史查询列表 ---------- */
.nw-history {
  margin-top: 24px;
}

.nw-history-divider {
  position: relative;
  text-align: center;
  margin-bottom: 8px;
}

.nw-history-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: hsl(var(--border) / 0.7);
}

.nw-history-divider span {
  position: relative;
  display: inline-block;
  padding: 0 14px;
  background: hsl(var(--background));
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: hsl(var(--muted-foreground));
}

.nw-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.nw-history-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid hsl(var(--border) / 0.6);
  background: hsl(var(--card) / 0.4);
  color: hsl(var(--foreground)) !important;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.nw-history-link:hover {
  background: hsl(var(--muted) / 0.5);
  border-color: hsl(var(--border));
  transform: translateY(-1px);
}

.nw-history-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: hsl(var(--muted) / 0.6);
  color: hsl(var(--muted-foreground));
  flex-shrink: 0;
  transition: background 0.25s var(--ease-natural),
              color 0.25s var(--ease-natural);
}

/* 悬停时图标微微向主色靠拢，细腻地强化"可点击"的反馈 */
.nw-history-link:hover .nw-history-icon {
  background: hsl(var(--primary) / 0.08);
  color: hsl(var(--foreground));
}

.nw-history-icon svg {
  width: 17px;
  height: 17px;
}

/* 竖排主体：域名在上，类型·时间在下 */
.nw-history-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.nw-history-name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nw-history-sub {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  font-size: 11px;
  color: hsl(var(--muted-foreground) / 0.85);
}

.nw-history-type {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 1px 6px;
  border-radius: 5px;
  background: hsl(var(--muted) / 0.7);
  color: hsl(var(--muted-foreground));
}

.nw-history-dot {
  color: hsl(var(--muted-foreground) / 0.5);
}

.nw-history-time {
  font-size: 12px;
  color: hsl(var(--muted-foreground) / 0.8);
}

/* 两列网格下卡片较窄，隐藏右侧箭头以节省空间 */
.nw-history-chevron {
  display: none;
}

/* 翻页控件 */
.nw-history-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
}

.nw-pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid hsl(var(--border) / 0.7);
  background: hsl(var(--card) / 0.5);
  color: hsl(var(--foreground));
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.nw-pager-btn svg {
  width: 15px;
  height: 15px;
}

.nw-pager-btn:hover:not(:disabled) {
  background: hsl(var(--muted) / 0.6);
  border-color: hsl(var(--border));
}

.nw-pager-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.nw-pager-info {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: hsl(var(--muted-foreground));
  min-width: 48px;
  text-align: center;
}

/* 清除历史按钮 */
.nw-history-clear {
  display: block;
  margin: 14px auto 0;
  padding: 6px 14px;
  border: none;
  background: transparent;
  font-size: 12px;
  color: hsl(var(--muted-foreground) / 0.7);
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
}

.nw-history-clear:hover {
  color: hsl(var(--destructive, 0 70% 50%));
  background: hsl(var(--muted) / 0.4);
}

/* ---------- 提示卡片（可注册 / 保留 / 禁止 / 未找到 / 无效）---------- */
/* 居中卡片：状态图标（圆形徽章）+ 域名 + 标题 + 副标题；配色由各状态修饰类注入 */
.domain-info-box {
  --state: var(--muted-foreground);
  --state-bg: var(--neutral-bg);
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
  border-radius: var(--radius) !important;
  border: 1px solid hsl(var(--state) / 0.28) !important;
  background: hsl(var(--state-bg) / 0.5) !important;
  color: hsl(var(--foreground)) !important;
  box-shadow: 0 1px 3px hsl(var(--foreground) / 0.04) !important;
  padding: 32px 24px !important;
}

/* 状态图标圆形徽章 */
.domain-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 9999px;
  background: hsl(var(--state) / 0.12);
  color: hsl(var(--state));
}
.domain-info-icon svg { width: 28px; height: 28px; }

/* 域名（可点击访问）—— 卡片第一层级：最大、最重 */
.domain-info-name {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: hsl(var(--foreground)) !important;
  word-break: break-all;
  overflow-wrap: break-word;
  text-decoration: none;
  line-height: 1.15;
}
.domain-info-name:hover { text-decoration: underline; }

/* 状态结论 —— 第二层级：带状态色的胶囊徽章，一眼看清结论 */
.domain-info-title {
  margin: 14px 0 0 !important;
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 9999px;
  background: hsl(var(--state) / 0.14);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: hsl(var(--state)) !important;
}

/* 补充说明 —— 第三层级：更小、更淡、行距宽松，限制字宽便于阅读 */
.domain-info-sub {
  margin: 12px auto 0 !important;
  max-width: 30ch;
  font-size: 0.875rem;
  line-height: 1.65;
  color: hsl(var(--muted-foreground)) !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

.domain-info-box--available  { --state: var(--ok);   --state-bg: var(--ok-bg); }
.domain-info-box--reserved   { --state: var(--warn); --state-bg: var(--warn-bg); }
.domain-info-box--prohibited,
.domain-info-box--invalid     { --state: var(--bad);  --state-bg: var(--bad-bg); }
.domain-info-box--unknown    { --state: var(--muted-foreground); --state-bg: var(--neutral-bg); }
  .domain-info-box--taken      { --state: var(--foreground); --state-bg: var(--neutral-bg); }
  .domain-info-box--error      { --state: var(--warn); --state-bg: var(--warn-bg); }

/* ---- 溢价域名槽位（异步注入到可注册卡片内）---- */
/* 容器：默认隐藏，命中溢价或有价格时由 JS 移除 hidden；与说明文字拉开间距 */
.domain-premium {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  width: 100%;
}
.domain-premium[hidden] { display: none; }

/* 溢价徽章：金棕描边胶囊 + 皇冠图标，明确“溢价/高价值”身份。
   两种上下文共用（可注册卡片槽位 & 已注册状态行）。 */
.nw-premium-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 9999px;
  background: hsl(var(--premium-bg));
  border: 1px solid hsl(var(--premium) / 0.45);
  color: hsl(var(--premium)) !important;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
}
.nw-premium-badge svg { width: 15px; height: 15px; flex: none; }

/* 已注册上下文：溢价价格标签的金色变体（覆盖普通 message-tag 灰底） */
.message-tag-premium {
  background: hsl(var(--premium-bg)) !important;
  color: hsl(var(--premium)) !important;
  border: 1px solid hsl(var(--premium) / 0.35) !important;
}
.message-tag-premium svg { color: hsl(var(--premium)) !important; width: 1em; height: 1em; }
.message-tag-premium-primary {
  border-color: hsl(var(--premium) / 0.6) !important;
  font-weight: 700 !important;
}

/* 价格：主价格加大加重，人民币估算次级、更淡 */
.domain-premium-price {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.domain-premium-amount {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: hsl(var(--foreground)) !important;
  line-height: 1.1;
}
.domain-premium-cny {
  font-size: 0.9375rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground)) !important;
}

/* 数据来源脚注 */
.domain-premium-source {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground)) !important;
  opacity: 0.85;
}

/* ---- DNS 兜底信息块（WHOIS/RDAP 不可用时展示实时 DNS 记录）---- */
.domain-dns-fallback {
  width: 100%;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid hsl(var(--foreground) / 0.1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.domain-dns-note {
  margin: 0;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground)) !important;
}

.domain-dns-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.domain-dns-label {
  flex: 0 0 76px;
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground)) !important;
  padding-top: 2px;
}

.domain-dns-val {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 0.8125rem;
  color: hsl(var(--foreground)) !important;
}

.domain-dns-val a {
  color: hsl(var(--foreground)) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.domain-dns-chip {
  padding: 3px 9px;
  border-radius: 7px;
  background: hsl(var(--foreground) / 0.06);
  word-break: break-all;
}

.domain-dns-mono .domain-dns-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
}

/* ---------- 结果卡片（玻璃）---------- */
.messages {
  margin-top: 8px !important;
}

.message,
.message.message-positive {
  background: hsl(var(--card) / 0.7) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: var(--radius) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 3px hsl(var(--foreground) / 0.05),
    0 8px 24px -12px hsl(var(--foreground) / 0.12) !important;
  padding: 20px !important;
}

.message-title,
.message-data .message-title {
  color: hsl(var(--foreground)) !important;
}

.message-title a {
  color: hsl(var(--foreground)) !important;
}

.message-positive .message-icon {
  color: hsl(var(--ok)) !important;
}

.message-label {
  color: hsl(var(--muted-foreground)) !important;
}

.message-data a {
  color: hsl(var(--info)) !important;
}

.message-icon-leading {
  color: hsl(var(--muted-foreground)) !important;
}

.message-tags-feature {
  border-top-color: hsl(var(--border)) !important;
}

.skeleton {
  background-color: hsl(var(--muted)) !important;
}

/* 标签：用半透明状态色，亮暗皆适配 */
.message-tag-gray   { background: hsl(var(--neutral) / 0.16) !important; color: hsl(var(--neutral)) !important; }
.message-tag-red    { background: hsl(var(--bad) / 0.16) !important;     color: hsl(var(--bad)) !important; }
.message-tag-yellow { background: hsl(var(--warn) / 0.18) !important;    color: hsl(var(--warn)) !important; }
.message-tag-green  { background: hsl(var(--ok) / 0.16) !important;      color: hsl(var(--ok)) !important; }
.message-tag-blue   { background: hsl(var(--info) / 0.16) !important;    color: hsl(var(--info)) !important; }
.message-tag-indigo { background: hsl(238 80% 60% / 0.16) !important;    color: hsl(238 70% 66%) !important; }
.message-tag-purple { background: hsl(270 80% 60% / 0.16) !important;    color: hsl(270 70% 68%) !important; }
.message-tag-pink   { background: hsl(330 80% 60% / 0.16) !important;    color: hsl(330 70% 66%) !important; }

/* 价格标签：与「年份药丸」同一套药丸语言，保持整行胶囊风格统一
   - 续费/转移：中性描边药丸（同 --border / --muted）
   - 注册价：主色描边药丸（与 .nw-age-pill 完全一致的主色淡底），做轻量强调 */
.message-tag-price {
  background: hsl(var(--muted)) !important;
  color: hsl(var(--muted-foreground)) !important;
  border: 1px solid hsl(var(--border)) !important;
}
.message-tag-price svg { color: hsl(var(--muted-foreground)) !important; }
.message-tag-price-primary {
  background: hsl(var(--primary) / 0.06) !important;
  color: hsl(var(--primary)) !important;
  border: 1px solid hsl(var(--primary) / 0.3) !important;
  font-weight: 600 !important;
}
.message-tag-price-primary svg { color: hsl(var(--primary)) !important; }

/* ---------- 原始数据区 ---------- */
.raw-data-whois,
.raw-data-rdap {
  background: hsl(var(--card) / 0.7) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: var(--radius) !important;
  color: hsl(var(--foreground)) !important;
  box-shadow: 0 1px 3px hsl(var(--foreground) / 0.05) !important;
}

code a { color: hsl(var(--info)) !important; }

/* ---------- WHOIS / RDAP 分段切换 ---------- */
.segmented {
  background: hsl(var(--muted)) !important;
  border-radius: 9999px !important;
  padding: 3px !important;
}

.segmented-item {
  color: hsl(var(--muted-foreground)) !important;
  border-radius: 9999px !important;
  cursor: pointer;
}

.segmented-item-selected {
  background: hsl(var(--card)) !important;
  color: hsl(var(--foreground)) !important;
  box-shadow: 0 1px 2px hsl(var(--foreground) / 0.1) !important;
}

/* ---------- 回到顶部 ---------- */
.back-to-top {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border-radius: 9999px !important;
  border: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* ---------- 响应式 ---------- */
@media (max-width: 768px) {
  .search-box { height: 52px !important; padding-left: 14px !important; }
  .search-button { width: 40px !important; min-width: 40px !important; height: 40px !important; }
  .brand-badge { display: none; }
  body[data-has-domain="0"] header { min-height: auto; padding-top: 20px !important; }
}

  @media (max-width: 420px) {
  .topbar { padding: 8px 12px; }
  .nw-hotkeys { gap: 12px; }
  }

/* ---------- 页脚（NIC.BN）暗色适配 ---------- */
[data-theme="dark"] .footer-announcement {
  color: hsl(var(--muted-foreground)) !important;
}
[data-theme="dark"] .footer-copyright {
  color: hsl(var(--muted-foreground) / 0.7) !important;
}
[data-theme="dark"] .footer-credits-line {
  color: hsl(var(--muted-foreground)) !important;
}
[data-theme="dark"] .footer-credits-line .credit-label {
  color: hsl(var(--muted-foreground) / 0.7) !important;
}
[data-theme="dark"] .footer-credits-line a {
  color: hsl(var(--foreground)) !important;
  border-bottom-color: hsl(var(--border-hover)) !important;
}
[data-theme="dark"] .footer-credits-divider {
  background: hsl(var(--border)) !important;
}
[data-theme="dark"] .footer-credits-sep {
  color: hsl(var(--muted-foreground) / 0.5) !important;
}

/* ==========================================================================
   结果页：双列仪表盘布局（复刻 next-whois）
   ========================================================================== */
.nw-result {
  width: 100%;
  max-width: 1024px;
  margin: 8px auto 0;
  padding: 0 4px;
  box-sizing: border-box;
}

.nw-text-ok   { color: hsl(var(--ok)) !important; }
.nw-text-warn { color: hsl(var(--warn)) !important; }
.nw-text-bad  { color: hsl(var(--bad)) !important; }

/* ---------- 顶部标签行 ---------- */
.nw-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.nw-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card) / 0.6);
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
}

.nw-pill svg { width: 13px; height: 13px; }

.nw-pill-accent {
  border-color: hsl(var(--primary) / 0.3);
  background: hsl(var(--primary) / 0.06);
  color: hsl(var(--primary));
}

/* 价格 / 备案插槽：复用 .message-tag 渲染，使其与胶囊行对齐 */
.nw-price-slot,
.nw-beian-slot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.nw-price-slot .message-tag,
.nw-beian-slot .message-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.4;
  border: 1px solid transparent;
  cursor: default;
}

.nw-price-slot .message-tag svg,
.nw-beian-slot .message-tag svg { width: 12px; height: 12px; }

/* 加载骨架：尺寸与胶囊一致，圆角对齐年份/价格药丸 */
.nw-skeleton {
  display: inline-block;
  width: 72px;
  height: 22px;
  border-radius: 6px;
  background: hsl(var(--muted));
  animation: nw-pulse 1.4s ease-in-out infinite;
}

@keyframes nw-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ---------- 12 列网格 ---------- */
.nw-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

@media (min-width: 1024px) {
  .nw-grid { grid-template-columns: 2fr 1fr; }
}

.nw-col-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.nw-col-side { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

/* ---------- 卡片基类 ---------- */
.nw-card {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card) / 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--elev-2);
}

.nw-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.nw-card-title svg { color: hsl(var(--muted-foreground)); }

/* ---------- 域名主卡 ---------- */
.nw-domain-card {
  position: relative;
  overflow: hidden;
  padding: 28px;
  /* 英雄卡：更强景深 + 顶部内高光，营造玻璃通透质感 */
  box-shadow: var(--elev-3),
    inset 0 1px 0 hsl(0 0% 100% / 0.5);
}

[data-theme="dark"] .nw-domain-card {
  /* 暗色玻璃高光更克制，避免边缘发白 */
  box-shadow: var(--elev-3),
    inset 0 1px 0 hsl(0 0% 100% / 0.06);
}

.nw-globe {
  position: absolute;
  top: 16px;
  right: 14px;
  width: 116px;
  height: 116px;
  pointer-events: none;
  opacity: 0.9;
}

.nw-globe-sphere {
  fill: hsl(var(--muted) / 0.5);
}

.nw-globe-grid {
  fill: none;
  stroke: hsl(var(--muted-foreground) / 0.28);
  stroke-width: 0.7;
}

.nw-globe-orbit-ring {
  fill: none;
  stroke: hsl(var(--muted-foreground) / 0.3);
  stroke-width: 0.9;
  stroke-dasharray: 2 4;
}

.nw-globe-orbit-dot {
  fill: hsl(var(--foreground));
}

/* 尊重减少动态偏好：停止卫星点运动，定格在轨道右端 */
@media (prefers-reduced-motion: reduce) {
  .nw-globe-orbit-dot animateMotion { display: none; }
  .nw-globe-orbit-dot { transform: translate(112px, 60px); }
}

@media (max-width: 420px) {
  .nw-globe { width: 96px; height: 96px; top: 14px; right: 12px; }
}

.nw-globe svg { width: 100%; height: 100%; }

.nw-domain-inner { position: relative; z-index: 1; }

.nw-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid hsl(var(--border));
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: hsl(var(--muted-foreground));
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.nw-domain-name {
  margin: 12px 0 6px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans",
    Helvetica, Arial, sans-serif; /* 覆盖全局 h1 的 Fraunces 衬线字体 */
  font-size: clamp(1.75rem, 7vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-transform: uppercase;
  word-break: break-all;
  text-align: left; /* 覆盖全局 h1 居中规则 */
  text-wrap: initial;
}

.nw-domain-name a { color: hsl(var(--foreground)) !important; text-decoration: none; }
.nw-domain-name a:hover { opacity: 0.8; }

.nw-domain-sub {
  margin: 0 0 14px;
  font-size: 13px;
  color: hsl(var(--muted-foreground));
}

.nw-domain-sub a { color: hsl(var(--info)) !important; }

.nw-status-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }

/* 域龄药丸 */
.nw-age-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid hsl(var(--primary) / 0.3);
  background: hsl(var(--primary) / 0.06);
  color: hsl(var(--primary));
  font-size: 11px;
  white-space: nowrap;
}

.nw-age-pill svg { width: 12px; height: 12px; }

.nw-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}

.nw-status-badge .nw-dot {
  width: 7px; height: 7px; border-radius: 9999px;
  background: rgba(255,255,255,0.9);
}

.nw-status-active   { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.nw-status-active .nw-dot { background: #34d399; }
.nw-status-expiring { background: hsl(35 92% 45%); }
.nw-status-expired  { background: hsl(0 74% 50%); }
.nw-status-neutral  {
  background: transparent;
  color: hsl(var(--muted-foreground));
  border: 1px solid hsl(var(--border));
}
.nw-status-neutral .nw-dot { background: hsl(var(--muted-foreground)); }

/* 日期网格 */
.nw-dates {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 16px;
  padding-top: 24px;
  border-top: 1px solid hsl(var(--border) / 0.6);
}

@media (min-width: 640px) {
  .nw-dates { grid-template-columns: repeat(3, 1fr); }
}

.nw-date-label {
  margin: 0 0 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
}

.nw-date-value {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  font-weight: 500;
  color: hsl(var(--foreground));
}

/* 可交互日期：悬停提示完整时分秒，点击展开/收起 */
.nw-date-interactive {
  cursor: pointer;
  text-decoration: underline dotted hsl(var(--muted-foreground) / 0.5);
  text-underline-offset: 3px;
  border-radius: 4px;
  transition: color 0.15s ease;
}

.nw-date-interactive:hover {
  color: hsl(var(--primary));
  text-decoration-color: hsl(var(--primary) / 0.6);
}

.nw-date-interactive:focus-visible {
  outline: 2px solid hsl(var(--primary) / 0.5);
  outline-offset: 2px;
}

.nw-date-sub {
  margin: 3px 0 0;
  font-size: 10px;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
}

@media (max-width: 639px) {
  .nw-date-wide { grid-column: span 2; }
}

/* 数据来源行 */
.nw-source-row {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: hsl(var(--muted-foreground) / 0.7);
}

/* 智能状态徽章 */
.nw-smart-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  background-color: hsl(var(--muted) / 0.7);
  border: 1px solid hsl(var(--border) / 0.6);
  white-space: nowrap;
}

/* 高亮徽章：黑色胶囊 + 粗体（停放 / 出售 / HOLD / 正在转移 等） */
.nw-smart-badge-strong {
  font-weight: 700;
  color: hsl(var(--primary-foreground));
  background-color: hsl(var(--foreground));
  border-color: hsl(var(--foreground));
}

/* ===================== 多域名批量查询（暗号 0） ===================== */
/* 搜索框内的“多域名”标签，替代 / 快捷键提示 */
.nw-multi-tag {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-right: 10px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: hsl(var(--primary-foreground));
  background-color: hsl(var(--foreground));
  white-space: nowrap;
}

/* 多域名模式下，搜索框左内边距收紧，给标签+输入更舒展的呼吸空间 */
.search-box--multi {
  padding-left: 12px !important;
}

.search-box--multi .search-input {
  padding-left: 2px !important;
}

.nw-multi {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px;
}

/* 引导 / 空态卡片 */
.nw-multi-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 40px 24px;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius, 16px);
  background-color: hsl(var(--card));
}

.nw-multi-intro-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: hsl(var(--muted-foreground));
  background-color: hsl(var(--muted) / 0.7);
}

.nw-multi-intro-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: hsl(var(--foreground));
}

.nw-multi-intro-desc {
  margin: 0;
  max-width: 460px;
  font-size: 13px;
  line-height: 1.6;
  color: hsl(var(--muted-foreground));
}

/* 结果概览行 */
.nw-multi-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.nw-multi-head-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.nw-multi-suffix {
  font-size: 20px;
  font-weight: 800;
  color: hsl(var(--foreground));
}

.nw-multi-count {
  font-size: 12px;
  color: hsl(var(--muted-foreground));
}

.nw-multi-summary {
  display: flex;
  gap: 14px;
}

.nw-multi-sum-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: hsl(var(--muted-foreground));
}

/* 概览行圆点：覆盖 nw-status-bullet 的 margin-top，使其在行内垂直居中 */
.nw-multi-sum-item .nw-status-bullet {
  margin-top: 0;
}

/* 紧凑列表 */
.nw-multi-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius, 14px);
  overflow: hidden;
  background-color: hsl(var(--card));
}

.nw-multi-row + .nw-multi-row {
  border-top: 1px solid hsl(var(--border) / 0.7);
}

.nw-multi-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  text-decoration: none;
  color: hsl(var(--foreground));
  transition: background-color 0.15s ease;
}

.nw-multi-link:hover {
  background-color: hsl(var(--muted) / 0.5);
}

.nw-multi-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.nw-multi-domain {
  flex: 1 1 auto;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nw-multi-prefix {
  font-weight: 700;
  color: hsl(var(--foreground));
}

.nw-multi-tld {
  color: hsl(var(--muted-foreground));
}

.nw-multi-state {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
}

.nw-multi-state--available { color: #16a34a; }
.nw-multi-state--registered { color: hsl(var(--muted-foreground)); }
.nw-multi-state--unknown { color: hsl(var(--muted-foreground) / 0.7); }

.nw-multi-arrow {
  flex: 0 0 auto;
  color: hsl(var(--muted-foreground) / 0.6);
}

.nw-multi-foot {
  margin: 12px 2px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: hsl(var(--muted-foreground) / 0.7);
}

/* ---- 详情弹窗 ---- */
.nw-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.nw-modal-backdrop {
  position: absolute;
  inset: 0;
  background: hsl(0 0% 0% / 0.5);
  backdrop-filter: blur(2px);
  animation: nw-modal-fade 0.15s ease;
}

.nw-modal-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  height: min(80vh, 720px);
  background-color: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: 16px;
  box-shadow: 0 20px 50px hsl(0 0% 0% / 0.25);
  overflow: hidden;
  animation: nw-modal-pop 0.18s ease;
}

.nw-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 12px 18px;
  border-bottom: 1px solid hsl(var(--border) / 0.7);
  flex: 0 0 auto;
}

.nw-modal-title {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  font-weight: 700;
  color: hsl(var(--foreground));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}

.nw-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  color: hsl(var(--muted-foreground));
  background-color: hsl(var(--muted) / 0.6);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.nw-modal-close:hover {
  color: hsl(var(--foreground));
  background-color: hsl(var(--muted));
}

/* 关闭按钮内的 SVG 图标不拦截点击，确保点到图标也能触发按钮的关闭逻辑 */
.nw-modal-close svg {
  pointer-events: none;
}

.nw-modal-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 关键：[hidden] 必须真正隐藏。三态元素用了 display:flex，
   会覆盖 hidden 的默认 display:none，导致加载态与错误态叠加显示。
   这里显式让 hidden 优先，彻底修复“弹窗内容重叠”问题。 */
.nw-modal-body [hidden] {
  display: none !important;
}

.nw-modal-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
}

.nw-modal-loading-text {
  font-size: 13px;
  color: hsl(var(--muted-foreground));
  line-height: 1.5;
  max-width: 30ch;
}

.nw-modal-spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid hsl(var(--muted-foreground) / 0.25);
  border-top-color: hsl(var(--foreground));
  animation: nw-spin 0.7s linear infinite;
}

/* 错误态：查询超时 / 注册局不可用 */
.nw-modal-error {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 28px;
  text-align: center;
  color: hsl(var(--muted-foreground));
}

.nw-modal-error-text {
  font-size: 14px;
  line-height: 1.5;
  color: hsl(var(--foreground));
  margin: 0;
  max-width: 34ch;
}

.nw-modal-error-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.nw-modal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 18px;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  color: hsl(var(--primary-foreground));
  background-color: hsl(var(--primary));
  transition: opacity 0.15s ease;
}

.nw-modal-btn:hover { opacity: 0.9; }

.nw-modal-btn--ghost {
  color: hsl(var(--foreground));
  background-color: hsl(var(--muted));
}

/* 标题栏“在新标签打开”链接 */
.nw-modal-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 9px;
  color: hsl(var(--muted-foreground));
  background-color: hsl(var(--muted) / 0.6);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.nw-modal-open:hover {
  color: hsl(var(--foreground));
  background-color: hsl(var(--muted));
}

.nw-modal-open svg { pointer-events: none; }

body.nw-modal-open {
  overflow: hidden;
}

/* ---- 弹窗内原生详情卡片（替代 iframe） ---- */
.nw-modal-content {
  padding: 18px 18px 22px;
}

.nw-md-hero {
  margin-bottom: 16px;
}

.nw-md-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.nw-md-badge.is-avail {
  color: #15803d;
  background-color: #16a34a1a;
}

.nw-md-badge.is-reg {
  color: hsl(var(--muted-foreground));
  background-color: hsl(var(--muted));
}

.nw-md-fields {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nw-md-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 11px 2px;
  border-bottom: 1px solid hsl(var(--border) / 0.6);
}

.nw-md-row:last-child {
  border-bottom: none;
}

.nw-md-label {
  flex: 0 0 84px;
  font-size: 13px;
  color: hsl(var(--muted-foreground));
}

.nw-md-value {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  color: hsl(var(--foreground));
  word-break: break-word;
  text-align: right;
}

.nw-md-value a {
  color: hsl(var(--foreground));
  text-decoration: underline;
  text-underline-offset: 2px;
}

.nw-md-chips,
.nw-md-nslist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.nw-md-chip {
  padding: 3px 9px;
  border-radius: 7px;
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  background-color: hsl(var(--muted) / 0.7);
}

.nw-md-ns {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: hsl(var(--foreground));
}

.nw-md-empty {
  padding: 20px 0;
  text-align: center;
  color: hsl(var(--muted-foreground));
  font-size: 13px;
}

.nw-md-full {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  margin-top: 18px;
}

/* 移动端：弹窗更高、更贴边，充分利用竖屏空间 */
@media (max-width: 640px) {
  .nw-modal { padding: 10px; }
  .nw-modal-panel {
    max-width: 100%;
    height: min(90vh, 900px);
  }
}

@keyframes nw-modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes nw-modal-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- 嵌入模式（iframe 内）：去除外层留白，仅展示结果卡片 ---- */
body.is-embed {
  padding: 0;
  background-color: hsl(var(--background));
}

body.is-embed main {
  margin: 0;
  padding: 12px;
}

/* 注册人联系（卡内） */
.nw-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 28px;
}

.nw-contact { min-width: 0; }

.nw-contact-value {
  margin: 0;
  font-size: 13px;
  color: hsl(var(--foreground));
  word-break: break-all;
}

a.nw-contact-value.nw-link { color: hsl(var(--info)) !important; text-decoration: none; }
a.nw-contact-value.nw-link:hover { text-decoration: underline; }

/* 注册商卡分区（WHOIS服务器 / 滥用 / 注册人） */
.nw-registrar-section {
  border-top: 1px solid hsl(var(--border) / 0.6);
  padding: 14px 0 2px;
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nw-section-title {
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: hsl(var(--muted-foreground) / 0.6);
}

.nw-kv {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.nw-kv-key {
  flex-shrink: 0;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
  color: hsl(var(--muted-foreground) / 0.7);
  padding-top: 1px;
}

.nw-kv-val {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: hsl(var(--foreground) / 0.85);
  text-align: right;
  word-break: break-all;
}

a.nw-kv-val.nw-link { color: hsl(var(--info)) !important; text-decoration: none; }
a.nw-kv-val.nw-link:hover { text-decoration: underline; }

/* ---------- 状态 / NS 双卡 ---------- */
.nw-subgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 640px) {
  .nw-subgrid { grid-template-columns: repeat(2, 1fr); }
}

.nw-list-card { padding: 20px; }

.nw-status-list { display: flex; flex-direction: column; gap: 10px; }

.nw-status-item { display: flex; align-items: flex-start; gap: 10px; }

.nw-status-bullet {
  width: 6px; height: 6px; border-radius: 9999px;
  flex-shrink: 0; margin-top: 7px;
}

.nw-status-item-body { min-width: 0; }

.nw-status-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 500;
  color: hsl(var(--foreground)) !important;
  text-decoration: none;
}
a.nw-status-name:hover { text-decoration: underline; }

.nw-status-code {
  margin: 2px 0 0;
  font-size: 10px;
  color: hsl(var(--muted-foreground));
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* NS 列表 */
.nw-ns-list { display: flex; flex-direction: column; gap: 8px; }

.nw-ns-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid hsl(var(--border) / 0.6);
  background: hsl(var(--muted) / 0.4);
}

.nw-ns-label {
  flex-shrink: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 600;
  color: hsl(var(--foreground) / 0.75);
  letter-spacing: 0.02em;
}

.nw-ns-name {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nw-ns-brand {
  font-size: 10px;
  color: hsl(var(--muted-foreground) / 0.65);
  flex-shrink: 0;
}

  /* 汇总 DNS 提供商：放在 NS 卡标题右侧的小胶囊 */
> .nw-dns-provider {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted) / 0.6);
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease;
  }

  /* 当 DNS 提供商可点击（链接到官网）时的悬停反馈 */
a.nw-dns-provider:hover {
  color: hsl(var(--foreground));
  background: hsl(var(--muted));
  }

/* ---------- 注册商卡 ---------- */
.nw-registrar-card { padding: 20px; }

.nw-card-title-plain { margin-bottom: 14px; }

.nw-registrar-body { display: flex; align-items: center; gap: 12px; }

.nw-registrar-logo {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; text-transform: uppercase;
  flex-shrink: 0;
  overflow: hidden;
}
/* 真实站点图标：加载成功后铺满头像并盖住字母 */
.nw-registrar-favicon {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 6px;
  background: hsl(var(--card));
  border-radius: inherit;
}
/* 有图标时把底色改为浅色，避免深色背景透出边缘 */
.nw-registrar-logo.has-favicon { background: hsl(var(--card)); }

.nw-registrar-meta { min-width: 0; }

.nw-registrar-name {
  margin: 0 0 2px;
  font-size: 14px; font-weight: 600;
  color: hsl(var(--foreground));
  word-break: break-word;
}

.nw-registrar-url {
  font-size: 11px;
  color: hsl(var(--info)) !important;
  word-break: break-all;
}

/* ---------- 原始数据面板 ---------- */
.nw-raw-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  min-height: 280px;
}

.nw-raw-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.4);
}

.nw-raw-tabs { display: flex; gap: 4px; }

.nw-raw-tab {
  padding: 4px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: hsl(var(--muted-foreground));
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.nw-raw-tab.segmented-item-selected {
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  box-shadow: 0 1px 2px hsl(var(--foreground) / 0.1);
}

.nw-raw-actions { display: flex; gap: 8px; }

.nw-raw-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: transparent;
  color: hsl(var(--muted-foreground));
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.15s ease;
}

.nw-raw-action:hover { color: hsl(var(--foreground)); }

.nw-raw-body {
  flex: 1;
  overflow: auto;
  max-height: 600px;
}

.nw-raw-panel .raw-data-whois,
.nw-raw-panel .raw-data-rdap {
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 16px !important;
  font-size: 11px !important;
  line-height: 1.7 !important;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 1023px) {
  .nw-raw-panel { min-height: 0; }
  .nw-raw-body { max-height: 460px; }
}

/* ============ 查询加载动画（提交后、页面跳转前的过渡态） ============ */
.nw-loading {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8px 0 0;
  opacity: 0;
  transform: translateY(6px);
  animation: nw-loading-fade 0.25s ease forwards;
}

@keyframes nw-loading-fade {
  to { opacity: 1; transform: translateY(0); }
}

.nw-loading-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 44px 24px 48px;
  text-align: center;
}

/* 双环轨道 + 脉冲核心，营造"正在多源探测"的观感 */
.nw-loading-orbit {
  position: relative;
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nw-loading-ring {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  border: 2.5px solid transparent;
}

/* 外环：顺时针，主色弧 */
.nw-loading-ring:nth-child(1) {
  border-top-color: hsl(var(--foreground));
  border-right-color: hsl(var(--foreground) / 0.35);
  animation: nw-spin 1s cubic-bezier(0.5, 0.1, 0.4, 0.9) infinite;
}

/* 内环：逆时针、稍小，弱化色，形成层次 */
.nw-loading-ring:nth-child(2) {
  inset: 9px;
  border-bottom-color: hsl(var(--muted-foreground) / 0.9);
  border-left-color: hsl(var(--muted-foreground) / 0.3);
  animation: nw-spin-rev 1.4s cubic-bezier(0.5, 0.1, 0.4, 0.9) infinite;
}

/* 中心脉冲点 */
.nw-loading-core {
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background: hsl(var(--foreground));
  animation: nw-core-pulse 1.4s ease-in-out infinite;
}

@keyframes nw-spin { to { transform: rotate(360deg); } }
@keyframes nw-spin-rev { to { transform: rotate(-360deg); } }
@keyframes nw-core-pulse {
  0%, 100% { transform: scale(0.7); opacity: 0.5; }
  50%      { transform: scale(1);   opacity: 1; }
}

.nw-loading-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  word-break: break-all;
  margin: 0;
}

/* 副标题：数据源标签 + 动态省略号 */
.nw-loading-sub {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: hsl(var(--muted-foreground) / 0.85);
}

.nw-loading-dots {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  margin-left: 2px;
}

.nw-loading-dots i {
  width: 3px;
  height: 3px;
  border-radius: 9999px;
  background: currentColor;
  opacity: 0.3;
  animation: nw-dot-blink 1.2s ease-in-out infinite;
}

.nw-loading-dots i:nth-child(2) { animation-delay: 0.2s; }
.nw-loading-dots i:nth-child(3) { animation-delay: 0.4s; }

@keyframes nw-dot-blink {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50%      { opacity: 1;    transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .nw-loading-ring:nth-child(1) { animation-duration: 2s; }
  .nw-loading-ring:nth-child(2) { animation-duration: 2.6s; }
  .nw-loading-core,
  .nw-loading-dots i { animation: none; }
}

/* =====================================================================
   呼吸感动效层：自然、流畅、克制
   - 分层入场：顶栏 → 搜索 → 卡片/历史 → 页脚，柔和上浮淡入并错峰
   - 静息呼吸：搜索框与主卡在空闲时极轻微地"呼吸"（光晕/缩放）
   - 顺滑悬停：卡片与历史项浮起，采用自然缓动
   仅在用户未开启"减少动态"时启用，避免打扰无障碍需求。
   ===================================================================== */

/* 统一的自然缓动（easeOutQuint 近似，收尾柔和） */
:root {
  --ease-natural: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: no-preference) {
  /* ---- 分层入场：初始下沉+透明，加载后柔和浮现 ---- */
  .topbar,
  header,
  .footer,
  main .nw-card,
  .nw-history-link {
    animation: nw-rise-in 0.7s var(--ease-natural) both;
  }

  .topbar  { animation-delay: 0.02s; }
  header   { animation-delay: 0.10s; }
  .footer  { animation-delay: 0.30s; }

  /* 结果卡片错峰浮现，形成自上而下的呼吸节奏 */
  main .nw-card:nth-of-type(1) { animation-delay: 0.16s; }
  main .nw-card:nth-of-type(2) { animation-delay: 0.23s; }
  main .nw-card:nth-of-type(3) { animation-delay: 0.30s; }
  main .nw-card:nth-of-type(4) { animation-delay: 0.37s; }
  main .nw-card:nth-of-type(5) { animation-delay: 0.44s; }
  main .nw-card:nth-of-type(n + 6) { animation-delay: 0.5s; }

  /* 历史记录逐项错峰，像依次呼吸展开 */
  .nw-history-link:nth-child(1) { animation-delay: 0.18s; }
  .nw-history-link:nth-child(2) { animation-delay: 0.24s; }
  .nw-history-link:nth-child(3) { animation-delay: 0.30s; }
  .nw-history-link:nth-child(4) { animation-delay: 0.36s; }
  .nw-history-link:nth-child(5) { animation-delay: 0.42s; }
  .nw-history-link:nth-child(6) { animation-delay: 0.48s; }
  .nw-history-link:nth-child(n + 7) { animation-delay: 0.54s; }

  /* ---- 静息呼吸：搜索框空闲时极轻微的光晕起伏 ---- */
  .search-box {
    animation: nw-breathe-glow 5.5s ease-in-out 1.2s infinite;
  }
  /* 聚焦时停止呼吸，让聚焦光环清晰稳定 */
  .search-box:focus-within {
    animation: none;
  }

  /* ---- 静息呼吸：域名主卡极缓慢的缩放起伏 ----
     选择器需与 `main .nw-card` 同等优先级并置于其后，方能接管 animation。 */
  main .nw-domain-card {
    animation: nw-rise-in 0.7s var(--ease-natural) 0.16s both,
               nw-breathe-scale 7s ease-in-out 1.4s infinite;
  }

  /* ---- 顺滑悬停：卡片浮起 ---- */
  main .nw-card {
    transition: transform 0.4s var(--ease-natural),
                box-shadow 0.4s var(--ease-natural);
  }
  main .nw-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--elev-3);
  }

  /* 历史项悬停改用自然缓动，浮起更顺滑 */
  .nw-history-link {
    transition: border-color 0.25s var(--ease-natural),
                background 0.25s var(--ease-natural),
                transform 0.25s var(--ease-natural),
                box-shadow 0.25s var(--ease-natural);
  }
  .nw-history-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -18px hsl(var(--foreground) / 0.28);
  }
}

/* 入场：柔和上浮淡入 */
@keyframes nw-rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 搜索框静息呼吸：外发光柔和起伏 */
@keyframes nw-breathe-glow {
  0%, 100% { box-shadow: 0 1px 2px hsl(var(--foreground) / 0.04); }
  50%      { box-shadow: 0 2px 10px hsl(var(--foreground) / 0.04),
                         0 0 0 4px hsl(var(--ring) / 0.06); }
}

/* 主卡静息呼吸：几乎不可察觉的缩放，赋予"活着"的感觉 */
@keyframes nw-breathe-scale {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.006); }
}

/* ============================================================
   释放可注册时间预测
   ============================================================ */
.nw-forecast {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--muted) / 0.4);
}

.nw-forecast-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.nw-forecast-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.nw-forecast-title svg { color: hsl(var(--muted-foreground)); }

.nw-forecast-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: 999px;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
}

/* 预计可注册：日期 + 天数 */
.nw-forecast-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0 4px;
  padding-bottom: 14px;
  border-bottom: 1px dashed hsl(var(--border));
}

.nw-forecast-hero-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.nw-forecast-hero-label {
  font-size: 11px;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
}

.nw-forecast-hero-date {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: hsl(var(--foreground));
  font-variant-numeric: tabular-nums;
}

.nw-forecast-hero-sub {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: hsl(var(--muted-foreground));
}

/* 阶段时间线 */
.nw-forecast-timeline {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}

.nw-forecast-phase {
  position: relative;
  display: flex;
  gap: 10px;
  padding: 0 0 14px 2px;
}

/* 竖线连接各阶段圆点 */
.nw-forecast-phase:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 14px;
  bottom: 0;
  width: 1px;
  background: hsl(var(--border));
}

.nw-forecast-dot {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  margin-top: 2px;
  border-radius: 999px;
  background: hsl(var(--background));
  border: 2px solid hsl(var(--border-hover));
  z-index: 1;
}

.nw-forecast-phase.is-current .nw-forecast-dot {
  border-color: hsl(var(--warn));
  background: hsl(var(--warn));
  box-shadow: 0 0 0 4px hsl(var(--warn) / 0.15);
}

.nw-forecast-phase-final.is-current .nw-forecast-dot {
  border-color: hsl(var(--ok));
  background: hsl(var(--ok));
  box-shadow: 0 0 0 4px hsl(var(--ok) / 0.15);
}

.nw-forecast-phase-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.nw-forecast-phase-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.nw-forecast-phase.is-current .nw-forecast-phase-name { color: hsl(var(--warn)); }
.nw-forecast-phase-final.is-current .nw-forecast-phase-name { color: hsl(var(--ok)); }

.nw-forecast-now {
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  color: hsl(var(--warn));
  background: hsl(var(--warn-bg));
}

.nw-forecast-phase-final.is-current .nw-forecast-now {
  color: hsl(var(--ok));
  background: hsl(var(--ok-bg));
}

.nw-forecast-phase-range {
  font-size: 11px;
  color: hsl(var(--muted-foreground));
  font-variant-numeric: tabular-nums;
}

.nw-forecast-note {
  margin: 6px 0 0;
  font-size: 10.5px;
  line-height: 1.5;
  color: hsl(var(--muted-foreground));
}

.nw-forecast-registry {
  display: block;
  margin-bottom: 2px;
  font-weight: 600;
  color: hsl(var(--foreground) / 0.75);
}