/* =========================
全局基础样式开始
========================= */
:root { --zhuti-se: #0c6ab1; --zhuti-se-shen: #0a578f; --zhuti-se-qian: #e8f2fb; --ruku-se: #1f9d6b; --chuku-se: #f08a2c; --yiku-se: #2f7fe0; --wenzi-zhu: #2b3445; --wenzi-ci: #6b7585; --wenzi-dan: #9aa4b2; --biankuang-se: #eaecef; --bg-se: #f4f6f9; --jing-se: #e8533f; --daohang-kuan: 232px; --daohang-zhai: 76px; --dingbu-gao: 64px; --yuanjiao: 14px; --yinying: 0 6px 22px rgba(20,50,90,.07); --yinying-shen: 0 12px 34px rgba(20,40,80,.16); }
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body { font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, -apple-system, sans-serif; font-size: 14px; line-height: 1.5; color: var(--wenzi-zhu); background: var(--bg-se); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { text-decoration: none; color: inherit; }
ul, ol, li { list-style: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd3dd; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #aab5c2; }
/* =========================
全局基础样式结束
========================= */


/* =========================
houtai-kuangjia 整体布局 开始
========================= */
.houtai-kuangjia { display: flex; min-height: 100vh; width: 100%; }
.houtai-zhuti { flex: 1; display: flex; flex-direction: column; min-width: 0; margin-left: var(--daohang-kuan); transition: margin-left .28s ease; }
.houtai-kuangjia.houtai-kuangjia-shouqi .houtai-zhuti { margin-left: var(--daohang-zhai); }
/* =========================
houtai-kuangjia 整体布局 结束
========================= */


/* =========================
houtai-daohang 左侧导航 开始
========================= */
.houtai-daohang { position: fixed; top: 0; left: 0; z-index: 60; display: flex; flex-direction: column; width: var(--daohang-kuan); height: 100vh; background: linear-gradient(187deg, #0a416c 0%, #072c49 100%); transition: width .28s ease, transform .28s ease; overflow: hidden; }
.houtai-kuangjia.houtai-kuangjia-shouqi .houtai-daohang { width: var(--daohang-zhai); }
.houtai-daohang-logo { display: flex; align-items: center; justify-content: center; flex-shrink: 0; height: var(--dingbu-gao); padding: 0 22px; border-bottom: 1px solid rgba(255,255,255,.1); white-space: nowrap; overflow: hidden; }
.houtai-daohang-logo-tu { width: 100%; max-width: 188px; height: auto; max-height: 28px; object-fit: contain; transition: opacity .2s ease; }
.houtai-daohang-logo-icon { display: none; font-size: 24px; color: #ffffff; }
.houtai-kuangjia.houtai-kuangjia-shouqi .houtai-daohang-logo { padding: 0; }
.houtai-kuangjia.houtai-kuangjia-shouqi .houtai-daohang-logo-tu { display: none; }
.houtai-kuangjia.houtai-kuangjia-shouqi .houtai-daohang-logo-icon { display: block; }
.houtai-daohang-caidan { flex: 1; overflow-x: hidden; overflow-y: auto; padding: 14px 12px; }
.houtai-daohang-caidan::-webkit-scrollbar { width: 0; }
.houtai-daohang-xiang { position: relative; display: flex; align-items: center; gap: 13px; height: 46px; padding: 0 15px; margin-bottom: 4px; border-radius: 11px; color: rgba(255,255,255,.78); cursor: pointer; white-space: nowrap; transition: background .18s ease, color .18s ease; }
.houtai-daohang-xiang:hover { background: rgba(255,255,255,.1); color: #ffffff; }
.houtai-daohang-xiang.houtai-daohang-xiang-active { background: linear-gradient(90deg, var(--zhuti-se) 0%, #1583d4 100%); color: #ffffff; box-shadow: 0 6px 16px rgba(12,106,177,.4); }
.houtai-daohang-xiang-tubiao { flex-shrink: 0; width: 22px; text-align: center; font-size: 17px; }
.houtai-daohang-xiang-wenzi { flex: 1; font-size: 14px; overflow: hidden; text-overflow: ellipsis; transition: opacity .2s ease; }
.houtai-kuangjia.houtai-kuangjia-shouqi .houtai-daohang-xiang { justify-content: center; padding: 0; }
.houtai-kuangjia.houtai-kuangjia-shouqi .houtai-daohang-xiang-wenzi { opacity: 0; width: 0; overflow: hidden; }
.houtai-daohang-jiao { flex-shrink: 0; display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.1); }
.houtai-daohang-jiao-touxiang { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.18); color: #ffffff; font-size: 15px; }
.houtai-daohang-jiao-xinxi { flex: 1; min-width: 0; line-height: 1.35; transition: opacity .2s ease; }
.houtai-daohang-jiao-ming { font-size: 13px; font-weight: 600; color: #ffffff; }
.houtai-daohang-jiao-jiao { font-size: 11px; color: rgba(255,255,255,.6); }
.houtai-daohang-jiao-tuichu { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 34px; height: 34px; border: none; border-radius: 9px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.78); font-size: 15px; cursor: pointer; transition: background .18s ease, color .18s ease; }
.houtai-daohang-jiao-tuichu:hover { background: rgba(232,83,63,.85); color: #ffffff; }
.houtai-kuangjia.houtai-kuangjia-shouqi .houtai-daohang-jiao { justify-content: center; padding: 14px 0; }
.houtai-kuangjia.houtai-kuangjia-shouqi .houtai-daohang-jiao-xinxi, .houtai-kuangjia.houtai-kuangjia-shouqi .houtai-daohang-jiao-tuichu { display: none; }
/* =========================
houtai-daohang 左侧导航 结束
========================= */


/* =========================
houtai-dingbu 顶部条 开始
========================= */
.houtai-dingbu { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 14px; flex-shrink: 0; height: var(--dingbu-gao); padding: 0 22px; background: #ffffff; border-bottom: 1px solid var(--biankuang-se); box-shadow: 0 2px 10px rgba(20,50,90,.04); }
.houtai-dingbu-zhedie { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border: none; border-radius: 9px; background: transparent; color: var(--wenzi-ci); font-size: 18px; cursor: pointer; transition: background .18s ease, color .18s ease; }
.houtai-dingbu-zhedie:hover { background: var(--zhuti-se-qian); color: var(--zhuti-se); }
.houtai-dingbu-biaoti { display: flex; flex-direction: column; flex-shrink: 0; line-height: 1.3; }
.houtai-dingbu-biaoti-dang { font-size: 18px; font-weight: 700; color: var(--wenzi-zhu); }
.houtai-dingbu-biaoti-lujing { margin-top: 2px; font-size: 12px; color: var(--wenzi-dan); }
.houtai-dingbu-sousuo { position: relative; flex: 1; max-width: 380px; margin: 0 4px; }
.houtai-dingbu-sousuo-tubiao { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--wenzi-dan); font-size: 14px; pointer-events: none; transition: color .2s ease; }
.houtai-dingbu-sousuo-input { width: 100%; height: 40px; padding: 0 16px 0 40px; border: 1px solid var(--biankuang-se); border-radius: 20px; background: var(--bg-se); color: var(--wenzi-zhu); font-size: 13px; outline: none; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.houtai-dingbu-sousuo-input::placeholder { color: var(--wenzi-dan); }
.houtai-dingbu-sousuo:focus-within .houtai-dingbu-sousuo-input { background: #ffffff; border-color: var(--zhuti-se); box-shadow: 0 0 0 3px rgba(12,106,177,.12); }
.houtai-dingbu-sousuo:focus-within .houtai-dingbu-sousuo-tubiao { color: var(--zhuti-se); }
.houtai-dingbu-you { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.houtai-dingbu-anniu { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; border-radius: 9px; background: var(--bg-se); color: var(--wenzi-ci); font-size: 16px; cursor: pointer; transition: background .18s ease, color .18s ease; }
.houtai-dingbu-anniu:hover { background: var(--zhuti-se-qian); color: var(--zhuti-se); }
.houtai-dingbu-anniu-dian { position: absolute; top: 6px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px; border: 2px solid #ffffff; border-radius: 8px; background: var(--jing-se); color: #fff; font-size: 10px; font-weight: 600; line-height: 13px; text-align: center; }
.houtai-dingbu-fenge { width: 1px; height: 26px; margin: 0 4px; background: var(--biankuang-se); }
.houtai-dingbu-yonghu { display: flex; align-items: center; gap: 10px; padding: 4px 10px 4px 4px; border-radius: 22px; cursor: pointer; transition: background .18s ease; }
.houtai-dingbu-yonghu:hover { background: var(--bg-se); }
.houtai-dingbu-yonghu-touxiang { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--zhuti-se); color: #ffffff; font-size: 15px; }
.houtai-dingbu-yonghu-xinxi { display: flex; flex-direction: column; line-height: 1.3; }
.houtai-dingbu-yonghu-ming { font-size: 13px; font-weight: 600; color: var(--wenzi-zhu); }
.houtai-dingbu-yonghu-jiao { font-size: 11px; color: var(--wenzi-dan); }
/* =========================
houtai-dingbu 顶部条 结束
========================= */


/* =========================
houtai-neirong 内容区与遮罩 开始
========================= */
.houtai-neirong { flex: 1; padding: 24px; overflow-y: auto; }
.houtai-neirong-zhanwei { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - var(--dingbu-gao) - 48px); padding: 40px; text-align: center; color: var(--wenzi-dan); background: #ffffff; border: 1.5px dashed #d3dae3; border-radius: 16px; }
.houtai-neirong-zhanwei-tu { margin-bottom: 18px; color: #c2cdda; font-size: 46px; }
.houtai-neirong-zhanwei-biao { margin-bottom: 10px; font-size: 18px; font-weight: 600; color: var(--wenzi-ci); }
.houtai-neirong-zhanwei-miao { font-size: 13px; line-height: 1.9; }
.houtai-zhezhao { position: fixed; inset: 0; z-index: 55; background: rgba(20,30,50,.45); opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility .28s ease; }
.houtai-kuangjia.houtai-kuangjia-yidong-kai .houtai-zhezhao { opacity: 1; visibility: visible; }
/* =========================
houtai-neirong 内容区与遮罩 结束
========================= */


/* =========================
houtai-gongyong 公用卡片/按钮/标签/Toast 开始
========================= */
.houtai-card { background: #ffffff; border: 1px solid var(--biankuang-se); border-radius: var(--yuanjiao); box-shadow: var(--yinying); }
.houtai-anniu { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border: 1px solid var(--biankuang-se); border-radius: 10px; background: #ffffff; color: var(--wenzi-zhu); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .18s ease, color .18s ease, border-color .18s ease, transform .1s ease, box-shadow .18s ease; }
.houtai-anniu:hover { border-color: #cfe0f0; box-shadow: 0 4px 14px rgba(20,50,90,.08); }
.houtai-anniu:active { transform: translateY(1px); }
.houtai-anniu-zhu { border-color: var(--zhuti-se); background: var(--zhuti-se); color: #ffffff; }
.houtai-anniu-zhu:hover { background: var(--zhuti-se-shen); border-color: var(--zhuti-se-shen); box-shadow: 0 6px 18px rgba(12,106,177,.32); }
.houtai-biaoqian { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; line-height: 1.6; }
.houtai-biaoqian-lan { background: var(--zhuti-se-qian); color: var(--zhuti-se); }
.houtai-biaoqian-lv { background: #e6f6ee; color: var(--ruku-se); }
.houtai-biaoqian-cheng { background: #fdf0e2; color: var(--chuku-se); }
.houtai-biaoqian-hong { background: #fdecea; color: var(--jing-se); }
.houtai-biaoqian-hui { background: #eef0f3; color: var(--wenzi-ci); }
.houtai-toast-zu { position: fixed; top: 80px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
.houtai-toast { display: flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 12px; background: rgba(43,52,69,.95); color: #ffffff; font-size: 13px; box-shadow: 0 10px 30px rgba(0,0,0,.25); opacity: 0; transform: translateY(-12px); transition: opacity .28s ease, transform .28s ease; }
.houtai-toast.houtai-toast-show { opacity: 1; transform: translateY(0); }
.houtai-toast i { font-size: 16px; }
.houtai-toast-ok i { color: #54d39a; }
.houtai-toast-err i { color: #ff8a7a; }
/* =========================
houtai-gongyong 公用卡片/按钮/标签/Toast 结束
========================= */


/* =========================
houtai-tanchuang 公用模态框 开始
========================= */
.houtai-tanchuang { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(20,30,50,.5); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; }
.houtai-tanchuang.houtai-tanchuang-kai { opacity: 1; visibility: visible; }
.houtai-tanchuang-nei { width: 100%; max-width: 520px; max-height: 88vh; display: flex; flex-direction: column; background: #ffffff; border-radius: 16px; box-shadow: var(--yinying-shen); transform: translateY(18px) scale(.97); transition: transform .28s cubic-bezier(.34,1.4,.5,1); overflow: hidden; }
.houtai-tanchuang.houtai-tanchuang-kai .houtai-tanchuang-nei { transform: translateY(0) scale(1); }
.houtai-tanchuang-tou { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; padding: 18px 22px; border-bottom: 1px solid var(--biankuang-se); }
.houtai-tanchuang-tou-biao { font-size: 16px; font-weight: 700; color: var(--wenzi-zhu); }
.houtai-tanchuang-tou-guan { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; border-radius: 8px; background: transparent; color: var(--wenzi-dan); font-size: 16px; cursor: pointer; transition: background .18s ease, color .18s ease; }
.houtai-tanchuang-tou-guan:hover { background: #fdecea; color: var(--jing-se); }
.houtai-tanchuang-shen { flex: 1; overflow-y: auto; padding: 22px; }
.houtai-tanchuang-jiao { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-shrink: 0; padding: 16px 22px; border-top: 1px solid var(--biankuang-se); background: #fafbfc; }
.houtai-biaodan-zu { margin-bottom: 16px; }
.houtai-biaodan-zu:last-child { margin-bottom: 0; }
.houtai-biaodan-biao { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 600; color: var(--wenzi-zhu); }
.houtai-biaodan-input, .houtai-biaodan-xuan { width: 100%; height: 42px; padding: 0 14px; border: 1px solid var(--biankuang-se); border-radius: 10px; background: #ffffff; color: var(--wenzi-zhu); outline: none; transition: border-color .18s ease, box-shadow .18s ease; }
.houtai-biaodan-input:focus, .houtai-biaodan-xuan:focus { border-color: var(--zhuti-se); box-shadow: 0 0 0 3px rgba(12,106,177,.12); }
.houtai-biaodan-tishi { margin-top: 6px; font-size: 12px; color: var(--wenzi-dan); }
/* =========================
houtai-tanchuang 公用模态框 结束
========================= */


/* =========================
houtai-biaoge 公用表格 开始
========================= */
.houtai-biaoge { width: 100%; border-collapse: collapse; font-size: 13px; }
.houtai-biaoge thead th { padding: 13px 16px; text-align: left; font-weight: 600; color: var(--wenzi-ci); background: var(--bg-se); white-space: nowrap; }
.houtai-biaoge thead th:first-child { border-radius: 10px 0 0 10px; }
.houtai-biaoge thead th:last-child { border-radius: 0 10px 10px 0; }
.houtai-biaoge tbody td { padding: 14px 16px; border-bottom: 1px solid var(--biankuang-se); color: var(--wenzi-zhu); }
.houtai-biaoge tbody tr { transition: background .15s ease; }
.houtai-biaoge tbody tr:hover { background: #f8fbfe; }
/* =========================
houtai-biaoge 公用表格 结束
========================= */


/* =========================
qiantai 前台手机端公共外壳 开始
========================= */
.qiantai-shell { display: flex; flex-direction: column; width: 100%; max-width: 480px; min-height: 100vh; margin: 0 auto; background: #f4f6f9; box-shadow: 0 0 40px rgba(20,40,80,.08); position: relative; }
.qiantai-tou { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; height: 60px; padding: 0 18px; background: linear-gradient(120deg, #0c6ab1 0%, #1583d4 100%); color: #ffffff; }
.qiantai-tou-logo { display: flex; align-items: center; gap: 10px; }
.qiantai-tou-logo-tu { width: auto; height: 30px; max-height: 30px; object-fit: contain; }
.qiantai-tou-logo-ming { font-size: 17px; font-weight: 700; letter-spacing: 1px; }
.qiantai-tou-anniu { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; border-radius: 50%; background: rgba(255,255,255,.2); color: #ffffff; font-size: 15px; cursor: pointer; transition: background .18s ease; }
.qiantai-tou-anniu:hover { background: rgba(255,255,255,.32); }
.qiantai-neirong { flex: 1; padding: 18px 16px 90px; overflow-y: auto; }
.qiantai-dibu { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; justify-content: space-around; width: 100%; max-width: 480px; height: 64px; background: #ffffff; border-top: 1px solid var(--biankuang-se); box-shadow: 0 -4px 20px rgba(20,40,80,.07); }
.qiantai-dibu-xiang { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: 1; height: 100%; color: var(--wenzi-dan); font-size: 11px; cursor: pointer; transition: color .18s ease; }
.qiantai-dibu-xiang i { font-size: 19px; }
.qiantai-dibu-xiang.qiantai-dibu-xiang-active { color: var(--zhuti-se); }
.qiantai-dibu-saoma { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: 1; height: 100%; color: var(--zhuti-se); font-size: 11px; cursor: pointer; }
.qiantai-dibu-saoma-quan { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-top: -26px; border: 4px solid #ffffff; border-radius: 50%; background: linear-gradient(135deg, #0c6ab1 0%, #1583d4 100%); color: #ffffff; font-size: 22px; box-shadow: 0 6px 18px rgba(12,106,177,.4); transition: transform .18s ease; }
.qiantai-dibu-saoma:active .qiantai-dibu-saoma-quan { transform: scale(.92); }
/* =========================
qiantai 前台手机端公共外壳 结束
========================= */


/* =========================
响应式 开始
========================= */
@media (max-width: 1024px) { .houtai-dingbu-sousuo { max-width: 240px; } }
@media (min-width: 769px) { .houtai-zhezhao { display: none; } }
@media (max-width: 768px) {
  .houtai-zhuti { margin-left: 0; }
  .houtai-kuangjia.houtai-kuangjia-shouqi .houtai-zhuti { margin-left: 0; }
  .houtai-daohang { transform: translateX(-100%); width: var(--daohang-kuan); }
  .houtai-kuangjia.houtai-kuangjia-shouqi .houtai-daohang { width: var(--daohang-kuan); }
  .houtai-kuangjia.houtai-kuangjia-yidong-kai .houtai-daohang { transform: translateX(0); box-shadow: 6px 0 30px rgba(20,40,80,.28); }
  .houtai-kuangjia.houtai-kuangjia-shouqi .houtai-daohang-logo-tu { display: block; }
  .houtai-kuangjia.houtai-kuangjia-shouqi .houtai-daohang-logo-icon { display: none; }
  .houtai-kuangjia.houtai-kuangjia-shouqi .houtai-daohang-xiang-wenzi { opacity: 1; width: auto; }
  .houtai-kuangjia.houtai-kuangjia-shouqi .houtai-daohang-xiang { justify-content: flex-start; padding: 0 15px; }
  .houtai-kuangjia.houtai-kuangjia-shouqi .houtai-daohang-jiao-xinxi, .houtai-kuangjia.houtai-kuangjia-shouqi .houtai-daohang-jiao-tuichu { display: flex; }
  .houtai-dingbu-biaoti-lujing { display: none; }
}
@media (max-width: 640px) { .houtai-dingbu-sousuo { display: none; } .houtai-dingbu-yonghu-xinxi { display: none; } .houtai-neirong { padding: 16px; } }
/* =========================
响应式 结束
========================= */