:root {
  --bg: #7a0c0c; /* 中国红 基底 */
  --card: #5c0a0a;
  --card-2: #4a0808;
  --fg: #fff5f2;
  --muted: #f9cfbf;
  --primary: #d61f1f; /* 正红 */
  --primary-2: #f0513b; /* 亮红 */
  --gold: #f5c04a; /* 锦金 */
  --ring: 6 80% 52%;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Inter", "Noto Sans SC", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  color: var(--fg);
  background: radial-gradient(1200px 800px at 80% -10%, rgba(214,31,31,.22), transparent 60%),
              radial-gradient(900px 600px at -10% 10%, rgba(245,192,74,.12), transparent 60%),
              var(--bg);
  overflow-x: hidden;
}

.noise { position: fixed; inset: 0; pointer-events: none; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity=".03"/></svg>'); opacity: .7; mix-blend-mode: overlay; }

.site-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; backdrop-filter: saturate(140%) blur(10px);
  background: linear-gradient(0deg, transparent, rgba(90,10,10,.6));
  border-bottom: 1px solid rgba(245,192,74,.22);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.brand .brand-text { font-weight: 800; letter-spacing: .08em; }
.logo { filter: drop-shadow(0 6px 16px rgba(214,31,31,.5)); }
.nav { display: flex; gap: 18px; }
.nav a { color: var(--muted); text-decoration: none; font-weight: 600; }
.nav a:hover { color: var(--fg); }

.hero { position: relative; min-height: calc(100dvh - 72px); display: grid; place-items: center; padding: 48px 16px 24px; }
.grid-bg { position: absolute; inset: 0; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80"><defs><pattern id="p" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M0 0 H20 V20 H0 Z M0 0 L20 20 M20 0 L0 20" fill="none" stroke="%23f5c04a" stroke-opacity="0.12" stroke-width="0.8"/></pattern></defs><rect width="100%" height="100%" fill="url(%23p)"/></svg>'); background-size: 80px 80px; mask-image: radial-gradient(ellipse at center, black, transparent 65%); opacity: .7; }
.hero-inner { position: relative; text-align: center; max-width: 980px; margin: 0 auto; }
.title { margin: 0 0 12px; line-height: 1; }
.title-line { display: block; font-size: clamp(44px, 8vw, 120px); font-weight: 900; letter-spacing: .02em; }
.title-sub { display: block; margin-top: 6px; font-size: clamp(18px, 3.2vw, 28px); font-weight: 800; background: linear-gradient(90deg, #ffe7a8, #fff3cf); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: .08em; }
.tagline { margin: 0 auto 20px; color: var(--muted); font-size: clamp(14px, 2.2vw, 18px); max-width: 720px; }

.vision { margin: 0 auto 32px; max-width: 800px; text-align: center; }
.vision h2 { margin: 0 0 12px; font-size: clamp(20px, 3.5vw, 28px); font-weight: 700; color: var(--fg); }
.vision p { margin: 0; color: var(--muted); font-size: clamp(14px, 2vw, 16px); line-height: 1.6; }

.cta { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; border-radius: 12px; text-decoration: none; font-weight: 700; border: 1px solid transparent; transition: all .25s ease; }
.btn.primary { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: white; box-shadow: 0 10px 26px rgba(214,31,31,.35), 0 0 0 1px rgba(245,192,74,.25) inset; }
.btn.primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(214,31,31,.5), 0 0 0 1px rgba(245,192,74,.35) inset; }
.btn.ghost { background: transparent; color: var(--fg); border-color: rgba(245,192,74,.28); }
.btn.ghost:hover { background: rgba(245,192,74,.08); }

.cards { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; padding: 24px; max-width: 1200px; margin: 0 auto; }
.card { grid-column: span 12; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.05)); border: 1px solid rgba(245,192,74,.22); border-radius: 16px; padding: 20px; box-shadow: inset 0 1px 0 rgba(245,192,74,.18), 0 20px 60px rgba(40,0,0,.35); }
.card h3 { margin: 6px 0 8px; font-size: 22px; }
.card p { margin: 0 0 12px; color: var(--muted); }
.card-pill { display: inline-block; font-size: 12px; padding: 6px 10px; border-radius: 999px; background: rgba(245,192,74,.15); border: 1px solid rgba(245,192,74,.4); color: #fff; }
.pill-red { background: rgba(214,31,31,.22); border-color: rgba(214,31,31,.5); }
.pill-gold { background: rgba(245,192,74,.22); border-color: rgba(245,192,74,.5); }
.card-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 10px; text-decoration: none; color: var(--fg); background: #3f0606; border: 1px solid rgba(245,192,74,.28); }
.chip:hover { border-color: rgba(245,192,74,.45); }

.about { padding: 20px 24px 8px; }
.about-inner { max-width: 900px; margin: 0 auto; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.05)); border: 1px solid rgba(245,192,74,.22); border-radius: 16px; padding: 20px; box-shadow: inset 0 1px 0 rgba(245,192,74,.18), 0 20px 60px rgba(40,0,0,.35); }
.about h2 { margin: 4px 0 10px; }
.about p { margin: 0; color: var(--muted); }

