/* =====================================================================
   错误页（riniba_03）：液态玻璃 + 按状态区分的强调色

   两处复用：
   1. resources/views/errors/http.blade.php      —— 404 / 419 / 429 / 500 / 503 等框架错误，
      整页独立渲染（不依赖数据库、缓存、导航），后端出问题时也能正常显示
   2. resources/views/riniba_03/errors/error.blade.php —— 业务提示错误，嵌在站点导航 / 页脚之间

   玻璃参数沿用首页与 /install-app 的 .lq-*（blur(20px) saturate(180%)、半透明底、
   1px 描边、内高光、大圆角）；明暗模式沿用 html[data-bs-theme="dark"] 这一套机制。
   ===================================================================== */
.er-page {
  --er-spring: cubic-bezier(.34, 1.56, .64, 1);
  --er-ease: cubic-bezier(.22, 1, .36, 1);

  --er-title: var(--cz-heading-color, #181d25);
  --er-text: var(--cz-body-color, #4f5562);
  --er-muted: var(--cz-secondary-color, #6b7280);
  --er-line: rgba(24, 29, 37, .1);

  --er-glass-bg: rgba(255, 255, 255, .58);
  --er-glass-bg-solid: rgba(255, 255, 255, .94);
  --er-glass-border: rgba(255, 255, 255, .75);
  --er-glass-shadow: 0 18px 40px -22px rgba(24, 29, 37, .32), 0 2px 8px rgba(24, 29, 37, .05);
  --er-glass-inset: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .3);
  --er-sheen: rgba(255, 255, 255, .55);
  --er-ambient-op: .5;

  /* 主操作按钮固定用站点蓝，白字对比度 >= 4.5 */
  --er-btn-a: #2860c4;
  --er-btn-b: #2f6ed5;

  /* 状态色（默认 info：蓝青） */
  --er-a: #2f6ed5;
  --er-b: #16b8e8;
  --er-glow: 47, 110, 213;

  position: relative;
  color: var(--er-text);
}
.er-page.er-tone-warn {
  --er-a: #e58200;
  --er-b: #f2622b;
  --er-glow: 240, 122, 20;
}
.er-page.er-tone-danger {
  --er-a: #d92b4b;
  --er-b: #ff6b81;
  --er-glow: 226, 58, 88;
}

html[data-bs-theme="dark"] .er-page {
  --er-line: rgba(255, 255, 255, .12);
  --er-glass-bg: rgba(31, 36, 46, .55);
  --er-glass-bg-solid: rgba(38, 44, 56, .95);
  --er-glass-border: rgba(255, 255, 255, .12);
  --er-glass-shadow: 0 18px 40px -18px rgba(0, 0, 0, .65), 0 2px 8px rgba(0, 0, 0, .25);
  --er-glass-inset: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(255, 255, 255, .03);
  --er-sheen: rgba(255, 255, 255, .08);
  --er-ambient-op: .26;

  --er-a: #7fb2ff;
  --er-b: #5ee0f5;
  --er-glow: 127, 178, 255;
}
html[data-bs-theme="dark"] .er-page.er-tone-warn {
  --er-a: #ffc46b;
  --er-b: #ff9a62;
  --er-glow: 255, 170, 90;
}
html[data-bs-theme="dark"] .er-page.er-tone-danger {
  --er-a: #ff8fa3;
  --er-b: #ff6b81;
  --er-glow: 255, 120, 140;
}

.er-page [hidden] { display: none !important; }
.er-page *, .er-page *::before, .er-page *::after { box-sizing: border-box; }

/* ---------- 整页外壳（独立错误页） ---------- */
.er-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip;
  background: var(--cz-body-bg, #fff);
}
.er-topbar {
  position: relative;
  z-index: 1;
  padding: 1rem clamp(1rem, 4vw, 2rem);
}
.er-brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 2.75rem;
  color: var(--er-title);
  font-weight: 600;
  text-decoration: none;
}
.er-brand:hover { color: var(--er-title); }
.er-brand__mark {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  flex: none;
}
.er-main {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .5rem 1rem 3rem;
}

/* ---------- 嵌在站点布局里的舞台（业务提示错误） ---------- */
.er-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(26rem, calc(100vh - 17rem), 44rem);
  padding: 2rem 1rem;
  overflow: hidden;
  overflow: clip;
}
.er-stage .er-ambient {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
@media (max-width: 991.98px) {
  /* 手机 / 平板竖屏底部有悬浮导航，给它让位 */
  .er-stage { padding-bottom: 6.5rem; }
}

/* ---------- 环境光斑（让玻璃有东西可折射） ---------- */
.er-ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  overflow: clip;
  pointer-events: none;
}
.er-blob {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 46% 54% 52% 48% / 48% 46% 54% 52%;
  filter: blur(60px);
  opacity: var(--er-ambient-op);
  will-change: transform;
  animation: er-drift 24s ease-in-out infinite alternate;
}
.er-blob--1 { width: 30rem; left: -10rem; top: 6%; background: radial-gradient(circle at 35% 35%, rgba(var(--er-glow), .75), rgba(var(--er-glow), 1)); }
.er-blob--2 { width: 26rem; right: -9rem; top: 34%; background: radial-gradient(circle at 60% 40%, #7ee7f9, #0dcaf0); animation-delay: -9s; }
.er-blob--3 { width: 20rem; left: 32%; bottom: -8rem; background: radial-gradient(circle, #ffa3b0, #f55266); animation-delay: -14s; }
@keyframes er-drift {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(6%, 8%, 0) rotate(60deg) scale(1.08); }
  100% { transform: translate3d(-5%, 4%, 0) rotate(120deg) scale(.94); }
}

/* ---------- 玻璃卡片 ---------- */
.er-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 36rem;
  padding: clamp(1.75rem, 5vw, 2.75rem) clamp(1.25rem, 5vw, 2.5rem);
  border-radius: 1.75rem;
  text-align: center;
  background: var(--er-glass-bg);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--er-glass-border);
  box-shadow: var(--er-glass-shadow), var(--er-glass-inset);
  overflow: hidden;
  animation: er-pop .6s var(--er-spring) both;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .er-card { background: var(--er-glass-bg-solid); }
}
/* 左上角的内高光 */
.er-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 70% at 0% 0%, var(--er-sheen), transparent 55%);
  pointer-events: none;
}
.er-card > * { position: relative; }
@keyframes er-pop {
  0%   { opacity: 0; transform: translateY(14px) scale(.97); }
  100% { opacity: 1; transform: none; }
}

