/* ==========================================================================
   授权工具（网页版）全局样式 —— v2 设计系统
   --------------------------------------------------------------------------
   设计语言：现代管理后台 · Indigo 蓝紫品牌色 · 卡片化 · 大圆角柔和阴影
   原则：
     1. 优先使用 Element Plus 公开 CSS 变量（--el-*）做主题覆盖，升级兼容；
     2. 项目自有 aw-* 类只做布局与排版增强；
     3. 覆写 Element Plus 内部类（.el-xxx）一律收敛到文件末尾「白名单」区块，
        桌面端不覆写内部类，移动端（≤600px）按清单逐条复验（锁定 EP 2.8.8）。
   ========================================================================== */

:root {
  /* -- 品牌色板（Indigo） -- */
  --aw-primary: #4c63e4;
  --aw-primary-weak: #6f88f7;
  --aw-primary-strong: #3849b3;
  --aw-primary-ink: #232e74;
  --aw-primary-bg: #f3f5ff;
  --aw-primary-border: #b7c5fc;

  /* -- 语义色 -- */
  --aw-success: #12a06b;
  --aw-success-bg: #e8f7f1;
  --aw-warning: #d98a1f;
  --aw-warning-bg: #fdf4e3;
  --aw-danger: #d64545;
  --aw-danger-bg: #fdf0f0;
  --aw-info: #7a8291;
  --aw-info-bg: #f1f3f6;

  /* -- 中性色 -- */
  --aw-bg: #f4f6fb;
  --aw-surface: #ffffff;
  --aw-border: #e5e9f2;
  --aw-border-strong: #d7dce8;
  --aw-text: #23283a;
  --aw-text-weak: #7a8291;
  --aw-text-faint: #a8afbf;

  /* -- 几何 -- */
  --aw-radius: 8px;
  --aw-radius-lg: 12px;
  --aw-shadow-sm: 0 1px 2px rgba(35, 40, 74, 0.04), 0 1px 3px rgba(35, 40, 74, 0.05);
  --aw-shadow-md: 0 4px 14px rgba(35, 40, 74, 0.08);
  --aw-shadow-lg: 0 12px 32px rgba(35, 40, 74, 0.12);

  --aw-mono: "Cascadia Mono", "JetBrains Mono", Consolas, "Courier New", monospace;

  /* -- Element Plus 公开变量主题覆盖（升级 EP 时无需改动） -- */
  --el-color-primary: #4c63e4;
  --el-color-primary-light-3: #6f88f7;
  --el-color-primary-light-5: #a5b5fa;
  --el-color-primary-light-7: #cdd6fc;
  --el-color-primary-light-8: #dce3fe;
  --el-color-primary-light-9: #f3f5ff;
  --el-color-primary-dark-2: #3849b3;
  --el-color-success: #12a06b;
  --el-color-warning: #d98a1f;
  --el-color-danger: #d64545;
  --el-color-error: #d64545;
  --el-color-info: #7a8291;
  --el-border-radius-base: 8px;
  --el-border-radius-small: 6px;
  --el-border-radius-round: 999px;
  --el-font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background: var(--aw-bg);
  color: var(--aw-text);
  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

/* 启动占位（脚本加载完成后被 Vue 替换） */
.aw-boot {
  padding: 64px 0;
  text-align: center;
  color: var(--aw-text-weak);
}

.aw-app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---------------------------------------------------------------- 顶栏 --- */
.aw-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--aw-surface);
  border-bottom: 1px solid var(--aw-border);
  box-shadow: var(--aw-shadow-sm);
}

.aw-header__bar {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 20px;
}

.aw-header__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  min-width: 0;
}

/* 品牌 logo 方块 */
.aw-header__logo {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, #6f88f7 0%, #4c63e4 55%, #3849b3 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(76, 99, 228, 0.35);
  user-select: none;
}

.aw-header__title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.aw-header__version {
  font-size: 11px;
  color: var(--aw-text-faint);
  background: var(--aw-bg);
  border-radius: 999px;
  padding: 1px 8px;
}

.aw-header__status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}

/* 状态徽标：带语义色小圆点 */
.aw-header__status .el-tag {
  --el-tag-bg-color: var(--aw-bg);
  --el-tag-border-color: var(--aw-border-strong);
  --el-tag-text-color: var(--aw-text-weak);
  border-radius: 999px;
  padding: 0 10px;
  height: 24px;
  line-height: 22px;
  font-size: 12px;
}

