/* ======================================================
   鲸域 Swap - 全局样式 (深色科技风 + 蓝紫霓虹)
   ====================================================== */

:root {
  --color-bg-base: #050610;
  --color-bg-elevated: #0b0d1a;
  --color-bg-panel: #12152a;
  --color-bg-card: #1a1e3a;
  --color-border: rgba(99, 126, 255, 0.15);
  --color-border-hover: rgba(99, 126, 255, 0.35);
  --color-text-primary: #ffffff;
  --color-text-secondary: #9ba3c7;
  --color-text-muted: #5e6690;
  --color-green: #00ff88;
  --color-red: #ff3b5c;
  --color-blue: #3b82f6;
  --color-purple: #a855f7;
  --color-cyan: #00e5ff;
  --color-yellow: #ffcc00;

  --shadow-glow-blue: 0 0 20px rgba(59, 130, 246, 0.35);
  --shadow-glow-purple: 0 0 20px rgba(168, 85, 247, 0.35);
  --shadow-glow-green: 0 0 16px rgba(0, 255, 136, 0.35);
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.4);
}

* {
  box-sizing: border-box;
}

html,
body {
  background: var(--color-bg-base);
  color: var(--color-text-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
}

/* 全局背景光晕 */
body::before {
  content: '';
  position: fixed;
  top: -20%;
  left: -10%;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

body::after {
  content: '';
  position: fixed;
  bottom: -20%;
  right: -10%;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.12) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

main,
.page-root {
  position: relative;
  z-index: 1;
}

/* ========== 滚动条 ========== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #0b0d1a;
}
::-webkit-scrollbar-thumb {
  background: #2f3660;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #4a5280;
}

/* ========== 数字等宽字体 ========== */
.font-mono,
.num,
.hash {
  font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

/* ========== 通用卡片 ========== */
.card {
  background: linear-gradient(135deg, rgba(26, 30, 58, 0.6) 0%, rgba(18, 21, 42, 0.8) 100%);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.card-hover {
  transition: all 0.2s ease;
}
.card-hover:hover {
  border-color: var(--color-border-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}

/* ========== 按钮 ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.25rem;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid transparent;
  white-space: nowrap;
  user-select: none;
}
.btn-primary {
  background: linear-gradient(135deg, #00c764 0%, #00ff88 100%);
  color: #052e1a;
  border: none;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(0, 255, 136, 0.28);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 255, 136, 0.45);
}
.btn-secondary {
  background: rgba(0, 255, 136, 0.08);
  color: #00c764;
  border: 1px solid rgba(0, 255, 136, 0.3);
}
.btn-secondary:hover {
  background: rgba(0, 255, 136, 0.14);
  border-color: rgba(0, 255, 136, 0.5);
  color: #00ff88;
}
.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
}
.btn-ghost:hover {
  background: rgba(99, 126, 255, 0.1);
  color: #fff;
}
.btn-success {
  background: linear-gradient(135deg, #00c764 0%, #00ff88 100%);
  color: #001f10;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(0, 255, 136, 0.35);
}
.btn-success:hover {
  box-shadow: 0 6px 20px rgba(0, 255, 136, 0.55);
}
.btn-danger {
  background: linear-gradient(135deg, #ff3b5c 0%, #ff6b6b 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(255, 59, 92, 0.35);
}

/* ========== 输入框 ========== */
.input {
  background: rgba(11, 13, 26, 0.6);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: #fff;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  transition: all 0.15s ease;
  width: 100%;
  outline: none;
}
.input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.input::placeholder {
  color: var(--color-text-muted);
}

/* ========== 标签/徽章 ========== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25rem;
}
.badge-green {
  background: rgba(0, 255, 136, 0.12);
  color: #00ff88;
  border: 1px solid rgba(0, 255, 136, 0.3);
}
.badge-red {
  background: rgba(255, 59, 92, 0.12);
  color: #ff3b5c;
  border: 1px solid rgba(255, 59, 92, 0.3);
}
.badge-blue {
  background: rgba(59, 130, 246, 0.12);
  color: #8ec9ff;
  border: 1px solid rgba(59, 130, 246, 0.3);
}
.badge-purple {
  /* 改为绿色品牌系, 保留类名兼容性 */
  background: rgba(0, 255, 136, 0.12);
  color: #00ff88;
  border: 1px solid rgba(0, 255, 136, 0.3);
}
.badge-yellow {
  background: rgba(255, 204, 0, 0.12);
  color: #ffcc00;
  border: 1px solid rgba(255, 204, 0, 0.3);
}
.badge-gray {
  background: rgba(99, 126, 255, 0.08);
  color: #9ba3c7;
  border: 1px solid rgba(99, 126, 255, 0.2);
}

/* ========== 涨跌颜色 ========== */
.text-up,
.price-up {
  color: #00ff88 !important;
}
.text-down,
.price-down {
  color: #ff3b5c !important;
}

/* ========== 代币 Logo(真实图标 + 占位)========== */
.token-logo {
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(37, 42, 74, 0.6), rgba(18, 21, 42, 0.6));
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  transition: transform 0.2s ease;
}
.token-logo:hover {
  transform: scale(1.08);
}
.token-logo-fb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #2f3660 0%, #12152a 100%);
  color: #55aeff;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(85, 174, 255, 0.15);
}

/* 代币 Logo 与链徽章叠加(小链标在右下角)*/
.token-logo-stack {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}
.token-logo-stack .chain-icon {
  position: absolute;
  right: -2px;
  bottom: -2px;
  border: 2px solid #0b0d1a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* ========== 链图标 ========== */
.chain-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  font-size: 0.625rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.chain-bsc {
  background: linear-gradient(135deg, #f3ba2f 0%, #f0b90b 100%);
  color: #000;
}
.chain-sol {
  background: linear-gradient(135deg, #9945ff 0%, #14f195 100%);
}
.chain-base {
  background: linear-gradient(135deg, #0052ff 0%, #0066ff 100%);
}
.chain-eni {
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
}
.chain-eth {
  background: linear-gradient(135deg, #627eea 0%, #3c3c3d 100%);
}
.chain-trx {
  background: linear-gradient(135deg, #ff0013 0%, #ef0027 100%);
}
.chain-polygon {
  background: linear-gradient(135deg, #8247e5 0%, #7c3aed 100%);
}
.chain-arb {
  background: linear-gradient(135deg, #28a0f0 0%, #213147 100%);
}

/* ========== 荧光光晕 ========== */
.glow-blue {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
}
.glow-purple {
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
}
.glow-green {
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.4);
}

/* ========== 动画 ========== */
@keyframes glow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes shimmer {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

.shimmer {
  background: linear-gradient(90deg,
    rgba(99, 126, 255, 0.05) 0%,
    rgba(99, 126, 255, 0.15) 50%,
    rgba(99, 126, 255, 0.05) 100%);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
}

/* ========== 表格 ========== */
.data-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table thead th {
  background: rgba(18, 21, 42, 0.6);
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.data-table tbody tr {
  border-bottom: 1px solid rgba(99, 126, 255, 0.08);
  transition: background 0.15s ease;
}
.data-table tbody tr:hover {
  background: rgba(59, 130, 246, 0.06);
}
.data-table tbody td {
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  vertical-align: middle;
}

/* ========== 渐变文字 ========== */
.gradient-text {
  background: linear-gradient(135deg, #00c764 0%, #00ff88 50%, #00e5ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-green {
  background: linear-gradient(135deg, #00ff88 0%, #00e5ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ========== 顶部导航 ========== */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11, 13, 26, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--color-border);
}

.nav-link {
  color: var(--color-text-secondary);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.875rem;
  transition: all 0.15s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.nav-link:hover {
  color: #fff;
  background: rgba(59, 130, 246, 0.08);
}
.nav-link.active {
  color: #fff;
  background: rgba(59, 130, 246, 0.15);
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.3);
}

/* ========== Logo ========== */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  font-size: 1.25rem;
  text-decoration: none;
  color: #fff;
}
.logo-mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #00c764 0%, #00ff88 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 16px rgba(0, 255, 136, 0.45);
  position: relative;
}
.logo-mark::before {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 6px;
  background: linear-gradient(135deg, #0a1a12 0%, #050f0a 100%);
}
.logo-mark span {
  position: relative;
  font-weight: 900;
  font-size: 1rem;
  background: linear-gradient(135deg, #00c764 0%, #00ff88 50%, #00e5ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ========== 骨架屏 ========== */
.skeleton {
  background: linear-gradient(90deg,
    rgba(99, 126, 255, 0.04) 0%,
    rgba(99, 126, 255, 0.1) 50%,
    rgba(99, 126, 255, 0.04) 100%);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
  border-radius: 4px;
}

/* ========== 工具类 ========== */
.divider-v {
  width: 1px;
  background: var(--color-border);
}
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ========== Swap 面板特殊样式 ========== */
.swap-panel {
  background: linear-gradient(135deg, rgba(26, 30, 58, 0.95) 0%, rgba(18, 21, 42, 0.95) 100%);
  border: 1px solid rgba(99, 126, 255, 0.2);
  border-radius: 16px;
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.swap-token-input {
  background: rgba(11, 13, 26, 0.6);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1rem;
  transition: all 0.15s ease;
}
.swap-token-input:focus-within {
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.swap-token-select {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(99, 126, 255, 0.1);
  border: 1px solid rgba(99, 126, 255, 0.2);
  border-radius: 10px;
  padding: 0.5rem 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.swap-token-select:hover {
  background: rgba(99, 126, 255, 0.15);
  border-color: rgba(99, 126, 255, 0.35);
}

/* ========== 风险标签 ========== */
.risk-safe {
  background: rgba(0, 255, 136, 0.1);
  color: #00ff88;
  border-left: 3px solid #00ff88;
}
.risk-warn {
  background: rgba(255, 204, 0, 0.1);
  color: #ffcc00;
  border-left: 3px solid #ffcc00;
}
.risk-danger {
  background: rgba(255, 59, 92, 0.1);
  color: #ff3b5c;
  border-left: 3px solid #ff3b5c;
}

/* ========== 响应式 ========== */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  .data-table thead th,
  .data-table tbody td {
    padding: 0.625rem 0.5rem;
    font-size: 0.75rem;
  }
}
@media (min-width: 769px) {
  .show-mobile { display: none !important; }
}

/* ========== 模态框 ========== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}
.modal-content {
  background: linear-gradient(135deg, #1a1e3a 0%, #12152a 100%);
  border: 1px solid rgba(99, 126, 255, 0.2);
  border-radius: 16px;
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}

/* ========== Toast ========== */
.toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}
.toast {
  background: rgba(26, 30, 58, 0.95);
  backdrop-filter: blur(12px);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0.875rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 280px;
  max-width: 360px;
  pointer-events: auto;
  animation: toast-in 0.3s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.toast-success { border-left: 3px solid #00ff88; }
.toast-error { border-left: 3px solid #ff3b5c; }
.toast-warn { border-left: 3px solid #ffcc00; }
.toast-info { border-left: 3px solid #3b82f6; }

@keyframes toast-in {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ========== 小组件 ========== */
.dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  vertical-align: middle;
}
.dot-live {
  background: #00ff88;
  box-shadow: 0 0 8px #00ff88;
  animation: glow 1.5s ease-in-out infinite;
}
.dot-offline {
  background: #5e6690;
}

/* ============================================================
   白天模式 (Light Theme) — 通过 [data-theme="light"] 切换
   ============================================================ */
html[data-theme="light"] {
  --color-bg-base: #f7f9fc;
  --color-bg-elevated: #ffffff;
  --color-bg-panel: #ffffff;
  --color-bg-card: #ffffff;
  --color-border: rgba(15, 23, 42, 0.08);
  --color-border-hover: rgba(59, 130, 246, 0.35);
  --color-text-primary: #0f172a;
  --color-text-secondary: #475569;
  --color-text-muted: #94a3b8;
  --color-green: #059669;
  --color-red: #dc2626;
  --shadow-card: 0 8px 32px rgba(15, 23, 42, 0.08);
  color-scheme: light;
}

/* 光晕柔化 */
html[data-theme="light"] body::before {
  background: radial-gradient(circle, rgba(59, 130, 246, 0.05) 0%, transparent 60%);
}
html[data-theme="light"] body::after {
  background: radial-gradient(circle, rgba(168, 85, 247, 0.04) 0%, transparent 60%);
}

/* 覆盖所有 Tailwind 硬编码色 */
html[data-theme="light"] .bg-deep-950 { background-color: #f7f9fc !important; }
html[data-theme="light"] .bg-deep-900,
html[data-theme="light"] .bg-deep-900\/80,
html[data-theme="light"] .bg-deep-900\/60,
html[data-theme="light"] .bg-deep-900\/95 { background-color: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(20px); }
html[data-theme="light"] .bg-deep-800,
html[data-theme="light"] .bg-deep-800\/60,
html[data-theme="light"] .bg-deep-800\/50 { background-color: #eef2f8 !important; }
html[data-theme="light"] .bg-deep-700,
html[data-theme="light"] .bg-deep-700\/60 { background-color: #e5eaf2 !important; }
html[data-theme="light"] .bg-deep-600,
html[data-theme="light"] .bg-deep-600\/60 { background-color: #d8dfea !important; }

/* 白天模式文字 — 提升对比度 (WCAG AA ≥ 4.5:1) */
html[data-theme="light"] .text-gray-100 { color: #0b1220 !important; }
html[data-theme="light"] .text-gray-200 { color: #111827 !important; }
html[data-theme="light"] .text-gray-300 { color: #1f2937 !important; }
html[data-theme="light"] .text-gray-400 { color: #374151 !important; }   /* 从 #64748b 加深 */
html[data-theme="light"] .text-gray-500 { color: #4b5563 !important; }   /* 从 #94a3b8 加深 */
html[data-theme="light"] .text-gray-600 { color: #6b7280 !important; }   /* 从 #cbd5e1 大幅加深 (原来几乎看不见) */
html[data-theme="light"] .text-white { color: #0b1220 !important; }

/* 白天模式下彩色文字 — 把深色背景上的浅色调换成浅色背景上的深色 */
html[data-theme="light"] .text-blue-300  { color: #1d4ed8 !important; }
html[data-theme="light"] .text-blue-400  { color: #1e40af !important; }
html[data-theme="light"] .text-green-300 { color: #047857 !important; }
html[data-theme="light"] .text-green-400 { color: #059669 !important; }
html[data-theme="light"] .text-purple-300,
html[data-theme="light"] .text-purple-400 { color: #047857 !important; } /* 紫色也改绿色 (品牌大绿) */
html[data-theme="light"] .text-cyan-300  { color: #0891b2 !important; }
html[data-theme="light"] .text-cyan-400  { color: #0e7490 !important; }
html[data-theme="light"] .text-yellow-200,
html[data-theme="light"] .text-yellow-300 { color: #a16207 !important; }
html[data-theme="light"] .text-yellow-400 { color: #854d0e !important; }
html[data-theme="light"] .text-red-300,
html[data-theme="light"] .text-red-400   { color: #b91c1c !important; }

/* 白天模式：半透明彩色背景在白底上基本看不见，改成浅色实底 */
html[data-theme="light"] .bg-blue-500\/10   { background-color: rgba(29, 78, 216, 0.08) !important; }
html[data-theme="light"] .bg-blue-500\/20   { background-color: rgba(29, 78, 216, 0.12) !important; }
html[data-theme="light"] .bg-purple-500\/10,
html[data-theme="light"] .bg-green-500\/10  { background-color: rgba(5, 150, 105, 0.08) !important; }
html[data-theme="light"] .bg-purple-500\/20,
html[data-theme="light"] .bg-green-500\/20  { background-color: rgba(5, 150, 105, 0.14) !important; }
html[data-theme="light"] .bg-cyan-500\/10   { background-color: rgba(8, 145, 178, 0.08) !important; }
html[data-theme="light"] .bg-cyan-500\/20   { background-color: rgba(8, 145, 178, 0.14) !important; }

/* 半透明彩色边框同样处理 */
html[data-theme="light"] .border-blue-500\/20,
html[data-theme="light"] .border-blue-500\/30   { border-color: rgba(29, 78, 216, 0.25) !important; }
html[data-theme="light"] .border-purple-500\/20,
html[data-theme="light"] .border-purple-500\/30,
html[data-theme="light"] .border-green-500\/20,
html[data-theme="light"] .border-green-500\/30  { border-color: rgba(5, 150, 105, 0.28) !important; }
html[data-theme="light"] .border-cyan-500\/20,
html[data-theme="light"] .border-cyan-500\/30   { border-color: rgba(8, 145, 178, 0.28) !important; }

/* 白天模式：from-/to- 渐变 stop 在白底下几乎透明，加深 */
html[data-theme="light"] .from-green-500\/10 { --tw-gradient-from: rgba(5, 150, 105, 0.10) !important; }
html[data-theme="light"] .from-green-500\/20 { --tw-gradient-from: rgba(5, 150, 105, 0.14) !important; }
html[data-theme="light"] .to-green-500\/5    { --tw-gradient-to: rgba(5, 150, 105, 0.04) !important; }
html[data-theme="light"] .to-green-500\/10   { --tw-gradient-to: rgba(5, 150, 105, 0.10) !important; }
html[data-theme="light"] .from-cyan-500\/10  { --tw-gradient-from: rgba(8, 145, 178, 0.10) !important; }
html[data-theme="light"] .to-cyan-500\/10    { --tw-gradient-to: rgba(8, 145, 178, 0.10) !important; }

/* 白天模式下 gradient-text 需要更深的颜色才可读 */
html[data-theme="light"] .gradient-text {
  background: linear-gradient(135deg, #059669 0%, #00a45c 50%, #0e7490 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Footer 在白天模式下特别加深 (截图里 Version V1.0 · Live 几乎看不见) */
html[data-theme="light"] footer,
html[data-theme="light"] .site-footer {
  color: #374151;
}
html[data-theme="light"] footer a,
html[data-theme="light"] .site-footer a {
  color: #4b5563;
}
html[data-theme="light"] footer a:hover,
html[data-theme="light"] .site-footer a:hover {
  color: #059669;
}

html[data-theme="light"] .border-deep-600,
html[data-theme="light"] .border-deep-600\/30,
html[data-theme="light"] .border-deep-600\/40,
html[data-theme="light"] .border-deep-600\/50 { border-color: rgba(15, 23, 42, 0.08) !important; }
html[data-theme="light"] .border-deep-700,
html[data-theme="light"] .border-deep-700\/50 { border-color: rgba(15, 23, 42, 0.1) !important; }

/* 卡片背景 */
html[data-theme="light"] .card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
html[data-theme="light"] .card-hover:hover {
  box-shadow: 0 8px 32px rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.25);
}

/* 导航栏 */
html[data-theme="light"] .navbar {
  background: rgba(255, 255, 255, 0.85) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
}
html[data-theme="light"] .nav-link { color: #475569 !important; }
html[data-theme="light"] .nav-link:hover { background: #eef2f8 !important; color: #0f172a !important; }
html[data-theme="light"] .nav-link.active {
  background: rgba(59, 130, 246, 0.1) !important;
  color: #2563eb !important;
}

/* 输入框 */
html[data-theme="light"] .input {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  color: #0f172a !important;
}
html[data-theme="light"] .input:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}
html[data-theme="light"] .input::placeholder { color: #94a3b8 !important; }

/* 表格 */
html[data-theme="light"] .data-table th {
  background: #f1f5f9 !important;
  color: #475569 !important;
}
html[data-theme="light"] .data-table tr:hover td {
  background: #f8fafc !important;
}
html[data-theme="light"] .data-table td {
  border-color: rgba(15, 23, 42, 0.06) !important;
}

/* 按钮ghost在白天 */
html[data-theme="light"] .btn-ghost { color: #475569; }
html[data-theme="light"] .btn-ghost:hover { background: #eef2f8; color: #0f172a; }

/* 徽章 */
html[data-theme="light"] .badge-gray {
  background: #e2e8f0 !important;
  color: #475569 !important;
}

/* 代币 Logo 占位符 */
html[data-theme="light"] .token-logo-fb {
  background: linear-gradient(135deg, #e0e7ef 0%, #f1f5f9 100%);
  color: #3b82f6;
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.1);
}
html[data-theme="light"] .token-logo {
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), inset 0 0 0 1px rgba(15, 23, 42, 0.04);
}

/* 链徽章在白天叠加的描边 */
html[data-theme="light"] .token-logo-stack .chain-icon {
  border-color: #ffffff;
}

/* 滚动条 */
html[data-theme="light"] ::-webkit-scrollbar-track { background: #f1f5f9; }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #cbd5e1; }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* 涨跌色在白天强化一点 */
html[data-theme="light"] .text-up { color: #059669 !important; }
html[data-theme="light"] .text-down { color: #dc2626 !important; }

/* Logo mark 背景 */
html[data-theme="light"] .logo-mark {
  background: linear-gradient(135deg, #00c764 0%, #00ff88 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 255, 136, 0.25);
}
html[data-theme="light"] .logo-mark::before {
  background: linear-gradient(135deg, #052e1a 0%, #0a3a22 100%);
}

/* ============================================================
   实时数据闪烁动画
   ============================================================ */
@keyframes flash-up {
  0% { background-color: transparent; }
  30% { background-color: rgba(0, 255, 136, 0.15); }
  100% { background-color: transparent; }
}
@keyframes flash-down {
  0% { background-color: transparent; }
  30% { background-color: rgba(255, 59, 92, 0.15); }
  100% { background-color: transparent; }
}
.flash-up { animation: flash-up 1.2s ease-out; }
.flash-down { animation: flash-down 1.2s ease-out; }

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}
.pulse-dot { animation: pulse-dot 1.8s ease-in-out infinite; }

/* Realtime 状态标记 */
.realtime-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  background: rgba(0, 255, 136, 0.1);
  color: #00ff88;
  border: 1px solid rgba(0, 255, 136, 0.25);
}
.realtime-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00ff88;
  box-shadow: 0 0 8px #00ff88;
  animation: pulse-dot 1.8s ease-in-out infinite;
}
html[data-theme="light"] .realtime-badge {
  background: rgba(5, 150, 105, 0.08);
  color: #059669;
  border-color: rgba(5, 150, 105, 0.2);
}
html[data-theme="light"] .realtime-badge::before {
  background: #059669;
  box-shadow: 0 0 8px rgba(5, 150, 105, 0.5);
}

/* ============================================================
   主题切换按钮
   ============================================================ */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(99, 126, 255, 0.08);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}
.theme-toggle:hover {
  background: rgba(99, 126, 255, 0.15);
  color: var(--color-text-primary);
  transform: translateY(-1px);
}
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: inline; }
html[data-theme="light"] .theme-toggle .icon-sun { display: inline; }
html[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* ============================================================
   移动端优化 (≤ 767px)
   ============================================================ */

/* 底部 Tab 导航栏(移动端) */
.mobile-tabbar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(58px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(11, 13, 26, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid rgba(99, 126, 255, 0.15);
  z-index: 100;
}
.mobile-tabbar-inner {
  display: flex;
  height: 58px;
  align-items: stretch;
  justify-content: space-around;
}
.mobile-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #5e6690;
  text-decoration: none;
  transition: color 0.15s ease;
  font-size: 10px;
  font-weight: 500;
  padding: 8px 4px 6px;
}
.mobile-tab i {
  font-size: 18px;
}
.mobile-tab.active {
  color: #55aeff;
}
.mobile-tab.active i {
  filter: drop-shadow(0 0 6px rgba(85, 174, 255, 0.5));
}
.mobile-tab-swap {
  position: relative;
}
.mobile-tab-swap .mobile-tab-swap-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00c764 0%, #00ff88 100%);
  color: #052e1a !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  margin-top: -20px;
  box-shadow: 0 4px 16px rgba(0, 255, 136, 0.45);
}
html[data-theme="light"] .mobile-tabbar {
  background: rgba(255, 255, 255, 0.95);
  border-top-color: rgba(15, 23, 42, 0.08);
}
html[data-theme="light"] .mobile-tab { color: #64748b; }
html[data-theme="light"] .mobile-tab.active { color: #2563eb; }

@media (max-width: 767px) {
  .mobile-tabbar { display: block; }
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  /* 隐藏顶部 PC 导航在移动端已经是 lg:flex 所以 OK */

  /* 容器边距紧凑 */
  .max-w-\[1600px\] { padding-left: 12px; padding-right: 12px; }

  /* 卡片圆角更大 */
  .card { border-radius: 16px; }

  /* 按钮手感 */
  .btn { padding: 0.75rem 1.25rem; font-size: 0.9rem; min-height: 44px; }

  /* 隐藏 pc-only 元素 */
  .pc-only { display: none !important; }

  /* 隐藏导航栏中搜索框和链状态(太挤)*/
  .navbar .nav-search,
  .navbar .nav-chain-status { display: none !important; }
}
@media (min-width: 768px) {
  .mobile-only { display: none !important; }
}

/* 移动端首页:卡片布局 */
.mkt-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: rgba(18, 21, 42, 0.5);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  transition: all 0.15s ease;
}
.mkt-card:active {
  background: rgba(26, 30, 58, 0.7);
  transform: scale(0.99);
}
.mkt-card-info { flex: 1; min-width: 0; }
.mkt-card-price { text-align: right; flex-shrink: 0; }
html[data-theme="light"] .mkt-card {
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
html[data-theme="light"] .mkt-card:active { background: #f1f5f9; }

/* 移动端下拉刷新 */
.ptr-container {
  position: relative;
  overflow-x: hidden;
}
.ptr-indicator {
  position: absolute;
  top: -60px;
  left: 0;
  right: 0;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 12px;
  transition: transform 0.3s ease;
  pointer-events: none;
}
.ptr-indicator i {
  margin-right: 6px;
  transition: transform 0.3s ease;
}
.ptr-container.ptr-pulling .ptr-indicator { transform: translateY(60px); }
.ptr-container.ptr-loading .ptr-indicator { transform: translateY(60px); }
.ptr-container.ptr-loading .ptr-indicator i { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ================================================================
   鲨鱼背景动画 - 仿 Whaleland 官网
   ================================================================ */
.shark-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.page-content {
  position: relative;
  z-index: 1;
}

/* 鲨鱼图层 */
.shark-layer {
  position: absolute;
  width: 100%;
  will-change: transform;
}
.shark-img {
  width: 300px;
  height: auto;
  color: rgba(0, 119, 255, 0.12);
  filter: drop-shadow(0 0 20px rgba(0, 229, 255, 0.15));
  opacity: 0.8;
}
[data-theme="light"] .shark-img {
  color: rgba(0, 119, 255, 0.18);
  filter: drop-shadow(0 0 15px rgba(0, 119, 255, 0.1));
  opacity: 0.5;
}

/* 第一条鲨鱼：大的，慢慢横穿 */
.shark-layer-1 {
  top: 15%;
  animation: shark-swim-1 45s linear infinite;
}
.shark-layer-1 .shark-img {
  width: 340px;
  opacity: 0.9;
}
/* 第二条鲨鱼：中等，反向 */
.shark-layer-2 {
  top: 55%;
  animation: shark-swim-2 60s linear infinite;
  animation-delay: -20s;
}
.shark-layer-2 .shark-img {
  width: 220px;
  opacity: 0.6;
  transform: scaleX(-1);
}
/* 第三条鲨鱼：小的，更慢 */
.shark-layer-3 {
  top: 75%;
  animation: shark-swim-3 75s linear infinite;
  animation-delay: -40s;
}
.shark-layer-3 .shark-img {
  width: 180px;
  opacity: 0.5;
}

@keyframes shark-swim-1 {
  0%   { transform: translateX(-350px) translateY(0); }
  50%  { transform: translateX(50vw) translateY(-30px); }
  100% { transform: translateX(calc(100vw + 350px)) translateY(0); }
}
@keyframes shark-swim-2 {
  0%   { transform: translateX(calc(100vw + 250px)) translateY(0); }
  50%  { transform: translateX(50vw) translateY(40px); }
  100% { transform: translateX(-250px) translateY(0); }
}
@keyframes shark-swim-3 {
  0%   { transform: translateX(-200px) translateY(0); }
  50%  { transform: translateX(50vw) translateY(-20px); }
  100% { transform: translateX(calc(100vw + 200px)) translateY(0); }
}

/* 海洋光束 */
.ocean-light {
  position: absolute;
  width: 200px;
  height: 100%;
  top: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 229, 255, 0.06) 30%,
    rgba(0, 229, 255, 0.04) 60%,
    transparent 100%
  );
  transform: skewX(-15deg);
  filter: blur(40px);
}
[data-theme="light"] .ocean-light {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 119, 255, 0.04) 30%,
    rgba(0, 119, 255, 0.03) 60%,
    transparent 100%
  );
}
.ocean-light-1 { left: 10%; animation: light-shift 20s ease-in-out infinite; }
.ocean-light-2 { left: 40%; animation: light-shift 25s ease-in-out infinite reverse; animation-delay: -5s; }
.ocean-light-3 { left: 70%; animation: light-shift 30s ease-in-out infinite; animation-delay: -10s; }

@keyframes light-shift {
  0%, 100% { opacity: 0.6; transform: skewX(-15deg) translateY(-20px); }
  50%      { opacity: 1;   transform: skewX(-10deg) translateY(20px); }
}

/* 气泡 */
.bubbles {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.bubbles span {
  position: absolute;
  bottom: -100px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 229, 255, 0.35);
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
  animation: bubble-rise linear infinite;
}
[data-theme="light"] .bubbles span {
  background: rgba(0, 119, 255, 0.25);
  box-shadow: 0 0 10px rgba(0, 119, 255, 0.3);
}
.bubbles span:nth-child(1)  { left: 5%;  width: 12px; height: 12px; animation-duration: 18s; animation-delay: 0s;  }
.bubbles span:nth-child(2)  { left: 15%; width: 6px;  height: 6px;  animation-duration: 14s; animation-delay: 2s;  }
.bubbles span:nth-child(3)  { left: 25%; width: 10px; height: 10px; animation-duration: 22s; animation-delay: 4s;  }
.bubbles span:nth-child(4)  { left: 35%; width: 7px;  height: 7px;  animation-duration: 16s; animation-delay: 1s;  }
.bubbles span:nth-child(5)  { left: 50%; width: 14px; height: 14px; animation-duration: 24s; animation-delay: 6s;  }
.bubbles span:nth-child(6)  { left: 60%; width: 8px;  height: 8px;  animation-duration: 17s; animation-delay: 3s;  }
.bubbles span:nth-child(7)  { left: 70%; width: 11px; height: 11px; animation-duration: 20s; animation-delay: 5s;  }
.bubbles span:nth-child(8)  { left: 80%; width: 6px;  height: 6px;  animation-duration: 15s; animation-delay: 7s;  }
.bubbles span:nth-child(9)  { left: 88%; width: 9px;  height: 9px;  animation-duration: 21s; animation-delay: 8s;  }
.bubbles span:nth-child(10) { left: 95%; width: 10px; height: 10px; animation-duration: 19s; animation-delay: 9s;  }

@keyframes bubble-rise {
  0%   { transform: translateY(0) translateX(0) scale(0.5); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.8; }
  100% { transform: translateY(-100vh) translateX(30px) scale(1.2); opacity: 0; }
}

/* 移动端优化：减少动画压力 */
@media (max-width: 768px) {
  .shark-layer-3 { display: none; }
  .shark-img { filter: none; }
  .ocean-light-3 { display: none; }
  .bubbles span:nth-child(n+6) { display: none; }
}

/* 性能模式：用户偏好降低动画 */
@media (prefers-reduced-motion: reduce) {
  .shark-layer, .ocean-light, .bubbles span {
    animation: none !important;
  }
}

/* ================================================================
   AVE 风格 · 合约安全检测面板
   ================================================================ */
.security-card {
  padding: 0;
  overflow: hidden;
}
.security-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--color-border);
  transition: background 0.15s;
}
.security-header:hover { background: rgba(255,255,255,0.02); }
.security-card.collapsed .security-header { border-bottom: none; }
.security-card.collapsed .security-body,
.security-card.collapsed .security-footer { display: none; }
.security-toggle-icon { transition: transform 0.25s; }
.security-card.collapsed .security-toggle-icon { transform: rotate(180deg); }

.security-body {
  padding: 10px 14px;
}
.security-checklist {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.security-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 4px;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.security-row:last-child { border-bottom: none; }
.security-row-label {
  color: var(--color-text-soft, #c1c5d6);
  font-weight: 500;
}
[data-theme="light"] .security-row-label { color: #475569; }
.security-row-icon {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
}
.security-row.ok .security-row-icon i { color: #22c55e; }
.security-row.warn .security-row-icon i { color: #eab308; }
.security-row.fail .security-row-icon i { color: #ef4444; }

.security-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255,255,255,0.05);
}

.security-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(0,0,0,0.15);
  border-top: 1px solid var(--color-border);
}
[data-theme="light"] .security-footer { background: rgba(0,0,0,0.02); }

/* 徽标补充 */
.badge-green { background: rgba(34,197,94,0.12); color: #4ade80; border: 1px solid rgba(34,197,94,0.3); }
.badge-yellow { background: rgba(234,179,8,0.12); color: #facc15; border: 1px solid rgba(234,179,8,0.3); }
.badge-red { background: rgba(239,68,68,0.12); color: #f87171; border: 1px solid rgba(239,68,68,0.3); }
.badge-blue { background: rgba(59,130,246,0.12); color: #60a5fa; border: 1px solid rgba(59,130,246,0.3); }

/* ================================================================
   🌊 海洋背景总容器
   ================================================================ */
.ocean-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.ocean-bg.ocean-off > *:not(.ocean-gradient) { display: none !important; }

/* 深海渐变蒙版 */
.ocean-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(0, 119, 255, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(0, 229, 255, 0.06) 0%, transparent 50%),
    linear-gradient(to bottom, rgba(10, 22, 40, 0) 0%, rgba(5, 10, 20, 0.3) 100%);
}
[data-theme="light"] .ocean-gradient {
  background:
    radial-gradient(ellipse at 20% 30%, rgba(0, 119, 255, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(0, 150, 200, 0.04) 0%, transparent 50%),
    linear-gradient(to bottom, rgba(220, 240, 255, 0) 0%, rgba(200, 230, 250, 0.2) 100%);
}

/* 水波纹光影 (caustics) */
.caustics {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(0, 229, 255, 0.08) 0%, transparent 4%),
    radial-gradient(circle at 75% 35%, rgba(0, 229, 255, 0.06) 0%, transparent 5%),
    radial-gradient(circle at 45% 65%, rgba(0, 229, 255, 0.07) 0%, transparent 4%),
    radial-gradient(circle at 85% 85%, rgba(0, 229, 255, 0.05) 0%, transparent 5%),
    radial-gradient(circle at 15% 75%, rgba(0, 229, 255, 0.06) 0%, transparent 4%);
  background-size: 600px 600px;
  mix-blend-mode: screen;
  opacity: 0.6;
}
.caustics-1 { animation: caustics-shift-1 30s linear infinite; }
.caustics-2 {
  animation: caustics-shift-2 45s linear infinite;
  background-size: 400px 400px;
  opacity: 0.4;
}
[data-theme="light"] .caustics { opacity: 0.3; mix-blend-mode: multiply; }
@keyframes caustics-shift-1 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-30px, 20px) scale(1.05); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes caustics-shift-2 {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(20px, -15px) rotate(1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* ================================================================
   🐋 主角鲸鱼
   ================================================================ */
.whale-container {
  position: absolute;
  left: 0;
  top: 38%;
  width: 680px;     /* 从 480 → 680 放大约 42% */
  height: 340px;
  animation: whale-swim 90s linear infinite;
  will-change: transform;
  filter: drop-shadow(0 10px 40px rgba(94, 199, 255, 0.25));
}
.whale-body-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  animation: whale-float 4s ease-in-out infinite;
}
.whale-img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 30px rgba(0, 119, 255, 0.35))
          drop-shadow(0 10px 40px rgba(0, 0, 0, 0.5));
  opacity: 0.92;
}
[data-theme="light"] .whale-img {
  filter: drop-shadow(0 0 25px rgba(0, 100, 200, 0.2))
          drop-shadow(0 10px 30px rgba(0, 0, 0, 0.15));
  opacity: 0.85;
}

/* 鲸鱼左→右横穿，带上下浮动 */
@keyframes whale-swim {
  0%   { transform: translateX(-520px) translateY(0) rotate(0deg); }
  25%  { transform: translateX(25vw) translateY(-40px) rotate(-1.5deg); }
  50%  { transform: translateX(50vw) translateY(10px) rotate(0.5deg); }
  75%  { transform: translateX(75vw) translateY(-25px) rotate(-1deg); }
  100% { transform: translateX(calc(100vw + 520px)) translateY(0) rotate(0deg); }
}
/* 游泳时的轻微浮动（呼吸感）*/
@keyframes whale-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ================================================================
   💨 鲸鱼喷水 - 粒子系统
   ================================================================ */
.whale-spout {
  position: absolute;
  /* SVG 内喷水口 (560, 128) 相对 800x400 → 70%, 32% */
  left: 70%;
  top: 12%;
  width: 80px;
  height: 120px;
  pointer-events: none;
  /* 周期性喷水：10s 一次，喷 2s */
  animation: spout-cycle 10s ease-in-out infinite;
}
.spout-jet {
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 6px;
  height: 80px;
  margin-left: -3px;
  background: linear-gradient(to top,
    rgba(200, 230, 255, 0.9) 0%,
    rgba(200, 230, 255, 0.7) 40%,
    rgba(200, 230, 255, 0.3) 80%,
    transparent 100%);
  border-radius: 3px;
  transform-origin: bottom center;
  transform: scaleY(0);
  animation: jet-burst 10s ease-out infinite;
  filter: blur(0.5px);
}
.spout-mist {
  position: absolute;
  left: 50%;
  bottom: 120%;
  width: 60px;
  height: 40px;
  margin-left: -30px;
  background: radial-gradient(ellipse, rgba(220, 240, 255, 0.45) 0%, transparent 70%);
  border-radius: 50%;
  opacity: 0;
  animation: mist-puff 10s ease-out infinite;
  filter: blur(4px);
}
.spout-particle {
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  background: rgba(220, 240, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(200, 230, 255, 0.7);
  opacity: 0;
}
.spout-p1 { animation: particle-fly-1 10s ease-out infinite; }
.spout-p2 { animation: particle-fly-2 10s ease-out infinite; }
.spout-p3 { animation: particle-fly-3 10s ease-out infinite; }
.spout-p4 { animation: particle-fly-4 10s ease-out infinite; }
.spout-p5 { animation: particle-fly-5 10s ease-out infinite; }
.spout-p6 { animation: particle-fly-6 10s ease-out infinite; }
.spout-p7 { animation: particle-fly-7 10s ease-out infinite; }
.spout-p8 { animation: particle-fly-8 10s ease-out infinite; }

@keyframes spout-cycle {
  0%, 8%, 100% { }   /* 静止期 */
}
@keyframes jet-burst {
  0%, 82%, 100% { transform: scaleY(0); opacity: 0; }
  85%           { transform: scaleY(0.3); opacity: 1; }
  88%           { transform: scaleY(1); opacity: 1; }
  95%           { transform: scaleY(0.7); opacity: 0.5; }
  100%          { transform: scaleY(0); opacity: 0; }
}
@keyframes mist-puff {
  0%, 85%, 100% { opacity: 0; transform: scale(0.5); }
  90%           { opacity: 0.7; transform: scale(1.2); }
  97%           { opacity: 0.3; transform: scale(1.8) translateY(-20px); }
}
/* 粒子向上扇形喷射 */
@keyframes particle-fly-1 {
  0%, 84%, 100%  { transform: translate(0, 0) scale(0); opacity: 0; }
  88%            { transform: translate(-25px, -60px) scale(1); opacity: 1; }
  100%           { transform: translate(-45px, 30px) scale(0.4); opacity: 0; }
}
@keyframes particle-fly-2 {
  0%, 84%, 100%  { transform: translate(0, 0) scale(0); opacity: 0; }
  88%            { transform: translate(-12px, -80px) scale(1); opacity: 1; }
  100%           { transform: translate(-25px, 20px) scale(0.4); opacity: 0; }
}
@keyframes particle-fly-3 {
  0%, 84%, 100%  { transform: translate(0, 0) scale(0); opacity: 0; }
  88%            { transform: translate(0, -95px) scale(1.1); opacity: 1; }
  100%           { transform: translate(-5px, 30px) scale(0.3); opacity: 0; }
}
@keyframes particle-fly-4 {
  0%, 84%, 100%  { transform: translate(0, 0) scale(0); opacity: 0; }
  88%            { transform: translate(12px, -85px) scale(1); opacity: 1; }
  100%           { transform: translate(25px, 25px) scale(0.4); opacity: 0; }
}
@keyframes particle-fly-5 {
  0%, 84%, 100%  { transform: translate(0, 0) scale(0); opacity: 0; }
  88%            { transform: translate(25px, -65px) scale(1); opacity: 1; }
  100%           { transform: translate(42px, 30px) scale(0.4); opacity: 0; }
}
@keyframes particle-fly-6 {
  0%, 85%, 100%  { transform: translate(0, 0) scale(0); opacity: 0; }
  89%            { transform: translate(-18px, -50px) scale(0.8); opacity: 1; }
  100%           { transform: translate(-35px, 15px) scale(0.3); opacity: 0; }
}
@keyframes particle-fly-7 {
  0%, 85%, 100%  { transform: translate(0, 0) scale(0); opacity: 0; }
  89%            { transform: translate(5px, -70px) scale(0.9); opacity: 1; }
  100%           { transform: translate(10px, 25px) scale(0.3); opacity: 0; }
}
@keyframes particle-fly-8 {
  0%, 85%, 100%  { transform: translate(0, 0) scale(0); opacity: 0; }
  89%            { transform: translate(18px, -55px) scale(0.8); opacity: 1; }
  100%           { transform: translate(32px, 20px) scale(0.3); opacity: 0; }
}

/* ================================================================
   🐠 小鱼群
   ================================================================ */
.fish-school {
  position: absolute;
  width: 180px;
  height: 60px;
  will-change: transform;
}
.fish-school-1 {
  top: 28%;
  animation: fish-school-swim-1 35s linear infinite;
}
.fish-school-2 {
  top: 65%;
  animation: fish-school-swim-2 42s linear infinite;
  animation-delay: -15s;
}
.fish-school-3 {
  top: 82%;
  animation: fish-school-swim-3 50s linear infinite;
  animation-delay: -30s;
}
.fish {
  position: absolute;
  width: 42px;      /* 金鱼放大一点 */
  height: 28px;
  left: 0;
  top: 0;
  animation: fish-wiggle 0.7s ease-in-out infinite alternate;
}
.fish img {
  width: 100%;
  height: auto;
  display: block;
}
/* 金鱼群不同色调 - 全部橙红金色系（传统金鱼配色） */
.fish-c1 img { filter: drop-shadow(0 0 6px rgba(255, 120, 40, 0.65)) saturate(1.1); }                   /* 标准橙红金鱼 */
.fish-c2 img { filter: drop-shadow(0 0 6px rgba(255, 80, 30, 0.7)) hue-rotate(-10deg) saturate(1.25); } /* 深红琉金 */
.fish-c3 img { filter: drop-shadow(0 0 6px rgba(255, 200, 80, 0.7)) hue-rotate(15deg) saturate(0.95); } /* 金黄兰寿 */

@keyframes fish-wiggle {
  0%   { transform: translateY(0) scaleX(1) rotate(-2deg); }
  100% { transform: translateY(-2px) scaleX(0.94) rotate(2deg); }
}

@keyframes fish-school-swim-1 {
  0%   { transform: translateX(-200px) translateY(0); }
  33%  { transform: translateX(30vw) translateY(30px); }
  66%  { transform: translateX(65vw) translateY(-20px); }
  100% { transform: translateX(calc(100vw + 200px)) translateY(0); }
}
@keyframes fish-school-swim-2 {
  /* 反向 */
  0%   { transform: translateX(calc(100vw + 200px)) translateY(0) scaleX(-1); }
  40%  { transform: translateX(55vw) translateY(-25px) scaleX(-1); }
  70%  { transform: translateX(25vw) translateY(20px) scaleX(-1); }
  100% { transform: translateX(-200px) translateY(0) scaleX(-1); }
}
@keyframes fish-school-swim-3 {
  0%   { transform: translateX(-180px) translateY(0); }
  50%  { transform: translateX(50vw) translateY(-15px); }
  100% { transform: translateX(calc(100vw + 180px)) translateY(0); }
}

/* ================================================================
   🎐 水母
   ================================================================ */
.jellyfish {
  position: absolute;
  width: 120px;
  height: 240px;
  will-change: transform;
  animation-timing-function: ease-in-out;
  pointer-events: none;
}
.jellyfish-img {
  width: 100%;
  height: auto;
  animation: jellyfish-pulse 4.5s ease-in-out infinite;
  transform-origin: center 25%;
}

/* 💧 梦幻水母 #1 - 青白色主角（最大，正左上） */
.jellyfish-1 {
  left: 6%;
  top: 8%;
  width: 160px;
  height: 320px;
  color: #7fd9ff;
  animation: jellyfish-drift-1 32s ease-in-out infinite;
  z-index: 2;
}
.jellyfish-1 .jellyfish-img {
  filter: drop-shadow(0 0 30px rgba(127, 217, 255, 0.75))
          drop-shadow(0 0 60px rgba(191, 239, 255, 0.35));
}

/* 💜 紫色水母 #2 - 中等（右上） */
.jellyfish-2 {
  right: 8%;
  top: 18%;
  width: 130px;
  height: 260px;
  color: #b888ff;
  animation: jellyfish-drift-2 36s ease-in-out infinite;
  animation-delay: -8s;
}
.jellyfish-2 .jellyfish-img {
  filter: drop-shadow(0 0 28px rgba(184, 136, 255, 0.7))
          drop-shadow(0 0 50px rgba(164, 92, 255, 0.3));
  animation-delay: -1.5s;
}

/* 💗 粉紫色水母 #3 - 中（中部） */
.jellyfish-3 {
  left: 48%;
  top: 42%;
  width: 110px;
  height: 220px;
  color: #ff88dd;
  animation: jellyfish-drift-3 40s ease-in-out infinite;
  animation-delay: -16s;
}
.jellyfish-3 .jellyfish-img {
  filter: drop-shadow(0 0 25px rgba(255, 136, 221, 0.7))
          drop-shadow(0 0 45px rgba(216, 182, 255, 0.3));
  animation-delay: -2.5s;
}

/* 💙 深青水母 #4 - 小（左下） */
.jellyfish-4 {
  left: 18%;
  top: 62%;
  width: 90px;
  height: 180px;
  color: #5ec7ff;
  animation: jellyfish-drift-4 30s ease-in-out infinite;
  animation-delay: -5s;
}
.jellyfish-4 .jellyfish-img {
  filter: drop-shadow(0 0 22px rgba(94, 199, 255, 0.7))
          drop-shadow(0 0 40px rgba(127, 217, 255, 0.3));
  animation-delay: -0.8s;
}

/* 🌸 淡粉水母 #5 - 小（右中） */
.jellyfish-5 {
  right: 22%;
  top: 55%;
  width: 95px;
  height: 190px;
  color: #e8d9ff;
  animation: jellyfish-drift-5 34s ease-in-out infinite;
  animation-delay: -20s;
}
.jellyfish-5 .jellyfish-img {
  filter: drop-shadow(0 0 24px rgba(232, 217, 255, 0.8))
          drop-shadow(0 0 50px rgba(192, 123, 255, 0.35));
  animation-delay: -3s;
}

/* ✨ 亮白水母 #6 - 小巧（远景，右上角） */
.jellyfish-6 {
  right: 4%;
  top: 5%;
  width: 70px;
  height: 140px;
  color: #e8fbff;
  opacity: 0.75;
  animation: jellyfish-drift-6 42s ease-in-out infinite;
  animation-delay: -12s;
}
.jellyfish-6 .jellyfish-img {
  filter: drop-shadow(0 0 20px rgba(232, 251, 255, 0.9))
          drop-shadow(0 0 40px rgba(127, 217, 255, 0.4));
  animation-delay: -1s;
}

/* 🔮 蓝紫水母 #7 - 小（中下偏右） */
.jellyfish-7 {
  left: 65%;
  top: 72%;
  width: 85px;
  height: 170px;
  color: #a45cff;
  animation: jellyfish-drift-7 38s ease-in-out infinite;
  animation-delay: -25s;
}
.jellyfish-7 .jellyfish-img {
  filter: drop-shadow(0 0 22px rgba(164, 92, 255, 0.7))
          drop-shadow(0 0 42px rgba(123, 60, 255, 0.35));
  animation-delay: -2s;
}

/* 伞盖搏动 */
@keyframes jellyfish-pulse {
  0%, 100% { transform: scale(1, 1); }
  50%      { transform: scale(1.08, 0.9); }
}
/* 缓慢漂浮 */
@keyframes jellyfish-drift-1 {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(40px, -30px); }
  50%  { transform: translate(80px, 20px); }
  75%  { transform: translate(30px, 50px); }
  100% { transform: translate(0, 0); }
}
@keyframes jellyfish-drift-2 {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-50px, 40px); }
  66%  { transform: translate(-20px, -30px); }
  100% { transform: translate(0, 0); }
}
@keyframes jellyfish-drift-3 {
  0%   { transform: translate(0, 0); }
  30%  { transform: translate(35px, -40px); }
  70%  { transform: translate(-40px, 30px); }
  100% { transform: translate(0, 0); }
}
@keyframes jellyfish-drift-4 {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-30px, -50px); }
  55%  { transform: translate(25px, -20px); }
  80%  { transform: translate(-15px, 40px); }
  100% { transform: translate(0, 0); }
}
@keyframes jellyfish-drift-5 {
  0%   { transform: translate(0, 0); }
  35%  { transform: translate(40px, 35px); }
  65%  { transform: translate(-25px, -30px); }
  100% { transform: translate(0, 0); }
}
@keyframes jellyfish-drift-6 {
  0%   { transform: translate(0, 0); }
  30%  { transform: translate(-40px, 20px); }
  60%  { transform: translate(30px, -35px); }
  100% { transform: translate(0, 0); }
}
@keyframes jellyfish-drift-7 {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-30px, -40px); }
  50%  { transform: translate(40px, 25px); }
  75%  { transform: translate(20px, -30px); }
  100% { transform: translate(0, 0); }
}

/* ================================================================
   💦 鼠标涟漪
   ================================================================ */
.ripple-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ripple {
  position: absolute;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  border: 2px solid rgba(0, 229, 255, 0.6);
  animation: ripple-expand 1s ease-out forwards;
  pointer-events: none;
}
[data-theme="light"] .ripple { border-color: rgba(0, 119, 255, 0.4); }
@keyframes ripple-expand {
  0%   { transform: scale(0.3); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* ================================================================
   🌊 海洋模式开关
   ================================================================ */
.ocean-toggle {
  position: fixed;
  bottom: 82px;
  right: 16px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0, 119, 255, 0.25), rgba(0, 229, 255, 0.15));
  border: 1px solid rgba(0, 229, 255, 0.35);
  color: #5ec7ff;
  font-size: 16px;
  cursor: pointer;
  z-index: 45;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.25s;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 119, 255, 0.2);
}
.ocean-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 30px rgba(0, 229, 255, 0.4);
}
.ocean-toggle.off {
  background: rgba(50, 50, 60, 0.4);
  border-color: rgba(150, 150, 150, 0.3);
  color: #9ca3af;
  box-shadow: none;
}
.ocean-toggle.off i::before { content: "\f6fb"; /* fa-fish */ opacity: 0.5; }
@media (max-width: 640px) {
  .ocean-toggle { bottom: 78px; right: 12px; width: 38px; height: 38px; }
}

/* ================================================================
   📱 移动端优化：减少动画负担
   ================================================================ */
@media (max-width: 768px) {
  .whale-container {
    width: 440px;
    height: 220px;
    animation-duration: 65s;
  }
  .fish-school-3 { display: none; }
  /* 移动端保留 4 只水母 */
  .jellyfish-5, .jellyfish-6, .jellyfish-7 { display: none; }
  .jellyfish-1 { width: 120px; height: 240px; }
  .jellyfish-2 { width: 100px; height: 200px; }
  .jellyfish-3 { width: 90px; height: 180px; }
  .jellyfish-4 { width: 75px; height: 150px; }
  .caustics-2 { display: none; }
  .shark-layer-3 { display: none; }
  .ocean-light-3 { display: none; }
  .bubbles span:nth-child(n+7) { display: none; }
}
@media (max-width: 480px) {
  .whale-container { width: 320px; height: 160px; }
  /* 超小屏只保留 2 只水母 */
  .jellyfish-3, .jellyfish-4 { display: none; }
  .fish-school-2 { display: none; }
  .shark-layer-2 { display: none; }
}

/* ================================================================
   ♿ 减少动画偏好
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  .whale-container, .fish-school, .jellyfish, .shark-layer, .caustics,
  .ocean-light, .bubbles span, .spout-jet, .spout-particle, .spout-mist {
    animation: none !important;
  }
  .whale-container, .shark-layer { opacity: 0.3; }
}