@charset "utf-8";
/* ══════════════════════════════════════════════════════════
   V声共创平台 · 状态页（信息提示 / 403 / 404）
   依赖 global.css
   403.php 与 404.php 可能由 nginx 直接吐出，
   因此这里不使用任何 JS，纯 CSS 即可完整呈现。
   ══════════════════════════════════════════════════════════ */

.state{position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;
  min-height:calc(100vh - 66px); padding:56px 20px 70px;
  background:
    radial-gradient(700px 420px at 50% -8%, rgba(91,61,245,.16), transparent 64%),
    radial-gradient(520px 360px at 14% 100%, rgba(0,166,160,.09), transparent 62%),
    radial-gradient(520px 360px at 86% 100%, rgba(255,77,109,.08), transparent 62%),
    var(--surface)}
.state::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:radial-gradient(circle, var(--line) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 68% 62% at 50% 44%, #000, transparent);
  mask-image:radial-gradient(ellipse 68% 62% at 50% 44%, #000, transparent)}

.state-card{position:relative; width:100%; max-width:560px; text-align:center}

/* 大号状态码 */
.state-code{font-family:var(--mono); font-size:clamp(76px,17vw,132px); font-weight:800;
  line-height:1; letter-spacing:-.04em;
  background:linear-gradient(120deg,var(--violet),var(--violet-2) 52%,#C24BFF);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}

/* 图标版（信息提示页用） */
.state-ic{width:78px; height:78px; margin:0 auto; border-radius:26px;
  display:grid; place-items:center; font-size:36px;
  color:var(--violet); background:var(--violet-soft);
  box-shadow:0 10px 28px rgba(91,61,245,.16)}
.state-ic.warn{color:var(--gold); background:var(--gold-soft); box-shadow:0 10px 28px rgba(232,147,12,.16)}
.state-ic.ok{color:var(--teal); background:var(--teal-soft); box-shadow:0 10px 28px rgba(0,166,160,.16)}

.state h1{margin:22px 0 0; font-size:clamp(22px,3.6vw,28px); font-weight:800; line-height:1.4}
.state .desc{margin:14px auto 0; max-width:440px; font-size:15px;
  color:var(--ink-2); line-height:1.88}
.state .desc a{color:var(--violet); font-weight:600}
.state .desc a:hover{text-decoration:underline}
.state .desc p{margin:0 0 8px}
.state .desc p:last-child{margin-bottom:0}
.state .tip{margin-top:12px; font-size:13px; color:var(--muted)}

.state-btns{display:flex; flex-wrap:wrap; gap:11px; justify-content:center; margin-top:30px}
.state-btns .go{display:inline-flex; align-items:center; gap:8px; color:#fff;
  padding:13px 26px; border-radius:999px; font-weight:700; font-size:15px;
  background:linear-gradient(120deg,var(--violet),var(--violet-2));
  box-shadow:var(--sh-v); transition:.24s var(--ez)}
.state-btns .go:hover{color:#fff; transform:translateY(-3px)}
.state-btns .back{display:inline-flex; align-items:center; gap:8px;
  background:var(--surface); color:var(--ink); border:1px solid var(--line);
  padding:13px 24px; border-radius:999px; font-weight:600; font-size:15px;
  transition:.24s var(--ez)}
.state-btns .back:hover{border-color:var(--ink); transform:translateY(-3px)}

/* 快捷去处 */
.state-links{display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-top:34px;
  padding-top:26px; border-top:1px solid var(--line-2)}
.state-links a{display:inline-flex; align-items:center; gap:7px;
  font-size:13.5px; font-weight:600; color:var(--ink-2);
  background:var(--surface); border:1px solid var(--line);
  padding:9px 16px; border-radius:999px; transition:.22s var(--ez)}
.state-links a:hover{border-color:var(--violet); color:var(--violet); transform:translateY(-2px)}
.state-links i{color:var(--violet); font-size:16px}

/* 简版：嵌在弹层/iframe 里时用 */
.state.min{min-height:280px; padding:40px 20px; background:var(--surface)}
.state.min::before{display:none}
.state.min .state-ic{width:62px; height:62px; border-radius:20px; font-size:29px}
.state.min h1{font-size:19px; margin-top:18px}
.state.min .state-btns{margin-top:22px}

/* 独立状态页的极简顶栏（403 / 404 不走模板，无法引用 header） */
.state-nav{border-bottom:1px solid var(--line); background:var(--surface)}
.state-nav .wrap{display:flex; align-items:center; height:66px}