/* ============ 启动遮罩（token 校验期 / 主界面首帧前） ============ */
#shopSwitcher,
#storeScopeBadge,
.header .scope-badge {
  display: none !important;
}

.boot-mask {
  position: fixed; inset: 0; z-index: 9998;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(90% 70% at 50% 28%, rgba(56, 189, 248, .07), transparent 70%),
    var(--bg-base);
  transition: opacity .4s ease, visibility .4s ease;
}
.boot-mask.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.boot-mask-core { display: flex; flex-direction: column; align-items: center; }
.boot-mask-logo {
  width: 46px; height: 46px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--primary-bg); border: 1px solid var(--border-neutral);
}
.boot-mask-logo svg { width: 26px; height: 26px; }
.boot-mask-logo svg circle { fill: var(--primary); }
.boot-mask-logo svg path { stroke: var(--primary); }
.boot-mask-title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text); letter-spacing: .05em; }
.boot-mask-stage { margin-top: 10px; font-size: var(--fs-xs); color: var(--text-faint); }
.boot-mask-bar {
  position: relative; width: 180px; height: 2px; margin-top: 14px;
  border-radius: 99px; background: rgba(148, 163, 184, .16); overflow: hidden;
}
.boot-mask-bar i {
  position: absolute; inset: 0; width: 38%; border-radius: 99px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  animation: boot-mask-slide 1.15s ease-in-out infinite;
}
@keyframes boot-mask-slide { from { transform: translateX(-110%); } to { transform: translateX(320%); } }
.boot-mask-retry {
  display: none; margin-top: 16px; padding: 6px 16px; cursor: pointer;
  border-radius: var(--radius-sm); font-family: inherit;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--primary); background: var(--bg-raised); border: 1px solid var(--border-strong);
}
.boot-mask-retry:hover { border-color: var(--border-focus); }

/* ============ 登录页 ============ */
/* 背景用极淡网格给出「工程感」，不发光、不用纵向渐变（铁律 10） */
.login-wrap {
  min-height: 100vh;
  min-height: 100dvh;
  /* 用 flex + 子项 margin:auto 居中：grid 的单列轨道是 max-content，
     会靠左对齐（justify-content 默认 start），窗口比卡片宽时整块会偏左 */
  display: flex;
  padding: 24px;
  position: relative;
  z-index: 1;
  background-color: var(--bg-base);
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.05) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px;
}

/* 左品牌 / 右表单 的分栏外壳：左右等宽，避免左重右轻 */
.login-shell {
  width: min(880px, 100%);
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.login-brand {
  display: flex;
  flex-direction: column;
  padding: 40px 38px 32px;
  background: var(--bg-raised);
  border-right: 1px solid var(--border);
}
.lb-head { display: flex; align-items: center; gap: 12px; }
.lb-logo {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-neutral);
  border-radius: var(--radius-sm);
  color: var(--primary);
  flex: none;
}
.lb-logo svg { width: 24px; height: 24px; }
.lb-name {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text);
  letter-spacing: 0.02em;
}

.lb-main { margin-top: 28px; }
.lb-main h1 {
  margin: 0;
  font-size: var(--fs-3xl);
  line-height: 1.25;
  font-weight: var(--fw-bold);
  color: var(--text);
  letter-spacing: 0.01em;
}
.lb-main p {
  margin: 12px 0 0;
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--text-dim);
}

/* 功能介绍：2×3 网格，只给「功能名 + 半句话」，不写具体数量，避免左栏过长 */
.lb-feats {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
}
.lb-feats li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
}
.lb-feat-ic {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 2px;
  fill: none;
  stroke: var(--primary);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lb-feats b {
  display: block;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--text);
  line-height: 1.45;
  white-space: nowrap;
}
.lb-feats span {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-xs);
  color: var(--text-dim);
  line-height: 1.5;
  white-space: nowrap;
}

.lb-foot {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}
.lb-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  flex: none;
}

