/* ============================================================
   C&UIS 2026 Center · 设计令牌与布局
   依据：《C&UIS UI 设计执行规范 v1.2》（主题色统一 #1ba784）
   规范要求：禁止硬编码色值，统一引用 --cui-* 令牌
   ============================================================ */
:root{
  /* 主题色（三端统一） */
  --cui-color-primary:#1ba784;
  --cui-color-primary-hover:#22c39a;
  --cui-color-primary-active:#168a6b;
  --cui-color-primary-light:#e8f7f2;
  --cui-color-brand:#189475;

  /* 语义色 */
  --cui-color-success:#67c23a; --cui-color-warning:#e6a23c;
  --cui-color-danger:#f56c6c;  --cui-color-info:#909399;
  --cui-color-emphasis:#ff2448;

  /* 文字 */
  --cui-text-primary:#303133; --cui-text-regular:#606266;
  --cui-text-secondary:#909399; --cui-text-placeholder:#c0c4cc;

  /* 边框与背景 */
  --cui-border-base:#dcdfe6; --cui-border-light:#e4e7ed; --cui-border-lighter:#ebeef5;
  --cui-bg-page:#f5f7fa; --cui-bg-card:#ffffff; --cui-bg-hover:#f9f9f9;

  /* 圆角 / 阴影 */
  --cui-radius-sm:2px; --cui-radius-base:4px; --cui-radius-md:6px;
  --cui-radius-lg:8px; --cui-radius-pill:999px;
  --cui-shadow-card:0 2px 8px rgba(15,23,42,.04);
  --cui-shadow-popup:0 4px 16px rgba(0,0,0,.12);

  /* 间距（4px 基准网格） */
  --cui-space-1:4px; --cui-space-2:8px; --cui-space-3:12px; --cui-space-4:16px;
  --cui-space-5:20px; --cui-space-6:24px; --cui-space-8:32px; --cui-space-10:40px;

  /* 关键尺寸 */
  --cui-navbar-height:60px;
  --cui-sidebar-width:210px;
  --cui-control-height:32px;
  --cui-page-padding:20px;

  --cui-font-family:"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;

  /* Element Plus 主题映射（令牌落地） */
  --el-color-primary:#1ba784;
  --el-color-primary-light-3:#5fc1a9;
  --el-color-primary-light-5:#8dd3c1;
  --el-color-primary-light-7:#bce4d9;
  --el-color-primary-light-8:#d5ece5;
  --el-color-primary-light-9:#edf4f1;
  --el-color-primary-dark-2:#168a6b;
  --el-border-radius-base:4px;
  --el-font-family:var(--cui-font-family);
  --el-text-color-primary:var(--cui-text-primary);
  --el-text-color-regular:var(--cui-text-regular);
  --el-border-color-lighter:var(--cui-border-lighter);
  --el-fill-color-blank:var(--cui-bg-card);
}

*{box-sizing:border-box}
html,body,#app{height:100%;margin:0}
body{font-family:var(--cui-font-family);background:var(--cui-bg-page);color:var(--cui-text-primary);font-size:14px}

/* 图标（IconLibrary SVG symbol，颜色随 currentColor） */
.cui-icon{width:1em;height:1em;fill:currentColor;vertical-align:-0.15em;display:inline-block}

/* ---------- 布局：顶栏 60 / 侧栏 210 / 页内边距 20 ---------- */
.cui-layout{min-height:100vh}
.cui-navbar{position:fixed;top:0;left:0;right:0;height:var(--cui-navbar-height);background:var(--cui-bg-card);
  border-bottom:1px solid var(--cui-border-lighter);display:flex;align-items:center;padding:0 var(--cui-space-5);z-index:100}
.cui-navbar .brand{display:flex;align-items:center;gap:var(--cui-space-2);font-size:16px;font-weight:700;
  width:300px;flex:none;white-space:nowrap;overflow:hidden}
.cui-navbar .brand .logo{width:26px;height:26px;border-radius:var(--cui-radius-base);background:var(--cui-color-primary);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px}
.cui-navbar .mod-name{color:var(--cui-text-secondary);font-size:13px;margin-left:var(--cui-space-1);
  padding-left:var(--cui-space-3);border-left:1px solid var(--cui-border-lighter)}
