/* ==========================================================================
   UI 8.0 — 明亮现代（浅色）
   --------------------------------------------------------------------------
   保留上一版的结构、圆角、层次与动效，仅把配色从深色切换为明亮浅色：
     · 浅灰蓝底 + 白色卡片 + 多层柔和阴影
     · 统计卡白底 + 彩色顶条 + 彩色数字，保持色彩识别
     · 侧栏白色 + 选中渐变胶囊；顶栏白色毛玻璃
     · 表格白底、浅灰表头、hover 浅靛蓝
   不变项：DOM、id、脚本、接口、侧栏 248px / 取件栏 320px、操作路径
   ========================================================================== */

:root {
  --u-bg:          #f5f6fb;
  --u-bg-2:        #eef1f9;
  --u-surface:     #ffffff;
  --u-surface-2:   #fafbfe;
  --u-surface-3:   #f2f4fa;
  --u-ink:         #0f172a;
  --u-ink-2:       #475569;
  --u-ink-3:       #94a3b8;
  --u-ink-4:       #cbd5e1;
  --u-line:        #e6e9f2;
  --u-line-2:      #eff2f8;
  --u-accent:      #4f46e5;
  --u-accent-2:    #6366f1;
  --u-accent-3:    #4338ca;
  --u-accent-bg:   #eef2ff;
  --u-accent-line: #c7d2fe;
  --u-ok:          #059669;
  --u-ok-bg:       #ecfdf5;
  --u-danger:      #dc2626;
  --u-danger-bg:   #fef2f2;
  --u-warn:        #d97706;
  --u-warn-bg:     #fffbeb;
  --u-r-lg:        16px;
  --u-r:           12px;
  --u-r-sm:        9px;
  --u-h:           34px;
  --u-h-sm:        29px;
  --u-shadow-1:    0 1px 2px rgba(16, 24, 40, .04), 0 2px 6px rgba(16, 24, 40, .04);
  --u-shadow-2:    0 6px 18px rgba(16, 24, 40, .08), 0 2px 6px rgba(16, 24, 40, .04);
  --u-shadow-pop:  0 24px 56px rgba(16, 24, 40, .16);

  --a-ink:         #0f172a;
  --a-ink-2:       #475569;
  --a-ink-3:       #94a3b8;
  --a-ink-4:       #cbd5e1;
  --a-bg:          #f5f6fb;
  --a-surface:     #ffffff;
  --a-surface-2:   #fafbfe;
  --a-line:        #e6e9f2;
  --a-line-2:      #eff2f8;
  --a-accent:      #4f46e5;
  --a-accent-2:    #6366f1;
  --a-accent-bg:   #eef2ff;
  --a-accent-line: #c7d2fe;
  --a-danger:      #dc2626;
  --a-danger-bg:   #fef2f2;
  --a-warn:        #d97706;
  --a-warn-bg:     #fffbeb;
  --a-r:           12px;
}

