body { font-family: Arial, sans-serif; background:#f8f7f4; color:#111; margin:0; }
.wrap { max-width: 900px; margin: 32px auto 40px; padding: 0 20px; }
.card { background:#fff; border:1px solid #e6e3df; border-radius:14px; padding:20px; box-shadow:0 10px 30px rgba(0,0,0,0.06); }
.row { display:flex; gap:16px; flex-wrap:wrap; }
.btn { background:#111; color:#fff; border:none; padding:10px 16px; border-radius:999px; cursor:pointer; }
.btn.secondary { background:#f0f0f0; color:#111; }
.muted { color:#6e6e6e; font-size:13px; }
.input { width:100%; padding:10px 12px; border:1px solid #d6d2cc; border-radius:10px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; }
.hof-card { text-decoration:none; color:inherit; border:1px solid #e6e3df; border-radius:12px; overflow:hidden; background:#fff; }
.hof-card img { width:100%; display:block; aspect-ratio:3/4; object-fit:cover; }
.hof-meta { padding:10px 12px; font-size:13px; color:#6e6e6e; }
.hof-note { padding:0 12px 12px; font-size:12px; color:#444; }

.audit-header { display:flex; align-items:center; gap:12px; }
.audit-header img { width:56px; height:56px; object-fit:contain; }
.audit-header h2 { margin:0; }

.top-nav { position: sticky; top: 0; z-index: 10; background: rgba(248,247,244,0.92); border-bottom: 1px solid #e6e3df; backdrop-filter: blur(6px); }
.nav-inner { max-width: 1100px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #111; font-weight: 600; letter-spacing: 0.2px; }
.nav-brand img { width: 32px; height: 32px; object-fit: contain; }
.nav-links { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.nav-links a { text-decoration: none; color: #111; font-size: 13px; }
.nav-links a.muted { color: #6e6e6e; }
.nav-cta { display: inline-block; padding: 8px 14px; border-radius: 999px; background: #111; color: #fff; text-decoration: none; font-size: 12px; }
.nav-links .nav-cta { color: #fff; }
@media (max-width: 720px) {
  .nav-inner { flex-direction: column; align-items: flex-start; }
}

.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.auth-card { width: 100%; max-width: 420px; padding: 28px; border-radius: 18px; background: #fff; border: 1px solid #e6e3df; box-shadow: 0 18px 40px rgba(0,0,0,0.08); }
.auth-logo { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 16px; max-width: 200px; margin-left: auto; margin-right: auto; text-align: center; }
.auth-logo img { width: 36px; height: 36px; object-fit: contain; }
.auth-logo span { font-size: 15px; font-weight: 600; letter-spacing: 0.3px; }
.auth-title { margin: 0 0 10px; font-size: 22px; }
.auth-subtitle { margin: 0 0 18px; font-size: 13px; color: #6e6e6e; }
.auth-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.auth-link { font-size: 13px; text-decoration: none; color: #111; }
.auth-link.muted { color: #6e6e6e; }

body.auth-bg { background: #f8f7f4; --auth-bg-image: url("../auth-bg/01.jpg"); --auth-bg-image-next: var(--auth-bg-image); }
body.auth-bg::before,
body.auth-bg::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: linear-gradient(120deg, rgba(8, 8, 8, 0.75), rgba(20, 20, 20, 0.4)), var(--auth-bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
  transition: opacity 1.4s ease;
  pointer-events: none;
}
body.auth-bg::after {
  background-image: linear-gradient(120deg, rgba(8, 8, 8, 0.75), rgba(20, 20, 20, 0.4)), var(--auth-bg-image-next);
  opacity: 0;
}
body.auth-bg.is-fading::after {
  opacity: 1;
}
body.auth-bg .auth-shell { position: relative; z-index: 1; }

.hof-public-hero { display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(250px, 0.8fr); align-items:stretch; gap:20px; }
.hof-public-hero-main { flex:1; min-width:260px; }
.hof-public-kicker { margin:0 0 8px; color:#6e6e6e; font-size:12px; letter-spacing:0.8px; text-transform:uppercase; }
.hof-public-title { margin:0; font-size:34px; line-height:1.12; }
.hof-public-subtitle { margin:12px 0 0; color:#4d4d4d; max-width:620px; }
.hof-public-cta-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }

.hof-public-highlight {
  border-radius:14px;
  border:1px solid #ddd6cb;
  background:linear-gradient(150deg, #fff8ea 0%, #ffe8bf 100%);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  justify-content:space-between;
}

.hof-public-prize {
  padding:2px 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:left;
}
.hof-public-prize-label { font-size:30px; color:#3f2e0f; line-height:1; font-weight:700; }
.hof-public-prize-value { margin-top:6px; font-size:46px; color:#111; line-height:1; letter-spacing:-0.4px; }
.hof-public-highlight-copy { margin:0; color:#4d3a1e; font-size:14px; }
.hof-public-cta-stack { display:flex; flex-direction:column; gap:8px; }
.hof-public-cta-stack .btn { text-align:center; }

.hof-public-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.hof-public-step { border:1px solid #e6e3df; border-radius:12px; background:#fcfbf9; padding:14px; }
.hof-public-step h3 { margin:0 0 8px; font-size:16px; }
.hof-public-step p { margin:0; }

.hof-public-empty { padding:16px 0 4px; display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.hof-public-empty p { margin:0; }

.hof-public-bottom-cta { text-align:center; }
.hof-public-bottom-cta .hof-public-cta-row { justify-content:center; }

@media (max-width: 860px) {
  .hof-public-hero { grid-template-columns:1fr; }
  .hof-public-prize-value { font-size:38px; }
  .hof-public-steps { grid-template-columns:1fr; }
}

@media (max-width: 560px) {
  .hof-public-title { font-size:28px; }
}