/* ---------- 状态码（大号渐变数字） ---------- */
.er-code {
  margin: 0 0 .35rem;
  font-size: clamp(5.75rem, 27vw, 9.5rem);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
  color: transparent;
  background: linear-gradient(100deg, var(--er-a), var(--er-b), var(--er-a));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 14px 22px rgba(var(--er-glow), .28));
  animation: er-flow 9s ease-in-out infinite alternate;
}
@keyframes er-flow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* ---------- 图标球（没有状态码的业务提示用） ---------- */
.er-orb {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto 1.25rem;
  font-size: 2rem;
  color: #fff;
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 46%),
    linear-gradient(135deg, var(--er-a), var(--er-b));
  box-shadow: 0 16px 30px -12px rgba(var(--er-glow), .65), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -6px 12px rgba(0, 0, 0, .08);
  animation: er-morph 9s ease-in-out infinite alternate;
}
html[data-bs-theme="dark"] .er-orb { color: #10151d; }
@keyframes er-morph {
  0%   { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
  33%  { border-radius: 58% 42% 38% 62% / 55% 61% 39% 45%; }
  66%  { border-radius: 38% 62% 55% 45% / 62% 38% 62% 38%; }
  100% { border-radius: 60% 40% 46% 54% / 40% 58% 42% 60%; }
}

/* ---------- 文案 ---------- */
.er-title {
  margin: 0 0 .6rem;
  font-size: clamp(1.4rem, 4.6vw, 1.85rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--er-title);
  text-wrap: balance; /* 避免末行只剩一两个字 */
}
.er-desc {
  max-width: 28rem;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--er-text);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* 提示条（例如"已付款请先查单"） */
.er-note {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  max-width: 28rem;
  margin: 1.25rem auto 0;
  padding: .8rem 1rem;
  border-radius: 1rem;
  font-size: .875rem;
  line-height: 1.6;
  text-align: left;
  color: var(--er-text);
  background: rgba(var(--er-glow), .1);
  border: 1px solid rgba(var(--er-glow), .24);
}
.er-note i { flex: none; margin-top: .15rem; font-size: 1.05rem; color: rgb(var(--er-glow)); }
.er-note a { color: var(--er-title); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- 按钮 ---------- */
.er-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin-top: 1.75rem;
}
.er-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 2.9rem;
  padding: .7rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .35s var(--er-spring), box-shadow .25s var(--er-ease), background-color .25s var(--er-ease), opacity .2s;
}
.er-btn i { font-size: 1.1rem; }
.er-btn:focus-visible { outline: 2px solid rgb(var(--er-glow)); outline-offset: 3px; }
.er-btn:active { transform: scale(.96); }

.er-btn--primary {
  color: #fff;
  background: linear-gradient(135deg, var(--er-btn-a), var(--er-btn-b));
  box-shadow: 0 10px 22px -10px rgba(47, 110, 213, .75), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.er-btn--primary:hover { color: #fff; }

.er-btn--glass {
  color: var(--er-title);
  background: var(--er-glass-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-color: var(--er-glass-border);
  box-shadow: var(--er-glass-inset);
}
html[data-bs-theme="dark"] .er-btn--glass { background: rgba(255, 255, 255, .08); }
.er-btn--glass:hover { color: var(--er-title); }

/* 倒计时中的重试按钮 */
.er-btn.is-waiting { opacity: .55; cursor: not-allowed; pointer-events: none; }

/* 悬停效果只给有鼠标的设备，触屏不依赖悬停 */
@media (hover: hover) {
  .er-btn:hover { transform: translateY(-2px); }
  .er-btn:active { transform: scale(.96); }
  .er-btn--primary:hover { box-shadow: 0 14px 26px -10px rgba(47, 110, 213, .85), inset 0 1px 0 rgba(255, 255, 255, .5); }
  .er-btn--glass:hover { background: rgba(255, 255, 255, .8); }
  html[data-bs-theme="dark"] .er-btn--glass:hover { background: rgba(255, 255, 255, .14); }
}

/* ---------- 底部快捷链接 ---------- */
.er-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 1.5rem;
  margin-top: 1.5rem;
  padding-top: .75rem;
  border-top: 1px solid var(--er-line);
}
.er-links a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 2.75rem;
  font-size: .875rem;
  color: var(--er-muted);
  text-decoration: none;
}
.er-links a:hover, .er-links a:focus-visible { color: var(--er-title); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 窄屏：按钮上下堆叠、占满宽度 ---------- */
@media (max-width: 575.98px) {
  .er-actions { flex-direction: column; }
  .er-btn { width: 100%; }
  .er-card { border-radius: 1.5rem; }
}

/* 用户选择减少动态时关闭全部动画 */
@media (prefers-reduced-motion: reduce) {
  .er-page .er-blob,
  .er-page .er-card,
  .er-page .er-code,
  .er-page .er-orb { animation: none; }
  .er-page .er-btn { transition: none; }
}