.aw-header__status .el-tag.el-tag--success {
  --el-tag-bg-color: var(--aw-success-bg);
  --el-tag-border-color: #bfe8d8;
  --el-tag-text-color: var(--aw-success);
}

.aw-header__status .el-tag.el-tag--danger {
  --el-tag-bg-color: var(--aw-danger-bg);
  --el-tag-border-color: #f3c4c4;
  --el-tag-text-color: var(--aw-danger);
}

.aw-header__status .el-tag.el-tag--warning {
  --el-tag-bg-color: var(--aw-warning-bg);
  --el-tag-border-color: #f2d9a8;
  --el-tag-text-color: var(--aw-warning);
}

.aw-header__user {
  font-size: 13px;
  font-weight: 500;
  color: var(--aw-text);
  white-space: nowrap;
  background: var(--aw-primary-bg);
  color: var(--aw-primary-strong);
  border-radius: 999px;
  padding: 3px 12px;
}

.aw-header__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
}

.aw-header__actions .el-button + .el-button {
  margin-left: 0;
}

.aw-header__actions .el-button--text,
.aw-header__actions .el-button.is-text {
  font-size: 13px;
}

/* 常驻安全警示条 —— 需求硬性要求，不可关闭 */
.aw-header__warning {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 20px;
  background: var(--aw-danger-bg);
  border-top: 1px solid #f3c4c4;
  color: #b03a3a;
  font-size: 13px;
  font-weight: 500;
}

.aw-header__warning-icon {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--aw-danger);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ------------------------------------------------------------ 主体布局 --- */
.aw-main {
  flex: 1 1 auto;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 20px 36px;
}

.aw-tabs {
  background: var(--aw-surface);
  border: 1px solid var(--aw-border);
  border-radius: var(--aw-radius-lg);
  padding: 6px 20px 20px;
  box-shadow: var(--aw-shadow-sm);
}

/* 标签页导航：加高可点击区，激活项靛蓝 */
.aw-tabs .el-tabs__header {
  margin-bottom: 16px;
}

.aw-tabs .el-tabs__item {
  height: 46px;
  line-height: 46px;
  font-size: 14px;
  font-weight: 500;
  color: var(--aw-text-weak);
}

.aw-tabs .el-tabs__item.is-active {
  color: var(--aw-primary);
}

.aw-tabs .el-tabs__active-bar {
  background-color: var(--aw-primary);
  height: 3px;
  border-radius: 3px 3px 0 0;
}

.aw-tabs .el-tabs__nav-wrap::after {
  height: 1px;
  background-color: var(--aw-border);
}

.aw-panel {
  padding-top: 4px;
}

.aw-footer {
  padding: 14px 20px 22px;
  text-align: center;
  color: var(--aw-text-faint);
  font-size: 12px;
}

.aw-footer__sep {
  margin: 0 6px;
}

/* --------------------------------------------------------------- 卡片 --- */
.aw-card {
  border: 1px solid var(--aw-border);
  border-radius: var(--aw-radius-lg);
  margin-bottom: 16px;
  box-shadow: var(--aw-shadow-sm);
  transition: box-shadow 0.2s ease;
}

.aw-card--narrow {
  max-width: 760px;
}

.aw-card__title {
  font-weight: 600;
  font-size: 15px;
  color: var(--aw-text);
}

.aw-card__extra {
  float: right;
  font-size: 12px;
  color: var(--aw-text-weak);
  font-weight: 400;
}

/* 卡片头部底边线更浅 */
.aw-card > .el-card__header {
  border-bottom: 1px solid var(--aw-border);
  padding: 16px 20px;
}

.aw-card > .el-card__body {
  padding: 20px;
}

/* --------------------------------------------------------------- 守卫 --- */
.aw-guard__card {
  text-align: center;
}

.aw-guard__title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--aw-text);
}

.aw-guard__desc {
  margin: 0 auto 16px;
  max-width: 560px;
  color: var(--aw-text-weak);
  font-size: 13px;
  text-align: left;
}

.aw-guard__actions {
  display: flex;
  justify-content: center;
  gap: 8px;
}

/* --------------------------------------------------------------- 表单 --- */
.aw-w-full {
  width: 100%;
}

.aw-date {
  width: 100%;
  max-width: 260px;
}

.aw-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.aw-form-hint {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--aw-text-weak);
}

.aw-form-hint--warn {
  color: var(--aw-warning);
  background: var(--aw-warning-bg);
  border-radius: 6px;
  padding: 6px 10px;
}

