/**
 * ============================================================
 *  接龙星球 H5 · 设计 Token（由小程序 app.wxss v2.0 移植）
 *  ------------------------------------------------------------
 *  单位方案：rem 等比还原小程序 rpx
 *    根字号 = 100vw / 37.5 → 375px 屏时 1rem = 10px
 *    换算：rem = rpx / 20（如 28rpx → 1.4rem）
 *  移动优先：基线 320px；≥480px 冻结缩放并居中，模拟小程序大屏限宽
 *  无障碍：正文对比度 ≥4.5:1，触控区 ≥4.4rem(44px)，WCAG 2.2 AA
 *  零外网依赖：字体走系统栈
 * ============================================================ */

/* ---------- 根字号：移动优先 + 大屏限幅 ---------- */
html {
  font-size: calc(100vw / 37.5);            /* 375px 屏 → 1rem = 10px */
  -webkit-text-size-adjust: 100%;
}
@media (min-width: 480px) {
  html { font-size: 12.8px; }               /* 480px 起冻结，内容居中不被拉伸 */
}

/* ---------- 设计 Token ---------- */
/* 品牌变量按「主题」组织：html[data-theme=...] 一属性切换整套品牌色阶/渐变/阴影。
   :root 默认 = emerald 翡翠绿；后台可设站点默认（/api/meta 下发 theme 字段），
   用户可在「我的 → 主题外观」自选（localStorage，优先级更高）。
   默认主题强调色 #10B981 —— 老板指定常用强调色。 */
