/* ========================================
   域名注册页 —— 浅色蓝主题（与 New 站点一致）
   类名/布局/显隐逻辑沿用原版，仅改外观；直角风
   ======================================== */
:root {
  --d-primary: #2563eb;
  --d-primary-dark: #1d4ed8;
  --d-heading: #0b1f4d;
  --d-text: #5f6b7e;
  --d-muted: #8a98a8;
  --d-border: #e6e9ef;
  --d-soft: #f5f8fc;
  --d-available: #16a34a;
  --d-taken: #ef4444;
  --d-premium: #f59e0b;
}

/* ===== Hero（蓝渐变 + 底部波浪，导航透明压其上）===== */
.domain-hero {
  position: relative;
  padding: 106px 20px 56px;
  overflow: hidden;
  background: linear-gradient(to bottom, #021B79 0%, #0575E6 100%);
}
.domain-hero-wrapper {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1200px; margin: 0 auto; gap: 60px; position: relative; z-index: 10;
}
.domain-hero-content { flex: 1; max-width: 600px; text-align: left; animation: domainSlideInLeft .8s ease-out forwards; opacity: 0; }
.domain-hero-image { flex: 0 0 480px; max-width: 480px; animation: domainSlideInRight .8s ease-out .2s forwards; opacity: 0; }
.domain-hero-image img { width: 100%; height: auto; display: block; filter: drop-shadow(0 20px 40px rgba(0,10,40,.35)); animation: glbFloat 6s ease-in-out infinite; }
@keyframes domainSlideInLeft { from{opacity:0;transform:translateX(-40px)} to{opacity:1;transform:translateX(0)} }
@keyframes domainSlideInRight { from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} }

/* 装饰光晕 + 底部波浪 */
.domain-hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.domain-hero-orb { position: absolute; border-radius: 50%; filter: blur(80px); animation: domainFloat 20s ease-in-out infinite; }
.domain-hero-orb-1 { width: 460px; height: 460px; background: radial-gradient(circle, rgba(126,176,255,.4) 0%, transparent 70%); top: -150px; left: -100px; }
.domain-hero-orb-2 { width: 380px; height: 380px; background: radial-gradient(circle, rgba(53,209,178,.28) 0%, transparent 70%); bottom: -80px; right: -50px; animation-delay: -7s; }
.domain-hero-orb-3 { width: 240px; height: 240px; background: radial-gradient(circle, rgba(255,210,74,.22) 0%, transparent 70%); top: 28%; right: 16%; animation-delay: -14s; }
@keyframes domainFloat { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(30px,-30px) scale(1.05)} 66%{transform:translate(-20px,20px) scale(.95)} }
.domain-hero-grid { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 80px 80px; mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, black 70%, transparent 100%); }
.domain-hero .creative-shape { position: absolute; bottom: -1px; left: 0; width: 100%; z-index: 5; pointer-events: none; }
.domain-hero .creative-shape img { width: 100%; display: block; }