.aw-form-hint--accent {
  color: var(--aw-primary);
  font-weight: 500;
}

/* 云中付客户页：有效期 / 剩余名额 只读信息条（值来自后端配置，客户不可改） */
.aw-cloud-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  padding: 10px 12px;
  margin-bottom: 14px;
  background: var(--aw-primary-bg);
  border: 1px solid var(--aw-primary-border);
  border-radius: var(--aw-radius);
  font-size: 13px;
  color: var(--aw-primary-ink);
}

.aw-cloud-meta__item strong {
  font-weight: 600;
}

/* 云中付客户页：已授权店铺的查询控件与分页 */
.aw-cloud-query {
  width: 220px;
}

.aw-cloud-pager {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

/* 次要入口：视觉上明显弱于主操作，避免干扰正常流程 */
.aw-link {
  padding: 0;
  height: auto;
  font-size: 12px;
  font-weight: 400;
}

.aw-expire {
  font-size: 13px;
  color: var(--aw-primary);
}

.aw-login-tip {
  font-size: 12px;
  color: var(--aw-text-weak);
  margin-top: 8px;
}

/* 表单控件悬浮态统一 */
.aw-panel .el-input__wrapper,
.aw-gate .el-input__wrapper,
.el-dialog .el-input__wrapper {
  border-radius: 8px;
}

.aw-panel .el-textarea__inner,
.el-dialog .el-textarea__inner {
  border-radius: 8px;
}

/* -------------------------------------------------------- 软件卡片选择 --- */
/* 替代下拉：图标卡片式单选，一眼可见全部软件 */
.aw-soft-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 4px;
}

.aw-soft-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px 12px;
  border: 1px solid var(--aw-border);
  border-radius: var(--aw-radius);
  background: var(--aw-surface);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.aw-soft-card:hover {
  border-color: var(--aw-primary-border);
  transform: translateY(-1px);
}

.aw-soft-card.is-active {
  border-color: var(--aw-primary);
  border-width: 1.5px;
  background: var(--aw-primary-bg);
  box-shadow: 0 2px 8px rgba(76, 99, 228, 0.15);
}

.aw-soft-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 600;
  color: var(--aw-primary-strong);
  background: var(--aw-primary-bg);
  border: 1px solid var(--aw-primary-border);
}

.aw-soft-card.is-active .aw-soft-card__icon {
  background: var(--aw-primary);
  border-color: var(--aw-primary);
  color: #fff;
  box-shadow: 0 3px 8px rgba(76, 99, 228, 0.35);
}

.aw-soft-card__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--aw-text);
  white-space: nowrap;
}

.aw-soft-card.is-active .aw-soft-card__name {
  color: var(--aw-primary-strong);
}

.aw-soft-card__tag {
  /* v2.1：描述行由绝对定位改为卡片内常规排版（不再遮挡图标） */
  font-size: 11px;
  line-height: 1.4;
  color: var(--aw-text-faint);
  background: transparent;
  border-radius: 4px;
  padding: 0;
  white-space: nowrap;
}

.aw-soft-card.is-active .aw-soft-card__tag {
  background: transparent;
  color: var(--aw-primary);
}

