/* ============ 达州市音乐家协会 · 会员端 H5 ============ */
:root {
  --navy-950: #0e1530;
  --navy-900: #141c38;
  --navy-800: #1b2650;
  --navy-700: #233168;
  --navy-100: #e5e9f7;
  --gold-300: #ecd7a4;
  --gold-400: #dfc186;
  --gold-500: #c9a45c;
  --gold-600: #a9853f;
  --ink: #232941;
  --muted: #868da4;
  --bg: #f3f4f9;
  --card: #ffffff;
  --line: #e9ebf3;
  --danger: #cf4b40;
  --success: #2c9a6d;
  --warn: #d98c1f;
  --radius: 16px;
  --shadow: 0 8px 24px rgba(20, 28, 56, .07);
  --serif: "Noto Serif SC", "Songti SC", "STSongti-SC", "SimSun", serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; border: 0; cursor: pointer; background: none; }
input, select, textarea { font-family: inherit; font-size: 15px; color: var(--ink); }

/* ---------- 顶部 ---------- */
.app-header {
  position: relative;
  background: linear-gradient(135deg, var(--navy-950) 0%, var(--navy-800) 55%, #2a3a80 100%);
  color: #fff;
  padding: 26px 20px 58px;
  overflow: hidden;
}
.app-header::before, .app-header::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(236, 215, 164, .25);
}
.app-header::before { width: 220px; height: 220px; right: -70px; top: -90px; }
.app-header::after { width: 140px; height: 140px; right: 60px; top: -60px; border-color: rgba(236,215,164,.14); }
.hd-row { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; }
.hd-emblem { width: 42px; height: 42px; flex: none; }
.hd-title { font-family: var(--serif); font-size: 19px; font-weight: 700; letter-spacing: 2px; }
.hd-sub { font-size: 11px; color: var(--gold-300); letter-spacing: 4px; margin-top: 1px; }
.hd-slogan {
  position: relative; z-index: 1;
  margin-top: 16px;
  font-family: var(--serif);
  font-size: 13px; letter-spacing: 3px;
  color: rgba(255,255,255,.75);
}
.hd-back {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 4px;
  color: rgba(255,255,255,.85); font-size: 14px; margin-bottom: 8px;
}
.hd-stats { position: relative; z-index: 1; display: flex; gap: 10px; margin-top: 18px; }
.hd-stat {
  flex: 1; background: rgba(255,255,255,.08);
  border: 1px solid rgba(236,215,164,.18);
  border-radius: 12px; padding: 10px 12px; backdrop-filter: blur(4px);
}
.hd-stat b { display: block; font-size: 20px; color: var(--gold-300); font-family: var(--serif); }
.hd-stat span { font-size: 11px; color: rgba(255,255,255,.65); letter-spacing: 1px; }

/* 底部弧形衔接 */
.header-curve { position: relative; margin-top: -34px; }
.header-curve svg { display: block; width: 100%; height: 34px; }

/* ---------- 主体容器 ---------- */
.container { padding: 0 16px 24px; max-width: 640px; margin: 0 auto; }
.pull-up { margin-top: -18px; position: relative; z-index: 2; }

/* ---------- 卡片 ---------- */
.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  margin-bottom: 14px;
}
.sec-head { display: flex; align-items: baseline; justify-content: space-between; margin: 22px 4px 12px; }
.sec-title {
  font-family: var(--serif); font-size: 17px; font-weight: 700; letter-spacing: 1px;
  display: flex; align-items: center; gap: 8px;
}
.sec-title::before {
  content: ""; width: 4px; height: 16px; border-radius: 2px;
  background: linear-gradient(180deg, var(--gold-300), var(--gold-600));
}
.sec-more { font-size: 12px; color: var(--muted); }

