/* ==========================================================================
   采购智能辅助系统 · 布局样式
   对应 UI 设计规范 四、五、六、七章
   顶部导航(56px) + 左侧菜单(220/64px) + 内容区(#F9F9F9)
   所有尺寸/间距必须为 4 的倍数
   ========================================================================== */

/* ==========================================================================
   4.1 整体结构
   ========================================================================== */
.app-shell { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.app-body { display: flex; flex: 1 1 auto; min-height: 0; }
.content-wrap { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: var(--c-bg); }
/* 功能区与顶栏 / 左侧菜单 / 边框的边距，以及内部的卡片间距：统一 12px */
.content {
  flex: 1 1 auto; overflow-y: auto; padding: var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.page-body {
  display: flex; flex-direction: column; gap: var(--sp-3);
  flex: 1 1 auto; min-height: 0;
}
.page-body.is-fluid { gap: 0; }
.page-body.is-fluid > .editor-shell { flex: 1 1 auto; min-height: 480px; }
/* 全高工作区（编制工作台）单卡片化：卡片自身撑满剩余高度，内部工作区随之铺满 */
.page-body.is-panel.is-fluid { flex: 1 1 auto; min-height: 480px; }
.page-body.is-panel.is-fluid > .editor-shell { border-radius: 0; }

/* ==========================================================================
   五、顶部导航栏
   ========================================================================== */
.topnav {
  height: var(--h-topnav); flex: none; background: var(--c-primary); color: #fff;
  display: flex; align-items: center; box-shadow: var(--sh-fixed); z-index: 60; position: relative;
}
.topnav .nav-brand {
  width: var(--w-menu); flex: none; display: flex; align-items: center; gap: var(--sp-2);
  padding-left: var(--sp-4); transition: width var(--e-normal); overflow: hidden;
}
.app-shell.is-collapsed .topnav .nav-brand { width: var(--w-menu-collapsed); padding-left: 0; justify-content: center; }
.topnav .nav-brand .brand-logo {
  width: 32px; height: 32px; border-radius: var(--r-sm); background: rgba(255,255,255,.18);
  display: grid; place-items: center; flex: none;
}
.topnav .nav-brand .brand-name { font-size: 16px; font-weight: 600; color: #fff; white-space: nowrap; letter-spacing: .3px; }
.app-shell.is-collapsed .topnav .nav-brand .brand-name { display: none; }

.topnav .nav-mid { flex: 1 1 auto; display: flex; align-items: center; gap: var(--sp-3); padding-left: var(--sp-4); min-width: 0; }
.topnav .nav-toggle {
  width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center;
  color: rgba(255,255,255,.8); transition: all var(--e-fast);
}
.topnav .nav-toggle:hover { background: rgba(255,255,255,.15); color: #fff; }
.topnav .global-search {
  display: flex; align-items: center; gap: var(--sp-2); height: 32px; width: 280px;
  background: rgba(255,255,255,.16); border-radius: var(--r-sm); padding: 0 var(--sp-3);
  color: rgba(255,255,255,.85); font-size: 13px; cursor: pointer; transition: background var(--e-fast);
}
.topnav .global-search:hover { background: rgba(255,255,255,.24); }
.topnav .global-search input {
  background: none; border: none; outline: none; color: #fff; flex: 1; min-width: 0;
  font-size: 13px;
}
.topnav .global-search input::placeholder { color: rgba(255,255,255,.65); }

/* 顶部导航右区：角色切换 + 帮助 + 消息 + 用户 */
.topnav .nav-right { display: flex; align-items: center; gap: var(--sp-2); padding-right: var(--sp-4); flex: none; }
.topnav .nav-icon-btn {
  width: 36px; height: 36px; border-radius: var(--r-sm); display: grid; place-items: center;
  color: rgba(255,255,255,.8); position: relative; transition: all var(--e-fast);
}
.topnav .nav-icon-btn:hover { background: rgba(255,255,255,.15); color: #fff; }
.topnav .nav-icon-btn .badge-num {
  position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; font-size: 10px;
  border: 1px solid var(--c-primary);
}
.topnav .nav-user {
  display: flex; align-items: center; gap: var(--sp-2); height: 40px; padding: 0 var(--sp-2) 0 var(--sp-1);
  border-radius: var(--r-sm); cursor: pointer; position: relative; transition: background var(--e-fast);
}
.topnav .nav-user:hover { background: rgba(255,255,255,.15); }
.topnav .nav-user .nu-avatar {
  width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.22);
  display: grid; place-items: center; font-size: 13px; font-weight: 500; flex: none;
}
.topnav .nav-user .nu-info { display: flex; flex-direction: column; line-height: 1.25; }
.topnav .nav-user .nu-name { font-size: 13px; color: #fff; }
.topnav .nav-user .nu-role { font-size: 11px; color: rgba(255,255,255,.75); }

/* 角色视图切换（顶部导航下拉） */
.nav-role {
  position: relative; display: inline-flex; align-items: center; gap: var(--sp-1);
  height: 36px; padding: 0 var(--sp-3); border-radius: var(--r-sm);
  background: rgba(255,255,255,.16); color: #fff; cursor: pointer; transition: background var(--e-fast);
  font-size: 13px; user-select: none;
}
.nav-role:hover, .nav-role.is-open { background: rgba(255,255,255,.24); }
.nav-role .nr-label { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.nav-role .nr-name { font-size: 13px; font-weight: 500; }
.nav-role .nr-tip { font-size: 11px; color: rgba(255,255,255,.7); }
.nav-role .nr-icon { display: grid; place-items: center; flex: none; opacity: .9; }

.role-popover {
  position: absolute; top: calc(100% + 4px); right: 0; background: #fff;
  border-radius: var(--r-md); box-shadow: var(--sh-pop); border: none;
  width: 320px; z-index: 90; animation: toastIn .16s ease-out;
  overflow: hidden;
}
.role-popover .rp-head {
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-split);
  font-size: 13px; font-weight: 500; color: var(--c-title);
}
.role-popover .rp-list { padding: var(--sp-2); max-height: 360px; overflow-y: auto; }
.role-popover .rp-item {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm); cursor: pointer; transition: background var(--e-fast);
}
.role-popover .rp-item:hover { background: var(--c-thead); }
.role-popover .rp-item.is-active { background: var(--c-primary-100); }
.role-popover .rp-item .rpi-name { font-size: 13px; color: var(--c-title); font-weight: 500; }
.role-popover .rp-item .rpi-org { font-size: 12px; color: var(--c-text-2); }
.role-popover .rp-foot {
  padding: var(--sp-2) var(--sp-4); font-size: 11px; color: var(--c-text-2);
  border-top: 1px solid var(--c-split); line-height: 16px;
}

/* 通知面板 / 用户面板 / 角色切换 共用下拉容器（无边框，靠阴影分层） */
.popover {
  position: absolute; top: calc(100% + 4px); right: 0; background: #fff;
  border-radius: var(--r-md); box-shadow: var(--sh-pop); border: none;
  min-width: 180px; padding: var(--sp-1); z-index: 80; animation: toastIn .16s ease-out;
}
.popover .po-item {
  display: flex; align-items: center; gap: var(--sp-2); height: 36px; padding: 0 var(--sp-3);
  border-radius: var(--r-sm); font-size: 14px; color: var(--c-text); cursor: pointer;
}
.popover .po-item:hover { background: var(--c-thead); color: var(--c-primary); }
.popover .po-item .ic { color: var(--c-icon); }
.popover .po-item:hover .ic { color: var(--c-primary); }
.popover .po-divider { height: 1px; background: var(--c-split); margin: var(--sp-1) 0; }
.popover .po-head {
  padding: var(--sp-3); border-bottom: 1px solid var(--c-split); margin-bottom: var(--sp-1);
}
.popover-wide { min-width: 360px; padding: 0; }
.popover-wide .po-head { display: flex; align-items: center; justify-content: space-between; }
.popover-wide .po-list { max-height: 360px; overflow-y: auto; }
.popover-wide .po-msg {
  display: flex; gap: var(--sp-3); padding: var(--sp-3); border-bottom: 1px solid var(--c-split);
  cursor: pointer;
}
.popover-wide .po-msg:last-child { border-bottom: none; }
.popover-wide .po-msg:hover { background: var(--c-thead); }
.popover-wide .po-msg.is-unread { background: #F7FBFE; }
.popover-wide .po-msg .pm-icon {
  width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center; flex: none;
}
.popover-wide .po-msg .pm-title { font-size: 13px; color: var(--c-title); font-weight: 500; }
.popover-wide .po-msg .pm-desc { font-size: 12px; color: var(--c-text-2); margin-top: 4px; line-height: 20px; }
.popover-wide .po-msg .pm-time { font-size: 12px; color: var(--c-text-2); flex: none; }

/* ==========================================================================
   六、左侧菜单
   ========================================================================== */
.side-menu {
  width: var(--w-menu); flex: none; background: #fff; border-right: 1px solid var(--c-border);
  display: flex; flex-direction: column; transition: width var(--e-normal); overflow: hidden;
}
.app-shell.is-collapsed .side-menu { width: var(--w-menu-collapsed); }
.side-menu .menu-scroll {
  flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: var(--sp-2) 0;
  /* 隐藏纵向滚动条（依然可滚动） */
  scrollbar-width: none; -ms-overflow-style: none;
}
.side-menu .menu-scroll::-webkit-scrollbar { width: 0; height: 0; }
.side-menu .menu-foot { flex: none; border-top: 1px solid var(--c-split); }

/* 一级菜单项（无子级目录，如「工作台」，点击直达页面） */
.menu-item.menu-item-top {
  height: 48px; padding: 0 var(--sp-4); gap: var(--sp-3); font-size: 14px;
}
.menu-item.menu-item-top .ic { color: var(--c-icon); transition: color var(--e-fast); }
.menu-item.menu-item-top:hover,
.menu-item.menu-item-top:hover .ic { color: var(--c-primary); }
.menu-item.menu-item-top.is-active { background: var(--c-primary-100); color: var(--c-primary); }
.menu-item.menu-item-top.is-active .ic { color: var(--c-primary); }
.menu-item.menu-item-top.is-active::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c-primary);
}

.menu-group { }
.menu-group-title {
  display: flex; align-items: center; gap: var(--sp-3); height: 48px; padding: 0 var(--sp-4);
  font-size: 14px; color: var(--c-text); cursor: pointer; user-select: none;
  transition: background var(--e-fast), color var(--e-fast); position: relative;
}
.menu-group-title .ic { color: var(--c-icon); transition: color var(--e-fast); }
.menu-group-title:hover { background: var(--c-thead); color: var(--c-primary); }
.menu-group-title:hover .ic { color: var(--c-primary); }
.menu-group-title .mg-arrow { margin-left: auto; color: var(--c-icon); transition: transform var(--e-normal); }
.menu-group.is-open .menu-group-title .mg-arrow { transform: rotate(90deg); }
.menu-group.has-active .menu-group-title { color: var(--c-title); }
.menu-group.has-active .menu-group-title .ic { color: var(--c-primary); }
.menu-group .menu-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-shell.is-collapsed .side-menu .menu-label,
.app-shell.is-collapsed .side-menu .mg-arrow { display: none; }
.app-shell.is-collapsed .side-menu .menu-group-title { justify-content: center; padding: 0; }

.menu-children { overflow: hidden; max-height: 0; transition: max-height var(--e-slow); }
.menu-group.is-open .menu-children { max-height: 640px; }
.menu-item {
  display: flex; align-items: center; height: 40px; padding: 0 var(--sp-4) 0 40px;
  font-size: 14px; color: var(--c-text); cursor: pointer; position: relative;
  transition: background var(--e-fast), color var(--e-fast); white-space: nowrap;
}
.menu-item:hover { background: var(--c-thead); color: var(--c-primary); }
.menu-item.is-active { background: var(--c-primary-100); color: var(--c-primary); }
.menu-item.is-active::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c-primary);
}
.menu-item .mi-text { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.app-shell.is-collapsed .side-menu .menu-children { display: none; }


/* ==========================================================================
   七、页签栏
   ========================================================================== */
.tabs-bar {
  height: var(--h-tabs); flex: none; background: #fff; border-bottom: 1px solid var(--c-border);
  display: flex; align-items: center; padding: 0 var(--sp-2) 0 var(--sp-2);
  gap: var(--sp-1); z-index: 20;
}
.tabs-bar .tb-scroll {
  flex: 1; display: flex; align-items: center; gap: var(--sp-1);
  overflow-x: auto; overflow-y: hidden; height: 100%;
  scrollbar-width: none; -ms-overflow-style: none;
}
.tabs-bar .tb-scroll::-webkit-scrollbar { height: 0; width: 0; }
.page-tab {
  display: inline-flex; align-items: center; gap: var(--sp-1); height: 100%; padding: 0 var(--sp-3);
  border-radius: var(--r-sm) var(--r-sm) 0 0; background: #fff; color: var(--c-text);
  font-size: 13px; cursor: pointer; white-space: nowrap; border: 1px solid transparent;
  border-bottom: none; transition: all var(--e-fast); position: relative; flex: none;
}
.page-tab:hover { color: var(--c-primary); }
.page-tab.is-active { background: var(--c-bg); color: var(--c-primary); }
/* 选中色条与页签底部对齐（贴合页签栏底边） */
.page-tab.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--c-primary); border-radius: 0;
}
.page-tab .pt-close { color: var(--c-icon); display: grid; place-items: center; border-radius: var(--r-xs); }
.page-tab .pt-close:hover { background: rgba(0,0,0,.06); color: var(--c-text); }
.page-tab .pt-close.hidden { display: none; }
.tabs-bar .tb-actions { display: flex; align-items: center; gap: var(--sp-1); flex: none; padding-left: var(--sp-2); border-left: 1px solid var(--c-split); }

