/* 入口页样式 */
.stage {
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(201, 162, 74, 0.14), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(43, 63, 110, 0.18), transparent 55%),
    linear-gradient(160deg, #0f1a2f 0%, #16233f 55%, #1d2c50 100%);
  display: flex; flex-direction: column; align-items: center;
  padding: 40px 20px 30px;
}
.brand-top { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.brand-mark { width: auto; height: 44px; background: none; border: none; border-radius: 0; box-shadow: none; object-fit: contain; }
.brand-name { color: #f2e9d8; font-size: 19px; font-weight: 700; letter-spacing: .5px; }
.brand-sub { color: #9fb0d0; font-size: 12.5px; }

.card {
  width: 100%; max-width: 720px;
  background: var(--card); border-radius: 20px; padding: 40px 44px;
  box-shadow: 0 30px 80px rgba(4, 10, 24, 0.45);
}
.eyebrow { margin: 0 0 6px; font-size: 12px; letter-spacing: 3px; color: var(--gold-600); font-weight: 700; }
.card h1 { margin: 0 0 12px; font-size: 27px; letter-spacing: 1px; font-family: var(--serif); color: var(--navy-800); }
.lead { margin: 0 0 26px; color: var(--ink-2); font-size: 14.5px; }
.lead b { color: var(--navy-800); }

.code-box {
  background: #f8f6f0; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px 14px;
}
.code-box label { font-size: 13px; font-weight: 700; color: var(--ink-2); display: block; margin-bottom: 8px; }
.code-row { display: flex; gap: 10px; }
#code {
  flex: 1; font-size: 21px; letter-spacing: 4px; font-weight: 700; text-align: center;
  padding: 12px; border: 1.5px solid #cfc9b8; border-radius: 10px; outline: none; background: #fff; color: var(--navy-800);
}
#code:focus { border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(201,162,74,.18); }
.hint { margin: 10px 2px 0; font-size: 12.5px; color: var(--muted); }

.result { margin-top: 18px; border-radius: 14px; padding: 22px; text-align: center; background: #f2f7f3; border: 1px solid #cfe3d6; }
.result.error { background: #fdf3f3; border-color: #eacccc; }
.result .r-icon {
  width: 40px; height: 40px; margin: 0 auto 8px; border-radius: 50%;
  background: var(--ok); color: #fff; font-size: 20px; display: flex; align-items: center; justify-content: center;
}
.result.error .r-icon { background: var(--danger); }
.result h3 { margin: 4px 0 4px; font-size: 17px; color: var(--ink); }
.result .r-sub { margin: 2px 0 8px; color: var(--muted); font-size: 13.5px; }
.r-actions { display: flex; gap: 10px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }

.points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 24px; }
.point { background: #fbfaf6; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 13px; color: var(--ink); font-weight: 600; }
.point span { color: var(--gold-600); font-size: 12px; font-weight: 800; display: block; margin-bottom: 2px; letter-spacing: 1px; }
.point em { display: block; font-style: normal; font-weight: 400; color: var(--muted); font-size: 12px; margin-top: 3px; }

.admin-link { margin-top: 22px; }
.admin-link a { color: #8fa3c8; font-size: 13px; opacity: .8; }
.admin-link a:hover { opacity: 1; color: var(--gold-400); }

@media (max-width: 640px) {
  .card { padding: 26px 20px; }
  .card h1 { font-size: 22px; }
  .points { grid-template-columns: 1fr; }
  .code-row { flex-direction: column; }
}