.cui-navbar .right{margin-left:auto;display:flex;align-items:center;gap:var(--cui-space-6);font-size:13px;white-space:nowrap}
.cui-navbar .right .who{color:var(--cui-text-primary);font-weight:500}
.cui-navbar .right .who .at{color:var(--cui-text-secondary);font-weight:400}
.cui-navbar .right a{color:var(--cui-text-regular);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.cui-navbar .right a:hover{color:var(--cui-color-primary)}

.cui-sidebar{position:fixed;top:var(--cui-navbar-height);left:0;bottom:0;width:var(--cui-sidebar-width);
  background:var(--cui-bg-card);border-right:1px solid var(--cui-border-lighter);overflow-y:auto;padding:var(--cui-space-2) 0}
.cui-menu-item{display:flex;align-items:center;gap:var(--cui-space-2);height:44px;padding:0 var(--cui-space-5);
  color:var(--cui-text-regular);cursor:pointer;border-left:3px solid transparent;font-size:14px}
.cui-menu-item:hover{background:var(--cui-bg-hover);color:var(--cui-color-primary)}
.cui-menu-item.active{background:var(--cui-color-primary-light);color:var(--cui-color-primary);
  border-left-color:var(--cui-color-primary);font-weight:500}
.cui-menu-item.disabled{color:var(--cui-text-placeholder);cursor:not-allowed}
.cui-menu-item.disabled:hover{background:transparent;color:var(--cui-text-placeholder)}
.cui-menu-group{font-size:12px;color:var(--cui-text-placeholder);padding:var(--cui-space-3) var(--cui-space-5) var(--cui-space-1)}

.cui-main{margin-left:var(--cui-sidebar-width);padding-top:var(--cui-navbar-height)}
.cui-page{padding:var(--cui-page-padding)}
.cui-crumb{font-size:13px;color:var(--cui-text-secondary);margin-bottom:var(--cui-space-3)}
.cui-crumb .sep{margin:0 6px}

.cui-card{background:var(--cui-bg-card);border:1px solid var(--cui-border-lighter);border-radius:var(--cui-radius-base);
  box-shadow:var(--cui-shadow-card);padding:var(--cui-space-5);margin-bottom:var(--cui-space-4)}
.cui-card-title{font-size:16px;font-weight:600;margin:0 0 var(--cui-space-4);display:flex;align-items:center;gap:var(--cui-space-2)}
.cui-card-title .sub{font-size:12px;color:var(--cui-text-secondary);font-weight:400}

/* 统计卡片 */
.cui-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--cui-space-4)}
.cui-stat{background:var(--cui-bg-card);border:1px solid var(--cui-border-lighter);border-radius:var(--cui-radius-base);
  padding:var(--cui-space-4) var(--cui-space-5);box-shadow:var(--cui-shadow-card)}
.cui-stat .label{font-size:13px;color:var(--cui-text-secondary)}
.cui-stat .value{font-size:28px;font-weight:700;color:var(--cui-color-primary);line-height:1.3;margin-top:var(--cui-space-1)}
.cui-stat .foot{font-size:12px;color:var(--cui-text-placeholder)}

/* 四态：加载 / 空 / 错误 / 无权限 */
.cui-state{padding:var(--cui-space-10) 0;text-align:center;color:var(--cui-text-secondary);font-size:14px}
.cui-state .ic{font-size:40px;color:var(--cui-border-base);display:block;margin-bottom:var(--cui-space-3)}
.cui-state.is-error .ic{color:var(--cui-color-danger)}
.cui-state.is-forbidden .ic{color:var(--cui-color-warning)}
.cui-state .retry{margin-top:var(--cui-space-3)}

/* 查询条 */
.cui-filter{display:flex;flex-wrap:wrap;gap:var(--cui-space-3);align-items:center;margin-bottom:var(--cui-space-4)}

/* ---------- 登录页（v2：参考 cqydxy 样式重构） ----------
   布局：左侧大图（斜切边缘 + 装饰几何图形）+ 右侧白卡（居中）
   特征：学校名/版权、图标输入框、记住我+忘记密码、胶囊按钮、底部文字 ---------- */
.cui-login{min-height:100vh;display:flex;background:#eef2f6;position:relative;overflow:hidden}

/* 左侧大图区域 */
.cui-login .hero{flex:1;position:relative;min-width:0;
  background:url(img/login-hero.jpg) center/cover no-repeat #1a3a32;   /* 相对本 CSS 文件解析 → /assets/img/… */
  clip-path:polygon(0 0,100% 0,76% 100%,0 100%);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:var(--cui-space-8) var(--cui-space-10)}
.cui-login .hero::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.4) 100%);
  pointer-events:none}
.cui-login .hero .school-name{color:#fff;font-size:15px;font-weight:600;
  letter-spacing:2px;text-shadow:0 2px 12px rgba(0,0,0,.45);
  display:flex;align-items:center;gap:var(--cui-space-2);
  position:relative;z-index:1}
