/* ==========================================================================
   腾讯文档收集表助手 —— 共用样式
   ========================================================================== */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #f5f7fa;
  color: #303133;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", Arial, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

[v-cloak] {
  display: none !important;
}

a {
  color: #409eff;
  text-decoration: none;
}

/* ---------------------------------------------------------------- 滚动条 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background: #c8ccd4;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8adb8;
}

::-webkit-scrollbar-track {
  background: transparent;
}

/* ---------------------------------------------------------------- 登录页 */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: linear-gradient(135deg, #eef3fb 0%, #f7f9fc 45%, #eaf1fd 100%);
}

.login-card {
  width: 100%;
  max-width: 420px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(31, 45, 61, 0.12);
}

.login-title {
  text-align: center;
  margin-bottom: 4px;
  font-size: 20px;
  font-weight: 600;
  color: #1f2d3d;
}

.login-sub {
  text-align: center;
  margin: 0 0 18px;
  color: #909399;
  font-size: 13px;
}

.login-footer {
  text-align: center;
  color: #c0c4cc;
  font-size: 12px;
  padding: 20px 0 8px;
}

/* ---------------------------------------------------------------- 布局 */
.layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-header {
  height: 58px;
  flex: 0 0 58px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  background: #fff;
  border-bottom: 1px solid #e8eaef;
  box-shadow: 0 1px 4px rgba(31, 45, 61, 0.05);
  position: sticky;
  top: 0;
  z-index: 100;
}

.app-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 600;
  color: #1f2d3d;
  white-space: nowrap;
}

.app-logo .dot {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: linear-gradient(135deg, #409eff, #2f7fe0);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}

.app-header-spacer {
  flex: 1;
}

.app-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.quota-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 12px;
  border-radius: 15px;
  background: #ecf5ff;
  color: #409eff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.quota-badge b {
  font-size: 15px;
}

.user-trigger {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  outline: none;
  color: #303133;
}

.user-trigger:hover {
  background: #f5f7fa;
}

.app-body {
  flex: 1;
  display: flex;
  min-height: 0;
}

.app-aside {
  width: 186px;
  flex: 0 0 186px;
  background: #fff;
  border-right: 1px solid #e8eaef;
}

.app-aside .el-menu {
  border-right: none;
}

.app-main {
  flex: 1;
  min-width: 0;
  padding: 18px;
}

.app-main-inner {
  max-width: 1320px;
  margin: 0 auto;
}

/* 移动端侧栏收起为横向菜单 */
.mobile-menu-bar {
  display: none;
  background: #fff;
  border-bottom: 1px solid #e8eaef;
  overflow-x: auto;
  white-space: nowrap;
  padding: 0 6px;
}

.mobile-menu-bar .el-menu {
  border-bottom: none;
}

/* ---------------------------------------------------------------- 卡片 */
.panel {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(31, 45, 61, 0.06);
  padding: 18px;
  margin-bottom: 16px;
}

.panel-title {
  font-size: 15px;
  font-weight: 600;
  color: #1f2d3d;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-title .bar {
  width: 3px;
  height: 15px;
  border-radius: 2px;
  background: #409eff;
}

.panel-sub {
  color: #909399;
  font-size: 13px;
  font-weight: 400;
  margin-left: 4px;
}

.panel-desc {
  color: #909399;
  font-size: 13px;
  line-height: 1.7;
  margin: 0 0 14px;
}

/* 管理员权限勾选组 */
.perm-groups {
  width: 100%;
}

.perm-block {
  margin-bottom: 10px;
}

.perm-block:last-child {
  margin-bottom: 0;
}

.perm-block-title {
  font-size: 12px;
  color: #909399;
  margin-bottom: 4px;
}

.perm-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}

.perm-group .el-checkbox {
  margin-right: 0;
  height: 28px;
}

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

.panel-toolbar .grow {
  flex: 1;
  min-width: 160px;
}

/* ---------------------------------------------------------------- 统计卡 */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.stat-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(31, 45, 61, 0.06);
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.stat-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  color: #fff;
}