/* 自定义天数输入行 */
.aw-custom-days {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.aw-custom-days__label {
  font-size: 12px;
  color: var(--aw-text-weak);
  white-space: nowrap;
}

.aw-custom-days__input {
  width: 110px;
}

/* 高级 / 兼容分组 */
.aw-soft-group {
  margin-top: 12px;
}

.aw-soft-group__label {
  font-size: 12px;
  color: var(--aw-text-faint);
  margin-bottom: 6px;
  padding-left: 2px;
}

/* ----------------------------------------------------------- 概览统计卡 --- */
.aw-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

/* 双列统计卡（设备授权页的「已绑定 / 未绑定」一组，与四列状态卡分组展示） */
.aw-stat-grid--pair {
  grid-template-columns: repeat(2, 1fr);
}

.aw-stat-card {
  background: var(--aw-surface);
  border: 1px solid var(--aw-border);
  border-radius: var(--aw-radius-lg);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.aw-stat-card:hover {
  border-color: var(--aw-primary-border);
  box-shadow: var(--aw-shadow-sm);
  transform: translateY(-1px);
}

.aw-stat-card.is-active {
  border-color: var(--aw-primary);
  background: var(--aw-primary-bg);
}

.aw-stat-card__label {
  font-size: 12px;
  color: var(--aw-text-weak);
  display: flex;
  align-items: center;
  gap: 6px;
}

.aw-stat-card__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

.aw-stat-card__value {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 2px;
  color: var(--aw-text);
}

.aw-stat-card.is-active .aw-stat-card__value {
  color: var(--aw-primary-strong);
}

/* --------------------------------------------------------------- 结果 --- */
.aw-result-zone {
  margin-top: 8px;
}

/* 授权码展示：等宽大字 + 靛蓝浅底 */
.aw-license-box {
  position: relative;
  padding: 16px;
  background: var(--aw-primary-bg);
  border: 1px solid var(--aw-primary-border);
  border-radius: var(--aw-radius-lg);
  font-family: var(--aw-mono);
  font-size: 14px;
  line-height: 1.7;
  word-break: break-all;
  overflow-wrap: anywhere;
  color: var(--aw-primary-ink);
  user-select: text;
}

.aw-license-box__label {
  display: block;
  margin-bottom: 8px;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--aw-primary-strong);
  letter-spacing: 0.5px;
}

.aw-result {
  margin-top: 12px;
  padding: 12px 14px;
  background: #f8f9fb;
  border: 1px solid var(--aw-border);
  border-radius: var(--aw-radius);
}

.aw-code {
  font-family: var(--aw-mono);
  font-size: 13px;
  background: #eef1f8;
  border-radius: 6px;
  padding: 1px 6px;
  word-break: break-all;
}

.aw-break {
  word-break: break-all;
  overflow-wrap: anywhere;
}

/* 单张 / 批量切换（设备授权发卡面板） */
.aw-mode-switch {
  margin-bottom: 4px;
}

/* 批量生成结果的操作条 */
.aw-done-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--aw-text-weak);
}

.aw-done-bar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* authId 清单：等宽、每行一个、允许纵向滚动 */
.aw-id-list {
  max-height: 320px;
  overflow: auto;
  line-height: 1.9;
}

/* 行内紧跟的小按钮（如「复制」跟在 authId 后面） */
.aw-ml-6 {
  margin-left: 6px;
}

/*
 * 表格「操作」列的多按钮容器。
 * 设备授权表操作列有最多 5 个文字按钮（续期/冻结|解冻/解绑/备注），
 * 默认 el-button 之间的 margin 是 12px，5 个按钮会撑爆固定列宽的单元格，
 * 进而把整张表推到横向溢出、并与 fixed 列重叠。这里收紧为 6px + 允许换行。
 */
.aw-row-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 6px;
}

/* 让每个按钮自身不再吃 el-button + el-button 的默认左外边距 */
.aw-row-actions .el-button + .el-button {
  margin-left: 0;
}

/* 收窄操作列按钮的内边距，进一步降低占宽 */
.aw-row-actions .el-button {
  padding-left: 4px;
  padding-right: 4px;
}

.aw-pre-wrap {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-wrap: anywhere;
  font-family: var(--aw-mono);
  font-size: 12px;
  line-height: 1.6;
}

.aw-kv {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 3px 0;
  font-size: 13px;
}

.aw-kv__k {
  flex: none;
  width: 96px;
  color: var(--aw-text-weak);
}

/* 详情弹窗里的值：需要能换行（机器码 / 签名都是长串） */
.aw-kv__v {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-all;
  overflow-wrap: anywhere;
}

/* 批量操作弹窗里的「预计影响 N 条」 */
.aw-batch-count {
  font-size: 13px;
}

.aw-batch-count b {
  color: var(--aw-primary);
  font-size: 16px;
  margin-right: 2px;
}

/* 详情弹窗底部的「调整状态」行 */
.aw-detail-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--aw-border);
}

/* ----------------------------------------------------------- 验证面板 --- */
.aw-verify-form {
  max-width: 640px;
}

.aw-verify-result {
  margin-top: 16px;
}

.aw-verify-result .aw-kv {
  margin-top: 6px;
}

/* ------------------------------------------------------------- 列表页 --- */
/* 表格现代化：浅表头、无呆板竖线 */
.aw-card .el-table {
  --el-table-header-bg-color: #f6f8fc;
  --el-table-header-text-color: var(--aw-text-weak);
  --el-table-border-color: var(--aw-border);
  --el-table-row-hover-bg-color: var(--aw-primary-bg);
  --el-table-tr-bg-color: transparent;
  font-size: 13px;
}

.aw-card .el-table th.el-table__cell {
  font-weight: 600;
  font-size: 12.5px;
}

.aw-card .el-table .el-tag {
  border-radius: 999px;
}