.domain-hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); font-size: 13px; color: #dbe7ff; font-weight: 600; margin-bottom: 22px; }
.domain-hero-badge-dot { width: 8px; height: 8px; background: #5ef0c0; border-radius: 50%; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }
.domain-hero-title { font-size: clamp(32px,5vw,46px); font-weight: 700; line-height: 1.2; margin-bottom: 16px; color: #fff; }
.domain-hero-title .gradient-text { color: #ffd24a; }
.domain-hero-desc { font-size: 16px; color: rgba(255,255,255,.85); line-height: 1.7; margin-bottom: 34px; max-width: 540px; }

/* ===== 搜索框 ===== */
.domain-search-container { text-align: left; }
.domain-search-box { display: flex; max-width: 640px; width: 100%; background: #fff; border: 1px solid #fff; box-shadow: 0 18px 44px rgba(0,12,40,.25); overflow: hidden; }
.domain-search-icon { display: flex; align-items: center; justify-content: center; padding: 0 18px; color: var(--d-muted); }
.domain-search-icon svg { width: 22px; height: 22px; }
.domain-search-input { flex: 1; padding: 18px 0; font-size: 16px; color: var(--d-heading); background: transparent; border: none; outline: none; }
.domain-search-input::placeholder { color: var(--d-muted); }
.domain-search-btn { padding: 18px 34px; background: linear-gradient(135deg, var(--d-primary), var(--d-primary-dark)); color: #fff; font-size: 15px; font-weight: 700; border: none; cursor: pointer; transition: .25s; white-space: nowrap; }
.domain-search-btn:hover { filter: brightness(1.06); }
.domain-search-btn:disabled { opacity: .6; cursor: not-allowed; }

.domain-warning-notice { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 9px 16px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,210,74,.45); color: #ffe08a; font-size: 13px; }
.domain-warning-notice svg { width: 16px; height: 16px; flex-shrink: 0; stroke: #ffd24a; }

.domain-popular-suffixes { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.domain-suffix-chip { padding: 7px 15px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); font-size: 14px; color: #dbe7ff; cursor: pointer; transition: .25s; }
.domain-suffix-chip:hover, .domain-suffix-chip.selected { background: #fff; border-color: #fff; color: var(--d-primary); font-weight: 600; }

/* ===== 搜索结果 ===== */
.domain-results-section { padding: 60px 20px; background: var(--d-soft); display: none; }
.domain-results-section.visible { display: block; animation: cardFadeIn .5s ease-out; }
.domain-results-container { max-width: 1200px; margin: 0 auto; }
.domain-results-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.domain-results-title { font-size: 24px; font-weight: 700; color: var(--d-heading); }
.domain-results-title span { color: var(--d-primary); }
.domain-results-count { font-size: 14px; color: var(--d-muted); }
.domain-results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }

/* 结果卡片 */
.domain-card { position: relative; background: #fff; border: 1px solid var(--d-border); padding: 24px; transition: .3s; overflow: hidden; animation: cardFadeIn .4s ease-out both; }
.domain-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--d-primary), var(--d-primary-dark)); opacity: 0; transition: .3s; }
.domain-card:hover { border-color: #cdd9f5; transform: translateY(-4px); box-shadow: 0 16px 38px rgba(20,40,80,.12); }
.domain-card:hover::before { opacity: 1; }
.domain-card.available { border-left: 4px solid var(--d-available); }
.domain-card.taken { border-left: 4px solid var(--d-taken); }
.domain-card.premium { border-left: 4px solid var(--d-premium); }
.domain-card.error { border-left: 4px solid #9aa6b4; opacity: .85; }
.domain-card-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.domain-card-name { font-size: 20px; font-weight: 700; color: var(--d-heading); word-break: break-all; margin-bottom: 16px; }
.domain-card-suffix { color: var(--d-primary); }
.domain-status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.domain-status-badge.available { background: rgba(22,163,74,.12); color: var(--d-available); }
.domain-status-badge.taken { background: rgba(239,68,68,.12); color: var(--d-taken); }
.domain-status-badge.premium { background: rgba(245,158,11,.12); color: var(--d-premium); }
.domain-status-badge.error { background: rgba(154,166,180,.15); color: #6b7686; }
.domain-status-badge svg { width: 14px; height: 14px; }
.domain-card-top { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 12px; }
.domain-hot-badge { padding: 4px 10px; background: linear-gradient(135deg, #ff6a3d, #ef3e36); color: #fff; font-size: 10px; font-weight: 700; text-transform: uppercase; margin-right: auto; }
.domain-card-body { margin-bottom: 20px; }
.domain-price-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.domain-price { font-size: 28px; font-weight: 800; color: var(--d-primary); }
.domain-price-period { font-size: 14px; color: var(--d-muted); }
.domain-renew-price { font-size: 13px; color: var(--d-muted); }
.domain-card-actions { display: flex; gap: 10px; }
.domain-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; transition: .25s; border: none; }
.domain-btn-primary { background: linear-gradient(135deg, var(--d-primary), var(--d-primary-dark)); color: #fff; }
.domain-btn-primary:hover { transform: translateY(-2px); color: #fff; }
.domain-btn-primary:active { transform: scale(.98); }
.domain-btn-secondary { background: var(--d-soft); color: var(--d-text); border: 1px solid var(--d-border); }
.domain-btn-secondary:hover { background: #eaf0fb; color: var(--d-primary); }
.domain-btn svg { width: 16px; height: 16px; }

/* 加载骨架 */
.domain-card-skeleton { background: #fff; border: 1px solid var(--d-border); padding: 24px; }
.skeleton-line { height: 20px; background: linear-gradient(90deg, #eef2f8 25%, #e2e8f3 50%, #eef2f8 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; margin-bottom: 12px; }
.skeleton-line.short { width: 60%; }
.skeleton-line.medium { width: 80%; }
.skeleton-line.button { height: 44px; margin-top: 8px; margin-bottom: 0; }
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }

/* ===== TLD 后缀网格 ===== */
.domain-tld-section { padding: 76px 20px; background: #fff; position: relative; }
.domain-tld-container { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
.domain-section-header { text-align: center; margin-bottom: 44px; }
.domain-section-header h2 { font-size: 32px; font-weight: 700; color: var(--d-heading); margin-bottom: 12px; }
.domain-section-header p { font-size: 16px; color: var(--d-muted); }
.domain-tld-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 38px; }
.domain-tld-tab { padding: 10px 24px; font-size: 14px; font-weight: 600; color: var(--d-heading); background: #fff; border: 1px solid var(--d-border); cursor: pointer; transition: .25s; }
.domain-tld-tab:hover { border-color: #cdd9f5; }
.domain-tld-tab.active { background: var(--d-primary); border-color: var(--d-primary); color: #fff; }
.domain-tld-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.domain-tld-card { position: relative; background: #fff; border: 1px solid var(--d-border); padding: 12px 16px 16px; text-align: center; cursor: pointer; transition: .25s; }
.domain-tld-card:hover { border-color: #cdd9f5; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(20,40,80,.1); }
.domain-tld-card.selected { background: #f3f7ff; border-color: var(--d-primary); }
.domain-tld-top { display: flex; align-items: center; justify-content: space-between; min-height: 20px; margin-bottom: 8px; }
.domain-tld-check { width: 20px; height: 20px; border: 2px solid var(--d-border); border-radius: 50%; flex-shrink: 0; transition: .25s; }
.domain-tld-card:hover .domain-tld-check { border-color: var(--d-primary); }
.domain-tld-card.selected .domain-tld-check { background: var(--d-primary); border-color: transparent; position: relative; }
.domain-tld-card.selected .domain-tld-check::after { content: '\2713'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; font-size: 12px; font-weight: bold; }
.domain-tld-name { font-size: 22px; font-weight: 700; color: var(--d-heading); margin-bottom: 8px; }
.domain-tld-price { font-size: 14px; color: var(--d-primary); font-weight: 600; }
.domain-tld-renew { font-size: 11px; color: var(--d-muted); margin-top: 4px; }
.domain-tld-badge { padding: 3px 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.domain-tld-badge.hot { background: linear-gradient(135deg, #ff6a3d, #ef3e36); color: #fff; }
.domain-tld-badge.new { background: linear-gradient(135deg, #16a34a, #059669); color: #fff; }
.domain-tld-controls { display: flex; justify-content: center; gap: 16px; margin: 0 0 26px; }
.domain-tld-control-btn { padding: 10px 24px; font-size: 14px; color: var(--d-text); background: #fff; border: 1px solid var(--d-border); cursor: pointer; transition: .25s; }
.domain-tld-control-btn:hover { color: var(--d-primary); border-color: var(--d-primary); }

/* ===== 域名服务 ===== */
.domain-services-section { padding: 76px 20px; background: var(--d-soft); }
.domain-services-container { max-width: 1200px; margin: 0 auto; }
.domain-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.domain-service-card { background: #fff; border: 1px solid var(--d-border); padding: 32px; transition: .3s; }
.domain-service-card:hover { border-color: #cdd9f5; transform: translateY(-4px); box-shadow: 0 16px 38px rgba(20,40,80,.1); }
.domain-service-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; color: #fff; }
.domain-service-icon svg { width: 28px; height: 28px; }
.domain-service-icon.transfer { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.domain-service-icon.whois { background: linear-gradient(135deg, #1f2b4d, #0b1f4d); }
.domain-service-icon.dns { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.domain-service-icon.privacy { background: linear-gradient(135deg, #0ea5a0, #0e7490); }
.domain-service-title { font-size: 18px; font-weight: 600; color: var(--d-heading); margin-bottom: 10px; }
.domain-service-desc { font-size: 14px; color: var(--d-muted); line-height: 1.7; }

/* ===== FAQ ===== */
.domain-faq-section { padding: 76px 20px; background: #fff; }
.domain-faq-container { max-width: 800px; margin: 0 auto; }
.domain-faq-item { background: #fff; border: 1px solid var(--d-border); margin-bottom: 12px; overflow: hidden; transition: .25s; }
.domain-faq-item:hover { border-color: #cdd9f5; }
.domain-faq-question { width: 100%; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; background: transparent; border: none; color: var(--d-heading); font-size: 16px; font-weight: 600; text-align: left; cursor: pointer; }
.domain-faq-question svg { width: 20px; height: 20px; color: var(--d-muted); transition: transform .3s ease; }
.domain-faq-item.active .domain-faq-question svg { transform: rotate(180deg); }
.domain-faq-item.active .domain-faq-question { color: var(--d-primary); }
.domain-faq-answer { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.domain-faq-item.active .domain-faq-answer { max-height: 240px; }
.domain-faq-answer-content { padding: 0 24px 20px; font-size: 14px; color: var(--d-text); line-height: 1.8; }

/* ===== 卡片入场动画 ===== */
.domain-card:nth-child(1){animation-delay:0s} .domain-card:nth-child(2){animation-delay:.05s}
.domain-card:nth-child(3){animation-delay:.1s} .domain-card:nth-child(4){animation-delay:.15s}
.domain-card:nth-child(5){animation-delay:.2s} .domain-card:nth-child(6){animation-delay:.25s}
.domain-card:nth-child(7){animation-delay:.3s} .domain-card:nth-child(8){animation-delay:.35s}
@keyframes cardFadeIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

/* ===== 响应式 ===== */
@media (max-width: 968px) {
  .domain-hero-wrapper { flex-direction: column-reverse; text-align: center; gap: 36px; }
  .domain-hero-content { max-width: 100%; text-align: center; }
  .domain-hero-image { flex: none; max-width: 300px; }
  .domain-search-container { text-align: center; }
  .domain-search-box { margin: 0 auto; }
  .domain-popular-suffixes, .domain-warning-notice { justify-content: center; }
  .domain-popular-suffixes { justify-content: center; }
}
@media (max-width: 768px) {
  .domain-hero { padding: 100px 16px 70px; }
  .domain-hero-title { font-size: 28px; }
  .domain-search-box { flex-direction: column; }
  .domain-search-icon { display: none; }
  .domain-search-input { padding: 15px 16px; text-align: center; }
  .domain-search-btn { padding: 15px; }
  .domain-results-grid { grid-template-columns: 1fr; gap: 16px; }
  .domain-card { padding: 20px; }
  .domain-price { font-size: 24px; }
  .domain-tld-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .domain-tld-tab { padding: 8px 16px; font-size: 13px; }
  .domain-services-grid { grid-template-columns: 1fr; }
  .domain-section-header h2 { font-size: 24px; }
}
@media (max-width: 480px) {
  .domain-hero-desc { font-size: 14px; }
  .domain-tld-grid { grid-template-columns: repeat(2, 1fr); }
  .domain-card-name { font-size: 18px; }
}