/* 梦想时间胶囊 · 原生 CSS · 无框架 */

/* ── 变量 ──────────────────────────────────────── */
:root {
  --bg0: #0F172A;
  --bg1: #1E293B;
  --bg2: #263349;
  --gold: #E9C66A;
  --gold2: rgba(233,198,106,.15);
  --white: #fff;
  --t1: #F8FAFC;
  --t2: #94A3B8;
  --t3: #475569;
  --border: rgba(255,255,255,.08);
  --border2: rgba(255,255,255,.14);
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-full: 9999px;
}

/* ── 重置 ──────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{
  background:var(--bg0);
  color:var(--t1);
  font-family:'PingFang SC','Noto Sans SC','Microsoft YaHei',sans-serif;
  min-height:100vh;
  line-height:1.65;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{border:none;background:none;cursor:pointer;font:inherit}
input,textarea,select{font:inherit;color:var(--t1);background:transparent;border:none;outline:none}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-thumb{background:var(--bg2);border-radius:2px}
::selection{background:var(--gold2);color:var(--gold)}

/* ── 星空背景 canvas ───────────────────────────── */
#starfield{
  position:fixed;inset:0;
  pointer-events:none;
  z-index:0;
}

/* ── 布局容器 ──────────────────────────────────── */
.page{position:relative;z-index:1;min-height:100vh}
.center{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;padding:40px 20px;
}
.container{max-width:560px;width:100%;margin:0 auto;padding:0 20px}

/* ── 导航 ──────────────────────────────────────── */
nav{
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 40px;
  border-bottom:1px solid var(--border);
  position:relative;z-index:10;
}
.logo{
  font-size:18px;font-weight:600;letter-spacing:4px;
}
.logo span{color:var(--gold)}
.nav-links{display:flex;gap:24px;align-items:center}
.nav-links a{
  font-size:13px;letter-spacing:2px;color:var(--t2);
  transition:color .3s;
}
.nav-links a:hover{color:var(--white)}

/* ── 按钮 ──────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 36px;border-radius:var(--r-full);
  font-size:15px;font-weight:600;letter-spacing:.03em;
  cursor:pointer;transition:all .3s;white-space:nowrap;
}
.btn-primary{
  background:var(--gold);color:var(--bg0);
}
.btn-primary:hover{
  background:#F0D47A;
  transform:translateY(-2px);
  box-shadow:0 8px 32px rgba(233,198,106,.3);
}
.btn-primary:active{transform:translateY(0)}
.btn-primary:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.btn-ghost{
  background:transparent;color:var(--t1);
  border:1px solid var(--border2);
}
.btn-ghost:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.04)}
.btn-sm{padding:8px 20px;font-size:13px}
.btn-danger{background:#ef4444;color:#fff}
.btn-danger:hover{background:#dc2626}
.btn-success{background:#10b981;color:#fff}
.btn-success:hover{background:#059669}

/* ── 表单 ──────────────────────────────────────── */
.form-group{margin-bottom:20px}
.form-label{
  display:block;font-size:12px;letter-spacing:2px;
  color:var(--t2);margin-bottom:8px;
}
.form-input{
  width:100%;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:13px 18px;
  font-size:15px;color:var(--t1);
  transition:border-color .3s,box-shadow .3s;
}
.form-input::placeholder{color:var(--t3)}
.form-input:focus{
  border-color:rgba(233,198,106,.5);
  box-shadow:0 0 0 3px rgba(233,198,106,.08);
}
.form-textarea{
  min-height:200px;resize:vertical;line-height:1.8;
}
.form-select{
  width:100%;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:13px 18px;
  font-size:15px;color:var(--t1);
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}
.form-select option{background:var(--bg1);color:var(--t1)}

/* ── 玻璃卡片 ──────────────────────────────────── */
.card{
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:40px;
}
.card-sm{border-radius:var(--r-lg);padding:24px}

/* ── 提取码展示 ────────────────────────────────── */
.code-box{
  background:rgba(233,198,106,.08);
  border:1px solid rgba(233,198,106,.25);
  border-radius:var(--r-lg);
  padding:24px;
  text-align:center;
}
.code-value{
  font-family:'JetBrains Mono','Fira Code',monospace;
  font-size:28px;letter-spacing:8px;
  color:var(--gold);
}
.code-hint{font-size:12px;color:var(--t3);margin-top:8px;letter-spacing:1px}

