/* ============ 设计变量（穿透 Shadow DOM）· 官方「草坪音乐分享会」清新风 ============ */
:root {
  color-scheme: light only;   /* 锁定浅色：黑暗模式下表单控件/滚动条仍按浅色渲染 */
  --c-bg-0: #eef7f2;
  --c-bg-1: #e4f2ea;
  --c-bg-2: #d8ede2;
  --acc-hi: #1f7a52;            /* 深草绿（标题/强调） */
  --acc: #3aa876;               /* 主草绿 */
  --acc-deep: #2c8a5e;
  --acc-border: rgba(58, 168, 118, 0.32);
  --acc-border-strong: rgba(46, 158, 107, 0.6);
  --acc-grad: linear-gradient(180deg, #8fd3a8, #4cab77);      /* 按钮/激活态 */
  --acc-grad-ring: linear-gradient(180deg, #9adbb2, #57b582 55%, #2f8a5e); /* 转盘外环 */
  --acc-radial: radial-gradient(circle at 35% 28%, #c9ecd6, #6cc193 52%, #3d9a68); /* 中心按钮 */
  --on-acc: #0c3a26;            /* 绿底上的深色文字 */
  --c-text: #17402f;
  --c-text-dim: rgba(23, 64, 47, 0.6);
  --c-danger: #e25c5c;
  --c-festive: #e25c5c;         /* 国庆红点缀（徽章） */
  --wheel-sec-a: #ffffff;       /* 转盘白色扇区 */
  --wheel-sec-b: #dcf2e5;       /* 转盘浅绿扇区 */
  --wheel-fg-a: #1f6b4a;
  --wheel-fg-b: #1f6b4a;
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --radius: 16px;
  --card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.84));
  --card-border: 1px solid rgba(58, 168, 118, 0.25);
  --card-shadow: 0 8px 24px rgba(31, 107, 74, 0.12);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  color: var(--c-text);
  min-height: 100dvh;
  /* 从头图过渡结束后保持同一颜色，不再向下渐变 */
  background-color: var(--c-bg-0);
}

#app { min-height: 100dvh; display: flex; flex-direction: column; }

.page {
  flex: 1;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 0 14px 40px;
}

.view { transition: opacity 0.25s ease; }
.hidden { display: none !important; }