/* ============================================================
   modern.css — 前台现代化增强层 v2.0
   叠加于 index.min.css 及各页面 CSS 之上，纯视觉增强
   整文件移除即可完全回滚，不涉及任何业务逻辑
   v2.0：深蓝官方背景 / 官方徽章 / 数据亮点条 / 信任条 / 细节增强
   ============================================================ */

:root {
  --m-brand: #667eea;
  --m-brand-deep: #5a67d8;
  --m-brand-2: #764ba2;
  --m-cyan: #22d3ee;
  --m-ok: #10b981;
  --m-radius: 16px;
  --m-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  --m-glow: 0 8px 24px -6px rgba(102, 126, 234, 0.55);
}

/* ---------- 全局细节 ---------- */
html { scroll-behavior: smooth; }

body {
  font-family: system-ui, -apple-system, "PingFang SC", "HarmonyOS Sans SC",
    "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(102, 126, 234, 0.9); color: #fff; }

/* 细滚动条（webkit 内核） */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #667eea, #764ba2);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: #5a67d8; }

/* ---------- 极光背景光斑（深色渐变背景上的品牌色氛围光） ---------- */
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(90px);
  opacity: 0.35;
  will-change: transform;
}
body::before {
  width: 46vw; height: 46vw;
  left: -12vw; top: -14vw;
  background: radial-gradient(circle, #667eea 0%, transparent 70%);
  animation: m-float-1 16s ease-in-out infinite alternate;
}
body::after {
  width: 40vw; height: 40vw;
  right: -10vw; bottom: -12vw;
  background: radial-gradient(circle, #22d3ee 0%, transparent 70%);
  animation: m-float-2 20s ease-in-out infinite alternate;
}
@keyframes m-float-1 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(6vw, 4vw) scale(1.12); }
}
@keyframes m-float-2 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-5vw, -5vw) scale(1.15); }
}

