/* ============================================================
   common.css —— 科创实验室(www.cshgsb.com.cn/kechuang/)共用样式
   适用：src.html / member.html / teaching.html / store.html 等新增板块页
   设计基调沿用既有页面：暖橙 #ff7a45 + 科技蓝 #1976d2，480px 移动优先
   （后续想整体换风格，只需改这一个文件）
   ============================================================ */

/* ---------- 基础重置 ---------- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: linear-gradient(160deg, #fef6e4 0%, #e3f2fd 100%);
  color: #333; min-height: 100vh;
}
a { text-decoration: none; color: inherit; }
img, canvas, svg { max-width: 100%; display: block; }

/* ---------- 页面容器（与现有子页一致 480px 居中） ---------- */
.wrap { max-width: 480px; margin: 0 auto; padding: 18px 16px 40px; }

/* ---------- 页头 ---------- */
.page-header { text-align: center; margin-bottom: 14px; }
.page-header .logo { font-size: 40px; line-height: 1; }
.page-header h1 { font-size: 22px; margin: 6px 0; color: #ff7a45; }
.page-header p { font-size: 13px; color: #888; margin: 0; }
/* 顶部返回首页链接 */
.back-home {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; color: #1976d2; margin-bottom: 10px;
}
.vision {
  background: rgba(255,255,255,.72); border-radius: 12px;
  padding: 9px 12px; margin-bottom: 16px;
  font-size: 12.5px; color: #666; text-align: center; line-height: 1.6;
}

/* ---------- 区块 ---------- */
.sec { margin-bottom: 20px; }
.sec > h2 {
  font-size: 16px; color: #333; margin: 0 0 10px;
  display: flex; align-items: center; gap: 6px;
}
.sec > h2 small { font-size: 12px; color: #999; font-weight: 400; }

/* ---------- 卡片 ---------- */
.card {
  background: #fff; border-radius: 16px; padding: 14px;
  margin-bottom: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
.card.clickable:active { transform: scale(.985); }
.card-title {
  font-size: 15.5px; font-weight: 600; margin: 0 0 4px;
  display: flex; align-items: center; gap: 6px;
}
.card-desc { font-size: 13px; color: #777; line-height: 1.6; margin: 0; }
.card-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; gap: 8px;
}
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid > .card { margin-bottom: 0; }

/* ---------- 标签 ---------- */
.tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.tag {
  font-size: 11.5px; padding: 2px 8px; border-radius: 10px;
  background: #e3f2fd; color: #1565c0;
}
.tag.lang { background: #f1e7fe; color: #6a3fb5; }
.tag.free { background: #e8f7ee; color: #1aa260; }
.tag.hot  { background: #ffe8dc; color: #e8590c; }

/* ---------- 价格 ---------- */
.price { font-size: 18px; font-weight: 700; color: #ff7a45; }
.price small { font-size: 12px; font-weight: 400; color: #999; }
.price-origin { font-size: 12px; color: #aaa; text-decoration: line-through; margin-left: 4px; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-block; border: none; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 600; border-radius: 10px;
  padding: 8px 14px; line-height: 1.2; text-align: center;
}
.btn.primary { background: linear-gradient(135deg,#ff9a5c,#ff7a45); color: #fff; }
.btn.blue    { background: linear-gradient(135deg,#4fa3f7,#1976d2); color: #fff; }
.btn.ghost   { background: #fff; color: #1976d2; border: 1px solid #cfdff2; }
.btn.disabled, .btn[disabled] { background: #f0f0f0; color: #aaa; cursor: not-allowed; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.btn-row > .btn { flex: 1; min-width: 96px; }

/* ---------- 提示条 ---------- */
.note {
  background: #fff8e6; border-left: 3px solid #ffb020; color: #8a6100;
  font-size: 12.5px; line-height: 1.7; padding: 9px 11px;
  border-radius: 0 8px 8px 0; margin-bottom: 14px;
}
.empty { text-align: center; color: #aaa; font-size: 13px; padding: 18px 0; }

/* ---------- 表格（会员权益对比） ---------- */
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.cmp {
  width: 100%; border-collapse: collapse; background: #fff;
  border-radius: 12px; overflow: hidden; font-size: 12.5px;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
table.cmp th, table.cmp td { padding: 9px 8px; text-align: center; border-bottom: 1px solid #f2f2f2; }
table.cmp th { background: #faf7f0; color: #555; font-weight: 600; }
table.cmp td:first-child { text-align: left; color: #666; }
table.cmp tr:last-child td { border-bottom: none; }
.yes { color: #1aa260; font-weight: 700; }
.no  { color: #ccc; }

/* ---------- 表单（复用预约/会员申请） ---------- */
.field { margin-bottom: 10px; }
.field label { display: block; font-size: 12.5px; color: #666; margin-bottom: 5px; }
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid #e2e2e2; border-radius: 10px;
  padding: 10px 12px; font-size: 14px; outline: none; background: #fff;
  font-family: inherit;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: #ff9a5c; }
.ok-msg {
  display: none; text-align: center; color: #1aa260; font-size: 13.5px;
  font-weight: 700; background: #e8f7ee; border-radius: 10px;
  padding: 12px; margin-top: 10px;
}

/* ---------- 可视化容器（教学页） ---------- */
.viz-box {
  background: #fff; border-radius: 14px; padding: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,.06); margin-bottom: 10px;
}
.viz-box canvas { width: 100%; height: auto; border-radius: 8px; background: #fbfcfd; }
.ctrl { margin-top: 10px; }
.ctrl-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ctrl-row .lb { font-size: 12px; color: #666; width: 84px; flex-shrink: 0; }
.ctrl-row input[type=range] { flex: 1; }
.ctrl-row .val {
  font-size: 12px; color: #1976d2; font-weight: 700;
  width: 52px; text-align: right; flex-shrink: 0;
}
.readout {
  font-size: 12.5px; color: #555; background: #f7f9fb;
  border-radius: 8px; padding: 7px 10px; margin-top: 8px; line-height: 1.7;
}

/* ---------- 底部 ---------- */
.site-foot { text-align: center; font-size: 11.5px; color: #aaa; margin-top: 24px; line-height: 1.8; }
.site-foot a { color: #1976d2; }