/* ===== 全局重置 ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* 禁止缩放相关 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;
}

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: radial-gradient(circle at 20% 30%, #f0f5ff, #e8efff 70%, #dbe6ff);
  min-height: 100vh;
  /* 使用 dvh 适配移动端浏览器地址栏 */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  color: #0e1a2b;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background 0.6s ease, color 0.4s ease;
  /* 防止横向溢出 */
  overflow-x: hidden;
  position: relative;
}

/* WebGL 画布 - 默认隐藏，由 JS 控制显示 */
#webglCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: none;
  pointer-events: none;
}

/* ===== 主卡片 ===== */
.saas-card {
  position: relative;
  z-index: 2;
  max-width: 720px;
  width: 100%;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 0;
  padding: 3rem 3rem 2.75rem;
  box-shadow:
    0 25px 45px -18px rgba(0, 20, 50, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.9) inset,
    0 0 0 1px rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.7);
  transition: all 0.4s ease;
  text-align: center;
  overflow: hidden;
  /* 保证在 flex 容器中宽度自适应且不溢出 */
  flex-shrink: 0;
}

.saas-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #1a5cff, #7aa5ff, transparent);
  opacity: 0.6;
  transition: background 0.4s ease;
}

.error-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(105deg, #1a5cff, #2b7aff);
  color: white;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.4px;
  padding: 0.5rem 1.5rem;
  border-radius: 0;
  margin-bottom: 1.75rem;
  box-shadow: 0 6px 12px -6px rgba(26, 92, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  text-transform: uppercase;
  transition: all 0.4s ease;
}

.error-code {
  font-size: clamp(5.5rem, 22vw, 9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #1a2b4c;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 8px rgba(0, 40, 100, 0.06);
  transition: all 0.4s ease;
}

.divider {
  width: 100px;
  height: 3px;
  background: linear-gradient(90deg, #1a5cff, #7aa5ff);
  margin: 1.25rem auto 1.75rem;
  opacity: 0.8;
  transition: all 0.4s ease;
}

.error-title {
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0a1a32;
  margin-bottom: 0.8rem;
  transition: all 0.4s ease;
}

.error-desc {
  font-size: 1.1rem;
  color: #4a5e7a;
  max-width: 480px;
  margin: 0 auto 2rem auto;
  line-height: 1.6;
  font-weight: 400;
  transition: all 0.4s ease;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 2.25rem 0 0.5rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.9rem 2rem;
  border-radius: 0;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: all 0.25s ease;
  cursor: pointer;
  border: 1px solid transparent;
  flex: 1 0 auto;
  max-width: 260px;
  letter-spacing: 0.2px;
  background: white;
  color: #1a2b4c;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02), 0 0 0 1px rgba(0, 0, 0, 0.02);
}

.btn-primary {
  background: linear-gradient(105deg, #1a5cff, #2b7aff);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 18px -8px #1a5cff, 0 0 0 1px rgba(26, 92, 255, 0.1);
}

.btn-primary:hover {
  background: linear-gradient(105deg, #0f4ee0, #1a6aff);
  transform: translateY(-2px);
  box-shadow: 0 16px 24px -12px #1a5cff, 0 0 0 1px #1a5cff;
  color: white;
}

.btn:active {
  transform: translateY(1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.btn-hidden {
  display: none !important;
}

.footer-line {
  margin-top: 2.5rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(26, 92, 255, 0.15), transparent);
  width: 100%;
  transition: all 0.4s ease;
}

/* ===== 萌ICP备案脚页 ===== */
.site-footer {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 720px;
  margin-top: 1.5rem;
  padding: 1rem 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  transition: all 0.4s ease;
}

.site-footer a {
  color: #5e6f82;
  text-decoration: none;
  transition: color 0.25s ease, opacity 0.25s ease;
  opacity: 0.85;
  font-weight: 500;
  letter-spacing: 0.3px;
  padding: 0.3rem 0.8rem;
  border-radius: 0;
  display: inline-block;
}

.site-footer a:hover {
  color: #1a5cff;
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================
   风格 1: SaaS 风格 (默认)
   ============================================================ */

/* ============================================================
   风格 2: Moe 风格
   ============================================================ */
body.style-moe {
  background: radial-gradient(circle at 30% 20%, #fff0f7, #ffe6f2 40%, #fce4ff 80%, #f0e6ff);
  color: #5a3a5a;
}

body.style-moe .saas-card {
  background: rgba(255, 240, 250, 0.85);
  border: 2px solid #ffc0e0;
  border-radius: 24px;
  box-shadow: 0 20px 40px -20px #ff9ecf, 0 0 0 4px rgba(255, 192, 224, 0.2);
}

body.style-moe .saas-card::before {
  background: linear-gradient(90deg, transparent, #ff9ecf, #ffb3d9, transparent);
  height: 4px;
}

body.style-moe .error-badge {
  background: linear-gradient(105deg, #ff8ec2, #ff6eb0);
  box-shadow: 0 6px 14px -6px #ff6eb0;
  border-radius: 50px;
  font-size: 0.9rem;
  padding: 0.45rem 1.6rem;
  text-transform: lowercase;
}

body.style-moe .error-code {
  color: #ff6eb0;
  text-shadow: 0 4px 12px rgba(255, 110, 176, 0.25);
  font-weight: 800;
  letter-spacing: -0.02em;
}

body.style-moe .divider {
  background: linear-gradient(90deg, #ffb3d9, #ff8ec2);
  width: 120px;
  height: 5px;
  border-radius: 10px;
}

body.style-moe .error-title {
  color: #b34180;
  font-weight: 700;
}

body.style-moe .error-desc {
  color: #a06090;
}

body.style-moe .btn {
  border-radius: 60px;
  font-weight: 600;
  font-size: 1rem;
}

body.style-moe .btn-primary {
  background: linear-gradient(105deg, #ff8ec2, #ff6eb0);
  box-shadow: 0 8px 20px -8px #ff6eb0;
  border-radius: 60px;
}

body.style-moe .btn-primary:hover {
  background: linear-gradient(105deg, #ff7ab8, #ff5aa5);
  box-shadow: 0 16px 28px -12px #ff6eb0;
}

body.style-moe .footer-line {
  background: linear-gradient(90deg, transparent, #ffb3d9, transparent);
}

body.style-moe .site-footer a {
  color: #a06090;
}

body.style-moe .site-footer a:hover {
  color: #ff6eb0;
}

/* ============================================================
   风格 3: 企业风格
   ============================================================ */
body.style-corporate {
  background: linear-gradient(145deg, #0b1a2e, #152a40);
  color: #e0eaf5;
}

body.style-corporate .saas-card {
  background: rgba(20, 35, 55, 0.92);
  border: 1px solid #2a4a6a;
  border-radius: 0;
  box-shadow: 0 30px 50px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.03);
}

body.style-corporate .saas-card::before {
  background: linear-gradient(90deg, transparent, #3a7bd5, #6a9eff, transparent);
}

body.style-corporate .error-badge {
  background: linear-gradient(105deg, #1e4a7a, #2a5a8a);
  border: 1px solid #3a7bd5;
  box-shadow: 0 4px 10px -4px #1e4a7a;
}

body.style-corporate .error-code {
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(58, 123, 213, 0.3);
}

body.style-corporate .divider {
  background: linear-gradient(90deg, #3a7bd5, #6a9eff);
}

body.style-corporate .error-title {
  color: #ffffff;
}

body.style-corporate .error-desc {
  color: #8aa8c8;
}

body.style-corporate .btn-primary {
  background: linear-gradient(105deg, #1e4a7a, #2a5a8a);
  border: 1px solid #3a7bd5;
  box-shadow: 0 8px 18px -8px #1e4a7a;
}

body.style-corporate .btn-primary:hover {
  background: linear-gradient(105deg, #265a8a, #326a9a);
  border-color: #6a9eff;
  box-shadow: 0 16px 28px -10px #2a5a8a;
}

body.style-corporate .footer-line {
  background: linear-gradient(90deg, transparent, #3a7bd5, transparent);
}

body.style-corporate .site-footer a {
  color: #8aa8c8;
}

body.style-corporate .site-footer a:hover {
  color: #6a9eff;
}

/* ============================================================
   风格 4: 政府博客风格
   ============================================================ */
body.style-gov {
  background: #f5f0e8;
  color: #3a3020;
}

body.style-gov .saas-card {
  background: #fdfaf5;
  border: 1px solid #d4c8b8;
  border-radius: 0;
  box-shadow: 0 8px 30px -12px rgba(100, 80, 50, 0.25), 0 0 0 1px #e8e0d0 inset;
}

body.style-gov .saas-card::before {
  background: linear-gradient(90deg, transparent, #b8a080, #d4c0a0, transparent);
  height: 3px;
}

body.style-gov .error-badge {
  background: #b8a080;
  color: #ffffff;
  font-family: 'Noto Serif SC', 'Times New Roman', serif;
  font-weight: 600;
  letter-spacing: 2px;
  border: 1px solid #a89070;
  box-shadow: 0 4px 10px -4px #a89070;
  text-transform: uppercase;
}

body.style-gov .error-code {
  font-family: 'Noto Serif SC', 'Times New Roman', serif;
  color: #7a6a4a;
  text-shadow: 0 2px 6px rgba(120, 100, 70, 0.15);
  font-weight: 700;
}

body.style-gov .divider {
  background: linear-gradient(90deg, #b8a080, #d4c0a0);
  height: 2px;
  opacity: 0.9;
}

body.style-gov .error-title {
  font-family: 'Noto Serif SC', 'Times New Roman', serif;
  color: #5a4a30;
  font-weight: 700;
  letter-spacing: 1px;
}

body.style-gov .error-desc {
  color: #7a6a50;
  font-family: 'Noto Serif SC', 'Times New Roman', serif;
  font-size: 1.05rem;
}

body.style-gov .btn-primary {
  background: #b8a080;
  border: 1px solid #a89070;
  box-shadow: 0 6px 14px -6px #a89070;
  font-family: 'Noto Serif SC', 'Times New Roman', serif;
  letter-spacing: 2px;
}

body.style-gov .btn-primary:hover {
  background: #c8b090;
  border-color: #b8a080;
  box-shadow: 0 14px 24px -10px #b8a080;
}

body.style-gov .footer-line {
  background: linear-gradient(90deg, transparent, #d4c0a0, transparent);
}

body.style-gov .site-footer a {
  color: #7a6a50;
  font-family: 'Noto Serif SC', 'Times New Roman', serif;
}

body.style-gov .site-footer a:hover {
  color: #b8a080;
}

/* ============================================================
   风格 5 & 6: WebGL 风格
   ============================================================ */

/* 太阳系风格 */
body.style-solar {
  background: #000000;
  color: #e0e0ff;
}

body.style-solar .saas-card {
  background: rgba(10, 15, 30, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(100, 150, 255, 0.25);
  border-radius: 0;
  box-shadow: 0 0 60px -15px rgba(80, 140, 255, 0.3), 0 0 0 1px rgba(100, 150, 255, 0.1) inset;
}

body.style-solar .saas-card::before {
  background: linear-gradient(90deg, transparent, #4a8aff, #8ab8ff, transparent);
  opacity: 0.8;
}

body.style-solar .error-badge {
  background: rgba(30, 50, 90, 0.8);
  border: 1px solid #4a8aff;
  box-shadow: 0 0 20px -5px #4a8aff;
  color: #c0d8ff;
}

body.style-solar .error-code {
  color: #ffffff;
  text-shadow: 0 0 30px #4a8aff, 0 0 60px #4a8aff40;
}

body.style-solar .divider {
  background: linear-gradient(90deg, #4a8aff, #8ab8ff);
  box-shadow: 0 0 15px -3px #4a8aff;
}

body.style-solar .error-title {
  color: #ffffff;
  text-shadow: 0 0 20px rgba(74, 138, 255, 0.4);
}

body.style-solar .error-desc {
  color: #a0b8d8;
}

body.style-solar .btn-primary {
  background: linear-gradient(105deg, #1a3a7a, #2a5aaa);
  border: 1px solid #4a8aff;
  box-shadow: 0 0 25px -8px #4a8aff;
}

body.style-solar .btn-primary:hover {
  background: linear-gradient(105deg, #2a4a8a, #3a6aba);
  box-shadow: 0 0 40px -8px #4a8aff;
}

body.style-solar .footer-line {
  background: linear-gradient(90deg, transparent, #4a8aff, transparent);
}

body.style-solar .site-footer a {
  color: #8ab8ff;
}

body.style-solar .site-footer a:hover {
  color: #ffffff;
  text-shadow: 0 0 10px #4a8aff;
}

/* 樱花风格 */
body.style-sakura {
  background: #fff5f8;
  color: #4a2a3a;
}

body.style-sakura .saas-card {
  background: rgba(255, 250, 252, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 180, 200, 0.4);
  border-radius: 0;
  box-shadow: 0 25px 45px -18px rgba(255, 150, 180, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
}

body.style-sakura .saas-card::before {
  background: linear-gradient(90deg, transparent, #ffb0c8, #ffd0e0, transparent);
}

body.style-sakura .error-badge {
  background: linear-gradient(105deg, #ffb0c8, #ff90b0);
  border: 1px solid #ffc0d0;
  box-shadow: 0 6px 14px -6px #ff90b0;
  color: #ffffff;
}

body.style-sakura .error-code {
  color: #ff90b0;
  text-shadow: 0 2px 12px rgba(255, 144, 176, 0.3);
}

body.style-sakura .divider {
  background: linear-gradient(90deg, #ffb0c8, #ffd0e0);
}

body.style-sakura .error-title {
  color: #b04070;
}

body.style-sakura .error-desc {
  color: #a06080;
}

body.style-sakura .btn-primary {
  background: linear-gradient(105deg, #ffb0c8, #ff90b0);
  border: 1px solid #ffc0d0;
  box-shadow: 0 8px 18px -8px #ff90b0;
}

body.style-sakura .btn-primary:hover {
  background: linear-gradient(105deg, #ffa0b8, #ff80a0);
  box-shadow: 0 16px 28px -12px #ff90b0;
}

body.style-sakura .footer-line {
  background: linear-gradient(90deg, transparent, #ffb0c8, transparent);
}

body.style-sakura .site-footer a {
  color: #a06080;
}

body.style-sakura .site-footer a:hover {
  color: #ff90b0;
}

/* ===== 响应式 ===== */
@media (max-width: 560px) {
  body {
    padding: 1rem;
    /* 移动端保证内容从顶部开始，避免与画布重叠 */
    justify-content: flex-start;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .saas-card {
    padding: 2rem 1.25rem;
    border-radius: 0;
    max-width: 100%;
  }

  .error-title {
    font-size: 1.6rem;
  }

  .error-desc {
    font-size: 1rem;
    padding: 0 0.5rem;
  }

  .actions {
    flex-direction: column;
    width: 100%;
  }

  .btn {
    max-width: 100%;
    width: 100%;
    flex: 1 0 100%;
    padding: 0.85rem 1.5rem;
  }

  .site-footer {
    font-size: 0.8rem;
    margin-top: 1rem;
    padding: 0.75rem 0.5rem;
  }

  .site-footer a {
    font-size: 0.8rem;
  }
}

/* 超小屏幕 (如 iPhone SE) */
@media (max-width: 360px) {
  body {
    padding: 0.75rem;
  }

  .saas-card {
    padding: 1.5rem 1rem;
  }

  .error-code {
    font-size: 5rem;
  }

  .error-title {
    font-size: 1.4rem;
  }

  .error-desc {
    font-size: 0.9rem;
  }
}

/* 横屏/矮屏幕处理 */
@media (max-height: 500px) {
  body {
    justify-content: flex-start;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .saas-card {
    padding: 1.5rem 1.5rem 1.25rem;
  }

  .error-code {
    font-size: 4rem;
    margin-bottom: 0.25rem;
  }

  .error-badge {
    margin-bottom: 0.75rem;
    padding: 0.35rem 1rem;
    font-size: 0.8rem;
  }

  .divider {
    margin: 0.75rem auto 1rem;
  }

  .error-title {
    font-size: 1.4rem;
  }

  .error-desc {
    font-size: 0.9rem;
    margin-bottom: 1rem;
  }

  .actions {
    margin: 1rem 0 0.25rem;
  }

  .footer-line {
    margin-top: 1rem;
  }
}