.login-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 38px;
}
.lp-head h2 {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--text);
}
.lp-head p {
  margin: 8px 0 0;
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

/* 带标签的输入框：占位符会消失，标签不会 */
.lp-field { display: block; margin-top: 22px; }
/* 首个输入框紧跟错误提示槽（该槽即使为空也占 18px 高度，防止报错时整块跳动） */
.login-err + .lp-field { margin-top: 12px; }
.lp-field > span {
  display: block;
  margin-bottom: 8px;
  font-size: var(--fs-sm);
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.lp-field input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-md);
  outline: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.lp-field input::placeholder { color: var(--text-faint); }
.lp-field input:focus {
  border-color: var(--primary);
  background: var(--bg-surface);
}

.login-submit {
  margin-top: 26px;
  height: 46px;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
}

.lp-foot {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lp-ghost {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  text-decoration: none;
  transition: color 0.15s ease;
}
.lp-ghost:hover { color: var(--primary); }

@media (max-width: 900px) {
  .login-shell { grid-template-columns: 1fr; width: min(420px, 100%); }
  .login-brand { border-right: none; border-bottom: 1px solid var(--border); padding: 26px 26px 22px; }
  .lb-main { margin-top: 22px; }
  .lb-main h1 { font-size: 26px; }
  .lb-main p { margin-top: 10px; font-size: var(--fs-sm); }
  /* 移动端空间有限：功能清单收成两列紧凑排布 */
  .lb-feats {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 14px;
  }
  .lb-feats span { display: none; }
  .lb-foot { padding-top: 18px; }
  .login-panel { padding: 26px; }
}

/* 扫码绑定页仍复用旧卡片样式（去掉四角标线） */
.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-neutral) !important;
  border-radius: var(--radius-lg);
  padding: 36px 32px 32px;
  box-shadow: var(--shadow-md) !important;
  position: relative;
}

.login-card h1 {
  font-size: var(--fs-xl);
  text-align: center;
  font-weight: var(--fw-bold);
  color: var(--text) !important;
  letter-spacing: 0.5px;
}
.login-card .sub {
  text-align: center;
  color: var(--text-dim) !important;
  margin-bottom: 24px;
  font-size: var(--fs-sm);
}
.login-card input {
  background: var(--bg-raised) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  margin-bottom: 12px;
  width: 100%;
  font-size: var(--fs-base);
  outline: none;
}
.login-card input:focus {
  border-color: var(--primary) !important;
}
.login-err {
  color: var(--danger);
  font-size: var(--fs-sm);
  min-height: 18px;
  margin-bottom: 8px;
  line-height: 1.4;
}

/* 登录提交态：按钮内联转圈 + 文案替换，输入区降透明。
   没有这一层时，点「登录」到接口返回之间界面毫无变化，用户会以为没点上。 */
.btn .btn-spin {
  display: none; width: 16px; height: 16px; flex: none;
  border: 2px solid rgba(8, 11, 17, .22); border-top-color: #05090f;
  border-radius: 50%; animation: login-spin .7s linear infinite;
}
.btn.is-loading { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: progress; }
.btn.is-loading .btn-spin { display: inline-block; }
.btn.is-loading:disabled, .btn.is-loading[disabled] { opacity: .92; cursor: progress; }
@keyframes login-spin { to { transform: rotate(360deg); } }

#loginView.is-busy .login-card input,
#loginView.is-busy .lp-field input { opacity: .55; pointer-events: none; }
#loginView.is-busy .login-card a,
#loginView.is-busy .lp-ghost { pointer-events: none; opacity: .5; }
.login-err.is-shake { animation: login-shake .32s ease; }
@keyframes login-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* ============ 主架构：侧边栏与主体 ============ */
.layout {
  display: flex;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

/* 侧边栏：比页面底再深一档，用明度差分层，不用描边分隔 */
.sidebar {
  width: var(--sidebar-w, 240px);
  background: var(--sidebar-bg) !important;
  border-right: 1px solid var(--sidebar-border);
  color: var(--sidebar-text);
  flex-shrink: 0;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}

.sidebar .logo {
  padding: 13px 12px 13px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--sidebar-border);
  flex-shrink: 0;
  position: relative;
  min-height: 56px;
  box-sizing: border-box;
  /* Logo 即侧栏开合开关 */
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color 0.16s ease;
}
.sidebar .logo:hover { background: var(--bg-hover); }
.sidebar .logo:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.sidebar .logo:active .logo-icon { transform: scale(0.94); }