.stat-icon.blue {
  background: linear-gradient(135deg, #66b1ff, #409eff);
}

.stat-icon.green {
  background: linear-gradient(135deg, #7bd88f, #52c41a);
}

.stat-icon.red {
  background: linear-gradient(135deg, #ff9a9a, #f56c6c);
}

.stat-icon.orange {
  background: linear-gradient(135deg, #ffc069, #fa8c16);
}

.stat-icon.purple {
  background: linear-gradient(135deg, #b39ddb, #7c4dff);
}

.stat-meta {
  min-width: 0;
}

.stat-value {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  color: #1f2d3d;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  font-size: 13px;
  color: #909399;
  margin-top: 3px;
}

/* ---------------------------------------------------------------- 表单 */
.form-grid .el-form-item {
  margin-bottom: 14px;
}

.form-label-tip {
  color: #909399;
  font-weight: 400;
  font-size: 12px;
}

.q-list {
  margin: 0;
}

.question-item {
  padding: 13px 14px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  margin-bottom: 10px;
  background: #fcfdfe;
}

.question-item.is-missing {
  border-color: #fbc4c4;
  background: #fff8f8;
}

.q-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}

.q-index {
  color: #909399;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.q-title {
  font-weight: 500;
  color: #303133;
  word-break: break-word;
}

.q-sub {
  color: #909399;
  font-size: 12px;
  margin: -3px 0 8px 20px;
}

.q-hint {
  color: #e6a23c;
  font-size: 12px;
  margin-top: 5px;
}

.q-body .el-radio-group,
.q-body .el-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}

.q-body .el-radio,
.q-body .el-checkbox {
  margin-right: 0;
  height: 30px;
}

/* 提交设置面板（位于题目列表最上方） */
.submit-panel {
  border: 1px solid #d9ecff;
  background: linear-gradient(180deg, #f5faff 0%, #fff 100%);
}

.submit-bar {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.submit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  width: 100%;
}

.submit-row .lbl {
  color: #606266;
  font-size: 13px;
  flex: 0 0 auto;
}

.submit-row .el-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
}

.submit-row .text-muted {
  font-size: 12px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 10px 18px;
}

.info-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  min-width: 0;
}

.info-item .k {
  color: #909399;
  flex: 0 0 auto;
}

.info-item .v {
  color: #303133;
  word-break: break-all;
}

/* ---------------------------------------------------------------- 账号卡 */
.account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 14px;
}

.account-card {
  border: 1px solid #ebeef5;
  border-radius: 8px;
  padding: 15px;
  background: #fff;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.account-card:hover {
  border-color: #c6e2ff;
  box-shadow: 0 3px 12px rgba(64, 158, 255, 0.12);
}

.account-top {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 11px;
}

.account-plat {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}

.account-plat.wechat {
  background: linear-gradient(135deg, #6fd06f, #22b14c);
}

.account-plat.qq {
  background: linear-gradient(135deg, #6ec6ff, #12b7f5);
}

.account-name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  color: #1f2d3d;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-line {
  font-size: 12px;
  color: #909399;
  line-height: 1.9;
  word-break: break-all;
}

.account-actions {
  margin-top: 11px;
  display: flex;
  gap: 8px;
}

/* ---------------------------------------------------------------- 新用户引导 */
.onboard-dialog .el-dialog__header {
  display: none;
}

.onboard-dialog .el-dialog__body {
  padding: 0;
}

.onboard-dialog .el-dialog {
  border-radius: 12px;
  overflow: hidden;
}

.onboard {
  padding: 0 0 26px;
}

/* 头部：图标 + 标题，浅色分隔线收口 */
.onboard-head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 22px 26px 18px;
  background: linear-gradient(135deg, #f2f7ff 0%, #f7fbff 100%);
  border-bottom: 1px solid #eef1f6;
}

.onboard-logo {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: linear-gradient(135deg, #4a9bff, #2f7fe8);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 3px 10px rgba(47, 127, 232, .28);
}

.onboard-headtext h2 {
  margin: 0 0 3px;
  font-size: 17.5px;
  font-weight: 600;
  color: #1f2d3d;
  letter-spacing: .2px;
}

.onboard-headtext p {
  margin: 0;
  font-size: 12.5px;
  color: #8a94a6;
}

/* 步骤条：两步时比 el-steps 更紧凑，视觉重量更合适 */
.onboard-steps {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 26px 4px;
}

.onboard-steps .step {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  opacity: .55;
  transition: opacity .2s;
}

.onboard-steps .step.now,
.onboard-steps .step.done {
  opacity: 1;
}

.onboard-steps .dot {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  font-style: normal;
  background: #e8edf5;
  color: #9aa4b5;
}

.onboard-steps .dot i {
  font-style: normal;
}

.onboard-steps .step.now .dot {
  background: #409eff;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(64, 158, 255, .13);
}

.onboard-steps .step.done .dot {
  background: #67c23a;
  color: #fff;
}

.onboard-steps .txt {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}

.onboard-steps .txt b {
  font-size: 13.5px;
  font-weight: 600;
  color: #303133;
}

.onboard-steps .txt em {
  font-style: normal;
  font-size: 11.5px;
  color: #a0a8b5;
}

.onboard-steps .link {
  flex: 1 1 auto;
  height: 2px;
  border-radius: 2px;
  background: #e8edf5;
  margin: 0 4px;
  transition: background .25s;
}

.onboard-steps .link.on {
  background: #b7e0a0;
}

/* 说明卡：替代大色块 alert，行宽更舒服 */
.onboard-note {
  display: flex;
  gap: 11px;
  margin: 16px 26px 0;
  padding: 13px 15px;
  border-radius: 9px;
  border: 1px solid transparent;
}

.onboard-note .note-icon {
  flex: 0 0 auto;
  font-size: 17px;
  margin-top: 1px;
}

.onboard-note b {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 4px;
}

.onboard-note p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.72;
}

.onboard-note.warn {
  background: #fdf6ec;
  border-color: #faecd3;
}

.onboard-note.warn .note-icon { color: #e6a23c; }
.onboard-note.warn b { color: #b88230; }
.onboard-note.warn p { color: #a97a2e; }

.onboard-note.ok {
  background: #f0f9eb;
  border-color: #e1f3d8;
}

.onboard-note.ok .note-icon { color: #67c23a; }
.onboard-note.ok b { color: #529b2e; }
.onboard-note.ok p { color: #5c8a43; }

/* 表单区 */
.onboard-form {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin: 18px 26px 0;
}

.onboard-form .field label {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  color: #606266;
}

/* 操作区 */
.onboard-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 22px 26px 0;
}

.onboard-actions .el-button {
  min-width: 138px;
}

.onboard-tip {
  margin: 13px 26px 0;
  color: #a8b0bd;
  font-size: 12px;
  text-align: center;
  line-height: 1.6;
}

@media (max-width: 600px) {
  .onboard-dialog {
    width: 94% !important;
  }
  .onboard-head,
  .onboard-steps,
  .onboard-note,
  .onboard-form,
  .onboard-actions,
  .onboard-tip {
    padding-left: 16px;
    padding-right: 16px;
    margin-left: 0;
    margin-right: 0;
  }
  .onboard-steps .txt em { display: none; }
  .onboard-actions .el-button { flex: 1 1 auto; min-width: 0; }
}

/* ---------------------------------------------------------------- 登录态失效全屏提醒 */
.expired-alert-dialog .el-dialog__header {
  display: none;
}

.expired-alert-dialog .el-dialog__body {
  padding: 0;
  height: 100%;
}

.expired-alert {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
  background: #fff;
}

.expired-icon {
  font-size: 76px;
  color: #f56c6c;
  margin-bottom: 18px;
  animation: expired-pulse 1.6s ease-in-out infinite;
}

@keyframes expired-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.06); opacity: .82; }
}

.expired-alert h2 {
  margin: 0 0 14px;
  font-size: 26px;
  color: #303133;
}

.expired-alert .expired-sub {
  max-width: 560px;
  margin: 0 0 22px;
  color: #606266;
  font-size: 15px;
  line-height: 1.8;
}

.expired-alert .expired-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 22px;
}

.expired-alert .expired-tip {
  max-width: 520px;
  color: #909399;
  font-size: 13px;
  line-height: 1.7;
  margin: 0 0 30px;
}

.expired-alert .expired-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ---------------------------------------------------------------- 验证码行 */
.code-row {
  display: flex;
  gap: 10px;
  width: 100%;
}

.code-row .el-input {
  flex: 1;
}

.code-row .el-button {
  flex: 0 0 auto;
  min-width: 108px;
}

/* 图形验证码：点一下换一张 */
.captcha-img {
  flex: 0 0 auto;
  width: 120px;
  height: 40px;
  border: 1px solid var(--el-border-color);
  border-radius: 4px;
  cursor: pointer;
  display: block;
  background: #f2f4f7;
}

/* 表格里的「详情 / 更多」：下拉包着按钮时基线对不齐，用 flex 拉平 */
.row-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
}

.row-actions .el-dropdown {
  line-height: 1;
  vertical-align: middle;
}

.row-actions .el-button {
  margin-left: 0;
  padding: 0;
}

.row-actions .el-icon {
  vertical-align: middle;
}

/* 通知接收人下拉面板 */
.notify-target {
  width: 100%;
  max-width: 640px;
  margin-top: 8px;
}

.target-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
}

/* 分享推广：二维码 */
.share-qr {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 148px;
  padding: 8px;
  border: 1px dashed var(--el-border-color);
  border-radius: 8px;
  background: #fff;
}

.share-qr img {
  width: 132px;
  height: 132px;
  display: block;
}

/* ---------------------------------------------------------------- 导入链接操作条 */
.import-url-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.import-url-tip {
  color: #909399;
  font-size: 12px;
  line-height: 1.5;
}

/* ---------------------------------------------------------------- 扫码弹窗 */
.qr-box {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px;
  background: #fafbfc;
  border: 1px dashed #dcdfe6;
  border-radius: 8px;
}

.qr-box img {
  width: 260px;
  height: 260px;
  display: block;
  border-radius: 6px;
  background: #fff;
  image-rendering: -webkit-optimize-contrast;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .06);
}

