/* ===== 公益报名原型 · 共享主题 =====
   主题色取自项目头图（AI少年 创造力训练营）——蓝色科技风 */
:root {
  /* 品牌蓝（替换群报数默认的微信绿） */
  --brand:        #2f6bff;
  --brand-600:    #2a5fe6;
  --brand-700:    #1f4fd0;
  --brand-deep:   #16337a;
  --brand-light:  #eaf1ff;
  --brand-lighter:#f4f8ff;
  --brand-grad:   linear-gradient(135deg, #4d86ff 0%, #2f6bff 100%);

  --ink:      #1a1a1a;
  --ink-2:    #4b5563;
  --ink-3:    #8a94a6;
  --line:     #ececf0;
  --bg:       #f2f4f8;
  --card:     #ffffff;
  --danger:   #ff5a4d;
  --warn:     #ff9500;
  --ok:       #17b26a;

  --radius:   14px;
  --shadow:   0 8px 30px rgba(20, 40, 90, .10);
  --shadow-sm:0 2px 10px rgba(20, 40, 90, .06);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ---------- 手机外壳 ---------- */
.stage {
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 20% -10%, #e7efff 0%, transparent 60%),
    radial-gradient(1000px 600px at 100% 0%, #eaf1ff 0%, transparent 55%),
    #eef1f7;
  display: flex; flex-wrap: wrap; gap: 40px;
  justify-content: center; align-items: flex-start;
  padding: 40px 20px 60px;
}
.phone {
  width: 390px;
  background: #fff;
  border-radius: 44px;
  box-shadow: 0 30px 70px rgba(20, 40, 90, .18), 0 0 0 10px #0e1116, 0 0 0 12px #23262d;
  overflow: hidden;
  position: relative;
}
.phone-scroll {
  height: 812px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
  position: relative;
}
.phone-scroll::-webkit-scrollbar { width: 0; }

/* iOS 状态栏 */
.statusbar {
  height: 44px; padding: 0 22px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 15px; font-weight: 600; letter-spacing: .2px;
  position: relative; z-index: 5;
}
.statusbar .right { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.statusbar .bat { width: 24px; height: 12px; border: 1.5px solid currentColor; border-radius: 3px; position: relative; opacity:.9;}
.statusbar .bat::after{content:"";position:absolute;right:-4px;top:3px;width:2px;height:6px;background:currentColor;border-radius:2px;}
.statusbar .bat::before{content:"";position:absolute;left:1px;top:1px;bottom:1px;width:70%;background:currentColor;border-radius:1px;}

/* 小程序胶囊控件 */
.mp-capsule {
  display: flex; align-items: center;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 20px; height: 34px;
  backdrop-filter: blur(6px);
}
.mp-capsule .dot { padding: 0 12px; letter-spacing: 3px; font-size: 20px; line-height: 1; color:#333; }
.mp-capsule .sep { width: 1px; height: 18px; background: rgba(0,0,0,.12); }
.mp-capsule .target { width: 34px; display: grid; place-items: center; }
.mp-capsule .target i { width: 16px; height: 16px; border: 2px solid #333; border-radius: 50%; display:inline-block; position: relative; }
.mp-capsule .target i::after{content:"";position:absolute;inset:4px;border-radius:50%;background:#333;}

/* 圆形按钮（home/back） */
.round-btn { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.85); border:1px solid rgba(0,0,0,.06); display:grid; place-items:center; }

/* 通用小组件 */
.pill { display:inline-flex; align-items:center; gap:4px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.avatar { border-radius: 50%; object-fit: cover; background:#dfe6f5; flex: none; }
.divider { height: 8px; background: var(--bg); }

/* 底部安全区 */
.home-indicator { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); width:134px; height:5px; border-radius:3px; background:#111; opacity:.85; z-index:20;}

/* 真机（窄屏）：去掉"手机模型"外壳，内容铺满整屏，变成纯 H5 页面 */
@media (max-width: 600px) {
  .stage { display:block; padding:0; gap:0; min-height:auto; background:#eef1f7; }
  .phone { width:100%; border-radius:0; box-shadow:none; overflow:visible; }
  .phone-scroll { height:auto; min-height:100vh; overflow:visible; -webkit-overflow-scrolling:auto; }
  .home-indicator { display:none; }
}