/* 千面 AI 实战共学 · 落地页样式（移动优先，去掉了原型里的手机外壳）*/
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: #211D19;
  background-image: radial-gradient(circle at 50% 0, rgba(196,64,44,.14), transparent 60%);
  min-height: 100vh;
}
a { color: #C4402C; text-decoration: none; }
a:hover { color: #A32E20; }
img { max-width: 100%; }

/* 居中的内容列：手机满屏，桌面居中一列 */
.qm-app {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: #F4EEE3;
  overflow: hidden;
  box-shadow: 0 0 80px rgba(0,0,0,.4);
  padding-bottom: 88px; /* 给底部常驻 CTA 让位 */
}

/* 隐藏滚动条 */
.qm-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
.qm-scroll { scrollbar-width: none; }

/* 底部常驻 CTA：固定在视口底，宽度跟随内容列 */
.qm-cta-bar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 0; width: 100%; max-width: 480px; z-index: 40;
  background: rgba(251,247,239,.94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(26,21,18,.12);
  padding: 13px 18px calc(15px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 14px;
}

/* 报名弹层 */
.qm-mask {
  position: fixed; inset: 0; z-index: 50; background: rgba(18,16,13,.55);
  animation: qmFade .25s ease;
}
.qm-sheet {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 0; width: 100%; max-width: 480px; z-index: 60;
  background: #F4EEE3; border-radius: 24px 24px 0 0;
  max-height: 94vh; display: flex; flex-direction: column;
  animation: qmSheetUp .34s cubic-bezier(.22,1,.36,1);
  box-shadow: 0 -16px 44px rgba(0,0,0,.32);
}
.qm-hidden { display: none !important; }

/* 输入框聚焦态（原型用 style-focus，这里用真实 CSS）*/
.qm-input { width: 100%; background: #fff; border: 1px solid rgba(26,21,18,.16); border-radius: 11px;
  padding: 13px 14px; font-size: 15px; font-family: inherit; color: #1A1512; outline: none; transition: border-color .15s, box-shadow .15s; }
.qm-input:focus { border-color: #C4402C; box-shadow: 0 0 0 3px rgba(196,64,44,.12); }

.qm-btn-primary { background: #C4402C; color: #fff; border: none; cursor: pointer; font-family: inherit; transition: background .15s, transform .05s; }
.qm-btn-primary:hover { background: #A32E20; }
.qm-btn-primary:active { transform: translateY(1px); }
.qm-btn-primary:disabled { opacity: .6; cursor: default; }

@keyframes qmPulse { 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes qmSheetUp { from{transform:translate(-50%,100%)} to{transform:translate(-50%,0)} }
@keyframes qmFade { from{opacity:0} to{opacity:1} }
@keyframes qmSpin { to{transform:rotate(360deg)} }
@keyframes qmPop { 0%{transform:scale(.6);opacity:0} 60%{transform:scale(1.08)} 100%{transform:scale(1);opacity:1} }

.qm-spin { width:16px; height:16px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:qmSpin .7s linear infinite; flex:none; display:inline-block; }