.guestbook { padding: 10px 24px 24px; }
.guestbook-container { max-width: 1000px; margin: 0 auto; }
.guestbook h2 { text-align: center; margin: 0 0 8px; }
.guestbook-subtitle { text-align: center; color: var(--muted); margin: 0 0 24px; }

.guestbook-form { display: grid; grid-template-columns: repeat(12,1fr); gap: 14px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.05)); border: 1px solid rgba(245,192,74,.22); border-radius: 16px; padding: 20px; box-shadow: inset 0 1px 0 rgba(245,192,74,.18), 0 20px 60px rgba(40,0,0,.35); margin-bottom: 24px; }
.guestbook-form h2 { grid-column: span 12; margin: 0; }
.guestbook-form .form-row { grid-column: span 12; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.guestbook-form label { display: grid; gap: 6px; }
.guestbook-form .full { grid-column: span 12; }
.guestbook-form input, .guestbook-form textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(245,192,74,.28); background: #3a0707; color: var(--fg); outline: none; transition: border-color .2s ease, box-shadow .2s ease; }
.guestbook-form input:focus, .guestbook-form textarea:focus { border-color: rgba(245,192,74,.5); box-shadow: 0 0 0 4px rgba(214,31,31,.25); }
.char-count { text-align: right; font-size: 12px; color: var(--muted); margin-top: 4px; }

/* 验证码样式 */
.captcha-container { grid-column: span 12; margin-bottom: 16px; }
.captcha-label { 
  display: grid; 
  gap: 6px; 
}
.captcha-label span { 
  font-weight: 600; 
  font-size: 16px; 
  color: var(--fg); 
}
.captcha-row { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  flex-wrap: nowrap; 
}
.question-box { 
  display: flex; 
  align-items: center; 
  gap: 8px; 
  padding: 10px 12px; 
  background: rgba(245,192,74,.08); 
  border: 1px solid rgba(245,192,74,.2); 
  border-radius: 8px; 
  height: 40px; 
  box-sizing: border-box; 
  flex-shrink: 0; 
  cursor: pointer; 
  transition: all .2s ease; 
}
.question-box:hover { 
  background: rgba(245,192,74,.15); 
  border-color: rgba(245,192,74,.3); 
}
.question-box:hover .refresh-captcha { 
  color: var(--fg); 
}
.question-box span { 
  font-weight: 700; 
  font-size: 16px; 
  color: var(--fg); 
  white-space: nowrap; 
}
.refresh-captcha { 
  font-size: 18px; 
  color: var(--muted); 
  transition: all .2s ease; 
}
#captchaInput { 
  width: 120px; 
  padding: 10px 12px; 
  font-size: 14px; 
  height: 40px; 
  box-sizing: border-box; 
  flex-shrink: 0; 
}
.captcha-row .btn { 
  margin: 0; 
  padding: 10px 16px; 
  font-size: 14px; 
  white-space: nowrap; 
  height: 40px; 
  box-sizing: border-box; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  flex-shrink: 0; 
}

.messages-container { 
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.05)); 
  border: 1px solid rgba(245,192,74,.22); 
  border-radius: 16px; 
  padding: 20px; 
  box-shadow: inset 0 1px 0 rgba(245,192,74,.18), 0 20px 60px rgba(40,0,0,.35); 
  position: relative; 
}
.messages-header { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  margin-bottom: 16px; 
  flex-wrap: wrap; 
  gap: 12px; 
}
.messages-header h3 { 
  margin: 0; 
  text-align: left; 
}
.admin-controls { 
  position: absolute; 
  top: 20px; 
  right: 20px; 
  display: flex; 
  align-items: center; 
}

.messages-list { display: grid; gap: 16px; }
.message-item { background: rgba(255,255,255,.03); border: 1px solid rgba(245,192,74,.15); border-radius: 12px; padding: 16px; position: relative; transition: all .2s ease; }
.message-item:hover { border-color: rgba(245,192,74,.25); background: rgba(255,255,255,.05); }
.message-item.admin-mode { border-color: rgba(214,31,31,.3); }
.message-item.admin-mode:hover { border-color: rgba(214,31,31,.5); }