/* 页面标题行（无面包屑，仅标题 + 右侧操作区） */
.page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  background: #fff; border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5); border: 1px solid var(--c-split);
}
.page-head .ph-left { min-width: 0; display: flex; align-items: center; gap: var(--sp-3); }
.page-head .ph-title { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--c-title); }
.page-head .ph-desc { display: none; }
.page-head .ph-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* 标题栏右侧的「切换选项卡」（列表页 / 卡片头统一）：
   Tab 与标题同行靠右，取消底边线、改为浅底分段控件 */
.head-tabs { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }
.head-tabs .tabs { border-bottom: none; gap: var(--sp-1); }
.head-tabs .tab { height: 32px; padding: 0 var(--sp-3); border-radius: var(--r-sm); }
.head-tabs .tab:hover { background: var(--c-primary-100); }
.head-tabs .tab.is-active { background: var(--c-primary-100); font-weight: 500; }
.head-tabs .tab.is-active::after { display: none; }
.head-tabs .tab .count-badge { margin-left: 2px; }

/* 二级页面返回条 */
.subpage-bar {
  display: flex; align-items: center; gap: var(--sp-3); background: #fff;
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); flex-wrap: wrap;
  border: 1px solid var(--c-split);
}
.subpage-bar .sb-back { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--c-text); cursor: pointer; font-size: 14px; }
.subpage-bar .sb-back:hover { color: var(--c-primary); }
.subpage-bar .sb-title { font-size: 16px; font-weight: 500; color: var(--c-title); display: flex; align-items: center; gap: var(--sp-2); }
.subpage-bar .sb-actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* ==========================================================================
   单卡片页面（列表页 / 表单页）
   页面标题、筛选栏、列表、表单等全部收纳进同一张白色卡片内；
   标题与下方内容之间以分隔线区隔，不再出现多卡片堆叠。
   卡片内所有区块统一左右内边距 16px，保证标题 / 按钮 / 筛选栏 / 列表左对齐。
   ========================================================================== */