/* 可点击放大 */
.qr-zoomable {
  cursor: zoom-in;
  transition: transform .15s ease;
}

.qr-zoomable:hover {
  transform: scale(1.02);
}

/* 二维码加载中的进度展示 */
.qr-loading {
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}

.qr-loading .qr-spin {
  font-size: 30px;
  color: #409eff;
}

.qr-loading .qr-loading-text {
  color: #606266;
  font-size: 13px;
  text-align: center;
  line-height: 1.6;
  min-height: 21px;
}

.qr-loading .qr-progress {
  width: 100%;
}

.qr-loading .qr-loading-pct {
  font-size: 20px;
  font-weight: 600;
  color: #409eff;
  font-variant-numeric: tabular-nums;
  letter-spacing: .5px;
}

.qr-hint {
  color: #909399;
  font-size: 12px;
  margin-top: 2px;
}

/* 放大查看层 */
.qr-zoom-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.qr-zoom-wrap img {
  width: 440px;
  height: 440px;
  display: block;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .1);
}

@media (max-width: 560px) {
  .qr-box img { width: 220px; height: 220px; }
  .qr-zoom-wrap img { width: 88vw; height: 88vw; }
}

.qr-text {
  color: #606266;
  font-size: 13px;
  text-align: center;
  line-height: 1.6;
}

.qr-status-tag {
  margin-bottom: 10px;
  text-align: center;
}

/* ---------------------------------------------------------------- 状态色 */
.status-success {
  color: #67c23a;
}

.status-failed {
  color: #f56c6c;
}

.status-running {
  color: #409eff;
}

.status-waiting {
  color: #e6a23c;
}

.status-idle {
  color: #909399;
}

.text-muted {
  color: #909399;
}

.text-mono {
  font-family: Consolas, Monaco, "Courier New", monospace;
  font-size: 12px;
}

