/* ============================================================================
   Camel ePay · Meridian Design System  (信赖蓝 / Trust Navy)
   ----------------------------------------------------------------------------
   骅云聚合支付前台统一设计系统。所有新版前台页面(收银台 / 商户面板 / 落地页 /
   登录注册)统一引用本文件，不依赖任何 CSS 框架或 CDN。

   气质：银行级稳重可信 · 深海军蓝底色 · 精致留白 · 柔和蓝调阴影 · 细腻过渡。

   目录：
     01 · 令牌 Tokens        —— :root 全部设计变量(唯一真相来源)
     02 · 基础 Base/Reset    —— reset / body 字体 / .num / ::selection / 链接
     03 · 按钮 Buttons
     04 · 表单 Forms         —— field/label/input/select/checkbox/radio/toggle
     05 · 徽标 Pills
     06 · 容器 Containers     —— card / panel / stat-card
     07 · 表格 Table
     08 · 导航基元 Nav        —— tabs / nav-item / avatar / icon-btn / badge-dot
     09 · 反馈 Feedback       —— alert / empty / spinner
     10 · 工具类 Utilities    —— 间距 / 文本 / flex 辅助
     11 · 流程与提示 Flow     —— 步骤条 csteps / 轻量 Toast mtoast
     12 · 响应式 Responsive   —— @media(max-width:640px) 移动端适配

   注意：类名遵循设计契约(.btn / .card / .alert 等无前缀)。若页面同时加载
   bootstrap.min.css，请让 meridian.css 在其之后加载以确保样式生效。
   ========================================================================== */


/* ============================================================================
   01 · 令牌 Tokens —— 唯一真相来源，改色改度量只改这里
   ========================================================================== */
:root{
  /* Brand — deep navy + bright blue */
  --navy-900:#082e6e;
  --navy-800:#0b3d91;
  --navy-700:#0e4bb0;
  --blue-600:#1a73e8;
  --blue-500:#4285f4;
  --blue-400:#6fa3f7;
  --blue-200:#bcd4f7;
  --blue-100:#e6effc;
  --blue-50:#f4f7fc;
  /* Neutral */
  --bg:#f4f7fc;
  --bg-2:#eef2f8;
  --surface:#ffffff;
  --surface-2:#fafcff;
  --border:#dbe4f0;
  --border-strong:#c6d3e6;
  --text:#0d1b2a;
  --text-2:#52607a;
  --text-3:#8695ad;
  /* Semantic */
  --success:#0f9d58;
  --success-bg:#e7f6ee;
  --warning:#f5a623;
  --warning-bg:#fdf3e2;
  --danger:#e5484d;
  --danger-bg:#fce9ea;
  --info:#1a73e8;
  --info-bg:#e6effc;
  /* Radius */
  --r-sm:6px;
  --r-md:10px;
  --r-lg:16px;
  --r-pill:999px;
  /* Shadow — soft, blue-tinted */
  --sh-sm:0 1px 2px rgba(11,61,145,.06),0 1px 3px rgba(11,61,145,.08);
  --sh-md:0 6px 20px rgba(11,61,145,.10);
  --sh-lg:0 18px 48px rgba(11,61,145,.16);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* ---- 派生令牌(本设计系统新增) ---- */
  /* 间距节律 · 4 的倍数 —— 供 .mt-N / .mb-N 与内部使用 */
  --s-1:4px;
  --s-2:8px;
  --s-3:12px;
  --s-4:16px;
  --s-5:24px;
  --s-6:32px;
  --s-7:48px;
  --s-8:64px;
  /* 聚焦光环 */
  --ring:0 0 0 3px rgba(26,115,232,.16);
  --ring-strong:0 0 0 3px rgba(26,115,232,.32);
  --ring-danger:0 0 0 3px rgba(229,72,77,.18);
  /* 主渐变(选中态 / 强调) */
  --grad-brand:linear-gradient(180deg,var(--blue-500),var(--navy-800));
}


/* ============================================================================
   02 · 基础 Base / Reset
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%}
a{color:var(--blue-600);text-decoration:none;transition:color .15s ease}
a:hover{color:var(--navy-700)}
a:focus-visible{outline:2px solid var(--blue-500);outline-offset:2px;border-radius:2px}
::selection{background:var(--blue-200);color:var(--navy-900)}

/* 等宽数字 —— 金额 / 订单号 / 统计数据统一启用，避免跳动 */
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}