.page-body.is-panel {
  background: #fff;
  border: 1px solid var(--c-split);
  border-radius: var(--r-md);
  gap: 0; overflow: hidden;
  /* 内容高于容器时按内容撑开（由外层 .content 滚动）：
     表格行数增多后，分页按钮不会被 overflow:hidden 裁掉 */
  flex: 1 0 auto; min-height: auto;
  /* 页内区块间距规范：标题 ↔ 筛选栏、筛选栏 ↔ 批量操作按钮 均为 24px
     构成 = 上一区块下内边距 12px + 分隔线 1px + 下一区块上内边距 8px + 标题行盒余量 3px
     （筛选栏 ↔ 批量操作栏之间无分隔线：12px + 12px = 24px） */
  --gap-above: 12px;   /* 上一区块的下内边距 */
  --gap-below: 8px;    /* 下一区块的上内边距 */
}
/* 区块之间统一用分隔线区隔 */
.page-body.is-panel > *:not(:last-child) { border-bottom: 1px solid var(--c-split); }
.page-body.is-panel > * { border-radius: 0; }

/* 页面标题 / 返回条：卡片抬头，下方一条分隔线；固定 56px 高保证各页节奏一致 */
.page-body.is-panel > .page-head,
.page-body.is-panel > .subpage-bar {
  background: none; border-radius: 0;
  border-bottom: 1px solid var(--c-split);
  padding: var(--sp-3) var(--sp-4) var(--gap-above);
  min-height: 56px;
}
.page-body.is-panel > .page-head > .ph-left > .ph-title { font-size: 18px; line-height: 26px; }


