@charset "utf-8";

/* ============================================================
 * WecomKF Gateway · 视觉系统 v2（亮色系 · 高级克制 · 科技感）
 * 手工产物，不跑 Tailwind CLI。
 * ============================================================ */

/* ---------- CSS 变量（全部配色改这里生效） ---------- */
:root {
  --color-bg:           #FAFBFC;
  --color-bg-sunken:    #F4F5F7;
  --color-surface:      #FFFFFF;
  --color-text:         #15181E;
  --color-muted:        #5B6270;
  --color-subtle:       #98A0AE;
  --color-border:       #E7E9EE;
  --color-border-strong:#D5D9E2;
  --color-accent:       #4F46E5;
  --color-accent-strong:#4338CA;
  --color-accent-soft:  #EEF0FF;
  --color-info:         #0EA5E9;
  --color-info-soft:    #E0F2FE;
  --color-success:      #10B981;
  --color-success-soft: #E7F8F1;
  --color-warn:         #F59E0B;
  --color-warn-soft:    #FEF5E5;
  --color-danger:       #EF4444;
  --color-danger-soft:  #FDECEC;
  --grad-brand: linear-gradient(90deg, #6366F1, #0EA5E9);
}

/* ---------- 基础 ---------- */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: "Inter", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 14px; line-height: 1.55;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
input, select, button { font-family: inherit; font-size: 14px; }
input:focus, select:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }

/* ---------- 布局 ---------- */
.min-h-screen { min-height: 100vh; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.overflow-y-auto { overflow-y: auto; }
.overflow-hidden { overflow: hidden; }
.w-56 { width: 14rem; }
.w-64 { width: 16rem; }
.shrink-0 { flex-shrink: 0; }

/* ---------- 间距 ---------- */
.p-2 { padding: .5rem; }   .p-3 { padding: .75rem; }   .p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; } .p-6 { padding: 1.5rem; }   .p-8 { padding: 2rem; }
.px-2 { padding-left: .5rem; padding-right: .5rem; }
.px-3 { padding-left: .75rem; padding-right: .75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.py-3 { padding-top: .75rem; padding-bottom: .75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.m-0 { margin: 0; }
.mb-1 { margin-bottom: .25rem; } .mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: .75rem; } .mb-4 { margin-bottom: 1rem; }
.mt-1 { margin-top: .25rem; }    .mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: .75rem; }    .mt-4 { margin-top: 1rem; }
.ml-2 { margin-left: .5rem; }    .ml-auto { margin-left: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.gap-2 { gap: .5rem; }  .gap-3 { gap: .75rem; }  .gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; } .gap-6 { gap: 1.5rem; }

.space-y-2 > * + * { margin-top: .5rem; }
.space-y-3 > * + * { margin-top: .75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }

/* ---------- 文字 ---------- */
.text-xs  { font-size: 11px; line-height: 16px; }
.text-sm  { font-size: 13px; line-height: 20px; }
.text-base{ font-size: 14px; line-height: 22px; }
.text-lg  { font-size: 16px; line-height: 24px; }
.text-xl  { font-size: 18px; line-height: 28px; }
.text-2xl { font-size: 22px; line-height: 32px; }
.text-3xl { font-size: 28px; line-height: 36px; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-mono { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; }
.text-muted  { color: var(--color-muted); }
.text-subtle { color: var(--color-subtle); }
.text-accent { color: var(--color-accent); }
.text-danger { color: var(--color-danger); }
.text-success{ color: var(--color-success); }
.text-warn   { color: var(--color-warn); }
.text-info   { color: var(--color-info); }
.text-right  { text-align: right; }
.text-center { text-align: center; }
.truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.leading-relaxed { line-height: 1.75; }
.uppercase { text-transform: uppercase; letter-spacing: .05em; }

/* ---------- 边框 & 圆角 ---------- */
.border { border-width: 1px; border-style: solid; border-color: var(--color-border); }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--color-border); }
.border-t { border-top-width: 1px; border-top-style: solid; border-top-color: var(--color-border); }
.rounded    { border-radius: 8px; }
.rounded-md { border-radius: 10px; }
.rounded-lg { border-radius: 12px; }
.rounded-xl { border-radius: 16px; }
.rounded-full { border-radius: 999px; }

/* ---------- 背景 ---------- */
.bg-bg       { background: var(--color-bg); }
.bg-surface  { background: var(--color-surface); }
.bg-sunken   { background: var(--color-bg-sunken); }
.bg-accent   { background: var(--color-accent); }
.bg-accent-soft { background: var(--color-accent-soft); }
.bg-info-soft   { background: var(--color-info-soft); }
.bg-success-soft{ background: var(--color-success-soft); }
.bg-warn-soft   { background: var(--color-warn-soft); }
.bg-danger-soft { background: var(--color-danger-soft); }

