/* ============================================================
   volunteer-hours-star.css
   志愿服务时长与星级评定 · 星空成就风
   Design tokens（浅主题：靛蓝文字 + 米金底；深主题覆盖在文末）
   ============================================================ */

.vhs {
  --vhs-night: #223059;
  --vhs-night-2: #34477e;
  --vhs-gold: #d9a53a;
  --vhs-gold-bright: #f5c95c;
  --vhs-gold-deep: #9a6d12;
  --vhs-gold-soft: #fbf1d8;
  --vhs-ink: #22304f;
  --vhs-ink-soft: #5d6a8a;
  --vhs-line: #e8dfc8;
  --vhs-bg: #faf6ea;
  --vhs-card: #ffffff;
  --vhs-ok: #3f8f6b;
  --vhs-ok-soft: #e7f4ee;
  --vhs-shadow: 0 2px 10px rgba(34, 48, 89, 0.06), 0 1px 3px rgba(154, 109, 18, 0.06);
  --vhs-shadow-lg: 0 14px 36px rgba(34, 48, 89, 0.14), 0 4px 12px rgba(154, 109, 18, 0.10);
  --vhs-radius: 14px;
  --vhs-radius-sm: 10px;
}

.vhs {
  max-width: 1160px;
  margin: 0 auto;
  padding: 28px 20px 40px;
  color: var(--vhs-ink);
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  background: var(--vhs-bg);
  font-size: 14.5px;
  line-height: 1.75;
}

.vhs-wrap { position: relative; z-index: 1; }

/* ========== Hero：夜空渐变横幅 ========== */
.vhs-hero {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 38px 44px 30px;
  margin-bottom: 26px;
  background:
    radial-gradient(90% 120% at 85% -10%, rgba(245, 201, 92, 0.20) 0%, transparent 55%),
    radial-gradient(70% 90% at 5% 110%, rgba(90, 120, 200, 0.35) 0%, transparent 60%),
    linear-gradient(150deg, #1b2545 0%, var(--vhs-night) 55%, #2b3a68 100%);
  border: 1px solid #3a4c80;
  box-shadow: var(--vhs-shadow-lg);
}

.vhs-hero-stars {
  position: absolute; inset: 0;
  pointer-events: none;
  color: rgba(245, 201, 92, 0.55);
}
.vhs-hero-stars span {
  position: absolute;
  font-size: 12px;
  animation: vhs-twinkle 3.2s ease-in-out infinite;
}
.vhs-hero-stars span:nth-child(1) { top: 12%; left: 6%; font-size: 10px; animation-delay: 0s; }
.vhs-hero-stars span:nth-child(2) { top: 22%; left: 24%; font-size: 14px; animation-delay: .6s; }
.vhs-hero-stars span:nth-child(3) { top: 8%; left: 46%; font-size: 9px; animation-delay: 1.1s; }
.vhs-hero-stars span:nth-child(4) { top: 18%; left: 66%; font-size: 18px; color: rgba(245, 201, 92, 0.85); animation-delay: .3s; }
.vhs-hero-stars span:nth-child(5) { top: 34%; left: 82%; font-size: 11px; animation-delay: 1.5s; }
.vhs-hero-stars span:nth-child(6) { top: 6%; left: 92%; font-size: 13px; animation-delay: .9s; }
.vhs-hero-stars span:nth-child(7) { top: 44%; left: 12%; font-size: 10px; animation-delay: 2s; }
.vhs-hero-stars span:nth-child(8) { top: 40%; left: 55%; font-size: 8px; animation-delay: 1.8s; }
@keyframes vhs-twinkle {
  0%, 100% { opacity: .35; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.25); }
}

.vhs-badge {
  display: inline-block;
  padding: 5px 14px;
  font-size: 12px;
  color: var(--vhs-gold-bright);
  background: rgba(245, 201, 92, 0.12);
  border: 1px solid rgba(245, 201, 92, 0.35);
  border-radius: 999px;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
  font-weight: 600;
}

