:root{
  --bg:#f5f8ff;
  --card:#ffffff;
  --text:#1f2a44;
  --accent:#4f7cff;
  --border:#e3e9ff;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
               "PingFang SC","Microsoft YaHei",Arial,sans-serif;
  background:linear-gradient(180deg,#f5f8ff,#eef3ff);
  color:var(--text);
}

.wrap{
  max-width:880px;
  margin:0 auto;
  padding:32px 16px 24px;
}

/* 卡片 */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:32px 26px;
  box-shadow:0 12px 30px rgba(79,124,255,0.08);
}

h1{
  font-size:28px;
  margin:0 0 24px;
  line-height:1.4;
  font-weight:700;
  color:#1a237e;
  text-align:center;
}

/* 正文区域 + 阳光青少年背景 */
.content{
  position:relative;
  border:1px solid var(--border);
  border-radius:12px;
  padding:20px 18px;
  overflow:hidden;
}

/* 背景图层（阳光、青少年感） */
.content::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?auto=format&fit=crop&w=1200&q=60");
  background-size:cover;
  background-position:center;
  opacity:0.10;
  pointer-events:none;
}

/* 白色遮罩层，保证文字清晰 */
.content::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,255,255,0.78);
  pointer-events:none;
}

.content p{
  position:relative;
  z-index:1;
  font-size:16px;
  line-height:1.9;
  text-indent:2em;
  margin:0 0 14px;
}

.fade{
  height:50px;
  background:linear-gradient(180deg, rgba(255,255,255,0), #f5f8ff);
  margin-top:20px;
  border-radius:12px;
}

/* 让页面一定能滚动 */
.spacer{
  height:45vh;
}

/* 底部按钮栏：默认隐藏 */
.bottom-bar{
  position:fixed;
  left:0;right:0;bottom:0;
  background:rgba(255,255,255,0.95);
  border-top:1px solid var(--border);
  backdrop-filter:blur(6px);
  padding:14px 16px;
  z-index:999;

  /* 默认隐藏 */
  transform:translateY(110%);
  opacity:0;
  pointer-events:none;
  transition:transform .25s ease, opacity .25s ease;
}

/* 显示状态 */
.bottom-bar.show{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}

.bottom-inner{
  max-width:880px;
  margin:0 auto;
  display:flex;
  justify-content:center;
}

button{
  border:none;
  border-radius:14px;
  padding:14px 26px;
  font-size:16px;
  font-weight:600;
  background:linear-gradient(135deg,#5b86ff,#7aa2ff);
  color:#fff;
  min-width:240px;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(91,134,255,0.35);
  transition:transform .05s ease, opacity .2s ease;
}

button:active{transform:scale(0.98)}

button[disabled]{
  opacity:0.55;
  cursor:not-allowed;
  box-shadow:none;
}