/* 电瓶车充电原型 · 公共样式
 * 主题取自 t-charging-uni 的 AZ（易爱充）品牌：src/styles/variables.scss 中 MP-AZ 段
 * 页面以 375–430px 手机宽度为准，桌面浏览器中居中显示为手机列。
 */
:root {
  /* 品牌 */
  --primary: #CC121D;
  --primary-2: #FF4A18;
  --primary-gradient: linear-gradient(105deg, #CC121D 48%, #FF4A18 104%);
  --primary-soft: #FFF1F2;          /* 品牌浅底：钱包、选中态背景 */
  --primary-line: #F7C9CC;          /* 品牌浅描边 */
  --tag-gradient: linear-gradient(90deg, #FF582A 0%, #FCB63E 100%);
  --price: #F94B30;

  /* 文本 */
  --text-1: #222222;
  --text-2: #555555;
  --text-3: #878787;
  --text-4: #B5B5B5;
  --text-on-primary: #FFFFFF;

  /* 背景与线 */
  --bg-page: #F5F6F8;
  --bg-card: #FFFFFF;
  --bg-muted: #F5F5F5;
  --line: #EEEEEE;
  --line-2: #E2E2E2;

  /* 状态（文字 + 色彩同时表达，不只依赖颜色） */
  --ok: #0FAB6B;   --ok-soft: #E7F7EF;      /* 空闲 / 成功 / 已完成 */
  --busy: #CC121D; --busy-soft: #FFF1F2;    /* 进行中：正在启动 / 充电中 / 我在使用，沿用品牌色，带呼吸点与失败态区分 */
  --used: #8F6300; --used-soft: #FFF3D1;    /* 插座被他人使用：琥珀，与“我在使用”同属暖色“占用”族，与离线灰、确认中橙区分 */
  --warn: #FF8D1A; --warn-soft: #FFF4E6;    /* 确认中 / 结算中 / 处理中 */
  --off: #9A9A9A;  --off-soft: #F0F0F0;     /* 离线 */
  --bad: #E00011;  --bad-soft: #FDECEE;     /* 故障 / 失败 */
  /* 业务色：电动汽车沿用品牌红，电瓶车用青绿（与红互补、明显可辨，避开蓝色与暖色系的确认中 / 他人占用）。
   * 用于业务标签图标、首页充电中卡片、找站业务切换与电瓶车充电详情；主按钮、价格仍用品牌色与价格色。 */
  --car: #CC121D;   --car-soft: #FFEFF0;   --car-line: #F6CCCF;
  --ebike: #00806F; --ebike-soft: #E1F3EF; --ebike-line: #A8DBD1;

  /* 尺寸 */
  --gutter: 12px;          /* 页面左右边距 */
  --gap: 10px;             /* 卡片之间 */
  --radius: 10px;
  --radius-sm: 6px;
  --navbar-h: 44px;
  --tabbar-h: 56px;
  --actionbar-h: 64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --shadow: 0 2px 8px rgba(0, 0, 0, .06);
  --shadow-up: 0 -2px 10px rgba(0, 0, 0, .06);
  --app-w: 430px;
}

/* 业务色候选方案（演示切换，默认 A：电动汽车红 + 电瓶车青绿） */
/* 业务作用域：在容器上加 .biz-car / .biz-ebike，内部统一用 --biz 系列变量 */
.biz-car { --biz: var(--car); --biz-soft: var(--car-soft); --biz-line: var(--car-line); }
.biz-ebike { --biz: var(--ebike); --biz-soft: var(--ebike-soft); --biz-line: var(--ebike-line); }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px; line-height: 1.5; color: var(--text-1);
  background: #E9EAEE;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.num { font-family: "DIN Alternate", "DIN", -apple-system, "Helvetica Neue", Arial, sans-serif; font-variant-numeric: tabular-nums; }

/* 手机列：桌面中居中，手机中铺满 */
.app {
  position: relative; max-width: var(--app-w); min-height: 100vh; margin: 0 auto;
  background: var(--bg-page); overflow-x: clip;
}
.app.has-navbar { padding-top: var(--navbar-h); }
.app.has-tabbar { padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom)); }
.app.has-actionbar { padding-bottom: calc(var(--actionbar-h) + var(--safe-bottom) + 8px); }
.fixed-col { position: fixed; left: 0; right: 0; margin: 0 auto; max-width: var(--app-w); }

