/* h5.css —— 四角色 H5 共享样式（Step 8） */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; }
body {
  font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  background:#F5F6F8; color:#1A1A1A;
  display:flex; justify-content:center;
}
.page {
  width:100%; max-width:480px; min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column; background:#F5F6F8;
}
.navbar {
  height:44px; flex:none; display:flex; align-items:center;
  background:#fff; border-bottom:1px solid #EEE; font-size:17px; font-weight:600;
  padding-top:env(safe-area-inset-top); position:sticky; top:0; z-index:10;
}
.navbar .back { width:56px; text-align:center; font-size:22px; font-weight:400; color:#333; text-decoration:none; flex:none; }
.navbar .ttl { flex:1; text-align:center; }
.navbar .side { width:56px; flex:none; }
.body { flex:1; padding:12px 12px 20px; }
.tabbar { flex:none; display:flex; background:#fff; border-top:1px solid #EEE; padding-bottom:env(safe-area-inset-bottom); position:sticky; bottom:0; }
.tab { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:7px 0 5px; font-size:10px; color:#999; text-decoration:none; user-select:none; }
.tab .ico { font-size:20px; line-height:1; }
.tab.on { color:#0E6FD8; font-weight:600; }
.tabbar-btn { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:7px 0 5px; font-size:10px; color:#999; cursor:pointer; background:none; border:none; font-family:inherit; }
.tabbar-btn .ico { font-size:20px; line-height:1; }
.tabbar-btn.on { color:#0E6FD8; font-weight:600; }

/* 角色主题色：绿=消费者 蓝=合作商 橙=推广员 紫=平台 */
.theme-consumer { --theme:#07C160; --theme2:#05A953; }
.theme-merchant { --theme:#0E6FD8; --theme2:#3A8AF0; }
.theme-agent    { --theme:#E67E22; --theme2:#F0983E; }
.theme-admin    { --theme:#7C4DFF; --theme2:#9A6DFF; }
.page .navbar { color:var(--theme); }

/* 卡片与统计 */
.card { background:#fff; border-radius:12px; padding:14px; margin-bottom:12px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.card h3 { font-size:14px; color:#333; margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; }
.card h3 .more { font-size:12px; color:#999; font-weight:400; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.stat { background:#F7F9FC; border-radius:10px; padding:12px 8px; text-align:center; }
.stat .num { font-size:20px; font-weight:700; color:var(--theme); }
.stat .num.gold { color:#E6A23C; }
.stat .lbl { font-size:11px; color:#888; margin-top:3px; }
.hero { border-radius:14px; padding:20px 16px; color:#fff; text-align:center; margin-bottom:12px; background:linear-gradient(160deg,var(--theme),var(--theme2)); }
.hero .amount { font-size:42px; font-weight:800; }
.hero .amount small { font-size:16px; font-weight:400; }
.hero .lbl { font-size:12px; opacity:.85; margin-bottom:4px; }
.kv { display:flex; justify-content:space-between; align-items:center; font-size:13px; padding:8px 0; border-bottom:1px dashed #F0F0F0; }
.kv:last-child { border-bottom:none; }
.kv .k { color:#888; }
.kv .v { font-weight:600; }

/* 榜单 */
.board-title { text-align:center; margin:6px 0 14px; }
.board-title .big { font-size:19px; font-weight:800; background:linear-gradient(90deg,#B8860B,#E6A23C); -webkit-background-clip:text; background-clip:text; color:transparent; }
.board-title .sub { font-size:11px; color:#999; margin-top:3px; }
.podium { display:flex; align-items:flex-end; justify-content:center; gap:10px; margin-bottom:14px; }
.pod { background:#fff; border-radius:12px 12px 0 0; padding:12px 10px 8px; text-align:center; width:31%; box-shadow:0 1px 3px rgba(0,0,0,.05); }
.pod .medal { font-size:24px; }
.pod .name { font-size:12px; font-weight:600; margin:4px 0 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pod .cnt { font-size:17px; font-weight:800; color:#E6A23C; }
.pod .u { font-size:10px; color:#999; }
.pod.p1 { padding-bottom:22px; border-top:3px solid #E6A23C; }
.pod.p2 { padding-bottom:12px; border-top:3px solid #B8B8B8; }
.pod.p3 { padding-bottom:8px; border-top:3px solid #C98A5E; }
.pod.me { outline:2px solid var(--theme); }
.row { display:flex; align-items:center; padding:11px 10px; background:#fff; border-radius:10px; margin-bottom:8px; }
.row .rk { width:30px; text-align:center; font-weight:800; color:#999; font-size:15px; flex:none; }
.row .rk.top { color:#E6A23C; }
.row .nm { flex:1; font-size:14px; }
.row .vl { font-weight:700; color:#E6A23C; font-size:15px; }
.row.me { outline:2px solid var(--theme); background:#F0F7FF; }

/* 表单 */
.form { padding:10px 4px; }
.form .lab { font-size:13px; color:#666; margin:14px 0 6px; }
.input {
  width:100%; height:46px; border:1px solid #E3E6EB; border-radius:10px;
  padding:0 14px; font-size:16px; background:#FAFBFC; font-family:inherit; color:#1A1A1A;
}
.input:focus { outline:none; border-color:var(--theme); background:#fff; }
.btn-main {
  width:100%; height:46px; border:none; border-radius:12px; margin-top:20px;
  background:linear-gradient(90deg,var(--theme),var(--theme2)); color:#fff;
  font-size:16px; font-weight:600; font-family:inherit; cursor:pointer;
}
.btn-main:active { opacity:.85; }
.btn-sub {
  width:100%; height:44px; border:1px solid var(--theme); border-radius:12px; margin-top:12px;
  background:#fff; color:var(--theme); font-size:15px; font-family:inherit; cursor:pointer;
}
.code-row { display:flex; gap:10px; }
.code-row .input { flex:1; }
.code-row .send {
  flex:none; width:112px; border:1px solid var(--theme); background:#fff; color:var(--theme);
  border-radius:10px; font-size:13px; font-family:inherit; cursor:pointer;
}
.code-row .send:disabled { color:#BBB; border-color:#DDD; }

/* 进度条 */
.bar-bg { height:14px; background:#EEF1F5; border-radius:20px; overflow:hidden; margin:14px 6px 8px; }
.bar-fill { height:100%; border-radius:20px; background:linear-gradient(90deg,var(--theme2),var(--theme)); width:0; transition:width 1s ease .2s; }

/* 付款码 */
.qr-box { background:#fff; border-radius:14px; padding:18px; text-align:center; margin-bottom:12px; }
.qr-box img { width:220px; height:220px; }
.timer { display:inline-flex; align-items:center; gap:6px; margin-top:10px; font-size:13px; color:var(--theme); font-weight:600; }
.timer .sec { background:var(--theme); color:#fff; border-radius:6px; padding:2px 8px; font-size:15px; min-width:34px; }

/* 通用小件 */
.toast {
  position:fixed; left:50%; bottom:120px; transform:translateX(-50%);
  background:rgba(0,0,0,.78); color:#fff; font-size:13px; border-radius:20px;
  padding:9px 18px; z-index:99; opacity:0; transition:opacity .25s; pointer-events:none; white-space:nowrap;
}
.toast.show { opacity:1; }
.api-chip {
  position:fixed; right:10px; top:52px; z-index:20; font-size:10px; border-radius:12px;
  padding:3px 8px; background:#EEE; color:#888;
}
.api-chip.live { background:#E6F7EE; color:#07C160; }
.badge-ok { background:#E6F7EE; color:#07C160; border-radius:6px; padding:2px 8px; font-size:11px; }
.badge-pend { background:#FFF6E5; color:#E6A23C; border-radius:6px; padding:2px 8px; font-size:11px; }

/* ===== Step8F: 副业创收 / 诉求申请 / 平台端「明亮作战室」浅色主题 ===== */
.btn-side { display:block; width:100%; border:none; border-radius:10px; padding:13px 0; font-size:16px; font-weight:700; color:#fff; background:#07C160; cursor:pointer; }
.btn-side:active { opacity:.85; }
.mask-pop { position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; align-items:center; justify-content:center; z-index:99; }
.mask-pop.show { display:flex; }
.pwd-pop { background:#FFFFFF; border:1px solid #EBEEF5; border-radius:12px; width:82%; max-width:320px; padding:20px 18px 16px; box-shadow:0 12px 40px rgba(0,0,0,.12); color:#303133; }
.pop-img { background:#fff; border-radius:12px; padding:10px; max-width:78%; text-align:center; }
.pop-img img { display:block; width:100%; border-radius:10px; }
.pop-img .cap { font-size:13px; color:#07C160; font-weight:700; padding:8px 0 2px; }
.pop-close { position:fixed; right:18px; top:18px; color:#909399; font-size:26px; z-index:100; cursor:pointer; line-height:1; }
.btn-demand { display:flex; align-items:center; justify-content:center; gap:6px; border:none; border-radius:10px; padding:12px 0; font-size:16px; font-weight:700; color:#fff; background:#07C160; cursor:pointer; width:100%; }
.btn-demand.done { background:#C0C4CC; box-shadow:none; }
.demand-pop { background:#fff; border-radius:12px; width:82%; max-width:320px; padding:18px 16px 14px; color:#303133; }
.demand-pop h3 { text-align:center; font-size:17px; margin-bottom:4px; color:#303133; }
.demand-pop .sub { text-align:center; font-size:12px; color:#909399; margin-bottom:12px; }
.opt-row { display:flex; align-items:center; gap:10px; border:1.5px solid #EBEEF5; border-radius:10px; padding:12px; margin-bottom:10px; cursor:pointer; }
.opt-row.on { border-color:#07C160; background:#E6F7EE; }
.opt-row .box { width:20px; height:20px; border:2px solid #CCC; border-radius:5px; flex:none; position:relative; }
.opt-row.on .box { border-color:#07C160; background:#07C160; }
.opt-row.on .box::after { content:'✓'; color:#fff; font-size:13px; position:absolute; left:2px; top:0; }
.opt-row .lbl { font-size:15px; font-weight:600; color:#303133; }
/* 平台端「明亮作战室」浅色主题（替代原深蓝密室） */
.dark { background:#F5F7FA; color:#303133; min-height:100vh; }
.dark .navbar { background:#FFFFFF; color:#303133; border-bottom:1px solid #EBEEF5; }
.dark .slogan { text-align:center; padding:14px 0 4px; font-size:20px; font-weight:900; letter-spacing:2px; color:#303133; }
.dark .sub-slogan { text-align:center; font-size:11px; color:#909399; letter-spacing:2px; margin-bottom:10px; }
.neuo { background:#FFFFFF; border:1px solid #EBEEF5; border-radius:12px; padding:12px 14px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.neuo .k { font-size:11px; color:#909399; letter-spacing:.5px; }
.neuo .v { font-size:26px; font-weight:900; color:#07C160; font-family:'Courier New',monospace; }
.neuo .v.gold { color:#E6A23C; }
.neuo .v.green { color:#07C160; }
.neuo .v.red { color:#F56C6C; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.ticker { overflow:hidden; height:34px; border-radius:10px; border:1px solid #EBEEF5; background:#FFFFFF; position:relative; }
.ticker .tk { height:34px; line-height:34px; font-size:12px; color:#606266; padding:0 12px; white-space:nowrap; animation:tkup 12s linear infinite; }
@keyframes tkup { 0%{transform:translateY(0)} 22%{transform:translateY(-34px)} 25%{transform:translateY(-34px)} 47%{transform:translateY(-68px)} 50%{transform:translateY(-68px)} 72%{transform:translateY(-102px)} 75%{transform:translateY(-102px)} 97%{transform:translateY(-136px)} 100%{transform:translateY(-136px)} }
.dark h4.sec { font-size:13px; color:#606266; margin:14px 0 8px; letter-spacing:1px; border-left:3px solid #07C160; padding-left:8px; }
.dark table { width:100%; border-collapse:collapse; font-size:12px; }
.dark th { color:#909399; font-weight:600; text-align:left; padding:7px 6px; border-bottom:1px solid #EBEEF5; white-space:nowrap; }
.dark td { padding:8px 6px; border-bottom:1px solid #F2F4F7; color:#303133; white-space:nowrap; }
.tag { display:inline-block; font-size:10px; border-radius:4px; padding:2px 6px; font-weight:700; }
.tag.ok { background:#E6F7EE; color:#07C160; }
.tag.wait { background:#FFF6E5; color:#E6A23C; }
.tag.err { background:#FDEEEE; color:#F56C6C; }
.tag.info { background:#ECF0FD; color:#0E6FD8; }
.light-dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; }
.light-dot.g { background:#07C160; }
.light-dot.y { background:#E6A23C; }
.light-dot.r { background:#F56C6C; }
.fun-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.fun-lbl { width:56px; font-size:12px; color:#909399; flex:none; }
.fun-bar { height:22px; border-radius:4px; background:#07C160; display:flex; align-items:center; justify-content:flex-end; padding-right:8px; color:#fff; font-size:11px; font-weight:800; min-width:36px; }
.admin-tabs { display:flex; gap:8px; overflow-x:auto; padding:10px 12px 4px; }
.admin-tabs a { flex:none; font-size:12px; color:#606266; border:1px solid #EBEEF5; border-radius:14px; padding:6px 12px; text-decoration:none; background:#fff; }
.admin-tabs a.on { color:#07C160; border-color:#07C160; background:#E6F7EE; }
.badge-red { display:inline-block; margin-left:4px; background:#F56C6C; color:#fff; font-size:10px; font-weight:700; border-radius:10px; padding:1px 6px; line-height:1.5; vertical-align:1px; }
.expand-detail { display:none; font-size:11px; color:#909399; padding:8px 6px 10px; background:#F7F8FA; border-radius:8px; margin:4px 0 8px; line-height:1.7; }
.expand-detail.show { display:block; }
.filter-bar { display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.filter-bar button { flex:none; font-size:12px; border-radius:14px; padding:6px 14px; border:1px solid #EBEEF5; background:#fff; color:#606266; cursor:pointer; }
.filter-bar button.on { color:#07C160; border-color:#07C160; background:#E6F7EE; }
.btn-pay { display:block; width:100%; border:none; border-radius:12px; padding:13px 0; font-size:16px; font-weight:900; color:#fff; background:#07C160; cursor:pointer; letter-spacing:2px; }
.pay-pop { background:#FFFFFF; border:1px solid #EBEEF5; border-radius:12px; width:86%; max-width:340px; padding:18px 16px; color:#303133; }
.pay-pop h3 { text-align:center; color:#303133; font-size:17px; margin-bottom:10px; }
.pay-pop .warn { background:#FDEEEE; border:1px solid #FBC4C4; color:#F56C6C; font-size:12px; border-radius:8px; padding:8px 10px; line-height:1.6; margin-bottom:10px; }
.pay-pop input { width:100%; box-sizing:border-box; border:1px solid #DCDFE6; background:#fff; color:#303133; border-radius:8px; padding:10px; font-size:16px; letter-spacing:6px; text-align:center; outline:none; }
.pay-pop input::placeholder { color:#C0C4CC; letter-spacing:1px; }
.hm { border-radius:8px; padding:8px 10px; background:#F7F8FA; border:1px solid #EBEEF5; margin-bottom:8px; }
.hm .heat-bar { height:8px; border-radius:4px; background:#EBEEF5; margin-top:6px; overflow:hidden; }
.hm .heat-bar i { display:block; height:100%; background:#07C160; }
.upload-box { border:2px dashed #DCDFE6; border-radius:14px; padding:20px; text-align:center; color:#909399; font-size:13px; cursor:pointer; }
.tier-f { font-size:12px; color:#F56C6C; font-weight:700; margin-top:6px; }
.badge-rej { background:#FDEEEE; color:#F56C6C; border-radius:6px; padding:2px 8px; font-size:11px; }
.mini-btn { border:none; border-radius:8px; padding:6px 12px; font-size:12px; font-family:inherit; cursor:pointer; }
.mini-btn.ok { background:#07C160; color:#fff; }
.mini-btn.no { background:#fff; color:#F56C6C; border:1px solid #F56C6C; }
.loading { text-align:center; padding:60px 0; color:#909399; font-size:13px; }
.tt { font-size:11px; color:#909399; text-align:center; margin-top:6px; }

/* ===== 战略指挥部首页：数据卡片 + 模块网格（明亮作战室） ===== */
.dc-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:4px; }
.dc-card { background:#fff; border:1px solid #EBEEF5; border-radius:12px; padding:14px 14px 12px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.dc-card .lbl { font-size:12px; color:#909399; }
.dc-card .num { font-size:26px; font-weight:900; color:#07C160; margin-top:6px; line-height:1.1; font-family:'Courier New',monospace; }
.dc-card .num .u { font-size:13px; color:#909399; font-family:inherit; font-weight:600; margin-left:2px; }
.dc-card .trend { font-size:11px; color:#909399; margin-top:4px; }
.dc-card .trend.up { color:#07C160; }
.dc-card .trend.down { color:#F56C6C; }
.dc-sec-tt { font-size:14px; font-weight:700; color:#303133; margin:18px 0 10px; display:flex; align-items:center; justify-content:space-between; }
.dc-sec-tt .more { font-size:12px; color:#909399; font-weight:400; }
.mod-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.mod-card { display:block; background:#fff; border:1px solid #EBEEF5; border-top:4px solid #07C160; border-radius:12px; padding:12px 12px 13px; text-decoration:none; color:inherit; box-shadow:0 1px 3px rgba(0,0,0,.04); transition:transform .12s ease; }
.mod-card:active { transform:translateY(1px); }
.mod-card .ico { font-size:20px; line-height:1; color:#606266; }
.mod-card .mt { font-size:15px; font-weight:700; color:#303133; margin-top:8px; }
.mod-card .md { font-size:12px; color:#909399; margin-top:4px; line-height:1.5; }
.dc-live { font-size:12px; line-height:2; color:#606266; }
.dc-live .light-dot { margin-right:6px; }
/* 顶部导航右侧：IP + 系统设置 */
.nav-right { display:flex; align-items:center; gap:10px; flex:none; }
.nav-right .ip { font-size:11px; color:#909399; }
.nav-right .sys { font-size:13px; color:#303133; text-decoration:none; border:1px solid #EBEEF5; background:#fff; border-radius:14px; padding:4px 10px; white-space:nowrap; }
.nav-right .sys:active { background:#F5F7FA; }
/* 通用浅色弹窗按钮（主/次） */
.btn-green { width:100%; border:none; border-radius:10px; padding:12px 0; font-size:15px; font-weight:700; background:#07C160; color:#fff; cursor:pointer; font-family:inherit; }
.btn-green:active { opacity:.85; }
.btn-green-sub { width:100%; border:1px solid #07C160; border-radius:10px; padding:12px 0; font-size:15px; font-weight:600; background:#fff; color:#07C160; cursor:pointer; font-family:inherit; }
.btn-gray { width:100%; border:1px solid #DCDFE6; border-radius:10px; padding:12px 0; font-size:15px; font-weight:600; background:#fff; color:#606266; cursor:pointer; font-family:inherit; }
.btn-gray:active { background:#F5F7FA; }
.link-green { color:#07C160; font-size:13px; cursor:pointer; text-decoration:none; }
.link-green:active { opacity:.7; }

/* ---- Step8G：打款成功顶部横幅 / 弹窗内下拉与备注 / 合作商+日期筛选 ---- */
.top-banner { position:fixed; top:0; left:0; right:0; z-index:120; background:linear-gradient(90deg,#00E5FF,#69F0AE); color:#06263A; font-weight:800; text-align:center; padding:14px 16px; font-size:14px; transform:translateY(-110%); transition:transform .35s ease; border-radius:0 0 16px 16px; box-shadow:0 8px 28px rgba(0,229,255,.4); }
.top-banner.show { transform:translateY(0); }
.pay-pop select, .pay-pop textarea { width:100%; box-sizing:border-box; margin-top:10px; background:#0B1226; border:1px solid #2A3B6E; color:#E7EFFF; border-radius:8px; padding:10px; font-size:13px; outline:none; font-family:inherit; }
.pay-pop textarea { resize:none; height:64px; }
.pay-pop .code-lab { font-size:11px; color:#8FA7DE; margin-top:10px; text-align:left; }
.btn-pay-confirm { flex:1; border:none; border-radius:10px; padding:10px 0; font-size:14px; font-weight:800; color:#06263A; background:linear-gradient(90deg,#00E5FF,#69F0AE); cursor:pointer; }
.btn-pay-confirm.off { background:#24345F; color:#7C8DBA; cursor:not-allowed; }
.filter-tools { display:flex; gap:8px; align-items:center; margin-bottom:4px; }
.filter-tools select, .filter-tools input { flex:1; min-width:0; background:#0B1226; border:1px solid #2A3B6E; color:#E7EFFF; border-radius:8px; padding:8px; font-size:12px; outline:none; font-family:inherit; }
.filter-tools button { border:1px solid #2A3B6E; background:none; color:#9FB4E8; border-radius:8px; padding:8px 12px; font-size:12px; cursor:pointer; }
.notice-bar { background:#FFF7E8; border:1px solid #FFD591; color:#AD6800; border-radius:10px; padding:10px 12px; font-size:12px; line-height:1.7; margin-bottom:10px; }

/* ============ V2.0 半屏弹窗（bottom sheet） ============ */
.sheet-mask { position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; align-items:flex-end; justify-content:center; z-index:99; }
.sheet-mask.show { display:flex; }
.sheet { background:#fff; border-radius:18px 18px 0 0; width:100%; max-width:480px; padding:18px 16px 28px; animation:sheetUp .3s ease; }
@keyframes sheetUp { from{transform:translateY(80px);opacity:0} to{transform:translateY(0);opacity:1} }
.sheet .sheet-tt { font-size:16px; font-weight:800; text-align:center; margin-bottom:14px; color:#1A1A1A; }
.sheet-item { display:flex; flex-direction:column; gap:3px; background:#F7F9FC; border-radius:12px; padding:14px; margin-bottom:10px; font-size:15px; font-weight:700; color:#1A1A1A; cursor:pointer; border:1.5px solid transparent; }
.sheet-item:active { border-color:#FF9100; background:#FFF7EC; }
.sheet-item small { font-size:11px; color:#999; font-weight:400; }