/* ============================================================================
   03 · 按钮 Buttons
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-size:14px;font-weight:650;line-height:1;cursor:pointer;
  padding:11px 18px;border-radius:var(--r-md);border:1px solid transparent;
  transition:transform .12s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease,color .18s ease;
  white-space:nowrap;text-decoration:none;user-select:none;
}
.btn svg{width:16px;height:16px;flex:0 0 auto}
.btn:focus-visible{outline:none;box-shadow:var(--ring-strong)}

/* 主按钮 —— 深蓝渐变，浮起投影 */
.btn-primary{background:linear-gradient(180deg,var(--navy-700),var(--navy-800));color:#fff;box-shadow:var(--sh-sm)}
.btn-primary:hover{box-shadow:0 8px 22px rgba(11,61,145,.28);transform:translateY(-1px);color:#fff}
.btn-primary:active{transform:translateY(0)}

/* 次按钮 —— 浅蓝面 */
.btn-secondary{background:var(--blue-100);color:var(--navy-800);border-color:var(--blue-200)}
.btn-secondary:hover{background:#dbe8fb;border-color:#a9c8f4;color:var(--navy-800)}

/* 幽灵按钮 —— 描边 */
.btn-ghost{background:transparent;color:var(--navy-800);border-color:var(--border-strong)}
.btn-ghost:hover{background:var(--surface-2);border-color:var(--blue-500);color:var(--blue-600)}

/* 危险按钮 */
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{background:#d8383d;box-shadow:0 8px 22px rgba(229,72,77,.26);transform:translateY(-1px);color:#fff}
.btn-danger:focus-visible{box-shadow:var(--ring-danger)}

/* 禁用态 */
.btn:disabled,.btn.is-disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none}

/* 尺寸 / 块级 */
.btn-lg{padding:15px 22px;font-size:16px;border-radius:12px}
.btn-sm{padding:8px 13px;font-size:13px;border-radius:var(--r-sm)}
.btn-block{width:100%}


/* ============================================================================
   04 · 表单 Forms
   ========================================================================== */
.field{margin-bottom:16px}
.field:last-child{margin-bottom:0}

/* 标签 —— .label 独立类 或 .field>label 均可 */
.label,.field>label{display:block;font-size:13px;font-weight:600;margin-bottom:7px;color:var(--text)}
.label .req,.field>label .req{color:var(--danger);margin-left:2px}

/* 输入框 / 下拉框 —— 统一基础控件外观 */
.input,.select{
  width:100%;font-family:inherit;font-size:14px;color:var(--text);
  padding:11px 13px;border:1px solid var(--border-strong);border-radius:var(--r-md);
  background:var(--surface);transition:border-color .16s,box-shadow .16s;outline:none;
}
.input::placeholder{color:var(--text-3)}
.input:hover,.select:hover{border-color:#b0c3de}
.input:focus,.input.is-focus,.select:focus{border-color:var(--blue-600);box-shadow:var(--ring)}
.input:disabled,.select:disabled{background-color:var(--surface-2);color:var(--text-3);cursor:not-allowed}
textarea.input{min-height:96px;line-height:1.5;resize:vertical}

/* 帮助文字 */
.hint{font-size:12px;color:var(--text-3);margin-top:6px}

/* 带前置图标的输入 —— <div class="input-wrap"><svg/><input class="input"></div> */
.input-wrap{position:relative;display:flex;align-items:center}
.input-wrap>svg{position:absolute;left:12px;width:16px;height:16px;color:var(--text-3);pointer-events:none}
.input-wrap .input{padding-left:36px}

/* 下拉选择 —— 内建 SVG 箭头(无需额外标签)；亦兼容 .select-wrap + .chev 结构 */
.select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%3E%3Cpath%20d='M6%209l6%206%206-6'%20stroke='%2352607a'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;
}
.select::-ms-expand{display:none}
.select-wrap{position:relative}
.select-wrap .chev{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--text-2);pointer-events:none}
.select-wrap .select{background-image:none}

/* 错误态 —— .field.is-error 或 .input.is-error */
.input.is-error,.is-error .input,.is-error.input{border-color:var(--danger)}
.input.is-error:focus,.is-error .input:focus,.is-error.input:focus{box-shadow:var(--ring-danger)}
.field.is-error .label,.field.is-error>label{color:var(--danger)}
.field.is-error .hint{color:var(--danger)}

/* 开关 Toggle —— <label class="toggle"><input type="checkbox"><span class="track"></span>文字</label> */
.toggle{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;color:var(--text)}
.toggle input{position:absolute;opacity:0;width:0;height:0}
.track{width:42px;height:24px;border-radius:var(--r-pill);background:var(--border-strong);position:relative;transition:background .2s;flex:0 0 auto}
.track::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.toggle input:checked + .track{background:var(--grad-brand)}
.toggle input:checked + .track::after{transform:translateX(18px)}
.toggle input:focus-visible + .track{box-shadow:0 0 0 3px rgba(26,115,232,.22)}
.toggle input:disabled + .track{opacity:.5;cursor:not-allowed}

/* 复选框 Checkbox —— <label class="checkbox"><input type="checkbox"><span class="box"><svg/></span>文字</label> */
/* 单选框 Radio     —— <label class="radio"><input type="radio"><span class="box"></span>文字</label> */
.checkbox,.radio{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;color:var(--text)}
.checkbox input,.radio input{position:absolute;opacity:0;width:0;height:0}
.checkbox .box,.radio .box{
  width:20px;height:20px;border:1.5px solid var(--border-strong);background:#fff;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;transition:.16s;
}
.checkbox .box{border-radius:var(--r-sm)}
.radio .box{border-radius:50%}
.checkbox .box svg{width:13px;height:13px;color:#fff;opacity:0;transform:scale(.6);transition:.16s}
.checkbox input:checked + .box{background:var(--grad-brand);border-color:var(--navy-800)}
.checkbox input:checked + .box svg{opacity:1;transform:scale(1)}
.radio .box::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--grad-brand);transform:scale(0);transition:.16s}
.radio input:checked + .box{border-color:var(--navy-800)}
.radio input:checked + .box::after{transform:scale(1)}
.checkbox input:focus-visible + .box,.radio input:focus-visible + .box{box-shadow:0 0 0 3px rgba(26,115,232,.22)}
.checkbox input:disabled + .box,.radio input:disabled + .box{opacity:.5;cursor:not-allowed}


/* ============================================================================
   05 · 徽标 Pills
   ========================================================================== */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:650;padding:5px 11px;border-radius:var(--r-pill);line-height:1;white-space:nowrap}