/* ---------- 栅格 ---------- */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- 卡片（核心视觉组件） ---------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card:hover {
  transform: translateY(-1px);
  border-color: var(--color-border-strong);
  box-shadow: 0 4px 16px -4px rgba(99,102,241,.25), 0 1px 2px rgba(15,23,42,.04);
}

/* Dashboard 大卡：极浅紫蓝渐变底 */
.glow-card {
  background: linear-gradient(135deg, #F5F6FF 0%, #F0FAFF 100%);
  border: 1px solid rgba(99,102,241,.18);
  border-radius: 12px;
}

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .5rem 1rem; font-size: 13px; font-weight: 500;
  border-radius: 8px; border: 1px solid transparent;
  transition: background .12s ease, transform .06s ease, border-color .12s ease;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary {
  background: var(--color-accent); color: #fff;
}
.btn-primary:hover:not(:disabled) { background: var(--color-accent-strong); }
.btn-primary:active:not(:disabled) { transform: scale(.98); }
.btn-outline {
  background: var(--color-surface); color: var(--color-text);
  border-color: var(--color-border);
}
.btn-outline:hover:not(:disabled) { border-color: var(--color-border-strong); background: var(--color-bg-sunken); }

/* ---------- 徽章 ---------- */
.badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 500;
}
.badge-accent  { background: var(--color-accent-soft); color: var(--color-accent); }
.badge-info    { background: var(--color-info-soft);   color: var(--color-info); }
.badge-success { background: var(--color-success-soft);color: var(--color-success); }
.badge-warn    { background: var(--color-warn-soft);   color: var(--color-warn); }
.badge-danger  { background: var(--color-danger-soft); color: var(--color-danger); }

/* ---------- 状态点（发光） ---------- */
.dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }
.dot-ok    { background: var(--color-success); box-shadow: 0 0 8px rgba(16,185,129,.7); }
.dot-warn  { background: var(--color-warn);    box-shadow: 0 0 8px rgba(245,158,11,.7); }
.dot-err   { background: var(--color-danger);  box-shadow: 0 0 8px rgba(239,68,68,.7); }
.dot-info  { background: var(--color-info);    box-shadow: 0 0 8px rgba(14,165,233,.7); }

/* ---------- 表单控件 ---------- */
input[type="text"], input[type="password"], input[type="number"], select, textarea {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: .5rem .75rem;
  font-size: 13px;
  color: var(--color-text);
  transition: border-color .12s ease, box-shadow .12s ease;
}
input[type="range"] { accent-color: var(--color-accent); }

/* ---------- kbd / score 标记 ---------- */
.kbd {
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  background: var(--color-bg-sunken); border: 1px solid var(--color-border);
  border-radius: 6px; padding: 1px 6px; color: var(--color-muted);
}

/* ---------- 表格 ---------- */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; font-weight: 500; color: var(--color-muted); padding: .5rem .75rem; border-bottom: 1px solid var(--color-border); }
td { padding: .5rem .75rem; border-bottom: 1px solid var(--color-border); }
tr:hover td { background: var(--color-bg-sunken); }

/* ---------- 导航 ---------- */
.nav-item {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem; border-radius: 8px;
  font-size: 13px; color: var(--color-muted);
  transition: background .12s ease, color .12s ease;
}
.nav-item:hover { background: var(--color-bg-sunken); color: var(--color-text); }
.nav-item.active {
  background: var(--color-accent-soft); color: var(--color-accent);
  box-shadow: inset 2px 0 0 var(--color-accent);
}

/* ---------- 顶部渐变条 ---------- */
.top-accent-bar { height: 4px; background: var(--grad-brand); }

/* ---------- Header hairline ---------- */
.header-hairline {
  height: 1px; background: linear-gradient(90deg, rgba(99,102,241,.4), transparent);
}

/* ---------- 事件行（Live Stream） ---------- */
.event-row {
  display: flex; align-items: center; gap: .5rem;
  padding: .375rem .5rem; border-radius: 6px;
  font-size: 12px;
}
.event-row:hover { background: var(--color-bg-sunken); }
.event-dot { width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; }

/* ---------- 响应式布局：sidebar 固定覆盖 + main 全宽内容居中 ---------- */
.sidebar-fixed {
  position: fixed; left: 0; top: 0; bottom: 0;
  width: 14rem; z-index: 40;
  overflow-y: auto;
  background: var(--color-surface);
}
.main-content {
  flex: 1;
  width: 100%;
  min-height: 100vh;
  padding-left: 14rem;
  box-sizing: border-box;
}
/* header 不需要额外 padding-left（main 已有） */
.main-content > header {
  padding-left: 1.5rem;
}
.content-wrap {
  max-width: 72rem;
  margin-left: auto; margin-right: auto;
  padding: 1.5rem;
}