.sidebar .logo .logo-icon {
  width: 32px;
  height: 32px;
  background: var(--primary-bg);
  border: 1px solid var(--border-neutral) !important;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.16s ease, background-color 0.16s ease, transform 0.12s ease;
}
.sidebar .logo:hover .logo-icon {
  border-color: var(--primary) !important;
}
.sidebar .logo .logo-icon svg circle { fill: var(--primary) !important; }
.sidebar .logo .logo-icon svg path { stroke: var(--primary) !important; }

.sidebar .logo .logo-text-wrap {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 0.18s ease, width 0.18s ease;
}
.sidebar .logo .logo-text {
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: 0.3px;
  line-height: 1.3;
}
.sidebar .logo .logo-sub {
  color: var(--text-faint);
  font-size: var(--fs-xs);
  line-height: 1.3;
}

/* 侧栏顶端收缩按钮已移除：改由 Logo 区整体承担开合（点 Logo 收起 / 拉起） */
/* 侧栏右沿悬浮拉手已移除：Logo 已是唯一显式开合入口，避免多入口打架 */

/* 侧栏右沿拖拽条 */
.sidebar-resizer {
  position: absolute;
  top: 0;
  right: -3px;
  width: 6px;
  bottom: 0;
  cursor: col-resize;
  z-index: 52;
  transition: background-color 0.15s ease;
}
.sidebar-resizer:hover,
.sidebar-resizer.is-active {
  background: var(--primary);
  opacity: 0.55;
}

/* ---- 导航项：统一 6px 圆角、单行、舒适呼吸间距 ---- */
.nav-item {
  padding: 6px 12px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  margin: 2px 6px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: var(--sidebar-text);
  position: relative;
  transition: background-color 0.15s ease, color 0.15s ease, padding 0.15s ease;
  border: 1px solid transparent;
  white-space: nowrap;
  box-sizing: border-box;
}
.nav-item:hover {
  background: var(--sidebar-item-hover);
  color: var(--sidebar-text-hover);
}
/* 激活态：仅用底色 + 文字色，无描边无阴影无竖条 */
.nav-item.active {
  background: var(--sidebar-active-bg) !important;
  border-color: transparent !important;
  color: var(--sidebar-active-text) !important;
  font-weight: var(--fw-semibold);
  box-shadow: none !important;
}
.nav-item.active::before { display: none !important; }
.nav-item .nav-item-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 矢量导航图标 */
.nav-ico {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: inline-block;
  vertical-align: middle;
}
.nav-sub-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-faint);
  flex-shrink: 0;
  display: inline-block;
  margin: 0 6px 0 2px;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.nav-item:hover .nav-sub-dot,
.nav-item.active .nav-sub-dot {
  background: var(--primary);
  transform: scale(1.15);
}

/* 顶部两个置顶大卡片入口：加呼吸感，字体略大且与分组清晰区隔 */
.nav-home {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--text);
  padding: 7px 12px;
  margin: 3px 6px;
}
.nav-home.active { color: var(--primary) !important; }

/* 置顶快捷卡片与下方业务分类的视觉分割线 */
.nav-section-divider {
  height: 1px;
  background: var(--sidebar-border);
  margin: 12px 10px 10px;
  opacity: 0.85;
}

/* ---- 分组标题 ---- */
.nav-group-head {
  padding: 7px 12px;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--text-faint);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  user-select: none;
  letter-spacing: 0.3px;
  margin: 5px 6px 2px;
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-group-head:hover {
  background: var(--sidebar-item-hover);
  color: var(--text-dim);
}
.nav-group-head > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 分组标题：图标与文字必须留出呼吸间距（修复 SVG 与文字零间距贴脸） */
.nav-group-head .ng-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
}
.nav-group-head .ng-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 折叠箭头：用 CSS 画 1px 细线箭头 */
.nav-group-head .ng-arrow {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.18s ease;
  font-size: 0;
  line-height: 0;
  color: var(--text-faint);
  margin-top: -3px;
}
.nav-group-head .ng-arrow.open {
  transform: rotate(45deg);
  margin-top: 0;
}