body {
  background:
    radial-gradient(1100px 520px at 8% -12%, #ede9fe 0%, transparent 58%),
    radial-gradient(900px 460px at 96% -6%, #e0f2fe 0%, transparent 55%),
    var(--u-bg) !important;
  background-attachment: fixed !important;
  color: var(--u-ink) !important;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   布局（尺寸不变）
   ========================================================================== */
body > aside.sidebar {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: auto !important;
  width: 248px !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 18px 14px !important;
  overflow-y: auto !important;
  z-index: 20;
}
body > aside.sidebar .nav { display: flex !important; flex-direction: column !important; gap: 3px; }
body > aside.sidebar .nav-group { display: block !important; }
body > aside.sidebar .nav-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 1px !important;
  height: auto !important;
  min-height: 46px !important;
  padding: 6px 11px !important;
}
body > aside.sidebar .nav-item small { display: block !important; line-height: 1.3 !important; }
body > aside.sidebar .sidebar-foot { margin: auto 0 0 0 !important; }
.main { margin-left: 248px !important; }

.layout > aside.sidebar {
  width: 248px !important;
  flex: 0 0 248px !important;
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 16px 12px !important;
  overflow-y: auto !important;
}
.layout > aside.sidebar .nav { display: flex !important; flex-direction: column !important; gap: 3px; }
.layout > aside.sidebar .nav-item { height: 34px !important; min-height: 34px !important; }

.container { display: flex !important; }
.container > .sidebar {
  position: static !important;
  width: 320px !important;
  flex: 0 0 320px !important;
  height: auto !important;
  display: block !important;
  padding: 24px !important;
  overflow-y: auto !important;
}
.container > .sidebar .section { display: block !important; margin-bottom: 24px !important; }
.container > .sidebar .logo { grid-column: auto !important; }

/* ==========================================================================
   侧栏
   ========================================================================== */
.sidebar {
  background: rgba(255, 255, 255, .86) !important;
  background-image: none !important;
  color: var(--u-ink-2) !important;
  border-right: 1px solid var(--u-line) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px) saturate(150%);
}
.brand {
  color: var(--u-ink) !important;
  border-bottom: 1px solid var(--u-line-2) !important;
  padding-bottom: 16px !important;
}
.brand-icon, .logo-icon {
  background: linear-gradient(135deg, #6366f1, #a855f7) !important;
  background-image: linear-gradient(135deg, #6366f1, #a855f7) !important;
  color: #fff !important;
  border-radius: var(--u-r-sm) !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, .35) !important;
}
.logo-text h1, .sidebar-title { color: var(--u-ink) !important; font-weight: 650 !important; }
.logo-text p, .sidebar-subtitle { color: var(--u-ink-3) !important; }

.nav-group {
  color: var(--u-ink-3) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  padding: 16px 11px 6px !important;
}
.nav-item {
  position: relative;
  border: 1px solid transparent !important;
  border-radius: var(--u-r-sm) !important;
  background: transparent !important;
  color: var(--u-ink-2) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transition: background .18s ease, color .18s ease, border-color .18s ease !important;
}
.nav-item:hover {
  background: var(--u-surface-3) !important;
  color: var(--u-ink) !important;
}
.nav-item.active {
  background: linear-gradient(90deg, #eef2ff 0%, #f8f9ff 100%) !important;
  border-color: var(--u-accent-line) !important;
  color: var(--u-accent) !important;
  font-weight: 650 !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, .10) !important;
}
.nav-item.active::before {
  content: "" !important;
  position: absolute !important;
  left: -1px !important;
  top: 10px !important;
  bottom: 10px !important;
  width: 3px !important;
  border-radius: 0 3px 3px 0 !important;
  background: linear-gradient(180deg, #818cf8, #4f46e5) !important;
}
.nav-item small { color: var(--u-ink-3) !important; font-size: 11px !important; font-weight: 400 !important; }
.nav-item.active small { color: #6366f1 !important; }
.nav-icon { color: var(--u-ink-3) !important; }
.nav-item.active .nav-icon { color: var(--u-accent) !important; }
.sidebar-foot {
  color: var(--u-ink-3) !important;
  border-top: 1px solid var(--u-line-2) !important;
  font-size: 11.5px !important;
}

/* ==========================================================================
   顶栏
   ========================================================================== */
.topbar {
  background: rgba(255, 255, 255, .82) !important;
  backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--u-line) !important;
  padding: 16px 26px !important;
}
.topbar h1, .topbar h2, #viewTitle {
  color: var(--u-ink) !important;
  font-size: 18px !important;
  font-weight: 650 !important;
  letter-spacing: -.02em !important;
}
.topbar p, #viewHint { color: var(--u-ink-3) !important; font-size: 12.5px !important; }
.main, .main-content, .view, .layout > .main { background: transparent !important; }
.view { padding: 20px 26px 46px !important; }
h1, h2, h3, h4 { color: var(--u-ink) !important; letter-spacing: -.015em !important; }
h2 { font-size: 15px !important; font-weight: 650 !important; }
p { color: var(--u-ink-2) !important; }

/* ==========================================================================
   卡片
   ========================================================================== */
.panel, .table-card, .table-wrap, .import-box, .mini-log, .switch-card,
.status-list, .login-card, .modal, .api-section, .code-section,
.email-item, .db-tools, .action-strip, .metric {
  background: var(--u-surface) !important;
  background-image: none !important;
  border: 1px solid var(--u-line) !important;
  border-radius: var(--u-r) !important;
  box-shadow: var(--u-shadow-1) !important;
}
.panel { padding: 18px 20px !important; }
.section-head {
  border-bottom: 1px solid var(--u-line-2) !important;
  padding-bottom: 13px !important;
  margin-bottom: 16px !important;
}
.section-head h2 { margin: 0 !important; }
.section-head p { margin: 4px 0 0 !important; font-size: 12px !important; color: var(--u-ink-3) !important; }

/* 统计卡：白底 + 彩色顶条 + 彩色数字 */
.db-header { display: flex; gap: 14px; flex-wrap: wrap; }
.db-card {
  flex: 1 1 168px;
  position: relative;
  overflow: hidden;
  padding: 16px 18px !important;
  background: var(--u-surface) !important;
  border: 1px solid var(--u-line) !important;
  border-radius: var(--u-r) !important;
  box-shadow: var(--u-shadow-1) !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}
.db-card::before {
  content: "" !important;
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
}
.db-card:nth-child(1)::before { background: linear-gradient(90deg, #6366f1, #a855f7); }
.db-card:nth-child(2)::before { background: linear-gradient(90deg, #06b6d4, #22d3ee); }
.db-card:nth-child(3)::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.db-card:nth-child(4)::before { background: linear-gradient(90deg, #ec4899, #f472b6); }
.db-card:hover { transform: translateY(-2px); box-shadow: var(--u-shadow-2) !important; }
.db-card span { color: var(--u-ink-3) !important; font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: .03em !important; }
.db-card strong { font-size: 26px !important; font-weight: 700 !important; letter-spacing: -.03em !important; font-variant-numeric: tabular-nums !important; }
.db-card:nth-child(1) strong { color: #4f46e5 !important; }
.db-card:nth-child(2) strong { color: #0891b2 !important; }
.db-card:nth-child(3) strong { color: #b45309 !important; }
.db-card:nth-child(4) strong { color: #be185d !important; }

/* 取件页统计条 */
.stats-bar { display: flex; gap: 12px; flex-wrap: wrap; }
.stat-item {
  flex: 1 1 150px;
  padding: 14px 16px !important;
  background: var(--u-surface) !important;
  border: 1px solid var(--u-line) !important;
  border-radius: var(--u-r) !important;
  box-shadow: var(--u-shadow-1) !important;
  position: relative;
  overflow: hidden;
}
.stat-item::before {
  content: "" !important;
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
}
.stat-item:nth-child(1)::before { background: #6366f1; }
.stat-item:nth-child(2)::before { background: #06b6d4; }
.stat-item:nth-child(3)::before { background: #f59e0b; }
.stat-label { color: var(--u-ink-3) !important; font-size: 11.5px !important; }
.stat-value { color: var(--u-ink) !important; font-size: 23px !important; font-weight: 700 !important; letter-spacing: -.03em !important; font-variant-numeric: tabular-nums !important; }

/* ==========================================================================
   按钮
   ========================================================================== */
button, .btn, .ghost, .page-btn, .action-btn, .primary, .warn {
  height: var(--u-h) !important;
  min-height: var(--u-h) !important;
  padding: 0 14px !important;
  border: 1px solid var(--u-line) !important;
  border-radius: var(--u-r-sm) !important;
  background: var(--u-surface) !important;
  color: var(--u-ink) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: var(--u-shadow-1) !important;
  transition: background .16s, border-color .16s, color .16s, transform .06s, box-shadow .16s !important;
}
button:hover, .btn:hover, .ghost:hover, .page-btn:hover, .action-btn:hover {
  background: var(--u-surface-2) !important;
  border-color: var(--u-ink-4) !important;
  color: var(--u-ink) !important;
  box-shadow: var(--u-shadow-2) !important;
}
button:active, .btn:active, .action-btn:active { transform: translateY(1px); }
button[type="submit"], .btn-primary, .btn.primary, .primary, .action-btn-view {
  background: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%) !important;
  border-color: #4f46e5 !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(79, 70, 229, .28), inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}
button[type="submit"]:hover, .btn-primary:hover, .action-btn-view:hover {
  background: linear-gradient(180deg, #7c7ff5 0%, #6366f1 100%) !important;
  border-color: #6366f1 !important;
  box-shadow: 0 6px 18px rgba(99, 102, 241, .38) !important;
  color: #fff !important;
}
.warn, .action-btn-delete, .btn-danger {
  color: var(--u-danger) !important;
  border-color: #fecaca !important;
  background: var(--u-surface) !important;
  box-shadow: none !important;
}
.warn:hover, .action-btn-delete:hover, .btn-danger:hover {
  background: var(--u-danger-bg) !important;
  border-color: var(--u-danger) !important;
  color: var(--u-danger) !important;
}
.toolbar.small button, .toolbar small button, .mini-log + button,
.toolbar .ghost, .pager .ghost {
  height: var(--u-h-sm) !important;
  min-height: var(--u-h-sm) !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  box-shadow: none !important;
}

/* ==========================================================================
   表单
   ========================================================================== */
input, select, textarea, .search-box input, .paste-textarea {
  height: var(--u-h) !important;
  min-height: var(--u-h) !important;
  padding: 0 11px !important;
  border: 1px solid var(--u-line) !important;
  border-radius: var(--u-r-sm) !important;
  background: var(--u-surface) !important;
  color: var(--u-ink) !important;
  font-size: 13px !important;
  box-shadow: inset 0 1px 2px rgba(16, 24, 40, .03) !important;
  outline: none !important;
  transition: border-color .16s, box-shadow .16s !important;
}
textarea, .paste-textarea, .import-box {
  height: auto !important;
  min-height: 120px !important;
  padding: 10px 11px !important;
  line-height: 1.65 !important;
  font-family: var(--a-mono, Consolas, monospace) !important;
  font-size: 12px !important;
}
input::placeholder, textarea::placeholder { color: var(--u-ink-3) !important; }
input:hover, select:hover, textarea:hover { border-color: var(--u-ink-4) !important; }
input:focus, select:focus, textarea:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .14) !important;
}
label { color: var(--u-ink-2) !important; font-size: 12px !important; font-weight: 500 !important; }

/* ==========================================================================
   表格
   ========================================================================== */
table, .db-table, .params-table, .table-card table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: 13px !important;
  background: transparent !important;
}
thead th, .db-table thead th, .params-table thead th, .table-card thead th {
  background: var(--u-surface-2) !important;
  color: var(--u-ink-3) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  padding: 11px 14px !important;
  border-bottom: 1px solid var(--u-line) !important;
  border-right: none !important;
  white-space: nowrap !important;
  position: sticky !important;
  top: 0;
  z-index: 2;
}
tbody td, .db-table td, .params-table td, .table-card td {
  padding: 13px 14px !important;
  border-bottom: 1px solid var(--u-line-2) !important;
  border-right: none !important;
  color: var(--u-ink) !important;
  vertical-align: middle !important;
  font-variant-numeric: tabular-nums !important;
}
tbody tr { transition: background-color .14s ease !important; }
tbody tr:hover td { background: #f6f7ff !important; }
tbody tr:last-child td { border-bottom: none !important; }
tbody td:first-child { font-weight: 500; }
.table-wrap { overflow-x: auto !important; border-radius: var(--u-r) !important; }
.email-cell, .mono, .cell-clip {
  color: var(--u-ink-2) !important;
  font-family: var(--a-mono, Consolas, monospace) !important;
  font-size: 12px !important;
}

/* ==========================================================================
   标签
   ========================================================================== */
.pill, .tag, .method-tag, .required, .optional, .param-type, .tab-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px;
  height: 22px !important;
  padding: 0 8px !important;
  border: 1px solid var(--u-line) !important;
  border-radius: 7px !important;
  background: var(--u-surface-2) !important;
  color: var(--u-ink-2) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.pill.ok, .tag--ok, .tag.ok { background: var(--u-ok-bg) !important; color: var(--u-ok) !important; border-color: #a7f3d0 !important; }
.pill.bad, .tag--bad, .tag.bad { background: var(--u-danger-bg) !important; color: var(--u-danger) !important; border-color: #fecaca !important; }
.pill.warn, .tag--warn { background: var(--u-warn-bg) !important; color: var(--u-warn) !important; border-color: #fde68a !important; }
.method-get, .tag--get { background: var(--u-accent-bg) !important; color: var(--u-accent) !important; border-color: var(--u-accent-line) !important; }
.method-post, .tag--post { background: #f5f3ff !important; color: #7c3aed !important; border-color: #ddd6fe !important; }
.optional { color: var(--u-ink-3) !important; }
.required { background: var(--u-danger-bg) !important; color: var(--u-danger) !important; border-color: #fecaca !important; }

/* ==========================================================================
   弹窗
   ========================================================================== */
.modal-overlay {
  background: rgba(15, 23, 42, .38) !important;
  backdrop-filter: blur(3px);
  animation: u-fade .18s ease;
}
.modal, .modal-box {
  background: var(--u-surface) !important;
  border: 1px solid var(--u-line) !important;
  border-radius: var(--u-r-lg) !important;
  box-shadow: var(--u-shadow-pop) !important;
  animation: u-rise .2s ease;
}
.modal-header, .modal-box__head { border-bottom: 1px solid var(--u-line-2) !important; padding: 15px 18px !important; }
.modal-title, .modal-box__head h3 { color: var(--u-ink) !important; font-size: 14px !important; font-weight: 650 !important; }
.modal-close { color: var(--u-ink-3) !important; background: transparent !important; border: none !important; }
.modal-close:hover { color: var(--u-danger) !important; }
.modal-body { padding: 18px !important; }
.modal-footer, .modal-box__foot { background: var(--u-surface-2) !important; border-top: 1px solid var(--u-line-2) !important; }

@keyframes u-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes u-rise { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

/* ==========================================================================
   提示 / 代码 / 日志
   ========================================================================== */
.tip-box, .announcement-bar, .notice {
  background: var(--u-accent-bg) !important;
  border: 1px solid var(--u-accent-line) !important;
  border-left: 3px solid #6366f1 !important;
  border-radius: var(--u-r-sm) !important;
  color: #4338ca !important;
}
.result, .mini-log, .log-area, .code-block, .code-content, .response-example, .api-preview {
  background: var(--u-surface-2) !important;
  border: 1px solid var(--u-line) !important;
  border-radius: var(--u-r-sm) !important;
  color: #334155 !important;
  font-family: var(--a-mono, Consolas, monospace) !important;
  font-size: 12px !important;
  line-height: 1.75 !important;
}
.code-header { background: var(--u-surface-3) !important; border-bottom: 1px solid var(--u-line) !important; }
.code-tab { color: var(--u-ink-3) !important; border-radius: var(--u-r-sm) !important; }
.code-tab.active {
  color: var(--u-accent) !important;
  background: var(--u-accent-bg) !important;
  border-bottom-color: #6366f1 !important;
}
.code-keyword { color: #4f46e5 !important; }
.code-string { color: #047857 !important; }
.code-function { color: #7c3aed !important; }
.code-number { color: #b45309 !important; }
.code-comment { color: var(--u-ink-3) !important; }

/* 开关 */
.switch span, .slider { background: var(--u-ink-4) !important; transition: background .18s !important; }
.switch input:checked + span, .switch input:checked + .slider,
.slider.active { background: linear-gradient(90deg, #6366f1, #818cf8) !important; }

/* ==========================================================================
   在线取件
   ========================================================================== */
.toolbar, .filterbar, .action-strip, .db-tools {
  background: var(--u-surface) !important;
  border: 1px solid var(--u-line) !important;
  border-radius: var(--u-r) !important;
  padding: 13px 15px !important;
  box-shadow: var(--u-shadow-1) !important;
}
.container > .sidebar .section-title { color: var(--u-ink-2) !important; font-size: 12.5px !important; font-weight: 650 !important; }
.container > .sidebar { border-right: 1px solid var(--u-line) !important; }
.upload-area {
  background: var(--u-surface-2) !important;
  border: 1.5px dashed var(--u-ink-4) !important;
  border-radius: var(--u-r-sm) !important;
  transition: border-color .16s, background-color .16s !important;
}
.upload-area:hover {
  border-color: #6366f1 !important;
  background: var(--u-accent-bg) !important;
}
.upload-text { color: var(--u-ink) !important; font-weight: 600 !important; }
.upload-hint { color: var(--u-ink-3) !important; }
.tabs { background: var(--u-surface) !important; border-bottom: 1px solid var(--u-line) !important; }
.tab { color: var(--u-ink-2) !important; transition: color .16s !important; }
.tab.active { color: var(--u-accent) !important; border-bottom-color: #6366f1 !important; font-weight: 650 !important; }
.email-subject { color: var(--u-ink) !important; font-weight: 600 !important; }
.email-from, .email-date, .email-preview { color: var(--u-ink-3) !important; font-size: 12px !important; }
.pagination .page-btn { background: var(--u-surface) !important; }

/* ==========================================================================
   接口文档
   ========================================================================== */
.layout > aside.sidebar { background: rgba(255, 255, 255, .88) !important; border-right: 1px solid var(--u-line) !important; backdrop-filter: blur(12px); }
.layout > aside.sidebar .nav-item { color: var(--u-ink-2) !important; border-radius: var(--u-r-sm) !important; }
.layout > aside.sidebar .nav-item:hover { background: var(--u-surface-3) !important; }
.layout > aside.sidebar .nav-item.active {
  background: linear-gradient(90deg, #eef2ff, #f8f9ff) !important;
  color: var(--u-accent) !important;
  border-color: var(--u-accent-line) !important;
}
.endpoint {
  background: var(--u-surface-2) !important;
  border: 1px solid var(--u-line) !important;
  border-left: 3px solid #6366f1 !important;
  border-radius: var(--u-r-sm) !important;
  color: #4338ca !important;
  font-family: var(--a-mono, Consolas, monospace) !important;
  padding: 10px 12px !important;
}
.api-title { font-size: 15px !important; font-weight: 650 !important; }
.api-desc { color: var(--u-ink-2) !important; font-size: 12.5px !important; line-height: 1.75 !important; }
.api-icon {
  background: var(--u-accent-bg) !important;
  border: 1px solid var(--u-accent-line) !important;
  border-radius: var(--u-r-sm) !important;
}
.api-section { padding: 20px 22px !important; }

/* ==========================================================================
   登录页
   ========================================================================== */
body:has(.login-card) {
  background:
    radial-gradient(760px 460px at 18% -8%, #e7e4ff 0%, transparent 62%),
    radial-gradient(680px 420px at 88% 6%, #dff3ff 0%, transparent 58%),
    #f6f7fc !important;
}
.login-card {
  background: var(--u-surface) !important;
  border: 1px solid var(--u-line) !important;
  border-radius: var(--u-r-lg) !important;
  box-shadow: 0 24px 60px rgba(16, 24, 40, .12), 0 2px 6px rgba(16, 24, 40, .04) !important;
  padding: 32px !important;
}
.login-card .logo { color: var(--u-ink) !important; font-weight: 650 !important; }

/* ==========================================================================
   首页 / 邮件查看
   ========================================================================== */
.rail { background: #0f172a !important; border-right: 1px solid #1e293b !important; }
.rail__mark {
  background: linear-gradient(135deg, #6366f1, #a855f7) !important;
  border-radius: var(--u-r-sm) !important;
  box-shadow: 0 4px 14px rgba(99, 102, 241, .4) !important;
}
.rail__item { color: #94a3b8 !important; }
.rail__item:hover { background: rgba(255, 255, 255, .08) !important; color: #fff !important; }
.rail__item.is-active { background: rgba(99, 102, 241, .18) !important; color: #c7d2fe !important; }
.rail__item.is-active::before { background: #818cf8 !important; }
.commandbar {
  background: rgba(255, 255, 255, .85) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--u-line) !important;
}
.card {
  background: var(--u-surface) !important;
  border: 1px solid var(--u-line) !important;
  border-radius: var(--u-r) !important;
  box-shadow: var(--u-shadow-1) !important;
}
.metric-box {
  background: var(--u-surface) !important;
  border: 1px solid var(--u-line) !important;
  border-radius: var(--u-r) !important;
  box-shadow: var(--u-shadow-1) !important;
}
.metric-box--accent { border-left: 3px solid #6366f1 !important; }
.metric-box__v { color: var(--u-ink) !important; font-weight: 700 !important; }
.tabs { background: var(--u-surface) !important; border-bottom: 1px solid var(--u-line) !important; }
.tabs__item { color: var(--u-ink-3) !important; }
.tabs__item.is-active { color: var(--u-accent) !important; border-bottom-color: #6366f1 !important; }
.btn--primary {
  background: linear-gradient(180deg, #6366f1, #4f46e5) !important;
  border-color: #4f46e5 !important;
  box-shadow: 0 2px 8px rgba(79, 70, 229, .28) !important;
}
.btn--primary:hover { background: linear-gradient(180deg, #7c7ff5, #6366f1) !important; }
.site-header { background: rgba(255, 255, 255, .85) !important; backdrop-filter: blur(12px); border-bottom: 1px solid var(--u-line) !important; }
.site-nav a { color: var(--u-ink-2) !important; }
.site-nav a:hover { background: var(--u-surface-3) !important; color: var(--u-ink) !important; }
.site-nav a.is-current { background: var(--u-accent-bg) !important; color: var(--u-accent) !important; }
.brandmark { color: var(--u-ink) !important; }
.brandmark__glyph {
  background: linear-gradient(135deg, #6366f1, #a855f7) !important;
  border-radius: var(--u-r-sm) !important;
}
.top-strip { background: #0f172a !important; color: #94a3b8 !important; }
.masthead h1 { color: var(--u-ink) !important; }
.masthead p { color: var(--u-ink-2) !important; }
.eyebrow, .masthead h1 em, .a-link { color: var(--u-accent) !important; }
.section { border-bottom: 1px solid var(--u-line) !important; }
.section--tint { background: rgba(255, 255, 255, .6) !important; }
.capability-grid { background: var(--u-line) !important; border-color: var(--u-line) !important; }
.capability { background: var(--u-surface) !important; }
.capability h3 { color: var(--u-ink) !important; }
.capability p { color: var(--u-ink-3) !important; }
.console-card { background: var(--u-surface) !important; border: 1px solid var(--u-line) !important; border-radius: var(--u-r) !important; box-shadow: var(--u-shadow-2) !important; }
.console-card__bar { background: var(--u-surface-2) !important; border-bottom: 1px solid var(--u-line) !important; }
.console-card .code { background: transparent !important; }
.spec-table th { color: var(--u-ink-3) !important; border-bottom-color: var(--u-line) !important; }
.spec-table td { color: var(--u-ink-2) !important; border-bottom-color: var(--u-line-2) !important; }
.site-footer { background: #0f172a !important; }
.site-footer__inner { color: #94a3b8 !important; }
.site-footer a { color: #cbd5e1 !important; }

/* 滚动条 */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 5px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: content-box; }

@media (max-width: 900px) {
  .view, .main-content, .layout > .main { padding: 14px !important; }
}


/* ================= 文档步骤条：按通道着色 ================= */
.step-row {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px;
  border-left: 4px solid #6366f1;
  background: linear-gradient(90deg, rgba(99, 102, 241, .07), transparent 72%);
  border-radius: 0 10px 10px 0;
  text-decoration: none; color: inherit;
  transition: background .18s ease;
}
.step-row:hover { background: linear-gradient(90deg, rgba(99, 102, 241, .14), transparent 72%); }
.step-row > div > div:first-child { font-weight: 600; color: var(--u-ink); }
.step-badge {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  color: #fff; font-weight: 700; font-size: 17px;
  box-shadow: 0 8px 18px rgba(99, 102, 241, .30);
}
.step-note {
  margin-top: 24px; padding: 16px 18px;
  border-left: 4px solid #f59e0b;
  background: linear-gradient(90deg, rgba(245, 158, 11, .10), transparent 72%);
  border-radius: 0 10px 10px 0;
}
#imap-must-read .step-row {
  border-left-color: #0891b2;
  background: linear-gradient(90deg, rgba(8, 145, 178, .08), transparent 72%);
}
#imap-must-read .step-badge {
  background: linear-gradient(135deg, #0891b2, #06b6d4);
  box-shadow: 0 8px 18px rgba(8, 145, 178, .30);
}
#graph-must-read .step-row {
  border-left-color: #2563eb;
  background: linear-gradient(90deg, rgba(37, 99, 235, .08), transparent 72%);
}
#graph-must-read .step-badge {
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  box-shadow: 0 8px 18px rgba(37, 99, 235, .30);
}

/* ================= 接口调试按钮 + 右侧抽屉 ================= */
.debug-btn {
  margin-left: 8px;
  height: 24px; padding: 0 10px;
  border: 1px solid #c7d2fe; border-radius: 6px;
  background: #eef2ff; color: #4f46e5;
  font-size: 11.5px; font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.debug-btn:hover { background: #e0e7ff; border-color: #a5b4fc; color: #4338ca; }

.debug-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 430px; max-width: 94vw;
  background: #fff;
  border-left: 1px solid var(--u-line);
  box-shadow: -18px 0 48px rgba(16, 24, 40, .16);
  transform: translateX(102%);
  transition: transform .26s cubic-bezier(.4, 0, .2, 1);
  z-index: 200;
  display: flex; flex-direction: column;
}
.debug-drawer.is-open { transform: none; }
.debug-drawer__head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--u-line-2);
}
.debug-drawer__head strong { font-size: 14px; color: var(--u-ink); font-weight: 650; }
.debug-method {
  font-family: var(--a-mono, Consolas, monospace);
  font-size: 10.5px; font-weight: 700;
  padding: 3px 7px; border-radius: 5px;
}
.debug-method.get { background: #eef2ff; color: #4f46e5; border: 1px solid #c7d2fe; }
.debug-method.post { background: #f5f3ff; color: #7c3aed; border: 1px solid #ddd6fe; }
.debug-close {
  margin-left: auto;
  width: 26px; height: 26px;
  border: 1px solid var(--u-line); border-radius: 7px;
  background: #fff; color: var(--u-ink-3);
  cursor: pointer; line-height: 1;
}
.debug-close:hover { color: #dc2626; border-color: #fecaca; }

.debug-path {
  padding: 10px 16px;
  font-family: var(--a-mono, Consolas, monospace);
  font-size: 11.5px; color: #4338ca;
  background: #fafbfe;
  border-bottom: 1px solid var(--u-line-2);
  word-break: break-all;
}
.debug-fields {
  padding: 14px 16px;
  display: grid; gap: 10px;
  overflow-y: auto;
  flex: 0 1 auto;
}
.debug-field { display: grid; gap: 4px; }
.debug-field > span {
  font-size: 10.5px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--u-ink-3);
}
.debug-field input, .debug-field select {
  width: 100%; height: 32px;
  padding: 0 10px;
  border: 1px solid var(--u-line); border-radius: 8px;
  background: #fff; color: var(--u-ink);
  font-size: 12.5px; outline: none;
}
.debug-field input:focus, .debug-field select:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .14);
}

.debug-actions { display: flex; gap: 8px; padding: 0 16px 14px; }
.debug-send {
  flex: 1; height: 34px;
  border: 1px solid #4f46e5; border-radius: 9px;
  background: linear-gradient(180deg, #6366f1, #4f46e5);
  color: #fff; font-weight: 600; cursor: pointer;
  box-shadow: 0 2px 8px rgba(79, 70, 229, .28);
}
.debug-send:hover { background: linear-gradient(180deg, #7c7ff5, #6366f1); }
.debug-send:disabled { opacity: .65; cursor: progress; }
.debug-clear {
  height: 34px; padding: 0 14px;
  border: 1px solid var(--u-line); border-radius: 9px;
  background: #fff; color: var(--u-ink-2); cursor: pointer;
}

.debug-resp {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--u-line-2);
  background: #fafbfe;
}
.debug-meta {
  display: flex; gap: 12px; flex-wrap: wrap;
  padding: 9px 16px;
  font-size: 11.5px; color: var(--u-ink-2);
  border-bottom: 1px solid var(--u-line-2);
  font-family: var(--a-mono, Consolas, monospace);
}
.debug-meta .ok { color: #059669; font-weight: 700; }
.debug-meta .bad { color: #dc2626; font-weight: 700; }
.debug-body {
  margin: 0; padding: 12px 16px;
  flex: 1; overflow: auto;
  font-size: 11.5px; line-height: 1.7;
  color: #334155; white-space: pre-wrap; word-break: break-all;
  font-family: var(--a-mono, Consolas, monospace);
}
@media (max-width: 720px) {
  .debug-drawer { width: 100%; }
}


/* 代码示例栏右侧的「在线调试」按钮 */
.code-header { flex-wrap: wrap; }
.debug-btn--code {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 27px;
  padding: 0 12px;
  border: 1px solid #c7d2fe;
  border-radius: 7px;
  background: #ffffff;
  color: #4f46e5;
  font-size: 11.5px;
  font-weight: 650;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(79, 70, 229, .12);
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.debug-btn--code::before {
  content: "⚡";
  font-size: 11px;
  line-height: 1;
}
.debug-btn--code:hover {
  background: #eef2ff;
  border-color: #a5b4fc;
  color: #4338ca;
  box-shadow: 0 2px 8px rgba(79, 70, 229, .18);
}


/* 调试面板改为右侧分屏，挤压文档而不是覆盖 */
.layout { transition: margin-right .28s cubic-bezier(.4, 0, .2, 1); }
body.debug-open .debug-drawer { transform: none; }
body.debug-open .layout { margin-right: 520px; }
.debug-drawer { width: 520px; }
@media (max-width: 1100px) {
  body.debug-open .layout { margin-right: 0; }
  .debug-drawer { width: 100%; }
}


/* ==========================================================================
   移动端适配（平板 ≤900px / 手机 ≤640px）
   原则：侧栏改为顶部横向导航，内容全宽，表格横向滚动，弹窗全宽
   ========================================================================== */
@media (max-width: 900px) {

  /* 管理后台：固定侧栏 → 顶部横向导航 */
  body > aside.sidebar {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--u-line) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
  body > aside.sidebar .brand {
    margin: 0 6px 0 0 !important;
    padding: 0 !important;
    border: none !important;
    flex: none;
  }
  body > aside.sidebar .brand .logo-text p { display: none !important; }
  body > aside.sidebar .nav {
    flex-direction: row !important;
    gap: 4px !important;
    flex: 1;
    overflow-x: auto;
  }
  body > aside.sidebar .nav-group { display: none !important; }
  body > aside.sidebar .nav-item {
    flex: none !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    flex-direction: row !important;
    align-items: center !important;
    white-space: nowrap !important;
  }
  body > aside.sidebar .nav-item small { display: none !important; }
  body > aside.sidebar .sidebar-foot { display: none !important; }
  .main { margin-left: 0 !important; }
  .topbar { position: static !important; padding: 12px 14px !important; }
  .view { padding: 14px !important; }

  /* 在线取件：左栏 → 顶部 */
  .container { flex-direction: column !important; }
  .container > .sidebar {
    width: 100% !important;
    flex: none !important;
    padding: 14px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--u-line) !important;
  }
  .main-content { padding: 14px !important; }

  /* 接口文档：左目录 → 顶部横向 */
  .layout { flex-direction: column !important; }
  .layout > aside.sidebar {
    width: 100% !important;
    flex: none !important;
    height: auto !important;
    position: static !important;
    padding: 8px 12px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--u-line) !important;
  }
  .layout > aside.sidebar .sidebar-header { padding: 0 0 6px !important; }
  .layout > aside.sidebar .nav {
    flex-direction: row !important;
    gap: 4px !important;
    overflow-x: auto !important;
  }
  .layout > aside.sidebar .nav-item { white-space: nowrap !important; flex: none !important; }
  .layout > .main { padding: 14px !important; }

  /* 调试面板：全屏，不再分屏挤压 */
  .debug-drawer { width: 100% !important; max-width: 100vw !important; }
  body.debug-open .layout { margin-right: 0 !important; }

  /* 表格：横向滚动，保持表格布局不塌 */
  .table-wrap, .table-card, .api-section { overflow-x: auto !important; }
  .table-card table, .db-table, .params-table { min-width: 620px; }

  /* 弹窗 / 登录 */
  .modal, .modal-box { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; }
  .login-card { width: 100% !important; max-width: 420px !important; padding: 24px !important; }
  .debug-fields { grid-template-columns: 1fr !important; }

  /* 邮件查看：双栏 → 单栏 */
  #viewerGrid { grid-template-columns: 1fr !important; }
  #detailFrame { height: 46vh !important; }

  /* 首页 */
  .masthead { grid-template-columns: 1fr !important; gap: 24px !important; padding: 32px 0 !important; }
  .masthead h1 { font-size: 30px !important; }
  .capability-grid { grid-template-columns: 1fr !important; }
  .site-nav { display: none !important; }
  .site-header__inner { height: auto !important; padding: 10px 16px !important; flex-wrap: wrap; gap: 10px; }
  .spec-table { display: block; overflow-x: auto; white-space: nowrap; }
}

@media (max-width: 640px) {
  .view, .main-content, .layout > .main { padding: 10px !important; }

  /* 统计卡单列 */
  .stats-bar, .db-header { flex-direction: column !important; }
  .stat-item, .db-card { flex: 1 1 auto !important; width: 100% !important; }
  .grid-3, .metrics { grid-template-columns: 1fr !important; }

  .section-head { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
  .toolbar, .filterbar, .action-strip, .btn-row { flex-wrap: wrap !important; }
  .pager { flex-wrap: wrap; gap: 6px; }

  /* 输入框 16px，避免 iOS 聚焦自动放大 */
  input, select, textarea { font-size: 16px !important; }

  /* 文档步骤条压缩 */
  .step-row { padding: 14px 12px !important; gap: 12px !important; }
  .step-badge { width: 34px !important; height: 34px !important; font-size: 15px !important; }
  .step-note { padding: 12px 14px !important; }

  /* 调试面板细节 */
  .debug-drawer__head { padding: 12px !important; }
  .debug-path { font-size: 11px !important; }
  .debug-body { font-size: 11px !important; }

  /* 代码块横向滚动 */
  .code-block, .code-content { overflow-x: auto !important; }
  .code-block pre, pre.code { white-space: pre !important; }

  /* 首页 */
  .masthead h1 { font-size: 25px !important; }
  .masthead__foot { flex-wrap: wrap; gap: 14px; }
  .site-header .btn-row { margin-left: 0 !important; }
  .site-footer__inner { flex-direction: column; gap: 14px; }
  .site-footer__meta { margin-left: 0 !important; text-align: left !important; }

  /* 邮件查看列表高度收敛 */
  #mailList { max-height: 42vh !important; }
}