/* ── 状态标签 ──────────────────────────────────── */
.badge{
  display:inline-block;padding:3px 10px;
  border-radius:var(--r-full);font-size:11px;letter-spacing:1px;
}
.badge-pending{background:rgba(234,179,8,.15);color:#fbbf24}
.badge-approved{background:rgba(16,185,129,.15);color:#34d399}
.badge-rejected{background:rgba(239,68,68,.15);color:#f87171}
.badge-delivered{background:rgba(99,102,241,.15);color:#a5b4fc}

/* ── 提示信息 ──────────────────────────────────── */
.alert{
  padding:12px 16px;border-radius:var(--r-sm);
  font-size:14px;margin-bottom:16px;
}
.alert-error{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.2);color:#fca5a5}
.alert-success{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.2);color:#6ee7b7}
.alert-info{background:rgba(233,198,106,.08);border:1px solid rgba(233,198,106,.2);color:var(--gold)}

/* ── 英雄区 ────────────────────────────────────── */
.hero{
  padding:80px 20px 60px;
  display:flex;flex-direction:column;
  align-items:center;text-align:center;
}
.hero-capsule{margin-bottom:48px}
.hero-title{
  font-size:clamp(32px,6vw,60px);
  font-weight:300;letter-spacing:8px;
  line-height:1.2;margin-bottom:16px;
}
.hero-title strong{color:var(--gold);font-weight:700}
.hero-sub{
  font-size:15px;letter-spacing:3px;
  color:var(--t2);margin-bottom:48px;line-height:2;
}
.hero-cta{font-size:16px;padding:16px 56px}

/* ── 数据统计行 ────────────────────────────────── */
.stats{
  display:flex;gap:56px;
  margin-top:64px;padding-top:40px;
  border-top:1px solid var(--border);
}
.stat-num{
  font-family:'JetBrains Mono',monospace;
  font-size:28px;font-weight:500;color:var(--gold);
  letter-spacing:2px;display:block;
}
.stat-label{
  font-size:11px;letter-spacing:3px;color:var(--t3);
  margin-top:4px;display:block;
}

/* ── 三保障 ────────────────────────────────────── */
.guarantees{
  display:flex;gap:40px;
  margin-top:48px;
  flex-wrap:wrap;justify-content:center;
}
.guarantee{
  display:flex;align-items:center;gap:8px;
  font-size:12px;letter-spacing:2px;color:var(--t3);
}
.guarantee-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--gold);opacity:.6;flex-shrink:0;
}

/* ── 写信卡片 ──────────────────────────────────── */
.write-card{
  max-width:600px;width:100%;
  margin:0 auto;padding:20px;
}
.step-label{
  font-size:13px;letter-spacing:3px;
  color:var(--t2);margin-bottom:24px;
}
.year-presets{display:flex;gap:8px;flex-wrap:wrap}
.year-btn{
  padding:8px 18px;border:1px solid var(--border);
  border-radius:var(--r-full);
  font-size:13px;color:var(--t2);
  cursor:pointer;transition:all .2s;background:transparent;
}
.year-btn:hover,.year-btn.active{
  border-color:rgba(233,198,106,.5);
  color:var(--gold);background:rgba(233,198,106,.06);
}

/* ── 管理后台表格 ──────────────────────────────── */
.admin-table{width:100%;border-collapse:collapse;font-size:14px}
.admin-table th{
  text-align:left;padding:10px 14px;
  font-size:11px;letter-spacing:2px;color:var(--t3);
  border-bottom:1px solid var(--border);font-weight:500;
}
.admin-table td{
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.04);
  vertical-align:top;
}
.admin-table tr:hover td{background:rgba(255,255,255,.02)}
.excerpt{color:var(--t2);font-size:13px;max-width:240px;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}

/* ── 分隔线 ────────────────────────────────────── */
.divider{
  display:flex;align-items:center;gap:16px;
  color:var(--t3);font-size:12px;letter-spacing:2px;
  margin:32px 0;
}
.divider::before,.divider::after{
  content:'';flex:1;height:1px;background:var(--border);
}

/* ── 动画 ──────────────────────────────────────── */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes breathe{
  0%,100%{opacity:.8;transform:scale(1)}
  50%{opacity:1;transform:scale(1.03)}
}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}
@keyframes goldPulse{
  0%,100%{box-shadow:0 0 20px rgba(233,198,106,.2)}
  50%{box-shadow:0 0 40px rgba(233,198,106,.5)}
}
.fade-up{animation:fadeUp .6s cubic-bezier(.16,1,.3,1) both}
.delay-1{animation-delay:.1s}
.delay-2{animation-delay:.2s}
.delay-3{animation-delay:.3s}
.delay-4{animation-delay:.4s}
.float{animation:float 3s ease-in-out infinite}

/* ── 胶囊 SVG ──────────────────────────────────── */
.capsule-svg{animation:breathe 3s ease-in-out infinite}
.capsule-svg:hover{cursor:pointer}

/* ── 弹窗遮罩 ──────────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;z-index:100;
  background:rgba(0,0,0,.7);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}
.modal-overlay.hidden{display:none}
.modal{
  background:var(--bg1);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:40px;
  max-width:480px;width:100%;
  animation:fadeUp .4s cubic-bezier(.16,1,.3,1) both;
}

/* ── 加载 spinner ──────────────────────────────── */
.spinner{
  width:20px;height:20px;border-radius:50%;
  border:2px solid rgba(233,198,106,.3);
  border-top-color:var(--gold);
  animation:spin .8s linear infinite;
  display:inline-block;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── 响应式 ────────────────────────────────────── */
@media(max-width:600px){
  nav{padding:16px 20px}
  .nav-links .nav-hide{display:none}
  .card{padding:24px 20px}
  .hero-title{letter-spacing:4px}
  .stats{gap:28px}
  .stat-num{font-size:22px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
  }
}