.cui-login .hero .school-name .school-icon{width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;
  font-size:14px;color:#fff;backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.28)}
.cui-login .hero .hero-txt{color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.55);
  /* 标题块（数智校园集成平台 / C&UIS 2026 Center）整体向上移动 100px */
  position:absolute;bottom:calc(var(--cui-space-10) + 100px);left:var(--cui-space-10);
  z-index:1}
.cui-login .hero .hero-txt h2{margin:0 0 6px;font-size:26px;font-weight:700}
.cui-login .hero .hero-txt p{margin:0;font-size:14px;opacity:.92}
.cui-login .hero .copyright{color:rgba(255,255,255,.78);font-size:11.5px;
  display:flex;align-items:center;gap:6px;position:absolute;
  bottom:var(--cui-space-10);left:var(--cui-space-10);z-index:1}

/* 右侧面板 */
.cui-login .panel{width:720px;display:flex;align-items:center;justify-content:center;
  /* 登录栏整体向左移动 200px：左右内边距差 160px（(192-32)/2=80 内容中心偏移 80px，
     叠加面板由 480px 加宽到 720px 使面板左边界外移 240px → 内容中心合计左移 200px）;
     右内边距由背景覆盖，视觉上不出现空白带 */
  padding:var(--cui-space-8);padding-right:calc(var(--cui-space-8) + 160px);
  position:relative;z-index:2;
  background:linear-gradient(135deg,#f8fafb 0%,#fff 40%,#f5f7fa 100%)}

/* 登录卡片 */
.cui-login .card{width:100%;max-width:460px;background:var(--cui-bg-card);
  border-radius:var(--cui-radius-lg);
  padding:calc(var(--cui-space-10) * 1.2) var(--cui-space-10);
  box-shadow:0 8px 32px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.04);
  position:relative}
.cui-login .welcome{font-size:12px;letter-spacing:4px;color:var(--cui-color-primary);
  font-weight:600;text-transform:uppercase;text-align:center;margin-bottom:var(--cui-space-1)}
.cui-login h1{font-size:22px;margin:var(--cui-space-1) 0 var(--cui-space-3);
  color:var(--cui-text-primary);text-align:center;font-weight:700}
.cui-login .divider{display:flex;align-items:center;gap:var(--cui-space-3);
  margin-bottom:var(--cui-space-6)}
.cui-login .divider::before,.cui-login .divider::after{
  content:'';flex:1;height:1px;background:var(--cui-border-lighter)}
.cui-login .divider .dot{width:6px;height:6px;border-radius:50%;
  background:var(--cui-color-primary);flex-shrink:0}

/* 输入框：带前缀图标 */
.cui-login .el-input__wrapper{border-radius:var(--cui-radius-base);
  box-shadow:0 0 0 1px var(--cui-border-base) inset;
  transition:border-color .25s,box-shadow .25s}
.cui-login .el-input__wrapper:hover{border-color:var(--cui-color-primary)}
.cui-login .el-input__wrapper.is-focus{border-color:var(--cui-color-primary);
  box-shadow:0 0 0 2px rgba(27,167,132,.12)}

/* 记住我 + 忘记密码 行 */
.cui-login .opts{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--cui-space-6);font-size:13px}
.cui-login .opts label{color:var(--cui-text-regular);cursor:pointer;display:flex;
  align-items:center;gap:4px}
.cui-login .opts .forgot{color:var(--cui-text-secondary);text-decoration:none;
  cursor:pointer;border-bottom:1px solid transparent}
.cui-login .opts .forgot:hover{color:var(--cui-color-primary);
  border-bottom-color:var(--cui-color-primary)}

/* 登录按钮：胶囊形 */
.cui-login .submit{width:100%;height:46px;border-radius:var(--cui-radius-pill);font-size:16px;
  font-weight:500;letter-spacing:6px;
  background:linear-gradient(135deg,var(--cui-color-primary),var(--cui-color-brand));
  border:none;cursor:pointer;transition:all .3s ease;
  color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(27,167,132,.35)}
.cui-login .submit:hover{background:linear-gradient(135deg,var(--cui-color-primary-hover),var(--cui-color-primary));
  transform:translateY(-1px);box-shadow:0 6px 20px rgba(27,167,132,.4)}
.cui-login .submit:active{transform:translateY(0);box-shadow:0 2px 10px rgba(27,167,132,.3)}

/* 卡片底部文字 */
.cui-login .card-footer{text-align:center;margin-top:var(--cui-space-6);
  font-size:12px;color:var(--cui-text-placeholder);letter-spacing:2px}

