/* exam-membership.html → exam-membership.css (自动拆分) */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, 'PingFang SC', 'Helvetica Neue', sans-serif; background: #f5f5f5; max-width: 600px; margin: 0 auto; min-height: 100vh; padding-bottom: 60px; }
.header { background: linear-gradient(135deg, #4a90d9, #357abd); color: #fff; padding: 10px 12px; text-align: center; position: relative; }
.header h1 { font-size: 16px; font-weight: 700; }
.header .back { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 18px; color: #fff; text-decoration: none; background: rgba(255,255,255,.15); width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

.features { display: flex; gap: 4px; padding: 0 16px; margin-top: 2px; }
.feature-item { background: #fff; border-radius: 8px; padding: 8px 6px; flex: 1; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.feature-item .icon { font-size: 20px; display: block; margin-bottom: 2px; }
.feature-item .name { font-size: 12px; color: #555; font-weight: 500; }
.banner { display:none; background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; padding: 16px 16px; text-align: center; height: auto; }
.banner h2 { font-size: 18px; margin-bottom: 4px; }
.banner p { font-size: 13px; opacity: .8; line-height: 1.5; }
.plan-list { padding: 0 16px 10px; }
.plan-card { background: #fff; border-radius: 10px; padding: 14px; margin-bottom: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.05); border: 1.5px solid transparent; cursor: pointer; transition: .1s; }
.plan-card.active { border-color: #667eea; background: #f8f9ff; }
.plan-card .plan-name { font-size: 15px; font-weight: 600; color: #333; }
.plan-card .plan-price { font-size: 22px; font-weight: 700; color: #e74c3c; margin: 4px 0 2px; }
.plan-card .plan-price small { font-size: 12px; font-weight: 400; color: #999; }
.plan-card .plan-desc { font-size: 12px; color: #888; line-height: 1.4; }
.plan-card .plan-tag { display: inline-block; background: #ff6b6b; color: #fff; font-size: 10px; padding: 1px 7px; border-radius: 8px; margin-left: 6px; }
.buy-btn { display: block; width: calc(100% - 32px); margin: 0 16px 10px; padding: 12px; background: linear-gradient(135deg, #4a90d9, #357abd); color: #fff; border: none; border-radius: 10px; font-size: 16px; font-weight: 600; cursor: pointer; }
.buy-btn:disabled { opacity: .5; cursor: not-allowed; }
.member-status { background: #e8f5e9; border-radius: 10px; padding: 12px; margin: 10px 16px; text-align: center; display: none; }
.member-status .icon { font-size: 32px; display: block; margin-bottom: 4px; }
.member-status .text { font-size: 14px; color: #2e7d32; font-weight: 500; }
.member-status .sub { font-size: 12px; color: #558b2f; margin-top: 2px; }
.order-status { text-align: center; padding: 16px; font-size: 13px; color: #666; display: none; }