.message-header { 
  display: flex; 
  justify-content: space-between; 
  align-items: flex-start; 
  margin-bottom: 8px; 
  flex-wrap: wrap; 
  gap: 8px; 
  position: relative; 
}
.message-info { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.message-author { font-weight: 600; color: var(--fg); }
.message-location { color: var(--muted); font-size: 14px; }
.message-ip { color: var(--muted); font-size: 12px; font-family: monospace; }
.message-time { 
  color: var(--muted); 
  font-size: 12px; 
  display: flex; 
  align-items: center; 
  gap: 8px; 
}
.message-content { color: var(--muted); line-height: 1.5; margin: 0; }
.message-actions { 
  display: flex; 
  align-items: center; 
  opacity: 0; 
  transition: opacity .2s ease; 
}
.message-item.admin-mode .message-actions { opacity: 1; }
.delete-btn { background: rgba(214,31,31,.2); border: 1px solid rgba(214,31,31,.4); color: #ff6b6b; padding: 4px 8px; border-radius: 6px; font-size: 12px; cursor: pointer; transition: all .2s ease; }
.delete-btn:hover { background: rgba(214,31,31,.3); border-color: rgba(214,31,31,.6); }

.loading { text-align: center; color: var(--muted); padding: 20px; }
.empty-state { text-align: center; color: var(--muted); padding: 40px 20px; }
.empty-state h4 { margin: 0 0 8px; color: var(--fg); }
.empty-state p { margin: 0; }

.admin-controls { 
  display: flex; 
  align-items: center; 
}
.admin-controls .btn { 
  font-size: 14px; 
  padding: 8px 16px; 
  background: transparent; 
  border: 1px solid rgba(245,192,74,.28); 
  color: var(--muted); 
  text-decoration: none; 
  font-weight: 600; 
  transition: all .2s ease; 
}
.admin-controls .btn:hover { 
  color: var(--fg); 
  background: rgba(245,192,74,.08); 
  border-color: rgba(245,192,74,.45); 
}

.pagination-controls { background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.05)); border: 1px solid rgba(245,192,74,.22); border-radius: 16px; padding: 16px; margin-top: 16px; box-shadow: inset 0 1px 0 rgba(245,192,74,.18), 0 20px 60px rgba(40,0,0,.35); }
.pagination-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; color: var(--muted); font-size: 14px; }
.pagination-buttons { display: flex; gap: 12px; justify-content: center; margin-bottom: 12px; }
.auto-scroll-controls { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--muted); font-size: 14px; }
.scroll-speed select { background: #3a0707; border: 1px solid rgba(245,192,74,.28); color: var(--fg); padding: 4px 8px; border-radius: 6px; margin-left: 4px; }

@media (max-width: 720px) {
  .guestbook-form .form-row { grid-template-columns: 1fr; }
  .message-header { flex-direction: column; align-items: flex-start; gap: 4px; }
  .message-actions { position: static; opacity: 1; margin-top: 8px; }
  
  /* 移动端留言头部布局 */
  .messages-header { 
    flex-direction: column; 
    align-items: center; 
    gap: 8px; 
  }
  .messages-header h3 { 
    text-align: center; 
  }
  
  /* 移动端管理模式按钮 */
  .admin-controls { 
    position: static; 
    margin-top: 12px; 
  }
  
  /* 验证码响应式布局 */
  .captcha-row { 
    flex-direction: column; 
    gap: 8px; 
    align-items: stretch; 
  }
  .captcha-label span { 
    font-size: 14px; 
  }
  .question-box { 
    padding: 8px 10px; 
    height: 36px; 
    box-sizing: border-box; 
  }
  .question-box span { 
    font-size: 14px; 
  }
  #captchaInput { 
    width: 100%; 
    padding: 8px 10px; 
    font-size: 13px; 
    height: 36px; 
  }
  .captcha-row .btn { 
    padding: 8px 12px; 
    font-size: 13px; 
    height: 36px; 
    width: 100%; 
  }
}

.site-footer { text-align: center; color: var(--muted); padding: 24px; border-top: 1px solid rgba(245,192,74,.22); }

@media (min-width: 720px) {
  .cards .card { grid-column: span 4; }
  .contact-form label { grid-column: span 6; }
  .contact-form .full { grid-column: span 12; }
}

@media (prefers-reduced-motion: no-preference) {
  .title-line { animation: rise 900ms cubic-bezier(.2,.8,.2,1) both; }
  .title-sub { animation: fade 1000ms 120ms ease both; }
  .card { animation: float 1200ms ease both; }
}

@keyframes rise { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes float { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }