:root {
  color-scheme: dark;
  --bg: #050505;
  --panel: #1d1d1d;
  --panel-2: #121212;
  --line: #393939;
  --red: #c80e21;
  --deep-red: #72080f;
  --gold: #e7c65c;
  --muted: #aaa6a6;
  --white: #f7f4f1;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #111; color: var(--white); }
body { display: flex; justify-content: center; overscroll-behavior: none; }
button, input, textarea { font: inherit; }
button { color: inherit; }

.phone-shell {
  position: relative;
  width: min(100vw, 390px);
  min-height: 100vh;
  background: var(--bg);
  overflow: hidden;
  box-shadow: 0 0 45px #000;
}

.system-bar {
  height: 47px;
  padding: 18px 30px 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1d1d1d;
  color: #e8e8e8;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1px;
}
.system-icons { font-size: 11px; white-space: nowrap; }

.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 60px;
  background: #1c1c1c;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(255,255,255,.02);
}
.app-header h1 { margin: 0; font-size: 17px; font-weight: 500; letter-spacing: .5px; }
.mini-capsule {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 104px;
  height: 40px;
  border: 1px solid #2d2d2d;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: rgba(16,16,16,.55);
  font-weight: 900;
}
.mini-capsule i { height: 24px; width: 1px; background: #2a2a2a; }
.mini-capsule b { font-size: 22px; line-height: 1; }
.back-button {
  display: none;
  position: absolute;
  left: 12px;
  top: 8px;
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  font-size: 34px;
  font-weight: 200;
  z-index: 2;
}
.back-button.visible { display: block; }

.app-content {
  position: relative;
  min-height: calc(100vh - 107px);
  padding-bottom: 96px;
  background: #050505;
}

.bottom-nav {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: max(8px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(calc(100vw - 32px), 358px);
  height: 79px;
  padding: 8px 12px 5px;
  border-radius: 41px;
  border: 1px solid #383838;
  background: rgba(0,0,0,.96);
  box-shadow: 0 -12px 32px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.04);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  backdrop-filter: blur(18px);
}
.bottom-nav.hidden { display: none; }
.nav-item {
  position: relative;
  border: 0;
  background: transparent;
  color: #f2f2f2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  padding: 0;
}
.nav-item::before {
  content: "";
  position: absolute;
  top: -8px;
  width: 44px;
  height: 2px;
  border-radius: 2px;
  background: transparent;
}
.nav-item.active { color: var(--red); }
.nav-item.active::before { background: var(--red); }
.nav-icon { width: 23px; height: 23px; display: block; }
.nav-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.toast {
  position: fixed;
  z-index: 80;
  left: 50%;
  bottom: 108px;
  transform: translate(-50%, 16px);
  max-width: 320px;
  padding: 10px 16px;
  border-radius: 20px;
  background: rgba(40,40,40,.96);
  border: 1px solid #555;
  color: #fff;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: .2s ease;
  text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* 邀请好友 */
.invite-page { padding: 18px 16px 28px; }
.invite-note { margin: 0 0 16px; color: #b9a79c; font-size: 12px; line-height: 1.7; }
.invite-card { min-height: 66px; margin-bottom: 11px; padding: 13px; border: 1px solid #3a3a3a; border-radius: 10px; background: #1a1414; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.invite-card.mine { border-color: #8d2a2f; background: linear-gradient(100deg, #4a1116, #1d0d0f); }
.invite-card.bound { border-color: #6b5a2c; background: linear-gradient(100deg, #2a2412, #16120a); }
.invite-card.black-gold { border-color: #c89c44; background: linear-gradient(105deg, #30240d, #171008); box-shadow: inset 0 0 16px rgba(218,170,70,.08); }
.invite-card b { display: block; color: #fff; font-size: 15px; }
.invite-card small { display: block; margin-top: 4px; color: #a3938a; font-size: 11px; }
.invite-card .invite-benefit-count { margin-top: 7px; color: #f3c96a; font-weight: 700; }
.invite-code { display: block; margin-top: 5px; color: #f3c96a; font-size: 22px; font-weight: 900; letter-spacing: 4px; }
.invite-input { margin-top: 6px; width: 100%; height: 34px; padding: 0 12px; border: 1px solid #4a4a4a; border-radius: 17px; background: #0d0909; color: #fff; }
.invite-section { margin: 18px 0 8px; font-size: 15px; }
.invite-list { border: 1px solid #333; border-radius: 9px; background: #150f0f; }
.invite-empty { padding: 28px 0; text-align: center; color: #7a6d66; font-size: 12px; }
.invite-row { padding: 11px 13px; border-bottom: 1px solid #262020; display: flex; align-items: center; justify-content: space-between; }
.invite-row:last-child { border-bottom: 0; }
.invite-row span { color: #e6ddd7; font-size: 13px; }
.invite-row b { color: #9b8b82; font-size: 12px; font-weight: 400; }
.invite-row b.done { color: #7fd0a2; }
.loading {
  position: fixed;
  z-index: 90;
  inset: 0;
  background: rgba(0,0,0,.72);
  display: none;
  place-items: center;
  align-content: center;
  gap: 10px;
}
.loading.show { display: grid; }
.loading span { width: 30px; height: 30px; border: 3px solid #555; border-top-color: var(--red); border-radius: 50%; animation: spin .8s linear infinite; }
.loading em { font-size: 12px; color: #ccc; font-style: normal; }
@keyframes spin { to { transform: rotate(360deg); } }

.home-page { background: #050505; }
.home-hero {
  position: relative;
  min-height: 420px;
  padding: 34px 17px 15px;
  background: linear-gradient(to bottom, rgba(0,0,0,.05), rgba(0,0,0,.22) 52%, #050505 100%), url('./aa-club-home.jpg') top center / 100% auto no-repeat;
}
.store-line { display: flex; align-items: center; justify-content: space-between; font-weight: 800; color: #f5dfb4; font-size: 15px; }
.outline-pill {
  border: 1px solid rgba(213,72,74,.75);
  background: rgba(60,11,12,.62);
  border-radius: 26px;
  padding: 8px 15px;
  font-weight: 700;
}
.brand-lockup { text-align: center; padding-top: 65px; text-shadow: 0 2px 12px #000; }
.brand-mark {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  margin: 0 auto 8px;
  overflow: hidden;
  box-shadow: 0 0 18px #b5291e;
}
.brand-mark img { width: 100%; height: 100%; display: block; object-fit: contain; }
.brand-lockup h2 { margin: 0; font-family: "Times New Roman", "Songti SC", serif; font-size: 42px; font-weight: 500; letter-spacing: 2.5px; color: #f8e8c8; text-shadow: 0 1px 0 #b98b54, 0 3px 10px rgba(0,0,0,.85); }
.brand-lockup p { margin: 4px 0 0; color: #bc7049; letter-spacing: 6.5px; font-size: 12px; }
.asset-panel {
  position: relative;
  margin-top: 50px;
  padding: 25px 10px 8px;
  background: linear-gradient(110deg, rgba(20,27,24,.94), rgba(41,4,4,.94));
  border: 1px solid #7b473d;
  border-radius: 11px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  box-shadow: inset 0 0 18px #000;
}
.asset-panel::before {
  content: "◆";
  position: absolute;
  top: -23px;
  left: calc(50% - 23px);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid #6e3c35;
  background: #241a1a;
  color: #e1c397;
  font-size: 19px;
}
.asset-item { text-align: center; border-right: 1px solid #8a6f5f; }
.asset-panel button.asset-item { width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; }
.asset-panel button.asset-item::after { display: none; }
.point-entry { position: relative; }
.point-entry::before { content: "点击提取"; position: absolute; top: -17px; left: 50%; transform: translateX(-50%); padding: 2px 5px; border: 1px solid #80562f; border-radius: 9px; color: #d7a75d; font-size: 8px; white-space: nowrap; }
.asset-item:last-child { border: 0; }
.asset-item strong { display: block; color: #ffad54; font-size: 20px; }
.asset-item span { display: block; color: #d4c4bb; font-size: 12px; margin-top: 2px; }
.asset-item .asset-icon { display: block; width: 22px; height: 22px; object-fit: contain; margin: 2px auto 0; }
.point-modal { position: fixed; z-index: 90; inset: 0; display: grid; place-items: center; padding: 18px; }
.point-backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(0,0,0,.82); backdrop-filter: blur(5px); }
.point-card { position: relative; width: min(100%, 390px); max-height: 88vh; overflow-y: auto; padding: 19px 17px 16px; border: 1px solid #71312e; border-radius: 15px; background: radial-gradient(circle at 15% 0,rgba(122,38,32,.38),transparent 38%),linear-gradient(165deg,#211516,#080808 58%); box-shadow: 0 20px 60px #000; }
.point-card header { display: flex; justify-content: space-between; align-items: flex-start; }
.point-card header small { color: #9d6448; letter-spacing: 3px; }
.point-card header h2 { margin: 4px 0 0; font-size: 25px; }
.point-close { width: 36px; height: 36px; padding: 0; border: 1px solid #553936; border-radius: 50%; background: #211516; color: #deb8a4; font-size: 23px; }
.point-balance { margin-top: 14px; padding: 13px 15px; border: 1px solid #66502c; border-radius: 10px; background: rgba(49,38,20,.42); display: flex; align-items: center; justify-content: space-between; color: #b7aaa2; }
.point-balance strong { color: #f4ca62; font-size: 27px; }
.point-rule { margin-top: 15px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.point-rule span { color: #837873; font-size: 10px; text-align: right; }
#point-withdraw-amount { width: 100%; height: 48px; margin-top: 8px; padding: 0 13px; border: 1px solid #503b36; border-radius: 9px; background: #0b0909; color: #fff; font-size: 20px; font-weight: 900; box-sizing: border-box; }
.point-presets { margin-top: 8px; display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.point-presets button { min-height: 39px; border: 1px solid #79542a; border-radius: 8px; background: #2a1c0d; color: #f0c56a; font-weight: 900; }
.point-presets button:disabled { opacity: .32; }
.point-card>p { color: #7d736d; font-size: 10px; }
.point-submit { width: 100%; min-height: 48px; border-radius: 9px; background: linear-gradient(#a42124,#6f0c10); font-weight: 900; }
.point-submit:disabled { background: #292929; color: #696969; }
.point-history-title { margin-top: 18px; padding-top: 14px; border-top: 1px solid #302624; display: flex; justify-content: space-between; color: #aaa; font-size: 11px; }
.point-history { max-height: 190px; overflow-y: auto; margin-top: 7px; }
.point-record { margin-bottom: 7px; padding: 11px; border: 1px solid #36302d; border-radius: 9px; background: #171717; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.point-record small,.point-record strong,.point-record span { display: block; }
.point-record small,.point-record span { color: #716963; font-size: 9px; }
.point-record strong { margin: 4px 0; font-size: 12px; }
.point-record>b { color: #36c783; font-size: 11px; white-space: nowrap; }
.point-record>b.warn { color: #dc7277; }
.point-history-empty { padding: 30px 0; color: #6c625e; text-align: center; font-size: 11px; }

.section-pad { padding: 0 17px 18px; }
.member-strip {
  margin-top: -2px;
  min-height: 72px;
  padding: 13px;
  border-radius: 10px;
  border: 1px solid #652c2b;
  background: linear-gradient(90deg, #130909, #080808);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.member-strip h3 { margin: 0 0 3px; font-size: 16px; }
.member-strip p { margin: 0; color: #c9bcb1; font-size: 11px; }

/* 入场礼遇条：紧跟会员条，用金色和会员条的红棕拉开层次，
   让它看起来像"你已经有的权益/差一步能拿到的权益"，而不是又一行灰字。 */
.entry-benefit {
  margin-top: 8px;
  min-height: 60px;
  padding: 11px 13px;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.entry-benefit small { display: block; margin-bottom: 3px; color: var(--gold); font-size: 11px; letter-spacing: 1px; }
.entry-benefit p { margin: 0; color: #e8ded2; font-size: 12px; line-height: 1.5; }
.entry-benefit p b { color: #fff; }
.entry-benefit-tag {
  flex-shrink: 0;
  padding: 4px 9px;
  border: 1px solid #8e6830;
  border-radius: 999px;
  color: var(--gold);
  font-size: 10px;
  white-space: nowrap;
}
.entry-benefit.gold { border: 1px solid #8e6830; background: linear-gradient(90deg, #1d1509, #0a0a0a); }
/* upsell 是 <button>，要抹掉浏览器默认按钮样式并让内容左对齐 */
.entry-benefit.upsell {
  width: 100%;
  border: 1px dashed #6d5326;
  background: linear-gradient(90deg, #150f07, #080808);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.entry-benefit.upsell:hover { border-color: #8e6830; }
.red-button {
  border: 1px solid #e05252;
  border-radius: 26px;
  background: linear-gradient(#a71b1c, #7d0c0c);
  padding: 10px 23px;
  font-weight: 800;
  box-shadow: inset 0 1px rgba(255,255,255,.12), 0 0 14px rgba(173,14,21,.2);
}
.red-button.small { padding: 8px 17px; font-size: 13px; }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 17px; }
.feature-card {
  position: relative;
  min-height: 86px;
  padding: 21px 15px;
  border-radius: 12px;
  border: 1px solid #b87948;
  overflow: hidden;
  text-align: left;
  /* 暖红透明蒙版压住背景细节，边缘只留铜金高光，不叠黑色描边。 */
  background:
    linear-gradient(96deg, rgba(112,28,24,.72) 0%, rgba(82,21,17,.48) 42%, rgba(57,18,13,.14) 72%, rgba(122,46,28,.10) 100%),
    radial-gradient(ellipse at 88% 30%, rgba(192,84,49,.32), transparent 47%),
    linear-gradient(135deg, #42130f 0%, #25100d 56%, #32130e 100%);
  box-shadow: inset 0 1px 0 rgba(255,223,176,.26), inset 0 0 0 1px rgba(255,219,160,.07), 0 8px 20px rgba(116,32,24,.18);
}
.feature-card:nth-child(2) {
  background:
    linear-gradient(96deg, rgba(58,34,18,.78) 0%, rgba(60,31,15,.50) 44%, rgba(66,35,15,.14) 74%, rgba(130,74,28,.10) 100%),
    radial-gradient(ellipse at 88% 28%, rgba(210,142,68,.26), transparent 48%),
    linear-gradient(135deg, #342012 0%, #1d120c 56%, #31190e 100%);
  box-shadow: inset 0 1px 0 rgba(255,229,181,.25), inset 0 0 0 1px rgba(255,215,145,.07), 0 8px 20px rgba(126,68,25,.17);
}
.feature-card.pass-entry { grid-column: 1 / -1; background: radial-gradient(circle at 88% 28%, rgba(171,25,30,.72), transparent 36%), linear-gradient(130deg,#2d0c09,#080808); }
.feature-card strong { display: block; font-family: serif; font-size: 21px; color: #f7ead0; }
.feature-card span { display: block; margin-top: 3px; font-size: 11px; color: #e1cdbc; letter-spacing: 1px; }
/* 用 ::before 画箭头，把 ::after 让给下面的金光横扫描边 */
.feature-card::before { content: "›"; position: absolute; right: 12px; bottom: 14px; color: #b41b21; font-size: 25px; z-index: 1; }
.responsible { text-align: center; color: #777; letter-spacing: 5px; font-size: 11px; margin: 17px 0 3px; }

.activity-page { box-sizing: border-box; padding: 9px 14px 110px; overflow-x: hidden; background: #070908; min-height: 850px; }
.match-head { min-width: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 12px 2px 14px; }
.match-head small, .match-head h2 { display: block; margin: 0; }
.match-head small { max-width: 230px; overflow: hidden; color: #8e9893; font-size: 11px; letter-spacing: 1px; text-overflow: ellipsis; white-space: nowrap; }
.match-head h2 { margin-top: 4px; color: #f4f1e9; font-size: 23px; letter-spacing: 1px; }
.match-head>span { flex: 0 0 auto; min-height: 26px; padding: 0 10px; border: 1px solid #244a3f; border-radius: 7px; background: #10251f; color: #72d4b1; font-size: 11px; font-weight: 700; display: flex; align-items: center; }
.match-head>span i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #5bd0a5; box-shadow: 0 0 7px rgba(91,208,165,.46); }
.no-activity-page { min-height:calc(100vh - 72px); padding-bottom:88px; box-sizing:border-box; background:#070908; color:#8f9793; font-size:14px; display:flex; align-items:center; justify-content:center; }

.table-tabs { height: 59px; margin: 0 0 11px; overflow-x: auto; scrollbar-width: none; }
.table-tabs::-webkit-scrollbar { display: none; }
.table-tabs>div { display: flex; width: max-content; height: 56px; gap: 8px; padding: 1px 2px; }
.table-tab { min-width: 111px; height: 52px; margin: 0; padding: 8px 11px; border: 1px solid #2d3431; border-radius: 9px; background: #111513; color: #a9b0ac; text-align: left; }
.table-tab b, .table-tab span { display: block; }
.table-tab b { font-size: 13px; font-weight: 800; }
.table-tab span { max-width: 150px; margin-top: 4px; overflow: hidden; color: #75817c; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.table-tab.active { border-color: #4aa889; background: linear-gradient(135deg,#163229,#101815); color: #f2f5f2; box-shadow: 0 5px 13px rgba(0,0,0,.26); }
.table-tab.active span { color: #77c8aa; }
.activity-overview { box-sizing: border-box; padding: 14px; border: 1px solid #303733; border-radius: 12px; background: linear-gradient(145deg,#181d1a,#101311); box-shadow: 0 9px 25px rgba(0,0,0,.28); }
.activity-overview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; }
.activity-overview-head small, .activity-overview-head h3 { display: block; margin: 0; }
.activity-overview-head small { color: #78827d; font-size: 10px; }
.activity-overview-head h3 { margin-top: 4px; color: #f2efe7; font-size: 17px; }
.activity-overview-head em { padding: 5px 8px; border-radius: 5px; background: #252b28; color: #9ea7a2; font-size: 9px; font-style: normal; }
.attendance-row { margin-top: 14px; color: #929b96; font-size: 11px; display: flex; align-items: baseline; justify-content: space-between; }
.attendance-row strong { color: #edf3ef; font-size: 15px; }
.progress-track { width: 100%; height: 6px; margin-top: 7px; overflow: hidden; border-radius: 3px; background: #2a302d; }
.progress-track i { display: block; height: 100%; min-width: 0; border-radius: 3px; background: linear-gradient(90deg,#3b9e7c,#75d1ad); }
.status-legend { margin-top: 12px; display: flex; align-items: center; gap: 14px; }
.status-legend span { position: relative; padding-left: 10px; color: #89918d; font-size: 10px; }
.status-legend span::before { content: ""; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; margin-top: -3px; border-radius: 2px; background: #66706b; }
.status-legend .checked::before { background: #61c69f; }
.status-legend .reserved::before { background: #d8ae68; }
.privacy-note { margin: 10px 0 0; padding-top: 9px; border-top: 1px solid #29302d; color: #66716c; font-size: 9px; line-height: 1.5; }
.checkin-grid { margin-top: 11px; display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.checkin-seat { min-width: 0; min-height: 111px; padding: 9px 7px 8px; box-sizing: border-box; border: 1px solid #303633; border-radius: 9px; background: #111513; display: flex; flex-direction: column; align-items: stretch; }
.checkin-seat.checked { border-color: #347e67; background: linear-gradient(155deg,#16332a,#111715); }
.checkin-seat.reserved { border-color: #594b32; background: linear-gradient(155deg,#292319,#151411); }
.seat-head { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 3px; }
.seat-number, .seat-state { font-size: 8px; white-space: nowrap; }
.seat-number { color: #7d8782; }
.seat-state { color: #919a95; font-weight: 700; }
.checkin-seat.checked .seat-state { color: #6fd0ab; }
.checkin-seat.reserved .seat-state { color: #ddb66f; }
.seat-identity { height: 39px; margin-top: 10px; display: flex; align-items: center; justify-content: center; }
.checkin-person { position: relative; width: 34px; height: 34px; }
.checkin-avatar, .checkin-initial, .checkin-mark { width: 34px; height: 34px; box-sizing: border-box; border-radius: 8px; }
.checkin-avatar { position: absolute; inset: 0; border: 1px solid #538b76; background: #26302c; object-fit: cover; }
.checkin-avatar.is-broken { display: none; }
.checkin-initial { background: #284d40; color: #cceadd; font-size: 14px; font-weight: 800; display: grid; place-items: center; }
.checkin-mark { position: relative; display: block; border: 1px solid #3b4440; background: #1a1f1c; }
.checkin-seat.reserved .checkin-mark { border-color: #665536; background: #2c261b; }
.mark-line { position: absolute; left: 8px; right: 8px; top: 10px; height: 2px; border-radius: 1px; background: #56605b; box-shadow: 0 7px 0 #56605b; }
.checkin-seat.reserved .mark-line { background: #9c824f; box-shadow: 0 7px 0 #9c824f; }
.mark-dot { position: absolute; right: 5px; bottom: 5px; width: 6px; height: 6px; border-radius: 2px; background: #59635e; }
.checkin-seat.reserved .mark-dot { background: #c49c58; }
.seat-name { max-width: 100%; margin-top: 6px; overflow: hidden; color: #aab2ae; font-size: 9px; line-height: 1.35; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.checkin-seat.checked .seat-name { color: #f0f4f1; }
.checkin-seat.reserved .seat-name { color: #b8aa8d; }
.queue-bar { margin: 10px 0 0; padding: 11px 13px; border: 1px solid #426c5c; border-radius: 12px; background: linear-gradient(110deg,#14251f,#0d1512); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.queue-bar strong, .queue-bar small { display: block; }
.queue-bar strong { color: #d7eee5; font-size: 12px; }
.queue-bar small { margin-top: 4px; color: #81968d; font-size: 9px; }

.onsite-page { box-sizing: border-box; min-height: 850px; padding: 18px 12px 110px; overflow-x: hidden; background: linear-gradient(180deg,#130707 0,#080606 260px,#050505 550px); }
.notice-heading { padding: 6px 4px 14px; }
.notice-heading small, .notice-heading h2, .notice-heading p { display: block; margin: 0; }
.notice-heading small { color: #b88c54; font-size: 10px; font-weight: 700; letter-spacing: 2px; }
.notice-heading h2 { margin-top: 5px; color: #fff5e7; font-size: 24px; font-weight: 900; letter-spacing: 1px; }
.notice-heading p { margin-top: 5px; color: #95867d; font-size: 11px; line-height: 1.55; }
.featured-notice { overflow: hidden; border: 1px solid rgba(200,151,83,.5); border-radius: 14px; background: #110d0b; box-shadow: 0 12px 32px rgba(0,0,0,.36); }
.featured-cover { position: relative; height: 165px; overflow: hidden; background: #22130d; }
.featured-cover-image { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.notice-image-fallback { box-sizing: border-box; background: radial-gradient(circle at 80% 22%,rgba(214,159,82,.35),transparent 26%),linear-gradient(135deg,#521812,#1c0d0a 54%,#080706); color: #f0cf93; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.notice-image-fallback small { margin: 3px 0 0 24px; font-size: 9px; font-weight: 800; letter-spacing: 3px; }
.featured-cover-shade { position: absolute; z-index: 2; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.02) 48%,rgba(4,3,3,.82)); }
.featured-cover-meta { position: absolute; z-index: 3; left: 13px; right: 13px; bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
.featured-cover-meta b { min-height: 22px; padding: 0 9px; box-sizing: border-box; border: 1px solid rgba(248,216,151,.48); border-radius: 12px; background: rgba(91,24,19,.86); color: #ffe6b2; font-size: 9px; line-height: 22px; }
.featured-cover-meta span { max-width: 195px; overflow: hidden; color: #f4ddba; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.featured-copy { padding: 15px 15px 17px; }
.featured-copy h3, .featured-copy strong, .featured-copy p { display: block; overflow-wrap: break-word; word-break: break-word; }
.featured-copy h3 { margin: 0; color: #fff8eb; font-size: 20px; line-height: 1.3; }
.featured-copy strong { margin-top: 6px; color: #d2aa72; font-size: 12px; line-height: 1.55; }
.featured-copy p { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid rgba(184,138,80,.2); color: #b8aca2; font-size: 12px; line-height: 1.8; white-space: pre-line; }
.notice-empty { min-height: 90px; padding: 15px; box-sizing: border-box; border: 1px solid #3c2c23; border-radius: 12px; background: linear-gradient(135deg,#17110e,#0b0908); display: flex; align-items: center; }
.notice-empty-mark { flex: 0 0 41px; width: 41px; height: 41px; margin-right: 12px; border: 1px solid #7c5833; border-radius: 11px; background: #25130e; color: #d9ad6b; font-family: Georgia,serif; font-size: 21px; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.notice-empty b, .notice-empty small { display: block; }
.notice-empty b { color: #ede3d4; font-size: 14px; }
.notice-empty small { margin-top: 4px; color: #8f8279; font-size: 10px; }
.more-notices { margin-top: 17px; }
.more-notices>h3 { margin: 0 4px 8px; color: #c8aa7a; font-size: 12px; letter-spacing: 1px; }
.notice-list-card { margin-top: 8px; overflow: hidden; border: 1px solid #382a23; border-radius: 11px; background: #100d0c; display: flex; align-items: stretch; }
.notice-list-image { position: relative; flex: 0 0 91px; width: 91px; min-height: 110px; object-fit: cover; }
.notice-list-image.notice-image-fallback small { margin-left: 14px; font-size: 7px; letter-spacing: 1px; }
.notice-list-copy { flex: 1; min-width: 0; padding: 12px; }
.notice-list-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.notice-list-meta span { overflow: hidden; color: #a88150; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.notice-list-copy h4, .notice-list-copy strong, .notice-list-copy p { display: block; overflow-wrap: break-word; word-break: break-word; }
.notice-list-copy h4 { margin: 6px 0 0; color: #f5ecdd; font-size: 14px; line-height: 1.35; }
.notice-list-copy strong { margin-top: 4px; color: #bf9e6c; font-size: 10px; line-height: 1.5; }
.notice-list-copy p { margin: 6px 0 0; color: #9c9189; font-size: 10px; line-height: 1.65; white-space: pre-line; }
.store-brief { margin-top: 17px; padding: 14px; box-sizing: border-box; border: 1px solid #322a24; border-radius: 12px; background: linear-gradient(145deg,#151311,#0b0a09); }
.store-brief-top { margin-bottom: 12px; display: flex; align-items: center; }
.store-monogram { flex: 0 0 35px; width: 35px; height: 35px; margin-right: 10px; border: 1px solid #80603b; border-radius: 10px; background: #21140e; color: #e3bb7a; font-family: Georgia,serif; font-size: 17px; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.store-brief-top>div { flex: 1; min-width: 0; }
.store-brief-top b, .store-brief-top small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-brief-top b { color: #f4ecdf; font-size: 15px; }
.store-brief-top small { margin-top: 2px; color: #8e8178; font-size: 10px; }
.store-brief dl { margin: 0; }
.store-brief dl>div { min-height: 27px; padding: 5px 0; box-sizing: border-box; border-top: 1px solid rgba(151,126,96,.13); display: flex; align-items: flex-start; }
.store-brief dt { flex: 0 0 43px; color: #9d7950; font-size: 10px; font-weight: 800; }
.store-brief dd { flex: 1; min-width: 0; margin: 0; color: #c7bdb3; font-size: 11px; line-height: 1.55; overflow-wrap: break-word; word-break: break-word; }
.store-brief>p { margin: 9px 0 0; color: #766f69; font-size: 9px; line-height: 1.6; }
.live-section-head { margin: 25px 4px 10px; display: flex; align-items: flex-end; justify-content: space-between; }
.live-section-head>div { flex: 1; min-width: 0; }
.live-section-head small, .live-section-head h2 { display: block; margin: 0; }
.live-section-head small { color: #8a6844; font-size: 9px; font-weight: 700; letter-spacing: 2px; }
.live-section-head h2 { margin-top: 3px; color: #f5eee4; font-size: 19px; }
.live-section-head>span { min-height: 22px; padding: 0 8px; border: 1px solid #3e3426; border-radius: 12px; background: #15110c; color: #ae8b55; font-size: 9px; line-height: 22px; }
.round-table-shell { padding-top: 2px; }
.live-empty { min-height: 170px; padding: 29px 21px; box-sizing: border-box; border: 1px solid #2f2923; border-radius: 12px; background: #0c0b0a; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.live-empty-icon { width: 73px; height: 35px; margin-bottom: 2px; display: flex; align-items: flex-end; justify-content: center; gap: 6px; }
.live-empty-icon i { width: 17px; height: 21px; box-sizing: border-box; border: 2px solid #66543b; border-radius: 5px 5px 2px 2px; background: #17130e; }
.live-empty-icon .tall { height: 29px; border-color: #8b6c40; }
.live-empty h3 { margin: 15px 0 0; color: #f0ece5; font-size: 16px; }
.live-empty p { margin: 7px 0 0; color: #81796e; font-size: 11px; line-height: 1.6; }
.round-table-head { min-width: 0; padding: 6px 5px 11px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.round-table-head>div { flex: 1 1 auto; min-width: 0; }
.round-table-head small, .round-table-head h2 { display: block; max-width: 100%; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.round-table-head small { color: #aa8276; font-size: 11px; letter-spacing: .5px; }
.round-table-head h2 { margin-top: 4px; color: #f6f1e8; font-size: 21px; font-weight: 900; letter-spacing: .5px; }
.round-table-head>span { flex: 0 0 auto; min-height: 26px; padding: 0 9px; border: 1px solid #6f5630; border-radius: 14px; background: rgba(37,26,15,.94); color: #e0ba6b; font-size: 10px; font-weight: 700; display: flex; align-items: center; white-space: nowrap; }
.round-table-head>span i { width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #d9ae58; box-shadow: 0 0 7px rgba(217,174,88,.55); }
.round-table-tabs { width: 100%; height: 54px; margin-bottom: 5px; overflow-x: auto; scrollbar-width: none; }
.round-table-tabs::-webkit-scrollbar { display: none; }
.round-table-tabs>div { width: max-content; height: 51px; padding: 1px 4px; display: flex; gap: 7px; }
.round-table-tab { min-width: 95px; height: 47px; margin: 0; padding: 7px 12px; box-sizing: border-box; border: 1px solid #3d3523; border-radius: 25px; background: #090909; color: #8e8a84; text-align: left; display: flex; flex-direction: column; justify-content: center; }
.round-table-tab.active { border-color: #b38a3d; background: linear-gradient(145deg,#24180f,#090909); color: #f0c866; box-shadow: 0 0 11px rgba(179,138,61,.2); }
.round-table-tab b, .round-table-tab span { display: block; max-width: 125px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.round-table-tab b { font-size: 13px; }
.round-table-tab span { margin-top: 2px; color: #81786c; font-size: 9px; }
.round-table-tab.active span { color: #bba168; }
.round-board { position: relative; width: 100%; height: 475px; margin: 2px auto 0; }
.round-board-bg { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; border-radius: 10px; object-fit: fill; }
.round-board::after { content: ""; position: absolute; z-index: 1; inset: 0; border-radius: 10px; background: radial-gradient(ellipse at 50% 46%,transparent 36%,rgba(0,0,0,.06) 57%,rgba(0,0,0,.36) 100%); pointer-events: none; }
.round-seat { position: absolute; z-index: 4; width: 66px; height: 85px; padding: 10px 4px 6px; box-sizing: border-box; border: 1px solid #7e5b31; border-radius: 9px; background: linear-gradient(160deg,rgba(21,17,13,.98),rgba(3,3,3,.99)); color: #b9a587; box-shadow: 0 5px 12px rgba(0,0,0,.72),inset 0 0 9px rgba(151,100,39,.08); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.round-seat.checked { border-color: #b58a4d; background: linear-gradient(155deg,rgba(39,25,17,.98),rgba(5,5,5,.99)); color: #fff4df; box-shadow: 0 5px 14px rgba(0,0,0,.8),0 0 9px rgba(173,118,56,.2); }
.round-seat.reserved { border-color: #9f7b3f; color: #d7bd82; }
.round-seat-no { position: absolute; left: -7px; top: -7px; width: 20px; height: 20px; border: 1px solid #7e5b31; border-radius: 50%; background: #090807; color: #f1c77a; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.round-seat-avatar { width: 34px; height: 34px; margin-bottom: 6px; box-sizing: border-box; border: 1px solid #9d7741; border-radius: 8px; background: #211911; object-fit: cover; }
.round-seat-initial { color: #f1d4a0; font-size: 15px; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.round-seat-name { display: block; width: 56px; overflow: hidden; color: inherit; font-size: 9px; line-height: 1.3; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.round-chair-icon { position: relative; width: 31px; height: 29px; margin: 0 0 6px; }
.round-chair-icon::before { content: ""; position: absolute; left: 7px; top: 2px; width: 18px; height: 16px; box-sizing: border-box; border: 4px solid #a88754; border-bottom-width: 3px; border-radius: 5px 5px 3px 3px; }
.round-chair-icon::after { content: ""; position: absolute; left: 4px; bottom: 2px; width: 24px; height: 13px; box-sizing: border-box; border: 4px solid #a88754; border-top: 0; border-radius: 0 0 4px 4px; }
.round-seat.reserved .round-chair-icon::before, .round-seat.reserved .round-chair-icon::after { border-color: #c39b55; }
.round-board.compact .round-seat { width: 56px; height: 74px; padding-top: 8px; }
.round-board.compact .round-seat-avatar { width: 28px; height: 28px; margin-bottom: 4px; }
.round-board.compact .round-chair-icon { margin-bottom: 2px; transform: scale(.82); }
.round-board.compact .round-seat-name { width: 48px; font-size: 8px; }
.round-board.compact .round-seat-no { width: 17px; height: 17px; font-size: 9px; }
.round-table-brand { position: absolute; z-index: 3; left: 50%; top: 47%; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; }
.round-table-brand img { width: 58px; height: 58px; opacity: .9; object-fit: contain; }
.round-table-brand span { display: block; max-width: 125px; margin-top: 4px; overflow: hidden; color: rgba(231,194,119,.76); font-size: 10px; font-weight: 800; letter-spacing: 1px; text-overflow: ellipsis; white-space: nowrap; }
.round-table-meta { margin: 6px 5px 0; padding: 9px 11px; border: 1px solid #2e271b; border-radius: 8px; background: #0b0a08; color: #7f776a; font-size: 10px; display: flex; align-items: center; justify-content: space-between; }
.round-table-meta b { color: #d4b573; font-size: 12px; }
.round-table-action { min-height: 54px; margin: 8px 5px 0; padding: 9px 9px 9px 11px; box-sizing: border-box; border: 1px solid #4d3c25; border-radius: 9px; background: linear-gradient(110deg,#17130d,#0b0a08); display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.round-table-action>div { flex: 1; min-width: 0; }
.round-table-action b, .round-table-action small { display: block; }
.round-table-action b { overflow: hidden; color: #e6ce9c; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.round-table-action small { margin-top: 3px; color: #817766; font-size: 9px; line-height: 1.45; }
.round-table-action button { flex: 0 0 auto; min-width: 76px; min-height: 34px; margin: 0; padding: 0 10px; border: 1px solid #9f242a; border-radius: 18px; background: #9f1720; color: #fff5ea; font-size: 11px; font-weight: 800; }
.seat-picker-mask { position: fixed; z-index: 120; inset: 0; display: flex; align-items: flex-end; }
.seat-picker-backdrop { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: rgba(0,0,0,.78); }
.seat-picker-sheet { position: relative; z-index: 1; width: 100%; max-height: calc(100vh - 18px); padding: 10px 15px 24px; box-sizing: border-box; overflow-y: auto; border: 1px solid #5b4729; border-bottom: 0; border-radius: 18px 18px 0 0; background: radial-gradient(circle at 88% 0,rgba(132,81,27,.2),transparent 32%),linear-gradient(165deg,#1b160f,#090806 58%); box-shadow: 0 -12px 30px rgba(0,0,0,.5); }
.seat-picker-handle { width: 41px; height: 4px; margin: 0 auto 12px; border-radius: 4px; background: #5d5141; }
.seat-picker-sheet header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.seat-picker-sheet header small { color: #9f7a42; font-size: 10px; letter-spacing: 2px; }
.seat-picker-sheet header h3 { margin: 3px 0 0; color: #f4ead9; font-size: 19px; }
.seat-picker-sheet header>button { width: 30px; height: 30px; padding: 0; border: 1px solid #5d4a32; border-radius: 50%; background: #18130e; color: #b9a484; font-size: 21px; line-height: 27px; }
.seat-picker-sheet>p { margin: 8px 0 0; color: #8b8172; font-size: 11px; line-height: 1.55; }
.seat-picker-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.seat-picker-option { min-width: 0; min-height: 54px; padding: 7px 4px; border: 1px solid #4c402f; border-radius: 10px; background: #12100c; color: #c8b28a; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.seat-picker-option b { font-size: 17px; line-height: 1.1; }
.seat-picker-option span { margin-top: 4px; color: #71695e; font-size: 9px; }
.seat-picker-option.selected { border-color: #d2a754; background: linear-gradient(145deg,#3b2b12,#181108); color: #ffe2a0; box-shadow: inset 0 0 0 1px rgba(255,218,143,.08); }
.seat-picker-option:disabled { border-color: #302d29; background: #0d0c0b; color: #59544d; opacity: .58; }
.seat-picker-confirm { width: 100%; min-height: 44px; margin-top: 12px; padding: 0 12px; border: 1px solid #b13235; border-radius: 22px; background: linear-gradient(90deg,#861017,#bd1721); color: #fff; font-size: 13px; font-weight: 800; }
.seat-picker-confirm:disabled { border-color: #3f3630; background: #25211c; color: #716960; }

@media (max-width:360px) {
  .onsite-page { padding-left: 7px; padding-right: 7px; }
  .notice-list-image { flex-basis: 75px; width: 75px; }
  .round-seat { width: 63px; height: 82px; }
  .round-seat-name { width: 53px; }
}

.ranking-member-only { box-sizing: border-box; min-height: 850px; padding-bottom: 88px; background: #050505; color: #9b948a; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.ranking-page { box-sizing: border-box; min-height: 850px; overflow-x: hidden; padding: 0 14px 115px; background-color: #080505; background-image: linear-gradient(180deg,rgba(4,3,2,.08),rgba(7,4,3,.18) 270px,rgba(8,5,5,.88) 575px,#080505 825px),url('./ranking-bg-premium-v1.jpg'); background-position: center top; background-size: 100% auto; background-repeat: no-repeat; }
.rank-hero { min-height: 155px; padding: 24px 4px 17px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.rank-eyebrow { width: 100%; display: flex; align-items: center; justify-content: center; }
.rank-eyebrow small { flex: 0 0 auto; margin: 0 11px; color: #cda96d; font-size: 10px; font-weight: 700; letter-spacing: 3px; }
.rank-eyebrow i { flex: 0 1 56px; max-width: 56px; height: 1px; background: linear-gradient(90deg,transparent,rgba(219,177,105,.76)); }
.rank-eyebrow i:last-child { background: linear-gradient(90deg,rgba(219,177,105,.76),transparent); }
.rank-hero h2 { margin: 9px 0 0; color: #fff8e9; font-family: "STSong","Songti SC",serif; font-size: 40px; line-height: 1.18; letter-spacing: 6px; text-shadow: 0 2px 12px rgba(0,0,0,.9),0 0 14px rgba(211,166,90,.14); }
.rank-hero p { margin: 6px 0 0; color: rgba(232,216,186,.62); font-size: 10px; font-weight: 600; letter-spacing: 2px; }
.rank-tabs { width: 100%; min-height: 46px; margin: 2px 0 10px; padding: 4px; border: 1px solid rgba(194,149,83,.34); border-radius: 25px; background: rgba(8,7,6,.92); box-shadow: inset 0 1px rgba(255,255,255,.03),0 8px 21px rgba(0,0,0,.24); display: flex; }
.rank-tab { flex: 1; min-width: 0; min-height: 36px; padding: 0 4px; border: 0; border-radius: 20px; background: transparent; color: #8f8981; font-size: 13px; font-weight: 700; white-space: nowrap; }
.rank-tab.active { color: #ffe3a1; background: linear-gradient(135deg,rgba(112,74,27,.85),rgba(54,35,14,.94)); box-shadow: inset 0 1px rgba(255,233,177,.17),0 4px 12px rgba(0,0,0,.28); }
.rank-scope-note { min-height: 31px; margin: 0 0 11px; padding: 7px 10px; border: 1px solid rgba(179,130,68,.2); border-radius: 9px; background: rgba(15,11,9,.76); color: #afa394; font-size: 10px; line-height: 1.55; text-align: center; }
.rank-scope-note span { margin-right: 6px; color: #bc8b48; font-size: 7px; }
.top-one { position: relative; min-height: 115px; padding: 19px 14px 15px; overflow: hidden; border: 1px solid rgba(232,190,111,.56); border-radius: 13px; background: radial-gradient(circle at 16% 10%,rgba(213,164,83,.18),transparent 34%),linear-gradient(118deg,rgba(58,25,18,.95),rgba(16,12,10,.97) 64%,rgba(7,7,7,.98)); box-shadow: inset 0 1px rgba(255,240,201,.08),0 10px 28px rgba(0,0,0,.35); display: flex; align-items: center; }
.top-one::before { content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,transparent,#f5d58b 28%,#b77a2f 70%,transparent); }
.champion-badge { position: absolute; top: 9px; right: 11px; padding: 3px 7px; border: 1px solid rgba(242,209,138,.42); border-radius: 9px; color: #e8c87f; background: rgba(58,39,18,.7); font-size: 9px; font-weight: 800; letter-spacing: 1px; }
.top-avatar { position: relative; flex: 0 0 66px; width: 66px; height: 66px; box-sizing: border-box; margin-right: 13px; overflow: hidden; border: 3px solid #d6b36b; border-radius: 50%; background: radial-gradient(circle at 34% 28%,#4c4133,#151310 64%,#090909); color: #e7c77e; display: grid; place-items: center; font-family: serif; font-size: 23px; font-weight: 800; box-shadow: 0 0 0 4px rgba(205,164,91,.08),0 6px 17px rgba(0,0,0,.38); }
.rank-avatar-initial { display: grid; place-items: center; width: 100%; height: 100%; }
.rank-avatar-image { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.rank-avatar-image.is-broken { display: none; }
.top-copy { flex: 1; min-width: 0; padding-right: 7px; }
.top-copy small { color: #b4a18c; font-size: 10px; letter-spacing: 1px; }
.top-copy h3 { margin: 4px 0; overflow: hidden; color: #fff8ea; font-size: 20px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.top-copy strong { overflow: hidden; color: #f0ca72; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.top-number { flex: 0 0 auto; color: rgba(233,198,127,.14); font-family: Georgia,serif; font-size: 44px; font-style: italic; font-weight: 700; }
.podium { margin: 9px 0 13px; display: flex; align-items: stretch; justify-content: space-between; }
.podium-card { flex: 1; min-width: 0; min-height: 82px; padding: 12px 9px; border: 1px solid rgba(193,178,151,.28); border-radius: 10px; background: linear-gradient(135deg,rgba(42,40,37,.96),rgba(14,13,12,.96)); display: flex; align-items: center; box-shadow: inset 0 1px rgba(255,255,255,.04),0 6px 16px rgba(0,0,0,.22); }
.podium-card + .podium-card { margin-left: 8px; }
.podium-card.bronze { border-color: rgba(184,112,65,.38); background: linear-gradient(135deg,rgba(49,30,23,.96),rgba(14,12,11,.97)); }
.podium-identity { position: relative; flex: 0 0 36px; width: 36px; height: 36px; margin-right: 8px; }
.podium-avatar { position: relative; width: 34px; height: 34px; box-sizing: border-box; overflow: hidden; border: 2px solid #aaa49a; border-radius: 50%; background: radial-gradient(circle at 35% 30%,#34302a,#121212); color: #d6cec2; display: grid; place-items: center; font-family: serif; font-size: 13px; font-weight: 800; }
.medal { position: absolute; right: 0; bottom: -1px; width: 16px; height: 16px; box-sizing: border-box; border: 1px solid #ddd5c7; border-radius: 50%; background: linear-gradient(145deg,#f1ede4,#8f8b84); color: #302e2b; display: grid; place-items: center; font-family: Georgia,serif; font-size: 9px; font-weight: 900; box-shadow: 0 2px 6px rgba(0,0,0,.38); }
.bronze .medal { border-color: #da9d72; background: linear-gradient(145deg,#dda076,#70442d); color: #2b1710; }
.podium-copy { flex: 1; min-width: 0; }
.podium-copy small { display: block; overflow: hidden; color: #968e84; font-size: 8px; letter-spacing: .5px; text-overflow: ellipsis; white-space: nowrap; }
.podium-copy b { display: block; margin: 4px 0; overflow: hidden; color: #f4efe7; font-size: 12px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.podium-copy strong { display: flex; align-items: center; overflow: hidden; color: #d9b66d; font-size: 10px; white-space: nowrap; }
.rank-list { overflow: hidden; border: 1px solid rgba(164,132,85,.3); border-radius: 12px; background: rgba(13,12,11,.94); box-shadow: inset 0 1px rgba(255,255,255,.025),0 9px 25px rgba(0,0,0,.28); }
.rank-row { min-height: 58px; padding: 0 11px; border-bottom: 1px solid rgba(158,132,96,.14); display: grid; grid-template-columns: 35px 40px minmax(0,1fr) 71px; align-items: center; color: #eee8df; font-size: 12px; }
.rank-row.header { min-height: 41px; background: rgba(113,81,39,.11); color: #8e877e; font-size: 10px; font-weight: 600; }
.rank-row:last-child { border: 0; }
.rank-row > b { color: #d7ae61; font-family: Georgia,serif; font-size: 17px; }
.rank-row > strong { min-width: 0; overflow: hidden; color: #f0ece5; text-overflow: ellipsis; white-space: nowrap; }
.rank-mini-avatar { position: relative; width: 29px; height: 29px; box-sizing: border-box; overflow: hidden; border: 1px solid #766345; border-radius: 50%; background: radial-gradient(circle at 35% 30%,#34302a,#121212); color: #c9ae7a; display: grid; place-items: center; font-family: serif; font-size: 11px; font-weight: 800; }
.rank-score { overflow: hidden; color: #e3bd6d; font-weight: 800; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.gold-avatar { color: #704402; background: radial-gradient(circle at 35% 28%,#fff2ae 0,#e9bc54 35%,#ad6b10 72%,#513006 100%); border-color: #f6d77d; text-shadow: 0 1px rgba(255,255,255,.65); }
.champion-score { min-width: 0; display: flex; align-items: center; }
.champion-medal { flex: 0 0 auto; width: 18px; height: 18px; margin-right: 5px; border: 1px solid #ffe494; border-radius: 50%; background: linear-gradient(145deg,#fff1a2,#d99a13 62%,#8c5100); color: #684000; display: inline-grid; place-items: center; font-size: 9px; box-shadow: 0 0 7px rgba(229,176,50,.28); }
.champion-medal.small { width: 14px; height: 14px; margin-right: 3px; font-size: 7px; vertical-align: middle; }
.rank-empty { min-height: 165px; padding: 31px 14px; border: 1px solid rgba(178,139,83,.25); border-radius: 12px; background: rgba(13,11,10,.9); color: #817970; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.rank-empty > span { color: #bc9354; font-size: 28px; }
.rank-empty strong { margin-top: 9px; color: #d4c8b7; font-size: 14px; }
.rank-empty small { margin-top: 5px; font-size: 10px; line-height: 1.6; }

.profile-page { padding: 34px 16px 120px; background: #050505; min-height: 850px; }
.profile-head { display: flex; gap: 14px; align-items: center; margin-bottom: 24px; }
.profile-avatar-editor { flex: 0 0 67px; width: 67px; text-align: center; }
.profile-avatar { position: relative; width: 67px; height: 67px; padding: 0; overflow: hidden; border-radius: 50%; background: linear-gradient(#fff,#ddd); color: #aaa; border: 1px solid #fff; display: grid; place-items: center; font-size: 37px; cursor: pointer; }
.profile-avatar-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.profile-avatar-image.is-broken { display: none; }
.profile-avatar-initial { display: grid; place-items: center; width: 100%; height: 100%; }
.profile-avatar-editor small { display: block; margin-top: 5px; color: #9e8d7d; font-size: 9px; white-space: nowrap; }
.profile-identity { min-width: 0; flex: 1; }
.profile-identity > label { display: block; margin-bottom: 6px; color: #a99a8c; font-size: 11px; }
.profile-nickname-row { display: flex; gap: 7px; align-items: center; }
.profile-nickname-input { min-width: 0; flex: 1; height: 36px; padding: 0 10px; border: 1px solid #5c473b; border-radius: 7px; background: #150f0f; color: #fff; font-size: 16px; font-weight: 700; outline: none; }
.profile-nickname-input:focus { border-color: #c78e53; }
.profile-save-button { flex: 0 0 auto; min-height: 36px; padding: 0 12px; border-radius: 18px; font-size: 11px; }
.profile-head p { margin: 8px 0 0; color: #999; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-card { min-height: 171px; border: 1px solid #3b3b3b; border-radius: 9px; padding: 20px; background: radial-gradient(circle at 88% 20%, rgba(136,16,19,.45), transparent 31%), linear-gradient(135deg,#272727,#070707); }
.member-top { display: flex; justify-content: space-between; }
.member-top small { color: #aaa; font-weight: 900; letter-spacing: 1px; }
.member-top h3 { margin: 4px 0 0; font-size: 22px; }
.growth { display: flex; justify-content: space-between; align-items: center; margin-top: 25px; }
.growth strong { font-size: 35px; }
.growth strong small { font-size: 13px; color: #aaa; }
.growth span { border: 1px solid #58413e; border-radius: 18px; padding: 7px 12px; color: #ddd; font-size: 12px; }
.progress { height: 5px; margin: 16px 0 9px; border-radius: 4px; background: #262626; overflow: hidden; }
.progress i { display: block; height: 100%; width: var(--progress,0%); background: linear-gradient(90deg,#7c0d11,#d7a53d); }
.member-card > p { margin: 0; color: #aaa; font-size: 11px; }
.balance-card { min-height: 92px; margin-top: 28px; border: 1px solid #3d3d3d; border-radius: 8px; padding: 20px 10px; display: grid; grid-template-columns: repeat(3, 1fr); background: #1c1c1c; }
.balance-item { text-align: center; border-right: 1px solid #454545; }
.balance-item:last-child { border: 0; }
.balance-item span { color: #aaa; font-size: 12px; }
.balance-item strong { display: block; margin-top: 9px; font-size: 21px; }
.balance-item:last-child strong { color: #e9c33f; }
.balance-card { min-height: 84px; padding: 12px 8px; box-sizing: border-box; }
.balance-item { min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.balance-item strong { margin-top: 5px; font-size: 19px; }
.balance-card button.balance-item { width: 100%; padding: 0; border-top: 0; border-bottom: 0; border-left: 0; border-radius: 0; background: transparent; color: inherit; }
.function-card { min-height: 181px; margin-top: 26px; border: 1px solid #3c3c3c; border-radius: 8px; padding: 26px 20px; background: #1c1c1c; }
.function-card h3 { margin: 0 0 25px; font-size: 21px; }
.function-grid { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.function-button { border: 0; background: transparent; padding: 0 2px; }
.function-button b { width: 42px; height: 42px; margin: 0 auto 10px; border: 1px solid #ddd; border-radius: 50%; display: grid; place-items: center; font-size: 17px; }
.function-button span { color: #aaa; font-size: 12px; }
.brand-footer { text-align: center; color: #888; margin-top: 28px; font-size: 13px; }

.subpage { padding: 18px 16px 115px; min-height: 850px; background: linear-gradient(#130708,#050505 180px); }
.subpage h2 { margin: 3px 0 17px; font-size: 25px; }
.subpage-lead { color: #aaa; font-size: 13px; line-height: 1.7; }
.dark-card { border: 1px solid #3b3b3b; border-radius: 10px; background: #1c1c1c; padding: 15px; margin-bottom: 12px; }
.dark-card h3 { margin: 0 0 6px; }
.dark-card p { color: #aaa; font-size: 12px; margin: 0; line-height: 1.65; }
.menu-layout { display: grid; grid-template-columns: 88px minmax(0,1fr); min-height: 680px; margin: 0 -16px; }
.category-list { padding: 8px 5px 100px; background: #0d0c0c; }
.category-button { width: 100%; min-height: 75px; margin: 0 0 6px; padding: 7px 3px 6px; box-sizing: border-box; border: 1px solid #24211f; border-radius: 10px; background: #0d0c0c; color: #8f8175; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2; }
.category-button.active { border-color: #a77a45; color: #f0d3a1; background: radial-gradient(circle at 16% 0,rgba(167,94,38,.28),transparent 40%),linear-gradient(145deg,#291711,#110d0b 72%); box-shadow: inset 0 1px rgba(255,226,176,.16),0 4px 11px rgba(0,0,0,.28); }
.category-label { max-height: 28px; overflow: hidden; font-size: 11px; font-weight: 700; line-height: 14px; }
.category-icon { position: relative; width: 28px; height: 28px; margin-bottom: 5px; box-sizing: border-box; color: #a98a68; }
.category-button.active .category-icon { color: #e3b973; }
.category-icon i,.category-icon em,.category-icon i::before,.category-icon i::after,.category-icon em::before,.category-icon em::after { position: absolute; box-sizing: border-box; border-color: currentColor; content: ""; }
.category-icon-grid i,.category-icon-grid em { top: 3px; width: 9px; height: 9px; border: 1.5px solid currentColor; border-radius: 3px; }
.category-icon-grid i { left: 4px; }.category-icon-grid em { right: 4px; }
.category-icon-grid i::after,.category-icon-grid em::after { top: 11px; left: -1.5px; width: 9px; height: 9px; border: 1.5px solid currentColor; border-radius: 3px; }
.category-icon-cocktail i { left: 4px; top: 3px; width: 21px; height: 12px; border: 1.5px solid currentColor; border-radius: 3px 3px 11px 11px; }.category-icon-cocktail i::after { left: 9px; top: 10px; width: 1.5px; height: 10px; background: currentColor; }.category-icon-cocktail em { left: 9px; bottom: 3px; width: 11px; height: 1.5px; background: currentColor; }
.category-icon-tumbler i { left: 6px; top: 3px; width: 16px; height: 22px; border: 1.5px solid currentColor; border-radius: 3px 3px 6px 6px; }.category-icon-tumbler em { left: 11px; top: 12px; width: 7px; height: 7px; border: 1.5px solid currentColor; border-radius: 50%; }
.category-icon-beer i { left: 5px; top: 5px; width: 16px; height: 20px; border: 1.5px solid currentColor; border-radius: 3px 3px 5px 5px; }.category-icon-beer em { right: 2px; top: 9px; width: 7px; height: 12px; border: 1.5px solid currentColor; border-left: 0; border-radius: 0 6px 6px 0; }
.category-icon-bottle i { left: 9px; top: 7px; width: 11px; height: 19px; border: 1.5px solid currentColor; border-radius: 4px; }.category-icon-bottle i::before { left: 2px; top: -7px; width: 4px; height: 7px; border: 1.5px solid currentColor; border-bottom: 0; }.category-icon-bottle em { left: 11px; top: 14px; width: 7px; height: 5px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }
.category-icon-can i { left: 7px; top: 3px; width: 15px; height: 23px; border: 1.5px solid currentColor; border-radius: 4px; }.category-icon-can em { left: 10px; top: 13px; width: 9px; height: 1.5px; background: currentColor; transform: rotate(-12deg); }
.category-icon-fruit i { left: 5px; top: 5px; width: 19px; height: 19px; border: 1.5px solid currentColor; border-radius: 50%; }.category-icon-fruit i::before { left: 8px; top: 1px; width: 1.5px; height: 15px; background: currentColor; transform: rotate(-34deg); }.category-icon-fruit em { left: 15px; top: 1px; width: 7px; height: 4px; border: 1.5px solid currentColor; border-left: 0; border-bottom: 0; transform: rotate(-20deg); }
.category-icon-snack i { left: 4px; top: 11px; width: 21px; height: 14px; border: 1.5px solid currentColor; border-top: 0; border-radius: 0 0 9px 9px; }.category-icon-snack i::before { left: -1.5px; top: -4px; width: 21px; height: 4px; border: 1.5px solid currentColor; border-radius: 50%; }.category-icon-snack em { left: 9px; top: 4px; width: 2px; height: 8px; background: currentColor; box-shadow: 5px 2px currentColor,10px 0 currentColor; }
.category-icon-spark i { left: 8px; top: 4px; width: 14px; height: 14px; border: 1.5px solid currentColor; transform: rotate(45deg); }.category-icon-spark em { left: 13px; bottom: 3px; width: 2px; height: 7px; background: currentColor; }
.product-list { min-width: 0; padding: 0 8px 120px; }
.product-card { position: relative; min-width: 0; min-height: 122px; margin: 0 0 8px; padding: 8px 7px; overflow: hidden; border: 1px solid rgba(151,115,72,.42); border-radius: 11px; background: radial-gradient(circle at 8% 0,rgba(137,75,35,.10),transparent 34%),linear-gradient(145deg,#151311,#0b0a09 72%); box-shadow: inset 0 1px rgba(255,231,194,.035),0 5px 13px rgba(0,0,0,.22); display: grid; grid-template-columns: 88px minmax(0, 1fr) 38px; gap: 10px; align-items: center; }
.product-card::before { position: absolute; left: 9px; top: 0; width: 36px; height: 1px; background: linear-gradient(90deg,#d5a663,rgba(213,166,99,0)); content: ""; }
.product-card.in-cart { border-color: rgba(190,133,70,.78); background: radial-gradient(circle at 7% 0,rgba(164,82,32,.17),transparent 38%),linear-gradient(145deg,#1b1511,#0c0a09 72%); box-shadow: inset 2px 0 #a36f39,inset 0 1px rgba(255,231,194,.05),0 6px 15px rgba(0,0,0,.28); }
.product-image { width: 88px; height: 88px; box-sizing: border-box; border: 1px solid rgba(155,116,75,.38); border-radius: 9px; background: radial-gradient(circle at 30% 20%,#784024,#17100d 50%,#050505); box-shadow: inset 0 0 9px rgba(0,0,0,.35); display: grid; place-items: center; font-size: 34px; }
.product-card.in-cart .product-image { border-color: rgba(196,143,80,.62); }
.product-image img { width: 100%; height: 100%; display: block; border-radius: inherit; object-fit: cover; }
.product-copy { min-width: 0; overflow: hidden; }
.product-copy h3 { overflow: hidden; color: #f4efe9; font-size: 15px; margin: 0 0 5px; text-overflow: ellipsis; white-space: nowrap; }
.product-copy p { font-size: 10px; color: #888; margin: 0 0 7px; line-height: 1.35; }
.product-copy strong { color: #efc46f; font-size: 15px; text-shadow: 0 1px 5px rgba(194,130,45,.12); }
.product-copy small { color: #777; margin-left: 6px; }
.product-copy .stored-wine-meta { display: block; margin: 0 0 6px; color: #d8bd67; font-size: 10px; font-style: normal; font-weight: 800; }
.add-button { justify-self: end; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--red); font-size: 23px; line-height: 32px; }
.quantity-stepper { display: inline-flex; align-items: center; gap: 6px; }
.quantity-stepper button { width: 26px; height: 26px; padding: 0; border: 1px solid #73413e; border-radius: 50%; background: #241012; color: #f5cb7a; font-size: 17px; line-height: 22px; }
.quantity-stepper strong, .quantity-stepper b { min-width: 18px; color: #f7dfaa; text-align: center; font-size: 13px; }
.quantity-stepper .remove-button { width: auto; height: 26px; padding: 0 8px; border-radius: 13px; color: #e88989; font-size: 10px; }
.cart-bar { position: fixed; z-index: 24; left: 50%; bottom: 92px; transform: translateX(-50%); width: min(calc(100vw - 32px),358px); min-height: 58px; padding: 7px 7px 7px 18px; border-radius: 30px; background: #252525; border: 1px solid #444; display: flex; align-items: center; justify-content: space-between; }
.cart-bar strong { color: #f4c75b; }
.cart-bar small { color: #aaa; margin-left: 8px; }
.cart-editor { margin: 12px 0 88px; padding: 13px; border: 1px solid #433330; border-radius: 11px; background: #171010; }
.cart-editor-head, .cart-editor-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cart-editor-head { padding-bottom: 8px; border-bottom: 1px solid #302221; color: #f1d08a; font-size: 13px; }
.cart-editor-row { padding: 10px 0; border-bottom: 1px solid #292020; }
.cart-editor-row:last-child { border-bottom: 0; }
.cart-editor-row b, .cart-editor-row small { display: block; }
.cart-editor-row b { color: #eee4d5; font-size: 12px; }
.cart-editor-row small { margin-top: 3px; color: #897b74; font-size: 10px; }
.link-button { padding: 0; border: 0; background: transparent; color: #d99e62; font-size: 11px; text-decoration: underline; }
.rule-option { width: 100%; min-height: 86px; padding: 14px; margin-bottom: 10px; border: 1px solid #4a3934; border-radius: 9px; background: linear-gradient(120deg,#2a1511,#141414); display: flex; align-items: center; justify-content: space-between; text-align: left; }
.rule-option.selected { border-color: #d11b27; box-shadow: 0 0 0 1px #8f131b; }
.rule-option strong { display: block; font-size: 22px; color: #f1d5a3; }
.rule-option span { display: block; margin-top: 4px; color: #d7a94f; font-size: 12px; }
.full-button { width: 100%; min-height: 48px; border: 1px solid #d74a4f; border-radius: 25px; background: linear-gradient(#a71920,#71080d); font-weight: 800; margin-top: 15px; }
.full-button.stored-wine-button { border-color: #826a30; background: #2b2412; color: #f0d477; }
.ghost-button.full-payment { width: 100%; margin-top: 10px; }
.pass-page { min-height: 760px; padding: 22px 16px 90px; background: radial-gradient(circle at 78% 5%,#621118,transparent 32%),linear-gradient(#190708,#050505 42%); }
.pass-hero { padding: 12px 6px 21px; }
.pass-hero small { color:#bb7b55; letter-spacing:4px; }
.pass-hero h2 { margin:5px 0 6px; font-family:serif; font-size:32px; }
.pass-hero p { margin:0; color:#b8a59a; font-size:13px; }
.pass-current { padding:14px; border:1px solid #c69258; border-radius:13px; background:linear-gradient(125deg,#37110f,#111 62%); }
.pass-current>small { color:#c38a58; letter-spacing:2px; }
.pass-current h3 { margin:4px 0; font-size:22px; }
.pass-current p { margin:0; color:#a9968d; font-size:11px; }
.pass-today { margin-top:12px; padding:9px 10px; border-radius:8px; display:flex; justify-content:space-between; font-size:12px; }
.pass-today.ready { background:#17321f; color:#9ce0aa; }
.pass-today.used { background:#312520; color:#bca79b; }
.pass-next { margin-top:8px; padding:10px 12px; border:1px solid #493c35; border-radius:8px; color:#b8a79c; font-size:12px; }
.pass-section-title { margin:22px 0 10px; }
.pass-plan { width:100%; min-height:89px; margin-bottom:9px; padding:14px; border:1px solid #503a31; border-radius:11px; background:linear-gradient(120deg,#24100e,#0c0c0c); display:flex; justify-content:space-between; align-items:center; text-align:left; }
.pass-plan strong,.pass-plan span,.pass-plan small { display:block; }
.pass-plan strong { font-size:20px; }
.pass-plan span { margin-top:4px; color:#c59d72; font-size:11px; }
.pass-plan small { margin-top:4px; color:#94847b; }
.pass-price { text-align:right; }
.pass-price b { display:block; color:#ffd38d; font-size:22px; }
.pass-price em { display:block; margin-top:6px; padding:4px 7px; border-radius:10px; background:#9f121a; font-style:normal; font-size:10px; }
.transaction-row, .order-row { display: flex; justify-content: space-between; gap: 10px; padding: 14px 0; border-bottom: 1px solid #343434; }
.transaction-row:last-child, .order-row:last-child { border: 0; }
.transaction-row strong.positive { color: #e7c357; }
.transaction-row strong.negative { color: #e05d63; }

/* 存酒卡：全部资产页保留显眼入口，专属页展示真实获取流水。 */
.wallet-stored-wine-card { width: 100%; min-height: 76px; margin: 0 0 12px; padding: 13px 15px; border: 1px solid #79552e; border-radius: 11px; background: radial-gradient(circle at 88% 8%,rgba(203,139,59,.2),transparent 34%),linear-gradient(145deg,#2c190f,#11100e 72%); color: #f2e6d8; display: flex; align-items: center; justify-content: space-between; text-align: left; }
.wallet-stored-wine-card small,.wallet-stored-wine-card strong { display: block; }
.wallet-stored-wine-card small { color: #98836e; font-size: 10px; }
.wallet-stored-wine-card strong { margin-top: 4px; color: #efc06e; font-size: 22px; }
.wallet-stored-wine-card span { color: #bd9360; font-size: 11px; }
.stored-wine-page { min-height: 850px; padding: 26px 16px 115px; box-sizing: border-box; background: radial-gradient(circle at 88% 0,rgba(119,48,18,.22),transparent 28%),#070707; }
.stored-wine-title small { color: #a86c4f; font-size: 9px; letter-spacing: 4px; }
.stored-wine-title h2 { margin: 5px 0 0; font-size: 29px; }
.stored-wine-title p { margin: 6px 0 0; color: #837a75; font-size: 11px; }
.stored-wine-summary { position: relative; min-height: 128px; margin-top: 20px; padding: 19px 16px 15px; overflow: hidden; border: 1px solid #79552e; border-radius: 13px; box-sizing: border-box; background: radial-gradient(circle at 86% 8%,rgba(202,140,62,.25),transparent 34%),linear-gradient(145deg,#351c10,#15100c 68%); display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; column-gap: 11px; }
.stored-wine-summary::after { position: absolute; right: -22px; bottom: -46px; width: 100px; height: 100px; border: 1px solid rgba(230,177,93,.12); border-radius: 50%; content: ""; }
.stored-wine-summary img { position: relative; z-index: 1; width: 44px; height: 44px; padding: 7px; border: 1px solid rgba(231,183,105,.35); border-radius: 10px; box-sizing: border-box; background: rgba(15,10,7,.58); object-fit: contain; }
.stored-wine-summary div { position: relative; z-index: 1; min-width: 0; }
.stored-wine-summary div small,.stored-wine-summary div strong { display: block; }
.stored-wine-summary div small { color: #a89582; font-size: 10px; }
.stored-wine-summary div strong { margin-top: 3px; color: #fff3e2; font-size: 16px; }
.stored-wine-summary>b { position: relative; z-index: 1; color: #f0c16d; font-size: 34px; line-height: 1; }
.stored-wine-summary>b em { margin-left: 4px; color: #c7a56f; font-size: 12px; font-style: normal; }
.stored-wine-summary>p { position: relative; z-index: 1; grid-column: 1 / -1; margin: 14px 0 0; padding-top: 11px; border-top: 1px solid rgba(205,159,88,.18); color: #887969; font-size: 10px; }
.stored-wine-list-title { margin: 23px 2px 10px; display: flex; align-items: flex-end; justify-content: space-between; }
.stored-wine-list-title strong,.stored-wine-list-title small { display: block; }
.stored-wine-list-title strong { font-size: 17px; }
.stored-wine-list-title small { margin-top: 3px; color: #716a66; font-size: 10px; }
.stored-wine-list-title>span { color: #a07955; font-size: 10px; }
.stored-wine-record { margin-bottom: 9px; padding: 14px 14px 11px; border: 1px solid #3e342b; border-radius: 11px; background: linear-gradient(145deg,#181310,#0d0c0b); }
.stored-wine-record header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.stored-wine-record header div { min-width: 0; }
.stored-wine-record header strong,.stored-wine-record header small { display: block; }
.stored-wine-record header strong { color: #f0e4d8; font-size: 14px; }
.stored-wine-record header small { margin-top: 4px; overflow-wrap: anywhere; color: #7d7169; font-size: 9px; }
.stored-wine-record header>b { flex: 0 0 auto; color: #efc36e; font-size: 16px; }
.stored-wine-record footer { margin-top: 11px; padding-top: 9px; border-top: 1px solid #2d2723; color: #756b64; font-size: 9px; display: flex; justify-content: space-between; gap: 9px; }
.stored-wine-record footer span:first-child { min-width: 0; }
.stored-wine-record footer span:last-child { flex: 0 0 auto; color: #a29180; }
.stored-wine-empty { padding: 24px 15px; border: 1px dashed #453931; border-radius: 11px; background: #100e0d; text-align: center; }
.stored-wine-empty strong { font-size: 14px; }
.stored-wine-empty p { margin: 7px 0 0; color: #766d67; font-size: 10px; line-height: 1.65; }
.order-row h3 { margin: 0 0 4px; font-size: 14px; }
.order-row p { margin: 0; color: #888; font-size: 11px; }
.order-row strong { color: #e8c35c; white-space: nowrap; }
.checkout-row-actions { display: grid; justify-items: end; gap: 8px; }
.orders-title-row { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.orders-title-row h2 { margin-bottom: 3px; }
.orders-title-row small { color: #8e827c; font-size: 10px; }
.ghost-button.small { min-height: 34px; padding: 0 12px; font-size: 11px; }
.order-record { border-bottom: 1px solid #343434; }
.order-record:last-child { border-bottom: 0; }
.order-record .order-row { border-bottom: 0; }
.order-record-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 13px; }
.order-record-actions button { flex: 1; min-height: 36px; font-size: 12px; }
.recovery-page { min-height: 620px; padding: 80px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: radial-gradient(circle at 50% 20%,#2a1113,transparent 45%),#080707; }
.recovery-icon { width: 54px; height: 54px; border: 1px solid #a54b43; border-radius: 50%; display: grid; place-items: center; color: #f0c76e; font-size: 28px; }
.recovery-page h2 { margin: 16px 0 8px; font-size: 21px; }
.recovery-page p { max-width: 280px; margin: 0 0 22px; color: #a89b94; font-size: 12px; line-height: 1.7; }
.empty-state { padding: 90px 20px; text-align: center; color: #777; }
.two-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ghost-button { min-height: 42px; border: 1px solid #555; border-radius: 23px; background: #1f1f1f; }

@media (min-width: 700px) {
  .phone-shell { min-height: 850px; }
  .bottom-nav, .cart-bar, .toast { position: absolute; }
}

/* 静态鎏金边：外圈保留亮金、铜金和暗金层次，不做横向扫光。 */
.asset-panel,
.member-strip,
.feature-card,
.stat-card,
.member-card,
.balance-card,
.function-card,
.dark-card,
.rule-option {
  position: relative;
}

@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .asset-panel::after,
  .member-strip::after,
  .feature-card::after,
  .stat-card::after,
  .member-card::after,
  .balance-card::after,
  .function-card::after,
  .dark-card::after,
  .rule-option::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    border-radius: inherit;
    padding: 1px;
    background-image: linear-gradient(
      135deg,
      rgba(255, 237, 190, .88) 0%,
      rgba(176, 111, 53, .66) 28%,
      rgba(255, 229, 169, .96) 52%,
      rgba(132, 66, 31, .70) 76%,
      rgba(242, 194, 120, .86) 100%
    );
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 0 0;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: none;
  }

  /* 选中的储值档位换成静态红色高光，保持原有的选中语义。 */
  .rule-option.selected::after {
    background-image: linear-gradient(135deg, #ffb0a8, #8e1018 46%, #ff958c);
  }
}

/* 停单提示：菜单页顶部的硬红框，客人一眼能看到为什么点不了。 */
.ordering-closed {
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid #783137;
  border-radius: 8px;
  background: #251115;
}
.ordering-closed strong { display: block; color: #ef9aa0; font-size: 13px; }
.ordering-closed small { display: block; margin-top: 3px; color: #b78c8f; font-size: 11px; line-height: 1.5; }

/* BALANCE-GRID-FIX */
/* repeat(4,1fr) 的轨道缩不下去：money() 输出 12345.00 无千分位也无断点，
   21px 下约 94px，而 375px 手机上每格只有约 80px，四格一起溢出被
   .phone-shell 的 overflow:hidden 裁掉，最右的「积分」缺一截。
   余额过万或积分七位就会触发，俱乐部里是常态。
   同文件的 .product-card 用的就是 minmax(0,1fr)+min-width:0，是对的写法。 */
.balance-card { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.balance-item { min-width: 0; }
.balance-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.zx-ledger-tabs{display:flex;gap:8px;margin:18px 0}.zx-ledger-tabs button{flex:1;min-width:0;padding:12px 4px;font-size:14px}

.phone-auth-page { min-height: 690px; padding: 72px 20px 40px; background: #080808; color: #f5eee6; }
.phone-auth-brand { color: #d7b27b; font-size: 13px; letter-spacing: 4px; font-weight: 800; }
.phone-auth-page h2 { margin: 14px 0 8px; font-size: 26px; }
.phone-auth-lead, .phone-auth-foot { color: #aaa19a; font-size: 13px; line-height: 1.7; }
.phone-auth-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 20px; }
.phone-auth-tabs button { min-height: 36px; border: 1px solid #493931; border-radius: 18px; background: #17110f; color: #a9998e; font-size: 12px; }
.phone-auth-tabs button.active { border-color: #be8a4d; background: #2b1712; color: #f0d09d; }
.phone-auth-card { margin-top: 24px; padding: 18px; border: 1px solid #3c3028; border-radius: 12px; background: #15110e; }
.phone-auth-card label { display: block; margin: 2px 0 8px; color: #d7c5b5; font-size: 12px; }
.phone-auth-card input { box-sizing: border-box; width: 100%; height: 46px; margin: 0 0 14px; padding: 0 13px; border: 1px solid #51433a; border-radius: 7px; background: #0c0b0a; color: #fff; font-size: 16px; outline: none; }
.phone-auth-card input:focus { border-color: #c78e53; }
.phone-code-row { display: flex; align-items: center; justify-content: space-between; }
.phone-code-row label { margin-bottom: 8px; }
.phone-code-row .ghost-button { min-height: 30px; padding: 5px 10px; font-size: 12px; }
.phone-auth-hint { min-height: 20px; margin: -3px 0 14px; color: #d9ae70; font-size: 12px; line-height: 1.5; }
.phone-auth-submit { width: 100%; }
.phone-auth-submit:disabled { opacity: .45; cursor: not-allowed; }