.vhs-hero-txt { position: relative; z-index: 1; }
.vhs-hero h1 {
  font-size: 32px;
  line-height: 1.25;
  margin: 0 0 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #f3f6ff;
}
.vhs-hero h1 i {
  font-style: normal;
  background: linear-gradient(90deg, var(--vhs-gold-bright) 0%, #ffe9ad 60%, var(--vhs-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.vhs-hero p {
  margin: 0 0 22px;
  font-size: 14.5px;
  line-height: 1.75;
  color: #b9c4e4;
  max-width: 760px;
}
.vhs-hero p em {
  font-style: normal;
  font-weight: 600;
  color: var(--vhs-gold-bright);
}

/* ========== 五级金色阶梯（hero 内横向台阶） ========== */
.vhs-stairs {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.vhs-step {
  flex: 1;
  min-width: 96px;
  text-align: center;
  padding: 10px 8px 12px;
  border-radius: 12px 12px 10px 10px;
  border: 1px solid rgba(245, 201, 92, 0.22);
  background: rgba(255, 255, 255, 0.04);
  color: #8f9cc4;
  transition: all .25s ease;
}
.vhs-step-stars {
  font-size: 14px;
  letter-spacing: 1px;
  color: #55648f;
  line-height: 1.4;
  min-height: 20px;
}
.vhs-step-bar {
  margin: 8px auto 6px;
  width: 70%;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, rgba(85, 100, 143, 0.5), rgba(85, 100, 143, 0.2));
  transition: all .3s ease;
}
.vhs-step-name { font-size: 13px; font-weight: 700; }
.vhs-step-hours { font-size: 11.5px; opacity: .8; }
.vhs-step-prog {
  margin: 7px auto 0;
  height: 5px;
  width: 78%;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.10);
  overflow: hidden;
}
.vhs-step-progfill {
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--vhs-gold), var(--vhs-gold-bright));
  transition: width .9s cubic-bezier(.22, .8, .3, 1);
}
.vhs-step-pct { font-size: 11px; margin-top: 4px; color: var(--vhs-gold-bright); font-weight: 700; min-height: 16px; }

.vhs-step.vhs-step-on {
  border-color: var(--vhs-gold-bright);
  background: linear-gradient(180deg, rgba(245, 201, 92, 0.22), rgba(245, 201, 92, 0.06));
  color: #ffe9ad;
  box-shadow: 0 0 18px rgba(245, 201, 92, 0.45), inset 0 0 12px rgba(245, 201, 92, 0.15);
}
.vhs-step.vhs-step-on .vhs-step-stars { color: var(--vhs-gold-bright); text-shadow: 0 0 10px rgba(245, 201, 92, 0.7); }
.vhs-step.vhs-step-on .vhs-step-bar { background: linear-gradient(180deg, var(--vhs-gold-bright), var(--vhs-gold)); }

.vhs-step.vhs-step-done { color: #a9b6dd; border-color: rgba(169, 182, 221, 0.35); }
.vhs-step.vhs-step-done .vhs-step-stars { color: #cdd8f5; }
.vhs-step.vhs-step-done .vhs-step-bar { background: linear-gradient(180deg, rgba(205, 216, 245, 0.6), rgba(205, 216, 245, 0.25)); }

.vhs-step.vhs-step-next { border-color: rgba(245, 201, 92, 0.55); }

/* ========== 主面板 ========== */
.vhs-desk {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}
.vhs-card {
  background: var(--vhs-card);
  border: 1px solid var(--vhs-line);
  border-radius: var(--vhs-radius);
  padding: 24px 24px 22px;
  box-shadow: var(--vhs-shadow);
}
.vhs-card h2 {
  margin: 0 0 16px;
  font-size: 17px; font-weight: 800;
  color: var(--vhs-ink);
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--vhs-line);
}

.vhs-lab {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--vhs-ink);
  margin: 14px 0 8px;
}
.vhs-lab:first-of-type { margin-top: 0; }
.vhs-hint { font-size: 12px; font-weight: 400; color: var(--vhs-ink-soft); }

.vhs-mtabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
.vhs-mtab {
  border: 1px solid var(--vhs-line);
  background: var(--vhs-bg);
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13.5px; font-weight: 600;
  color: var(--vhs-ink-soft);
  cursor: pointer;
  transition: all .18s ease;
}
.vhs-mtab:hover { border-color: var(--vhs-gold); color: var(--vhs-gold-deep); }
.vhs-mtab.on {
  background: linear-gradient(90deg, var(--vhs-night) 0%, var(--vhs-night-2) 100%);
  color: var(--vhs-gold-bright);
  border-color: transparent;
  box-shadow: 0 6px 14px rgba(34, 48, 89, 0.30);
}

.vhs-block { margin-bottom: 4px; }
.vhs-field { margin-bottom: 12px; }
.vhs-field .vhs-lab { margin-top: 0; }
.vhs-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vhs-grid3 { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 12px; }
.vhs-grid5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }

.vhs-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--vhs-line);
  border-radius: var(--vhs-radius-sm);
  background: var(--vhs-bg);
  font-size: 14px;
  color: var(--vhs-ink);
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.vhs-input:focus {
  outline: none;
  border-color: var(--vhs-gold);
  box-shadow: 0 0 0 3px rgba(217, 165, 58, 0.15);
  background: var(--vhs-card);
}

