/*=============================================
   中签吧 H5 · UI Design System v2.0
   "Urban Pace" — 与小程序 app.wxss 一一对应
   =============================================
   【迁移约定】所有尺寸用 calc(var(--rpx) * N)，
   N 即小程序原始 rpx 值，迁回小程序时全局替换
   calc(var(--rpx) * N) → Nrpx 即可。
   =============================================*/

:root {
  /* rpx 基准：750rpx = 屏宽；桌面端封顶 480px 壳 */
  --rpx: calc(100vw / 750);

  /* Brand 品牌色 */
  --b50: #FEF3F2;
  --b100: #FEE4E2;
  --b200: #FECAC8;
  --b300: #FDA29B;
  --b400: #F26B60;
  --b500: #E84D43;
  --b600: #C83A32;
  --b700: #A32B25;

  /* Warm Neutral 暖色调中性色 */
  --w25: #FCFCFA;
  --w50: #F8F7F4;
  --w100: #F0EFEB;
  --w200: #E3E2DD;
  --w300: #CDCCC7;
  --w400: #A8A7A2;
  --w500: #8B8A85;
  --w600: #6B6A65;
  --w700: #4A4945;
  --w800: #2D2C29;
  --w900: #1A1917;

  /* Semantic 语义色 */
  --star: #F5A623;
  --starL: #FFF3D6;
  --suc: #34C759;
  --sucB: #E8F8ED;
  --warn: #F59E0B;
  --warnB: #FFF8E1;
  --err: #EF4444;
  --info: #2563EB;
  --infoB: #EFF6FF;

  /* Semantic Aliases */
  --brand: var(--b500);
  --brandH: var(--b600);
  --brandL: var(--b50);
  --brandS: var(--b100);

  /* Text */
  --t1: var(--w900);
  --t2: var(--w600);
  --t3: #71706C;
  --t4: var(--w400);
  --ti: #fff;

  /* Surface */
  --bg: var(--w50);
  --surf: #fff;
  --bgS: var(--w100);

  /* Border & Divider */
  --bd: var(--w200);
  --bdL: var(--w100);
  --dv: var(--w100);

  /* Typography (原 rpx) */
  --font-xs: calc(var(--rpx) * 22);
  --font-sm: calc(var(--rpx) * 26);
  --font-base: calc(var(--rpx) * 30);
  --font-lg: calc(var(--rpx) * 32);
  --font-xl: calc(var(--rpx) * 36);
  --font-2xl: calc(var(--rpx) * 40);
  --font-3xl: calc(var(--rpx) * 48);
  --font-4xl: calc(var(--rpx) * 60);

  /* Spacing (原 rpx) */
  --s1: calc(var(--rpx) * 8);
  --s2: calc(var(--rpx) * 16);
  --s3: calc(var(--rpx) * 24);
  --s4: calc(var(--rpx) * 32);
  --s5: calc(var(--rpx) * 40);
  --s6: calc(var(--rpx) * 48);
  --s8: calc(var(--rpx) * 64);
  --s12: calc(var(--rpx) * 96);
  --s16: calc(var(--rpx) * 128);

  /* Border Radius */
  --rSm: calc(var(--rpx) * 12);
  --rMd: calc(var(--rpx) * 16);
  --rLg: calc(var(--rpx) * 24);
  --rXl: calc(var(--rpx) * 32);
  --rF: 9999px;
  --rFull: 9999px;

  /* Shadows */
  --shXs: 0 calc(var(--rpx) * 1) calc(var(--rpx) * 4) rgba(0,0,0,0.04);
  --shSm: 0 calc(var(--rpx) * 2) calc(var(--rpx) * 8) rgba(0,0,0,0.06);
  --shMd: 0 calc(var(--rpx) * 8) calc(var(--rpx) * 24) rgba(0,0,0,0.08);
  --shLg: 0 calc(var(--rpx) * 16) calc(var(--rpx) * 40) rgba(0,0,0,0.10);

  /* Easing */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --fast: 150ms;
  --norm: 250ms;
  --slow: 400ms;
}

/* 桌面端预览：480px 手机壳居中 */
@media (min-width: 480px) {
  :root { --rpx: calc(480px / 750); }
  body { max-width: 480px; margin: 0 auto; box-shadow: 0 0 40px rgba(0,0,0,0.08); min-height: 100vh; }
}