/* ---------- 快捷入口 ---------- */
.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.quick-item {
  background: var(--card); border-radius: 14px; box-shadow: var(--shadow);
  padding: 14px 4px 12px; text-align: center;
  transition: transform .15s ease;
}
.quick-item:active { transform: scale(.95); }
.quick-item .ic {
  width: 40px; height: 40px; margin: 0 auto 7px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.quick-item .ic svg { width: 22px; height: 22px; }
.quick-item span { font-size: 12px; color: var(--ink); display: block; }
.ic-gold { background: linear-gradient(135deg, #f6ecd4, #ecd7a4); }
.ic-navy { background: linear-gradient(135deg, #2b3a7e, #1b2650); }
.ic-teal { background: linear-gradient(135deg, #d8f0e7, #b3e0cf); }
.ic-rose { background: linear-gradient(135deg, #fbe3e0, #f6cdc8); }

/* ---------- 公告列表 ---------- */
.notice-item { display: flex; gap: 12px; align-items: flex-start; padding: 13px 2px; border-bottom: 1px solid var(--line); }
.notice-item:last-child { border-bottom: 0; }
.notice-item .tag { flex: none; margin-top: 2px; }
.notice-item h4 {
  font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.notice-item time { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; }
.tag {
  font-size: 10px; padding: 2px 7px; border-radius: 999px; letter-spacing: 1px; white-space: nowrap;
}
.tag-notice { background: #edf1fd; color: #3d55b8; }
.tag-news { background: #fdf3e4; color: #b37a17; }
.tag-show { background: #f3eafd; color: #7b4bbd; }
.tag-pin { background: linear-gradient(135deg, var(--gold-500), var(--gold-600)); color: #fff; }

/* ---------- 演出卡片 ---------- */
.concert-scroll { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 6px; scroll-snap-type: x mandatory; }
.concert-scroll::-webkit-scrollbar { display: none; }
.concert-card {
  flex: 0 0 78%; max-width: 300px; scroll-snap-align: start;
  background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.concert-card .cover { position: relative; }
.concert-card .cover img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.concert-card .cover .badge {
  position: absolute; top: 10px; left: 10px;
  background: linear-gradient(135deg, rgba(201,164,92,.95), rgba(169,133,63,.95));
  color: #fff; font-size: 10px; padding: 3px 9px; border-radius: 999px; letter-spacing: 1px;
  backdrop-filter: blur(2px);
}
.concert-card .body { padding: 12px 14px 14px; }
.concert-card h3 { font-size: 15px; font-weight: 600; line-height: 1.4; }
.concert-card .meta { margin-top: 7px; font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; }
.concert-card .meta em { font-style: normal; color: var(--gold-600); }

/* ---------- 表单 ---------- */
.form-card { padding: 6px 18px; }
.form-sec {
  font-family: var(--serif); font-size: 14px; font-weight: 700; letter-spacing: 1px;
  color: var(--gold-600); padding: 16px 0 4px; display: flex; align-items: center; gap: 8px;
}
.form-sec::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.field { padding: 10px 0 2px; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.field label i { color: var(--danger); font-style: normal; margin-right: 2px; }
.field input, .field select, .field textarea {
  width: 100%; border: 1.5px solid var(--line); border-radius: 12px;
  padding: 11px 14px; background: #fafbfe; outline: none;
  transition: border-color .15s, box-shadow .15s;
  appearance: none;
}
.field textarea { min-height: 88px; resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(201, 164, 92, .15);
  background: #fff;
}
.field .err-tip { font-size: 11px; color: var(--danger); margin-top: 4px; display: none; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.select-wrap { position: relative; }
.select-wrap::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}

/* 照片上传 */
.photo-box {
  display: flex; align-items: center; gap: 14px; padding: 12px 0 16px;
}
.photo-preview {
  width: 74px; height: 96px; border-radius: 10px; overflow: hidden;
  background: #f0f1f7; display: flex; align-items: center; justify-content: center;
  border: 1.5px dashed #cfd4e4; flex: none;
}
.photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.photo-preview .ph-icon { color: #b9bfd4; }
.photo-box .tip { font-size: 12px; color: var(--muted); line-height: 1.7; }
.photo-pick {
  display: inline-block; margin-top: 8px; font-size: 13px; color: var(--gold-600);
  border: 1px solid var(--gold-500); padding: 5px 14px; border-radius: 999px;
}

/* ---------- 按钮 ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 14px; border-radius: 14px;
  font-size: 16px; font-weight: 600; letter-spacing: 4px;
  transition: opacity .15s, transform .15s;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: linear-gradient(135deg, var(--navy-700), var(--navy-900)); color: #fff; box-shadow: 0 8px 18px rgba(20,28,56,.25); }
.btn-gold { background: linear-gradient(135deg, var(--gold-400), var(--gold-600)); color: #fff; box-shadow: 0 8px 18px rgba(169,133,63,.3); letter-spacing: 2px; }
.btn-ghost { background: #fff; color: var(--navy-700); border: 1.5px solid var(--navy-100); }
.btn-mini {
  display: inline-flex; align-items: center; padding: 6px 16px; border-radius: 999px;
  font-size: 13px; letter-spacing: 1px;
}
.btn-mini.gold { background: linear-gradient(135deg, var(--gold-400), var(--gold-600)); color: #fff; }
.btn-mini.line { border: 1px solid var(--line); color: var(--muted); }
.btn[disabled] { opacity: .55; pointer-events: none; }
.submit-wrap { padding: 20px 0 6px; }

/* ---------- 会员证 ---------- */
.member-card {
  position: relative; overflow: hidden;
  border-radius: 20px;
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(255,255,255,.28), transparent 50%),
    linear-gradient(130deg, #8a6a2c 0%, #c9a45c 38%, #e8d3a0 55%, #c9a45c 75%, #8a6a2c 100%);
  box-shadow: 0 14px 34px rgba(169, 133, 63, .4), inset 0 1px 0 rgba(255,255,255,.5);
  color: #42350f;
  padding: 22px 22px 20px;
}
.member-card::before {
  content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.4);
}
.member-card::after {
  content: ""; position: absolute; right: 20px; bottom: -60px; width: 130px; height: 130px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.3);
}
.mc-head { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 1; }
.mc-head .name { font-family: var(--serif); font-size: 17px; font-weight: 700; letter-spacing: 2px; }
.mc-type {
  font-size: 10px; letter-spacing: 3px; border: 1px solid rgba(66,53,15,.4);
  padding: 3px 10px; border-radius: 999px;
}
.mc-body { display: flex; gap: 16px; margin-top: 20px; align-items: center; position: relative; z-index: 1; }
.mc-info { flex: 1; }
.mc-row { display: flex; margin-bottom: 9px; font-size: 13px; }
.mc-row .k { width: 62px; color: rgba(66,53,15,.65); letter-spacing: 2px; flex: none; }
.mc-row .v { font-weight: 600; letter-spacing: .5px; }
.mc-no { font-family: "SF Mono", Menlo, monospace; letter-spacing: 1px; }
.mc-avatar {
  width: 52px; height: 66px; border-radius: 8px; overflow: hidden; flex: none;
  background: rgba(255,255,255,.5); display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 24px; font-weight: 700; color: #8a6a2c;
  border: 1px solid rgba(255,255,255,.65);
}
.mc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mc-qr {
  background: #fff; border-radius: 10px; padding: 6px; flex: none;
  box-shadow: 0 4px 10px rgba(66,53,15,.2);
}
.mc-qr img { width: 78px; height: 78px; }
.mc-foot {
  margin-top: 16px; padding-top: 12px; border-top: 1px dashed rgba(66,53,15,.3);
  display: flex; justify-content: space-between; font-size: 11px; color: rgba(66,53,15,.7);
  position: relative; z-index: 1; letter-spacing: 1px;
}
.card-hint { display: flex; gap: 10px; margin-top: 14px; font-size: 12px; color: var(--muted); line-height: 1.7; }
.card-hint svg { flex: none; margin-top: 2px; }

/* ---------- 状态卡 ---------- */
.state-card { text-align: center; padding: 34px 20px; }
.state-card .big { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.state-card h3 { font-family: var(--serif); font-size: 18px; letter-spacing: 2px; }
.state-card p { font-size: 13px; color: var(--muted); margin-top: 8px; line-height: 1.8; }
.st-ok { background: #e2f4ec; color: var(--success); }
.st-wait { background: #fdf3e4; color: var(--warn); }
.st-no { background: #fbe9e7; color: var(--danger); }

/* ---------- 音乐会详情 ---------- */
.sheet-mask, .mask {
  position: fixed; inset: 0; background: rgba(14, 21, 48, .55); z-index: 50;
  opacity: 0; pointer-events: none; transition: opacity .2s;
  backdrop-filter: blur(2px);
}
.sheet-mask.show, .mask.show { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 51;
  background: #fff; border-radius: 22px 22px 0 0;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
  max-height: 86vh; overflow-y: auto;
  transform: translateY(100%); transition: transform .25s cubic-bezier(.3,.8,.3,1);
  max-width: 640px; margin: 0 auto;
}
.sheet.show { transform: translateY(0); }
.sheet .grab { width: 36px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto 14px; }
.sheet h3 { font-family: var(--serif); font-size: 18px; letter-spacing: 1px; }
.sheet .s-meta { margin: 10px 0 4px; display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); }
.sheet .s-meta b { color: var(--ink); font-weight: 500; }
.sheet .desc { font-size: 14px; color: #4c5468; line-height: 1.8; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); white-space: pre-wrap; }
.sheet .cover-full { border-radius: 14px; overflow: hidden; margin-top: 4px; }
.stepper { display: flex; align-items: center; gap: 16px; margin: 16px 0; }
.stepper button {
  width: 34px; height: 34px; border-radius: 10px; background: #f0f2f9;
  font-size: 18px; color: var(--navy-700); font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.stepper b { min-width: 26px; text-align: center; font-size: 17px; }
.stepper .lab { font-size: 13px; color: var(--muted); margin-right: auto; }

/* ---------- 列表页（预约/公告） ---------- */
.list-concert { display: flex; flex-direction: column; gap: 14px; }
.lc-item { background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.lc-item .top { position: relative; }
.lc-item .top img { width: 100%; aspect-ratio: 21/9; object-fit: cover; }
.lc-item .top .badge { position: absolute; top: 10px; left: 10px; background: linear-gradient(135deg, rgba(201,164,92,.95), rgba(169,133,63,.95)); color: #fff; font-size: 10px; padding: 3px 9px; border-radius: 999px; letter-spacing: 1px; }
.lc-item .top .seats { position: absolute; right: 10px; bottom: 10px; background: rgba(14,21,48,.6); color: #fff; font-size: 11px; padding: 3px 10px; border-radius: 999px; backdrop-filter: blur(3px); }
.lc-item .body { padding: 14px 16px 16px; }
.lc-item h3 { font-size: 16px; font-weight: 600; }
.lc-item .meta { font-size: 12px; color: var(--muted); margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.lc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.lc-foot .price { font-size: 12px; color: var(--gold-600); letter-spacing: 1px; }
.booked-flag { font-size: 12px; color: var(--success); display: flex; align-items: center; gap: 4px; }

/* ---------- 我的 ---------- */
.me-hero {
  background: linear-gradient(135deg, var(--navy-950), var(--navy-800));
  margin: -76px -16px 0; padding: 84px 20px 66px; position: relative; overflow: hidden;
}
.me-hero::after { content: ""; position: absolute; right: -50px; top: 30px; width: 180px; height: 180px; border-radius: 50%; border: 1px solid rgba(236,215,164,.2); }
.me-box { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }
.me-avatar {
  width: 58px; height: 58px; border-radius: 50%; overflow: hidden; flex: none;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--serif); font-size: 22px; font-weight: 700;
  border: 2px solid rgba(255,255,255,.4);
}
.me-avatar img { width: 100%; height: 100%; object-fit: cover; }
.me-info h3 { color: #fff; font-family: var(--serif); font-size: 18px; letter-spacing: 1px; }
.me-info p { color: rgba(255,255,255,.6); font-size: 12px; margin-top: 3px; letter-spacing: 1px; }
.me-cells { margin-top: -40px; position: relative; z-index: 2; }
.cell { display: flex; align-items: center; gap: 12px; padding: 15px 4px; border-bottom: 1px solid var(--line); }
.cell:last-child { border-bottom: 0; }
.cell .ci { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: none; }
.cell .ci svg { width: 18px; height: 18px; }
.cell .ct { flex: 1; font-size: 14.5px; }
.cell .arr { color: #c4c9d9; }
.cell .val { font-size: 12px; color: var(--muted); }

/* ---------- 底部导航 ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: rgba(255,255,255,.92); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-around;
  padding: 7px 4px calc(7px + env(safe-area-inset-bottom));
  max-width: 640px; margin: 0 auto;
}
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; color: #a2a8bd; font-size: 10.5px; transition: color .15s; }
.tab-item svg { width: 23px; height: 23px; }
.tab-item.active { color: var(--gold-600); }

/* ---------- Toast / Loading ---------- */
#toast {
  position: fixed; left: 50%; bottom: 18%; transform: translateX(-50%) translateY(8px);
  background: rgba(20, 28, 56, .92); color: #fff; font-size: 13.5px;
  padding: 11px 22px; border-radius: 12px; z-index: 99;
  opacity: 0; pointer-events: none; transition: all .25s;
  max-width: 78vw; text-align: center; letter-spacing: 1px;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.empty { text-align: center; padding: 44px 0; color: var(--muted); font-size: 13px; }
.empty svg { width: 52px; height: 52px; margin: 0 auto 10px; opacity: .5; }

/* ---------- 页脚 · 备案信息 ---------- */
.beian { padding: 30px 0 36px; text-align: center; font-size: 12px; color: #9aa1b5; line-height: 1.9; }
.beian a { color: #9aa1b5; text-decoration: none; }
.beian a:active { color: #6b7280; }
.beian .copy { display: block; opacity: .8; }

/* ---------- 结果页 ---------- */
.result-hero { text-align: center; padding: 40px 0 10px; }
.result-hero .ring {
  width: 84px; height: 84px; margin: 0 auto 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.link-row { display: flex; gap: 12px; margin-top: 22px; }
.link-row .btn { letter-spacing: 2px; font-size: 15px; }

/* 核验页 */
.verify-badge {
  width: 92px; height: 92px; margin: 0 auto 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.vr-row { display: flex; padding: 12px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.vr-row:last-child { border-bottom: 0; }
.vr-row .k { width: 84px; color: var(--muted); flex: none; }
.vr-row .v { font-weight: 600; }

@media (min-width: 640px) {
  body { background: #eceef5; }
  .app-header, .me-hero { border-radius: 0 0 26px 26px; }
  .tabbar { border: 1px solid var(--line); border-bottom: 0; border-radius: 18px 18px 0 0; }
}