/* ============================================================
 * 店来宝 / AgentPay · 前后台共享样式（深色基调 · 支付蓝 token）
 * 由 bootstrap.php 内嵌样式抽取而成，供 layout 与登录/申请页复用。
 * 设计规范：店来宝三端 UI 设计规范 v1.1 —— 深色优先，主色 token 单一入口。
 * ============================================================ */

/* ---- Design Tokens（深色适配）----
 * 深色底上的交互强调需比浅色更亮以保证对比。规范主色锚 #185FA5，
 * 深色 UI 取其同族亮阶作交互色；改主色只改 --primary-* 这 5 档。 */
:root{
  /* 支付蓝主色族（深色适配亮阶） */
  --primary-strong:#0E4E8C;   /* 深蓝：hover 加深、重度 */
  --primary-main:#1F6FEB;    /* 主交互/按钮/链接（深底亮阶） */
  --primary-bright:#3B82F6;  /* 次级强调、图表 */
  --primary-soft:#1C2E45;    /* 激活底、hover 底 */
  --primary-ring:rgba(59,130,246,.5);

  /* 中性色（深色 slate） */
  --bg:#0f1115;
  --panel:#161922;
  --panel2:#1a1f2b;
  --border:#2a2e38;
  --ink:#e6e8ee;             /* 主文字 */
  --ink-2:#c6cad3;           /* 次文字 */
  --muted:#9aa0ac;           /* 弱文字 */
  --line:#2a2e38;

  /* 语义色（深色底） */
  --green:#3fbf7f;  --green-bg:#12362a;
  --amber:#e8a13c;  --amber-bg:#3a2f14;
  --red:#e5534b;    --red-bg:#3a1a1a;
  --info:#7fb3ff;   --info-bg:#1c2a3a;

  /* 三通道品牌色（Logo / 通道标识） */
  --wchat:#07C160;
  --alipay:#1677FF;
  --union:#E60012;

  /* 几何与字体 */
  --r:12px;
  --r-sm:8px;
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* 兼容旧名（从 #5b8cff 收敛到支付蓝，多处仍引用 var(--brand)/color 由类接管） */
}