.vhs-calcline {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--vhs-ink-soft);
  background: var(--vhs-gold-soft);
  border-left: 3px solid var(--vhs-gold);
  border-radius: 8px;
  padding: 8px 12px;
}

.vhs-stdtoggle {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  margin: 6px 0 10px;
  border: 1px dashed var(--vhs-line);
  border-radius: var(--vhs-radius-sm);
  background: transparent;
  font-size: 13.5px; font-weight: 600;
  color: var(--vhs-ink-soft);
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
}
.vhs-stdtoggle:hover { border-color: var(--vhs-gold); color: var(--vhs-gold-deep); }
.vhs-stdarrow { transition: transform .2s; }
.vhs-stdtoggle.open .vhs-stdarrow { transform: rotate(180deg); }
.vhs-stdpanel { padding: 4px 2px 0; }
.vhs-note { margin: 6px 0 0; font-size: 12px; color: var(--vhs-ink-soft); line-height: 1.7; }

.vhs-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.vhs-btn {
  padding: 11px 22px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .18s;
  font-family: inherit;
}
.vhs-btn-go {
  background: linear-gradient(90deg, var(--vhs-gold) 0%, var(--vhs-gold-bright) 100%);
  color: #3d2c07;
  border: none;
  box-shadow: 0 4px 10px rgba(217, 165, 58, 0.35);
}
.vhs-btn-go:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(217, 165, 58, 0.45); }
.vhs-btn-ghost {
  background: var(--vhs-card);
  border: 1px solid var(--vhs-line);
  color: var(--vhs-ink-soft);
}
.vhs-btn-ghost:hover { border-color: var(--vhs-gold); color: var(--vhs-gold-deep); }

/* ========== 结果区 ========== */
.vhs-summary { margin-top: 4px; }
.vhs-summary-ph { text-align: center; padding: 34px 16px; color: var(--vhs-ink-soft); }
.vhs-ph-icon { font-size: 40px; margin-bottom: 8px; }
.vhs-summary-ph p { margin: 10px 0 0; font-size: 13.5px; line-height: 1.7; }

.vhs-starcard {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 20px;
  border-radius: 14px;
  background: linear-gradient(150deg, var(--vhs-night) 0%, var(--vhs-night-2) 100%);
  border: 1px solid #3a4c80;
  margin-bottom: 16px;
  box-shadow: var(--vhs-shadow);
}
.vhs-starglyph {
  font-size: 44px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--vhs-gold-bright);
  text-shadow: 0 0 16px rgba(245, 201, 92, 0.6);
  letter-spacing: 2px;
  flex-shrink: 0;
  max-width: 190px;
}
.vhs-starmeta { min-width: 0; }
.vhs-starname { font-size: 20px; font-weight: 800; color: #f3f6ff; margin-bottom: 4px; }
.vhs-starhours { font-size: 13.5px; color: #b9c4e4; line-height: 1.7; }
.vhs-starhours b { color: var(--vhs-gold-bright); font-weight: 800; }

.vhs-prog { margin-bottom: 14px; }
.vhs-prog-head {
  display: flex; justify-content: space-between;
  font-size: 12.5px; font-weight: 700;
  color: var(--vhs-ink-soft);
  margin-bottom: 6px;
}
.vhs-prog-head span:last-child { color: var(--vhs-gold-deep); }
.vhs-prog-track {
  height: 10px;
  border-radius: 99px;
  background: var(--vhs-gold-soft);
  border: 1px solid var(--vhs-line);
  overflow: hidden;
}
.vhs-prog-bar {
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--vhs-gold), var(--vhs-gold-bright));
  transition: width .9s cubic-bezier(.22, .8, .3, 1);
}