/* 子项菜单：优雅左侧树状引导细线，消除拥挤感，间距舒适 */
.nav-group-body {
  padding: 2px 0 3px;
  margin-left: 20px;
  border-left: 1.5px solid rgba(148, 163, 184, 0.12);
}
.nav-group-body .nav-item {
  padding: 5px 10px 5px 12px;
  margin: 1px 4px 1px 6px;
  font-size: var(--fs-md);
  color: var(--sidebar-text);
  line-height: 1.45;
  /* 圆点与文字的水平间距：flex gap 12px + 圆点右外边距 6px 原本叠加成 18px，
     这里 gap 收到 8px、圆点右外边距收到 2px，合计 10px。 */
  gap: 8px;
}
.nav-group-body .nav-sub-dot {
  margin: 0 2px;
}
.nav-group-body .nav-item:hover {
  color: var(--sidebar-text-hover);
}

/* ============ 顶栏 ============ */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-left: var(--sidebar-w, 240px);
  position: relative;
  z-index: 1;
  transition: margin-left 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============ 侧边栏折叠收缩态 (Collapsed 60px) ============ */
.sidebar.is-collapsed {
  width: 60px !important;
}

.layout.sidebar-is-collapsed .main {
  margin-left: 60px !important;
}

/* 折叠时 Logo：整行成为「点一下拉起」的开关，居中保留 32px 图标 */
.sidebar.is-collapsed .logo {
  padding: 12px 14px;
  justify-content: center;
}
.sidebar.is-collapsed .logo .logo-text-wrap {
  width: 0;
  opacity: 0;
  pointer-events: none;
  display: none;
}

/* 导航项折叠：居中、文字隐藏 */
.sidebar.is-collapsed .nav-item {
  padding: 10px 0 !important;
  margin: 3px 6px !important;
  justify-content: center;
  gap: 0;
}
.sidebar.is-collapsed .nav-item .nav-item-text {
  display: none !important;
}
.sidebar.is-collapsed .nav-item .nav-ico {
  margin: 0 !important;
}
.sidebar.is-collapsed .nav-item .nav-sub-dot {
  margin: 0 !important;
}

/* 分组标题折叠：仅居中显示分组图标，标题文字与下箭头隐藏 */
.sidebar.is-collapsed .nav-group-head {
  padding: 9px 0 !important;
  margin: 8px 6px 3px !important;
  justify-content: center;
}
.sidebar.is-collapsed .nav-group-head .ng-title-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar.is-collapsed .nav-group-head .ng-title-text,
.sidebar.is-collapsed .nav-group-head .ng-arrow {
  display: none !important;
}

/* 折叠时子菜单收拢后内边距重置 */
.sidebar.is-collapsed .nav-group-body .nav-item {
  padding-left: 0 !important;
}

/* 侧边栏折叠悬停气泡 (Tooltip - 绝对定位悬浮于侧栏右侧) */
.sidebar.is-collapsed .nav-item[data-title],
.sidebar.is-collapsed .nav-group-head[data-title] {
  position: relative;
}
.sidebar.is-collapsed .nav-item[data-title]:hover::after,
.sidebar.is-collapsed .nav-group-head[data-title]:hover::after {
  content: attr(data-title);
  position: fixed;
  left: 68px;
  background: #090d16;
  color: #f1f5f9;
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  line-height: 1.4;
  animation: nav-tooltip-in 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes nav-tooltip-in {
  from { opacity: 0; transform: translateX(-5px); }
  to { opacity: 1; transform: translateX(0); }
}

/* 顶栏汉堡按钮：仅移动端抽屉使用；桌面端一律不出现（开合交给侧栏 Logo，避免两个入口打架） */
@media (min-width: 901px) {
  .menu-btn {
    display: none !important;
  }
}
@media (max-width: 900px) {
  .menu-btn {
    display: block;
  }
}

/* 折叠态下树形细线收拢重置 */
.sidebar.is-collapsed .nav-group-body {
  margin-left: 0 !important;
  border-left: none !important;
  padding: 0 !important;
}
.sidebar.is-collapsed .nav-section-divider {
  margin: 8px 6px !important;
}

.header {
  height: 56px;
  padding: 0 20px;
  background: var(--bg-base) !important;
  border-bottom: 1px solid var(--border) !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: none !important;
}
/* 原「激光流光束」为循环移动的渐变亮线，属装饰性发光，已移除 */

.header h2 {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--text) !important;
  letter-spacing: 0.2px;
  white-space: nowrap;
  flex-shrink: 0;
  margin: 0;
}
.header .date {
  font-size: var(--fs-sm);
  font-family: var(--font-mono);
  color: var(--text-dim);
  white-space: nowrap;
}
.header .user {
  color: var(--text-muted);
  font-size: var(--fs-base);
}