.aw-query {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.aw-pager {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

/* 查询栏控件宽度 */
.aw-q-input {
  width: 180px;
}

.aw-q-select {
  width: 190px;
}

.aw-q-select--narrow {
  width: 120px;
}

/* 窄屏表格横滑提示（默认隐藏，≤600px 显形） */
.aw-table-hint {
  display: none;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--aw-text-weak);
}

.aw-selftest__running {
  padding: 24px 0;
  text-align: center;
  color: var(--aw-text-weak);
}

/* --------------------------------------------------------------- 按钮 --- */
.aw-panel .el-button,
.aw-gate .el-button,
.el-dialog .el-button {
  font-weight: 500;
  border-radius: 8px;
}

.aw-panel .el-button--primary,
.aw-gate .el-button--primary,
.el-dialog .el-button--primary {
  box-shadow: 0 2px 8px rgba(76, 99, 228, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.aw-panel .el-button--primary:not(.is-disabled):hover,
.aw-gate .el-button--primary:not(.is-disabled):hover,
.el-dialog .el-button--primary:not(.is-disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(76, 99, 228, 0.4);
}

/* 生成按钮：主任务全宽强调 */
.aw-generate-btn {
  width: 100%;
  height: 40px;
  font-size: 15px;
  letter-spacing: 2px;
}

/* 主操作按钮（开通授权等）加宽 */
.aw-primary-wide {
  min-width: 140px;
}

/* 快捷期按钮：胶囊化 */
.aw-quick-btns .el-button {
  border-radius: 999px;
}

/* --------------------------------------------------------------- 间距 --- */
.aw-mt-8 {
  margin-top: 8px;
}

.aw-mt-12 {
  margin-top: 12px;
}

.aw-mt-16 {
  margin-top: 16px;
}

.aw-mb-12 {
  margin-bottom: 12px;
}

/* 弱化说明文字（例如「授权码中不包含该项」这类不可解析提示） */
.aw-muted {
  color: #8a93a3;
}

/* --------------------------------------------------------- 前置登录墙 --- */
.aw-gate {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  background:
    radial-gradient(1000px 520px at 12% -10%, rgba(111, 136, 247, 0.28) 0%, rgba(111, 136, 247, 0) 62%),
    radial-gradient(900px 460px at 108% 112%, rgba(76, 99, 228, 0.24) 0%, rgba(76, 99, 228, 0) 60%),
    linear-gradient(165deg, #eef2ff 0%, #f4f6fb 46%, #eef1fb 100%);
}

@supports (min-height: 100dvh) {
  .aw-gate {
    min-height: 100dvh;
  }
}

.aw-gate__card {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: 36px 32px 26px;
  background: var(--aw-surface);
  border: 1px solid var(--aw-border);
  border-radius: 16px;
  box-shadow: var(--aw-shadow-lg);
  overflow: hidden;
}

/* 卡片顶部品牌色条装饰 */
.aw-gate__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #6f88f7, #4c63e4 55%, #3849b3);
}

.aw-gate__logo {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #6f88f7 0%, #4c63e4 55%, #3849b3 100%);
  color: #fff;
  font-size: 24px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(76, 99, 228, 0.35);
  user-select: none;
}

.aw-gate__title {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  letter-spacing: 0.5px;
  color: var(--aw-text);
}

.aw-gate__sub {
  margin: 6px 0 22px;
  font-size: 12px;
  color: var(--aw-text-weak);
  text-align: center;
}

.aw-gate__submit {
  width: 100%;
  height: 40px;
  margin-top: 6px;
  font-size: 15px;
  letter-spacing: 4px;
}

.aw-gate__foot {
  display: flex;
  justify-content: flex-end;
  min-height: 24px;
}

.aw-gate__tip {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--aw-text-faint);
  text-align: center;
}

@media (max-width: 480px) {
  .aw-gate {
    padding: 12px;
  }

  .aw-gate__card {
    padding: 28px 20px 20px;
  }
}

/* ------------------------------------------------------------- 响应式 --- */
@media (max-width: 860px) {
  .aw-header__bar {
    flex-wrap: wrap;
    gap: 8px;
  }

  .aw-kv__k {
    width: 78px;
  }

  .aw-main {
    padding: 14px 12px;
  }

  .aw-soft-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .aw-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ========================================================== 手机适配 ===
   ≤600px：单列堆叠 + 触摸友好尺寸。桌面（>600px）渲染完全不受影响。

   本块只写两类规则：
     1. 项目自有的 aw-* 类；
     2. Element Plus 的**公开** CSS 变量（--el-component-size 等）。
   所有 Element Plus 内部类（.el-xxx）的覆写一律收敛到文件末尾的
   「EP 内部类覆写白名单」区块，便于升级 EP 时逐条复验。
   ====================================================================== */
@media (max-width: 600px) {
  /* -- 全局尺寸：走 Element Plus 公开变量，一处调所有组件 -- */
  body {
    --el-component-size: 40px;        /* 输入框 / 选择器 / 默认按钮：触摸高度 */
    --el-component-size-small: 32px;  /* size="small"（表格内按钮、顶栏按钮） */
    --el-component-size-large: 44px;
  }

  /* -- 顶栏 --
     保持 position: sticky（不改 static）—— 常驻红色警示条与「退出登录」
     在页面滚动后必须仍然可见。为了把竖向占用压下来，改为两行布局：
       第 1 行 品牌 + 状态徽标（同一行，徽标右对齐、放不下自行换行）
       第 2 行 用户名 + 操作按钮
     顶栏本身只声明 sticky 一次（见非媒体查询区），此处不再重复。 */
  .aw-header__bar {
    flex-wrap: wrap;
    gap: 6px 8px;
    padding: 8px 12px;
  }

  .aw-header__brand {
    flex: 0 1 auto;
    min-width: 0;
    gap: 8px;
  }

  .aw-header__logo {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-size: 13px;
  }

  .aw-header__title {
    font-size: 15px;
    min-width: 0;         /* 允许品牌标题收缩，把宽度让给状态徽标 */
    overflow: hidden;     /* 放不下时省略号收尾（① 授权，375px 下通常不会触发） */
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .aw-header__version {
    display: none;        /* ① 手机端隐藏版本号，把宽度让给状态徽标 */
  }

  .aw-header__status {
    flex: 1 1 0;          /* ① basis=0：与品牌共处同一 flex 行（原 1 1 auto 按内容宽度做换行判定，整块被挤到第二行） */
    justify-content: flex-end;
    gap: 4px;
  }

  .aw-header__user {
    font-size: 12px;
    padding: 2px 10px;
  }

  .aw-header__actions {
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px 8px;
  }

  .aw-header__warning {
    align-items: flex-start;
    padding: 6px 12px;
    font-size: 12px;
    line-height: 1.45;
  }

  .aw-header__warning-icon {
    width: 16px;
    height: 16px;
    font-size: 11px;
    line-height: 1.45;
    flex: none;
    margin-top: 1px;
  }

  /* -- 主体 / 卡片 / 页脚 -- */
  .aw-main {
    padding: 10px 10px 24px;
  }

  .aw-tabs {
    padding: 4px 10px 14px;
    border-radius: 8px;
  }

  .aw-tabs .el-tabs__item {
    height: 44px;
    line-height: 44px;
    font-size: 14px;
  }

  .aw-card {
    margin-bottom: 12px;
  }

  .aw-card--narrow {
    max-width: none;
  }

  .aw-card__extra {
    float: none;
    display: block;
    margin-top: 2px;
  }

  .aw-card > .el-card__header {
    padding: 14px 16px;
  }

  .aw-card > .el-card__body {
    padding: 16px;
  }

  .aw-footer {
    padding: 10px 12px 16px;
  }

  /* -- 软件卡片选择：两列紧凑 -- */
  .aw-soft-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .aw-soft-card {
    padding: 10px 6px 8px;
  }

  .aw-soft-card__icon {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }

  /* -- 概览统计卡：两列 -- */
  .aw-stat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .aw-stat-card {
    padding: 12px;
  }

  .aw-stat-card__value {
    font-size: 20px;
  }

  /* -- 表单控件宽度：日期选择与查询栏三件套一律占满 -- */
  .aw-date,
  .aw-q-input,
  .aw-q-select,
  .aw-q-select--narrow {
    width: 100%;
    max-width: none;
  }

  /* 自定义天数：标签上置、数字框占满剩余宽度 */
  .aw-custom-days {
    align-items: stretch;
  }

  .aw-custom-days__input {
    flex: 1 1 0;
    width: auto;
    min-width: 96px;
  }

  .aw-inline {
    gap: 8px;
  }

  /* -- 查询栏纵向堆叠 -- */
  .aw-query {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  /* -- 守卫按钮组换行 -- */
  .aw-guard__actions {
    flex-wrap: wrap;
  }

  /* -- 列表：分页横向可滑，表格给一行滑动提示 -- */
  .aw-pager {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .aw-table-hint {
    display: block;
  }

  /* 结果区 / 调试 kv 改上下堆叠 */
  .aw-license-box {
    padding: 12px;
    font-size: 13px;
  }

  .aw-id-list {
    font-size: 12px;
    line-height: 1.8;
  }

  .aw-done-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .aw-done-bar__actions {
    display: flex;
    gap: 8px;
  }

  .aw-result {
    padding: 10px;
  }

  .aw-kv {
    flex-direction: column;
    gap: 2px;
  }

  .aw-kv__k {
    width: auto;
    font-size: 12px;
  }

  /* -- 登录墙：顶部对齐，避免软键盘弹出时卡片被顶飞 -- */
  .aw-gate {
    align-items: flex-start;
    padding: 16px 12px 24px;
  }

  .aw-gate__card {
    padding: 26px 18px 18px;
    box-shadow: 0 4px 16px rgba(35, 40, 74, 0.1);
  }

  .aw-gate__logo {
    width: 44px;
    height: 44px;
    font-size: 20px;
    margin-bottom: 10px;
  }

  .aw-gate__title {
    font-size: 19px;
  }

  .aw-gate__sub {
    margin-bottom: 16px;
  }
}

/* 超窄手机（iPhone SE 375 / 部分安卓 360）：再压一档字号与间距 */
@media (max-width: 380px) {
  .aw-header__title {
    font-size: 14px;
  }

  .aw-header__bar {
    padding: 8px 10px;
  }

  .aw-main {
    padding: 8px 8px 20px;
  }

  .aw-tabs {
    padding: 4px 6px 12px;
  }

  .aw-code,
  .aw-pre-wrap {
    font-size: 12px;
  }

  .aw-soft-grid,
  .aw-stat-grid {
    grid-template-columns: 1fr;
  }

  .aw-gate__card {
    padding: 22px 14px 14px;
  }
}

/* ==========================================================================
   Element Plus 内部类覆写白名单（仅 ≤600px 生效）

   本文件顶部原则是「不覆写 Element Plus 内部类名」。以下几处是**有意的例外**：
   dialog / message-box 的宽度、pagination 的 layout、form-item 的 label-width、
   input 字号，都由组件 prop 或 EP 生成的内联样式写死，公开 CSS 变量覆盖不到；
   改 prop 又要往 5 个组件里塞视口判断逻辑，得不偿失。

   清单（升级 Element Plus 时逐条复验）：
     1.  .el-overlay-dialog                       弹窗遮罩内边距
     2.  .el-dialog:not(.is-fullscreen)           弹窗宽度 / 外边距 / 纵向滚动
     3.  .el-dialog__body                         弹窗正文滚动区
     4.  .el-dialog__footer                       弹窗底部按钮区
     5.  .el-message-box                          ElMessageBox 宽度
     6.  .el-message                              顶部提示条宽度
     7.  .el-input__inner / .el-textarea__inner   iOS 防自动放大（字号顶到 16px）
     8.  .el-tabs__item                           标签页内边距
     9.  .el-pagination__sizes / __jump           窄屏隐藏次要分页控件
     10. .el-picker-panel                         日期面板最大宽度
     11. .el-form-item                            标签上置（列向排布）
     12. .el-form-item__label                     覆盖 label-width 生成的内联宽度
     13. .el-form-item__content                   覆盖 label-width 生成的内联外边距
     14. .el-button（限定在查询栏 / 按钮组容器内）  换行时的间距与等分
     15. .el-button / .el-button--small           触摸高度（EP 把 height 写成字面量）

   当前锁定版本：element-plus 2.8.8（vendor/ 本地副本，不会自动升级）。
   ========================================================================== */
@media (max-width: 600px) {
  /* 1–4 弹窗：420 / 640 / 680px 固定宽在手机上必然横向溢出 →
     改为近满宽 + 正文纵向滚动。宽度由 width prop 写成内联 --el-dialog-width，
     CSS 变量覆盖不掉，只能用 !important 顶掉最终的 width / margin。
     全屏弹窗（.is-fullscreen）不在覆写范围内，避免误伤。 */
  .el-overlay-dialog {
    padding: 0 2px;
  }

  .el-dialog:not(.is-fullscreen) {
    --el-dialog-padding-primary: 12px;  /* EP 2.8 的内边距在 .el-dialog 本身，不在 __body */
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px);
    margin: 12px auto !important;       /* 默认 15vh 顶距，软键盘弹出时会把弹窗挤没 */
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 24px);
  }

  .el-dialog__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
  }

  .el-dialog__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
  }

  .el-dialog__footer .el-button {
    min-width: 88px;
    margin-left: 0;                     /* EP 用 margin-left 拉开按钮，换行后会错位 */
  }

  /* 5 ElMessageBox（冻结 / 解冻 / 覆盖确认）同样是固定 420px */
  .el-message-box {
    --el-messagebox-width: calc(100vw - 32px);
    width: calc(100vw - 32px);
  }

  /* 6 顶部提示条 */
  .el-message {
    min-width: 0;
    width: calc(100vw - 24px);
  }

  /* 7 iOS Safari 在输入框字号 <16px 时会自动放大页面 —— 必须顶到 16px */
  .el-input__inner,
  .el-textarea__inner {
    font-size: 16px;
  }

  /* 8 标签页：压缩内边距，让三个标签尽量一屏放下；放不下时 EP 自带左右滚动 */
  .el-tabs__item {
    padding: 0 12px !important;
    font-size: 14px;
  }

  /* 9 分页：layout 由 prop 写死，窄屏隐藏「每页条数」和「跳页」两个次要控件 */
  .el-pagination__sizes,
  .el-pagination__jump {
    display: none !important;
  }

  /* 10 日期面板兜底，避免 datetime 面板超出视口 */
  .el-picker-panel {
    max-width: calc(100vw - 16px);
  }

  /* 11–13 表单：标签上置、控件占满宽（含被 teleport 到 body 的弹窗表单） */
  .aw-panel .el-form-item,
  .aw-gate .el-form-item,
  .el-dialog .el-form-item {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 14px;
  }

  .aw-panel .el-form-item__label,
  .aw-gate .el-form-item__label,
  .el-dialog .el-form-item__label {
    width: auto !important;             /* 覆盖 label-width 生成的内联宽度 */
    height: auto;
    justify-content: flex-start;
    padding: 0 0 4px;
    line-height: 1.5;
  }

  .aw-panel .el-form-item__content,
  .aw-gate .el-form-item__content,
  .el-dialog .el-form-item__content {
    margin-left: 0 !important;          /* 覆盖 label-width 生成的内联外边距 */
  }

  /* 14 成组按钮：换行不粘连（EP 默认用 margin-left 拉开，换行后会错位） */
  .aw-panel .el-form-item__content > .el-button,
  .aw-mt-8 > .el-button,
  .aw-guard__actions > .el-button {
    margin: 0 8px 8px 0;
  }

  /* 查询栏：每项占满一行，最后一行的查询 / 重置各占一半 */
  .aw-query .el-form-item {
    width: 100%;
    margin-right: 0;
  }

  .aw-query .el-form-item:last-child .el-form-item__content {
    display: flex;
    gap: 8px;
  }

  .aw-query .el-form-item:last-child .el-button {
    flex: 1 1 0;
    margin: 0;
  }

  /* 15 按钮触摸高度 —— 手机上最容易点不中的一处
     EP 把默认按钮的高度写成了字面量：.el-button{ ... height:32px }，
     而且只有 --large / --small 声明了 --el-button-size，default 尺寸根本不读它。
     所以无论调 --el-component-size 还是 --el-button-size，都够不着默认按钮，
     实测停留在 32px（default）/ 24px（small），低于触摸推荐尺寸。

     这里用 min-height 而不是 height：min-height 走的是尺寸钳制（clamp），
     和 EP 的 height 不是同一个属性，不需要跟它比特异性，
     也不会破坏 EP 自己的行高、内边距与图标对齐。

     排除项只有两个，且都是「本来就该是自适应高度」的行内文字按钮：
       .is-link  EP 自带 height:auto（本项目当前未使用，纯防御）
       .aw-link  项目自有的行内链接式按钮（已声明 height:auto;padding:0）
     注意：**不能**排除 .is-text —— 顶栏「退出登录」、表格行「续期/冻结/解冻」、
     「本地校验」「复制 JSON」「后端设置」「恢复默认」全都是 text 按钮，
     它们正是手机上最主要的点击目标，排除掉等于这条修复白做。 */
  .el-button:not(.is-link):not(.aw-link) {
    min-height: var(--el-component-size);
  }

  /* 必须写在上一条之后：两者特异性同为 (0,3,0)，靠源码顺序决胜 */
  .el-button--small:not(.is-link):not(.aw-link) {
    min-height: var(--el-component-size-small);
  }
}