.text-clip {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.text-pre {
  white-space: pre-wrap;
  word-break: break-all;
  font-family: Consolas, Monaco, "Courier New", monospace;
  font-size: 12px;
  background: #f7f8fa;
  border-radius: 6px;
  padding: 10px;
  max-height: 260px;
  overflow: auto;
  margin: 0;
}

.el-table .cell-nowrap .cell {
  white-space: nowrap;
}

.table-empty {
  padding: 12px 0;
}

/* ---------------------------------------------------------------- 管理端 */
.admin-layout {
  min-height: 100vh;
  display: flex;
}

.admin-aside {
  width: 200px;
  flex: 0 0 200px;
  background: #1f2d3d;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.admin-brand {
  height: 58px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 18px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: #1a2532;
  white-space: nowrap;
}

.admin-brand .dot {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: #409eff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex: 0 0 26px;
}

.admin-aside .el-menu {
  border-right: none;
  background: transparent;
  flex: 1;
}

.admin-aside .el-menu-item {
  color: #b8c2cc;
}

.admin-aside .el-menu-item:hover {
  background: #26374a;
  color: #fff;
}

.admin-aside .el-menu-item.is-active {
  background: #26374a;
  color: #409eff;
}

.admin-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #f5f7fa;
}

.admin-header {
  height: 58px;
  flex: 0 0 58px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  gap: 12px;
  background: #fff;
  border-bottom: 1px solid #e8eaef;
}

.admin-header h1 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: #1f2d3d;
}

.admin-content {
  flex: 1;
  min-height: 0;
  padding: 18px;
}

.admin-sidebar-toggle {
  display: none;
}

/* ---------------------------------------------------------------- 分页 */
.pager {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.pager-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------- 响应式 */
@media (max-width: 992px) {
  .app-aside {
    display: none;
  }

  .mobile-menu-bar {
    display: block;
  }

  .app-main {
    padding: 12px;
  }

  .panel {
    padding: 14px;
  }
}

@media (max-width: 768px) {
  .app-header {
    padding: 0 12px;
  }

  .stat-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
  }

  .stat-card {
    padding: 14px;
    gap: 10px;
  }

  .stat-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    font-size: 18px;
  }

  .stat-value {
    font-size: 21px;
  }

  .account-grid {
    grid-template-columns: 1fr;
  }

  .admin-aside {
    position: fixed;
    z-index: 200;
    height: 100%;
    left: 0;
    top: 0;
    transform: translateX(-100%);
    transition: transform 0.25s;
  }

  .admin-aside.open {
    transform: translateX(0);
  }

  .admin-sidebar-toggle {
    display: inline-flex;
  }

  .admin-content {
    padding: 12px;
  }

  /* 手机端：表单项与操作按钮占满整行，避免被压缩 */
  .submit-row .el-radio-group {
    width: 100%;
  }

  .submit-row .el-radio {
    margin-right: 12px;
    height: 32px;
  }

  .info-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .panel-toolbar {
    gap: 8px;
  }

  .panel-toolbar .el-button {
    flex: 1 1 auto;
  }

  .panel-toolbar .el-input,
  .panel-toolbar .el-select {
    width: 100% !important;
    max-width: none !important;
  }

  .panel-toolbar .grow {
    display: none;
  }

  /* 弹窗留出安全边距，内容可滚动（「强制全屏通知」要铺满整屏，排除在外） */
  .el-dialog:not(.popup-dialog) {
    width: 94% !important;
    max-width: 560px;
    margin-top: 6vh !important;
    border-radius: 12px;
  }

  .el-dialog:not(.popup-dialog) .el-dialog__body {
    max-height: 72vh;
    overflow-y: auto;
    padding: 16px;
  }

  /* 日期选择器在窄屏下自适应宽度 */
  .submit-row .el-date-editor.el-input,
  .submit-row .el-date-editor--datetime {
    width: 100%;
  }
}

