/* ==========================================================
   H5 移动端样式 · 高端商务主题（墨蓝 × 香槟金 Design System v3）
   ========================================================== */
:root {
  --navy-900: #0a1730;
  --navy-800: #0d1f40;
  --navy-700: #12294d;
  --navy-600: #1b3563;
  --primary: #16305e;
  --primary-deep: #0d1f40;
  --primary-grad: linear-gradient(150deg, #16305e 0%, #0d1f40 55%, #1b3563 120%);
  --gold: #c9a86a;
  --gold-deep: #a8843f;
  --gold-grad: linear-gradient(100deg, #e3c78f 0%, #c9a86a 45%, #a8843f 100%);
  --success: #2e9e6b;
  --warning: #e5943f;
  --danger: #c0392b;
  --bg: #f2f4f8;
  --card: #ffffff;
  --text: #101a2e;
  --text-2: #42506b;
  --muted: #8b96ab;
  --line: #e4e9f2;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(13, 31, 64, .04), 0 10px 30px -8px rgba(13, 31, 64, .10);
  --shadow-deep: 0 18px 40px -12px rgba(10, 23, 48, .45);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background:
    radial-gradient(900px 420px at 85% -120px, rgba(201, 168, 106, .10), transparent 65%),
    radial-gradient(1100px 480px at 10% -140px, rgba(22, 48, 94, .08), transparent 70%),
    var(--bg);
  color: var(--text);
  font-size: 15px;
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
  min-height: 100vh;
}

/* ---------- 顶栏 ---------- */
.topbar {
  position: relative;
  background: var(--primary-grad);
  color: #fff;
  padding: 22px 20px 52px;
  border-radius: 0 0 28px 28px;
  overflow: hidden;
  box-shadow: var(--shadow-deep);
}
/* 金色氛围光 + 细网格纹理 */
.topbar-deco { position: absolute; inset: 0; pointer-events: none; }
.topbar-deco::before {
  content: "";
  position: absolute;
  width: 300px; height: 300px;
  top: -170px; right: -70px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 168, 106, .28), transparent 68%);
}
.topbar-deco::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(240px 240px at -40px 120%, rgba(255, 255, 255, .06), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 44px);
}
/* 右下超大衬线水印 */
.brand::after {
  content: "NAT";
  position: absolute;
  right: 6px; bottom: -34px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 92px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, .045);
  pointer-events: none;
  line-height: 1;
}
.brand { display: flex; align-items: center; gap: 13px; position: relative; z-index: 1; }
.logo {
  background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05));
  border: 1px solid rgba(201, 168, 106, .65);
  border-radius: 13px;
  padding: 8px 11px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 14px;
  color: #e8d3a7;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 4px 14px rgba(0, 0, 0, .25);
}
.title { font-weight: 700; font-size: 18px; letter-spacing: .5px; }
.sub {
  font-size: 12px;
  margin-top: 4px;
  letter-spacing: .8px;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 600;
}
/* 金色标语行 */
.hero-line {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 20px;
  font-size: 12px;
  letter-spacing: 1.5px;
  white-space: nowrap;
  color: rgba(232, 211, 167, .92);
}
.hero-line i {
  flex: 1;
  max-width: 30px;
  height: 1px;
  background: linear-gradient(90deg, rgba(201, 168, 106, .8), rgba(201, 168, 106, .15));
}
.hero-line span { flex: none; }
.hero-line span:first-child::before,
.hero-line span:last-child::after {
  content: "◆";
  font-size: 7px;
  vertical-align: 2px;
  margin: 0 6px;
  color: rgba(201, 168, 106, .75);
}

/* 主体：首屏卡片上提，形成层叠 */
#main { padding: 0 14px 24px; }
#main > .page.active > .stat-row:first-child { margin-top: -34px; }

/* ---------- 页面切换 ---------- */
.page { display: none; }
.page.active { display: block; animation: pageIn .34s cubic-bezier(.22, .8, .36, 1) both; }
@keyframes pageIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- 卡片 ---------- */
.card {
  background: var(--card);
  border: 1px solid rgba(228, 233, 242, .9);
  border-top: 1px solid rgba(255, 255, 255, .9);
  border-radius: var(--radius);
  padding: 18px 16px 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.card h3 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .5px;
  margin-bottom: 14px;
  display: flex;
  align-items: baseline;
  gap: 4px 9px;
  flex-wrap: wrap;
}
.card h3 small.muted { flex-basis: 100%; margin-top: 1px; }
.card h3::before {
  content: "";
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: var(--gold-grad);
  flex: none;
  align-self: center;
  box-shadow: 0 2px 6px rgba(168, 132, 63, .35);
}
.card h4 {
  font-size: 14px;
  margin: 14px 0 8px;
  color: var(--primary);
  font-weight: 700;
  letter-spacing: .5px;
}
.muted { color: var(--muted); font-weight: 400; font-size: 12px; letter-spacing: .3px; }
.tip-line { margin-top: 10px; line-height: 1.8; }