/* 顶部导航（模拟小程序自定义导航；右侧胶囊为微信系统控件，仅占位） */
.navbar {
  top: 0; z-index: 50; height: var(--navbar-h); display: flex; align-items: center;
  background: #fff; border-bottom: 1px solid var(--line);
}
.navbar.brand { background: var(--primary-gradient); color: #fff; border-bottom: 0; }
.navbar.transparent { background: transparent; border-bottom: 0; }
.navbar__back { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 0; background: none; color: inherit; cursor: pointer; font-size: 20px; }
.navbar__title { position: absolute; left: 96px; right: 96px; text-align: center; font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.navbar__capsule { margin-left: auto; margin-right: 8px; width: 87px; height: 32px; border-radius: 16px; border: 1px solid rgba(0,0,0,.12); background: rgba(255,255,255,.7); display: flex; align-items: center; justify-content: space-around; font-size: 12px; color: #333; }
.navbar.brand .navbar__capsule { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.18); color: #fff; }
.navbar__capsule i { width: 1px; height: 18px; background: rgba(0,0,0,.15); }

/* 底部导航：首页 / 地图 / 扫码 / 商城 / 我的（与生产应用一致） */
.tabbar {
  bottom: 0; z-index: 50; height: calc(var(--tabbar-h) + var(--safe-bottom)); padding-bottom: var(--safe-bottom);
  display: flex; background: #fff; box-shadow: var(--shadow-up);
}
.tabbar__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; color: var(--text-3); cursor: pointer; }
.tabbar__item svg { width: 22px; height: 22px; }
.tabbar__item.active { color: var(--primary); font-weight: 600; }
.tabbar__scan { flex: 1; display: flex; justify-content: center; }
.tabbar__scan button { margin-top: -18px; width: 56px; height: 56px; border-radius: 50%; border: 4px solid #fff; background: var(--primary-gradient); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(204,18,29,.35); cursor: pointer; }
.tabbar__scan svg { width: 26px; height: 26px; }

/* 底部操作栏 */
.actionbar {
  bottom: 0; z-index: 40; min-height: calc(var(--actionbar-h) + var(--safe-bottom));
  padding: 10px var(--gutter) calc(10px + var(--safe-bottom)); background: #fff; box-shadow: var(--shadow-up);
  display: flex; align-items: center; gap: 10px;
}
.actionbar__info { flex: 1; min-width: 0; }

/* 按钮：主操作高度 44px，满足触控尺寸 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 18px; border-radius: 22px; border: 1px solid transparent; font-size: 16px; font-weight: 600; cursor: pointer; white-space: nowrap; user-select: none; }
.btn-primary { background: var(--primary-gradient); color: #fff; box-shadow: 0 6px 16px rgba(204,18,29,.22); }
.btn-ghost { background: #fff; color: var(--primary); border-color: var(--primary); }
.btn-default { background: var(--bg-muted); color: var(--text-1); }
.btn-plain { background: #fff; color: var(--text-1); border-color: var(--line-2); }
.btn-block { display: flex; width: 100%; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 16px; font-weight: 500; }
.btn-xs { height: 26px; padding: 0 10px; font-size: 12px; border-radius: 13px; font-weight: 500; }
.btn[disabled], .btn.is-disabled { opacity: .45; box-shadow: none; pointer-events: none; }
.btn.is-loading { pointer-events: none; opacity: .8; }
.btn.is-loading::before { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
.link { color: var(--primary); cursor: pointer; }
.link-muted { color: var(--text-3); cursor: pointer; }

/* 卡片与分区 */
.page-body { padding: var(--gutter); display: flex; flex-direction: column; gap: var(--gap); }
.card { background: var(--bg-card); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); }
.card-flat { background: var(--bg-card); border-radius: var(--radius); padding: 14px; }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.card__title { font-size: 15px; font-weight: 600; }
.section-title { font-size: 15px; font-weight: 600; margin: 4px 2px 0; }
.divider { height: 1px; background: var(--line); margin: 12px 0; }

/* 信息行 */
.cell { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 14px; }
.cell + .cell { border-top: 1px solid var(--line); }
.cell__label { color: var(--text-3); flex-shrink: 0; }
.cell__value { color: var(--text-1); text-align: right; word-break: break-all; }
.cell.is-link { cursor: pointer; }
.cell.is-link .cell__value::after { content: "›"; margin-left: 6px; color: var(--text-4); font-size: 16px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 13px; }
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; text-align: right; }

/* 标签与状态 */
.tag { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 4px; font-size: 11px; font-weight: 500; line-height: 1; white-space: nowrap; background: var(--bg-muted); color: var(--text-2); }
/* 业务标签：中性底 + 业务图标（汽车 / 踏板车），图标用业务色 */
.tag-biz { gap: 3px; padding: 0 6px 0 4px; background: var(--bg-muted); color: var(--text-1); }
.tag-biz svg { flex: 0 0 auto; color: var(--biz, var(--primary)); }
/* 优惠券：券面左侧为优惠力度，右侧为名称与有效期 */
.tag-coupon { gap: 3px; padding: 0 6px 0 4px; background: #fff; border: 1px solid var(--primary-line); color: var(--primary); }
.tag-coupon svg { flex: 0 0 auto; }
.cpn { display: flex; align-items: stretch; width: 100%; min-height: 72px; margin-bottom: 10px; padding: 0; border: 1px solid var(--primary-line); border-radius: 8px; background: #fff; overflow: hidden; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.cpn__val { flex: 0 0 92px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--primary-soft); color: var(--primary); border-right: 1px dashed var(--primary-line); }
.cpn__val b { font-size: 20px; line-height: 1.1; }
.cpn__val small { font-size: 11px; }
.cpn__info { flex: 1; min-width: 0; padding: 10px 12px; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.cpn__name { font-size: 14px; font-weight: 600; }
.cpn__sub { font-size: 12px; color: var(--text-3); }
.cpn__radio { flex: 0 0 auto; align-self: center; width: 20px; height: 20px; margin-right: 12px; border-radius: 50%; border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; color: #fff; }
.cpn.active { border-color: var(--primary); }
.cpn.active .cpn__radio { border-color: var(--primary); background: var(--primary); }
.cpn.is-off { cursor: default; border-color: var(--line); }
.cpn.is-off .cpn__val { background: var(--bg-muted); color: var(--text-4); border-right-color: var(--line-2); }
.cpn.is-off .cpn__name { color: var(--text-3); }
.tag-brand { background: var(--tag-gradient); color: #fff; }
.tag-outline { background: #fff; border: 1px solid var(--line-2); color: var(--text-2); }
.status { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.s-ok { color: var(--ok); } .s-busy { color: var(--busy); } .s-used { color: var(--used); } .s-warn { color: var(--warn); } .s-off { color: var(--off); } .s-bad { color: var(--bad); }
.pill { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pill-ok { background: var(--ok-soft); color: var(--ok); } .pill-busy { background: var(--busy-soft); color: var(--busy); }
.pill-busy::before { content: ""; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: currentColor; animation: livePulse 1.6s ease-in-out infinite; }
.pill-used { background: var(--used-soft); color: var(--used); }
/* 业务作用域内的进行中状态跟随业务色（首页卡片、充电详情、我的） */
.biz-car .pill-busy, .biz-ebike .pill-busy { background: var(--biz-soft); color: var(--biz); }
@keyframes livePulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .pill-busy::before { animation: none; } }
.pill-warn { background: var(--warn-soft); color: var(--warn); } .pill-off { background: var(--off-soft); color: var(--off); }
.pill-bad { background: var(--bad-soft); color: var(--bad); }

/* 金额 */
.money { font-weight: 700; color: var(--text-1); }
.money-price { color: var(--price); font-weight: 700; }
.money-lg { font-size: 30px; line-height: 1.1; }
.money-xl { font-size: 38px; line-height: 1.1; }
.money small { font-size: .55em; margin-right: 1px; }

/* 提示条 */
.notice { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; line-height: 1.5; }
.notice > svg { flex-shrink: 0; margin-top: 2px; }
.notice-info { background: var(--bg-muted); color: var(--text-2); }
.notice-warn { background: var(--warn-soft); color: #9a4d00; }
.notice-bad { background: var(--bad-soft); color: #a3000c; }
.notice-ok { background: var(--ok-soft); color: #08744a; }
.notice-brand { background: var(--primary-soft); color: var(--primary); }
.muted { color: var(--text-3); }
.small { font-size: 12px; }
.strong { font-weight: 600; }

/* 分段切换与筛选 */
.segmented { display: flex; padding: 3px; border-radius: 18px; background: var(--bg-muted); }
.segmented button { flex: 1; height: 30px; border: 0; border-radius: 15px; background: transparent; color: var(--text-2); font-size: 14px; cursor: pointer; white-space: nowrap; }
.segmented button.active { background: #fff; color: var(--primary); font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.tabs { display: flex; background: #fff; border-bottom: 1px solid var(--line); }
.tabs button { flex: 1; height: 44px; border: 0; background: none; color: var(--text-2); font-size: 14px; cursor: pointer; position: relative; }
.tabs button.active { color: var(--text-1); font-weight: 600; }
.tabs button.active::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 20px; height: 3px; margin-left: -10px; border-radius: 2px; background: var(--primary); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { height: 30px; padding: 0 12px; border-radius: 15px; border: 1px solid var(--line-2); background: #fff; color: var(--text-2); font-size: 13px; display: inline-flex; align-items: center; cursor: pointer; }
.chip.active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); font-weight: 600; }

/* 选择网格（金额档位、插座） */
.option-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.option { position: relative; min-height: 52px; border-radius: 8px; border: 1px solid var(--line-2); background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; padding: 6px 4px; }
.option.active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.option.active::after { content: "✓"; position: absolute; right: 0; bottom: 0; width: 16px; height: 14px; border-radius: 6px 0 7px 0; background: var(--primary); color: #fff; font-size: 10px; line-height: 14px; text-align: center; }
.option.is-disabled { background: var(--bg-muted); color: var(--text-4); cursor: not-allowed; }

/* 空态 */
.empty { padding: 48px 24px; text-align: center; color: var(--text-3); }
.empty__icon { font-size: 40px; margin-bottom: 8px; opacity: .5; }

/* 遮罩、弹窗、底部面板、轻提示 */
.mask { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; animation: fade .15s ease-out; }
.modal { width: min(86vw, 330px); background: #fff; border-radius: 14px; overflow: hidden; animation: pop .18s ease-out; }
.modal__title { padding: 22px 20px 6px; font-size: 17px; font-weight: 600; text-align: center; }
.modal__body { padding: 8px 20px 20px; font-size: 14px; color: var(--text-2); }
.modal__foot { display: flex; border-top: 1px solid var(--line); }
.modal__foot button { flex: 1; height: 50px; border: 0; background: #fff; font-size: 16px; cursor: pointer; color: var(--text-2); }
.modal__foot button + button { border-left: 1px solid var(--line); }
.modal__foot button.primary { color: var(--primary); font-weight: 600; }
.sheet-mask { align-items: flex-end; }
.sheet { width: 100%; max-width: var(--app-w); max-height: 82vh; display: flex; flex-direction: column; background: #fff; border-radius: 16px 16px 0 0; animation: up .2s ease-out; }
.sheet__head { display: flex; align-items: center; justify-content: center; position: relative; padding: 16px 48px 10px; font-size: 16px; font-weight: 600; }
.sheet__close { position: absolute; right: 8px; top: 8px; width: 36px; height: 36px; border: 0; background: none; font-size: 22px; color: var(--text-3); cursor: pointer; }
.sheet__body { flex: 1; overflow-y: auto; padding: 4px var(--gutter) 12px; }
.sheet__foot { padding: 10px var(--gutter) calc(10px + var(--safe-bottom)); border-top: 1px solid var(--line); }
.toast { position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 120; max-width: 70vw; padding: 10px 16px; border-radius: 8px; background: rgba(0,0,0,.78); color: #fff; font-size: 14px; text-align: center; animation: fade .15s; pointer-events: none; }

/* 加载 */
.spinner { width: 40px; height: 40px; border: 3px solid var(--primary-line); border-top-color: var(--primary); border-radius: 50%; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { transform: scale(.92); opacity: 0; } }
@keyframes up { from { transform: translateY(40px); opacity: .4; } }

/* 原型演示控件：非产品界面，固定在右下角，可折叠 */
.demo-fab { position: fixed; right: max(0px, calc(50vw - var(--app-w) / 2)); top: 38%; z-index: 110; width: 18px; height: 52px; padding: 0; border-radius: 8px 0 0 8px; border: 1px dashed #7a5af8; border-right: 0; background: #f4f0ff; color: #5b3fd6; font-size: 11px; font-weight: 700; writing-mode: vertical-rl; letter-spacing: 2px; cursor: pointer; opacity: .65; box-shadow: -2px 2px 8px rgba(91,63,214,.2); }
.demo-panel { position: fixed; right: max(24px, calc(50vw - var(--app-w) / 2 + 24px)); top: 18%; z-index: 111; width: 240px; max-height: 64vh; overflow-y: auto; padding: 10px; border-radius: 10px; border: 1px dashed #7a5af8; background: #fbf9ff; box-shadow: 0 6px 20px rgba(0,0,0,.15); font-size: 12px; color: #3d2a99; }
.demo-panel h4 { margin: 0 0 6px; font-size: 12px; }
.demo-panel .demo-group { margin-bottom: 8px; }
.demo-panel .demo-group__label { color: #6f5fc0; margin-bottom: 4px; }
.demo-panel button { margin: 0 4px 4px 0; padding: 4px 8px; border: 1px solid #c9bdf7; border-radius: 4px; background: #fff; color: #3d2a99; font-size: 12px; cursor: pointer; }
.demo-panel button.active { background: #5b3fd6; border-color: #5b3fd6; color: #fff; }
.demo-note { font-size: 11px; color: #7a6cc0; margin-top: 4px; }

/* 系统能力边界标注（如微信授权、支付、扫码相机） */
.sys-boundary { border: 1px dashed #9aa4b2; border-radius: 8px; background: #f7f9fb; color: #5c6b7a; font-size: 12px; padding: 8px 10px; }

/* 工具 */
.row { display: flex; align-items: center; gap: 8px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.col { display: flex; flex-direction: column; gap: 4px; }
.grow { flex: 1; min-width: 0; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hidden { display: none !important; }
.center { text-align: center; }