/* ---------- 导航栏 ---------- */
.nav-link { position: relative; transition: color 0.2s ease; }
.nav-link::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -4px;
  width: 0; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #667eea, #22d3ee);
  transform: translateX(-50%);
  transition: width 0.25s ease;
}
.nav-link:hover::after,
.nav-link.active::after { width: 68%; }
.nav-link.active { color: #667eea; }

.mobile-menu-btn { transition: transform 0.2s ease, background 0.2s ease; }
.mobile-menu-btn:active { transform: scale(0.92); }

.mobile-sidebar-content {
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}
.mobile-nav-link { transition: background 0.2s ease, transform 0.2s ease; }
.mobile-nav-link:active { transform: scale(0.98); }

/* ---------- Hero 区 ---------- */
.hero-title {
  background: linear-gradient(115deg, #ffffff 10%, #c7d2fe 45%, #67e8f9 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 4px 14px rgba(102, 126, 234, 0.35));
}
.hero-title img { -webkit-text-fill-color: initial; }

.hero-subtitle {
  color: rgba(255, 255, 255, 0.88) !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.18);
  animation: m-rise 0.7s ease both;
}
@keyframes m-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-features .feature-item {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.hero-features .feature-item:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}
.hero-features .feature-item i { color: #6ee7b7; }

/* ---------- 卡片 ---------- */
.search-card,
.result-card {
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.search-card:hover {
  border-color: rgba(102, 126, 234, 0.35);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(102, 126, 234, 0.08);
}

/* ---------- 输入框 ---------- */
.search-input,
.filter-input,
.contact-input,
.domain-input {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.search-input:focus,
.filter-input:focus,
.contact-input:focus,
.domain-input:focus {
  border-color: #667eea !important;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.18) !important;
  outline: none !important;
}

/* ---------- 按钮：渐变 + 流光 + 抬升 ---------- */
.search-btn,
.primary-btn,
.confirm-btn,
.action-btn.btn-primary,
.tem-btn {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.2s ease !important;
}
.search-btn::after,
.primary-btn::after,
.confirm-btn::after,
.action-btn.btn-primary::after,
.tem-btn::after {
  content: "";
  position: absolute;
  top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s ease;
  pointer-events: none;
}
.search-btn:hover::after,
.primary-btn:hover::after,
.confirm-btn:hover::after,
.action-btn.btn-primary:hover::after,
.tem-btn:hover::after { left: 130%; }

.search-btn:hover,
.primary-btn:hover,
.confirm-btn:hover,
.action-btn.btn-primary:hover,
.tem-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -6px rgba(102, 126, 234, 0.6);
  filter: brightness(1.05);
}
.search-btn:active,
.primary-btn:active,
.confirm-btn:active,
.action-btn.btn-primary:active,
.tem-btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 4px 12px -4px rgba(102, 126, 234, 0.5);
}

.action-btn { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.action-btn:hover { transform: translateY(-1px); }

/* ---------- 结果表格 ---------- */
.data-table tbody tr,
.result-table tbody tr { transition: background-color 0.15s ease; }
.data-table tbody tr:hover,
.result-table tbody tr:hover { background-color: #f6f8ff; }

.data-table thead th {
  background: linear-gradient(180deg, #f8faff, #f1f4fd);
}
.data-table td,
.result-table td { border-color: #eef1f8; }

.type-tag,
.status-badge,
.order-status-badge { transition: transform 0.15s ease; }

/* 可复制单元格：暗示可点 */
.copyable,
.domain-cell,
.order-id-cell { cursor: pointer; transition: background-color 0.15s ease; border-radius: 6px; }
.copyable:hover,
.domain-cell:hover,
.order-id-cell:hover { background: rgba(102, 126, 234, 0.08); }

/* ---------- 空状态 ---------- */
.empty-state { animation: m-rise 0.5s ease both; }
.empty-icon {
  display: inline-block;
  background: linear-gradient(135deg, #cbd5e1, #94a3b8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: m-bob 3.2s ease-in-out infinite;
}
@keyframes m-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* /list 空店状态（配合 list.php 的 text.none） */
.table-empty-modern { padding: 52px 20px 44px; text-align: center; }
.table-empty-modern .tem-icon {
  width: 76px; height: 76px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #eef2ff, #e0f2fe);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; color: #667eea;
  box-shadow: inset 0 0 0 1px rgba(102, 126, 234, 0.15);
  animation: m-bob 3.2s ease-in-out infinite;
}
.table-empty-modern .tem-title { font-size: 17px; font-weight: 700; color: #374151; }
.table-empty-modern .tem-desc { margin-top: 8px; font-size: 13px; color: #94a3b8; line-height: 1.7; }
.table-empty-modern .tem-btn {
  display: inline-flex; align-items: center;
  margin-top: 18px; padding: 10px 26px;
  border-radius: 999px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff; font-size: 14px; font-weight: 600;
  text-decoration: none;
  box-shadow: 0 8px 20px -6px rgba(102, 126, 234, 0.55);
}

/* ---------- 加载动画 ---------- */
.loading-spinner,
.retry-spinner {
  border: none !important;
  background: conic-gradient(from 0deg, #667eea, #22d3ee, #764ba2, #667eea) !important;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 0);
  animation: m-spin 0.9s linear infinite !important;
  border-radius: 50%;
}
@keyframes m-spin { to { transform: rotate(360deg); } }

.loading-text { letter-spacing: 0.05em; }

/* ---------- layui 弹窗现代化 ---------- */
.layui-layer {
  border-radius: 14px !important;
  overflow: hidden;
  box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.35) !important;
}
.layui-layer-title {
  background: #fff !important;
  border-bottom: 1px solid #eef1f8 !important;
  border-radius: 14px 14px 0 0 !important;
  font-weight: 600;
}
.layui-layer-btn a {
  border-radius: 999px !important;
  transition: transform 0.15s ease, box-shadow 0.2s ease !important;
}
.layui-layer-btn .layui-layer-btn0 {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 6px 16px -4px rgba(102, 126, 234, 0.5);
}
.layui-layer-btn a:hover { transform: translateY(-1px); }
.layui-layer-msg { border-radius: 999px !important; }

/* ---------- 支付弹窗（pl / list 页） ---------- */
.payment-option,
.payment-method-item { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.payment-option:hover,
.payment-method-item:hover { transform: translateY(-2px); }
.payment-option.selected,
.payment-method-item.selected {
  border-color: #667eea !important;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.16), 0 8px 20px -8px rgba(102, 126, 234, 0.4) !important;
}
.confirm-btn,
.payment-btn-confirm {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  border: none !important;
  box-shadow: 0 8px 20px -6px rgba(102, 126, 234, 0.55) !important;
}

/* ---------- 页脚 ---------- */
.footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-link {
  transition: color 0.2s ease, opacity 0.2s ease;
  opacity: 0.85;
}
.footer-link:hover { color: #fff; opacity: 1; }

/* ---------- 返回顶部 ---------- */
.back-to-top {
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease !important;
}
.back-to-top:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -6px rgba(102, 126, 234, 0.6);
}

/* ---------- 表单数字对齐 ---------- */
.price-cell,
.price-value,
.order-item-price,
.domain-price,
.stats-badge { font-variant-numeric: tabular-nums; }

/* ---------- 动效降级 ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  body::before, body::after { display: none; }
}

/* ============================================================
   v2.0 —— 官方大气视觉升级
   ============================================================ */

/* ---------- 深蓝官方渐变背景（替换基础灰渐变） ---------- */
html, body {
  background:
    radial-gradient(1100px 520px at 85% -10%, rgba(34, 211, 238, 0.13), transparent 62%),
    radial-gradient(1000px 560px at -10% 28%, rgba(118, 75, 162, 0.28), transparent 62%),
    linear-gradient(160deg, #0b1026 0%, #101a3a 48%, #181233 100%);
}
@media (min-width: 769px) {
  html, body { background-attachment: fixed; }
}

/* ---------- 导航栏：顶部品牌三色条 + 渐变盾标 ---------- */
.navbar::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #667eea 0%, #22d3ee 50%, #764ba2 100%);
  z-index: 1;
}
.navbar-brand i {
  background: linear-gradient(135deg, #667eea, #22d3ee);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- 官方徽章 ---------- */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  margin-bottom: 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #dbe4ff;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  box-shadow: 0 4px 18px rgba(2, 6, 23, 0.25), inset 0 0 14px rgba(102, 126, 234, 0.14);
  animation: m-rise 0.55s ease both;
}
.hero-badge i { color: #67e8f9; font-size: 14px; letter-spacing: 0; }
.hero-badge-dot {
  width: 7px; height: 7px;
  flex: none;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.22);
  animation: m-pulse 2.2s ease-in-out infinite;
}
@keyframes m-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
/* 浅色卡片内使用的徽章变体 */
.hero-badge.hero-badge--light {
  background: rgba(102, 126, 234, 0.08);
  border-color: rgba(102, 126, 234, 0.28);
  color: #5a67d8;
  box-shadow: 0 2px 10px rgba(102, 126, 234, 0.10);
}
.hero-badge.hero-badge--light i { color: #667eea; }

/* ---------- 数据亮点条 ---------- */
.hero-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(12px, 2vw, 22px);
  margin-top: 30px;
}
.hero-stat {
  min-width: 158px;
  padding: 16px 26px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.hero-stat:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(103, 232, 249, 0.4);
}
.hero-stat-value {
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 800;
  background: linear-gradient(90deg, #ffffff, #a5b4fc);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
.hero-stat-label {
  margin-top: 5px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: 0.06em;
}
@media (max-width: 640px) {
  .hero-stat { min-width: 0; flex: 1 1 42%; padding: 12px 14px; }
}

/* ---------- 区块标题：渐变强调条 ---------- */
.result-title::before,
.panel-title::before,
.filter-title::before,
.search-form-title::before,
.results-title::before {
  content: "";
  flex: none;
  width: 4px;
  height: 1.15em;
  border-radius: 2px;
  background: linear-gradient(180deg, #667eea, #22d3ee);
}

/* ---------- 页脚信任条 ---------- */
.footer-trust {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(14px, 3vw, 42px);
  margin-bottom: 20px;
}
.footer-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  letter-spacing: 0.05em;
  transition: color 0.2s ease;
}
.footer-trust-item:hover { color: #fff; }
.footer-trust-item i { color: #67e8f9; font-size: 15px; }
.footer-links {
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.footer a:not(.footer-link) {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer a:not(.footer-link):hover { color: #67e8f9; }

/* ---------- 深色背景下的面包屑 ---------- */
.breadcrumb-section { border-bottom-color: rgba(255, 255, 255, 0.14); }
.breadcrumb, .breadcrumb-item { color: rgba(255, 255, 255, 0.72); }
.breadcrumb-item:hover { color: #67e8f9; }
.breadcrumb-separator { color: rgba(255, 255, 255, 0.3); }
.breadcrumb-current { color: #fff; }

/* ---------- 文章列表/详情卡片增强 ---------- */
.article-list-container,
.article-main,
.sidebar-card {
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(2, 6, 23, 0.35);
}
.list-title::after {
  content: "";
  display: block;
  width: 56px; height: 4px;
  margin: 12px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, #667eea, #22d3ee);
}
.article-item { border-radius: 12px; }
.article-item:hover {
  border-color: rgba(102, 126, 234, 0.55);
  background: #f8faff;
  box-shadow: 0 8px 22px rgba(102, 126, 234, 0.12);
}
.item-title { transition: color 0.2s ease; }
.article-item:hover .item-title { color: #5a67d8; }
.page-btn { border-radius: 10px; }
.page-btn:hover { border-color: #667eea; color: #667eea; }
.page-btn.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: transparent;
  box-shadow: 0 6px 16px -4px rgba(102, 126, 234, 0.55);
}

/* ---------- 卡片统一官方质感（各页白卡） ---------- */
.filter-card,
.domain-table-container,
.purchase-sidebar,
.order-query-container,
.query-panel,
.results-panel {
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(2, 6, 23, 0.28);
}

/* ---------- layui 表格表头 ---------- */
.layui-table thead th {
  background: linear-gradient(180deg, #f8faff, #f1f4fd);
  color: #374151;
}
.layui-table tbody tr:hover,
.layui-table-hover { background-color: #f6f8ff !important; }

/* ---------- 客服页引用块 ---------- */
.search-card .layui-elem-quote,
.article-main .layui-elem-quote {
  border-radius: 12px;
  border: 1px solid #eef1f8;
  border-left: 4px solid #667eea;
  background: #f8faff;
}

/* ---------- 网安页 iframe 容器 ---------- */
.iframe-wrapper {
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(2, 6, 23, 0.4);
}

/* ---------- 移动端微调 ---------- */
@media (max-width: 640px) {
  .hero-badge { font-size: 12px; padding: 7px 14px; letter-spacing: 0.08em; }
  .footer-trust { gap: 12px 18px; }
}