/* 需要留白的区块 */
.page-body.is-panel > .filter-bar,
.page-body.is-panel > .stat-row,
.page-body.is-panel > .guide-steps,
.page-body.is-panel > .guide-panel,
.page-body.is-panel > .guide-foot,
.page-body.is-panel > .org-layout,
.page-body.is-panel > .perm-layout,
.page-body.is-panel > .import-layout,
.page-body.is-panel > .field-config,
.page-body.is-panel > .split-2,
.page-body.is-panel > .split-3-2,
.page-body.is-panel > .preview-shell,
.page-body.is-panel > .editor-body,
.page-body.is-panel > .chart-box,
.page-body.is-panel > .alert { padding: var(--sp-3) var(--sp-4); }


/* 表格卡片自身不设内边距，由内部各区块各自留白 */
.page-body.is-panel > .table-card { padding: 0; }
/* 表格卡片内的内容体 / 工具栏 / 分页 / 筛选栏 / 页签：左右与卡片内其它元素对齐 */
.page-body.is-panel .table-card > .table-toolbar,
.page-body.is-panel .table-card > .pagination,
.page-body.is-panel .table-card > .filter-bar,
.page-body.is-panel .table-card > .tabs,
.page-body.is-panel .table-card > .tabs-bar,
.page-body.is-panel .table-card > .tabs-block {
  padding-left: var(--sp-4); padding-right: var(--sp-4);
}
.page-body.is-panel .table-card > .card-body { padding: var(--sp-3) var(--sp-4) var(--sp-4); }

