/* Qingmu unified UI - match homepage style. 2026-06-02
   Only visual CSS overrides. No API / JS / business logic changed. */
:root{
  --qm-primary:#4f46e5;
  --qm-primary-2:#7c3aed;
  --qm-primary-dark:#4338ca;
  --qm-ink:#0f172a;
  --qm-text:#1f2937;
  --qm-muted:#64748b;
  --qm-bg:#f5f7fb;
  --qm-card:#ffffff;
  --qm-line:#e5e7eb;
  --qm-line-2:#dbe3ef;
  --qm-soft:#eef2ff;
  --qm-soft-2:#f5f3ff;
  --qm-danger:#ef4444;
  --qm-warning:#f59e0b;
  --qm-success:#10b981;
  --qm-radius:16px;
  --qm-radius-sm:12px;
  --qm-shadow:0 10px 30px rgba(15,23,42,.08);
  --qm-shadow-sm:0 4px 16px rgba(15,23,42,.06);
}
*{box-sizing:border-box}
html,body{background:var(--qm-bg)!important;color:var(--qm-text)!important;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif!important}
a{color:var(--qm-primary);text-decoration:none}a:hover{color:var(--qm-primary-dark)}
/* top/header/nav */
.top,.header,.navbar,.topbar,.app-header,.page-header{
  background:#fff!important;color:var(--qm-ink)!important;border-bottom:1px solid var(--qm-line)!important;box-shadow:0 2px 14px rgba(15,23,42,.04)!important;
}
.brand,.logo,.site-title,h1,h2,h3{color:var(--qm-ink)!important}.brand small,.sub,.desc,.muted{color:var(--qm-muted)!important}
/* sidebars */
.side,.sidebar,.aside,.left,.right,.panel,.drawer,.menu-panel{
  background:#fff!important;color:var(--qm-text)!important;border-color:var(--qm-line)!important;box-shadow:var(--qm-shadow-sm)!important;
}
.side h3,.sidebar h3,.panel h3,.section-title{color:var(--qm-ink)!important}
.nav a,.nav button,.side a,.sidebar a,.menu a,.tab,.tabs button{
  color:#334155!important;border-radius:12px!important;transition:.16s ease!important;border:1px solid transparent!important;background:transparent!important;
}
.nav a:hover,.nav button:hover,.side a:hover,.sidebar a:hover,.menu a:hover,.tab:hover,.tabs button:hover{
  background:var(--qm-soft)!important;color:var(--qm-primary)!important;border-color:#bfdbfe!important;
}
.nav .active,.nav button.active,.side a.on,.sidebar a.on,.menu a.on,.menu .active,.tab.active,.tabs button.active{
  background:linear-gradient(135deg,#eef2ff,#f5f3ff)!important;color:var(--qm-primary-dark)!important;border-color:#bfdbfe!important;font-weight:700!important;box-shadow:none!important;
}
/* cards */
.card,.box,.panel,.content-card,.stat-card,.item,.workflow-item,.plugin-card,.bot-card,.setting-card,.authbox,.modalbox,.modal-box{
  background:#fff!important;color:var(--qm-text)!important;border:1px solid var(--qm-line)!important;border-radius:var(--qm-radius)!important;box-shadow:var(--qm-shadow-sm)!important;
}
.card:hover,.plugin-card:hover,.bot-card:hover,.workflow-item:hover{box-shadow:var(--qm-shadow)!important}
/* buttons */
.btn,button,.button,input[type=button],input[type=submit]{border-radius:12px!important;font-weight:700!important;transition:.16s ease!important}
.btn.primary,.btn.pri,.primary,button.primary,.save-btn,.login-btn,.submit-btn,.btn-blue{
  background:linear-gradient(135deg,var(--qm-primary),var(--qm-primary-2))!important;color:#fff!important;border:0!important;box-shadow:0 8px 18px rgba(79,70,229,.22)!important;
}
.btn.primary:hover,.btn.pri:hover,.primary:hover,button.primary:hover,.save-btn:hover,.login-btn:hover,.submit-btn:hover{filter:brightness(.98);transform:translateY(-1px)}
.btn.secondary,.btn.gray,.btn-light,.ghost,.outline,button.secondary{
  background:#fff!important;color:#334155!important;border:1px solid var(--qm-line-2)!important;box-shadow:none!important;
}
.btn.secondary:hover,.btn.gray:hover,.btn-light:hover,.ghost:hover,.outline:hover{background:var(--qm-soft)!important;color:var(--qm-primary)!important;border-color:#bfdbfe!important}
.btn.danger,.danger,.delete,button.danger{background:#ef4444!important;color:#fff!important;border:0!important;box-shadow:0 8px 18px rgba(239,68,68,.18)!important}
/* forms */
input,select,textarea,.input,.select,.textarea{
  background:#fff!important;color:var(--qm-text)!important;border:1px solid var(--qm-line-2)!important;border-radius:12px!important;box-shadow:none!important;outline:none!important;
}
input:focus,select:focus,textarea:focus,.input:focus{border-color:var(--qm-primary)!important;box-shadow:0 0 0 3px rgba(79,70,229,.13)!important}
label{color:#334155!important;font-weight:700}.help,.tip{color:var(--qm-muted)!important}
/* tables and logs */
.table-wrap,.log-table-wrap{background:#fff!important;border:1px solid var(--qm-line)!important;border-radius:var(--qm-radius)!important;overflow:auto!important;box-shadow:var(--qm-shadow-sm)!important}
table{background:#fff!important;border-collapse:separate!important;border-spacing:0!important;color:var(--qm-text)!important;width:100%}
th{background:#f8fafc!important;color:#475569!important;font-weight:800!important;white-space:nowrap!important}td,th{border-bottom:1px solid var(--qm-line)!important}td{color:#334155!important}tr:hover td{background:#f8fbff!important}
/* badges */
.badge,.tag,.pill,.label{border-radius:999px!important;font-weight:800!important;background:#eef2ff!important;color:#4f46e5!important;border:1px solid #c7d2fe!important}.badge.ok,.tag.ok,.status-ok{background:#ecfdf5!important;color:#047857!important;border-color:#bbf7d0!important}.badge.warn,.tag.warn{background:#fffbeb!important;color:#b45309!important;border-color:#fde68a!important}.badge.bad,.tag.bad,.status-fail{background:#fff1f2!important;color:#dc2626!important;border-color:#fecdd3!important}
/* toast/modal */
.toast,.notice,.message-tip,.alert{border-radius:14px!important;box-shadow:var(--qm-shadow)!important}.modal,.modal-mask,.overlay{backdrop-filter:blur(4px)}
/* workflow */
.canvas,.flow-canvas,#canvasWrap,#canvas,.workspace,.graph-area{background:#fff!important;border:1px solid var(--qm-line)!important;border-radius:var(--qm-radius)!important}.node{background:#fff!important;color:var(--qm-text)!important;border:1px solid var(--qm-line)!important;border-radius:14px!important;box-shadow:0 8px 20px rgba(15,23,42,.08)!important}.node.selected,.node.active{border-color:var(--qm-primary)!important;box-shadow:0 0 0 3px rgba(79,70,229,.13),0 12px 26px rgba(15,23,42,.10)!important}.node-title{color:var(--qm-ink)!important}
/* homepage should keep readable if public css is loaded */
.hero{background:linear-gradient(135deg,#0f172a 0%,#1e3a8a 52%,#0ea5e9 100%)!important;color:#fff!important}.hero *{color:inherit}.hero .btn.primary,.hero .btn.pri,.hero .primary{color:#fff!important}.hero .btn.secondary,.hero .ghost{background:rgba(255,255,255,.12)!important;color:#fff!important;border-color:rgba(255,255,255,.28)!important}
/* auth pages */
.auth,.login-page,.register-page,.forgot-page{background:linear-gradient(180deg,#f8fbff 0%,#eef4ff 100%)!important}.authbox{box-shadow:var(--qm-shadow)!important}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}::-webkit-scrollbar-track{background:#f1f5f9}
@media(max-width:860px){body{background:var(--qm-bg)!important}.card,.box,.panel,.authbox,.modalbox,.modal-box{border-radius:14px!important}.mobilebar,.mobile-top{background:#fff!important;box-shadow:var(--qm-shadow-sm)!important;border-bottom:1px solid var(--qm-line)!important}.drawer{box-shadow:0 20px 50px rgba(15,23,42,.18)!important}.btn,button.btn{padding:10px 13px}.table-wrap,.log-table-wrap{overflow:auto!important}}


/* ======================================================
   qm-beautify — 全局视觉翻新 2026-06-04
   保持现有框架，统一所有后台页面的视觉风格
   ====================================================== */

/* 1. 更精致的卡片与容器 */
.card, .box, .panel, .authbox, .modalbox,
.content-card, .stat-card, .item, .workflow-item,
.plugin-card, .bot-card, .setting-card,
.card-glass, .glass-panel {
  border-radius: 18px !important;
  transition: all 0.2s ease !important;
}
.card:hover, .bot-card:hover, .plugin-card:hover,
.workflow-item:hover, .item:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1) !important;
}

/* 2. 统计数据卡片美化 */
.stat.card, .card.stat, .stat-card {
  position: relative;
  overflow: hidden;
}
.stat.card::before, .card.stat::before, .stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--qm-primary, #4f46e5), var(--qm-primary-2, #7c3aed));
  border-radius: 18px 18px 0 0;
}
.stat.card:nth-child(2)::before,
.card.stat:nth-child(2)::before,
.stat-card-accent-1::before {
  background: linear-gradient(90deg, #10b981, #34d399) !important;
}
.stat.card:nth-child(3)::before,
.card.stat:nth-child(3)::before,
.stat-card-accent-2::before {
  background: linear-gradient(90deg, #f59e0b, #fbbf24) !important;
}
.stat.card:nth-child(4)::before,
.card.stat:nth-child(4)::before,
.stat-card-accent-3::before {
  background: linear-gradient(90deg, #06b6d4, #22d3ee) !important;
}
.stat.card:nth-child(5)::before,
.card.stat:nth-child(5)::before,
.stat-card-accent-4::before {
  background: linear-gradient(90deg, #8b5cf6, #a78bfa) !important;
}
.stat.card b, .card.stat b, .stat-card b,
.stat b, .stat b {
  font-size: 30px;
  background: linear-gradient(135deg, #1e293b, #334155);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 3. 统一按钮圆角和间距 */
.btn, button, .button, input[type=button], input[type=submit],
.btn-primary, .btn-secondary, .btn-danger, .btn-warning,
.btn.pri, .btn.ok, .btn.bad, .btn.warn, .btn.gray, .btn.green, .btn.red, .btn.orange {
  border-radius: 12px !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  transition: all 0.18s ease !important;
}
.btn:active, button:active {
  transform: scale(0.97);
}
.btn.pri, .btn-primary, .btn.green {
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.2) !important;
}
.btn.pri:hover, .btn-primary:hover, .btn.green:hover {
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.3) !important;
  transform: translateY(-1px);
}
.btn.bad, .btn-danger, .btn.red {
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.15) !important;
}
.btn.warn, .btn-warning, .btn.orange {
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.15) !important;
}

/* 4. 表单元素美化 */
.input, input, select, textarea, .select, .textarea {
  border-radius: 12px !important;
  padding: 10px 13px !important;
  font-size: 14px !important;
  transition: all 0.18s ease !important;
}
.input:focus, input:focus, select:focus, textarea:focus, .select:focus, .textarea:focus {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12), 0 2px 8px rgba(37, 99, 235, 0.06) !important;
}
label, .label, .form-label {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  margin-bottom: 6px;
  display: inline-block;
}

/* 5. 表格美化 */
.table-wrap, .log-table-wrap, .data-table-wrap {
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06) !important;
}
table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
th {
  background: #f1f5f9 !important;
  color: #334155 !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  padding: 12px 14px !important;
  letter-spacing: 0.02em;
}
td {
  padding: 11px 14px !important;
  font-size: 14px !important;
  color: #1e293b !important;
}
tr:last-child td {
  border-bottom: none !important;
}
tr:hover td {
  background: #f8fbff !important;
}

/* 6. 徽章/标签统一 */
.badge, .tag, .pill, .label-badge, .status-badge {
  border-radius: 999px !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
}

/* 7. 子导航栏美化 */
.subnav, .sub-nav, .page-tabs, .section-tabs {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  padding: 4px !important;
  margin-bottom: 16px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
.subnav::-webkit-scrollbar, .sub-nav::-webkit-scrollbar { display: none !important; }
.subnav button, .sub-nav button, .page-tabs button, .section-tabs button {
  border: 0 !important;
  background: transparent !important;
  padding: 8px 16px !important;
  border-radius: 10px !important;
  color: #475467 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.15s ease !important;
}
.subnav button:hover, .sub-nav button:hover {
  background: #eff6ff !important;
  color: #4f46e5 !important;
}
.subnav button.active, .sub-nav button.active,
.page-tabs button.active, .section-tabs button.active {
  background: #fff !important;
  color: #4f46e5 !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12) !important;
}

/* 8. 弹窗/模态框美化 */
.modal, .modal-mask, .overlay {
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
.modalbox, .modal-box, .modal-content {
  border-radius: 20px !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

/* 9. 顶部导航栏微调 */
.admin-header, .app-header, .top-header {
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  background: rgba(255, 255, 255, 0.88) !important;
}
.admin-header .nav-links a.active, .admin-header .nav-links button.active {
  background: linear-gradient(135deg, #eff6ff, #e0f2fe) !important;
  color: #4f46e5 !important;
  font-weight: 800 !important;
}

/* 10. 全局间距与排版优化 */
.page-content, .main, .content-area {
  padding: 20px !important;
}
h1, h2, h3, h4 {
  letter-spacing: -0.01em !important;
}
h1 { font-size: 24px !important; }
h2 { font-size: 20px !important; }
h3 { font-size: 17px !important; }
h4 { font-size: 15px !important; }
.sub, .muted, .hint, .help-text, .desc {
  font-size: 13px !important;
  color: #64748b !important;
  line-height: 1.6 !important;
}

/* 11. 分割线 */
hr, .divider, .separator {
  border: 0 !important;
  border-top: 1px solid #e5e7eb !important;
  margin: 16px 0 !important;
}

/* 12. 加载占位符 */
.loading, .empty, .placeholder {
  color: #94a3b8 !important;
  font-size: 14px !important;
  text-align: center !important;
  padding: 32px 16px !important;
}

/* 13. Toast通知美化 */
.toast, .notice, .alert, .message-tip {
  border-radius: 14px !important;
  padding: 12px 18px !important;
  font-weight: 600 !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
}

/* 14. 工作流节点微调 */
.node {
  border-radius: 14px !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08) !important;
  transition: box-shadow 0.2s ease !important;
}
.node:hover {
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12) !important;
}

/* 15. 响应式微调 */
@media (max-width: 860px) {
  .page-content, .main, .content-area {
    padding: 14px !important;
  }
  .card, .box, .panel {
    border-radius: 14px !important;
  }
  .btn, button, .button {
    padding: 9px 13px !important;
    font-size: 13px !important;
  }
  h1 { font-size: 20px !important; }
  h2 { font-size: 18px !important; }
  h3 { font-size: 16px !important; }
  th, td {
    padding: 9px 11px !important;
    font-size: 13px !important;
  }
  .subnav button, .sub-nav button {
    padding: 7px 12px !important;
    font-size: 13px !important;
  }
}