/* ---- 重置 ---- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--bg);color:var(--ink);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}

/* ---- 品牌顶栏 ---- */
.topbar{display:flex;align-items:center;gap:18px;padding:0 22px;height:58px;background:linear-gradient(90deg,#12151d,#151a26);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;color:#fff;white-space:nowrap}
.brand .name{background:linear-gradient(120deg,#fff,#b9d4ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.nav{display:flex;gap:2px;flex:1;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav-item{padding:7px 14px;border-radius:var(--r-sm);color:var(--muted);font-size:13px;white-space:nowrap;transition:background .15s,color .15s}
.nav-item:hover{color:var(--ink);background:var(--panel2)}
.nav-item.active{color:#fff;background:linear-gradient(180deg,var(--primary-soft),var(--primary-soft));box-shadow:inset 0 0 0 1px rgba(59,130,246,.35)}
.right{display:flex;align-items:center;gap:12px;white-space:nowrap}
.who{color:var(--muted);font-size:13px}

/* ---- 布局 ---- */
.wrap{max-width:1120px;margin:0 auto;padding:24px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:20px;margin-bottom:20px;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.card h2{font-size:15px;font-weight:600;margin-bottom:16px;color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.stat{background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:16px;transition:border-color .15s}
.stat:hover{border-color:rgba(59,130,246,.4)}
.stat .label{font-size:12px;color:var(--muted)}
.stat .value{font-size:24px;font-weight:600;margin-top:4px;color:#fff;font-variant-numeric:tabular-nums}

/* ---- 表格 ---- */
table{width:100%;border-collapse:collapse}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--border);font-size:13px;vertical-align:top}
th{color:var(--muted);font-weight:500;background:var(--panel2)}
tr:hover td{background:var(--panel2)}

/* ---- 按钮 ---- */
.btn{display:inline-block;padding:8px 16px;border-radius:var(--r-sm);border:1px solid transparent;cursor:pointer;font-size:13px;background:linear-gradient(180deg,var(--primary-main),#1a63d8);color:#fff;font-weight:500;transition:opacity .15s,transform .05s}
.btn:hover{opacity:.9}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;border-color:var(--border);color:var(--muted)}
.btn.ghost:hover{color:var(--ink);border-color:rgba(59,130,246,.5)}
.btn.danger{background:var(--red)}
.btn.green{background:var(--green)}
.btn.small{padding:4px 10px;font-size:12px}

/* ---- 状态徽标 ---- */
.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;white-space:nowrap}
.badge.ok{background:var(--green-bg);color:var(--green)}
.badge.pending{background:var(--amber-bg);color:var(--amber)}
.badge.bad{background:var(--red-bg);color:var(--red)}
.badge.muted{background:#232836;color:var(--muted)}
.badge.info{background:var(--info-bg);color:var(--info)}

/* ---- 表单 ---- */
form label{display:block;margin:12px 0 4px;font-size:13px;color:var(--muted)}
input,select,textarea{width:100%;padding:10px 12px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--bg);color:var(--ink);font-size:14px;font-family:inherit;transition:border-color .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary-main);box-shadow:0 0 0 3px var(--primary-ring)}

/* ---- 提示条 ---- */
.alert{padding:12px 16px;border-radius:var(--r-sm);margin-bottom:16px;font-size:13px}
.alert.ok{background:var(--green-bg);color:var(--green)}
.alert.err{background:var(--red-bg);color:var(--red)}
.alert.info{background:var(--info-bg);color:var(--info)}

/* ---- 代码 / 弱文本 ---- */
.mono{font-family:var(--mono);font-size:12px}
.code{background:#0b0e14;border:1px solid var(--border);border-radius:var(--r-sm);padding:12px;overflow-x:auto;font-family:var(--mono);font-size:12px;color:#8ff0a4;white-space:pre}
.muted{color:var(--muted)}
.flex{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.mt{margin-top:12px}
a{color:var(--primary-bright);text-decoration:none}
a:hover{text-decoration:underline}

/* ---- 三通道融合 Logo ---- */
.glogo{display:inline-flex;align-items:center;justify-content:center;border-radius:10px;flex:none}
.glogo svg{display:block}

/* ---- 商户站深色模式开关（布局内由 JS + data-theme 驱动）---- */
.theme-btn{cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;border:1px solid var(--border);background:var(--panel2);color:var(--muted);font-size:12px;transition:all .15s}
.theme-btn:hover{color:var(--ink);border-color:rgba(59,130,246,.5)}

/* 商户站浅色覆盖：给 [data-theme="light"] 作用域内的卡片/文字切换成亮色（portal 页面）
   通过 body.theme-light 激活，见 bootstrap.php 输出。 */
body.theme-light{
  --bg:#eef2f7; --panel:#ffffff; --panel2:#f4f7fb; --border:#dfe5ee;
  --ink:#1a2333; --ink-2:#3b4658; --muted:#6b7686;
  --primary-main:#185FA5; --primary-bright:#2f7be6; --primary-soft:#e3eefb;
  --primary-ring:rgba(24,95,165,.2);
  --green:#15803d; --green-bg:#e5f6ec;
  --amber:#b45309; --amber-bg:#fdf1e0;
  --red:#dc2626;   --red-bg:#fdecec;
  --info:#1d5fbf;  --info-bg:#e6f0fe;
}
body.theme-light a{color:#1d6fd0}
body.theme-light .topbar{background:#fff;border-bottom-color:#e6ebf3}
body.theme-light .brand .name{background:linear-gradient(120deg,#123c6e,#185FA5);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.theme-light .nav-item.active{color:#185FA5;background:var(--primary-soft);box-shadow:none}
body.theme-light .card h2,body.theme-light .stat .value,body.theme-light th{color:var(--ink)}
body.theme-light input,body.theme-light select,body.theme-light textarea{background:#fff;color:var(--ink)}
body.theme-light .code{background:#f6f8fb;color:#0f766e}

/* ---- 登录 / 申请等裸页（.auth 居中卡片）---- */
body.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:
  radial-gradient(1000px 500px at 15% -10%,rgba(31,111,235,.12),transparent 60%),
  radial-gradient(800px 420px at 110% 115%,rgba(7,193,96,.06),transparent 55%),var(--bg)}
body.auth-scroll{min-height:100vh;background:
  radial-gradient(1000px 500px at 15% -10%,rgba(31,111,235,.12),transparent 60%),
  radial-gradient(800px 420px at 110% 115%,rgba(7,193,96,.06),transparent 55%),var(--bg);padding:36px 16px 48px}
.auth-scroll .auth-wrap{max-width:520px;margin:0 auto}
.auth-wrap{width:100%;max-width:400px;padding:20px}
.auth-brand{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:22px}
.auth-brand .glogo{width:56px;height:56px;border-radius:16px;background:linear-gradient(160deg,#141a26,#0e1420);box-shadow:0 8px 24px rgba(0,0,0,.4),inset 0 0 0 1px rgba(59,130,246,.25)}
.auth-brand .name{font-size:19px;font-weight:700;background:linear-gradient(120deg,#fff,#b9d4ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.auth-brand .sub{color:var(--muted);font-size:13px;letter-spacing:.02em}
.auth-box{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:28px 26px;box-shadow:0 10px 40px rgba(0,0,0,.35)}
.auth-box h1{font-size:18px;font-weight:600;color:#fff;margin-bottom:2px}
.auth-box .sub{color:var(--muted);font-size:13px;margin-bottom:20px}
.auth-box label{display:block;margin:14px 0 6px;font-size:13px;color:var(--muted)}
.auth-box input,.auth-box select,.auth-box textarea{width:100%;padding:10px 12px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--bg);color:var(--ink);font-size:14px;font-family:inherit}
.auth-box input:focus,.auth-box select:focus,.auth-box textarea:focus{outline:none;border-color:var(--primary-main);box-shadow:0 0 0 3px var(--primary-ring)}
.auth-btn{width:100%;margin-top:20px;padding:11px;border-radius:var(--r-sm);border:none;background:linear-gradient(180deg,var(--primary-main),#1a63d8);color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:opacity .15s,transform .05s}
.auth-btn:hover{opacity:.9}
.auth-btn:active{transform:translateY(1px)}
.auth-err{background:var(--red-bg);color:var(--red);padding:10px 14px;border-radius:var(--r-sm);margin-bottom:14px;font-size:13px}
.auth-bottom{margin-top:18px;text-align:center;font-size:13px;color:var(--muted)}
.auth-hint{color:var(--muted);font-size:12px;margin-top:4px}
@media (max-width:520px){
  .auth-wrap{padding:14px}
  .auth-box{padding:24px 20px}
}

/* ============================================================
 * 后台看板运营细分（§6.3）+ 分通道视觉
 * ============================================================ */
.dash-sub{font-size:12px;color:var(--muted);letter-spacing:.04em;margin:4px 0 10px;font-weight:600}
.grid .grid{margin-top:14px}
.stat .stat-foot{font-size:11.5px;color:var(--muted);margin-top:6px}
.ch-mix{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.chrow{display:flex;align-items:center;gap:8px;font-size:13px}
.chrow .dot{width:8px;height:8px;border-radius:50%;flex:none}
.chrow .cn{flex:1;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chrow .camt{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;font-size:13px}
.chrow .cpct{color:var(--muted);font-size:12px;width:42px;text-align:right;font-variant-numeric:tabular-nums}
.stat .mini{font-size:14px;color:var(--muted);font-weight:400}
.ch-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:1px}
@media (max-width:920px){
  .grid[style*="repeat(3,1fr)"],.grid[style*="repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr)!important}
}

/* ============================================================
 * 商户详情 / 申请材料 / 代理商 / 模拟登录 扩展样式
 * ============================================================ */
.filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.filters input,.filters select{width:auto;padding:7px 10px;font-size:13px}

/* 键值信息（商户详情） */
.kv{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px}
.kv>div{display:flex;gap:10px;font-size:13px}
.kv .k{color:var(--muted);width:120px;flex:none}
@media (max-width:640px){.kv{grid-template-columns:1fr}}

/* 证照缩略 */
.material-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.material-item{background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:8px}
.material-item .mt-name{font-size:12.5px;color:var(--ink-2)}
.material-item .mt-img{width:100%;height:110px;object-fit:cover;border-radius:8px;border:1px solid var(--border);display:block;background:#0b0e14}
.material-item .mt-file{font-size:13px;color:var(--primary-bright);display:block;word-break:break-all}
.material-item .mt-meta{font-size:11.5px;color:var(--muted)}

/* 后台模拟登录商户提示 */
.sim-banner{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sim-banner a.sim-back{color:var(--info);text-decoration:underline;margin-left:6px}

/* 入网申请/代理商宽表单 */
.auth-box-wide{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:30px 28px;box-shadow:0 10px 40px rgba(0,0,0,.35);max-width:780px;width:100%}
.auth-box-wide h1{font-size:19px;font-weight:600;color:#fff;margin-bottom:2px}
.auth-box-wide .sub{color:var(--muted);font-size:13px;margin-bottom:6px}
.auth-scroll .auth-wrap{max-width:820px}
.form-sec{font-size:13px;font-weight:600;color:var(--primary-bright);margin:22px 0 4px;letter-spacing:.03em}
.form-sec:first-of-type{margin-top:6px}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 18px;margin-top:6px}
.form-grid>div{min-width:0}
.form-grid label{display:block;margin:12px 0 5px;font-size:13px;color:var(--muted)}
.form-grid input,.form-grid select,.form-grid textarea{width:100%;padding:9px 11px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--bg);color:var(--ink);font-size:13.5px;font-family:inherit}
.form-grid textarea{resize:vertical}
input[type=file]{padding:7px;font-size:12.5px;color:var(--muted)}
input[type=file]::file-selector-button{padding:5px 12px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--panel2);color:var(--ink);font-size:12px;cursor:pointer;margin-right:10px}
@media (max-width:760px){.form-grid{grid-template-columns:1fr}}

/* 浅色覆盖 */
body.theme-light .material-item,body.theme-light .filters input,
body.theme-light .filters select,body.theme-light .form-grid input,
body.theme-light .form-grid select,body.theme-light .form-grid textarea,
body.theme-light .auth-box-wide input,body.theme-light .auth-box-wide select{background:#fff}
body.theme-light .kv .k{color:var(--muted)}
body.theme-light input[type=file]::file-selector-button{background:#eef2f7;color:var(--ink)}

/* 入网申请：结算类型单选 / 证照分组 */
.radio-row{display:flex;gap:12px;flex-wrap:wrap}
.radio-pill{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.radio-pill input{width:auto;accent-color:var(--primary-main);width:16px;height:16px}
.radio-pill span{padding:8px 16px;border:1px solid var(--border);border-radius:999px;font-size:13px;color:var(--ink-2);background:var(--bg);transition:all .14s;cursor:pointer}
.radio-pill input:checked + span{color:var(--primary-bright);border-color:var(--primary-main);background:var(--primary-soft);font-weight:600}
.mat-note{font-size:12px;color:var(--muted);margin:2px 0 4px;background:var(--panel2);border:1px solid var(--border);border-radius:8px;padding:8px 12px}
.mat-note b{color:var(--red)}
.mat-tip{font-size:11.5px;color:var(--muted);margin-top:3px}
body.theme-light .radio-pill span{background:#fff}
body.theme-light .mat-note{background:#f4f7fb}
body.theme-light .radio-pill input:checked + span{color:#185FA5}