.pill .dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.pill-success{background:var(--success-bg);color:#0b7a44}
.pill-success .dot{background:var(--success)}
.pill-info{background:var(--info-bg);color:var(--navy-800)}
.pill-info .dot{background:var(--info)}
.pill-warn{background:var(--warning-bg);color:#a9691a}
.pill-warn .dot{background:var(--warning)}
.pill-danger{background:var(--danger-bg);color:#c0353a}
.pill-danger .dot{background:var(--danger)}
.pill-neutral{background:#eef2f8;color:var(--text-2)}
.pill-neutral .dot{background:var(--text-3)}


/* ============================================================================
   06 · 容器 Containers —— card / panel / stat-card
   ========================================================================== */
/* 自包含卡片(默认带内边距) */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:22px}

/* 面板(容器骨架，配合 .panel-pad 加内边距) */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-md)}
.panel-pad{padding:26px}

/* 统计卡 —— 图标徽章 + 标签 + 数值 + 脚注 */
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:18px;box-shadow:var(--sh-sm);position:relative;overflow:hidden}
.stat-card .ic{width:38px;height:38px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px}
.stat-card .ic svg{width:20px;height:20px}
.stat-card .lab{font-size:12.5px;color:var(--text-2);font-weight:600}
.stat-card .val{font-size:26px;font-weight:800;letter-spacing:-.02em;margin-top:3px}
.stat-card .foot{font-size:12px;margin-top:6px;display:inline-flex;align-items:center;gap:4px;color:var(--text-3)}
.stat-card .foot .delta{font-weight:700}