/* ---------- 统计卡 ---------- */
.stat-row { display: flex; gap: 12px; margin-bottom: 14px; }
.stat-card {
  flex: 1;
  position: relative;
  border-radius: 18px;
  padding: 18px 14px 15px;
  text-align: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
}
/* 主卡：墨蓝金卡 */
.stat-card.green {
  background: linear-gradient(155deg, #16305e 0%, #0d1f40 70%);
  box-shadow: var(--shadow-deep);
}
.stat-card.green::before {
  content: "";
  position: absolute;
  width: 170px; height: 170px;
  top: -100px; right: -50px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 168, 106, .30), transparent 68%);
}
.stat-card.green::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 211, 167, .8), transparent);
}
.stat-card.green b {
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-card.green span { color: rgba(255, 255, 255, .72); }
/* 副卡：白卡 */
.stat-card.orange {
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.stat-card.orange::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(22, 48, 94, .35), transparent);
}
.stat-card b {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 32px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 1.15;
}
.stat-card.orange b { color: var(--primary); }
.stat-card span { font-size: 12px; color: var(--muted); margin-top: 4px; display: block; letter-spacing: 1.5px; }

/* ---------- 级联选择 ---------- */
.cascade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cascade.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cascade.cols-3 select { padding-left: 8px; padding-right: 24px; background-position: right 9px center; font-size: 13px; }
.cascade select, .form select {
  width: 100%;
  padding: 11px 30px 11px 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #f7f9fc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23a8843f' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  font-size: 14px;
  color: var(--text);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.cascade select:focus, .form select:focus {
  outline: none;
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px rgba(168, 132, 63, .14);
  background-color: #fff;
}
#fStreet, #selArea + #fStreet { grid-column: span 1; }

/* ---------- 镇街状态列表 ---------- */
.town-list {
  margin-top: 12px;
  max-height: 330px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #eef1f7;
  border-radius: 12px;
  padding: 2px 0;
}
.town-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
  transition: background .15s;
}
.town-item:hover { background: #f7f9fc; }
.town-item + .town-item { border-top: 1px solid #f2f4f9; }
.badge {
  font-size: 11px;
  padding: 4px 11px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 2.5px rgba(0,0,0,.05); }
.badge.open { background: #faf4e6; color: #9a7b3f; border: 1px solid #eddfc0; }
.badge.authorized { background: #e9f6ef; color: #237a52; border: 1px solid #c8e8d6; }
.badge.pending { background: #fdf0e2; color: #b06a1e; border: 1px solid #f3dcc0; }
.empty-tip { color: var(--muted); font-size: 13px; text-align: center; padding: 24px 12px; line-height: 1.8; letter-spacing: .5px; }

/* ---------- 地图 ---------- */
.map-legend { display: flex; gap: 18px; font-size: 12px; color: var(--text-2); margin-bottom: 10px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; box-shadow: 0 0 0 2.5px rgba(13, 31, 64, .06); }
.dot-green { background: #2e9e6b; }
.dot-orange { background: #e5943f; }
.dot-gray { background: #d7dde8; }
.map-box {
  background:
    radial-gradient(circle at 50% 0%, rgba(22, 48, 94, .05), transparent 60%),
    linear-gradient(180deg, #f6f8fc 0%, #eef2f8 100%);
  border: 1px solid #e4eaf3;
  border-radius: 14px;
  overflow: hidden;
  padding: 8px;
  box-shadow: inset 0 2px 10px rgba(13, 31, 64, .05);
}
.map-box svg { width: 100%; height: auto; max-height: 330px; display: block; }
/* vector-effect：描边固定 1px，避免按经纬度坐标缩放后线宽吞掉填色 */
.map-box path { stroke: #fff; stroke-width: 1; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill .18s, opacity .18s; }
.map-box path:hover { opacity: .82; }
/* 南海九段线：线条描边渲染 */
.map-box .map-boundary {
  fill: none;
  stroke: #9fb0c7;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.province-tip {
  font-size: 13px;
  color: var(--text-2);
  margin-top: 10px;
  min-height: 20px;
  padding: 10px 13px;
  background: #f7f9fc;
  border-radius: 11px;
  border: 1px solid #e4e9f2;
  border-left: 3px solid var(--gold);
}
.province-tip:empty { display: none; }
.province-tip b { color: var(--primary); }

/* ---------- 地图：面包屑 / 区域信息 / 首页操作区 ---------- */
.map-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 8px;
  min-height: 22px;
}
.map-crumb a {
  color: var(--primary);
  padding: 3px 8px;
  border-radius: 8px;
  background: #f2f6fd;
  cursor: pointer;
}
.map-crumb a.cur { background: var(--primary); color: #fff; cursor: default; }
.map-crumb i { font-style: normal; color: #c3ccda; }
.map-box { position: relative; }
.map-loading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--muted);
  background: rgba(246, 248, 252, .78);
  border-radius: 14px;
  letter-spacing: 1px;
}
.map-area-info { margin-top: 12px; }
.area-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  padding: 10px 12px;
  background: #f7f9fc;
  border: 1px solid #e4e9f2;
  border-left: 3px solid var(--gold);
  border-radius: 11px;
  margin-bottom: 10px;
}
.area-head b { font-size: 15px; color: var(--primary); }
.area-head span { font-size: 12.5px; color: var(--muted); }
.area-list { border: 1px solid #eef1f7; border-radius: 12px; overflow: hidden; }
/* 下钻列表限高：34 个省级行政区不会把页面拉得过长，底部申请入口始终可达 */
.map-area-info .area-list { max-height: 330px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.area-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 13px; font-size: 14px;
  cursor: pointer; transition: background .15s;
}
.area-row:hover { background: #f7f9fc; }
.area-row + .area-row { border-top: 1px solid #f2f4f9; }
.area-row .name { display: flex; align-items: center; gap: 7px; }
.area-row .arrow { color: #c3ccda; font-size: 15px; margin-left: 2px; }
.area-row .cnt { font-size: 12px; color: var(--muted); }
.area-row.selected { background: #f0f5ff; }
.area-more { text-align: center; padding: 9px; font-size: 12.5px; color: var(--muted); }

.agent-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(120deg, #0b1e3d 0%, #16305e 62%, #23477f 100%);
  color: #fff;
  box-shadow: 0 8px 22px rgba(11, 30, 61, .22);
  position: relative;
  overflow: hidden;
}
.agent-banner::after {
  content: ""; position: absolute; right: -30px; top: -40px;
  width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 168, 106, .34), transparent 70%);
}
.agent-banner-badge {
  flex: none;
  padding: 5px 10px;
  border-radius: 8px;
  background: linear-gradient(135deg, #d9bd84, #c9a86a);
  color: #3a2c10;
  font-size: 12px; font-weight: 700; letter-spacing: 1px;
}
.agent-banner-text { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: rgba(255,255,255,.74); }
.agent-banner-text b { font-size: 15px; color: #fff; letter-spacing: .5px; }

.home-actions { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 6px; }
.btn.big { width: 100%; height: 50px; font-size: 16px; letter-spacing: 2px; border-radius: 14px; }
/* 「区域代理说明」在浅色背景上使用深金文字，避免与深色卡片上的 ghost 按钮混用导致对比度不足 */
.home-actions .btn.ghost {
  color: #8a6a2a !important;
  background: #fffaf0 !important;
  border: 1px solid #e7d9b8;
  height: 44px;
  border-radius: 13px;
  font-size: 14px;
}
.my-agent-entries { display: flex; flex-direction: column; gap: 9px; }
.my-agent-entry {
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 15px;
  border-radius: 13px;
  border: 1px solid #e7d9b8;
  background: linear-gradient(120deg, #fdf8ec, #f7efdc);
  cursor: pointer;
}
.my-agent-entry .t { font-size: 14px; font-weight: 600; color: #6b4f16; }
.my-agent-entry .s { font-size: 12px; color: #9a7b3f; margin-top: 2px; }
.my-agent-entry .go { font-size: 12.5px; color: #9a7b3f; }


/* ---------- 表单 ---------- */
/* 小节标题：金点 + 细线 */
.form-sec {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 18px 0 2px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--primary);
}
.form-sec::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: var(--gold-grad);
  flex: none;
}
.form-sec::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(201, 168, 106, .35), transparent);
}
.form-sec .muted { font-weight: 500; letter-spacing: 0; }
.form-sec:first-of-type { margin-top: 6px; }
.form > label:first-child { margin-top: 6px; }
/* 双列短字段 */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; margin-top: 12px; }
.form-grid label { margin-top: 0 !important; }
.form label { display: block; font-size: 13px; color: var(--text-2); margin: 13px 0 7px; font-weight: 600; letter-spacing: .3px; }
.form input, .form textarea, .form select {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  font-size: 14px;
  background: #f7f9fc;
  color: var(--text);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.form input:focus, .form textarea:focus, .form select:focus {
  outline: none;
  border-color: var(--gold-deep);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(168, 132, 63, .14);
}
.form input::placeholder, .form textarea::placeholder { color: #b3bdcd; font-weight: 400; }
.form textarea { resize: none; line-height: 1.6; }
/* 收款方式：分段选择器 */
.radio-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 8px 0 2px; }
.radio { position: relative; display: flex !important; margin: 0 !important; cursor: pointer; }
.radio input { position: absolute !important; opacity: 0; width: 0 !important; height: 0; padding: 0; margin: 0; pointer-events: none; }
.radio span {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 8px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #f7f9fc;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--text-2);
  transition: border-color .15s, background .15s, box-shadow .15s, color .15s;
}
.radio input:checked + span {
  border-color: var(--gold-deep);
  background: #fdf9ef;
  color: var(--primary);
  box-shadow: 0 0 0 3px rgba(168, 132, 63, .12);
}
.radio input:checked + span::before {
  content: "✓";
  font-weight: 800;
  color: var(--gold-deep);
  font-size: 13px;
}
.qr-preview { max-width: 160px; max-height: 160px; margin-top: 10px; border-radius: 13px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.street-tip { font-size: 12px; margin-top: 9px; min-height: 16px; padding: 9px 13px; border-radius: 10px; display: none; letter-spacing: .3px; }
.street-tip.ok { display: block; color: #237a52; background: #effaf3; border: 1px solid #c8e8d6; }
.street-tip.err { display: block; color: #b02a1c; background: #fdf1ef; border: 1px solid #f2cbc4; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  padding: 10px 20px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
  transition: transform .12s, box-shadow .15s, background .15s, opacity .15s;
}
.btn:active { transform: scale(.97); }
.btn.primary {
  position: relative;
  background: var(--primary-grad);
  border: 1px solid rgba(201, 168, 106, .55);
  color: #fff;
  width: 100%;
  padding: 14px;
  font-size: 16px;
  font-weight: 700;
  margin-top: 18px;
  letter-spacing: 6px;
  box-shadow: var(--shadow-deep);
  overflow: hidden;
}
.btn.primary::before {
  content: "";
  position: absolute;
  left: 16px; right: 16px; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 211, 167, .85), transparent);
}
.btn.primary:active { box-shadow: 0 8px 18px -8px rgba(10, 23, 48, .45); }
.btn.primary:disabled { background: linear-gradient(150deg, #8fa2c4, #b8c5da); border-color: rgba(255,255,255,.4); box-shadow: none; }
.btn.small { padding: 7px 15px; font-size: 12px; border-radius: 9px; }
.btn.danger { background: #fdf1ef; color: var(--danger); border-color: #f2cbc4; }

/* ---------- 查询行 ---------- */
.query-row { display: flex; gap: 9px; }
.query-row input {
  flex: 1;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  font-size: 14px;
  background: #f7f9fc;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.query-row input:focus { outline: none; border-color: var(--gold-deep); background: #fff; box-shadow: 0 0 0 3px rgba(168, 132, 63, .14); }
.query-row .btn { flex: none; background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 6px 14px -6px rgba(13, 31, 64, .5); }

/* ---------- 申请卡片 ---------- */
.app-item {
  background: var(--card);
  border: 1px solid rgba(228, 233, 242, .9);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.app-item::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--gold), rgba(201, 168, 106, .15));
}
.app-item .head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 11px;
  padding-bottom: 11px;
  border-bottom: 1px dashed #e8ecf4;
}
.app-item .region { font-weight: 700; font-size: 14px; letter-spacing: .3px; }
.app-item .meta { font-size: 13px; color: var(--text-2); line-height: 2; }
.app-item .reject {
  background: #fdf1ef;
  color: #b02a1c;
  font-size: 12px;
  padding: 10px 13px;
  border-radius: 10px;
  margin-top: 10px;
  border: 1px solid #f2cbc4;
  line-height: 1.7;
}
.app-item .actions { margin-top: 12px; text-align: right; }

/* ---------- 代理身份卡（黑金卡） ---------- */
.agent-card {
  position: relative;
  background:
    radial-gradient(300px 200px at 88% -30%, rgba(201, 168, 106, .32), transparent 65%),
    linear-gradient(150deg, #101d38 0%, #0a1730 60%, #152a50 130%);
  color: #fff;
  border: 1px solid rgba(201, 168, 106, .45);
  border-radius: 18px;
  padding: 19px 18px;
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-deep);
}
.agent-card::before {
  content: "";
  position: absolute;
  width: 210px; height: 210px;
  border-radius: 50%;
  border: 1px solid rgba(201, 168, 106, .22);
  top: -110px; right: -70px;
}
.agent-card::after {
  content: "";
  position: absolute;
  width: 130px; height: 130px;
  border-radius: 50%;
  border: 1px solid rgba(201, 168, 106, .16);
  bottom: -65px; left: -35px;
}
.agent-card > * { position: relative; z-index: 1; }
.agent-card .badge-line { display: flex; justify-content: space-between; align-items: center; }
.agent-card .vip {
  background: var(--gold-grad);
  color: #23180a;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  box-shadow: 0 4px 12px -2px rgba(168, 132, 63, .55);
}
.agent-card .region-name { font-size: 15px; font-weight: 600; margin-top: 12px; letter-spacing: .5px; }
.agent-card .bonus-row { display: flex; gap: 10px; margin-top: 15px; }
.agent-card .bonus-row div {
  flex: 1;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(201, 168, 106, .28);
  border-radius: 12px;
  padding: 11px 8px;
  text-align: center;
  backdrop-filter: blur(4px);
}
.agent-card .bonus-row b {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.agent-card .bonus-row span { font-size: 11px; opacity: .78; letter-spacing: 1px; }

.order-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 13px;
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 14px;
  font-size: 12px;
}
.order-table th {
  background: #f4f6fa;
  color: var(--primary);
  padding: 10px 9px;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  letter-spacing: .5px;
  border-bottom: 1px solid var(--line);
}
.order-table td { padding: 10px 9px; border-top: 1px solid #f2f4f9; color: var(--text); word-break: break-all; }
.sec-title { font-size: 13px; color: var(--muted); margin: 6px 0 9px; font-weight: 600; letter-spacing: .5px; }

/* ---------- 说明页 ---------- */
.about-text {
  font-family: inherit;
  white-space: pre-wrap;
  font-size: 13px;
  color: var(--text-2);
  line-height: 2;
  background: #f7f9fc;
  border: 1px solid #e9edf5;
  border-left: 3px solid var(--gold);
  border-radius: 12px;
  padding: 13px 14px;
}
.about-contact {
  margin-top: 15px;
  font-size: 13px;
  line-height: 2.3;
  background: #f7f9fc;
  border: 1px solid #e9edf5;
  border-radius: 12px;
  padding: 13px 14px;
}
.about-contact a { color: var(--gold-deep); font-weight: 700; }

/* ---------- 底部导航 ---------- */
.tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-top: 1px solid rgba(228, 233, 242, .9);
  display: flex;
  height: calc(62px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 50;
  box-shadow: 0 -6px 24px rgba(13, 31, 64, .06);
}
.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
  position: relative;
  transition: color .18s;
  letter-spacing: .5px;
}
.tab i { font-style: normal; width: 23px; height: 23px; transition: transform .18s; }
.tab i svg { width: 100%; height: 100%; display: block; }
.tab.active { color: var(--primary); font-weight: 700; }
.tab.active i { transform: translateY(-1px) scale(1.06); filter: drop-shadow(0 3px 5px rgba(13, 31, 64, .28)); }
.tab.active::before {
  content: "";
  position: absolute;
  top: 0;
  width: 26px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: var(--gold-grad);
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 102px;
  background: rgba(13, 31, 64, .92);
  color: #fff;
  padding: 12px 22px;
  border-radius: 13px;
  font-size: 13px;
  display: none;
  z-index: 99;
  max-width: 86%;
  text-align: center;
  line-height: 1.6;
  border: 1px solid rgba(201, 168, 106, .35);
  box-shadow: 0 14px 34px rgba(10, 23, 48, .4);
  backdrop-filter: blur(8px);
  animation: toastIn .25s ease both;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-thumb { background: #c9d2e0; border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

@media (min-width: 640px) {
  #main, .topbar { max-width: 640px; margin: 0 auto; }
  .topbar { border-radius: 0 0 32px 32px; }
  .tabbar { max-width: 640px; left: 50%; transform: translateX(-50%); border-radius: 18px 18px 0 0; }
}

/* ==========================================================
   账号：登录 / 注册（短信验证码）
   ========================================================== */
.auth-tabs, .mode-tabs {
  display: flex;
  border-radius: 11px;
  background: #eef1f7;
  padding: 4px;
  gap: 4px;
  margin-bottom: 16px;
}
.mode-tabs { background: #f4f6fa; margin-top: 2px; }
.auth-tabs a, .mode-tabs a {
  flex: 1;
  text-align: center;
  padding: 9px 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--text-2);
  border-radius: 8px;
  cursor: pointer;
  transition: all .18s;
}
.auth-tabs a.active {
  background: var(--primary-grad);
  color: #fff;
  box-shadow: 0 4px 12px -4px rgba(13, 31, 64, .45);
}
.mode-tabs a { font-size: 13px; letter-spacing: .5px; }
.mode-tabs a.active {
  background: #fff;
  color: var(--primary);
  box-shadow: 0 1px 4px rgba(15, 23, 42, .12);
}

.code-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.code-row input { flex: 1; min-width: 0; }
.sms-btn {
  flex: none;
  width: 118px;
  font-size: 13px !important;
  padding: 0 8px !important;
  white-space: nowrap;
  background: #fdf6ea !important;
  color: var(--gold-deep) !important;
  border: 1px solid #ecd9b4 !important;
}
.sms-btn:disabled { opacity: .55; }

/* 已登录账号卡 */
.user-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--primary-grad);
  border: 1px solid rgba(201, 168, 106, .45);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.user-card::before {
  content: "";
  position: absolute;
  right: -30px; top: -30px;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 168, 106, .22), transparent 70%);
  pointer-events: none;
}
.avatar {
  flex: none;
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--gold-deep);
  background: linear-gradient(140deg, #fdf3e0, #f0dfba);
  border: 2px solid rgba(201, 168, 106, .8);
}
.u-info { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.u-info b { font-size: 16px; letter-spacing: .5px; }
.u-info .muted { color: rgba(255, 255, 255, .68); font-size: 13px; }
.u-info .small { font-size: 11.5px; }
.btn.ghost {
  flex: none;
  background: transparent !important;
  color: #e8d3a7 !important;
  border: 1px solid rgba(201, 168, 106, .7);
  padding: 8px 14px;
  font-size: 13px;
}
.u-links { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.u-links a {
  padding: 11px 2px;
  font-size: 14px;
  color: var(--text-2);
  border-bottom: 1px dashed var(--line);
  cursor: pointer;
}
.u-links a:last-child { border-bottom: none; }
.u-links a:active { color: var(--gold-deep); }

/* ==========================================================
   账号弹窗（登录 / 注册 / 我的账号设置）
   ========================================================== */
.topbar { position: relative; }

/* 弹窗遮罩 + 底部滑出面板 */
.modal-mask {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(8, 15, 30, .62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: maskIn .18s ease;
}
@keyframes maskIn { from { opacity: 0; } to { opacity: 1; } }

.modal-sheet {
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #f2f4f9;
  border-radius: 20px 20px 0 0;
  border-top: 1px solid rgba(201, 168, 106, .5);
  box-shadow: 0 -12px 40px rgba(8, 15, 30, .45);
  padding: 0 14px calc(20px + env(safe-area-inset-bottom));
  animation: sheetUp .26s cubic-bezier(.2, .8, .3, 1);
}
@keyframes sheetUp { from { transform: translateY(48px); opacity: .4; } to { transform: none; opacity: 1; } }

.modal-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 4px 10px;
  background: linear-gradient(180deg, #f2f4f9 82%, rgba(242, 244, 249, 0));
}
.modal-head b { font-size: 16px; letter-spacing: .5px; }
.modal-close {
  flex: none;
  width: 30px; height: 30px;
  border: none;
  border-radius: 50%;
  background: #e6eaf2;
  color: var(--text-2);
  font-size: 13px;
  cursor: pointer;
  transition: background .15s;
}
.modal-close:active { background: #d9dfe9; }

/* 弹窗内卡片间距 */
.modal-sheet .form { background: transparent; }
.modal-sheet .card { margin: 0 0 12px; box-shadow: 0 1px 3px rgba(15, 23, 42, .06); }
.modal-sheet .tip-line { margin-bottom: 0; }

/* 桌面/宽屏：居中悬浮窗 */
@media (min-width: 640px) {
  .modal-mask { align-items: center; padding: 20px; }
  .modal-sheet {
    border-radius: 18px;
    border: 1px solid rgba(201, 168, 106, .4);
    padding-bottom: 20px;
  }
}

/* ==========================================================
   弹窗表单简洁风（下划线主Tab + 右侧小切换 + 无标签输入框）
   ========================================================== */
.modal-sheet .auth-tabs {
  background: none;
  padding: 0;
  gap: 0;
  margin: 2px 0 20px;
  border-radius: 0;
  border-bottom: 1px solid #e4e8f0;
}
.modal-sheet .auth-tabs a {
  flex: 1;
  padding: 10px 0 13px;
  font-size: 15px;
  letter-spacing: 3px;
  text-indent: 3px;
  color: var(--text-2);
  background: none;
  border-radius: 0;
  position: relative;
  transition: color .18s;
}
.modal-sheet .auth-tabs a.active {
  background: none;
  color: var(--primary);
  box-shadow: none;
  font-weight: 700;
}
.modal-sheet .auth-tabs a.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  width: 36px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #d8b877, #a5813f);
}
.modal-sheet .mode-tabs {
  background: none;
  padding: 0;
  margin: 0 0 18px;
  justify-content: flex-end;
  align-items: center;
  gap: 0;
}
.modal-sheet .mode-tabs a {
  flex: none;
  font-size: 12.5px;
  letter-spacing: 0;
  padding: 3px 2px;
  color: #9aa3b5;
  font-weight: 500;
  transition: color .15s;
}
.modal-sheet .mode-tabs a.active {
  background: none;
  color: var(--gold-deep);
  box-shadow: none;
  font-weight: 700;
}
.modal-sheet .mode-sep {
  width: 1px;
  height: 12px;
  background: #d6dce6;
  margin: 0 10px;
}
.modal-sheet .form input {
  width: 100%;
  height: 47px;
  margin: 0 0 12px;
  padding: 0 15px;
  border: 1px solid #e2e7f0;
  border-radius: 11px;
  background: #fff;
  font-size: 14.5px;
  letter-spacing: .3px;
  color: var(--text);
  transition: border-color .18s, box-shadow .18s;
}
.modal-sheet .form input:focus {
  border-color: #c9a86a;
  box-shadow: 0 0 0 3px rgba(201, 168, 106, .13);
  outline: none;
}
.modal-sheet .form input::placeholder { color: #a8b0bf; }
.modal-sheet .code-row { margin-bottom: 12px; }
.modal-sheet .code-row input { margin-bottom: 0; }
.modal-sheet .sms-btn { height: 47px; border-radius: 11px; font-size: 13px; }
.modal-sheet .btn.primary {
  height: 47px;
  border-radius: 11px;
  font-size: 15px;
  letter-spacing: 8px;
  text-indent: 8px;
  margin-top: 6px;
}
.modal-sheet .tip-line {
  font-size: 11.5px;
  text-align: center;
  margin-top: 16px;
  margin-bottom: 0;
  line-height: 1.7;
}
/* 已登录设置视图：弹窗内也走简洁留白 */
.modal-sheet .user-card { margin-bottom: 12px; }
/* 弹窗内「暂不登录，先浏览」出口 */
.modal-sheet .skip-auth {
  display: block;
  text-align: center;
  font-size: 12.5px;
  color: #8a93a6;
  text-decoration: none;
  padding: 10px 0 2px;
  transition: color .15s;
}
.modal-sheet .skip-auth:hover { color: var(--gold-deep); }
/* 密码框：显示/隐藏按钮 */
.modal-sheet .pwd-wrap { position: relative; margin-bottom: 12px; }
.modal-sheet .pwd-wrap input { margin-bottom: 0; padding-right: 48px; }
.modal-sheet .pwd-eye {
  position: absolute;
  top: 50%;
  right: 7px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: none;
  background: none;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #a3adbf;
  transition: color .15s, background .15s;
}
.modal-sheet .pwd-eye:hover { color: var(--gold-deep); background: rgba(201, 168, 106, .1); }
.modal-sheet .pwd-eye svg { width: 19px; height: 19px; pointer-events: none; }
.modal-sheet .pwd-eye .eye-off { display: none; }
.modal-sheet .pwd-eye.on .eye-on { display: none; }
.modal-sheet .pwd-eye.on .eye-off { display: block; }

/* 表单字段小提示 */
.field-tip {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--muted);
  margin: -2px 0 5px;
  letter-spacing: .2px;
}

/* 首页：我的申请进度提示 */
.my-app-status { display: flex; flex-direction: column; gap: 10px; }
.app-status {
  border: 1px solid #e8edf5;
  border-left: 3px solid #c9a86a;
  border-radius: 12px;
  background: #fff;
  padding: 12px 14px;
  font-size: 13.5px;
}
.app-status.pending { border-left-color: #e5943f; background: #fffdf8; }
.app-status.rejected { border-left-color: #d1544a; background: #fffafa; }
.app-status .row { display: flex; align-items: center; gap: 9px; }
.app-status .row b { font-size: 14px; color: var(--text); font-weight: 600; }
.app-status .reason { margin-top: 7px; color: #b8443a; font-size: 12.5px; line-height: 1.6; }
.app-status .act { margin-top: 8px; display: flex; justify-content: flex-end; }
.app-status .act a { color: var(--primary); font-size: 12.5px; cursor: pointer; }

/* ---------- 申请二级页头（替代原底部「申请代理」Tab） ---------- */
.subhead { display: flex; align-items: center; gap: 10px; padding: 14px 2px 10px; }
.subhead .back {
  display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid rgba(228, 233, 242, .9); background: #fff;
  color: var(--text); font-size: 13px; font-weight: 500;
  padding: 7px 13px 7px 8px; border-radius: 999px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(13, 31, 64, .07);
  transition: transform .12s, background .15s;
}
.subhead .back svg { width: 16px; height: 16px; }
.subhead .back:active { transform: scale(.96); background: #f7f9fc; }
.subhead .sub-t { font-size: 14.5px; font-weight: 700; letter-spacing: .5px; color: var(--text); }

/* ---------- 我的页：账号卡 ---------- */
#page-mine > .acct-card { margin-top: 14px; }
.acct-row { display: flex; align-items: center; gap: 12px; }
.acct-avatar {
  width: 46px; height: 46px; flex: none; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700; color: #8c6d33;
  background: linear-gradient(135deg, #f7f0e1, #e9ddc4);
  border: 1px solid rgba(201, 168, 106, .45);
}
.acct-avatar.on { color: #fff; background: var(--primary-grad); border-color: transparent; }
.acct-info { min-width: 0; flex: 1; }
.acct-info b { display: block; font-size: 15px; letter-spacing: .3px; }
.acct-info .muted { display: block; font-size: 12px; margin-top: 3px; }
.acct-row .btn { margin-left: auto; flex: none; }

/* ---------- 镇街行内「申请」按钮（首页查询 ↔ 申请联动） ---------- */
.area-row .cnt, .town-item > span:last-child { display: inline-flex; align-items: center; gap: 6px; }
.mini-apply {
  padding: 4px 11px; font-size: 11.5px; font-weight: 600; line-height: 1.4;
  border-radius: 999px; border: 1px solid rgba(201, 168, 106, .6);
  background: #fff; color: var(--gold-deep); cursor: pointer;
  transition: transform .12s, background .15s;
}
.mini-apply:active { transform: scale(.94); background: #fdf7ea; }

/* ---------- 我的页：区块标题 ---------- */
.sec-band { display: flex; align-items: baseline; gap: 8px; padding: 6px 4px 9px; }
.sec-band b { font-size: 14px; letter-spacing: .4px; }
.sec-band small { color: var(--muted); font-size: 11.5px; }
#page-mine .home-actions { margin-top: 12px; }

/* 申请二级页：隐藏底部导航，专注填写（返回按钮在页头） */
.tabbar.sub { display: none; }
body.sub-page { padding-bottom: 16px; }

/* 我的页：申请记录列表（卡片内） */
.mine-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.mine-list .empty-tip { padding: 18px 8px; }

/* ==========================================================
   密码：强度条 / 忘记密码 / 大写锁定提示
   ========================================================== */
.modal-sheet .pwd-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: -4px 0 12px;
  min-height: 18px;
}
.modal-sheet .link-mini {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gold-deep);
  text-decoration: none;
  cursor: pointer;
}
.modal-sheet .link-mini:hover { text-decoration: underline; }
.modal-sheet .caps-hint {
  margin-right: auto;
  font-size: 11.5px;
  line-height: 1.4;
  color: #b4342a;
  background: #fdecea;
  border: 1px solid #f6cfc9;
  border-radius: 6px;
  padding: 2px 7px;
}

.modal-sheet .pwd-meter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -4px 0 12px;
}
.modal-sheet .pwd-bars { display: inline-flex; gap: 3px; flex: none; }
.modal-sheet .pwd-bars i {
  width: 18px;
  height: 4px;
  border-radius: 2px;
  background: #e4e8f0;
  transition: background .2s;
}
.modal-sheet .pwd-meter[data-level="1"] .pwd-bars i:nth-child(1) { background: #e2574c; }
.modal-sheet .pwd-meter[data-level="2"] .pwd-bars i:nth-child(-n+2) { background: #e8a33d; }
.modal-sheet .pwd-meter[data-level="3"] .pwd-bars i { background: #2f9e63; }
.modal-sheet .pwd-tip { font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.modal-sheet .pwd-tip.bad { color: #b4342a; }
.modal-sheet .pwd-tip.ok { color: #1f8a55; }

.modal-sheet .forgot-tip {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 2px 0 14px;
}

/* 账号设置（#userBox）里的密码框：与登录表单同款样式 */
#userBox .pwd-wrap { position: relative; margin-bottom: 12px; }
#userBox .pwd-wrap input {
  width: 100%;
  height: 47px;
  margin: 0;
  padding: 0 48px 0 15px;
  border: 1px solid #e2e7f0;
  border-radius: 11px;
  background: #fff;
  font-size: 14px;
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
#userBox .pwd-wrap input:focus {
  outline: none;
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px rgba(168, 132, 63, .14);
}
#userBox .pwd-wrap input::placeholder { color: #b3bdcd; }

/* ==========================================================
   注册弹窗视觉优化 v2：分组、满宽强度条、一致性校验、按钮层次
   ========================================================== */

/* 移动端顶部拖动提示条（sheet 语感） */
@media (max-width: 639px) {
  .modal-sheet::before {
    content: "";
    display: block;
    width: 38px;
    height: 4px;
    margin: 9px auto 0;
    border-radius: 2px;
    background: #dde3ee;
  }
}

/* 弹窗标题：左侧金色短竖线，和内容形成层级 */
.modal-head { padding: 13px 4px 11px; }
.modal-head b {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 17px;
  letter-spacing: .6px;
  color: var(--text);
}
.modal-head b::before {
  content: "";
  flex: none;
  width: 3px;
  height: 15px;
  border-radius: 2px;
  background: var(--gold-grad);
}

/* 表单分组：每组一个小标题 + 组间虚线分隔 */
.modal-sheet .f-sec-t {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .4px;
  color: var(--text-2);
}
.modal-sheet .f-sec-t small {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
}
.modal-sheet .f-sec + .f-sec {
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px dashed #e6eaf2;
}
.modal-sheet .f-sec:last-of-type { margin-bottom: 2px; }

/* 密码强度条：满宽三段（原来只有 3 根 18px 短线，存在感太弱） */
.modal-sheet .pwd-meter {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin: -5px 0 13px;
}
.modal-sheet .pwd-bars {
  display: flex;
  gap: 4px;
  width: 100%;
}
.modal-sheet .pwd-bars i {
  flex: 1;
  width: auto;
  height: 5px;
  border-radius: 3px;
  background: #e6ebf3;
}
.modal-sheet .pwd-tip { font-size: 11.5px; line-height: 1.5; }

/* 两次输入不一致：输入框描红 + 行内提示 */
.modal-sheet .form input.bad,
#userBox .pwd-wrap input.bad {
  border-color: #e2574c !important;
  box-shadow: 0 0 0 3px rgba(226, 87, 76, .12) !important;
}
.modal-sheet .pwd-match {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: -6px 0 12px;
  padding-left: 2px;
  font-size: 11.5px;
  color: #b4342a;
}
.modal-sheet .pwd-match::before {
  content: "";
  width: 3px;
  height: 11px;
  border-radius: 2px;
  background: #e2574c;
}

/* 主按钮：更明确的可点击层次 + 提交中状态 */
.modal-sheet .btn.primary {
  height: 48px;
  border-radius: 12px;
  margin-top: 12px;
  box-shadow: 0 10px 22px -12px rgba(10, 23, 48, .6);
}
.modal-sheet .btn.primary:disabled {
  letter-spacing: 2px;
  text-indent: 2px;
  box-shadow: none;
}

/* 底部说明与出口：加一条细分割线，避免和表单糊在一起 */
.modal-sheet .tip-line {
  margin-top: 15px;
  padding-top: 12px;
  border-top: 1px solid #e9edf4;
  color: #9aa4b6;
}
.modal-sheet .skip-auth { padding-top: 12px; }

/* 弹窗内协议链接 + 底部出口间距微调 */
.modal-sheet .agree-link {
  color: var(--gold-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(168, 132, 63, .38);
  padding-bottom: 1px;
}
.modal-sheet .tp-line, .modal-sheet .tip-line { word-break: break-word; }
.modal-sheet .skip-auth { padding-top: 6px; }
.modal-sheet .f-sec + .f-sec { border-top-color: #e3e8f1; }

/* 分组分隔线：略微加深，让三段结构看得清 */
.modal-sheet .f-sec + .f-sec { border-top-color: #dde3ee; }
.modal-sheet .f-sec + .f-sec { border-top-color: #d9e0ec; }

/* 矮屏（如 360×640）：压缩纵向间距，减少滚动距离 */
@media (max-height: 720px) {
  .modal-sheet .f-sec + .f-sec { margin-top: 12px; padding-top: 11px; }
  .modal-sheet .f-sec-t { margin-bottom: 8px; }
  .modal-sheet .form input { height: 44px; margin-bottom: 10px; }
  .modal-sheet .code-row { margin-bottom: 10px; }
  .modal-sheet .sms-btn { height: 44px; }
  .modal-sheet .auth-tabs { margin-bottom: 15px; }
  .modal-sheet .pwd-meter { margin: -4px 0 11px; }
  .modal-sheet .tip-line { margin-top: 11px; padding-top: 10px; }
  .modal-sheet .skip-auth { padding-top: 4px; }
  .modal-sheet .btn.primary { height: 46px; margin-top: 8px; }
}

/* ==========================================================
   v1.2 体验优化：卡片分离 / 触控反馈 / 加载态
   ========================================================== */

/* 主统计卡：加深色卡与深色头部的分界（金边 + 更实的投影），避免与 header 融为一体 */
.stat-card.green {
  background: linear-gradient(155deg, #1a3a6d 0%, #0e2347 68%, #16305e 100%);
  border: 1px solid rgba(201, 168, 106, .38);
  box-shadow: 0 12px 28px -10px rgba(6, 15, 32, .62), inset 0 1px 0 rgba(232, 211, 167, .18);
}
.stat-card.orange { box-shadow: 0 10px 26px -12px rgba(13, 31, 64, .28); }

/* 「区域代理说明」：提高文字对比度，右侧箭头有位移反馈 */
.home-actions .btn.ghost {
  color: #7a5a1c !important;
  border-color: #ddcba1;
  font-weight: 600;
}
.home-actions .btn.ghost:active { background: #f7efdc !important; transform: scale(.985); }

/* 列表行 / 小按钮触控反馈（移动端无 hover，靠 :active 给反馈） */
.area-row { transition: background .16s, transform .1s; }
.area-row:active { background: #eef3fb; transform: scale(.995); }
.mini-apply:active { transform: scale(.94); }
.cascade select:active { border-color: #c9d6ea; }

/* 区域信息加载态：保留旧内容但弱化，避免白屏跳动 */
.map-area-info.is-loading { position: relative; }
.map-area-info.is-loading .area-list,
.map-area-info.is-loading .area-head { opacity: .42; filter: saturate(.7); transition: opacity .15s; }
.map-area-info.is-loading::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: areaLoading 1s linear infinite;
}
@keyframes areaLoading {
  0% { transform: translateX(-40%); opacity: .2; }
  50% { opacity: 1; }
  100% { transform: translateX(40%); opacity: .2; }
}

/* 数字等宽，统计数字变化时不抖动 */
.stat-card b, .area-row .muted { font-variant-numeric: tabular-nums; }

/* 统计卡与头部的层叠关系微调：减少压叠高度，让深色卡主体落在浅色背景上 */
#main > .page.active > .stat-row:first-child { margin-top: -18px; }
.stat-card.green { border-color: rgba(201, 168, 106, .5); }