/* 列表本体：自带边框与圆角，与背景卡片边框之间留出间距；
   左右位置与页内按钮、筛选栏、标题保持同一竖线 */
.page-body.is-panel .table-card .table-wrap {
  margin: 0 var(--sp-4) var(--sp-4);
  border: 1px solid var(--c-split);
  border-radius: var(--r-sm);
  background: #fff;
}

/* 去掉卡片 / 表格卡 / 筛选栏 / 统计卡的底色与描边 */
.page-body.is-panel > .card,
.page-body.is-panel > .table-card,
.page-body.is-panel > .filter-bar,
.page-body.is-panel > .stat-card,
.page-body.is-panel > .metric-card,
.page-body.is-panel > .guide-steps,
.page-body.is-panel > .guide-panel,
.page-body.is-panel > .guide-foot,
.page-body.is-panel .table-card {
  background: none; border: none; box-shadow: none; border-radius: 0;
}
/* 卡片内部区块留白 */
.page-body.is-panel > .card > .card-head { padding: var(--sp-3) var(--sp-4) 0; border-bottom: none; }
.page-body.is-panel > .card > .card-body { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.page-body.is-panel .card { background: none; border: none; box-shadow: none; border-radius: 0; }

/* 统计卡：改为带竖线分隔的平铺行 */
.page-body.is-panel > .stat-row { display: flex; gap: 0; }
.page-body.is-panel > .stat-row > .stat-card { padding: 0 var(--sp-4); border-radius: 0; }
.page-body.is-panel > .stat-row > .stat-card + .stat-card { border-left: 1px solid var(--c-split); }
.page-body.is-panel > .stat-row > .stat-card:first-child { padding-left: 0; }
.page-body.is-panel > .stat-row > .stat-card:last-child { padding-right: 0; }
.page-body.is-panel > .stat-row > .stat-card:hover { box-shadow: none; }

/* 筛选栏：贴齐卡片内边距（无背景卡片）
   上内边距 8px → 与标题区下方 12px + 分隔线合成 24px
   下内边距 12px → 与批量操作栏上内边距 12px 合成 24px */
.page-body.is-panel > .filter-bar { padding: var(--gap-below) var(--sp-4) var(--gap-above); }
.page-body.is-panel > .table-card > .filter-bar {
  padding-top: var(--gap-below); padding-bottom: var(--gap-above);
}
/* 批量操作栏（表格工具栏）：上内边距 12px，与筛选栏合成 24px 间距 */
.page-body.is-panel .table-card > .table-toolbar { padding-top: var(--gap-above); }

/* 表单页：字段区块之间的分隔线更轻 */
.page-body.is-panel > .card + .card { border-top: 1px solid var(--c-split); }
.page-body.is-panel .section-title { margin-bottom: var(--sp-3); }

/* ==========================================================================
   M0 系统登录页（左右分栏卡片：左插画 / 右表单）
   ========================================================================== */
.login-page {
  min-height: 100vh; display: grid; place-items: center; padding: 40px 24px;
  position: relative; overflow: hidden;
  background:
    radial-gradient(760px 420px at 6% 2%, #E7F3FC 0%, rgba(231,243,252,0) 60%),
    radial-gradient(680px 380px at 97% 96%, #E4F0FC 0%, rgba(228,240,252,0) 58%),
    #F7FAFE;
}
/* 氛围色块：极浅主色圆斑（与参考图同位置、同语感） */
.login-page::before, .login-page::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(2,123,208,.11) 0%, rgba(2,123,208,0) 70%);
}
.login-page::before { width: 520px; height: 520px; left: -190px; top: -220px; }
.login-page::after { width: 620px; height: 620px; right: -230px; bottom: -280px; }

/* 底部电厂剪影：浅底改为主色低透明度，组内合成不加深 */
.login-scene {
  position: absolute; left: 0; right: 0; bottom: 0; height: 196px;
  pointer-events: none; z-index: 0;
}
.login-scene svg { display: block; width: 100%; height: 100%; }

.login-wrap { position: relative; z-index: 2; width: 100%; max-width: 880px; }

/* 品牌行：置于卡片左上角外侧 */
.login-brand { display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-4) 4px; }
.login-brand .lb-logo {
  width: 40px; height: 40px; border-radius: 10px; background: var(--c-primary);
  display: grid; place-items: center; color: #fff; flex: none;
}
.login-brand .lb-logo .ic { width: 22px; height: 22px; }
.login-brand .lb-name { font-size: 17px; font-weight: 600; color: var(--c-title); letter-spacing: .5px; }
.login-brand .lb-sub { font-size: 12px; color: var(--c-text-2); margin-top: 2px; }