/* 图标徽章配色(通用，用于 stat-card / 列表 / 提示) */
.ic-blue{background:var(--blue-100);color:var(--navy-800)}
.ic-green{background:var(--success-bg);color:var(--success)}
.ic-amber{background:var(--warning-bg);color:#b4780f}
.ic-navy{background:#e5ebf8;color:var(--navy-800)}
.ic-red{background:var(--danger-bg);color:var(--danger)}

/* 迷你统计块 —— 用于卡片内并排展示 */
.stat-mini{border:1px solid var(--border);border-radius:var(--r-md);padding:14px 16px;background:var(--surface)}
.stat-mini .lab{font-size:12px;color:var(--text-2);font-weight:600}
.stat-mini .val{font-size:24px;font-weight:750;margin-top:4px;letter-spacing:-.02em}
.stat-mini .delta{font-size:12px;font-weight:650;margin-top:2px;display:inline-flex;align-items:center;gap:3px}
.delta.up{color:var(--success)}
.delta.down{color:var(--danger)}


/* ============================================================================
   07 · 表格 Table
   ========================================================================== */
/* 横向滚动容器 —— 移动端建议用 <div class="table-scroll"> 包裹 .tbl */
.table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font-size:12px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;padding:10px 12px;border-bottom:1px solid var(--border);white-space:nowrap}
.tbl td{padding:13px 12px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:middle}
/* 斑马纹(极浅) + hover 高亮行(hover 规则在后，优先级胜出) */
.tbl tbody tr{transition:background .14s}
.tbl tbody tr:nth-child(even){background:var(--surface-2)}
.tbl tbody tr:hover{background:var(--blue-50)}
.tbl tbody tr:last-child td{border-bottom:0}
/* 数字列 / 金额 / 单据号 */
.tbl .mono{font-family:var(--mono);font-size:12.5px;color:var(--text-2)}
.tbl .amt{font-weight:700}
.tbl th.text-right,.tbl td.text-right{text-align:right}
/* 通道标记 —— 彩点 + 名称 */
.ch{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--text)}
.ch .cd{width:8px;height:8px;border-radius:2px;flex:0 0 auto}


/* ============================================================================
   08 · 导航基元 Nav —— tabs / nav-item / avatar / icon-btn / badge-dot
   ========================================================================== */
/* 标签页(分段控件) */
.tabs{display:inline-flex;gap:4px;background:var(--blue-50);border:1px solid var(--border);padding:4px;border-radius:var(--r-md);max-width:100%}
.tab{padding:8px 16px;font-size:13.5px;font-weight:600;color:var(--text-2);border-radius:7px;cursor:pointer;transition:.16s;border:none;background:transparent;font-family:inherit;white-space:nowrap}
.tab:hover{color:var(--navy-800)}
.tab.active{background:var(--surface);color:var(--navy-800);box-shadow:var(--sh-sm)}
.tab:focus-visible{outline:none;box-shadow:var(--ring)}

/* 侧栏导航项(用于深蓝侧栏，故文字为浅色) */
.nav-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-md);font-size:14px;font-weight:550;cursor:pointer;transition:.15s;margin-bottom:3px;color:#c3d2ec;text-decoration:none}
.nav-item svg{width:18px;height:18px;flex:0 0 auto;opacity:.85}
.nav-item:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-item.active{background:linear-gradient(90deg,rgba(66,133,244,.35),rgba(66,133,244,.12));color:#fff;box-shadow:inset 3px 0 0 var(--blue-500)}
.nav-item.active svg{opacity:1}

/* 头像 */
.avatar{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff;background:linear-gradient(135deg,var(--blue-500),var(--navy-800));box-shadow:var(--sh-sm);flex:0 0 auto}
.avatar.sm{width:30px;height:30px;font-size:12px}
.avatar.lg{width:52px;height:52px;font-size:18px}
.avatar-stack{display:flex}
.avatar-stack .avatar{border:2px solid var(--surface);margin-left:-10px}
.avatar-stack .avatar:first-child{margin-left:0}

/* 图标按钮 + 红点角标 */
.icon-btn{width:36px;height:36px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-2);transition:.15s;position:relative}
.icon-btn:hover{border-color:var(--blue-500);color:var(--blue-600)}
.icon-btn:focus-visible{outline:none;box-shadow:var(--ring)}
.icon-btn svg{width:18px;height:18px}
.badge-dot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--danger);border:1.5px solid var(--surface)}


/* ============================================================================
   09 · 反馈 Feedback —— alert / empty / spinner
   ========================================================================== */