.vhs-line {
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--vhs-line);
  background: linear-gradient(180deg, var(--vhs-gold-soft) 0%, var(--vhs-card) 100%);
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--vhs-ink);
  margin-bottom: 10px;
}
.vhs-line b { color: var(--vhs-gold-deep); }
.vhs-line.vhs-line-ok { background: linear-gradient(180deg, var(--vhs-ok-soft) 0%, var(--vhs-card) 100%); border-color: #bfe3d2; }
.vhs-line.vhs-line-ok b { color: var(--vhs-ok); }

/* ========== 认定清单 / 反推 ========== */
.vhs-certlist { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.9; color: var(--vhs-ink-soft); }
.vhs-certlist li { margin-bottom: 8px; }
.vhs-certlist li::marker { color: var(--vhs-gold); }
.vhs-certlist b { color: var(--vhs-ink); }
.vhs-revout { margin-top: 14px; }
.vhs-revout b { color: var(--vhs-gold-deep); }

/* ========== 风险提示 ========== */
.vhs-disclaimer {
  padding: 14px 18px;
  background: var(--vhs-gold-soft);
  border: 1px dashed var(--vhs-gold);
  border-radius: 12px;
  text-align: center;
}
.vhs-disclaimer p { margin: 0; font-size: 13px; color: var(--vhs-ink-soft); line-height: 1.8; }
.vhs-disclaimer b { color: var(--vhs-gold-deep); }

/* ========== 响应式 ========== */
@media (max-width: 860px) {
  .vhs-hero { padding: 26px 20px 22px; }
  .vhs-hero h1 { font-size: 26px; }
  .vhs-desk { grid-template-columns: 1fr; }
  .vhs-stairs { overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .vhs-step { min-width: 88px; flex: 0 0 auto; }
  .vhs-grid3 { grid-template-columns: 1fr; }
  .vhs-grid5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 540px) {
  .vhs { padding: 16px 12px 24px; }
  .vhs-card { padding: 16px 16px 14px; }
  .vhs-btn { padding: 9px 16px; font-size: 13px; }
  .vhs-grid2 { grid-template-columns: 1fr; }
  .vhs-starcard { flex-direction: column; align-items: flex-start; gap: 10px; }
  .vhs-starglyph { font-size: 34px; }
}

/* ========== 深主题覆盖 ========== */
:root[data-theme="dark"] .vhs {
  --vhs-night: #1a2440;
  --vhs-night-2: #263459;
  --vhs-gold: #d9a53a;
  --vhs-gold-bright: #f5c95c;
  --vhs-gold-deep: #e8c87a;
  --vhs-gold-soft: #2a2c3d;
  --vhs-ink: #e8ecf7;
  --vhs-ink-soft: #9aa7c7;
  --vhs-line: #334066;
  --vhs-bg: #10152a;
  --vhs-card: #171f38;
  --vhs-ok: #6fc79b;
  --vhs-ok-soft: #16302a;
  --vhs-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  --vhs-shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.55);
}
:root[data-theme="dark"] .vhs-hero {
  background:
    radial-gradient(90% 120% at 85% -10%, rgba(245, 201, 92, 0.14) 0%, transparent 55%),
    radial-gradient(70% 90% at 5% 110%, rgba(70, 100, 180, 0.28) 0%, transparent 60%),
    linear-gradient(150deg, #0d1226 0%, #16203c 55%, #1d2a4d 100%);
  border-color: #2b3a63;
}
:root[data-theme="dark"] .vhs-badge { color: var(--vhs-gold-bright); background: rgba(245, 201, 92, 0.10); border-color: rgba(245, 201, 92, 0.30); }
:root[data-theme="dark"] .vhs-mtab { background: #171f38; border-color: #334066; color: var(--vhs-ink-soft); }
:root[data-theme="dark"] .vhs-mtab.on { background: linear-gradient(90deg, #263459, #33477e); color: var(--vhs-gold-bright); }
:root[data-theme="dark"] .vhs-input { background: #10152a; border-color: #334066; color: var(--vhs-ink); }
:root[data-theme="dark"] .vhs-input:focus { background: #171f38; }
:root[data-theme="dark"] .vhs-calcline { background: #23283d; color: #cdd5ea; border-left-color: var(--vhs-gold); }
:root[data-theme="dark"] .vhs-stdtoggle { border-color: #334066; color: var(--vhs-ink-soft); }
:root[data-theme="dark"] .vhs-btn-ghost { background: #171f38; border-color: #334066; color: var(--vhs-ink-soft); }
:root[data-theme="dark"] .vhs-btn-go { color: #1c1503; }
:root[data-theme="dark"] .vhs-prog-track { background: #23283d; border-color: #334066; }
:root[data-theme="dark"] .vhs-line { background: linear-gradient(180deg, #23283d 0%, #171f38 100%); border-color: #334066; color: var(--vhs-ink); }
:root[data-theme="dark"] .vhs-line.vhs-line-ok { background: linear-gradient(180deg, #16302a 0%, #171f38 100%); border-color: #2b5c48; }
:root[data-theme="dark"] .vhs-certlist b { color: var(--vhs-ink); }
:root[data-theme="dark"] .vhs-disclaimer { background: #1a2036; border-color: #4a4223; }
:root[data-theme="dark"] .vhs-disclaimer b { color: var(--vhs-gold-deep); }
:root[data-theme="dark"] .vhs-step { border-color: rgba(154, 167, 199, 0.25); color: #7c89ad; }
:root[data-theme="dark"] .vhs-step.vhs-step-on { border-color: var(--vhs-gold-bright); color: #ffe9ad; }