/* 平板：缩小 sidebar */
@media (max-width: 1024px) {
  .sidebar-fixed { width: 12rem; }
  .main-content { padding-left: 12rem; }
}

/* 手机：隐藏 sidebar，main 全宽居中 */
@media (max-width: 768px) {
  .sidebar-fixed { display: none; }
  .main-content { padding-left: 0; }
  .main-content > header { padding-left: 1.5rem; }
  .content-wrap { padding: 1rem; max-width: 100%; }
  .grid { gap: 1rem !important; }
  .card { padding: 1rem !important; }
}

/* 超小屏：进一步压缩 */
@media (max-width: 480px) {
  .content-wrap { padding: .75rem; }
  .text-3xl { font-size: 24px; }
}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-border-strong); }

/* ---------- 工具类 ---------- */
.hidden { display: none; }
.block  { display: block; }
.inline-block { display: inline-block; }
.w-full { width: 100%; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-6xl { max-width: 72rem; }
.max-w-xs  { max-width: 20rem; }
.max-w-md  { max-width: 28rem; }
.h-12 { height: 3rem; }
.h-full { height: 100%; }
.min-h-0 { min-height: 0; }

/* ---------- SweetAlert2 覆盖 ---------- */
.swal2-container { z-index: 99999 !important; }
.swal2-container.swal2-top-end,
.swal2-container.swal2-top-right {
  top: 1rem !important; right: 1rem !important; left: auto !important; bottom: auto !important;
}
.swal2-popup.swal-toast-popup {
  font-size: 13px; padding: .875em 1.25em;
  border-radius: 12px; border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text);
  box-shadow: 0 10px 40px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04);
  margin: 0 0 .5rem 0;
}
.swal2-popup.swal-toast-popup .swal2-title {
  font-size: 13px; font-weight: 500; margin: 0; padding: 0; text-align: left; color: var(--color-text);
}
.swal2-popup.swal-toast-popup .swal2-icon { display: none; }
.swal2-popup.swal-toast-popup::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; border-radius: 12px 0 0 12px;
}
.swal2-popup.swal-toast-popup.swal2-icon-success::before { background: var(--color-success); }
.swal2-popup.swal-toast-popup.swal2-icon-error::before   { background: var(--color-danger); }
.swal2-popup.swal-toast-popup.swal2-icon-warning::before { background: var(--color-warn); }
.swal2-popup.swal-toast-popup.swal2-icon-info::before    { background: var(--color-accent); }

.swal2-popup.swal-modal-popup {
  border-radius: 16px; border: none;
  box-shadow: 0 20px 60px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.04);
  padding: 1.75em 2em;
}
.swal2-popup.swal-modal-popup .swal2-title {
  font-size: 16px; font-weight: 600; color: var(--color-text);
}
.swal2-popup.swal-modal-popup .swal2-html-container {
  font-size: 13px; color: var(--color-muted);
}
.swal2-popup.swal-modal-popup .swal2-actions {
  justify-content: flex-end; gap: .5em;
}
.swal2-popup.swal-modal-popup .swal2-close {
  font-size: 1.5em; color: var(--color-subtle);
}
.swal2-popup.swal-modal-popup .swal2-icon.swal2-success { border-color: var(--color-success); color: var(--color-success); }
.swal2-popup.swal-modal-popup .swal2-icon.swal2-error   { border-color: var(--color-danger);  color: var(--color-danger); }
.swal2-popup.swal-modal-popup .swal2-icon.swal2-warning { border-color: var(--color-warn);    color: var(--color-warn); }
.swal2-popup.swal-modal-popup .swal2-icon.swal2-info    { border-color: var(--color-accent);  color: var(--color-accent); }

/* swal 内嵌 HTML 排版 */
.swal-html-block {
  background: var(--color-bg-sunken); border-radius: 8px; padding: .75em;
  font-family: "JetBrains Mono", monospace; font-size: 12px;
}
.swal-html-row {
  display: grid; grid-template-columns: 1fr auto; gap: .5em;
  padding: .25em 0;
}
.swal-html-key { color: var(--color-muted); }
.swal-html-val { color: var(--color-text); }
.swal-html-val.danger { color: var(--color-danger); }
.swal-html-meta {
  margin-top: .75em; padding-top: .5em; border-top: 1px solid var(--color-border);
  font-size: 11px; color: var(--color-subtle);
}