/* 提示信息 */
.cui-login .tip{margin-top:var(--cui-space-4);font-size:12px;
  color:var(--cui-text-placeholder);line-height:1.7;text-align:center}

/* 装饰性几何图形（三角形/菱形，主题色系） */
.cui-login .deco{position:absolute;z-index:1;pointer-events:none}
.cui-login .deco-tr{top:-25px;right:80px;width:100px;height:100px;
  background:linear-gradient(135deg,var(--cui-color-primary) 0%,var(--cui-color-brand) 100%);
  clip-path:polygon(100% 0,0 0,100% 100%);opacity:.9}
.cui-login .deco-br{bottom:-30px;right:-20px;width:130px;height:130px;
  background:linear-gradient(135deg,var(--cui-color-primary) 0%,#168a6b 100%);
  clip-path:polygon(100% 0,0 100%,100% 100%);opacity:.8}
.cui-login .deco-bl{bottom:80px;left:38%;width:70px;height:70px;
  background:rgba(27,167,132,.12);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);transform:rotate(15deg)}

/* 响应式：窄屏隐藏左图 */
@media(max-width:960px){
  .cui-login .hero{display:none}
  .cui-login .panel{width:100%;max-width:560px;margin:0 auto;padding:var(--cui-space-8)}
  .cui-login .card{max-width:460px}
  .cui-login{background:linear-gradient(160deg,#e8f7f2 0%,#f5f7fa 50%,#fff 100%)}
}

/* ---------- 运维中心：资源指标卡 ---------- */
.cui-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--cui-space-4)}
.cui-metric{background:var(--cui-bg-card);border:1px solid var(--cui-border-lighter);border-radius:var(--cui-radius-base);
  padding:var(--cui-space-4) var(--cui-space-5);box-shadow:var(--cui-shadow-card)}
.cui-metric .mhead{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--cui-text-secondary)}
.cui-metric .mval{font-size:26px;font-weight:700;line-height:1.25;margin:6px 0 2px;font-variant-numeric:tabular-nums}
.cui-metric .mval .unit{font-size:13px;font-weight:400;color:var(--cui-text-secondary);margin-left:4px}
.cui-metric .msub{font-size:12px;color:var(--cui-text-regular);font-variant-numeric:tabular-nums}
.cui-metric .mfoot{font-size:11.5px;color:var(--cui-text-placeholder);margin-top:6px}
.cui-metric .mbar{margin:8px 0 4px;height:8px;border-radius:999px;background:var(--cui-border-lighter);overflow:hidden}
.cui-metric .mbar > i{display:block;height:100%;border-radius:999px;transition:width .4s ease}
.cui-metric.is-warn .mval{color:var(--cui-color-warning)}
.cui-metric.is-error .mval{color:#c45656}
.cui-metric.is-critical .mval{color:var(--cui-color-danger)}
.cui-metric .tag-auto{font-size:11px;color:var(--cui-text-placeholder);border:1px solid var(--cui-border-lighter);
  border-radius:999px;padding:0 6px;margin-left:4px}
.cui-spark{display:block;width:100%;height:42px}

/* ---------- 纳管接入验证（三态） ---------- */
.cui-reg-state{text-align:center;padding:var(--cui-space-6) var(--cui-space-4)}
.cui-reg-state .cui-reg-ico{width:56px;height:56px;border-radius:50%;margin:0 auto var(--cui-space-4);
  display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:700;color:#fff}
.cui-reg-state .cui-reg-title{font-size:16px;font-weight:600;color:var(--cui-text-primary);margin-bottom:var(--cui-space-2)}
.cui-reg-state .cui-reg-sub{font-size:13px;color:var(--cui-text-secondary);line-height:1.9}
.cui-reg-state.is-ok .cui-reg-ico{background:var(--cui-color-primary)}
.cui-reg-state.is-err .cui-reg-ico{background:var(--cui-color-danger)}
.cui-reg-state.is-err .cui-reg-title{color:var(--cui-color-danger)}
.cui-reg-state .cui-reg-spin{width:56px;height:56px;margin:0 auto var(--cui-space-4);border-radius:50%;
  border:4px solid var(--cui-border-lighter);border-top-color:var(--cui-color-primary);
  animation:cui-reg-spin .9s linear infinite}
@keyframes cui-reg-spin{to{transform:rotate(360deg)}}

/* 页脚 */
.cui-footer{text-align:center;color:var(--cui-text-placeholder);font-size:12px;padding:var(--cui-space-4) 0}

/* 内容格式（日期/金额/数字） */
.cui-num{font-variant-numeric:tabular-nums}