/* 分栏卡片：左插画主色实底 / 右白色表单 */
.login-card {
  display: grid; grid-template-columns: 1fr 440px; align-items: stretch;
  background: #fff; border-radius: 10px; overflow: hidden;
  box-shadow: 0 16px 48px rgba(2,60,110,.14);
}
/* 左栏配图：等比铺满，比例与图片一致，无需留边 */
.login-visual {
  background: #2B7BFA; position: relative; overflow: hidden;
  aspect-ratio: 768 / 695;
}
/* 微调色相，使配图蓝更贴近平台主色 #027BD0（只旋色相，不压亮度以免发灰） */
.login-visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: hue-rotate(-10deg); }

/* 右栏表单 */
.login-panel { padding: 40px 44px 38px; display: flex; flex-direction: column; }
.login-panel .lp-title {
  font-size: 20px; font-weight: 600; color: var(--c-title); text-align: center;
  letter-spacing: 4px; text-indent: 4px; margin-bottom: var(--sp-6);
}
.login-card #loginPanel { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.login-card .lc-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.login-card .input-affix .ic { left: 14px; width: 16px; height: 16px; }
.login-card .input-affix .input { height: 46px; padding-left: 38px; font-size: 14px; }
.login-card .row-between { margin-top: -2px; }
.login-card .btn-lg { height: 46px; font-size: 15px; border-radius: var(--r-sm); letter-spacing: 2px; text-indent: 2px; }
.login-card .lc-err {
  display: flex; align-items: center; gap: var(--sp-1); font-size: 12px; color: var(--c-danger);
  background: var(--c-danger-bg); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3);
}

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width: 960px) {
  .login-card { grid-template-columns: 1fr; }
  .login-visual { aspect-ratio: auto; height: 200px; }
  .login-panel { padding: 32px 28px 30px; }
}
@media (max-width: 980px) {
  .topnav .global-search { width: 200px; }
  .app-shell:not(.is-collapsed) .side-menu { width: var(--w-menu-collapsed); }
  .app-shell:not(.is-collapsed) .side-menu .menu-label,
  .app-shell:not(.is-collapsed) .side-menu .mg-arrow { display: none; }
  .app-shell:not(.is-collapsed) .side-menu .menu-group-title { justify-content: center; padding: 0; }
  .app-shell:not(.is-collapsed) .side-menu .menu-children { display: none; }
  .topnav .nav-brand { width: var(--w-menu-collapsed); padding-left: 0; justify-content: center; }
  .topnav .nav-brand .brand-name { display: none; }
  .nav-role .nr-tip { display: none; }
  .role-popover { width: 280px; }
}
@media (max-width: 760px) {
  .topnav .global-search { display: none; }
}