/* ---- Base ---- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background-color: var(--bg);
  color: var(--t1);
  font-size: var(--font-base);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button, input, textarea { font-family: inherit; font-size: inherit; }
a, button, .pill, .dv-card, .dv-scroll-card { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: calc(var(--rpx) * 3) solid var(--b300); outline-offset: calc(var(--rpx) * 2); }
img[loading] { animation: imgFadeIn 0.35s ease-out; }

/* ---- Layout Utilities ---- */
.flex-row { display: flex; flex-direction: row; align-items: center; }
.flex-between { display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
.flex-col { display: flex; flex-direction: column; }
.flex-wrap { display: flex; flex-wrap: wrap; }
.flex-1 { flex: 1; min-width: 0; }

/* ---- Card System ---- */
.card {
  background: var(--surf);
  border-radius: var(--rXl);
  padding: var(--s5);
  margin: var(--s3) var(--s4);
  box-shadow: var(--shXs);
  border: calc(var(--rpx) * 1) solid var(--bdL);
}

/* ---- Section Header ---- */
.sec-header { display: flex; align-items: center; justify-content: space-between; padding: var(--s4) var(--s5) var(--s3); }
.sec-title { font-size: var(--font-base); font-weight: 700; letter-spacing: -0.01em; color: var(--t1); }
.sec-more { font-size: var(--font-xs); color: var(--brand); font-weight: 500; }

/* ---- Button System ---- */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  background: var(--brand); color: var(--ti); border: none; border-radius: var(--rF);
  padding: calc(var(--rpx) * 20) calc(var(--rpx) * 48);
  font-size: var(--font-sm); font-weight: 600; text-align: center; letter-spacing: 0.01em;
  transition: all var(--fast) var(--ease); cursor: pointer;
}
.btn-primary:active { background: var(--brandH); transform: scale(0.97); }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  background: var(--brandL); color: var(--brand); border: none; border-radius: var(--rF);
  padding: calc(var(--rpx) * 16) calc(var(--rpx) * 40);
  font-size: var(--font-sm); font-weight: 600; text-align: center; letter-spacing: 0.01em;
  transition: all var(--fast) var(--ease); cursor: pointer;
}
.btn-secondary:active { background: var(--brandS); transform: scale(0.97); }

.btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  background: transparent; color: var(--t2);
  border: calc(var(--rpx) * 1) solid var(--bd); border-radius: var(--rF);
  padding: calc(var(--rpx) * 14) calc(var(--rpx) * 36);
  font-size: var(--font-sm); font-weight: 500; text-align: center;
  transition: all var(--fast); cursor: pointer;
}
.btn-outline:active { border-color: var(--brand); color: var(--brand); }

/* ---- Tag System ---- */
.tag {
  display: inline-flex; align-items: center;
  padding: calc(var(--rpx) * 6) calc(var(--rpx) * 20);
  border-radius: var(--rF); font-size: var(--font-xs); font-weight: 600;
  letter-spacing: 0.02em; white-space: nowrap;
}
.tag-red { background: var(--b50); color: var(--b600); }
.tag-orange { background: var(--starL); color: #B8791A; }
.tag-green { background: var(--sucB); color: #1B8733; }
.tag-blue { background: var(--infoB); color: var(--info); }
.tag-gray { background: var(--bgS); color: var(--t3); }
.tag-red-blink { background: var(--b50); color: var(--brand); animation: pulse 1.5s ease-in-out infinite; }

/* Status Dot */
.dot { display: inline-block; width: calc(var(--rpx) * 12); height: calc(var(--rpx) * 12); border-radius: 50%; margin-right: calc(var(--rpx) * 8); flex-shrink: 0; }
.dot-r { background: var(--b500); animation: pulse 2s ease-in-out infinite; }
.dot-g { background: var(--suc); }
.dot-a { background: var(--star); }
.dot-w { background: var(--warn); }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ---- Typography ---- */
.title-lg { font-size: var(--font-2xl); font-weight: 700; color: var(--t1); letter-spacing: -0.02em; line-height: 1.25; }
.title-md { font-size: var(--font-xl); font-weight: 700; color: var(--t1); letter-spacing: -0.01em; }
.title-sm { font-size: var(--font-lg); font-weight: 600; color: var(--t1); }
.text-body { font-size: var(--font-base); color: var(--t2); line-height: 1.7; }
.text-muted { font-size: var(--font-xs); color: var(--t3); }
.text-primary { color: var(--brand); }

/* ---- Form Elements ---- */
.form-input {
  padding: var(--s3); border: calc(var(--rpx) * 1) solid var(--bd); border-radius: var(--rMd);
  font-size: var(--font-base); background: var(--surf); color: var(--t1);
  transition: all var(--fast); width: 100%;
}
.form-input:focus { outline: none; border-color: var(--brand); }
.form-textarea {
  padding: var(--s3); border: calc(var(--rpx) * 1) solid var(--bd); border-radius: var(--rLg);
  font-size: var(--font-sm); background: var(--surf); color: var(--t1);
  transition: all var(--fast); width: 100%; min-height: calc(var(--rpx) * 200); line-height: 1.7; resize: none;
}
.form-textarea:focus { outline: none; border-color: var(--brand); }

/* ---- Divider ---- */
.divider { height: calc(var(--rpx) * 1); background: var(--dv); margin: var(--s3) 0; }
.divider-full { height: calc(var(--rpx) * 1); background: var(--dv); margin: var(--s3) var(--s4); }

/* ---- Empty State ---- */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--s16) var(--s4); }
.empty-state .empty-icon { font-size: calc(var(--rpx) * 80); margin-bottom: var(--s4); opacity: 0.4; }
.empty-state .empty-text { font-size: var(--font-sm); color: var(--t3); }
.empty-state .empty-sub { font-size: var(--font-xs); color: var(--w300); margin-top: var(--s2); }
.empty-state .empty-action { margin-top: var(--s6); padding: var(--s2) var(--s8); font-size: var(--font-sm); color: #fff; background: var(--brand); border-radius: calc(var(--rpx) * 40); line-height: 1.6; }

/* ---- Loading ---- */
.loading-state { display: flex; align-items: center; justify-content: center; padding: var(--s8) 0; font-size: var(--font-xs); color: var(--t3); }

/* ---- Screen Container ---- */
.screen-body { padding: 0 var(--s4) var(--s6); }

/* ---- Avatar ---- */
.avatar {
  width: calc(var(--rpx) * 80); height: calc(var(--rpx) * 80); border-radius: 50%;
  background: var(--w200); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--font-base); color: var(--w600); flex-shrink: 0; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: calc(var(--rpx) * 64); height: calc(var(--rpx) * 64); font-size: var(--font-sm); }