@media (max-width: 600px) {
  /* 顶部栏更紧凑 */
  .app-header {
    height: 52px;
    flex: 0 0 52px;
  }

  .app-main {
    padding: 10px;
  }

  .panel {
    padding: 13px;
    border-radius: 8px;
  }

  .panel-title {
    font-size: 14px;
    flex-wrap: wrap;
  }

  .panel-title .panel-sub {
    font-size: 11.5px;
    white-space: normal;
  }

  /* 提交设置：下拉/按钮全宽更好点 */
  .submit-row {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .submit-row .lbl {
    font-size: 12.5px;
  }

  .submit-row .el-radio-group {
    gap: 0;
  }

  .submit-row .el-radio {
    margin-right: 14px;
  }

  .submit-row .el-button {
    width: 100%;
  }

  /* 题目区选项纵向排布，避免选项文字被截断 */
  .q-body .el-radio-group,
  .q-body .el-checkbox-group {
    flex-direction: column;
    gap: 6px;
  }

  .q-body .el-radio,
  .q-body .el-checkbox {
    height: auto;
    min-height: 28px;
    white-space: normal;
  }

  /* 表格/账号卡 */
  .account-card {
    padding: 12px;
  }

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

  .el-message-box {
    width: 88% !important;
  }

  .el-message {
    min-width: 0;
    width: 86%;
  }

  /* 分页在窄屏下精简，避免横向溢出 */
  .el-pagination {
    flex-wrap: wrap;
    row-gap: 6px;
    justify-content: center;
  }

  .el-pagination__sizes,
  .el-pagination__jump {
    display: none;
  }
}

/* 表格横向滚动容器 */
.table-scroll {
  width: 100%;
  overflow-x: auto;
}

.table-scroll .el-table {
  min-width: 760px;
}

/* 审计日志详情单元格：长文本自动换行，鼠标悬停展示完整内容 */
.audit-detail {
  display: inline-block;
  max-width: 100%;
  max-height: 4.2em;
  overflow: hidden;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-all;
  vertical-align: middle;
  color: #606266;
}

/* 用户下拉里的「有新回复」小红点 */
.fb-dot {
  display: inline-block;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  margin-left: 6px;
  padding: 0 4px;
  border-radius: 8px;
  background: #f56c6c;
  color: #fff;
  font-size: 11px;
  text-align: center;
}

/* ---------- 用户端「提供反馈」页 ---------- */
.fb-page {
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

/* 左边写反馈的卡片固定在视口内，右侧记录长了也不用滚上去 */
.fb-compose {
  position: sticky;
  top: 12px;
}

.fb-list {
  min-height: 220px;
}

.fb-hint {
  margin-left: 4px;
  font-size: 12px;
  color: #a8abb2;
}

/* 页头：大标题 + 副标题 + 右侧操作 */
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.page-title {
  margin: 0;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: .3px;
  color: #1d2b3d;
}

.page-title.sm {
  font-size: 15.5px;
}

.page-sub {
  margin-top: 5px;
  font-size: 12.5px;
  color: #8a94a6;
}

/* 一条反馈 = 一段对话：我先说，管理员再回 */
.fb-thread {
  padding: 16px 0 6px;
  border-top: 1px dashed #edf0f5;
}

.fb-thread:first-of-type {
  padding-top: 2px;
  border-top: none;
}

.fb-thread-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.fb-time {
  font-size: 12px;
  color: #9aa4b2;
}

.fb-quota {
  margin-left: auto;
  padding: 2px 10px;
  border-radius: 999px;
  background: #fff7e6;
  color: #b7791f;
  font-size: 12px;
}

.fb-msg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

/* 我的话靠右、管理员的话靠左，一眼分清谁说的 */
.fb-msg.me {
  flex-direction: row-reverse;
}

.fb-speaker {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 13px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  background: #eef2f8;
  color: #6b7787;
}

.fb-msg.me .fb-speaker {
  background: linear-gradient(135deg, #4d8dff, #2f6fe0);
  color: #fff;
}

.fb-msg.admin .fb-speaker {
  background: linear-gradient(135deg, #eafaf0, #d5f2e1);
  color: #1f9d57;
}

.fb-bubble {
  max-width: min(100%, 640px);
  padding: 12px 15px;
  border-radius: 14px 4px 14px 14px;
  font-size: 13.5px;
  line-height: 1.8;
  color: #33404f;
  background: #f3f6fb;
}

.fb-msg.admin .fb-bubble {
  border: 1px solid #e9edf5;
  border-radius: 4px 14px 14px 14px;
  background: #fff;
}

.fb-text {
  white-space: pre-wrap;
  word-break: break-word;
}

.fb-meta {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #eef1f6;
  font-size: 12px;
  color: #9aa4b2;
}

.fb-pending {
  padding: 10px 15px;
  border: 1px dashed #e2e6ee;
  border-radius: 4px 14px 14px 14px;
  font-size: 13px;
  color: #a6aebc;
}

/* 管理面板侧边栏「反馈管理」的待处理角标 */
.fb-badge {
  display: inline-block;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  margin-left: 6px;
  padding: 0 4px;
  border-radius: 8px;
  background: #f56c6c;
  color: #fff;
  font-size: 11px;
  text-align: center;
}

/* 回复反馈弹窗里引用的原文 */
.fb-quote {
  border: 1px solid #ebeef5;
  border-radius: 6px;
  padding: 10px 12px;
  background: #fafafa;
}

.fb-quote-head {
  margin-bottom: 6px;
  font-size: 13px;
}

.fb-quote-body {
  font-size: 13px;
  color: #303133;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 160px;
  overflow-y: auto;
}

/* ---------- 图片上传（反馈 / 回复 / 通知共用） ---------- */
.img-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.img-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.img-thumb {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #ebeef5;
}

.img-thumb .el-image {
  width: 100%;
  height: 100%;
  display: block;
}

.img-del {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  line-height: 16px;
  text-align: center;
  border-radius: 50%;
  background: #f56c6c;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  z-index: 2;
}

/* ---------- 用户端「消息通知」页 ---------- */
.msg-reminder {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
  border: 1px solid #ffe2b8;
  border-radius: 14px;
  background: linear-gradient(135deg, #fffaf1, #fff4e3);
}

.msg-reminder-main {
  flex: 1;
  min-width: 0;
}

.msg-reminder .msg-title {
  margin-bottom: 3px;
  color: #b26a00;
}

/* 消息类型图标：圆角方块 + 渐变，比小圆点更有分量 */
.msg-kind-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-size: 20px;
  background: linear-gradient(135deg, #e9f1ff, #d7e7ff);
  color: #2f7fe0;
}

.msg-kind-icon.warn {
  background: linear-gradient(135deg, #fff3df, #ffe7c2);
  color: #dd8500;
}

.msg-card {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  margin-bottom: 12px;
  border: 1px solid #eef0f5;
  border-radius: 14px;
  background: #fff;
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

.msg-card:hover {
  border-color: #e0e7f4;
  box-shadow: 0 8px 22px rgba(29, 43, 73, .08);
  transform: translateY(-1px);
}

.msg-card.k-feedback .msg-kind-icon {
  background: linear-gradient(135deg, #eafaf0, #d5f2e1);
  color: #1f9d57;
}

.msg-card.k-system .msg-kind-icon {
  background: linear-gradient(135deg, #fff3df, #ffe7c2);
  color: #dd8500;
}

.msg-card-main {
  flex: 1;
  min-width: 0;
}

.msg-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 7px;
}

.msg-title {
  font-size: 15px;
  font-weight: 600;
  color: #1d2b3d;
}

/* 类型做成小药丸：不抢眼但不丢信息 */
.msg-kind-tag {
  padding: 1px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  white-space: nowrap;
  background: #f2f4f8;
  color: #7b8698;
}

.msg-card.k-feedback .msg-kind-tag { background: #eafaf0; color: #1f9d57; }
.msg-card.k-system .msg-kind-tag { background: #fff4e0; color: #b87800; }
.msg-card.k-admin .msg-kind-tag { background: #e9f1ff; color: #2f7fe0; }

.msg-time {
  margin-left: auto;
  font-size: 12px;
  color: #9aa4b2;
  white-space: nowrap;
}

.msg-body {
  font-size: 13.5px;
  line-height: 1.8;
  color: #5b667a;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 1100px) {
  .fb-page {
    grid-template-columns: minmax(0, 1fr);
  }

  .fb-compose {
    position: static;
  }
}

/* 顶栏消息铃铛 */
.msg-bell {
  display: flex;
  align-items: center;
  margin-right: 14px;
  cursor: pointer;
  font-size: 18px;
  color: #606266;
}

.msg-bell:hover {
  color: #409eff;
}

/* ---------- 强制全屏通知（管理员标了「强制全屏」的通知） ---------- */
/* 手机端有 .el-dialog { width:94% !important } 的规则，会把 fullscreen 拉成小窗，
   这里用更具体的选择器 + !important 把它按回整屏 */
.el-dialog.popup-dialog {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent;
  box-shadow: none;
}

/* 容器本身也去掉留白，否则顶部会漏出一条页面内容 */
.el-overlay-dialog:has(.popup-dialog) {
  padding: 0 !important;
}

.popup-dialog .el-dialog__header {
  display: none;
}

.popup-dialog .el-dialog__body {
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(160deg, #f6f9ff, #eaf1ff);
}

.popup-box {
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 34px 32px 30px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 40px rgba(31, 45, 61, .16);
  text-align: center;
}

.popup-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, #409eff, #2f7fe0);
  color: #fff;
  font-size: 30px;
}

.popup-label {
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #409eff;
}

.popup-title {
  margin: 0 0 6px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.4;
  color: #1f2d3d;
}

.popup-time {
  margin-bottom: 18px;
  font-size: 12px;
  color: #909399;
}

.popup-body {
  text-align: left;
  font-size: 14.5px;
  line-height: 1.85;
  color: #303133;
  white-space: pre-wrap;
  word-break: break-word;
}

.popup-imgs {
  justify-content: center;
}

.popup-btn {
  margin-top: 26px;
  min-width: 160px;
}

@media (max-width: 600px) {
  .popup-box {
    padding: 26px 20px 22px;
    border-radius: 14px;
  }

  .popup-title {
    font-size: 18px;
  }

  .popup-body {
    font-size: 14px;
  }

  .popup-btn {
    width: 100%;
  }
}

/* ================================================================
   手机端适配
   ================================================================ */

@media (max-width: 992px) {
  /* 横向菜单默认会被 Element Plus 把放不下的项折叠成「…」，
     用户根本不知道还有「消息通知 / 提供反馈」这些入口。
     模板里已关掉折叠（:ellipsis="false"），这里再允许换行，
     保证所有入口一行放不下就换行，全部直接可见。 */
  .mobile-menu-bar {
    white-space: normal;
    overflow-x: visible;
    padding: 0;
  }

  .mobile-menu-bar .el-menu {
    flex-wrap: wrap;
    height: auto;
  }

  .mobile-menu-bar .el-menu-item {
    height: 40px;
    line-height: 40px;
    padding: 0 12px;
    font-size: 13.5px;
  }
}

@media (max-width: 768px) {
  /* 外层再套一层 overflow-x:auto 会让 el-table 的固定列失效
     （固定列被裁到 760px 之外，操作按钮完全看不见），
     这里把横向滚动交回给 el-table 自己处理。 */
  .table-scroll {
    overflow-x: hidden;
  }

  .table-scroll .el-table {
    min-width: 100%;
  }

  .table-scroll .el-table .cell {
    padding: 0 6px;
  }

  .table-scroll .el-table .el-button + .el-button {
    margin-left: 4px;
  }
}

@media (max-width: 600px) {
  /* 消息卡片与反馈对话在手机上进一点，避免挤压 */
  .page-head {
    flex-wrap: wrap;
    margin-bottom: 14px;
  }

  .page-title {
    font-size: 16px;
  }

  .msg-card {
    gap: 12px;
    padding: 14px;
    border-radius: 12px;
  }

  .msg-kind-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    font-size: 18px;
  }

  .msg-title {
    font-size: 14.5px;
  }

  /* 手机上标题 + 类型 + 时间一行排不下，时间会随机换行 ——
     统一让它独占一行右对齐，整齐且不挤 */
  .msg-time {
    width: 100%;
    margin-left: 0;
    margin-top: 1px;
    text-align: right;
  }

  .fb-msg {
    gap: 8px;
  }

  .fb-speaker {
    height: 24px;
    padding: 0 8px;
    font-size: 11.5px;
  }

  .fb-bubble {
    padding: 10px 12px;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  /* 顶栏更紧凑，保证「剩余次数 / 铃铛 / 用户名」都露得出来 */
  .app-header {
    padding: 0 10px;
  }

  .app-header-right {
    gap: 8px;
  }

  .quota-badge {
    height: 26px;
    padding: 0 9px;
    font-size: 12px;
  }

  .quota-badge b {
    font-size: 13px;
  }

  .msg-bell {
    margin-right: 8px;
    font-size: 17px;
  }

  .user-trigger {
    gap: 5px;
    padding: 4px 6px;
  }

  .user-trigger > span {
    max-width: 66px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

/* ==========================================================================
   深色模式（跟随系统 prefers-color-scheme）
   Element Plus 组件由 theme-chalk/dark/css-vars.css 接管，
   这一节只覆盖两页里自写的、写死了浅色的样式，保证文字都看得清。
   ========================================================================== */
html.dark body {
  background: var(--el-bg-color-page);
  color: var(--el-text-color-primary);
}

html.dark a {
  color: #79bbff;
}

html.dark ::-webkit-scrollbar-thumb {
  background: #4c4d4f;
}

html.dark ::-webkit-scrollbar-thumb:hover {
  background: #5f6163;
}

/* ---------------------------------------------------------------- 登录页 */
html.dark .login-wrap {
  background: linear-gradient(135deg, #101418 0%, #0c0f13 45%, #0e151d 100%);
}

html.dark .login-card {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

html.dark .login-title {
  color: var(--el-text-color-primary);
}

html.dark .login-sub {
  color: var(--el-text-color-secondary);
}

html.dark .login-footer {
  color: var(--el-text-color-placeholder);
}

/* ---------------------------------------------------------------- 头 / 侧栏 */
html.dark .app-header,
html.dark .mobile-menu-bar {
  background: var(--el-bg-color);
  border-bottom-color: var(--el-border-color);
}

html.dark .app-header {
  box-shadow: none;
}

html.dark .app-logo {
  color: var(--el-text-color-primary);
}

html.dark .quota-badge {
  background: rgba(64, 158, 255, 0.18);
  color: #79bbff;
}

html.dark .user-trigger {
  color: var(--el-text-color-primary);
}

html.dark .user-trigger:hover {
  background: var(--el-fill-color-light);
}

html.dark .app-aside {
  background: var(--el-bg-color);
  border-right-color: var(--el-border-color);
}

/* ---------------------------------------------------------------- 卡片 */
html.dark .panel,
html.dark .stat-card {
  background: var(--el-bg-color);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

html.dark .panel-title,
html.dark .stat-value {
  color: var(--el-text-color-primary);
}

html.dark .panel-sub,
html.dark .panel-desc,
html.dark .perm-block-title,
html.dark .stat-label,
html.dark .form-label-tip,
html.dark .text-muted,
html.dark .import-url-tip,
html.dark .qr-hint {
  color: var(--el-text-color-secondary);
}

/* ---------------------------------------------------------------- 题目 / 表单 */
html.dark .question-item {
  border-color: var(--el-border-color);
  background: var(--el-fill-color-light);
}

html.dark .question-item.is-missing {
  border-color: #7a3b3b;
  background: rgba(245, 108, 108, 0.1);
}

html.dark .q-index,
html.dark .q-sub {
  color: var(--el-text-color-secondary);
}

html.dark .q-title {
  color: var(--el-text-color-primary);
}

html.dark .submit-panel {
  border-color: var(--el-border-color);
  background: linear-gradient(180deg, rgba(64, 158, 255, 0.08) 0%, var(--el-bg-color) 100%);
}

html.dark .submit-row .lbl,
html.dark .onboard-form .field label {
  color: var(--el-text-color-regular);
}

html.dark .info-item .k {
  color: var(--el-text-color-secondary);
}

html.dark .info-item .v {
  color: var(--el-text-color-primary);
}

/* ---------------------------------------------------------------- 账号卡 */
html.dark .account-card {
  background: var(--el-bg-color);
  border-color: var(--el-border-color);
}

html.dark .account-card:hover {
  border-color: var(--el-color-primary);
  box-shadow: 0 3px 12px rgba(64, 158, 255, 0.18);
}

html.dark .account-name {
  color: var(--el-text-color-primary);
}

html.dark .account-line {
  color: var(--el-text-color-secondary);
}

/* ---------------------------------------------------------------- 新用户引导 */
html.dark .onboard-head {
  background: linear-gradient(135deg, #171b21 0%, #12161b 100%);
  border-bottom-color: var(--el-border-color);
}

html.dark .onboard-headtext h2 {
  color: var(--el-text-color-primary);
}

html.dark .onboard-headtext p {
  color: var(--el-text-color-secondary);
}

html.dark .onboard-steps .dot {
  background: #2b2f36;
  color: #8b94a3;
}

html.dark .onboard-steps .txt b {
  color: var(--el-text-color-primary);
}

html.dark .onboard-steps .txt em {
  color: var(--el-text-color-secondary);
}

html.dark .onboard-steps .link {
  background: #2b2f36;
}

html.dark .onboard-steps .link.on {
  background: #3f6b30;
}

html.dark .onboard-tip {
  color: var(--el-text-color-secondary);
}

html.dark .onboard-note.warn {
  background: rgba(230, 162, 60, 0.12);
  border-color: rgba(230, 162, 60, 0.35);
}

html.dark .onboard-note.warn b { color: #eebe77; }
html.dark .onboard-note.warn p { color: #cb9d56; }

html.dark .onboard-note.ok {
  background: rgba(103, 194, 58, 0.12);
  border-color: rgba(103, 194, 58, 0.35);
}

html.dark .onboard-note.ok b { color: #85ce61; }
html.dark .onboard-note.ok p { color: #7cb45c; }

/* ---------------------------------------------------------------- 登录态失效页 */
html.dark .expired-alert {
  background: var(--el-bg-color);
}

html.dark .expired-alert h2 {
  color: var(--el-text-color-primary);
}

html.dark .expired-alert .expired-sub {
  color: var(--el-text-color-regular);
}

html.dark .expired-alert .expired-tip {
  color: var(--el-text-color-secondary);
}

/* ---------------------------------------------------------------- 验证码 / 二维码 */
html.dark .captcha-img {
  background: #2a2d33;
}

html.dark .share-qr,
html.dark .qr-box {
  background: var(--el-fill-color-light);
  border-color: var(--el-border-color);
}

html.dark .qr-loading .qr-loading-text,
html.dark .qr-text {
  color: var(--el-text-color-regular);
}

html.dark .text-pre,
html.dark .fb-quote {
  background: var(--el-fill-color-light);
  border-color: var(--el-border-color);
}

/* ---------------------------------------------------------------- 状态色（深色底上提亮） */
html.dark .status-success { color: #85ce61; }
html.dark .status-failed { color: #f78989; }
html.dark .status-running { color: #79bbff; }
html.dark .status-waiting { color: #eebe77; }
html.dark .status-idle { color: #a3a6ad; }

/* ---------------------------------------------------------------- 管理端 */
html.dark .admin-main {
  background: var(--el-bg-color-page);
}

html.dark .admin-header {
  background: var(--el-bg-color);
  border-bottom-color: var(--el-border-color);
}

html.dark .admin-header h1 {
  color: var(--el-text-color-primary);
}

html.dark .audit-detail {
  color: var(--el-text-color-regular);
}

/* ---------------------------------------------------------------- 反馈页 */
html.dark .page-title {
  color: var(--el-text-color-primary);
}

html.dark .page-sub,
html.dark .fb-hint,
html.dark .fb-time,
html.dark .fb-meta {
  color: var(--el-text-color-secondary);
}

html.dark .fb-thread,
html.dark .fb-meta {
  border-top-color: var(--el-border-color-lighter);
}

html.dark .fb-quota {
  background: rgba(230, 162, 60, 0.16);
  color: #eebe77;
}

html.dark .fb-speaker {
  background: var(--el-fill-color);
  color: var(--el-text-color-secondary);
}

html.dark .fb-msg.admin .fb-speaker {
  background: rgba(103, 194, 58, 0.18);
  color: #85ce61;
}

html.dark .fb-bubble {
  background: var(--el-fill-color-light);
  color: var(--el-text-color-primary);
}

html.dark .fb-msg.admin .fb-bubble {
  background: var(--el-bg-color);
  border-color: var(--el-border-color);
}

html.dark .fb-pending {
  border-color: var(--el-border-color);
  color: var(--el-text-color-secondary);
}

html.dark .fb-quote-body {
  color: var(--el-text-color-primary);
}

html.dark .img-thumb {
  border-color: var(--el-border-color);
}

/* ---------------------------------------------------------------- 消息通知页 */
html.dark .msg-reminder {
  border-color: rgba(230, 162, 60, 0.35);
  background: linear-gradient(135deg, #2a2213, #241d10);
}

html.dark .msg-reminder .msg-title {
  color: #eebe77;
}

html.dark .msg-card {
  background: var(--el-bg-color);
  border-color: var(--el-border-color-lighter);
}

html.dark .msg-card:hover {
  border-color: var(--el-border-color);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}

html.dark .msg-title {
  color: var(--el-text-color-primary);
}

html.dark .msg-kind-icon {
  background: rgba(64, 158, 255, 0.16);
  color: #79bbff;
}

html.dark .msg-kind-icon.warn,
html.dark .msg-card.k-system .msg-kind-icon {
  background: rgba(230, 162, 60, 0.16);
  color: #eebe77;
}

html.dark .msg-card.k-feedback .msg-kind-icon {
  background: rgba(103, 194, 58, 0.16);
  color: #85ce61;
}

html.dark .msg-kind-tag {
  background: var(--el-fill-color);
  color: var(--el-text-color-secondary);
}

html.dark .msg-card.k-feedback .msg-kind-tag {
  background: rgba(103, 194, 58, 0.18);
  color: #85ce61;
}

html.dark .msg-card.k-system .msg-kind-tag {
  background: rgba(230, 162, 60, 0.18);
  color: #eebe77;
}

html.dark .msg-card.k-admin .msg-kind-tag {
  background: rgba(64, 158, 255, 0.18);
  color: #79bbff;
}

html.dark .msg-time,
html.dark .msg-bell {
  color: var(--el-text-color-secondary);
}

html.dark .msg-body {
  color: var(--el-text-color-regular);
}

/* ---------------------------------------------------------------- 强制全屏通知 */
html.dark .popup-dialog .el-dialog__body {
  background: linear-gradient(160deg, #12161c, #0e141d);
}

html.dark .popup-box {
  background: var(--el-bg-color);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}

html.dark .popup-title,
html.dark .popup-body {
  color: var(--el-text-color-primary);
}

html.dark .popup-time {
  color: var(--el-text-color-secondary);
}