/* 提示条 —— 四态复用语义色 */
.alert{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:var(--r-md);border:1px solid;font-size:14px;line-height:1.5}
.alert>svg,.alert .alert-icon{width:20px;height:20px;flex:0 0 auto;margin-top:1px}
.alert .alert-title{font-weight:700;margin:0 0 2px}
.alert .alert-body{margin:0}
.alert-success{background:var(--success-bg);border-color:#bfe6d0;color:#0b7a44}
.alert-warn{background:var(--warning-bg);border-color:#f5dcae;color:#a9691a}
.alert-danger{background:var(--danger-bg);border-color:#f3c5c7;color:#c0353a}
.alert-info{background:var(--info-bg);border-color:var(--blue-200);color:var(--navy-800)}

/* 空状态占位 */
.empty{text-align:center;padding:48px 24px;color:var(--text-3)}
.empty .empty-icon{width:56px;height:56px;margin:0 auto;border-radius:var(--r-lg);background:var(--blue-50);border:1px solid var(--border);display:inline-flex;align-items:center;justify-content:center;color:var(--text-3)}
.empty .empty-icon svg{width:26px;height:26px}
.empty .empty-title{font-size:15px;font-weight:650;color:var(--text-2);margin:14px 0 0}
.empty .empty-text{font-size:13px;color:var(--text-3);margin:4px 0 0}
.empty .empty-action{margin-top:18px}

/* 加载指示器 */
.spinner{display:inline-block;width:20px;height:20px;border:2.5px solid var(--blue-100);border-top-color:var(--blue-600);border-radius:50%;animation:meridian-spin .7s linear infinite;vertical-align:middle}
.spinner-sm{width:15px;height:15px;border-width:2px}
.spinner-lg{width:32px;height:32px;border-width:3px}
.spinner-light{border-color:rgba(255,255,255,.35);border-top-color:#fff}
@keyframes meridian-spin{to{transform:rotate(360deg)}}


/* ============================================================================
   10 · 工具类 Utilities
   ========================================================================== */
/* 间距(基于 --s 阶)—— margin-top / margin-bottom */
.mt-0{margin-top:0}
.mt-1{margin-top:var(--s-1)}
.mt-2{margin-top:var(--s-2)}
.mt-3{margin-top:var(--s-3)}
.mt-4{margin-top:var(--s-4)}
.mt-5{margin-top:var(--s-5)}
.mt-6{margin-top:var(--s-6)}
.mt-7{margin-top:var(--s-7)}
.mt-8{margin-top:var(--s-8)}
.mt-auto{margin-top:auto}
.mb-0{margin-bottom:0}
.mb-1{margin-bottom:var(--s-1)}
.mb-2{margin-bottom:var(--s-2)}
.mb-3{margin-bottom:var(--s-3)}
.mb-4{margin-bottom:var(--s-4)}
.mb-5{margin-bottom:var(--s-5)}
.mb-6{margin-bottom:var(--s-6)}
.mb-7{margin-bottom:var(--s-7)}
.mb-8{margin-bottom:var(--s-8)}
.ml-auto{margin-left:auto}
.mr-auto{margin-right:auto}

/* 文本 */
.muted{color:var(--text-2)}
.muted-2{color:var(--text-3)}
.mono{font-family:var(--mono)}
.text-left{text-align:left}
.text-center{text-align:center}
.text-right{text-align:right}
.text-danger{color:var(--danger)}
.text-success{color:var(--success)}
.text-brand{color:var(--navy-800)}
.fw-600{font-weight:600}
.fw-700{font-weight:700}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Flex 辅助 */
.flex{display:flex}
.inline-flex{display:inline-flex}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.flex-1{flex:1 1 0%}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.items-end{align-items:flex-end}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.justify-end{justify-content:flex-end}
.gap-1{gap:var(--s-1)}
.gap-2{gap:var(--s-2)}
.gap-3{gap:var(--s-3)}
.gap-4{gap:var(--s-4)}
.gap-5{gap:var(--s-5)}

/* 布局杂项 */
.w-full{width:100%}
.hidden{display:none}
.pointer{cursor:pointer}


/* ============================================================================
   11 · 流程与提示 Flow —— 步骤条 .csteps / 轻量 Toast .mtoast
   ----------------------------------------------------------------------------
   这两组类原先只写在 certificate.php / domain.php 的页内 <style> 里，
   其它页面(applyment.php / channel.php / applyment_status.php)引用时无样式可用，
   会退化成浏览器原生 <ol> 编号列表、内联 SVG 被撑成巨图。此处提升为共享组件。
   注意：所有内联 SVG 必须有显式尺寸约束，否则无 width/height 的 svg 会按包含块撑开。
   ========================================================================== */

/* ---- 步骤条 Steps ---- */
.csteps{list-style:none;display:flex;align-items:flex-start;gap:0;margin:0 0 22px;padding:0}
.csteps .cstep{flex:1 1 0;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;min-width:0}
.csteps .cstep::before,.csteps .cstep::after{content:"";position:absolute;top:15px;height:2px;background:var(--border);z-index:0}
.csteps .cstep::before{left:0;right:50%}
.csteps .cstep::after{left:50%;right:0}
.csteps .cstep:first-child::before{display:none}
.csteps .cstep:last-child::after{display:none}
.csteps .cstep.done::before,.csteps .cstep.done::after,.csteps .cstep.active::before{background:var(--blue-500)}
.csteps .cdot{position:relative;z-index:1;width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;background:var(--surface);border:2px solid var(--border);color:var(--text-3);flex:0 0 auto;transition:.18s}
/* 关键：JS 注入的对勾 SVG 无内联尺寸，必须锁死，否则会被撑成数百 px */
.csteps .cdot svg{width:16px;height:16px;flex:0 0 auto;display:block}
.csteps .clab{font-size:12.5px;font-weight:600;color:var(--text-3);line-height:1.3}
/* 三态：pending(默认) / active(当前) / done(已完成) */
.csteps .cstep.pending .cdot{background:var(--surface);border-color:var(--border);color:var(--text-3)}
.csteps .cstep.pending .clab{color:var(--text-3)}
.csteps .cstep.active .cdot{border-color:var(--blue-500);color:var(--navy-800);box-shadow:var(--ring)}
.csteps .cstep.done .cdot{background:var(--grad-brand);border-color:var(--navy-800);color:#fff}
.csteps .cstep.done .clab,.csteps .cstep.active .clab{color:var(--text)}

/* ---- 轻量 Toast ---- */
.mtoast-wrap{position:fixed;top:74px;right:20px;z-index:200;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.mtoast{display:flex;align-items:center;gap:9px;padding:11px 15px;border-radius:var(--r-md);font-size:13.5px;font-weight:600;box-shadow:var(--sh-lg);background:var(--surface);border:1px solid var(--border);color:var(--text);animation:mtin .2s ease;pointer-events:auto}
/* 关键：图标 SVG 同样必须锁死尺寸 */
.mtoast svg{width:17px;height:17px;flex:0 0 auto;display:block}
.mtoast.ok{background:var(--success-bg);border-color:#bfe6d0;color:#0b7a44}
.mtoast.err{background:var(--danger-bg);border-color:#f3c5c7;color:#c0353a}
@keyframes mtin{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}


/* ============================================================================
   12 · 响应式 Responsive —— 移动端适配，关键组件不横向溢出
   ========================================================================== */
@media(max-width:640px){
  /* 步骤条横向滚动：只给 6 步向导(applyment.php #apmSteps)。
     不能写成通用 .csteps —— certificate.php 只有 3 步且页内 style 未声明 overflow，
     一旦级联过去，overflow-x:auto 会把 overflow-y 计算值一并变成 auto，
     裁掉 .cstep.active .cdot 的 box-shadow:var(--ring)(3px 光晕)。
     容器上下留 4px 内边距，保证本页 active 光晕在滚动裁剪区内不被切。 */
  #apmSteps.csteps{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;padding:4px 0 2px}
  #apmSteps.csteps::-webkit-scrollbar{display:none}
  #apmSteps.csteps .cstep{flex:0 0 auto;min-width:58px;gap:6px}
  #apmSteps.csteps .cdot{width:28px;height:28px;font-size:12px}
  #apmSteps.csteps .cstep::before,#apmSteps.csteps .cstep::after{top:13px}
  #apmSteps.csteps .clab{font-size:11px}

  /* Toast：窄屏改为贴底横向铺满 */
  .mtoast-wrap{top:auto;bottom:18px;right:14px;left:14px}

  .card{padding:18px}
  .panel-pad{padding:18px}
  .btn{padding:10px 16px}
  .btn-lg{padding:13px 18px;font-size:15px}

  /* 分段控件横向可滚动，避免挤压 */
  .tabs{overflow-x:auto;flex-wrap:nowrap}
  .tabs::-webkit-scrollbar{display:none}

  /* 统计卡缩紧 */
  .stat-card{padding:16px}
  .stat-card .val{font-size:22px}
  .stat-mini .val{font-size:20px}

  /* 表格：在 .table-scroll 容器内保底宽度并横向滚动，不撑破 body */
  .table-scroll .tbl{min-width:480px}
  .tbl th,.tbl td{padding-left:10px;padding-right:10px}

  .avatar.lg{width:46px;height:46px;font-size:16px}
}