/* 顶栏左右两簇：统一间距节奏 */
.header .hdr-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.header .hdr-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}

/* 门店范围徽章 */
.scope-badge {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  padding: 1px 8px;
  border-radius: 999px;
  /* 权限范围提示，不是状态：用中性色，避免与告警抢注意力 */
  background: var(--bg-raised);
  color: var(--text-dim);
  border: 1px solid var(--border);
  white-space: nowrap;
  flex-shrink: 0;
}

/* 通知铃铛 */
.notify-bell {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease;
}
.notify-bell:hover { background: var(--bg-raised); }
.notify-bell svg {
  width: 17px;
  height: 17px;
  stroke: var(--text-dim);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.notify-bell:hover svg { stroke: var(--primary); }
.notify-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 6px;
  height: 6px;
  background: var(--danger);
  border-radius: 50%;
}

/* 用户触发块：常态无边框（顶栏更安静），悬停/展开才浮起一层 */
.user-header-pill {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 7px 0 5px;
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid transparent;
  max-width: 240px;
  user-select: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.user-header-pill:hover,
.user-header-pill.open {
  background: var(--bg-raised);
  border-color: var(--border);
}
.user-header-pill:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
/* 头像：方形圆角（与侧栏一致），圆形在胶囊里会显得拥挤 */
.user-header-pill .avatar {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  background: var(--primary-bg);
  border: 1px solid rgba(56, 189, 248, 0.22);
  color: var(--primary);
  font-weight: var(--fw-semibold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-family: var(--font-mono);
  flex-shrink: 0;
}
/* 名称 + 角色同一行：中文不折行，长名省略 */
.user-header-pill .uhp-text {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  line-height: 1;
}
.user-header-pill #userName {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.user-header-pill #userRoleBadge {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  font-weight: var(--fw-normal);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 7px;
  padding-left: 7px;
  border-left: 1px solid var(--border-strong);
}
/* 下拉箭头：1px 细线 SVG（原 CSS 三角 + ▾ 字符会叠出两个箭头） */
.user-header-pill .uhp-caret {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--text-faint);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.16s ease, stroke 0.15s ease;
}
.user-header-pill:hover .uhp-caret,
.user-header-pill.open .uhp-caret { stroke: var(--text-muted); }
.user-header-pill .uhp-caret.up { transform: rotate(180deg); }

/* 个人浮层菜单 */
#userMenu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 212px;
  max-width: calc(100vw - 24px);
  padding: 6px;
  background: var(--bg-overlay) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
  color: var(--text) !important;
  z-index: 200;
  overflow: hidden;
  animation: umIn 0.14s ease-out;
}
@keyframes umIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.um-head {
  padding: 7px 9px 10px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 5px;
}
.um-name {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 角色：中性小胶囊，不做成彩色徽章 */
.um-role {
  display: inline-flex;
  align-items: center;
  margin-top: 6px;
  padding: 1px 6px;
  border-radius: var(--r-xs);
  background: rgba(148, 163, 184, 0.12);
  color: var(--text-dim);
  font-size: var(--fs-xs);
  line-height: 16px;
}
.um-item {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 32px;
  padding: 0 9px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.um-item:hover {
  background: var(--bg-raised) !important;
  color: var(--text) !important;
}
.um-ico {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--text-faint);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.12s ease;
}
.um-item:hover .um-ico { stroke: var(--text-muted); }
.um-sep {
  height: 1px;
  margin: 5px 6px;
  background: var(--border-light);
}
.um-item.um-danger { color: var(--danger); }
.um-item.um-danger .um-ico { stroke: var(--danger); opacity: 0.85; }
.um-item.um-danger:hover { background: var(--red-bg) !important; }

/* 菜单点击垫：菜单展开时盖住内容区（含 iframe 嵌入大屏），
   点任意空白处即收起；.header 临时抬高层级，让菜单浮在点击垫之上 */
.um-backdrop {
  position: fixed;
  inset: 0;
  z-index: 199;
  background: transparent;
}
html.um-open .header { z-index: 205; }

/* ============ 主内容区 ============ */
.content {
  padding: 20px;
  overflow: auto;
  min-height: calc(100vh - 56px);
  flex: 1;
}

/* ============ 移动端抽屉 ============ */
.side-mask {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 49;
}
.menu-btn {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-raised);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.menu-btn:hover {
  border-color: var(--primary);
  background: var(--bg-hover);
}
.menu-btn::before,
.menu-btn::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  height: 1.5px;
  background: var(--text-muted);
  transition: background-color 0.15s ease;
}
.menu-btn:hover::before,
.menu-btn:hover::after {
  background: var(--primary);
}
.menu-btn::before { top: 11px; }
.menu-btn::after { bottom: 11px; }

