/* ═══════════════════════════════════════════════════════════════════════
   Veyrun 悦跑 · 手机端浅色皮肤（light.css）
   ---------------------------------------------------------------------
   只在窄屏（≤1023px）生效，桌面端仍然是原来的深紫 Nebula Violet。
   做法：把 style.css 的 token 整体翻成浅色，再补掉那些「硬编码在暗底上
   才成立」的规则（白色高光、玻璃 blur、紫渐层按钮、紫色 lip）。

   设计语言按手机参考稿来：
     · 画布 #f5f6f8，卡片纯白，圆角 18，边框 1px #eceef3，阴影极浅
     · 主文字 #111827 / 次级 #6b7280 / 弱化 #9aa3b0
     · 主按钮 = 深navy #0f172a 实心，圆角 999 或 14
     · 侧栏抽屉纯白，分组标题淡灰，选中项浅灰胶囊
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {
  :root {
    /* ── 中性 ── */
    --void: #eef0f4;
    --bg: #f5f6f8;
    --bg-2: #ffffff;
    --card: #ffffff;
    --card-2: #f7f8fa;
    --ink: #111827;
    --ink-2: #4b5563;
    --ink-3: #9aa3b0;
    --line: #eceef3;
    --line-2: #f2f4f7;
    --line-3: #e2e5eb;

    /* ── 深色层级（原来用于 hero/钱包卡）── */
    --deep: #ffffff;
    --deep-2: #f7f8fa;
    --deep-3: #eceef3;

    /* ── 阴影：浅底上靠「淡阴影」不靠辉光 ── */
    --sh-1: 0 1px 2px rgba(16, 24, 40, .04);
    --sh-2: 0 2px 8px rgba(16, 24, 40, .05), 0 14px 34px -24px rgba(16, 24, 40, .28);
    --sh-3: 0 16px 40px -26px rgba(16, 24, 40, .32);
    --sh-brand: 0 8px 22px -14px rgba(15, 23, 42, .55);

    /* ── 高光材质全部关掉：浅底不需要「发光」── */
    --sheen: none;
    --hairline: inset 0 1px 0 #ffffff;
    --topglow: none;
    --litsheen: none;
    --glow-violet: transparent;
    --glow-iris: transparent;
    --glow-orchid: transparent;
    --glow-cyan: transparent;

    /* ── 语义色换成浅底版本（暗底那套在白色上直接糊掉）── */
    /* --lime 留亮：钱包卡的「充值里程」按钮直接拿它当底色，压暗会读出脏色 */
    --lime: #b6f06a;
    --amber: #b45309;
    --red: #dc2626;
    --green: #059669;

    color-scheme: light;

    /* ── 旧变量别名：暗底时它们是「浅紫=亮」，浅底上要反过来当深色用 ── */
    --violet: #0f172a;
    --violet-2: #1f2937;
    --violet-3: #111827;
    --violet-deep: #f1f2f5;
  }

  html { background: var(--bg); }
  html, body { background: var(--bg); color: var(--ink); }

  /* 暗色期留下的整屏光晕/星点，浅底上会变成脏紫雾 */
  body::before, body::after { opacity: 0 !important; }

  /* ══════════════ 侧栏抽屉：纯白 ══════════════ */
  .vrail {
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-right: 1px solid #eceef3;
    box-shadow: 1px 0 0 rgba(16, 24, 40, .02), 26px 0 60px -48px rgba(16, 24, 40, .5);
  }
  .vrail::after { background: none; }

  .vlogo-txt b {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: #111827;
    color: #111827;
  }
  .vlogo-txt i { color: #9aa3b0; }
  .vlogo-mark {
    background: #0f172a;
    box-shadow: 0 4px 14px -6px rgba(15, 23, 42, .5), 0 0 0 1px rgba(15, 23, 42, .1);
  }

  .vauth {
    background: #0f172a;
    color: #fff;
    box-shadow: 0 6px 16px -10px rgba(15, 23, 42, .8);
  }
  .vauth.ghosted {
    background: #f1f2f5;
    color: #4b5563;
    box-shadow: inset 0 0 0 1px #e6e8ee;
  }

  .vgrp-t { color: #9aa3b0; letter-spacing: .12em; }
  .vsep { background: linear-gradient(90deg, transparent, #eceef3, transparent); }

  .vnav a { color: #374151; }
  .vnav a:hover { background: #f4f5f7; color: #111827; }
  .vnav a.on {
    color: #111827;
    background: #f1f2f5;
    box-shadow: inset 0 0 0 1px #e8eaee;
    text-shadow: none;
  }
  .vnav a.on::before {
    background: #0f172a;
    box-shadow: none;
    width: 3px;
  }
  .vnav a .vb {
    background: #0f172a;
    color: #fff;
    box-shadow: none;
  }

  .vbal {
    background: #f7f8fa;
    box-shadow: inset 0 0 0 1px #eceef3;
    color: #4b5563;
  }
  .vbal:hover { background: #f1f2f5; box-shadow: inset 0 0 0 1px #e2e5eb; }
  .vbal b { color: #111827; }
  .vbal b em { color: #9aa3b0; }

  .vava {
    background: #111827;
    color: #fff;
    box-shadow: none;
  }
  .vuname { color: #111827; }
  .vacts button { color: #9aa3b0; }
  .vacts button:hover { background: #f1f2f5; color: #111827; }

  .vfold {
    background: #ffffff;
    box-shadow: inset 0 0 0 1px #e6e8ee, 8px 0 20px -16px rgba(16, 24, 40, .5);
    color: #6b7280;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .vfold:hover { background: #f4f5f7; color: #111827; }
  body.rail-mini .vauth {
    background: #f1f2f5;
    box-shadow: inset 0 0 0 1px #e6e8ee;
    color: #4b5563;
  }
  body.rail-mini .vauth:hover { background: #e9ebef; color: #111827; }

  /* 抽屉拉开时的遮罩 */
  .rail-mask { background: rgba(17, 24, 39, .28); }

  /* ══════════════ 按钮 ══════════════ */
  .btn {
    background: #0f172a;
    color: #ffffff;
    box-shadow: 0 8px 20px -14px rgba(15, 23, 42, .9);
    inset: auto;
  }
  .btn::after { display: none; }
  .btn:hover { filter: brightness(1.12); box-shadow: 0 10px 24px -14px rgba(15, 23, 42, .9); }
  .btn:active { box-shadow: none; }
  .btn.ghost {
    background: #ffffff;
    color: #111827;
    border-color: #e2e5eb;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .btn.ghost:hover { background: #f7f8fa; border-color: #d3d7de; color: #111827; box-shadow: 0 1px 2px rgba(16, 24, 40, .06); }
  .btn.dark { background: #f1f2f5; color: #111827; border-color: #e6e8ee; box-shadow: none; }
  .btn.lime { background: #16a34a; color: #fff; box-shadow: 0 8px 20px -14px rgba(22, 163, 74, .9); }
  .btn.danger { background: #fdecef; color: #b42318; border-color: #f6ccd3; box-shadow: none; }
  .btn.hero {
    background: #0f172a;
    color: #fff;
    text-shadow: none;
    box-shadow: 0 10px 26px -16px rgba(15, 23, 42, .95);
  }
  .btn.hero:hover { filter: brightness(1.12); box-shadow: 0 14px 30px -16px rgba(15, 23, 42, .95); }

  /* ══════════════ 卡片 ══════════════ */
  .card {
    background: #ffffff;
    border: 1px solid #eceef3;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .card.interactive:hover {
    background: #ffffff;
    border-color: #e2e5eb;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .05), 0 16px 34px -26px rgba(16, 24, 40, .34);
  }
  .card::before { display: none; }

  /* ══════════════ 表单 ══════════════ */
  input, textarea, select {
    background: #ffffff;
    color: #111827;
    border-color: #e2e5eb;
  }
  input::placeholder, textarea::placeholder { color: #9aa3b0; }
  input:focus, textarea:focus, select:focus {
    border-color: #0f172a;
    box-shadow: 0 0 0 3px rgba(15, 23, 42, .08);
  }

  /* ══════════════ 标签 / 徽标 ══════════════ */
  .chip { background: #f1f2f5; color: #4b5563; border-color: #e6e8ee; }
  .chip.ok { background: #e7f8f0; color: #0d7a4a; border-color: #c7eddc; }
  .chip.warn { background: #fff6e5; color: #8a5a00; border-color: #f7e2bc; }
  .chip.err { background: #fdecef; color: #b42318; border-color: #f6ccd3; }
  .chip.info { background: #eef1ff; color: #3730a3; border-color: #d9dfff; }
  .chip.dark { background: #f1f2f5; color: #374151; border-color: #e6e8ee; }

  /* ══════════════ 页脚 ══════════════ */
  .foot {
    background: #eef0f4;
    border-top: 1px solid #e6e8ee;
    color: #9aa3b0;
  }
  .foot a, .foot b { color: #6b7280; }

  /* 紫色语义字在浅底上太浅，压一档 */
  .violet, .brand { color: #0f172a; }

  /* ── 列表入口（.item）：标题写死成 #fff，浅底上直接看不见 ── */
  .item { background: #fff; border-color: #eceef3; }
  .item:hover { background: #f7f8fa; border-color: #e2e5eb; box-shadow: none; }
  .item .t { color: #111827; }
  .item .d { color: #9aa3b0; }
  .item .ic {
    background: #f1f2f5;
    color: #111827;
    box-shadow: none;
  }

  /* ── 头像：紫色渐层换成墨黑，跟主按钮同一档 ── */
  .ava, .avatar, .av, .mtop-av { background: #111827; color: #fff; box-shadow: none; }
  .ava .em, .ava em { color: #fff; }

  a { color: #111827; }
  a:hover { color: #000000; }
  .muted { color: #9aa3b0; }

  /* ══════════════ 这些卡片的底色是「白色半透明渐层」 ══════════════
     暗底上它是玻璃，浅底上等于没有底色，卡片会整个消失。
     逐个换成白卡 + 一圈浅边框。 */
  .prod, .tk, .up, .mh-card, .mh-metric, .pill-fen, .sk {
    background: #ffffff;
    border-color: #eceef3;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  }
  .tk:hover, .prod:hover, .mh-metric:hover {
    background: #ffffff;
    border-color: #e2e5eb;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .05), 0 16px 34px -26px rgba(16, 24, 40, .3);
  }
  .up:hover { border-color: #d3d7de; background: #f7f8fa; }
  .mh-kicker { color: #6b7280; }

  /* 分段控件：白底上要看得见「哪一档被选中」 */
  .seg, .tabs {
    background: #f1f2f5;
    border-color: #e6e8ee;
    box-shadow: none;
  }
  .seg button { color: #6b7280; }
  /* 选中项走 iOS 分段控件那套：白药丸 + 墨字，比「白字压深底」稳
     —— 滑块是 JS 定位的，万一没跟上，字也不会消失 */
  .seg button.on { color: #111827; font-weight: 700; }
  .seg .seg-thumb {
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .14), 0 1px 1px rgba(16, 24, 40, .06);
  }
  .tabs button { color: #6b7280; }
  .tabs button.on {
    background: #ffffff;
    color: #111827;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
  }

  /* 输入框 / 进度条 */
  .inp {
    background: #ffffff;
    border-color: #e2e5eb;
    box-shadow: none;
  }
  .inp:focus { border-color: #0f172a; box-shadow: 0 0 0 3px rgba(15, 23, 42, .08); }
  .bar { background: #eceef3; }

  /* 提示条：紫底 + 近白粗体，浅底上粗体会「消失」——正是那段「多久到账」 */
  .notice {
    background: #f4f6ff;
    border-color: #e2e7f7;
    color: #4b5563;
  }
  .notice b, .notice strong { color: #111827; }

  /* 全站粗体在暗底时期被写成近白，浅底上要落回墨色 */
  .card b, .card strong, .tk b, .tk strong, .item b, .item strong { color: #111827; }

  /* 地图不动：登录后首页就是这张深色跑道图，浅色皮肤只在它没出场时生效。
     （参考视频那帧是未登录状态，没有地图，不能拿它当首页的样子） */

  /* ══════════════ 旧版底部 tabbar ══════════════
     壳层页面它本来就被隐藏了，但登录/注册这类 bare 页还在用，别让它一黑到底。 */
  .tabbar {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid #eceef3;
    box-shadow: 0 -1px 0 rgba(16, 24, 40, .02);
  }
  .tabbar a { color: #9aa3b0; }
  .tabbar a.on { color: #0f172a; text-shadow: none; }

  /* ══════════════ 顶栏（☰ + 品牌 + 余额 + 我的） ══════════════ */
  .mtop {
    background: rgba(255, 255, 255, .94);
    border-bottom: 1px solid #eceef3;
    box-shadow: 0 1px 0 rgba(16, 24, 40, .02);
  }
  body.shell.page-map .mtop {
    background: linear-gradient(180deg, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .82) 62%, rgba(255, 255, 255, 0) 100%);
  }
  .mtop-menu { color: #111827; }
  .mtop-brand b { color: #111827; }
  .mtop-brand i { color: #9aa3b0; }
  .mtop-brand img { box-shadow: 0 0 0 1px #eceef3, 0 4px 12px -6px rgba(16, 24, 40, .35); }
  .mtop-bal { background: #f1f2f5; border: 1px solid #e6e8ee; color: #111827; }
  .mtop-bal em { color: #9aa3b0; }
  .mtop-av { background: #111827; box-shadow: none; }
  .mtop-login { background: #111827; box-shadow: none; }

  /* ══════════════ 跑步设置抽屉（底部） ══════════════ */
  body.shell.page-map .run-panel {
    background: #fff;
    border: 1px solid #eceef3;
    border-bottom: 0;
    box-shadow: 0 -26px 60px -30px rgba(16, 24, 40, .30);
    /* 白底不需要玻璃模糊；留着它会让底下的深色地图透出一层紫灰 */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  /* 地图上那层暗角 / 紫色氛围层对深色地图有用，但它挂在 .vmain 的 ::after 上
     （z-index:5），而抽屉被夹在 .hv-top 的层叠上下文里逃不出来 ——
     实测效果就是一层紫灰薄纱盖在白底抽屉上。手机上直接关掉。 */
  body.shell.page-map .vmain::after { display: none; }

  /* 抽屉铺满整个下沿后，左侧那个展开把手会压在"目标配速"这几个字上。
     首页有顶栏的 ☰ 当入口，这一页就不必再挂个把手。 */
  body.shell.page-map .vfold { display: none; }

  .run-grab i { background: #d6d9e0; }
  .run-grab span { color: #111827; }
  .run-grab em { color: #9aa3b0; }

  .run-panel .run-ph h1 { color: #111827; }
  .run-panel .run-ph .sub { color: #9aa3b0; }
  .run-panel .run-ph .ic { background: #f1f2f5; color: #111827; box-shadow: none; }
  .run-hd-btn {
    color: #6b7280; background: #f4f5f8;
    box-shadow: inset 0 0 0 1px #e6e8ee;
  }
  .run-hd-btn:hover { background: #eceef3; color: #111827; }

  .run-pb { background: none; }
  .rt-label { color: #6b7280; }
  .rt-label .hint { color: #9aa3b0; }
  .rt-select {
    background: #f7f8fa; border: 1px solid #e6e8ee; color: #111827;
  }
  .rt-step {
    background: #f7f8fa; border: 1px solid #e6e8ee;
    box-shadow: none;
  }
  .rt-step .m, .rt-step .p { color: #111827; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }
  .rt-step .v { color: #111827; background: none; }
  .rt-step .u { color: #9aa3b0; }
  .rt-sub { color: #9aa3b0; }
  .rt-pred { background: #f7f8fa; border: 1px solid #e6e8ee; }
  .rt-pred .row span:first-child { color: #6b7280; }
  .rt-pred .row b { color: #111827; }
  .rt-pred .row b em { color: #9aa3b0; }
  .rt-recommend {
    background: #fff; border: 1px solid #e6e8ee; color: #111827;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
  }
  .rt-seg { background: #f1f2f5; box-shadow: inset 0 0 0 1px #e9ebf0; }
  .rt-seg .th {
    background: #fff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .14), 0 0 0 1px rgba(16, 24, 40, .06);
  }
  .rt-seg button { color: #6b7280; }
  .rt-seg button.on { color: #0f172a; font-weight: 650; }
  .rt-search { background: #f7f8fa; border: 1px solid #e6e8ee; color: #6b7280; }
  .rt-search input { color: #111827; background: none; }
  .rt-search input::placeholder { color: #b3bac6; }
  .rt-search button { background: #111827; color: #fff; }
  .rt-mini { background: #f4f5f8; border: 1px solid #e6e8ee; color: #111827; }
  .rt-cta { background: #111827; color: #fff; box-shadow: 0 8px 20px -12px rgba(16, 24, 40, .9); }
  .rt-q { background: #f4f5f8; border: 1px solid #e6e8ee; color: #6b7280; }
  .rt-hint { color: #9aa3b0; }
  .run-hist { background: #f7f8fa; border: 1px solid #eceef3; }
  .run-hist .rh-h { color: #111827; }
  .run-hist .rh-h i { color: #9aa3b0; }
  .run-hist .rh-row { border-top: 1px solid #eceef3; }
  .run-hist .rh-row b { color: #111827; }
  .run-hist .rh-row span { color: #9aa3b0; }
}