* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
/* H5Xingkai = STXingkai subset (UI copy + all nicknames), mobile web font */
@font-face {
  font-family: "H5Xingkai";
  src: url("fonts/h5-xingkai.woff2?v=4") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "H5Teko";
  src: url("data:font/woff2;base64,d09GMgABAAAAAASIAA8AAAAACWwAAAQxAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGyAcNgZgP1NUQVQqAFgRCAqIRIcDATYCJAM0CxwABCAFg3IHIAwHG4kHAB6FcbNzFFEcRbb/FKbviHiefo3fuW/3i3v7IYtNFyyJJk8M0RJDiIRupROKeCfp+vB51vtNVs10bNeeLHGyfNwTjTi4Xc+QekCcSBOX05+V/aB0WhTQmOIJ/X9rDOrtsWhRmmBga+LWvwcLJMBSJ0OLOhAd9m+XNNuB8yroNM0X2SmtbsZYNTT/AUGnbcloTL/nZb4hEcEdGJDeHtAphrFAl+tyuZzAKMpzTjvguC+SS0hMMJx1HDycUn+cQZSM6tS/ENiT5DlOsHwrkwHzaBHtgmEE0zgPhSIdAQrjlhbOCQAFFYZRrNtoO6Bdu4ItMTKaJgLi+Wg+Nq9AQI1OLTq0qxRtWsUsKJ4QfYgeMAnGIXeAvAZATQdKQvWdiByKshLiPZoeRTs729D0Rh2VFD97+/d4GyYuZBh0Pn9EyKT9YZv2me9xMrkAw5IFbf2LuFzCzHmYr+wJ3rjXfA/25GJivsXVBrL+h0i6+k/auBQPnSeEh+50MaI2hsPtEneopjooepAjMtqKjfQh/R1Dc6WwCQ8X2jek5yBhnZwgVRxrIVWcxxUduiBaYwKzDFc0O3sBcceD7GYG3WnbvhuSkHLK+ClgvJ0aA8AUpVffOR8erh4vX/0tYY7x/KzV9YVF6cOhQSdOR4TVphcW1VdYvXnHmAFA2l3sHkV7Zp1ZF2shVqM2LOL2jaDQYSLP6ghKcA+xRxWP3tQWpfLgpKyJ3Uby7kZ7p0cv8veX72hfxr5D+p0J5yZ8XP5Bu6fJ9vjfDeoNuPxOySLF2qXQfE4Z68Y71iroHiLd2DLxbKI2NZp0YUveKsLrSewttnP35N2w7Az1jMV95wIPvpuEkJf9dWGTSbOI6qwE0oktYpfj8ru83a2AMevCXclM6+682+3cIsxQyzRoG8zfmWXh4ruK3f03bq4vvt6dHFgWYp19jl2hOXn9dVZAMTJ2e5S+d1pFVxTdtW1+DS/eMeb5QDj90sZpYevRsYVu6/evB/D4QVDYeH9hVp9d9texFfUW+PD8+2GAb9Nd8ffFv5D2M9UpQKsCwt9MuO0nQvIjcw7CcXvKF2vIJ0HXufD8xs07vimCYzbFy0LykkcecsvX7b/a4FwI+gQ9XsDGE3Dr3lYLOtxBST0OvAJMFcPWqYpeb1SVTRdGa5yqxU3vlK2G065GoDsygLzaHhOKKKmYaYgJiej4SxQvUVLUaybCbx0+KaWtq6ehJME3hD9fQE9HRElDy194Ha6OilamOA8be7GExGih9AbFGqIkF0dISUlIhk9ASUFHK45OdTRCP1Q9z04jPuGzTmaARqJY8V6WpUJpyV8WVzsGaGXm6hOrjfmzKRQokCkpyfjrEi9WhliJ0sUaxmeQIYpQmmGJEiTJMDzu/NXc8cZ8Tu+ZAdDmin2FWrVhFGerWYFE7Hfk/7Q99Dw=") format("woff2"),
       url("fonts/h5-teko.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
:root{
  --trail:#34d399; --trail-d:#10b981; --trail-bg:rgba(16,185,129,.12);
  --mara:#60a5fa; --mara-d:#3b82f6; --mara-bg:rgba(59,130,246,.12);
  --ink:#f8fafc; --ink2:#e2e8f0; --mut:#94a3b8; --mut2:#64748b;
  --line:rgba(148,163,184,.18); --card:#0f172a; --bg:#020617;
  --gold:#f59e0b; --red:#f87171; --green:#34d399;
  --border:rgba(255,255,255,.06);
}
html,body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; color:var(--ink); }
body { background:#0f172a; display:flex; justify-content:center; min-height:100vh; }
.phone { width:390px; min-height:100vh; background:#020617; position:relative; overflow:hidden; box-shadow:0 0 60px rgba(0,0,0,.4); }
.screen { position:absolute; inset:0; overflow-y:auto; display:none; -webkit-overflow-scrolling:touch; padding-bottom:30px; }
.screen.active { display:block; animation:fadeIn .35s ease; }
@keyframes fadeIn { from{opacity:0; transform:translateX(12px);} to{opacity:1; transform:none;} }
@keyframes rise { from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }

/* ===== Login · Night Orbit ===== */
#screen-login { background:radial-gradient(120% 80% at 50% -10%, #1d4ed8 0%, #020617 55%); }
.login-wrap { min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:0 36px; }
.login-logo { width:64px; height:64px; border-radius:18px; background:linear-gradient(135deg,#38bdf8,#1d4ed8); display:flex; align-items:center; justify-content:center; margin-bottom:22px; box-shadow:0 12px 30px rgba(56,189,248,.3); }
.login-logo i { color:#fff; font-size:30px; }
.login-title {
  color:#fff; font-size:30px; font-weight:400; letter-spacing:.2em;
  font-family:"H5Xingkai","STXingkai","华文行楷","Xingkai SC","KaiTi","楷体",serif;
}
.login-sub { color:#7dd3fc; font-size:13px; margin-top:8px; margin-bottom:38px; letter-spacing:.12em; }
.field { margin-bottom:18px; }
.field label { color:#94a3b8; font-size:12px; margin-bottom:8px; display:block; padding-left:4px; }
.field .inp { display:flex; align-items:center; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:0 10px 0 16px; height:52px; transition:.2s; }
.field .inp:focus-within { border-color:var(--trail); background:rgba(16,185,129,.08); }
.field .inp > i { color:#64748b; font-size:16px; margin-right:10px; flex-shrink:0; }
.field .inp input { flex:1; min-width:0; background:none; border:none; outline:none; color:#fff; font-size:15px; }
.field .inp input::placeholder { color:#475569; }
.field .inp-clear {
  display:none; align-items:center; justify-content:center;
  width:28px; height:28px; margin-left:4px; flex-shrink:0;
  border:none; border-radius:50%; background:rgba(148,163,184,.18);
  color:#94a3b8; font-size:12px; cursor:pointer; padding:0;
}
.field .inp-clear.show { display:inline-flex; }
.field .inp-clear:active { background:rgba(148,163,184,.32); color:#e2e8f0; }
.login-remember { display:flex; align-items:center; margin:2px 0 4px; padding-left:2px; }
.login-remember label { display:inline-flex; align-items:center; gap:8px; color:#94a3b8; font-size:13px; cursor:pointer; user-select:none; }
.login-remember input { width:15px; height:15px; accent-color:var(--trail); cursor:pointer; }
.btn-login { width:100%; height:52px; border:none; border-radius:14px; background:linear-gradient(135deg,var(--trail),var(--trail-d)); color:#fff; font-size:16px; font-weight:600; margin-top:10px; box-shadow:0 10px 26px rgba(16,185,129,.4); cursor:pointer; transition:.2s; }
.btn-login:disabled { cursor:not-allowed; }
.btn-login:active { transform:scale(.98); }
.login-foot { margin-top:28px; text-align:center; }
.login-link {
  display:inline-block; color:#7dd3fc; font-size:14px; margin-bottom:16px;
  text-decoration:none; letter-spacing:.04em;
}
.login-link:active { opacity:.75; }
.login-tip { color:#64748b; font-size:12px; line-height:1.7; margin:0 0 14px; }

/* ===== H5 Alert（无域名） ===== */
.h5-mask {
  position:fixed; inset:0; z-index:9999; padding:24px;
  background:rgba(2,6,23,.55); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  animation:h5-fade .18s ease both;
}
.h5-dialog {
  width:100%; max-width:300px; padding:22px 18px 16px;
  background:#0f172a; border:1px solid rgba(148,163,184,.16);
  border-radius:16px; box-shadow:0 18px 40px rgba(0,0,0,.45);
  animation:h5-pop .2s ease both;
}
.h5-dialog-msg {
  color:#e2e8f0; font-size:15px; line-height:1.55; text-align:center;
  min-height:40px; display:flex; align-items:center; justify-content:center;
  word-break:break-word;
}
.h5-dialog-msg.warn {
  color:#f87171; font-weight:600;
}
.h5-dialog-ok {
  width:100%; height:42px; margin-top:18px; border-radius:11px;
  border:1px solid rgba(52,211,153,.4);
  background:rgba(16,185,129,.14); color:#6ee7b7;
  font-size:15px; font-weight:600; cursor:pointer;
}
.h5-dialog-ok:active { background:rgba(16,185,129,.22); transform:scale(.98); }
/* 确认框双按钮（h5Confirm） */
.h5-dialog-btns { display:flex; gap:10px; margin-top:18px; }
.h5-dialog-btn { flex:1; height:42px; border-radius:11px; font-size:15px; font-weight:600; cursor:pointer; transition:transform .12s; }
.h5-dialog-btn.cancel { background:rgba(148,163,184,.15); color:#cbd5e1; border:1px solid rgba(148,163,184,.22); }
.h5-dialog-btn.ok {
  border:1px solid rgba(52,211,153,.4);
  background:rgba(16,185,129,.14); color:#6ee7b7;
}
.h5-dialog-btn.ok.danger {
  border:1px solid rgba(248,113,113,.45);
  background:rgba(248,113,113,.12); color:#f87171;
  box-shadow:none;
}
.h5-dialog-btn:active { transform:scale(.98); }
.h5-dialog-btn.ok:active { background:rgba(16,185,129,.22); }
.h5-dialog-btn.ok.danger:active { background:rgba(248,113,113,.2); }

/* ===== 图片预览 / 保存到相册 ===== */
.h5-img-preview{
  position:fixed; inset:0; z-index:10000; display:flex; align-items:flex-end; justify-content:center;
  opacity:0; transition:opacity .18s ease; pointer-events:none;
  padding:0 0 env(safe-area-inset-bottom,0);
}
.h5-img-preview.in-phone{ position:absolute; }
.h5-img-preview.show{ opacity:1; pointer-events:auto; }
.h5-img-preview-mask{ position:absolute; inset:0; background:rgba(2,6,23,.72); }
.h5-img-preview-panel{
  position:relative; z-index:1; width:100%; max-width:480px; max-height:88%;
  display:flex; flex-direction:column;
  background:#0f172a; border-radius:18px 18px 0 0;
  border:1px solid rgba(148,163,184,.18); border-bottom:0;
  box-shadow:0 -12px 40px rgba(0,0,0,.45); overflow:hidden;
}
.h5-img-preview-hd{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; border-bottom:1px solid rgba(148,163,184,.12); flex-shrink:0;
}
.h5-img-preview-title{
  flex:1; min-width:0; font-size:15px; font-weight:700; color:#f8fafc;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.h5-img-preview-close{
  flex-shrink:0; height:32px; padding:0 12px; border:0; border-radius:8px;
  background:rgba(148,163,184,.16); color:#e2e8f0; font-size:13px; font-weight:600; cursor:pointer;
}
.h5-img-preview-close:active{ transform:scale(.97); }
.h5-img-preview-scroll{
  overflow-x:hidden; overflow-y:auto; flex:1; min-height:0;
  max-height:calc(92vh - 150px); background:#020617;
  -webkit-overflow-scrolling:touch;
}
.h5-img-preview-scroll.pulse{ outline:2px solid rgba(52,211,153,.75); outline-offset:-2px; }
.h5-img-preview-scroll img{
  display:block; width:100%; height:auto; user-select:none;
  -webkit-user-select:none; -webkit-touch-callout:default;
}
.h5-img-preview-ft{
  flex-shrink:0; padding:12px 16px 16px; border-top:1px solid rgba(148,163,184,.12);
  background:#0f172a;
}
.h5-img-preview-hint{
  margin:0 0 10px; font-size:12px; line-height:1.45; color:#94a3b8; text-align:center;
}
.h5-img-preview-save{
  width:100%; height:46px; border:0; border-radius:12px; cursor:pointer;
  background:linear-gradient(135deg,var(--trail),var(--trail-d));
  color:#fff; font-size:15px; font-weight:700;
}
.h5-img-preview-save:active{ transform:scale(.98); }

/* ===== 底部选择器（日期 / 下拉） ===== */
.h5-prompt-wrap{padding:8px 16px 18px}
.h5-prompt-tip{font-size:13px; color:var(--mut); line-height:1.5; margin-bottom:12px}
.h5-prompt-inp{
  width:100%; height:48px; border-radius:14px; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06); color:#fff; font-size:15px; padding:0 14px;
  outline:0; font-family:inherit; -webkit-appearance:none; appearance:none;
}
.h5-prompt-inp:focus{border-color:var(--trail); background:rgba(16,185,129,.08)}
.h5-prompt-inp.err{border-color:rgba(248,113,113,.55); background:rgba(248,113,113,.08)}
.h5-prompt-inp::placeholder{color:#64748b}
.h5-native-hide{
  position:absolute!important; width:1px!important; height:1px!important; opacity:0!important;
  pointer-events:none!important; margin:0!important; padding:0!important; border:0!important;
  clip:rect(0,0,0,0)!important;
}
.h5-pick{position:relative; width:100%}
.h5-pick-btn{
  width:100%; height:44px; border-radius:12px; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06); color:#fff; font-size:14px; font-family:inherit;
  padding:0 12px; display:flex; align-items:center; justify-content:space-between; gap:8px;
  cursor:pointer; text-align:left; -webkit-appearance:none; appearance:none;
}
.h5-pick-btn .txt{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.h5-pick-btn .txt.ph{color:var(--mut2)}
.h5-pick-btn > i{color:var(--mut); font-size:14px; flex-shrink:0}
.h5-pick-btn:active{background:rgba(255,255,255,.1)}
.h5-pick.compact .h5-pick-btn{height:34px; border-radius:12px; font-size:12px; padding:0 8px}
.h5-pick.compact .h5-pick-btn > i{font-size:12px}

.h5-sheet{
  inset:0; z-index:10050; display:flex; flex-direction:column; justify-content:flex-end;
  opacity:0; transition:opacity .2s ease;
}
.h5-sheet.in-phone{position:absolute}
.h5-sheet.in-body{position:fixed}
.h5-sheet.show{opacity:1}
.h5-sheet-mask{position:absolute; inset:0; background:rgba(2,6,23,.58); backdrop-filter:blur(3px)}
.h5-sheet-panel{
  position:relative; z-index:1; background:#0b1220; border:1px solid rgba(148,163,184,.16);
  border-radius:18px 18px 0 0; box-shadow:0 -12px 40px rgba(0,0,0,.45);
  transform:translateY(24px); transition:transform .22s ease; max-height:78%;
  display:flex; flex-direction:column; padding-bottom:max(10px, env(safe-area-inset-bottom));
}
.h5-sheet.show .h5-sheet-panel{transform:none}
.h5-sheet-hd{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.06); flex-shrink:0;
}
.h5-sheet-title{font-size:15px; font-weight:700; color:var(--ink); text-align:center; flex:1}
.h5-sheet-x{
  border:0; background:0; color:var(--mara); font-size:14px; font-weight:600;
  cursor:pointer; font-family:inherit; min-width:44px; padding:6px 0;
}
.h5-sheet-x.cancel{color:var(--mut)}
.h5-sheet-bd{overflow:auto; -webkit-overflow-scrolling:touch; min-height:0}
.h5-sheet-bd.is-wheel{overflow:hidden; flex-shrink:0}
.phone.h5-sheet-open .screen,
body.h5-sheet-open{overflow:hidden!important}

.h5-sheet-opts{padding:6px 10px 14px}
.h5-sheet-opt{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  height:48px; padding:0 14px; margin-bottom:6px; border-radius:12px;
  border:1px solid transparent; background:rgba(255,255,255,.04);
  color:var(--ink2); font-size:15px; font-family:inherit; cursor:pointer; text-align:left;
}
.h5-sheet-opt.on{
  background:var(--mara-bg); border-color:rgba(96,165,250,.35); color:#fff; font-weight:700;
}
.h5-sheet-opt i{color:var(--mara); font-size:14px}
.h5-sheet-opt:active{transform:scale(.99)}
/* 难度选项着色 */
.h5-sheet-opt.star-1{ color:#4ade80; }
.h5-sheet-opt.star-2{ color:#a3e635; }
.h5-sheet-opt.star-3{ color:#fbbf24; }
.h5-sheet-opt.star-4{ color:#f87171; }
.h5-sheet-opt.star-5{ color:#f43f5e; }
.h5-sheet-opt.star-1.on{ background:rgba(74,222,128,.12); border-color:rgba(74,222,128,.4); color:#4ade80; }
.h5-sheet-opt.star-2.on{ background:rgba(163,230,53,.12); border-color:rgba(163,230,53,.4); color:#a3e635; }
.h5-sheet-opt.star-3.on{ background:rgba(251,191,36,.12); border-color:rgba(251,191,36,.4); color:#fbbf24; }
.h5-sheet-opt.star-4.on{ background:rgba(248,113,113,.12); border-color:rgba(248,113,113,.4); color:#f87171; }
.h5-sheet-opt.star-5.on{ background:rgba(244,63,94,.12); border-color:rgba(244,63,94,.4); color:#f43f5e; }
.h5-sheet-opt.star-1.on i,
.h5-sheet-opt.star-2.on i,
.h5-sheet-opt.star-3.on i,
.h5-sheet-opt.star-4.on i,
.h5-sheet-opt.star-5.on i{ color:inherit; }
.h5-sheet-ft{padding:0 14px 12px; flex-shrink:0}
.h5-sheet-clear{
  width:100%; height:40px; border-radius:12px; border:1px solid rgba(248,113,113,.28);
  background:rgba(248,113,113,.08); color:#f87171; font-size:13px; font-weight:600;
  cursor:pointer; font-family:inherit;
}

.h5-wheels{
  position:relative; display:grid; grid-template-columns:1fr 1fr 1fr; gap:4px;
  padding:8px 10px 14px; height:240px;
}
.h5-wheels.one{grid-template-columns:1fr}
.h5-wheels.one .h5-wheel-item{font-size:16px}
.h5-wheels.one .h5-wheel-item.on{font-size:18px}
/* 配速：分 / 秒 两列居中 */
.h5-wheels.two{
  grid-template-columns:1fr 1fr; gap:8px; max-width:280px; margin:0 auto; width:100%;
  padding:8px 24px 14px;
}
.h5-wheels.two .h5-wheel-item{font-size:16px; justify-content:center; text-align:center}
.h5-wheels.two .h5-wheel-item.on{font-size:20px}
/* 计划名称 + 目标时分 同屏 */
.h5-plan-meta{ padding:4px 14px 12px; }
.h5-plan-meta-field{ margin-bottom:12px; }
.h5-plan-meta-field > label{
  display:flex; align-items:center; gap:4px;
  font-size:12px; color:var(--mut); margin-bottom:8px; font-weight:600;
  line-height:18px; min-height:18px;
}
.h5-plan-meta-field > label .req{
  color:#f87171; font-style:normal; font-weight:700;
  font-size:14px; line-height:18px; height:18px;
  display:inline-flex; align-items:center; justify-content:center;
  transform:translateY(1px); margin:0;
}
.h5-plan-meta-name{
  width:100%; height:44px; border-radius:12px; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06); color:#fff; padding:0 12px; font-size:15px;
  outline:0; font-family:inherit; -webkit-appearance:none; appearance:none;
}
.h5-plan-meta-name:focus{ border-color:rgba(52,211,153,.45); background:rgba(16,185,129,.08); }
.h5-plan-meta-wheels{ height:200px; max-width:100%; padding:4px 8px 10px; }
.h5-plan-meta-wheels .h5-wheel,
.h5-plan-meta-wheels .h5-wheel-track{ height:200px; }
.h5-plan-meta-wheels .h5-wheel-pad{ height:80px; }
.h5-plan-meta-wheels .h5-wheel-hl{ left:4px; right:4px; }
.h5-wheels.two .h5-wheel-hl{left:16px; right:16px}
/* 关门时间等：年/月/日/时/分 */
.h5-wheels.dt{
  grid-template-columns:1.1fr 0.85fr 0.85fr 0.95fr 0.95fr; gap:2px; padding:8px 6px 14px;
}
.h5-wheels.dt .h5-wheel-item{font-size:13px; letter-spacing:0}
.h5-wheels.dt .h5-wheel-item.on{font-size:15px}
.h5-wheel{position:relative; min-width:0; height:240px; z-index:1; overflow:hidden}
.h5-wheel-track{
  height:240px; width:100%; overflow:hidden;
  touch-action:none; -webkit-user-select:none; user-select:none;
  position:relative;
}
.h5-wheel-list{
  will-change:transform;
}
.h5-wheel-pad{height:100px; flex-shrink:0; pointer-events:none}
.h5-wheel-item{
  width:100%; height:40px; border:0; background:0; color:var(--mut);
  font-size:15px; font-family:inherit; display:flex;
  align-items:center; justify-content:center; flex-shrink:0;
  user-select:none; -webkit-user-select:none;
}
.h5-wheel-item.on{color:#fff; font-weight:800; font-size:18px}
.h5-wheel-hl{
  pointer-events:none; position:absolute; left:8px; right:8px; top:50%; z-index:2;
  height:40px; margin-top:-20px; border-radius:12px;
  border:1px solid rgba(96,165,250,.28); background:rgba(59,130,246,.1);
}
.h5-wheel::before,
.h5-wheel::after{
  content:""; position:absolute; left:0; right:0; z-index:3; height:100px; pointer-events:none;
}
.h5-wheel::before{top:0; background:linear-gradient(to bottom, #0b1220 10%, rgba(11,18,32,0))}
.h5-wheel::after{bottom:0; background:linear-gradient(to top, #0b1220 10%, rgba(11,18,32,0))}

.mara-hms .h5-pick-btn{letter-spacing:.04em}
@keyframes h5-fade { from { opacity:0; } to { opacity:1; } }
@keyframes h5-pop { from { opacity:0; transform:scale(.96) translateY(6px); } to { opacity:1; transform:none; } }

/* ===== 回到顶部 · 海拔刻度（抬高至 Tab 上方） ===== */
.h5-top {
  position:absolute; right:14px; bottom:18px; z-index:90;
  width:40px; height:48px; border:1px solid rgba(96,165,250,.4);
  border-radius:14px;
  background:rgba(2,6,23,.88);
  backdrop-filter:blur(8px);
  color:#7dd3fc; cursor:pointer; padding:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  box-shadow:0 8px 22px rgba(0,0,0,.4);
  opacity:0; pointer-events:none; transform:translateY(10px);
  transition:opacity .22s ease, transform .22s ease;
}
/* 有底部四 Tab 时抬到栏上方，避免遮挡 */
.phone:has(.h5-tabbar) .h5-top {
  bottom:calc(64px + 12px + env(safe-area-inset-bottom, 0px));
}
.h5-top.show {
  opacity:1; pointer-events:auto; transform:none;
}
.h5-top:active { transform:scale(.94); }
.h5-top .arr { font-size:11px; line-height:1; opacity:.9; }
.h5-top .txt {
  font-size:9px; letter-spacing:.06em; font-weight:700; opacity:.95;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}

/* ===== Home · Night Orbit (V5) ===== */
@keyframes orbit-spin { to { transform:rotate(360deg); } }
@keyframes orbit-spin-rev { to { transform:rotate(-360deg); } }
@keyframes orbit-arc { to { stroke-dashoffset:-220; } }
@keyframes orbit-breath {
  0%,100% { opacity:.45; transform:scale(.94); }
  50% { opacity:.9; transform:scale(1.06); }
}
@keyframes orbit-mark {
  0%,100% { transform:scale(1); text-shadow:0 0 8px currentColor; filter:brightness(1); }
  50% { transform:scale(1.12); text-shadow:0 0 28px currentColor, 0 0 48px currentColor; filter:brightness(1.15); }
}
@keyframes orbit-ripple {
  0% { transform:scale(.45); opacity:.55; }
  70% { opacity:.18; }
  100% { transform:scale(1.15); opacity:0; }
}
#screen-home.theme-orbit,
#screen-home { background:var(--bg); }
.home-top {
  padding:48px 22px 22px; position:relative; overflow:hidden; color:#fff;
  background:radial-gradient(120% 80% at 50% -10%, #1d4ed8 0%, #020617 55%);
}
/* 首页顶栏与战绩页共用山景 header；问候直接叠在山景上，无框 */
.home-header.dt-header-ridge {
  --ridge-bg: var(--bg);
  height: var(--ridge-hd-h);
  min-height: var(--ridge-hd-h);
  padding-bottom:8px;
}
.home-header .dt-top { margin-bottom:0; }
.home-header .home-greet { margin-top:0; }
.home-header .dt-en {
  font-family:"STKaiti","华文楷体","KaiTi","楷体","Songti SC",Georgia,"Times New Roman",serif;
  font-style:normal; font-weight:400; font-size:12px;
  letter-spacing:.06em; text-transform:none;
  color:rgba(220,252,231,.82); white-space:nowrap;
  margin:4px 0 0; padding:0 0 0 5px; text-indent:0;
  text-shadow:0 1px 8px rgba(0,0,0,.45);
}

.home-greet {
  position:relative; z-index:3; margin-top:0; padding:0 2px;
}
.home-greet-line {
  display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 4px;
  line-height:1.15;
}
.home-header .home-hello {
  color:rgba(226,232,240,.7); font-size:15px; font-weight:400;
  letter-spacing:.12em;
  text-shadow:0 1px 8px rgba(0,0,0,.5);
  transform:translateY(-2px);
}
.home-header .home-name {
  color:#fff; font-size:18px; font-weight:700; line-height:1.15;
  font-family:inherit; letter-spacing:.04em;
  text-shadow:0 2px 16px rgba(0,0,0,.55);
}
.home-meta {
  margin-top:10px; display:flex; flex-wrap:wrap; align-items:center; gap:0 7px;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:12px; line-height:1; color:rgba(226,232,240,.82);
  text-shadow:0 1px 8px rgba(0,0,0,.5);
}
.home-meta > *{
  display:inline-flex; align-items:center; height:16px; line-height:16px;
}
.home-meta .sep{
  opacity:.4; width:auto; justify-content:center;
  font-size:12px; transform:none;
}
.home-role { color:rgba(167,243,208,.92); }
.home-pi{
  gap:4px;
}
.home-pi b{
  font-family:inherit; font-weight:700; font-size:12px;
  color:#fff; letter-spacing:.02em; margin:0;
  font-variant-numeric:tabular-nums;
}
.home-itra-id {
  display:inline-flex; align-items:center; gap:5px; height:16px; line-height:16px;
  margin:0; padding:0; border:0; outline:none;
  background:transparent; color:inherit; font:inherit; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  -webkit-tap-highlight-color:transparent; font-weight:600;
}
.home-itra-id i{
  margin:0; font-size:11px; line-height:1; opacity:.75;
  display:inline-flex; align-items:center; justify-content:center;
  width:12px; height:12px;
}
.home-itra-id:active { opacity:.75; }
.home-itra-id.copied { color:#fde68a; }
.deco-orbit {
  --orbit:rgba(125,211,252,.7);
  --orbit-soft:rgba(56,189,248,.2);
  position:absolute; right:-14px; top:0; width:140px; height:140px;
  color:var(--orbit); pointer-events:none; z-index:0;
}
.deco-orbit .orbit-aura {
  position:absolute; inset:16px; border-radius:50%;
  background:radial-gradient(circle, var(--orbit-soft) 0%, transparent 68%);
  animation:orbit-breath 3.2s ease-in-out infinite;
}
.deco-orbit .orbit-ripples {
  position:absolute; inset:8px;
}
.deco-orbit .orbit-ripples i {
  position:absolute; inset:0; border-radius:50%;
  border:1px solid currentColor; opacity:0;
  animation:orbit-ripple 2.8s ease-out infinite;
}
.deco-orbit .orbit-ripples i:nth-child(2) { animation-delay:.9s; }
.deco-orbit .orbit-ripples i:nth-child(3) { animation-delay:1.8s; }
.deco-orbit .orbit-svg {
  position:absolute; inset:0; width:100%; height:100%;
}
.deco-orbit .orbit-svg .ring-soft {
  fill:none; stroke:currentColor; stroke-width:0.6; opacity:.2;
}
.deco-orbit .orbit-svg .ring-arc {
  fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round;
  stroke-dasharray:36 190; opacity:.85;
  transform-origin:60px 60px;
  animation:orbit-spin 10s linear infinite, orbit-arc 10s linear infinite;
}
.deco-orbit .orbit-svg .ring-arc2 {
  fill:none; stroke:currentColor; stroke-width:1; stroke-linecap:round;
  stroke-dasharray:20 206; opacity:.45;
  transform-origin:60px 60px;
  animation:orbit-spin-rev 16s linear infinite;
}
.deco-orbit .orbit-core {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
}
.deco-orbit .orbit-core .c-mark {
  font-family:"H5Xingkai","STXingkai","华文行楷","Xingkai SC","KaiTi","楷体",serif;
  font-size:46px; line-height:1; color:#f0f9ff;
  animation:orbit-mark 2.4s ease-in-out infinite;
}
.dt-header .deco-orbit {
  --orbit:rgba(110,231,183,.7);
  --orbit-soft:rgba(52,211,153,.2);
  right:-16px; top:-4px;
}
.dt-header .deco-orbit .orbit-core .c-mark { color:#f0fdf4; }
.home-hello { color:#93c5fd; font-size:13px; position:relative; z-index:1; }
.home-name { color:#fff; font-size:18px; font-weight:800; margin-top:4px; letter-spacing:-.3px; position:relative; z-index:1; }
.home-sub { color:#7dd3fc; font-size:12px; margin-top:6px; position:relative; z-index:1; }
.home-body { padding:8px 16px 28px; margin-top:0; position:relative; z-index:2; }
.home-section-title {
  color:rgba(148,163,184,.9); font-size:11px; font-weight:600;
  padding:4px 2px 12px; letter-spacing:.14em; text-transform:uppercase;
}

/* 赛道入口卡：标题行 + 三栏指标 */
.home-track {
  margin:0 0 12px; border-radius:18px; padding:16px 16px 14px; color:#fff; cursor:pointer;
  position:relative; overflow:hidden;
  background:var(--card);
  border:1px solid var(--border);
  box-shadow:0 12px 28px rgba(0,0,0,.28);
  transition:transform .18s ease, border-color .18s ease;
  animation:rise .4s ease both;
}
.home-track::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  opacity:.9;
}
.home-track.trail::before{
  background:
    radial-gradient(90% 80% at 0% 0%, rgba(52,211,153,.18), transparent 55%),
    linear-gradient(180deg, rgba(6,78,59,.22), transparent 42%);
}
.home-track.mara::before{
  background:
    radial-gradient(90% 80% at 0% 0%, rgba(96,165,250,.18), transparent 55%),
    linear-gradient(180deg, rgba(30,64,175,.22), transparent 42%);
}
.home-track.trail{ border-color:rgba(52,211,153,.16); }
.home-track.mara{ border-color:rgba(96,165,250,.16); }
.home-track:nth-of-type(1),
.home-body .home-track:nth-child(2){ animation-delay:.04s }
.home-body .home-track:nth-child(3){ animation-delay:.08s }
.home-track:active{ transform:scale(.985); }
.home-track > *{ position:relative; z-index:1; }

.home-track .ht-hd{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
}
.home-track .ht-title{
  font-family:"H5Xingkai","STXingkai","华文行楷","Xingkai SC","KaiTi","楷体",serif;
  font-size:20px; font-weight:500; letter-spacing:.12em; line-height:1.2;
}
.home-track .ht-tag{
  flex-shrink:0; font-size:10px; font-weight:600; letter-spacing:.16em;
  color:rgba(148,163,184,.85);
}
.home-track.trail .ht-tag{ color:rgba(110,231,183,.75); }
.home-track.mara .ht-tag{ color:rgba(147,197,253,.75); }

.home-track .ht-stats{
  margin-top:14px; display:grid; grid-template-columns:repeat(3,1fr);
  padding:12px 0;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.home-track .ht-st{
  text-align:center; padding:0 6px;
  border-right:1px solid rgba(255,255,255,.06);
}
.home-track .ht-st:last-child{ border-right:0; }
.home-track .ht-st .n{
  font-family:"H5Teko", Teko, sans-serif; font-size:26px; font-weight:500;
  line-height:1; color:#fff; font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.home-track .ht-st .n.n-lock{
  display:flex; align-items:center; justify-content:center;
  min-height:26px; font-size:18px; color:#64748b; opacity:.9;
}
.home-track .ht-st .n.n-lock .fa{ font-size:18px; color:#64748b; }
.home-track .ht-st .n em{
  font-style:normal; font-size:14px; margin-left:1px; color:rgba(248,250,252,.65);
}
.home-track .ht-st .l{
  margin-top:5px; font-size:10px; color:#64748b; letter-spacing:.06em;
}
.home-track .ht-go{
  margin-top:12px; display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:600;
}
.home-track.trail .ht-go{ color:#86efac; }
.home-track.mara .ht-go{ color:#93c5fd; }
.home-track .ht-go i{ font-size:13px; opacity:.85; }

/* 计划入口：月相夜票 + 深苔/深琥珀底 */
.home-plan-link {
  margin:10px 0 18px;
  display:grid; grid-template-columns:1fr 64px;
  text-decoration:none; color:#e2e8f0;
  position:relative; overflow:visible;
  border-radius:16px;
  box-shadow:0 12px 28px rgba(0,0,0,.35);
  -webkit-tap-highlight-color:transparent;
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.home-plan-link:last-of-type{ margin-bottom:4px; }
.home-plan-link.is-trail{
  background:
    radial-gradient(100% 80% at 100% 0%, rgba(16,185,129,.16), transparent 50%),
    linear-gradient(165deg,#0a1f1a,#071412 55%,#020617);
  border:1px solid rgba(52,211,153,.28);
}
.home-plan-link.is-journey{
  background:
    radial-gradient(100% 80% at 100% 0%, rgba(245,158,11,.14), transparent 50%),
    linear-gradient(165deg,#1a140c,#120e09 55%,#020617);
  border:1px solid rgba(251,191,36,.28);
}
.home-plan-link:active{
  transform:scale(.985);
  box-shadow:0 6px 16px rgba(0,0,0,.3);
}
.home-plan-link .hpl-moon{
  position:absolute; left:14px; top:12px; width:8px; height:8px; border-radius:50%;
  background:#e2e8f0; box-shadow:0 0 12px rgba(226,232,240,.4);
  opacity:.5; pointer-events:none; z-index:1;
}
/* 撕口圆缺 */
.home-plan-link::before,
.home-plan-link::after{
  content:""; position:absolute; right:56px; width:14px; height:14px;
  border-radius:50%; background:var(--bg,#020617);
  border:1px solid rgba(148,163,184,.22);
  z-index:3; pointer-events:none;
}
.home-plan-link.is-trail::before,
.home-plan-link.is-trail::after{ border-color:rgba(52,211,153,.3); }
.home-plan-link.is-journey::before,
.home-plan-link.is-journey::after{ border-color:rgba(251,191,36,.3); }
.home-plan-link::before{ top:-8px; }
.home-plan-link::after{ bottom:-8px; }
.home-plan-link .hpl-main{
  position:relative; z-index:1; padding:15px 16px 13px; min-width:0;
  display:flex; flex-direction:column; justify-content:center;
}
.home-plan-link .hpl-main::after{
  content:""; position:absolute; right:0; top:14px; bottom:14px; width:0;
  border-right:1.5px dashed rgba(148,163,184,.32);
}
.home-plan-link.is-trail .hpl-main::after{ border-color:rgba(52,211,153,.3); }
.home-plan-link.is-journey .hpl-main::after{ border-color:rgba(251,191,36,.3); }
.home-plan-link .hpl-kicker{
  font-size:9px; font-weight:700; letter-spacing:.24em; color:rgba(148,163,184,.72);
}
.home-plan-link .hpl-label{
  margin-top:7px; font-size:16px; font-weight:700; letter-spacing:.1em; color:#fff; line-height:1.25;
}
.home-plan-link .hpl-hint{
  margin-top:5px; font-size:11px; color:rgba(148,163,184,.78); letter-spacing:.02em; line-height:1.4;
}
.home-plan-link .hpl-route{
  margin-top:10px; display:flex; align-items:center; gap:7px;
  font-size:9px; letter-spacing:.12em; color:rgba(226,232,240,.5);
}
.home-plan-link .hpl-route em{ font-style:normal; font-weight:700; }
.home-plan-link .hpl-route i{
  flex:1; height:1px; display:block;
  background:linear-gradient(90deg,transparent,rgba(148,163,184,.45),transparent);
}
.home-plan-link .hpl-route b{
  font-size:10px; font-weight:400; opacity:.7; color:rgba(226,232,240,.7);
}
.home-plan-link .hpl-stub{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  background:rgba(255,255,255,.03);
  border-left:1px solid rgba(255,255,255,.05);
  border-radius:0 15px 15px 0;
}
.home-plan-link.is-trail .hpl-stub{ color:#6ee7b7; background:rgba(16,185,129,.12); }
.home-plan-link.is-journey .hpl-stub{ color:#fbbf24; background:rgba(251,191,36,.12); }
.home-plan-link .hpl-stub i{ font-size:16px; }
.home-plan-link .hpl-stub b{
  font-size:9px; letter-spacing:.16em; font-weight:800;
}

/* 旧大卡样式保留（其它页若复用） */
.card-block {
  margin:0 0 14px; border-radius:24px; padding:0; color:#fff; overflow:hidden; cursor:pointer;
  box-shadow:0 16px 40px rgba(0,0,0,.35); transition:transform .2s; animation:rise .4s ease both;
}
.card-block:active { transform:scale(.98); }
.card-block .ct-hd { padding:18px 18px 12px; }
.card-trail .ct-hd { background:linear-gradient(135deg,#059669,#10b981 40%,#34d399); }
.card-mara .ct-hd { background:linear-gradient(135deg,#1d4ed8,#3b82f6 45%,#60a5fa); }
.card-block .ct-bd {
  padding:14px 18px 16px; background:#0f172a;
  border:1px solid rgba(255,255,255,.06); border-top:none; border-radius:0 0 24px 24px;
}
.card-block .ct-title { font-size:20px; font-weight:800; letter-spacing:.2px; }
.card-block .ct-en { font-size:10px; opacity:.75; margin-top:3px; letter-spacing:1.5px; text-transform:uppercase; }
.card-trail .ct-title,
.card-mara .ct-title {
  font-family:"H5Xingkai","STXingkai","华文行楷","Xingkai SC","KaiTi","楷体",serif;
  font-weight:500; font-size:22px; letter-spacing:.15em;
}
.card-trail .ct-en,
.card-mara .ct-en {
  font-family:"STKaiti","华文楷体","KaiTi","楷体","Songti SC",serif;
  font-weight:500; font-size:11px; letter-spacing:.2em;
}
.card-block .ct-stats { display:flex; gap:18px; }
.card-block .ct-stats .s .n { font-size:20px; font-weight:800; color:#f8fafc; }
.card-block .ct-stats .s .l { font-size:10px; color:#94a3b8; margin-top:3px; }
.card-block .ct-go {
  margin-top:14px; display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  background:rgba(255,255,255,.08); color:#e2e8f0; border:1px solid rgba(255,255,255,.1);
  padding:7px 12px; border-radius:999px;
}
.home-foot { padding:4px 0 8px; display:flex; gap:10px; }
.home-foot .btn-home-act {
  flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
  height:48px; padding:0 12px; border:1px solid rgba(255,255,255,.06); border-radius:16px;
  background:#0f172a; color:#94a3b8; font-family:inherit;
  font-size:13px; font-weight:600; text-decoration:none; cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  transition:background .2s, color .2s, border-color .2s, transform .15s;
}
.home-foot .btn-home-ico {
  width:16px; height:16px; flex-shrink:0;
  fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; opacity:.85;
}
.home-foot .btn-home-act:active {
  transform:scale(.98);
  background:#131c2e; color:#e2e8f0; border-color:rgba(148,163,184,.22);
}
/* 兼容旧 class */
.home-foot .btn-logout { flex:1; }

/* ===== 全局底部导航 tab 栏 ===== */
.h5-tabbar {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 50;
  display: flex; background: rgba(15,23,42,.96); backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
}
.h5-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 0; color: var(--mut2); cursor: pointer; text-decoration: none;
  transition: color .2s;
}
.h5-tab i { font-size: 18px; }
.h5-tab span { font-size: 10px; letter-spacing: .04em; }
.h5-tab.active { color: var(--trail); }
.h5-tab:active { opacity: .7; }
/* 有 tab 栏时 screen 底部留出空间，避免内容被遮挡 */
.screen.has-tabbar { padding-bottom: 76px; }

/* ===== 马拉松板块 ===== */
.phone.mara-theme .h5-tab.active { color: var(--mara); }
.mara-hd{
  --mara-hd-bg: #0b1220;
  position:relative; overflow:hidden;
  background-color:#1e3a5f;
  background-image:url("img/marathon-header-bg.jpg");
  background-position:center top;
  background-size:cover;
  background-repeat:no-repeat;
  padding:12px 16px 44px;
  min-height:240px;
  box-sizing:border-box;
  border-radius:0 0 28px 28px;
}
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
  .mara-hd {
    background-image: image-set(
      url("img/marathon-header-bg.webp") type("image/webp"),
      url("img/marathon-header-bg.jpg") type("image/jpeg")
    );
  }
}
.mara-hd-fog{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(11,18,32,.12) 0%,
      rgba(11,18,32,.08) 14%,
      rgba(11,18,32,.18) 36%,
      rgba(11,18,32,.40) 68%,
      rgba(11,18,32,.88) 88%,
      var(--mara-hd-bg) 100%),
    radial-gradient(120% 90% at 50% 45%, transparent 45%, rgba(11,18,32,.28) 100%),
    radial-gradient(90% 55% at 50% 100%, var(--mara-hd-bg) 0%, transparent 72%);
}
.mara-hd-inner{ position:relative; z-index:2; padding-top:42px; }
.mara-hd-title{font-size:22px;font-weight:400;letter-spacing:.18em;color:#fff;
  font-family:"H5Xingkai","STXingkai","华文行楷","Xingkai SC","KaiTi","楷体",serif;
  text-shadow:0 2px 12px rgba(0,0,0,.45)}
.mara-hd-en{font-size:11px;color:rgba(224,242,254,.92);margin-top:4px;letter-spacing:.08em;
  text-shadow:0 1px 8px rgba(0,0,0,.4)}
.mara-hd-glass{
  margin-top:28px; padding:8px 4px 2px;
  border:none; border-radius:0; box-shadow:none;
  background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
}
.mara-hd-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.mara-hd-big{font-size:34px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.55); line-height:1}
.mara-hd-big em{font-style:normal;font-size:16px;font-weight:600;color:rgba(226,232,240,.85);margin:0 2px;
  text-shadow:0 1px 8px rgba(0,0,0,.45)}
.mara-hd-lab{font-size:12px;color:rgba(226,242,254,.95);margin-top:6px;
  text-shadow:0 1px 8px rgba(0,0,0,.5)}
.mara-hd-pct{text-align:right}
.mara-hd-pct .n{font-size:28px;font-weight:800;color:#dbeafe;
  text-shadow:0 2px 14px rgba(0,0,0,.55); line-height:1}
.mara-hd-bar{height:8px;border-radius:999px;background:rgba(255,255,255,.22);margin-top:14px;overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.25)}
.mara-hd-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#93c5fd,#e0f2fe);max-width:100%}
.mara-hd-bar.is-done i,
.mara-hd-bar.is-over i{background:linear-gradient(90deg,#86efac,#34d399)}
.mara-hd-pct.is-cta .n{
  font-size:15px;font-weight:700;color:#fff;line-height:1.2;
  background:rgba(96,165,250,.22);border:1px solid rgba(96,165,250,.4);
  padding:8px 12px;border-radius:999px;display:inline-block;
  text-shadow:none
}
.mara-hd-pct.is-over .n{color:#86efac}
.mara-hd-glass.is-click{cursor:pointer}
.mara-hd-lab .mara-hd-link,
.mara-hd-lab a.mara-hd-link{
  color:#93c5fd;text-decoration:none;margin-left:8px;font-weight:600
}
.mara-hd-slogan{
  margin-top:10px;font-size:12px;color:rgba(226,232,240,.72);
  font-style:italic;letter-spacing:.04em;
  text-shadow:0 1px 8px rgba(0,0,0,.45);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;text-overflow:ellipsis;max-width:100%;
  line-height:1.45;max-height:2.9em;word-break:break-all
}

.mara-body{padding:14px 14px 24px;margin-top:-10px;position:relative;z-index:2}
.mara-sec{margin-bottom:16px}
.mara-sec-h{display:flex;align-items:center;justify-content:space-between;padding:0 4px 10px}
.mara-sec-h h3{font-size:13px;font-weight:700;color:var(--ink2);margin:0}
.mara-sec-h .link{border:0;background:none;color:var(--mara);font-size:12px;cursor:pointer;font-family:inherit;padding:0}

.mara-card{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.mara-goal-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mara-goal{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px}
.mara-goal.wide{grid-column:1/-1}
.mara-goal .k{font-size:11px;color:var(--mut);letter-spacing:.06em}
.mara-goal .v{font-size:20px;font-weight:800;margin-top:6px;font-variant-numeric:tabular-nums;color:var(--ink)}
.mara-goal .v em{font-style:normal;font-size:13px;color:var(--mut);font-weight:600}
.mara-goal .s{font-size:12px;color:var(--mut);margin-top:4px}
.mara-goal .ok{color:var(--ok)}.mara-goal .gap{color:#fbbf24}
.mara-pb-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:8px;font-size:12px;color:var(--ink2)}
.mara-pb-row .arrow{color:var(--mara)}
.mara-tag{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;font-size:11px;font-weight:600}
.mara-tag.ok{background:rgba(52,211,153,.15);color:#34d399}
.mara-tag.todo{background:rgba(251,191,36,.12);color:#fbbf24}

.mara-next{display:flex;gap:12px;align-items:center;padding:14px}
.mara-next .ico{width:44px;height:44px;border-radius:12px;background:var(--mara-bg);color:var(--mara);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.mara-next .t{font-size:15px;font-weight:700;color:var(--ink)}
.mara-next .d{font-size:12px;color:var(--mut);margin-top:3px}
.mara-next .cd{margin-left:auto;text-align:right;flex-shrink:0}
.mara-next .cd .n{font-size:18px;font-weight:800;color:#93c5fd}
.mara-next .cd .l{font-size:10px;color:var(--mut)}

.mara-badge-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mara-badge-row.mara-badge-pb{margin-top:8px}
.mara-badge{min-width:0;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px 8px;text-align:center}
.mara-badge.on{
  border-color:rgba(96,165,250,.85);
  background:linear-gradient(180deg,rgba(59,130,246,.42),rgba(30,64,175,.28));
  box-shadow:0 0 0 1px rgba(147,197,253,.35),0 8px 20px rgba(37,99,235,.35)
}
.mara-badge .ico{font-size:18px;color:var(--mut2);margin-bottom:6px}
.mara-badge.on .ico{color:#bfdbfe;text-shadow:0 0 12px rgba(96,165,250,.9)}
.mara-badge .n{font-size:11px;color:var(--ink2);font-weight:600}
.mara-badge.on .n{color:#fff}
.mara-badge .s{font-size:10px;color:var(--mut2);margin-top:2px}
.mara-badge.on .s{color:#93c5fd}

.mara-year{padding:12px 14px 8px;display:flex;flex-direction:column;gap:4px;border-bottom:1px solid var(--border)}
.mara-year .y{font-size:13px;font-weight:700;color:var(--mara);letter-spacing:.08em}
.mara-year .stat{font-size:11px;color:var(--mut);font-weight:400;line-height:1.45;word-break:break-all}
.mara-year-card{margin-bottom:12px;border-radius:16px}
.mara-row{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-top:1px solid var(--border)}
.mara-row:first-of-type{border-top:0}
.mara-year + .mara-row{border-top:0}
.mara-row.clickable{cursor:pointer}
.mara-row .cat{font-size:10px;font-weight:700;padding:3px 7px;border-radius:6px;flex-shrink:0;margin-top:2px}
.mara-row .cat.full{background:rgba(59,130,246,.18);color:#93c5fd}
.mara-row .cat.half{background:rgba(96,165,250,.12);color:#bfdbfe}
.mara-row .cat.fun{background:rgba(251,191,36,.12);color:#fbbf24}
.mara-row .main{flex:1;min-width:0}
.mara-row .top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.mara-row .name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink);min-width:0;flex:1}
.mara-row .date{font-size:12px;color:#93c5fd;margin-top:4px;font-weight:600;letter-spacing:.02em}
.mara-row .meta{font-size:11px;color:var(--mut);margin-top:4px;line-height:1.6}
.mara-row .meta2{font-size:10px;color:var(--mut2);margin-top:3px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mara-tag{
  display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:999px;
  font-size:10px;font-weight:700;line-height:18px;vertical-align:middle
}
.mara-tag.ok{background:rgba(16,185,129,.18);color:#34d399}
.mara-tag.bad{background:rgba(239,68,68,.18);color:#f87171}
.mara-tag.mut{background:rgba(148,163,184,.16);color:#94a3b8}
.mara-tag.info{background:rgba(59,130,246,.18);color:#93c5fd}
.mara-row .time{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;flex-shrink:0;color:var(--ink);letter-spacing:.02em}
.mara-row .pb{font-size:10px;color:#fde68a;font-weight:700;margin-left:4px}
.mara-row .time.mut{color:var(--mut);font-size:12px;font-weight:500}
.mara-row .acts{display:flex;gap:8px;margin-top:10px;justify-content:flex-end}
.mara-act{
  flex:0 0 auto;height:30px;padding:0 12px;border-radius:8px;font-size:12px;font-weight:600;
  cursor:pointer;font-family:inherit;line-height:28px
}
.mara-act.edit{
  border:1px solid rgba(96,165,250,.45);background:rgba(59,130,246,.14);color:#93c5fd
}
.mara-act.edit:active{background:rgba(59,130,246,.28)}
.mara-act.del{
  border:1px solid rgba(248,113,113,.45);background:rgba(248,113,113,.12);color:#fca5a5
}
.mara-act.del:active{background:rgba(248,113,113,.24)}

.mara-list-top{padding:12px 14px 8px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.mara-list-top h2{font-size:18px;font-weight:800;color:var(--ink);margin:0;line-height:1.2}
.mara-list-top .cnt{font-size:12px;color:var(--mut);display:block;margin-top:2px}
.mara-list-top .link{border:0;background:0;color:var(--mara);font-size:13px;cursor:pointer;font-family:inherit}
.mara-list-top .lt-l{display:flex;align-items:center;gap:8px;min-width:0}
.mara-back{
  width:34px;height:34px;border-radius:10px;border:1px solid var(--border);
  background:rgba(255,255,255,.05);color:var(--ink2);font-size:20px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;line-height:1
}
.mara-back:active{background:rgba(255,255,255,.1)}
.mara-list-top .lt-r{display:flex;align-items:center;gap:8px;flex-shrink:0}
.mara-btn-export{
  height:34px;padding:0 12px;border-radius:10px;flex-shrink:0;text-decoration:none;cursor:pointer;
  border:1px solid rgba(96,165,250,.45);background:rgba(59,130,246,.14);color:#93c5fd;
  font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:5px;
  font-family:inherit;box-sizing:border-box
}
.mara-btn-export:active{transform:scale(.97);opacity:.9}
.mara-btn-add{
  height:34px;padding:0 12px;border-radius:10px;border:0;flex-shrink:0;
  background:linear-gradient(135deg,#60a5fa,#1d4ed8);color:#fff;font-size:13px;font-weight:700;
  cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:5px;
  box-shadow:0 6px 16px rgba(37,99,235,.35)
}
.mara-btn-add:active{transform:scale(.97)}
.mara-sec-h .sec-acts{display:flex;align-items:center;gap:14px}

.mara-tbar{display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px;position:sticky;top:0;z-index:5;background:rgba(2,6,23,.92);backdrop-filter:blur(8px)}
.mara-tbar .search{flex:1 1 100%;height:38px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.05);color:#fff;padding:0 12px;font-size:13px;outline:0}
.mara-tbar .filters{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;width:100%}
.mara-tbar .filters select{
  height:34px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.05);
  color:var(--ink2);font-size:12px;padding:0 8px;outline:0;-webkit-appearance:none;appearance:none
}
.mara-tbar .chips{display:flex;flex-wrap:wrap;gap:8px;width:100%}
.mara-tbar .chip{height:34px;padding:0 12px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--mut);font-size:12px;cursor:pointer}
.mara-tbar .chip.on{background:var(--mara-bg);color:var(--mara);border-color:rgba(96,165,250,.35)}

.mara-form{padding:4px 16px 28px}
.mara-block{margin-bottom:14px;padding:12px 12px 4px;border:1px solid var(--border);border-radius:14px;background:rgba(15,23,42,.55)}
.mara-block-h{font-size:12px;font-weight:700;color:#93c5fd;letter-spacing:.06em;margin-bottom:10px}
.mara-field{margin-bottom:12px}
.mara-field label{
  display:flex; align-items:center; gap:4px;
  font-size:12px; color:#93c5fd; margin-bottom:6px;
  line-height:18px; min-height:18px;
}
.mara-field label .req{
  font-style:normal; font-weight:700; color:#f87171;
  font-size:14px; line-height:18px; height:18px;
  display:inline-flex; align-items:center; justify-content:center;
  transform:translateY(1px); margin:0;
}
.mara-field input,.mara-field select,.mara-field textarea{
  width:100%;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);color:#fff;font-size:14px;padding:0 12px;outline:0;font-family:inherit;
  -webkit-appearance:none;appearance:none;
}
.mara-field textarea{height:80px;padding:10px 12px;resize:none}
.mara-field.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mara-field.row2 > div label{display:block;font-size:12px;color:#93c5fd;margin-bottom:6px}
.mara-field label .hint{font-style:normal;font-weight:400;color:var(--mut2);margin-left:6px;font-size:11px}
.mara-field-hint{
  margin:-4px 0 14px; padding:0 2px;
  font-size:11px; line-height:1.45; color:var(--mut);
}
.mara-field-hint.bad{ color:#fbbf24; }
.mara-hms{display:flex;align-items:center;gap:6px}
.mara-hms select{
  flex:1;min-width:0;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);color:#fff;font-size:14px;padding:0 8px;outline:0;
  -webkit-appearance:none;appearance:none;text-align:center
}
.mara-hms .sep{color:var(--mut);font-weight:700;flex-shrink:0}
.mara-seg{display:flex;gap:8px}
.mara-seg button{flex:1;height:40px;border-radius:10px;border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--mut);font-size:13px;cursor:pointer}
.mara-seg button.on{background:var(--mara-bg);color:var(--mara);border-color:rgba(96,165,250,.4);font-weight:700}
.mara-btn-save{width:100%;height:48px;border:0;border-radius:14px;margin-top:8px;background:linear-gradient(135deg,#60a5fa,#1d4ed8);color:#fff;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 10px 26px rgba(56,189,248,.28)}
.mara-btn-del{width:100%;height:44px;border:1px solid rgba(248,113,113,.35);border-radius:14px;margin-top:10px;background:rgba(248,113,113,.08);color:#f87171;font-size:14px;cursor:pointer}
.mara-empty{padding:40px 20px;text-align:center;color:var(--mut)}
.mara-empty i{font-size:36px;color:var(--mara);opacity:.5;margin-bottom:10px;display:block}

.mara-screen{display:none}
.mara-screen.active{display:block}

/* 兼容旧占位（可删） */
.mara-placeholder {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:80px 30px; text-align:center;
}
.mara-ico {
  width:72px; height:72px; border-radius:20px;
  background:linear-gradient(135deg,rgba(96,165,250,.18),rgba(59,130,246,.12));
  border:1px solid rgba(96,165,250,.28);
  display:flex; align-items:center; justify-content:center; margin-bottom:22px;
}
.mara-ico i { color:var(--mara); font-size:32px; }
.mara-title {
  font-size:24px; font-weight:600; color:var(--ink); letter-spacing:.1em;
  font-family:"H5Xingkai","STXingkai","华文行楷","Xingkai SC","KaiTi","楷体",serif;
}
.mara-desc {
  font-size:14px; color:var(--mara); margin-top:10px; letter-spacing:.15em; font-weight:600;
}
.mara-sub {
  font-size:12px; color:var(--mut); margin-top:18px; line-height:1.7; max-width:260px;
}

/* ===== 我的页面 ===== */
/* 与首页 / 越野跑共用 dt-header-ridge 山景；昵称叠在图上 */
.profile-header.dt-header-ridge {
  --ridge-bg: var(--bg);
  height: var(--ridge-hd-h);
  min-height: var(--ridge-hd-h);
  padding-bottom:8px;
}
.profile-header .dt-top { margin-bottom:0; }
.profile-header .profile-greet { margin-top:0; }
.profile-greet {
  position:relative; z-index:3; margin-top:0; padding:0 2px;
}
.profile-greet-ring {
  display:flex; align-items:center; gap:12px;
}
.profile-av-ring {
  flex-shrink:0; padding:3px; border-radius:50%;
  background:rgba(255,255,255,.35);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.profile-av-ring.marathon {
  background:#60a5fa;
  box-shadow:0 0 0 3px rgba(59,130,246,.22), 0 6px 18px rgba(0,0,0,.35);
}
.profile-av-ring.trail {
  background:#34d399;
  box-shadow:0 0 0 3px rgba(16,185,129,.2), 0 6px 18px rgba(0,0,0,.35);
}
.profile-av-ring.both {
  background:linear-gradient(135deg, #34d399, #60a5fa);
  box-shadow:0 0 0 3px rgba(125,211,252,.18), 0 6px 18px rgba(0,0,0,.35);
}
.profile-av {
  width:52px; height:52px; border-radius:50%; display:block;
  object-fit:cover; background:#0b1f18;
  border:2px solid rgba(2,6,23,.55);
  box-sizing:border-box;
}
.profile-av-ph {
  display:flex; align-items:center; justify-content:center;
  color:rgba(226,232,240,.85); font-size:18px; font-weight:700;
  background:#334155;
}
.profile-info { min-width:0; flex:1; }
.profile-name {
  font-size:20px; font-weight:700; color:#fff; letter-spacing:.04em; line-height:1.15;
  font-family:inherit; word-break:break-all;
  text-shadow:0 2px 16px rgba(0,0,0,.55);
}
.profile-camp {
  margin-top:5px; font-size:12px; font-weight:600;
  color:rgba(255,255,255,.92);
  text-shadow:0 1px 8px rgba(0,0,0,.45);
}
.profile-meta {
  margin-top:5px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding-top:0; border-top:0;
}
.pm-itra {
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; color:rgba(226,232,240,.85);
  text-shadow:0 1px 8px rgba(0,0,0,.5);
  cursor:pointer; -webkit-tap-highlight-color:transparent; user-select:none;
}
.pm-itra .itra-copy-ico { color:#6ee7b7; opacity:1; font-size:11px; margin-left:1px; }
.pm-itra .itra-copy-txt { color:#6ee7b7; font-size:10px; font-weight:600; }
.pm-itra:active { opacity:.8; }
.pm-itra.copied { color:#86efac; }
.pm-itra.copied .itra-copy-ico,
.pm-itra.copied .itra-copy-txt { color:#86efac; opacity:1; }
.pm-sep {
  width:1px; height:12px; background:rgba(226,232,240,.35);
}
.pm-account {
  font-size:12px; color:rgba(226,232,240,.92);
  text-shadow:0 1px 8px rgba(0,0,0,.5);
}

.profile-section { padding:0 14px; margin-top:8px; }
.profile-section-title {
  font-size:12px; color:var(--mut); letter-spacing:.1em; padding:0 4px 10px;
}
.profile-menu {
  background:var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden;
}
.profile-menu-item {
  display:flex; align-items:center; gap:14px; padding:15px 16px; cursor:pointer;
  text-decoration:none; color:var(--ink); transition:background .2s;
}
.profile-menu-item + .profile-menu-item { border-top:1px solid var(--border); }
.profile-menu-item:active { background:rgba(255,255,255,.04); }
.profile-menu-item > i:first-child {
  width:34px; height:34px; border-radius:10px; flex-shrink:0;
  background:var(--trail-bg); color:var(--trail);
  display:flex; align-items:center; justify-content:center; font-size:15px;
}
.profile-menu-item.logout > i:first-child { background:rgba(248,113,113,.12); color:var(--red); }
.pmi-txt { flex:1; font-size:15px; font-weight:500; }
.pmi-val { color:var(--mut); font-size:13px; flex-shrink:0; margin-right:2px; }
.pmi-arrow { color:var(--mut2); font-size:16px; flex-shrink:0; }
.profile-menu-item.logout { color:var(--red); }
.profile-menu-item.logout .pmi-txt { color:var(--red); }

/* 我的页 · 02 贴底：退出停靠在 Tab 上方 */
#screen-profile{
  display:flex; flex-direction:column;
}
#screen-profile .profile-grow{ flex:1; min-height:12px; }
#screen-profile .profile-admin-jumps{
  margin:8px 14px 0; flex-shrink:0;
  display:flex; gap:10px;
}
#screen-profile .profile-admin-jump{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 12px; border-radius:14px;
  background:var(--card); border:1px solid var(--border);
  color:var(--text); font-size:14px; font-weight:600;
  text-decoration:none; cursor:pointer;
}
#screen-profile .profile-admin-jump:active{ opacity:.8; background:rgba(255,255,255,.04); }
#screen-profile .profile-admin-jump.alone{ flex:1 1 100%; }
#screen-profile .profile-admin-jump i{ font-size:15px; color:var(--trail); }
#screen-profile .profile-logout-dock{
  margin:8px 14px 10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 16px; border-radius:14px;
  background:var(--card); border:1px solid rgba(248,113,113,.22);
  color:var(--red); font-size:15px; font-weight:600;
  text-decoration:none; cursor:pointer;
}
#screen-profile .profile-logout-dock:active{ opacity:.75; background:rgba(248,113,113,.08); }
#screen-profile .profile-logout-dock i{ font-size:15px; }

/* ===== 修改密码弹层 ===== */
.pwd-mask {
  position:fixed; inset:0; z-index:20000; background:rgba(2,6,23,.72);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; visibility:hidden; transition:.25s; backdrop-filter:blur(2px);
}
.pwd-mask.show { opacity:1; visibility:visible; }
.pwd-sheet {
  width:100%; max-width:480px;
  background:linear-gradient(180deg,#0f172a 0%,#020617 100%);
  border-radius:22px 22px 0 0; transform:translateY(28px);
  transition:.3s cubic-bezier(.22,1,.36,1);
  box-shadow:0 -12px 48px rgba(0,0,0,.45);
  border:1px solid var(--border); border-bottom:none;
}
.pwd-mask.show .pwd-sheet { transform:translateY(0); }
.pwd-sheet-hd {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 18px 12px; border-bottom:1px solid var(--line);
}
.pwd-sheet-title { font-size:17px; font-weight:800; color:var(--ink); }
.pwd-sheet-close {
  width:32px; height:32px; border-radius:10px; background:rgba(255,255,255,.06);
  color:var(--mut); display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.pwd-sheet-bd { padding:16px 18px 28px; }
.pwd-field { margin-bottom:14px; }
.pwd-field label { display:block; font-size:12px; color:#93c5fd; margin-bottom:8px; padding-left:2px; }
.pwd-field input {
  width:100%; height:48px; border-radius:14px; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06); color:#fff; font-size:15px; padding:0 16px; outline:none;
}
.pwd-field input:focus { border-color:#38bdf8; background:rgba(56,189,248,.08); }
.pwd-field input::placeholder { color:#475569; }
.pwd-err { display:none; color:#f87171; font-size:12px; margin:0 0 12px; }
.pwd-err.show { display:block; }
.pwd-submit {
  width:100%; height:48px; border:none; border-radius:14px; cursor:pointer;
  background:linear-gradient(135deg,#38bdf8,#1d4ed8); color:#fff;
  font-size:15px; font-weight:700; font-family:inherit;
  box-shadow:0 10px 26px rgba(56,189,248,.3);
  box-sizing:border-box; margin:0; padding:0;
}
.pwd-submit:active { transform:scale(.98); }
.pwd-submit:disabled { opacity:.65; cursor:not-allowed; }
.camp-target-list {
  display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; width:100%;
}
.camp-target-list .camp-tg {
  width:100%; padding:10px 8px; border-radius:12px;
  border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04);
  color:#94a3b8; font-size:13px; font-weight:600; cursor:pointer;
  box-sizing:border-box; font-family:inherit;
}
.camp-target-list .camp-tg.is-both {
  grid-column: 1 / -1;
}
.camp-target-list .camp-tg.on {
  color:#fff; border-color:transparent;
  background:linear-gradient(135deg,#38bdf8,#2563eb);
  box-shadow:0 6px 16px rgba(37,99,235,.3);
}

/* ===== Detail (Trail) · 层峦路标 ===== */
#screen-trail { background:var(--bg); }
.dt-header {
  background:radial-gradient(120% 90% at 50% -20%, #059669 0%, #020617 60%);
  padding:48px 22px 70px; color:#fff; position:relative; overflow:hidden;
}
.dt-header-ridge {
  --ridge-bg: #020617;
  /* 首页 / 越野跑 / 我的 共用固定头高，切页山景不跳动 */
  --ridge-hd-h: 195px;
  background-color:#0b1f18;
  background-image:url("img/trail-header-bg.jpg");
  background-position:center 40%;
  background-size:cover;
  background-repeat:no-repeat;
  padding:16px 16px 8px;
  height: var(--ridge-hd-h);
  min-height: var(--ridge-hd-h);
  box-sizing:border-box;
  border-radius:0 0 28px 28px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.dt-header-ridge > .ridge-gap {
  flex:1 1 0;
  min-height:8px;
  position:relative;
  z-index:2;
  pointer-events:none;
}
.dt-header-ridge > .ridge-block {
  flex-shrink:0;
  position:relative;
  z-index:3;
}
/* 现代浏览器优先加载更小的 WebP */
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
  .dt-header-ridge {
    background-image: image-set(
      url("img/trail-header-bg.webp") type("image/webp"),
      url("img/trail-header-bg.jpg") type("image/jpeg")
    );
  }
}
.dt-header-ridge .dt-fog {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    /* 顶/底柔雾，去掉硬切 */
    linear-gradient(180deg,
      rgba(7,17,14,.58) 0%,
      rgba(7,17,14,.18) 26%,
      rgba(7,17,14,.06) 46%,
      rgba(7,17,14,.38) 70%,
      rgba(7,17,14,.92) 88%,
      var(--ridge-bg) 100%),
    /* 左右轻微晕影，削弱锐边 */
    radial-gradient(120% 90% at 50% 40%, transparent 42%, rgba(7,17,14,.35) 100%),
    /* 底缘圆润溶入 */
    radial-gradient(90% 55% at 50% 100%, var(--ridge-bg) 0%, transparent 72%);
}
.dt-header-ridge .dt-top {
  position:relative; z-index:3; display:flex; align-items:flex-start; gap:10px; margin-bottom:0; flex-shrink:0;
  margin-top:-5px;
}
.dt-back-pin {
  display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 11px 0 9px;
  border-radius:8px; text-decoration:none; cursor:pointer; flex-shrink:0;
  background:rgba(2,6,23,.55); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  font-size:11px; letter-spacing:.08em; color:#f8fafc;
}
.dt-back-pin .dot {
  width:5px; height:5px; border-radius:50%; background:#86efac; box-shadow:0 0 6px #86efac;
}
.dt-back-pin:active { transform:scale(.96); opacity:.9; }
.dt-header-ridge .dt-titles { flex:1; min-width:0; padding-top:1px; }
.dt-header-ridge .dt-title {
  font-size:22px; font-weight:400; text-align:left; position:relative; z-index:1;
  font-family:"H5Xingkai","STXingkai","华文行楷","Xingkai SC","KaiTi","楷体",serif;
  letter-spacing:.1em; line-height:1.15;
  margin:0; padding:0; text-indent:0;
  text-shadow:0 2px 12px rgba(0,0,0,.55);
}
.dt-header-ridge .dt-en {
  font-size:12px; color:rgba(236,253,245,.88); text-align:left; margin:4px 0 0; padding:0 0 0 5px;
  position:relative; z-index:1;
  font-family:"STKaiti","华文楷体","KaiTi","楷体","Songti SC",Georgia,"Times New Roman",serif;
  font-style:normal; font-weight:400; letter-spacing:.06em; text-transform:none;
  white-space:nowrap; text-indent:0;
  text-shadow:0 1px 8px rgba(0,0,0,.45);
}
/* 山景上只叠综合表现分这一块（无边框，轻雾底） */
.dt-header-ridge .dt-glass {
  position:relative; z-index:3; margin-top:0; padding:4px 4px 0;
  border-radius:0; border:none; box-shadow:none;
  background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
  flex-shrink:0;
}
.dt-header-ridge .dt-glass .score-row { display:flex; flex-direction:column; gap:6px; }
.dt-header-ridge .dt-glass .score-line { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.dt-header-ridge .dt-glass .score-line-top { min-height:40px; }
.dt-header-ridge .dt-glass .score-line-sub { min-height:18px; align-items:flex-start; }
.dt-header-ridge .dt-glass .score-sub-left {
  flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:3px;
}
.dt-header-ridge .dt-glass .score-main { display:flex; align-items:center; gap:10px; min-width:0; flex:1; }
.dt-header-ridge .dt-glass .score { font-size:36px; font-weight:800; color:#fff; line-height:1; text-shadow:0 2px 14px rgba(0,0,0,.55); font-variant-numeric:tabular-nums; letter-spacing:-0.02em; }
.dt-header-ridge .dt-glass .score-unit { font-size:13px; color:rgba(226,232,240,.85); margin-top:10px; margin-left:-2px; flex-shrink:0; text-shadow:0 1px 8px rgba(0,0,0,.45); }
.dt-header-ridge .dt-glass .sync-btn {
  width:32px; height:32px; border:1px solid rgba(167,243,208,.4); border-radius:10px;
  background:rgba(16,185,129,.18); color:#6ee7b7;
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; flex-shrink:0;
}
.dt-header-ridge .dt-glass .sync-btn i { font-size:13px; }
.dt-header-ridge .dt-glass .sync-btn:active { transform:scale(.95); }
.dt-header-ridge .dt-glass .sync-btn.busy { opacity:.6; pointer-events:none; }
.dt-header-ridge .dt-glass .sync-btn.busy i { animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.dt-header-ridge .dt-glass .sync-meta { font-size:11px; color:rgba(226,232,240,.85); min-height:16px; text-shadow:0 1px 8px rgba(0,0,0,.5); }
.dt-header-ridge .dt-glass .sync-meta.warn { color:#fbbf24; }
.dt-header-ridge .dt-glass .sync-meta.ok { color:#86efac; }
.dt-header-ridge .dt-glass .level {
  display:inline-flex; align-items:center; gap:5px; margin-left:0;
  background:rgba(16,185,129,.18); color:#a7f3d0; font-size:12px; font-weight:600;
  padding:5px 12px; border-radius:12px; border:1px solid rgba(167,243,208,.4);
  cursor:pointer; user-select:none; flex-shrink:0; height:32px; box-sizing:border-box;
}
.dt-header-ridge .dt-glass .level i { font-size:11px; opacity:.75; }
.dt-header-ridge .dt-glass .level:active { transform:scale(.97); }
.dt-header-ridge .dt-glass .score-side {
  display:flex; flex-direction:column; align-items:flex-end; justify-content:center; flex-shrink:0;
}
.dt-header-ridge .dt-glass .beat-pct {
  display:flex; flex-direction:column; align-items:flex-end; justify-content:center;
  gap:1px; flex-shrink:0; text-align:right; line-height:1.15; padding-top:1px;
  text-shadow:0 1px 8px rgba(0,0,0,.55);
}
.dt-header-ridge .dt-glass .beat-num {
  font-size:11px; font-weight:600; color:rgba(253,230,138,.92); letter-spacing:.02em; white-space:nowrap;
}
.dt-header-ridge .dt-glass .beat-num b {
  font-size:15px; font-weight:800; color:#fde68a; margin:0 1px;
  font-variant-numeric:tabular-nums; letter-spacing:-0.01em;
}
.dt-header-ridge .dt-glass .beat-sub {
  font-size:10px; font-weight:500; color:rgba(253,230,138,.72); letter-spacing:.02em; white-space:nowrap;
}
.dt-header-ridge .dt-glass .score-label {
  color:rgba(226,232,240,.82); font-size:11px; line-height:1.35; text-shadow:0 1px 8px rgba(0,0,0,.5);
  margin-top:0;
}
.dt-back {
  position:absolute; top:46px; left:18px; width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px; cursor:pointer; z-index:2;
}
.dt-title {
  font-size:24px; font-weight:500; text-align:center; position:relative; z-index:1;
  font-family:"H5Xingkai","STXingkai","华文行楷","Xingkai SC","KaiTi","楷体",serif;
  letter-spacing:.18em;
}
.dt-en {
  font-size:12px; color:#6ee7b7; text-align:center; margin-top:6px; position:relative; z-index:1;
  font-family:"STKaiti","华文楷体","KaiTi","楷体","Songti SC",serif;
  font-weight:500; letter-spacing:.28em;
}
.dt-hero {
  margin:-20px 16px 14px; background:var(--card); border-radius:20px; padding:18px 16px 16px;
  box-shadow:0 12px 32px rgba(0,0,0,.35); border:1px solid var(--border); position:relative; z-index:1;
}
.dt-hero .score-row { display:flex; flex-direction:column; gap:6px; }
.dt-hero .score-main { display:flex; align-items:center; gap:10px; min-width:0; }
.dt-hero .score { font-size:44px; font-weight:800; color:var(--ink); line-height:1; }
.dt-hero .score-unit { font-size:13px; color:var(--mut); margin-top:14px; margin-left:-4px; flex-shrink:0; }
.dt-hero .sync-btn { width:32px; height:32px; border:1px solid rgba(52,211,153,.35); border-radius:10px; background:var(--trail-bg); color:var(--trail); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; flex-shrink:0; }
.dt-hero .sync-btn i { font-size:13px; }
.dt-hero .sync-btn:active { transform:scale(.95); }
.dt-hero .sync-btn.busy { opacity:.6; pointer-events:none; }
.dt-hero .sync-btn.busy i { animation:spin 1s linear infinite; }
.dt-hero .sync-meta { font-size:11px; color:var(--mut); min-height:16px; }
.dt-hero .sync-meta.warn { color:#fbbf24; }
.dt-hero .sync-meta.ok { color:var(--green); }
.dt-hero .level { display:inline-flex; align-items:center; gap:5px; margin-left:auto; background:var(--trail-bg); color:var(--trail); font-size:12px; font-weight:600; padding:5px 12px; border-radius:12px; border:1px solid rgba(52,211,153,.35); cursor:pointer; user-select:none; flex-shrink:0; height:32px; box-sizing:border-box; }
.dt-hero .level i { font-size:11px; opacity:.7; }
.dt-hero .level:active { transform:scale(.97); }

/* ===== ITRA PI 等级阶梯弹层 ===== */
.pi-mask { position:fixed; inset:0; z-index:1000; background:rgba(2,6,23,.72); display:flex; align-items:flex-end; justify-content:center; opacity:0; visibility:hidden; transition:.25s; backdrop-filter:blur(2px); }
.pi-mask.show { opacity:1; visibility:visible; }
.pi-sheet { width:100%; max-width:480px; max-height:90vh; background:linear-gradient(180deg,#0f172a 0%,#020617 100%); border-radius:22px 22px 0 0; display:flex; flex-direction:column; transform:translateY(28px); transition:.3s cubic-bezier(.22,1,.36,1); box-shadow:0 -12px 48px rgba(0,0,0,.45); border:1px solid var(--border); border-bottom:none; }
.pi-mask.show .pi-sheet { transform:translateY(0); }
.pi-sheet-hd { display:flex; align-items:flex-start; justify-content:space-between; padding:18px 18px 12px; border-bottom:1px solid var(--line); flex-shrink:0; }
.pi-sheet-title { font-size:17px; font-weight:800; color:var(--ink); letter-spacing:.2px; }
.pi-sheet-sub { font-size:11px; color:var(--mut2); margin-top:3px; }
.pi-sheet-close { width:32px; height:32px; border-radius:10px; background:rgba(255,255,255,.06); color:var(--mut); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.pi-sheet-bd { overflow-y:auto; -webkit-overflow-scrolling:touch; padding:14px 14px 32px; }
.pi-me { display:flex; align-items:center; gap:12px; padding:14px 14px; border-radius:16px; background:var(--trail-bg); border:1px solid rgba(52,211,153,.3); margin-bottom:12px; }
.pi-me-ico { width:40px; height:40px; border-radius:12px; background:linear-gradient(135deg,#10b981,#059669); color:#fff; display:flex; align-items:center; justify-content:center; font-size:16px; box-shadow:0 6px 16px rgba(16,185,129,.35); }
.pi-me-txt { flex:1; min-width:0; }
.pi-me-l { font-size:11px; color:var(--trail); }
.pi-me-v { font-size:15px; font-weight:800; color:#a7f3d0; margin-top:2px; }
.pi-me-score { font-size:18px; font-weight:800; color:var(--trail); white-space:nowrap; }
.pi-desc { font-size:12px; color:var(--mut); line-height:1.65; margin-bottom:12px; padding:0 2px; }
.pi-ladder { display:flex; flex-direction:column; gap:6px; }
.pi-group { font-size:11px; font-weight:700; color:var(--mut2); letter-spacing:.4px; margin:10px 2px 2px; text-transform:none; }
.pi-group:first-child { margin-top:0; }
.pi-row { display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:14px; background:rgba(255,255,255,.03); border:1px solid var(--line); transition:.2s; position:relative; overflow:hidden; }
.pi-row.done { border-color:rgba(52,211,153,.25); background:rgba(16,185,129,.08); }
.pi-row.current { border-color:rgba(52,211,153,.55); background:rgba(16,185,129,.14); box-shadow:0 6px 20px rgba(16,185,129,.18); transform:scale(1.01); }
.pi-row.locked { opacity:.55; filter:grayscale(.35); background:rgba(255,255,255,.02); }
.pi-dot { width:30px; height:30px; border-radius:10px; color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; box-shadow:0 3px 10px rgba(0,0,0,.25); }
.pi-row.locked .pi-dot { background:#475569 !important; color:#94a3b8; box-shadow:none; }
.pi-row-main { flex:1; min-width:0; }
.pi-row-name { display:flex; align-items:baseline; gap:6px; }
.pi-row-name b { font-size:14px; font-weight:700; color:var(--ink); }
.pi-row-name span { font-size:11px; color:var(--mut2); }
.pi-row.current .pi-row-name b { color:#a7f3d0; }
.pi-row-th { font-size:11px; color:var(--mut); margin-top:3px; }
.pi-tag { font-size:10px; font-weight:700; padding:4px 8px; border-radius:8px; flex-shrink:0; white-space:nowrap; }
.pi-tag { background:rgba(16,185,129,.18); color:var(--trail); }
.pi-tag.done { background:rgba(16,185,129,.1); color:var(--green); }
.pi-tag.lock { background:rgba(255,255,255,.06); color:var(--mut2); }
.pi-foot { font-size:11px; color:var(--mut2); margin-top:14px; line-height:1.6; text-align:center; }

/* ITRA 官网等级色 */
.c-novice { background:#1f6b3a; }
.c-int4 { background:#9fd36a; }
.c-int3 { background:#6fbf4a; }
.c-int2 { background:#3fa03a; }
.c-int1 { background:#1f7a32; }
.c-adv4 { background:#f2d84a; color:#3f3f0a !important; }
.c-adv3 { background:#d9b82e; }
.c-adv2 { background:#b8941c; }
.c-adv1 { background:#8a6f14; }
.c-exp4 { background:#f0b27a; }
.c-exp3 { background:#e08a4a; }
.c-exp2 { background:#c45f2a; }
.c-exp1 { background:#7a3a18; }
.c-eli4 { background:#e86b6b; }
.c-eli3 { background:#d13f3f; }
.c-eli2 { background:#a61f2a; }
.c-eli1 { background:#6b1020; }
.dt-hero .score-label { color:var(--mut); font-size:12px; margin-top:6px; }
.dt-hero .divider { height:1px; background:var(--line); margin:18px 0; }
.dt-hero .mini-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.dt-hero .mini-stats .m .n { font-size:18px; font-weight:700; color:var(--ink); }
.dt-hero .mini-stats .m .l { font-size:11px; color:var(--mut); margin-top:2px; }
/* 用户数据概览：参赛统计 + 单场最佳 */
.dt-hero .overview-panel {
  margin-top:2px; padding:14px 8px 12px; border-radius:16px;
  background:rgba(255,255,255,.03); border:1px solid var(--border);
}
.dt-hero .overview-panel .ov-row {
  display:grid; grid-template-columns:repeat(4,1fr); gap:6px;
}
.dt-hero .overview-panel .ov-row + .ov-row {
  margin-top:12px; padding-top:12px; border-top:1px dashed var(--line);
}
.dt-hero .overview-panel .m { text-align:center; min-width:0; }
.dt-hero .overview-panel .m .n {
  font-size:17px; font-weight:800; color:var(--ink); line-height:1.15;
  display:flex; align-items:baseline; justify-content:center; gap:1px;
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
.dt-hero .overview-panel .m .n em { font-style:normal; font-size:10px; font-weight:600; color:var(--mut); margin-left:1px; }
.dt-hero .overview-panel .m .l { font-size:10px; color:var(--mut); margin-top:4px; line-height:1.3; }
/* ITRA 耐力分布 0-6 */
.itra-dist { display:flex; flex-wrap:wrap; gap:8px 4px; margin-top:16px; padding-top:14px; border-top:1px dashed var(--line); }
.itra-dist .id-lbl { width:100%; font-size:11px; color:var(--mut); margin-bottom:4px; }
.itra-dist .id-item { flex:1 1 calc(100% / 7 - 4px); min-width:0; text-align:center; }
.itra-dist .id-badge { color:#fff; padding:4px 2px; border-radius:6px; font-size:10px; font-weight:700; display:block; line-height:1.3; }
.itra-dist .id-badge.l0 { background:#6b7280; }
.itra-dist .id-badge.l1 { background:#84cc16; }
.itra-dist .id-badge.l2 { background:#eab308; }
.itra-dist .id-badge.l3 { background:#06b6d4; }
.itra-dist .id-badge.l4 { background:#a855f7; }
.itra-dist .id-badge.l5 { background:#f97316; }
.itra-dist .id-badge.l6 { background:#dc2626; }
.itra-dist .id-cnt { font-size:12px; font-weight:700; color:var(--ink2); margin-top:5px; }
.dt-section { padding:18px 16px 0; }
.dt-section .st { position:relative; display:flex; align-items:center; gap:11px; padding:14px 16px; margin-bottom:14px; cursor:pointer; user-select:none;
  background:var(--card); border:1px solid var(--border); border-radius:15px;
  box-shadow:0 4px 16px rgba(0,0,0,.2); transition:all .25s ease; }
.dt-section .st:active { transform:scale(.99); }
.dt-section .st .icowrap { width:34px; height:34px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  background:var(--trail-bg); border:1px solid rgba(52,211,153,.25); }
.dt-section .st .icowrap i { font-size:15px; color:var(--trail); }
.dt-section .st .stxt { flex:1; }
.dt-section .st .stxt .t1 { font-size:15px; font-weight:700; color:var(--ink); letter-spacing:.3px; }
.dt-section .st .stxt .t2 { font-size:11px; color:var(--mut2); margin-top:2px; }
.dt-section .st .chev { width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .3s cubic-bezier(.4,0,.2,1); }
.dt-section .st .chev i { font-size:12px; color:var(--mut); transition:transform .3s cubic-bezier(.4,0,.2,1); }
.dt-section.collapsed .st .chev i { transform:rotate(-90deg); }
.dt-section .st-body { overflow:hidden; transition:max-height .4s cubic-bezier(.4,0,.2,1), opacity .3s ease; max-height:5000px; opacity:1; }
.dt-section.collapsed .st-body { max-height:0; opacity:0; }
.dt-section:not(.collapsed) .st { border-color:rgba(52,211,153,.35); box-shadow:0 4px 16px rgba(16,185,129,.12); }
.dt-section:not(.collapsed) .st .chev { background:var(--trail-d); }
.dt-section:not(.collapsed) .st .chev i { color:#fff; }


.race-item { background:var(--card); border-radius:16px; padding:14px 14px 12px; margin-bottom:12px; box-shadow:0 4px 16px rgba(0,0,0,.2); border:1px solid var(--border); transition:transform .2s; animation:rise .4s ease both; }
.race-item:active { transform:scale(.99); }
.race-item .ri-top { display:flex; align-items:center; gap:8px; }
.race-item .ri-badge { font-size:10px; font-weight:600; padding:3px 8px; border-radius:6px; flex-shrink:0; }
.ri-badge.finish { background:rgba(22,163,74,.18); color:#4ade80; }
.ri-badge.dnf { background:rgba(239,68,68,.18); color:#f87171; }
.ri-badge.pending { background:rgba(245,158,11,.18); color:#fbbf24; }
.race-item .ri-name { flex:1; min-width:0; font-size:14px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.race-item .ri-name:active { color:var(--trail); }
.race-item .ri-date { font-size:11px; color:var(--mut2); flex-shrink:0; font-variant-numeric:tabular-nums; cursor:pointer; }
.race-item .ri-date:active { color:var(--trail); }
.race-item .ri-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:12px; background:rgba(16,185,129,.08); border:1px solid rgba(52,211,153,.22); border-radius:12px; overflow:hidden; }
.race-item .ri-strip .c { text-align:center; padding:10px 4px 9px; position:relative; min-width:0; }
.race-item .ri-strip .c + .c::before { content:""; position:absolute; left:0; top:18%; bottom:18%; width:1px; background:rgba(52,211,153,.18); }
.race-item .ri-strip .c .n { font-size:15px; font-weight:800; color:var(--ink); line-height:1.15; display:flex; align-items:baseline; justify-content:center; gap:1px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.race-item .ri-strip .c .n.pending-score { font-size:13px; font-weight:700; color:#fbbf24; }
.race-item .ri-strip .c.best .n { color:var(--trail); }
.race-item .ri-strip .c .n .crown { font-size:10px; color:var(--gold); margin-left:2px; }
.race-item .ri-strip .c .n em { font-style:normal; font-size:10px; font-weight:600; color:var(--mut); margin-left:1px; }
.race-item .ri-strip .c .l { font-size:10px; color:var(--trail); margin-top:4px; font-weight:600; }
.race-item .ri-foot { display:flex; align-items:center; gap:10px; margin-top:10px; }
.race-item .ri-itra { font-size:10px; font-weight:700; color:#fff; background:linear-gradient(135deg,#16a34a,#15803d); padding:4px 9px; border-radius:6px; letter-spacing:.2px; flex-shrink:0; }
.race-item .ri-itra.l0 { background:linear-gradient(135deg,#6b7280,#4b5563); }
.race-item .ri-itra.l1 { background:linear-gradient(135deg,#84cc16,#65a30d); }
.race-item .ri-itra.l2 { background:linear-gradient(135deg,#eab308,#ca8a04); }
.race-item .ri-itra.l3 { background:linear-gradient(135deg,#06b6d4,#0891b2); }
.race-item .ri-itra.l4 { background:linear-gradient(135deg,#a855f7,#9333ea); }
.race-item .ri-itra.l5 { background:linear-gradient(135deg,#f97316,#ea580c); }
.race-item .ri-itra.l6 { background:linear-gradient(135deg,#dc2626,#b91c1c); }
.race-item .ri-itra.zero { background:linear-gradient(135deg,#94a3b8,#64748b); }
.race-item .ri-itra i { margin-right:3px; }
.race-item .ri-ranks { margin-left:auto; display:flex; align-items:center; gap:12px; }
.race-item .ri-rank { font-size:11px; color:var(--mut); white-space:nowrap; }
.race-item .ri-rank b { color:var(--ink2); font-weight:700; margin-left:3px; font-variant-numeric:tabular-nums; }

.dt-empty { text-align:center; color:var(--mut2); font-size:13px; padding:40px 0; }

/* ===== Score Source (PI calc) ===== */
.src-card { margin:0 0 4px; background:var(--card); border-radius:18px; padding:18px 16px 8px; box-shadow:0 4px 16px rgba(0,0,0,.2); border:1px solid var(--border); animation:rise .4s ease both; }
.src-head { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.src-head .ico { width:30px; height:30px; border-radius:9px; background:var(--trail-bg); color:var(--trail); display:flex; align-items:center; justify-content:center; font-size:14px; border:1px solid rgba(52,211,153,.25); }
.src-head .t { font-size:15px; font-weight:700; color:var(--ink); }
.src-head .tag { margin-left:auto; font-size:11px; color:var(--trail); background:var(--trail-bg); padding:4px 10px; border-radius:10px; font-weight:600; border:1px solid rgba(52,211,153,.25); }
.src-final { display:flex; align-items:baseline; gap:6px; padding:6px 0 12px; }
.src-final .big { font-size:30px; font-weight:800; color:var(--ink); line-height:1; }
.src-final .u { font-size:12px; color:var(--mut); }
.src-final .vs { margin-left:auto; text-align:right; }
.src-final .vs .l { font-size:10px; color:var(--mut2); }
.src-final .vs .n { font-size:13px; color:var(--mut); font-weight:600; }
.src-final .vs .n.ok { color:var(--green); }
.src-final .vs .n.diff { color:#fbbf24; }
.src-delay {
  display:flex; align-items:flex-start; gap:6px;
  margin:-2px 0 12px; padding:8px 10px; border-radius:10px;
  background:rgba(251,191,36,.1); border:1px solid rgba(251,191,36,.22);
  color:#fcd34d; font-size:11px; line-height:1.5;
}
.src-delay i { margin-top:2px; flex-shrink:0; opacity:.9; }
.src-bar-wrap { margin:4px 0 14px; }
.src-bar { display:flex; gap:4px; height:8px; border-radius:5px; overflow:hidden; background:rgba(255,255,255,.08); }
.src-bar .seg { height:100%; border-radius:2px; }
.src-bar-legend { display:flex; justify-content:space-between; font-size:10px; color:var(--mut2); margin-top:6px; }
.src-item { padding:13px 2px; border-top:1px solid var(--line); }
.src-item .si-top { display:flex; align-items:center; gap:8px; }
.src-item .rk { width:24px; height:24px; border-radius:7px; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff; }
.rk.r1{background:#f59e0b;} .rk.r2{background:#94a3b8;} .rk.r3{background:#b45309;} .rk.r4{background:#64748b;} .rk.r5{background:#475569;}
.src-item .si-name { font-size:13px; font-weight:600; color:var(--ink); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.src-item .si-name:active { color:var(--trail); }
.src-item .si-ws { font-size:12px; font-weight:600; color:var(--mut); white-space:nowrap; cursor:pointer; }
.src-item .si-ws:active { color:var(--trail); }
.src-item .si-mid { display:flex; gap:5px; align-items:center; margin-top:8px; padding-left:32px; flex-wrap:nowrap; overflow:hidden; }
.src-chip { font-size:10px; padding:3px 7px; border-radius:8px; background:rgba(255,255,255,.04); color:var(--mut); border:1px solid var(--line); white-space:nowrap; flex-shrink:1; min-width:0; }
.src-chip.score { background:var(--trail-bg); color:var(--trail); border-color:rgba(52,211,153,.35); font-weight:700; flex-shrink:0; }
.src-chip.mo { background:rgba(255,255,255,.03); color:var(--mut); border-color:var(--line); }
.src-chip.w { background:rgba(59,130,246,.12); color:#93c5fd; border-color:rgba(96,165,250,.3); }
/* coefficient matrix */
.src-coef { margin:10px 0 0 32px; }
.src-coef .clbl { font-size:10px; color:var(--mut2); margin-bottom:5px; display:flex; align-items:center; gap:5px; }
.src-coef .clbl i { font-size:9px; color:var(--trail); }
.src-coef .grid { display:grid; grid-template-columns:repeat(5,1fr); gap:5px; }
.src-coef .cell { text-align:center; border-radius:8px; padding:6px 2px 5px; background:rgba(255,255,255,.04); border:1px solid var(--line); }
.src-coef .cell .p { font-size:9px; color:var(--mut2); font-weight:600; }
.src-coef .cell .v { font-size:12px; font-weight:700; color:var(--ink2); margin-top:2px; }
.src-coef .cell.dash .v { color:var(--mut2); font-weight:400; }
.src-coef .cell.active { background:var(--trail-bg); border-color:rgba(52,211,153,.45); }
.src-coef .cell.active .p { color:var(--trail); }
.src-coef .cell.active .v { color:var(--trail); }
/* simulated score row */
.src-sim { display:flex; align-items:center; gap:8px; margin:10px 0 0 32px; padding:9px 12px; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid var(--line); }
.src-sim .sl { font-size:11px; color:var(--mut); }
.src-sim .sv { font-size:16px; font-weight:800; color:var(--ink2); margin-left:auto; }
.src-sim.best { background:rgba(22,163,74,.15); border-color:rgba(52,211,153,.3); }
.src-sim.best .sl { color:var(--green); font-weight:600; }
.src-sim.best .sv { color:var(--green); }
.src-sim .crown { font-size:13px; color:var(--gold); }

.src-foot { padding:12px 2px 4px; color:var(--mut2); font-size:11px; line-height:1.6; border-top:1px solid var(--line); margin-top:4px; }
.src-foot i { color:var(--trail); margin-right:4px; }

/* ===== Want to improve (我想涨分) ===== */
.grow-card { margin:0 0 4px; background:var(--card); border-radius:18px; padding:18px 16px; box-shadow:0 4px 16px rgba(0,0,0,.2); border:1px solid var(--border); }
.grow-target { display:flex; align-items:center; gap:14px; padding-bottom:14px; border-bottom:1px dashed var(--line); }
.grow-target .from { text-align:center; }
.grow-target .from .n { font-size:24px; font-weight:800; color:var(--mut); }
.grow-target .from .l { font-size:10px; color:var(--mut2); margin-top:2px; }
.grow-target .arrow { font-size:18px; color:var(--mut2); }
.grow-target .to { text-align:center; }
.grow-target .to .n { font-size:24px; font-weight:800; color:var(--trail); }
.grow-target .to .l { font-size:10px; color:var(--trail); margin-top:2px; }
.grow-target .gap { margin-left:auto; text-align:right; }
.grow-target .gap .n { font-size:18px; font-weight:700; color:var(--gold); }
.grow-target .gap .l { font-size:10px; color:var(--mut2); margin-top:2px; }
.grow-tip { padding:12px 0 4px; color:var(--mut); font-size:12px; line-height:1.6; }
.grow-tip i { color:var(--trail); margin-right:5px; }
.grow-item { padding:13px 2px; border-top:1px solid var(--line); }
.grow-item .gi-top { display:flex; align-items:center; gap:8px; }
.grow-item .gi-no { width:24px; height:24px; border-radius:7px; background:rgba(245,158,11,.18); color:#fbbf24; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.grow-item .gi-t { font-size:13px; font-weight:600; color:var(--ink); flex:1; }
.grow-item .gi-proj { font-size:14px; font-weight:700; color:var(--green); }
.grow-item .gi-desc { font-size:12px; color:var(--mut); line-height:1.6; margin-top:8px; padding-left:32px; }
.grow-item .gi-desc b { color:var(--ink2); }
.grow-item .gi-desc .up { color:var(--green); font-weight:600; }
.grow-item .gi-desc .dn { color:var(--red); }
.grow-foot { padding:12px 2px 4px; color:var(--mut2); font-size:11px; line-height:1.6; border-top:1px solid var(--line); margin-top:4px; }
.grow-foot i { color:var(--gold); margin-right:4px; }
.grow-form { padding:14px 0 4px; }
.grow-form .gf { width:100%; }
.grow-form .gf label { font-size:11px; color:var(--mut); display:block; margin-bottom:6px; }
.grow-form .gf-row { display:flex; gap:10px; align-items:stretch; }
.grow-form .gf-row input { flex:1; height:44px; border:1.5px solid var(--line); border-radius:11px; font-size:18px; font-weight:700; color:var(--ink); padding:0 14px; outline:none; background:rgba(255,255,255,.04); min-width:0; }
.grow-form .gf-row input:focus { border-color:var(--trail-d); }
.grow-form .gf .cur { font-size:11px; color:var(--mut2); margin-top:7px; }
.grow-btn { height:44px; border:none; border-radius:11px; background:linear-gradient(135deg,#10b981,#059669); color:#fff; font-size:14px; font-weight:600; padding:0 18px; cursor:pointer; white-space:nowrap; }
.grow-btn:active { transform:scale(.97); }
.grow-err { color:var(--red); font-size:12px; padding:10px 0 0; display:none; }
.grow-err.show { display:block; }
.grow-result { display:none; padding:6px 0 0; }
.grow-result.show { display:block; animation:rise .35s ease both; }
.grow-result.unreachable .grow-need { background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.28); }
.grow-result.unreachable .grow-need .gn-ico { background:#d97706; }
.grow-result.unreachable .grow-need .gn-txt .l,
.grow-result.unreachable .grow-need .gn-txt .v { color:#fbbf24; }
.grow-result.unreachable .grow-summary .gs-line .need,
.grow-result.unreachable .grow-summary .gs-line .target { color:#fbbf24; }
.grow-need { display:flex; align-items:center; gap:10px; padding:14px 14px; border-radius:13px; background:rgba(16,185,129,.12); border:1px solid rgba(52,211,153,.25); margin-top:8px; }
.grow-need .gn-ico { width:38px; height:38px; border-radius:11px; background:var(--trail-d); color:#fff; display:flex; align-items:center; justify-content:center; font-size:17px; }
.grow-need .gn-txt { flex:1; }
.grow-need .gn-txt .l { font-size:11px; color:var(--trail); }
.grow-need .gn-txt .v { font-size:22px; font-weight:800; color:var(--trail); line-height:1.1; }
.grow-need .gn-up { font-size:13px; font-weight:700; color:var(--green); }
.grow-summary {
  margin-top:12px; padding:14px 14px 13px; border-radius:13px;
  background:linear-gradient(135deg, rgba(245,158,11,.18), rgba(16,185,129,.14));
  border:1px solid rgba(251,191,36,.38);
  box-shadow:0 6px 18px rgba(245,158,11,.08);
}
.grow-summary .gs-main {
  font-size:14px; color:#fde68a; line-height:1.75; font-weight:600;
}
.grow-summary .gs-main .gs-line { display:block; }
.grow-summary .gs-main .gs-line + .gs-line { margin-top:4px; }
.grow-summary .gs-main b.need {
  color:#fbbf24; font-weight:800; font-size:18px;
  text-shadow:0 0 18px rgba(251,191,36,.35);
}
.grow-summary .gs-main b.target {
  color:#34d399; font-weight:800; font-size:18px;
  text-shadow:0 0 18px rgba(52,211,153,.35);
}
.grow-summary .gs-cheer {
  margin-top:8px; padding-top:8px;
  border-top:1px dashed rgba(251,191,36,.28);
  font-size:14px; color:#86efac; line-height:1.6; font-weight:600;
  font-family:inherit;
  letter-spacing:.02em;
}
.grow-summary .gs-cheer i { margin-right:5px; color:#fbbf24; font-family:FontAwesome; }
.grow-analysis {
  margin-top:12px; padding:14px 14px 12px; border-radius:13px;
  background:rgba(255,255,255,.03); border:1px solid var(--line);
}
.grow-analysis .ga-hd {
  display:flex; align-items:center; gap:7px;
  font-size:13px; font-weight:700; color:var(--ink); margin-bottom:10px;
}
.grow-analysis .ga-hd i { color:var(--gold); }
.grow-analysis .ga-tip {
  margin:0 0 10px; padding:0;
  font-size:12px; color:var(--mut); line-height:1.65; border:none;
}
.grow-detail { font-size:12px; color:var(--mut); line-height:1.75; padding:0; }
.grow-detail .gd-p { margin:0 0 8px; }
.grow-detail .gd-p:last-child { margin-bottom:0; }
.grow-detail b { color:var(--ink2); }
.grow-detail b.up { color:var(--green); }

/* ===== Race result sheet ===== */
.race-mask {
  position:fixed; inset:0; z-index:1200; background:rgba(2,6,23,.72); display:none;
  align-items:flex-end; justify-content:center; backdrop-filter:blur(4px);
}
.race-mask.show { display:flex; }
.race-sheet {
  width:100%; max-width:480px; max-height:88vh; background:linear-gradient(180deg,#0f172a 0%,#020617 100%);
  border-radius:22px 22px 0 0; display:flex; flex-direction:column;
  transform:translateY(28px); transition:.3s cubic-bezier(.22,1,.36,1);
  box-shadow:0 -12px 48px rgba(0,0,0,.45); border:1px solid var(--border); border-bottom:none;
}
.race-mask.show .race-sheet { transform:translateY(0); }
.race-sheet-hd {
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:18px 18px 14px; border-bottom:1px solid var(--line); flex-shrink:0;
}
.race-sheet-kicker { font-size:11px; color:var(--trail); font-weight:600; letter-spacing:.08em; }
.race-sheet-title {
  font-size:16px; font-weight:700; color:var(--ink); line-height:1.45; margin-top:4px;
  word-break:break-word; white-space:normal;
}
.race-sheet-close {
  width:32px; height:32px; border-radius:10px; background:rgba(255,255,255,.06); color:var(--mut);
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
}
.race-sheet-bd { overflow-y:auto; -webkit-overflow-scrolling:touch; padding:0 0 28px; flex:1; min-height:0; }
.race-result-table { width:100%; border-collapse:collapse; table-layout:fixed; }
.race-result-table thead th {
  position:sticky; top:0; z-index:1; background:#0f172a; color:var(--mut2); font-size:11px; font-weight:600;
  text-align:left; padding:12px 8px; border-bottom:1px solid var(--line);
}
.race-result-table thead th:nth-child(1) { padding-left:14px; width:14%; }
.race-result-table thead th:nth-child(2) { width:30%; }
.race-result-table thead th:nth-child(3) { width:24%; }
.race-result-table thead th:nth-child(4) { width:12%; text-align:center; }
.race-result-table thead th:nth-child(5) { padding-right:14px; width:20%; text-align:right; }
.race-result-table tbody td {
  font-size:12px; color:var(--ink2); padding:11px 6px; border-bottom:1px solid rgba(148,163,184,.08);
  vertical-align:middle; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.race-result-table tbody td.rank { padding-left:14px; font-weight:700; color:var(--gold); font-variant-numeric:tabular-nums; }
.race-result-table tbody td.runner { color:var(--ink); font-weight:600; }
.race-result-table tbody td.time { font-variant-numeric:tabular-nums; }
.race-result-table tbody td.gender { text-align:center; }
.race-result-table tbody td.gender.g-m { color:#7dd3fc; }
.race-result-table tbody td.gender.g-f { color:#f9a8d4; }
.race-result-table tbody td.score { padding-right:14px; text-align:right; font-weight:700; color:var(--trail); font-variant-numeric:tabular-nums; }
.race-result-status { text-align:center; font-size:12px; color:var(--mut2); padding:14px 16px 4px; }
.race-result-status.loading { color:var(--trail); }
.race-result-status.empty, .race-result-status.error { color:var(--mut); }

/* ===== 我的生涯 · Night Trail ===== */
.career-block-hd{display:flex;align-items:center;gap:8px;margin:4px 0 10px;padding:0 2px}
.career-block-hd .dot{width:6px;height:6px;border-radius:50%;background:var(--trail);box-shadow:0 0 8px rgba(52,211,153,.6)}
.career-block-hd .dot.gold{background:var(--gold);box-shadow:0 0 8px rgba(245,158,11,.55)}
.career-block-hd .bt{font-size:13px;font-weight:700;letter-spacing:.04em}
.career-block-hd .bs{font-size:11px;color:var(--mut2);margin-left:auto}
.career-card { margin:0 0 14px; background:var(--card); border-radius:16px; padding:14px; box-shadow:0 4px 16px rgba(0,0,0,.2); border:1px solid var(--border); }
.career-toolbar { display:flex; justify-content:flex-end; min-height:22px; margin-bottom:8px; }
.career-future { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--mut); cursor:pointer; user-select:none; }
.career-future input { width:14px; height:14px; accent-color:var(--gold); cursor:pointer; }
.career-future span { color:var(--mut); }
.career-loading, .career-empty { text-align:center; padding:36px 12px; color:var(--mut2); font-size:13px; }
.career-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:12px; }
.career-stats .cs { text-align:center; padding:10px 4px; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.04); }
.career-stats .cs .n { font-size:18px; font-weight:700; line-height:1.2; color:var(--ink); font-variant-numeric:tabular-nums; }
.career-stats .cs .l { font-size:10px; color:var(--mut2); margin-top:4px; }
.career-stats .cs.cur .n { color:var(--trail); }
.career-stats .cs.max .n { color:#60a5fa; }
.career-stats .cs.min .n { color:#fbbf24; }
.career-chart-box { height:220px; position:relative; }
.career-span { margin-top:10px; font-size:11px; color:var(--mut2); text-align:center; }
.career-tip { margin-top:6px; font-size:11px; color:var(--mut); text-align:center; }

/* ===== 高光时刻 ===== */
.hl-loading, .hl-empty { text-align:center; padding:28px 12px; color:var(--mut2); font-size:13px; }
.hl-list { display:flex; flex-direction:column; gap:8px; }
.hl-row {
  display:grid;
  grid-template-columns:92px minmax(0,1fr) 68px;
  align-items:center; gap:8px;
  padding:11px 10px 11px 12px; border-radius:12px;
  position:relative; overflow:hidden;
  border:1px solid transparent;
}
.hl-row::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:12px 0 0 12px;
}
.hl-date-wrap { display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:0; }
.hl-date {
  font-size:12px; color:var(--mut); font-variant-numeric:tabular-nums;
  white-space:nowrap; letter-spacing:-.01em;
}
.hl-path {
  display:flex; align-items:center; gap:5px; font-variant-numeric:tabular-nums;
  white-space:nowrap; overflow:hidden; min-width:0;
}
.hl-path .old { font-size:13px; color:var(--mut2); }
.hl-path .arr { font-size:10px; color:var(--mut2); opacity:.7; }
.hl-path .new { font-size:15px; font-weight:700; color:var(--ink); }
.hl-diff {
  position:relative;
  display:flex; flex-direction:column; align-items:flex-end; justify-content:center;
  gap:5px; min-height:36px; padding-right:1px; white-space:nowrap;
}
.hl-comet {
  position:relative; display:block; height:2px; border-radius:99px;
  width:10px; align-self:stretch; margin-left:auto;
  background:linear-gradient(90deg,transparent 0%,currentColor 78%);
  opacity:.55; pointer-events:none;
}
.hl-comet::after {
  content:''; position:absolute; right:-1px; top:50%;
  width:5px; height:5px; border-radius:50%;
  background:currentColor; transform:translate(30%,-50%);
  box-shadow:0 0 6px currentColor, 0 0 12px currentColor;
}
.hl-num {
  position:relative; z-index:1;
  font-variant-numeric:tabular-nums;
  font-weight:800; font-size:18px; letter-spacing:-.03em; line-height:1;
}
.hl-num::before {
  content:''; position:absolute; left:50%; top:50%;
  width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:50%;
  background:radial-gradient(circle,currentColor 0%,transparent 72%);
  opacity:.18; z-index:-1; pointer-events:none;
}
/* 1–5 */
.hl-row.t1 { background:rgba(100,116,139,.08); border-color:rgba(148,163,184,.10); }
.hl-row.t1::before { background:#64748b; }
.hl-row.t1 .hl-diff { color:#94a3b8; }
.hl-row.t1 .hl-comet { width:7px; opacity:.3; }
.hl-row.t1 .hl-num { font-size:15px; }
.hl-row.t1 .hl-num::before { opacity:.06; width:14px; height:14px; margin:-7px 0 0 -7px; }

/* 6–10 */
.hl-row.t2 { background:rgba(45,212,191,.08); border-color:rgba(45,212,191,.16); }
.hl-row.t2::before { background:#2dd4bf; }
.hl-row.t2 .hl-diff { color:#5eead4; }
.hl-row.t2 .hl-comet { width:11px; opacity:.42; }
.hl-row.t2 .hl-num { font-size:16px; }
.hl-row.t2 .hl-num::before { opacity:.12; width:18px; height:18px; margin:-9px 0 0 -9px; }

/* 11–20 */
.hl-row.t3 { background:rgba(52,211,153,.09); border-color:rgba(52,211,153,.18); }
.hl-row.t3::before { background:#34d399; }
.hl-row.t3 .hl-diff { color:#6ee7b7; }
.hl-row.t3 .hl-comet { width:15px; opacity:.52; }
.hl-row.t3 .hl-num::before { opacity:.16; }

/* 21–30 */
.hl-row.t4 { background:rgba(16,185,129,.14); border-color:rgba(52,211,153,.28); }
.hl-row.t4::before { background:#10b981; width:4px; }
.hl-row.t4 .hl-diff { color:#34d399; }
.hl-row.t4 .hl-comet { width:20px; opacity:.65; }
.hl-row.t4 .hl-path .new { color:#ecfdf5; }
.hl-row.t4 .hl-num::before { opacity:.22; width:26px; height:26px; margin:-13px 0 0 -13px; }

/* 31–40 */
.hl-row.t5 { background:rgba(56,189,248,.12); border-color:rgba(56,189,248,.30); }
.hl-row.t5::before { background:#38bdf8; width:4px; }
.hl-row.t5 .hl-diff { color:#38bdf8; }
.hl-row.t5 .hl-comet { width:26px; opacity:.8; }
.hl-row.t5 .hl-comet::after { width:6px; height:6px; box-shadow:0 0 8px currentColor,0 0 16px currentColor; }
.hl-row.t5 .hl-num { font-size:19px; }
.hl-row.t5 .hl-path .new { color:#e0f2fe; }
.hl-row.t5 .hl-num::before { opacity:.28; width:30px; height:30px; margin:-15px 0 0 -15px; }

/* 41–50 */
.hl-row.t6 {
  background:linear-gradient(105deg,rgba(245,158,11,.14),rgba(251,191,36,.07));
  border-color:rgba(245,158,11,.34);
  box-shadow:0 0 0 1px rgba(245,158,11,.06), 0 6px 16px rgba(245,158,11,.06);
}
.hl-row.t6::before { background:#f59e0b; width:4px; }
.hl-row.t6 .hl-diff { color:#fbbf24; }
.hl-row.t6 .hl-comet { width:30px; opacity:.88; height:2.5px; }
.hl-row.t6 .hl-comet::after {
  width:6px; height:6px;
  box-shadow:0 0 9px currentColor,0 0 18px currentColor,0 0 24px rgba(251,191,36,.3);
}
.hl-row.t6 .hl-num { font-size:19px; text-shadow:0 0 14px rgba(251,191,36,.25); }
.hl-row.t6 .hl-path .new { color:#fef3c7; }
.hl-row.t6 .hl-date { color:#fde68a; }
.hl-row.t6 .hl-num::before { opacity:.3; width:32px; height:32px; margin:-16px 0 0 -16px; }

/* 50–100 */ → wait, comment should be 51-100
/* 51–100 */
.hl-row.t7 {
  background:linear-gradient(105deg,rgba(249,115,22,.16),rgba(245,158,11,.12));
  border-color:rgba(249,115,22,.42);
  box-shadow:0 0 20px rgba(249,115,22,.14), inset 0 0 0 1px rgba(255,255,255,.04);
}
.hl-row.t7::before { background:linear-gradient(180deg,#fb923c,#f97316); width:5px; }
.hl-row.t7 .hl-diff { color:#fb923c; }
.hl-row.t7 .hl-comet {
  width:36px; opacity:.96; height:2.5px;
  animation:hlCometSweep 2.4s ease-in-out infinite;
}
.hl-row.t7 .hl-comet::after {
  width:7px; height:7px;
  box-shadow:0 0 11px currentColor,0 0 22px currentColor,0 0 30px rgba(249,115,22,.35);
  animation:hlCometHead 2.4s ease-in-out infinite;
}
.hl-row.t7 .hl-num { font-size:21px; text-shadow:0 0 18px rgba(249,115,22,.35); }
.hl-row.t7 .hl-path .new { color:#ffedd5; }
.hl-row.t7 .hl-date { color:#fed7aa; }
.hl-row.t7 .hl-num::before {
  opacity:.38; width:36px; height:36px; margin:-18px 0 0 -18px;
  animation:hlBloomPulse 2.4s ease-in-out infinite;
}

/* 100+ */
.hl-row.t8 {
  background:linear-gradient(105deg,rgba(239,68,68,.2),rgba(249,115,22,.14));
  border-color:rgba(248,113,113,.5);
  box-shadow:0 0 28px rgba(239,68,68,.22), inset 0 0 0 1px rgba(255,255,255,.05);
}
.hl-row.t8::before { background:linear-gradient(180deg,#f97316,#ef4444); width:5px; }
.hl-row.t8 .hl-diff { color:#f87171; }
.hl-row.t8 .hl-comet {
  width:42px; opacity:1; height:3px;
  animation:hlCometSweep 2s ease-in-out infinite;
}
.hl-row.t8 .hl-comet::after {
  width:9px; height:9px;
  box-shadow:0 0 14px currentColor,0 0 28px currentColor,0 0 40px rgba(239,68,68,.45);
  animation:hlCometHead 2s ease-in-out infinite;
}
.hl-row.t8 .hl-num { font-size:23px; text-shadow:0 0 22px rgba(239,68,68,.45); }
.hl-row.t8 .hl-path .new { color:#fff1f2; }
.hl-row.t8 .hl-date { color:#fecaca; }
.hl-row.t8 .hl-num::before {
  opacity:.48; width:44px; height:44px; margin:-22px 0 0 -22px;
  animation:hlBloomPulse 2s ease-in-out infinite;
}
@keyframes hlCometSweep {
  0%,100% { filter:brightness(1); transform:translateX(0); }
  50% { filter:brightness(1.25); transform:translateX(1px); }
}
@keyframes hlCometHead {
  0%,100% { transform:translate(30%,-50%) scale(1); }
  50% { transform:translate(30%,-50%) scale(1.15); }
}
@keyframes hlBloomPulse {
  0%,100% { opacity:.36; transform:scale(1); }
  50% { opacity:.5; transform:scale(1.08); }
}
.hl-row.is-best { outline:1px solid rgba(251,191,36,.55); }
.hl-best {
  font-size:9px; font-weight:700; letter-spacing:.02em; line-height:1;
  padding:3px 6px; border-radius:4px; white-space:nowrap;
  color:#1c1917; background:linear-gradient(90deg,#fbbf24,#f59e0b);
}
/* 初入 / 重回：日期下标签即可，右侧不硬塞装饰 */
.hl-milestone {
  font-size:10px; font-weight:700; letter-spacing:.06em; line-height:1;
  padding:4px 8px; border-radius:999px; white-space:nowrap;
}
.hl-diff-ms { min-height:32px; justify-content:center; }
.hl-diff-ms .hl-num { font-size:16px; font-weight:700; letter-spacing:-.02em; }
.hl-row.m-start .hl-diff-ms { color:#a5b4fc; }
.hl-row.m-return .hl-diff-ms { color:#d8b4fe; }
.hl-row.m-start {
  background:rgba(99,102,241,.08); border-color:rgba(129,140,248,.22);
}
.hl-row.m-start::before { background:#818cf8; width:3px; }
.hl-row.m-start .hl-milestone {
  color:#c7d2fe; background:rgba(99,102,241,.2);
  border:1px solid rgba(165,180,252,.28);
}
.hl-row.m-start .hl-path .new { color:#e0e7ff; }
.hl-row.m-start .hl-date { color:#a5b4fc; }

.hl-row.m-return {
  background:rgba(168,85,247,.08); border-color:rgba(192,132,252,.22);
}
.hl-row.m-return::before { background:#c084fc; width:3px; }
.hl-row.m-return .hl-milestone {
  color:#e9d5ff; background:rgba(168,85,247,.2);
  border:1px solid rgba(216,180,254,.28);
}
.hl-row.m-return .hl-path .new { color:#f3e8ff; }
.hl-row.m-return .hl-date { color:#d8b4fe; }

.hl-foot {
  margin-top:10px; text-align:center; font-size:12px; color:var(--mut2); padding:4px 0 2px;
}
.hl-sentinel { height:1px; width:100%; pointer-events:none; }

/* ===== 涨分庆祝 · Magma Core ===== */
.su-mask{
  position:fixed; inset:0; z-index:12000; display:none;
  background:#1a0505; overflow:hidden;
}
.su-mask.show{ display:block; animation:suFade .35s both; }
@keyframes suFade{ from{opacity:0} to{opacity:1} }
.su-canvas{ position:absolute; inset:0; width:100%; height:100%; }
.su-glow{
  position:absolute; left:50%; top:42%; width:min(280px,70vw); height:min(280px,70vw);
  margin:calc(min(280px,70vw) / -2); border-radius:50%; pointer-events:none; z-index:1;
  background:radial-gradient(circle,rgba(249,115,22,.45),transparent 65%);
  animation:suGlow 2s ease-in-out infinite;
}
@keyframes suGlow{ 0%,100%{transform:scale(1);opacity:.7} 50%{transform:scale(1.15);opacity:1} }
.su-ui{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:0;
  padding:28px 20px max(28px, env(safe-area-inset-bottom)); text-align:center;
  pointer-events:none;
}
.su-ui > *{ pointer-events:auto; }
.su-brand{
  font-family: "H5Xingkai","STXingkai","华文行楷","Xingkai SC","KaiTi","楷体",serif;
  font-size:26px; letter-spacing:.28em; font-weight:400; color:#fdba74;
  text-shadow:0 0 18px rgba(251,146,60,.45);
  margin-bottom:2px;
}
.su-badge{
  position:relative; margin-top:2px; margin-bottom:-22px; width:140px; height:168px;
  display:flex; align-items:center; justify-content:center;
  animation:suBadgeIn .85s cubic-bezier(.16,1.4,.3,1) both;
}
.su-badge-aura{
  position:absolute; left:50%; top:55%; width:160px; height:160px; margin:-80px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(249,115,22,.5) 0%, rgba(234,88,12,.18) 42%, transparent 70%);
  animation:suAura 1.6s ease-in-out infinite;
}
.su-badge-svg{
  position:relative; z-index:1; width:132px; height:165px;
  filter:drop-shadow(0 0 16px rgba(249,115,22,.7));
  animation:suBadgeFloat 1.6s ease-in-out infinite;
}
.su-rocket-body{
  transform-origin:80px 100px;
  animation:suRocketLift 1.6s ease-in-out infinite;
}
.su-rf{ transform-origin:80px 172px; animation:suFlameSoft .32s ease-in-out infinite alternate; }
.su-rf.rf2{ animation-duration:.26s; }.su-rf.rf3{ animation-duration:.28s; animation-delay:.05s; }
.su-rf.rf4{ animation-duration:.22s; }
.su-trail,.su-wake{ animation:suTrailPulse 1.1s ease-in-out infinite; transform-origin:80px 196px; }
.su-speed{ animation:suSpeedFlash .9s ease-in-out infinite; }
.su-e{ animation:suEmberSoft 1.3s ease-in-out infinite; }
.su-e.e1{ animation-delay:0s; }.su-e.e2{ animation-delay:.1s; }
.su-e.e3{ animation-delay:.2s; }.su-e.e4{ animation-delay:.3s; }
.su-e.e5{ animation-delay:.15s; }.su-e.e6{ animation-delay:.4s; }
.su-title{
  position:absolute; z-index:2; left:50%; top:62%;
  transform:translate(-50%, -50%);
  width:112px; text-align:center;
  font-size:clamp(16px, 4.6vw, 18px); font-weight:900;
  line-height:1.2; letter-spacing:.08em;
  color:#fff7ed;
  text-shadow:
    0 0 8px rgba(124,45,18,.9),
    0 1px 0 #7c2d12,
    0 2px 0 #9a3412,
    0 0 16px rgba(249,115,22,1),
    0 0 28px rgba(234,88,12,.8);
  pointer-events:none;
  animation:suTitlePulse 2s ease-in-out infinite;
}
@keyframes suBadgeIn{
  0%{ transform:translateY(40px) scale(.4); opacity:0; filter:brightness(2.5); }
  65%{ transform:translateY(-8px) scale(1.06); opacity:1; }
  100%{ transform:none; opacity:1; filter:brightness(1); }
}
@keyframes suAura{
  0%,100%{ transform:scale(1); opacity:.7; }
  50%{ transform:scale(1.2); opacity:1; }
}
@keyframes suBadgeFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-7px); }
}
@keyframes suRocketLift{
  0%,100%{ transform:translateY(3px); }
  50%{ transform:translateY(-5px); }
}
@keyframes suFlameSoft{
  from{ transform:scaleY(.8) scaleX(1.12); opacity:.75; }
  to{ transform:scaleY(1.2) scaleX(.9); opacity:1; }
}
@keyframes suTrailPulse{
  0%,100%{ opacity:.4; }
  50%{ opacity:.85; }
}
@keyframes suSpeedFlash{
  0%,100%{ opacity:.25; }
  50%{ opacity:.7; }
}
@keyframes suEmberSoft{
  0%,100%{ opacity:.25; transform:translateY(0); }
  50%{ opacity:1; transform:translateY(-10px); }
}
@keyframes suTitlePulse{
  0%,100%{ transform:translate(-50%, -50%) scale(1); }
  50%{ transform:translate(-50%, -50%) scale(1.04); }
}
.su-date{
  margin-top:4px; font-size:13px; font-weight:800; letter-spacing:.14em;
  color:#fdba74; text-shadow:0 0 12px rgba(249,115,22,.45);
}
.su-score{
  margin:6px 0 0; font-family:"H5Teko", Teko, "Noto Sans SC", sans-serif;
  font-size:clamp(88px, 26vw, 140px); line-height:.85; font-weight:700;
  background:linear-gradient(180deg,#fff7ed,#fdba74 40%,#ea580c 70%,#7c2d12);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 30px rgba(234,88,12,.7));
  animation:suRise .8s cubic-bezier(.2,1.5,.3,1) both;
}
@keyframes suRise{ from{transform:translateY(60px) scale(.5); opacity:0} }
.su-meta{
  margin-top:4px; display:flex; gap:16px; align-items:baseline;
  font-family:"H5Teko", Teko, "Noto Sans SC", sans-serif; font-size:30px;
}
.su-meta span{ color:#9a3412; }
.su-meta b{ color:#fed7aa; text-shadow:0 0 12px #ea580c; font-weight:700; }
.su-gain{
  font-family:inherit;
  margin-top:12px; font-size:14px; font-weight:600; color:#ffedd5; letter-spacing:.02em;
  text-shadow:0 0 16px #f97316;
}
.su-quote{
  font-family: "H5Xingkai","STXingkai","华文行楷","Xingkai SC","KaiTi","楷体",serif;
  margin-top:8px; font-size:15px; font-weight:400; color:#fdba74; line-height:1.65;
  max-width:280px; letter-spacing:.04em;
}
.su-cta{
  margin-top:20px; width:100%; max-width:300px; height:54px; border:0; border-radius:999px;
  cursor:pointer; font:inherit; font-weight:900; font-size:16px; color:#1a0505;
  background:linear-gradient(90deg,#fdba74,#f97316,#ef4444);
  box-shadow:0 0 40px rgba(249,115,22,.55);
}
.su-cta:active{ transform:scale(.98); }

/* ===== H5 注册审核状态页 ===== */
.audit-wrap{
  min-height:100vh; padding:36px 24px max(40px, env(safe-area-inset-bottom));
  display:flex; flex-direction:column; align-items:stretch;
}
.audit-brand{
  font-family:"H5Xingkai","STXingkai","华文行楷","Xingkai SC","KaiTi","楷体",serif;
  font-size:28px; letter-spacing:.28em; color:#7dd3fc; text-align:center; margin-bottom:22px;
}
.audit-badge{
  align-self:center; display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:999px; font-size:14px; font-weight:700;
}
.audit-badge.pending{ background:rgba(251,191,36,.15); color:#fbbf24; }
.audit-badge.rejected{ background:rgba(248,113,113,.15); color:#f87171; }
.audit-desc{ color:#94a3b8; font-size:13px; line-height:1.7; text-align:center; margin:14px 8px 20px; }
.audit-reason{
  background:rgba(248,113,113,.08); border:1px solid rgba(248,113,113,.25);
  border-radius:14px; padding:14px 16px; margin-bottom:16px;
}
.audit-reason-label{ color:#f87171; font-size:12px; margin-bottom:6px; }
.audit-reason-txt{ color:#fecaca; font-size:14px; line-height:1.6; word-break:break-word; }
.audit-card{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:16px; padding:6px 16px; margin-bottom:18px;
}
.audit-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 0; border-bottom:1px solid rgba(148,163,184,.12); font-size:14px;
}
.audit-row:last-child{ border-bottom:0; }
.audit-row span{ color:#64748b; }
.audit-row b{ color:#e2e8f0; font-weight:600; }
.audit-edit{ margin-top:4px; }
.field .inp.disabled{ opacity:.55; }
.audit-history{ margin-top:8px; }
.audit-history-title{ color:#94a3b8; font-size:12px; margin-bottom:10px; letter-spacing:.08em; }
.audit-history-item{
  background:rgba(255,255,255,.04); border-radius:12px; padding:12px 14px; margin-bottom:8px;
}
.ahi-top{ display:flex; justify-content:space-between; font-size:13px; color:#e2e8f0; }
.ahi-top em{ color:#64748b; font-style:normal; font-size:12px; }
.ahi-remark{ margin-top:6px; color:#94a3b8; font-size:12px; line-height:1.55; }
.audit-actions{ display:flex; gap:12px; margin-top:22px; }
.btn-ghost{
  flex:1; height:44px; border-radius:12px; border:1px solid rgba(148,163,184,.28);
  background:transparent; color:#94a3b8; font-size:14px; text-align:center;
  line-height:44px; text-decoration:none; cursor:pointer;
}
.btn-ghost:active{ background:rgba(255,255,255,.06); }

/* ===== 阵营未解锁 · 全页引导态 ===== */
.camp-unlock-hd.dt-header-ridge{
  height:auto;
  min-height:200px;
  padding-bottom:56px;
}
.camp-unlock{
  position:relative;
  z-index:2;
  margin:-36px 16px 24px;
  padding:28px 22px 26px;
  border-radius:22px;
  background:
    linear-gradient(165deg, rgba(15,23,42,.88) 0%, rgba(6,18,14,.92) 100%);
  border:1px solid rgba(52,211,153,.18);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  overflow:hidden;
  animation:rise .45s ease both;
}
.camp-unlock::before{
  content:"";
  position:absolute; inset:-40% -20% auto;
  height:70%;
  background:radial-gradient(ellipse at 50% 0%, rgba(52,211,153,.22), transparent 70%);
  pointer-events:none;
}
.camp-unlock-kicker{
  position:relative;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(110,231,183,.78);
  margin-bottom:10px;
}
.camp-unlock-title{
  position:relative;
  font-family:"H5Xingkai","STXingkai","华文行楷","Xingkai SC","KaiTi","楷体",serif;
  font-size:28px;
  font-weight:400;
  letter-spacing:.14em;
  color:#f8fafc;
  line-height:1.35;
  margin-bottom:12px;
}
.camp-unlock-desc{
  position:relative;
  margin:0 0 22px;
  font-size:13px;
  line-height:1.65;
  color:#94a3b8;
}
.camp-unlock-cta{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:48px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--trail),var(--trail-d));
  color:#fff;
  font-size:15px;
  font-weight:600;
  letter-spacing:.06em;
  text-decoration:none;
  box-shadow:0 10px 26px rgba(16,185,129,.35);
}
.camp-unlock-cta:active{ transform:scale(.98); opacity:.95; }
.camp-unlock-cta i{ font-size:14px; opacity:.9; }

/* 马拉松页锁定态（浅色主题） */
.mara-theme .camp-unlock-hd{
  min-height:168px;
  padding:42px 18px 48px;
  background-color:#1e3a5f;
  background-image:url("img/marathon-header-bg.jpg");
  background-position:center top;
  background-size:cover;
  background-repeat:no-repeat;
  border-radius:0 0 28px 28px;
  color:#fff;
  position:relative;
  overflow:hidden;
}
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
  .mara-theme .camp-unlock-hd {
    background-image: image-set(
      url("img/marathon-header-bg.webp") type("image/webp"),
      url("img/marathon-header-bg.jpg") type("image/jpeg")
    );
  }
}
.mara-theme .camp-unlock-hd::after{
  content:"";
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(11,18,32,.12) 0%,
      rgba(11,18,32,.18) 36%,
      rgba(11,18,32,.88) 88%,
      #0b1220 100%);
}
.mara-theme .camp-unlock-hd .mara-hd-title{
  position:relative; z-index:2;
}
.mara-theme .camp-unlock-hd .mara-hd-en{
  position:relative; z-index:2;
}
.mara-theme .camp-unlock{
  margin-top:-28px;
  background:linear-gradient(165deg, #fff 0%, #f1f5f9 100%);
  border:1px solid rgba(96,165,250,.22);
  box-shadow:0 16px 36px rgba(15,23,42,.12);
}
.mara-theme .camp-unlock::before{
  background:radial-gradient(ellipse at 50% 0%, rgba(96,165,250,.2), transparent 70%);
}
.mara-theme .camp-unlock-kicker{ color:#3b82f6; }
.mara-theme .camp-unlock-title{ color:#0f172a; }
.mara-theme .camp-unlock-desc{ color:#64748b; }
.mara-theme .camp-unlock-cta{
  background:linear-gradient(135deg,var(--mara),var(--mara-d));
  box-shadow:0 10px 26px rgba(59,130,246,.28);
}