@media (max-width: 900px) {
  .sidebar-resizer {
    display: none !important;
  }
  .menu-btn { display: block; }
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    width: 260px !important;
    padding-top: var(--safe-top, env(safe-area-inset-top, 0px));
    padding-bottom: var(--safe-bottom, env(safe-area-inset-bottom, 0px));
  }
  .sidebar.open { transform: translateX(0); }
  .side-mask.show { display: block; }
  .main { margin-left: 0 !important; }
  .content { padding: 14px; }
  .header {
    padding: 0 14px;
    padding-top: var(--safe-top, env(safe-area-inset-top, 0px));
    height: calc(56px + var(--safe-top, env(safe-area-inset-top, 0px)));
    gap: 10px;
  }
  .header .date { display: none; }
  /* 移动端顶栏：页面标题优先，允许收缩并省略，不再被硬裁成单字 */
  .header .hdr-left { gap: 8px; flex: 1 1 auto; min-width: 0; }
  .header h2 {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* 门店切换器在窄屏让位给标题（完整门店名可在个人菜单/门店页查看） */
  .header #shopSwitcher { display: none; }
  .header .hdr-right { gap: 8px; }
  .header .scope-badge { display: none !important; }
  /* 新手指引按钮在窄屏收起（侧栏与 SOP 手册内仍可进入导览），把宽度让给页面标题 */
  .header .tour-guide-btn { display: none; }
  .user-header-pill { max-width: 150px; padding-right: 8px; }
  /* 嵌入大屏在小屏下改为自适应高度，避免 calc(100vh-56px) 溢出 */
  .hik-embed-wrap,
  .prep-embed-wrap { margin: 0; height: calc(100vh - 56px - var(--safe-top, 0px)); }
  /* 触控目标：导航项不小于 40px 高，便于手指点选 */
  .nav-item { min-height: 40px; padding: 10px 12px !important; }
  /* 底部安全区留白 */
  .sidebar-user { padding-bottom: calc(12px + var(--safe-bottom, env(safe-area-inset-bottom, 0px))); }
}

/* 移动端指标卡改两列，避免 5 张卡竖排吃满首屏 */
@media (max-width: 640px) {
  .stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat { padding: 12px 14px !important; }
  .stat .num { font-size: var(--fs-xl); }
  .card { padding: 14px !important; }
  /* 顶栏用户胶囊进一步收缩（名字至少留出 3 个字，超出省略） */
  .user-header-pill { max-width: 132px; padding-right: 5px; }
  .user-header-pill .uhp-text #userRoleBadge { display: none; }
  /* 通知铃铛缩小 */
  .notify-bell { width: 30px; height: 30px; }
  /* 内容区底部安全区留白 */
  .content { padding-bottom: calc(14px + var(--safe-bottom, env(safe-area-inset-bottom, 0px))) !important; }
}

/* 超小屏手机：单列指标卡、字号微缩 */
@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr; }
  .header { padding: 0 10px; }
  .content { padding: 10px; }
  .user-header-pill .uhp-text { display: none; }
  .card { padding: 12px !important; }
}

/* 大屏只放宽栅格间距，不改 .content 的 padding ——
 * .hik-embed-wrap / .prep-embed-wrap 挂在 .main 下（与 #contentBox 同级），
 * 不吃 .content 的 padding，所以它们保持 margin: 0；一旦给它们加负边距，
 * iframe 就会被顶到 sticky 顶栏底下，子页顶部被吃掉一截。 */