:root {
  /* 品牌色阶 Brand · emerald 翡翠绿（默认） */
  --brand-50:#ECFDF5; --brand-100:#D1FAE5; --brand-200:#A7F3D0; --brand-300:#6EE7B7;
  --brand-400:#34D399; --brand-500:#10B981; --brand-600:#059669;
  --brand-700:#047857; --brand-800:#065F46; --brand-900:#064E3B;
  --brand-rgb:16,185,129;                   /* 供 rgba(var(--brand-rgb), x) 用 */
  --brand-text:#047857;                     /* 白底文字级品牌色（≥4.5:1） */

  /* v2.5 主题渐变（随主题切换） */
  --grad-hero:linear-gradient(135deg,#34D399 0%,#059669 55%,#0D9488 100%);
  --grad-btn:linear-gradient(135deg,#10B981,#059669);
  --grad-fab:linear-gradient(135deg,#10B981,#0D9488);
  --shadow-brand:0 1rem 2.4rem rgba(16,185,129,.28);

  /* 语义色：文字级（≥4.5:1）/ 图形级（仅供图形填充） */
  --success-text:#047857; --success-icon:#10B981;
  --info-text:#1D4ED8;    --info-icon:#3B82F6;
  --warn-text:#B45309;    --warn-icon:#F59E0B;
  --danger-text:#DC2626;  --danger-icon:#EF4444;
  --purple-text:#6D28D9;  --purple-icon:#8B5CF6;
  --pink-text:#BE185D;    --pink-icon:#EC4899;
  --cyan-text:#0E7490;    --cyan-icon:#06B6D4;

  /* 兼容别名（对应小程序同名变量） */
  --brand:var(--brand-500); --brand-dark:var(--brand-700);
  --brand-light:var(--brand-100); --brand-soft:var(--brand-50);
  --red:var(--danger-text); --blue:var(--info-text); --orange:var(--warn-text);
  --purple:var(--purple-text); --pink:var(--pink-text); --cyan:var(--cyan-text);

  /* 金色：400-500 图标装饰 / 600-700 承载白字填充 */
  --gold-400:#FBBF24; --gold-500:#F59E0B; --gold-600:#B45309; --gold-700:#92400E;

  /* 中性色 Slate */
  --bg:#F2F5FC; --bg-elev:#FFFFFF; --bg-sunken:#F4F6F9; --bg-hover:#E9EDF3;
  --text:#172033; --text-2:#4E5A6E; --text-3:#697588; --text-4:#98A2B3;
  --border:#D9E0E8; --border-strong:#C4CDD8;
  --mask:rgba(18,29,48,.52);
  --invert-from:#172033; --invert-to:#25324A;

  /* 阴影 3 级 */
  --shadow-1:0 .1rem .2rem rgba(23,32,51,.04);
  --shadow-2:0 .3rem .9rem rgba(23,32,51,.055);
  --shadow-3:0 .8rem 2rem rgba(23,32,51,.10);
  --shadow:var(--shadow-2); --shadow-lg:var(--shadow-3);

  /* 圆角 */
  --r-xs:.4rem; --r-sm:.6rem; --r-md:.8rem; --r-lg:1rem; --r-xl:1.2rem; --r-full:99.9rem;

  /* 间距 4rpx 网格 → rem = rpx/20 */
  --sp-1:.4rem; --sp-2:.8rem; --sp-3:1.2rem; --sp-4:1.6rem;
  --sp-5:2rem;  --sp-6:2.4rem; --sp-8:3.2rem; --sp-10:4rem;
  --gap:1.2rem; --page-x:1.2rem; --container-max:37.5rem;

  /* 字体刻度 8 档（8px 基线） */
  --fs-xs:1.2rem;  --fs-sm:1.3rem;  --fs-base:1.4rem; --fs-md:1.5rem;
  --fs-lg:1.6rem;  --fs-xl:1.8rem;  --fs-xxl:2.2rem;  --fs-display:2.8rem;
  --lh-tight:1.35; --lh-base:1.6;   --lh-num:1.2;

  /* 动效 */
  --dur-fast:.15s; --dur-base:.25s; --dur-slow:.4s;
  --ease-out:cubic-bezier(.4,0,.2,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --press:.96;

  /* 层级 */
  --z-bar:90; --z-fab:100; --z-mask:200; --z-toast:300;

  /* 触控 */
  --tap-min:4.4rem;   /* 44px */
}

/* ---------- 配色主题（切换 html[data-theme] 即整站换肤） ----------
   每套 = 品牌色阶 + 品牌文字色 + 渐变 + 品牌投影。
   亮色下 --brand-text 一律取 ≥4.5:1 的深阶（WCAG 2.2 AA）。 */
[data-theme="blue"] {
  --brand-50:#EEF3FF; --brand-100:#DFE8FF; --brand-200:#C7D7FF; --brand-300:#9DB8F8;
  --brand-400:#7092F5; --brand-500:#3158D4; --brand-600:#284BB8;
  --brand-700:#1F3D96; --brand-800:#183174; --brand-900:#112552;
  --brand-rgb:49,88,212; --brand-text:#284BB8;
  --grad-hero:linear-gradient(135deg,#4A7DFF 0%,#3158D4 55%,#7A5AF8 100%);
  --grad-btn:linear-gradient(135deg,#4A7DFF,#3158D4);
  --grad-fab:linear-gradient(135deg,#4A7DFF,#7A5AF8);
  --shadow-brand:0 1rem 2.4rem rgba(63,94,251,.28);
}
[data-theme="ocean"] {
  --brand-50:#F0F9FF; --brand-100:#E0F2FE; --brand-200:#BAE6FD; --brand-300:#7DD3FC;
  --brand-400:#38BDF8; --brand-500:#0EA5E9; --brand-600:#0284C7;
  --brand-700:#0369A1; --brand-800:#075985; --brand-900:#0C4A6E;
  --brand-rgb:14,165,233; --brand-text:#0369A1;
  --grad-hero:linear-gradient(135deg,#38BDF8 0%,#0284C7 55%,#2563EB 100%);
  --grad-btn:linear-gradient(135deg,#0EA5E9,#0284C7);
  --grad-fab:linear-gradient(135deg,#0EA5E9,#2563EB);
  --shadow-brand:0 1rem 2.4rem rgba(14,165,233,.28);
}
[data-theme="violet"] {
  --brand-50:#F5F3FF; --brand-100:#EDE9FE; --brand-200:#DDD6FE; --brand-300:#C4B5FD;
  --brand-400:#A78BFA; --brand-500:#8B5CF6; --brand-600:#7C3AED;
  --brand-700:#6D28D9; --brand-800:#5B21B6; --brand-900:#4C1D95;
  --brand-rgb:124,58,237; --brand-text:#6D28D9;
  --grad-hero:linear-gradient(135deg,#A78BFA 0%,#7C3AED 55%,#6366F1 100%);
  --grad-btn:linear-gradient(135deg,#8B5CF6,#7C3AED);
  --grad-fab:linear-gradient(135deg,#A78BFA,#6366F1);
  --shadow-brand:0 1rem 2.4rem rgba(124,58,237,.30);
}
[data-theme="sunset"] {
  --brand-50:#FFF7ED; --brand-100:#FFEDD5; --brand-200:#FED7AA; --brand-300:#FDBA74;
  --brand-400:#FB923C; --brand-500:#F97316; --brand-600:#EA580C;
  --brand-700:#C2410C; --brand-800:#9A3412; --brand-900:#7C2D12;
  --brand-rgb:234,88,12; --brand-text:#C2410C;
  --grad-hero:linear-gradient(135deg,#FB923C 0%,#EA580C 55%,#E11D48 100%);
  --grad-btn:linear-gradient(135deg,#F97316,#C2410C);
  --grad-fab:linear-gradient(135deg,#FB923C,#E11D48);
  --shadow-brand:0 1rem 2.4rem rgba(234,88,12,.30);
}
[data-theme="rose"] {
  --brand-50:#FFF1F2; --brand-100:#FFE4E6; --brand-200:#FECDD3; --brand-300:#FDA4AF;
  --brand-400:#FB7185; --brand-500:#F43F5E; --brand-600:#E11D48;
  --brand-700:#BE123C; --brand-800:#9F1239; --brand-900:#881337;
  --brand-rgb:225,29,72; --brand-text:#BE123C;
  --grad-hero:linear-gradient(135deg,#FB7185 0%,#E11D48 55%,#BE123C 100%);
  --grad-btn:linear-gradient(135deg,#F43F5E,#BE123C);
  --grad-fab:linear-gradient(135deg,#FB7185,#E11D48);
  --shadow-brand:0 1rem 2.4rem rgba(225,29,72,.30);
}

/* ---------- 暗色主题 ---------- */
.theme-dark {
  --bg:#0B1120; --bg-elev:#151E2E; --bg-sunken:#1E293B; --bg-hover:#243044;
  --text:#F1F5F9; --text-2:#CBD5E1; --text-3:#94A3B8; --text-4:#64748B;
  --border:#263244; --border-strong:#334155;
  --success-text:#34D399; --info-text:#60A5FA; --warn-text:#FBBF24;
  --danger-text:#F87171; --purple-text:#A78BFA; --pink-text:#F472B6; --cyan-text:#22D3EE;
  /* 品牌文字/浅底提亮（默认 emerald；其余主题见下方按主题覆盖） */
  --brand-text:#34D399;
  --brand-50:rgba(16,185,129,.16);
  --brand-100:rgba(16,185,129,.25);
  --shadow-1:0 .1rem .3rem rgba(0,0,0,.30);
  --shadow-2:0 .4rem 1.2rem rgba(0,0,0,.35);
  --shadow-3:0 .8rem 2.4rem rgba(0,0,0,.45);
  --mask:rgba(0,0,0,.62);
  --invert-from:var(--brand-500); --invert-to:var(--brand-700);
}
/* 暗色 × 各主题：品牌文字换浅阶保证对比度，浅底换半透明 */
.theme-dark[data-theme="blue"]   { --brand-text:#8EABFF; --brand-50:rgba(49,88,212,.18);  --brand-100:rgba(49,88,212,.27); }
.theme-dark[data-theme="ocean"]  { --brand-text:#7DD3FC; --brand-50:rgba(14,165,233,.16); --brand-100:rgba(14,165,233,.25); }
.theme-dark[data-theme="violet"] { --brand-text:#C4B5FD; --brand-50:rgba(124,58,237,.18); --brand-100:rgba(124,58,237,.27); }
.theme-dark[data-theme="sunset"] { --brand-text:#FDBA74; --brand-50:rgba(234,88,12,.16);  --brand-100:rgba(234,88,12,.25); }
.theme-dark[data-theme="rose"]   { --brand-text:#FDA4AF; --brand-50:rgba(225,29,72,.16);  --brand-100:rgba(225,29,72,.25); }

/* ---------- 重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "MiSans",
    "HarmonyOS Sans SC", "Source Han Sans SC", "Microsoft YaHei",
    "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
button { font: inherit; color: inherit; border: none; background: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { margin:0; padding:0; list-style:none; }
img { display:block; max-width:100%; }

/* ---------- H5 应用外壳：移动优先 + ≥480px 居中 ---------- */
#app {
  width: var(--container-max);
  max-width: 100vw;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg);
  position: relative;
  overflow-x: hidden;
}
@media (min-width: 480px) {
  #app { box-shadow: var(--shadow-3); }
}

/* ---------- 通用工具类 ---------- */
.row { display:flex; flex-direction:row; align-items:center; }
.col { display:flex; flex-direction:column; }
.between { justify-content:space-between; }
.center { justify-content:center; align-items:center; }
.wrap { flex-wrap:wrap; }
.f1 { flex:1; min-width:0; }
.gap-1 { gap:var(--sp-1); } .gap-2 { gap:var(--sp-2); } .gap-3 { gap:var(--sp-3); }

/* 触控最小区 */
.tap { min-width:var(--tap-min); min-height:var(--tap-min); display:flex; align-items:center; justify-content:center; }
/* 屏幕阅读器专用 */
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* 焦点可见 */
.focusable:focus-visible { outline:2px solid var(--brand-500); outline-offset:2px; }

/* ---------- 卡片 ---------- */
.card {
  background: var(--bg-elev);
  border-radius: var(--r-lg);
  padding: 1.4rem;
  box-shadow: var(--shadow-2);
  margin: 0 var(--page-x) var(--sp-3);
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease-out);
}
.card--flat { box-shadow:none; border:1px solid var(--border); }
.card__title {
  font-size: var(--fs-xl); font-weight:700; color:var(--text);
  line-height: var(--lh-tight);
  display:flex; align-items:center; gap:var(--sp-2);
}
.card__title::before {
  content:''; width:.4rem; height:1.4rem; border-radius:.2rem;
  background: var(--brand-500); display:block;
}

/* ---------- 按钮 ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  height: var(--tap-min); padding: 0 var(--sp-4); border-radius: var(--r-full);
  font-size: var(--fs-md); font-weight:600; background: var(--bg-sunken);
  color: var(--text); gap: var(--sp-1);
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast);
  -webkit-tap-highlight-color: transparent;
}
.btn--primary { background:var(--grad-btn); color:#fff; box-shadow:0 .5rem 1.2rem rgba(var(--brand-rgb),.28); }
.btn--ghost { background:transparent; border:1px solid var(--border-strong); color:var(--text-2); }
.btn--danger { background:var(--danger-text); color:#fff; }
.btn--sm { height:3.2rem; padding:0 var(--sp-3); font-size:var(--fs-sm); }
.btn--block { display:flex; width:100%; }
.btn--disabled { opacity:.45; pointer-events:none; }
.btn:active { transform: scale(var(--press)); }

/* ---------- 标签 ---------- */
.tag {
  display:inline-flex; align-items:center; gap:.3rem;
  padding: .2rem var(--sp-2); border-radius: var(--r-full);
  font-size: var(--fs-sm); font-weight:600; line-height:1.5;
  background: var(--bg-sunken); color: var(--text-2);
}
.tag--brand { background:var(--brand-50); color:var(--brand-text); }
.tag--blue { background:rgba(59,130,246,.12); color:var(--info-text); }
.tag--purple { background:rgba(139,92,246,.12); color:var(--purple-text); }
.tag--orange { background:rgba(245,158,11,.14); color:var(--warn-text); }
.tag--red { background:rgba(239,68,68,.12); color:var(--danger-text); }
.tag--pink { background:rgba(236,72,153,.12); color:var(--pink-text); }
.tag__dot { width:.6rem; height:.6rem; border-radius:50%; background:currentColor; }

/* ---------- 文本 ---------- */
.t-xs{font-size:var(--fs-xs);} .t-sm{font-size:var(--fs-sm);} .t-md{font-size:var(--fs-base);}
.t-lg{font-size:var(--fs-lg);} .t-xl{font-size:var(--fs-xl);} .t-xxl{font-size:var(--fs-xxl);}
.t-display{font-size:var(--fs-display); line-height:var(--lh-num); font-weight:800;}
.t-bold{font-weight:700;} .t-semi{font-weight:600;}
.t-2{color:var(--text-2);} .t-3{color:var(--text-3);}
.t-brand{color:var(--brand-text);} .t-danger{color:var(--danger-text);}
.t-num{font-variant-numeric:tabular-nums; line-height:var(--lh-num);}
.t-center{text-align:center;}
.ellipsis{overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.ellipsis-2{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;}

/* ---------- 进度条 ---------- */
.progress { height:.6rem; border-radius:var(--r-full); background:var(--bg-sunken); overflow:hidden; }
.progress__bar {
  height:100%; border-radius:var(--r-full); min-width:0;
  background:var(--grad-btn);
  transition: width var(--dur-slow) var(--ease-out);
}

/* ---------- 头像 ---------- */
.avatar {
  width:3.6rem; height:3.6rem; border-radius:50%;
  background:var(--brand-50); color:var(--brand-text);
  display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-sm); font-weight:700; overflow:hidden; flex-shrink:0;
}
.avatar--sm { width:2.4rem; height:2.4rem; font-size:1.1rem; }
.avatar--lg { width:6rem; height:6rem; font-size:var(--fs-xl); }
.avatar-stack .avatar { margin-left:-.8rem; border:1.5px solid var(--bg-elev); }
.avatar-stack .avatar:first-child { margin-left:0; }

/* ---------- 空状态 / 骨架屏 ---------- */
.empty { display:flex; flex-direction:column; align-items:center; padding:var(--sp-10) 0; gap:var(--sp-3); }
.empty__icon { font-size:4.8rem; opacity:.5; }
.empty__text { color:var(--text-3); font-size:var(--fs-base); }

.sk { background:var(--bg-sunken); border-radius:var(--r-sm); animation:jl-shimmer 1.4s var(--ease-out) infinite; }
.sk--title { height:1.8rem; width:55%; margin-bottom:var(--sp-3); }
.sk--text { height:1.4rem; margin-bottom:var(--sp-2); }
.sk--card { height:10rem; border-radius:var(--r-lg); margin:0 var(--page-x) var(--sp-3); }
@keyframes jl-shimmer { 0%{opacity:.55;} 50%{opacity:.95;} 100%{opacity:.55;} }

/* ---------- 动效 ---------- */
@keyframes jl-fade-up { from{opacity:0; transform:translateY(1.2rem);} to{opacity:1; transform:translateY(0);} }
.anim-up { animation:jl-fade-up .35s var(--ease-out) both; }
@keyframes jl-pop { 0%{transform:scale(.9); opacity:0;} 100%{transform:scale(1); opacity:1;} }
.anim-pop { animation:jl-pop .28s var(--ease-spring) both; }
@keyframes jl-fade-in { from{opacity:0;} to{opacity:1;} }
.anim-fade { animation:jl-fade-in var(--dur-base) var(--ease-out) both; }

/* ---------- 分割 / 网格 ---------- */
.divider { height:1px; background:var(--border); margin:var(--sp-3) 0; }
.grid-auto { display:grid; grid-template-columns:repeat(auto-fit, minmax(16rem, 1fr)); gap:var(--sp-3); }