.avatar-lg { width: calc(var(--rpx) * 144); height: calc(var(--rpx) * 144); font-size: calc(var(--rpx) * 48); }

/* ---- Gradient Cover Colors ---- */
.c1 { background: linear-gradient(135deg, #E84D43, #C83A32 40%, #F5A623); }
.c2 { background: linear-gradient(135deg, #2D5A27, #3A7D33 50%, #5BA84D); }
.c3 { background: linear-gradient(135deg, #1A3A5C, #2563EB 50%, #60A5FA); }
.c4 { background: linear-gradient(135deg, #5C1A1A, #8B2525 50%, #C83A32); }
.c5 { background: linear-gradient(135deg, #3D2B1F, #8B6914 50%, #D4A24E); }

/* ---- Pill Filter ---- */
.pills-scroll { display: flex; gap: var(--s2); padding: var(--s4); overflow-x: auto; white-space: nowrap; }
.pills-scroll::-webkit-scrollbar { display: none; }
.pill {
  flex-shrink: 0; padding: calc(var(--rpx) * 14) calc(var(--rpx) * 36); border-radius: var(--rF);
  font-size: var(--font-sm); font-weight: 500; color: var(--t2);
  background: var(--surf); border: calc(var(--rpx) * 1) solid var(--bd);
  transition: all var(--fast); cursor: pointer;
}
.pill.active { background: var(--brand); color: var(--ti); border-color: var(--brand); }

/* ---- Star Rating ---- */
.stars { display: flex; gap: calc(var(--rpx) * 4); }
.star-on { color: var(--star); font-size: var(--font-base); }
.star-off { color: var(--w300); font-size: var(--font-base); }
.star-lg { display: flex; gap: calc(var(--rpx) * 2); }
.star-lg .star-on, .star-lg .star-off { font-size: var(--font-xl); }

/* ---- FAB ---- */
.fab {
  position: fixed; bottom: calc(var(--rpx) * 160); right: calc(var(--rpx) * 32);
  width: calc(var(--rpx) * 104); height: calc(var(--rpx) * 104);
  background: var(--brand); border-radius: 50%; border: none;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shLg); z-index: 50; transition: all var(--norm) var(--ease);
  color: white; font-size: var(--font-xl); cursor: pointer;
}
.fab:active { transform: scale(0.95); background: var(--brandH); }
@media (min-width: 480px) {
  .fab { right: calc(50vw - 240px + var(--rpx) * 32); }
}

/* ---- Meta Separator ---- */
.meta-sep { width: calc(var(--rpx) * 6); height: calc(var(--rpx) * 6); border-radius: 50%; background: var(--w300); flex-shrink: 0; }

/* ---- Text Truncation ---- */
.text-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.text-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.text-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- Section Card ---- */
.section-card { background: var(--surf); border-radius: var(--rXl); padding: var(--s5); box-shadow: var(--shXs); border: calc(var(--rpx) * 1) solid var(--bdL); }
.section-pad { margin: 0 var(--s4); }

/* ---- Grid Layouts ---- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }

/* ---- Spacing Helpers ---- */
.mt-s2 { margin-top: var(--s2); } .mt-s3 { margin-top: var(--s3); } .mt-s4 { margin-top: var(--s4); }
.mb-s2 { margin-bottom: var(--s2); } .mb-s3 { margin-bottom: var(--s3); } .mb-s4 { margin-bottom: var(--s4); }
.p-s4 { padding: var(--s4); } .p-s5 { padding: var(--s5); }
.px-s4 { padding-left: var(--s4); padding-right: var(--s4); }
.px-s5 { padding-left: var(--s5); padding-right: var(--s5); }
.gap-s2 { gap: var(--s2); } .gap-s3 { gap: var(--s3); } .gap-s4 { gap: var(--s4); }

/* ---- Animations ---- */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(calc(var(--rpx) * 12)); } to { opacity: 1; transform: translateY(0); } }
@keyframes imgFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(calc(var(--rpx) * 40)); } to { opacity: 1; transform: translateY(0); } }

.fade-in { animation: contentFadeIn 0.25s ease-out; }
@keyframes contentFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---- 发现赛事横卡 dv-card ---- */
.dv-card {
  display: flex; align-items: center; gap: calc(var(--rpx) * 16);
  padding: calc(var(--rpx) * 20); background: var(--surf);
  border: calc(var(--rpx) * 0.5) solid var(--w200); border-radius: var(--rLg);
  margin-bottom: calc(var(--rpx) * 12); transition: all var(--fast);
}
.dv-card:active { opacity: 0.85; }
.dv-card-cover { width: calc(var(--rpx) * 180); height: calc(var(--rpx) * 140); flex-shrink: 0; border-radius: var(--rMd); overflow: hidden; background: var(--w100); }
.dv-card-img { width: 100%; height: 100%; display: block; object-fit: cover; animation: imgFadeIn 0.35s ease-out; }
.dv-card-body { flex: 1; min-width: 0; }
.dv-card-title { display: flex; align-items: center; gap: var(--s2); margin-bottom: calc(var(--rpx) * 4); }
.dv-card-name { font-size: var(--font-sm); font-weight: 600; color: var(--t1); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.dv-card-meta { display: flex; align-items: center; gap: var(--s2); font-size: var(--font-xs); color: var(--t3); margin-bottom: calc(var(--rpx) * 2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-card-meta span { flex-shrink: 0; }
.dv-card-sub { font-size: var(--font-xs); color: var(--t4); margin-top: calc(var(--rpx) * 2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-card-sub span { flex-shrink: 0; }

/* ---- 横滑竖卡 dv-scroll-card ---- */
.dv-scroll-card {
  display: inline-flex; flex-direction: column; width: calc(var(--rpx) * 260); flex-shrink: 0;
  background: var(--surf); border-radius: var(--rLg); overflow: hidden;
  border: calc(var(--rpx) * 0.5) solid var(--w200); box-shadow: var(--shXs); transition: all var(--fast);
}
.dv-scroll-card:active { opacity: 0.85; transform: scale(0.97); }
.dv-sc-cover { width: calc(var(--rpx) * 260); height: calc(var(--rpx) * 160); position: relative; overflow: hidden; background: var(--w100); }
.dv-sc-img { width: 100%; height: 100%; display: block; object-fit: cover; }
.dv-sc-badge { position: absolute; top: var(--s2); left: var(--s2); }
.dv-sc-badge span { display: inline-block; padding: calc(var(--rpx) * 2) calc(var(--rpx) * 12); border-radius: var(--rSm); font-size: calc(var(--rpx) * 18); font-weight: 600; background: rgba(0,0,0,0.55); color: #fff; letter-spacing: 0.02em; }
.dv-sc-body { padding: var(--s2) var(--s3); display: flex; flex-direction: column; gap: calc(var(--rpx) * 4); }
.dv-sc-title { display: flex; align-items: center; gap: var(--s1); }
.dv-sc-name { font-size: var(--font-sm); font-weight: 600; color: var(--t1); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.dv-sc-meta { display: flex; align-items: center; gap: var(--s2); font-size: var(--font-xs); color: var(--t3); }
.dv-sc-sub { font-size: var(--font-xs); color: var(--t4); }