/* ==========================================================================
   在线取件页 — 视觉覆盖层
   --------------------------------------------------------------------------
   严格约束：本文件只允许出现颜色、背景、边框色、圆角、阴影、字体色。
   不写 display / flex / grid / width / height / padding / margin / position /
   gap / overflow / font-size，因此页面版式与尺寸 100% 由原版 mail.css 决定。
   本页不加载 atlas.css，变量在此自带，避免全局字号/标题样式干扰原版尺寸。
   ========================================================================== */

:root {
  --a-ink:        #16181d;
  --a-ink-2:      #39404b;
  --a-ink-3:      #6b7482;
  --a-ink-4:      #9aa3b0;
  --a-bg:         #f4f5f6;
  --a-surface:    #ffffff;
  --a-surface-2:  #f8f9fa;
  --a-line:       #d9dde3;
  --a-line-2:     #e7eaee;
  --a-accent:     #0b6b53;
  --a-accent-2:   #0e8a6a;
  --a-accent-bg:  #e7f2ee;
  --a-accent-line:#b7ddd2;
  --a-warn:       #a15c07;
  --a-warn-bg:    #fbf1e2;
  --a-danger:     #b42318;
  --a-danger-bg:  #fbeae8;
  --a-r:          2px;
}

/* 只换底色，字号完全沿用原版 */
body {
  background: var(--a-bg) !important;
  background-image: none !important;
}

/* ------------------------------------------------------------ 左侧栏 */
.sidebar {
  background: var(--a-surface) !important;
  box-shadow: none !important;
  border-right: 1px solid var(--a-line) !important;
}
.logo {
  border-bottom-color: var(--a-line-2) !important;
}
.logo-icon {
  background: var(--a-ink) !important;
  background-image: none !important;
  border-radius: var(--a-r) !important;
  color: #fff !important;
}
.logo-text h1 { color: var(--a-ink) !important; }
.logo-text p { color: var(--a-ink-3) !important; }
.section-title { color: var(--a-ink-2) !important; }

.form-group label { color: var(--a-ink-2) !important; }
.form-group input,
.form-group select {
  border-color: var(--a-line) !important;
  border-radius: var(--a-r) !important;
  background: var(--a-surface) !important;
  color: var(--a-ink) !important;
}
.form-group input:focus,
.form-group select:focus {
  border-color: var(--a-accent) !important;
  box-shadow: 0 0 0 3px rgba(11, 107, 83, .10) !important;
}

/* 上传区 */
.upload-area {
  border-color: var(--a-line) !important;
  border-radius: var(--a-r) !important;
  background: var(--a-surface-2) !important;
}
.upload-area:hover {
  border-color: var(--a-accent) !important;
  background: var(--a-accent-bg) !important;
}
.upload-text { color: var(--a-ink) !important; }
.upload-hint { color: var(--a-ink-4) !important; }

/* 开关 */
.switch input:checked + .slider,
.slider.active { background: var(--a-accent) !important; }
.slider { background: #cfd5dd !important; }
.switch-label, .switch-hint { color: var(--a-ink-3) !important; }

/* ------------------------------------------------------------ 右侧主体 */
.main-content { background: var(--a-bg) !important; }

.announcement-bar {
  background: var(--a-accent-bg) !important;
  background-image: none !important;
  border-color: var(--a-accent-line) !important;
  border-left-color: var(--a-accent) !important;
  border-radius: var(--a-r) !important;
  color: var(--a-ink-2) !important;
  box-shadow: none !important;
}
.announcement-content { color: var(--a-ink-2) !important; }
.announcement-close { color: var(--a-ink-3) !important; background: transparent !important; }
.announcement-close:hover { color: var(--a-danger) !important; }

/* 统计卡片 */
.stat-item {
  background: var(--a-surface) !important;
  background-image: none !important;
  border: 1px solid var(--a-line) !important;
  border-radius: var(--a-r) !important;
  box-shadow: none !important;
}
.stat-value { color: var(--a-ink) !important; }
.stat-label { color: var(--a-ink-3) !important; }

/* 工具栏 */
.toolbar {
  background: var(--a-surface) !important;
  background-image: none !important;
  border: 1px solid var(--a-line) !important;
  border-radius: var(--a-r) !important;
  box-shadow: none !important;
}
.search-box input {
  border-color: var(--a-line) !important;
  border-radius: var(--a-r) !important;
  background: var(--a-surface) !important;
  color: var(--a-ink) !important;
}
.search-box input:focus {
  border-color: var(--a-accent) !important;
  box-shadow: 0 0 0 3px rgba(11, 107, 83, .10) !important;
}

/* 按钮 */
.btn {
  border-radius: var(--a-r) !important;
  border-color: var(--a-line) !important;
  font-weight: 500 !important;
}
.btn-primary {
  background: var(--a-accent) !important;
  background-image: none !important;
  border-color: var(--a-accent) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.btn-primary:hover {
  background: var(--a-accent-2) !important;
  border-color: var(--a-accent-2) !important;
}
.btn-secondary {
  background: var(--a-surface) !important;
  background-image: none !important;
  border-color: var(--a-line) !important;
  color: var(--a-ink) !important;
}
.btn-secondary:hover { border-color: var(--a-ink-4) !important; }
.btn-danger {
  background: var(--a-surface) !important;
  background-image: none !important;
  border-color: #e8c4c0 !important;
  color: var(--a-danger) !important;
}
.btn-danger:hover { background: var(--a-danger-bg) !important; }

/* 表格：只改表头配色与分隔线 */
.table-card {
  border: 1px solid var(--a-line) !important;
  border-radius: var(--a-r) !important;
  box-shadow: none !important;
  background: var(--a-surface) !important;
}
.table-card thead th {
  background: var(--a-ink) !important;
  background-image: none !important;
  color: #e8ebf0 !important;
  border-color: #2b3038 !important;
}
.table-card tbody td {
  border-color: var(--a-line-2) !important;
  color: var(--a-ink) !important;
}
.table-card tbody tr:hover td { background: #f3f7f5 !important; }
.email-cell, .token-cell { color: var(--a-ink) !important; }

/* 行内操作按钮 */
.action-btn {
  border-radius: var(--a-r) !important;
  border-color: var(--a-line) !important;
  background: var(--a-surface) !important;
  background-image: none !important;
}
.action-btn-view { color: var(--a-accent) !important; border-color: var(--a-accent-line) !important; }
.action-btn-view:hover { background: var(--a-accent-bg) !important; }
.action-btn-delete { color: var(--a-danger) !important; border-color: #e8c4c0 !important; }
.action-btn-delete:hover { background: var(--a-danger-bg) !important; }

/* 标签页 */
.tabs {
  background: var(--a-surface-2) !important;
  border-bottom-color: var(--a-line) !important;
}
.tab { color: var(--a-ink-3) !important; }
.tab:hover { color: var(--a-ink) !important; }
.tab.active {
  color: var(--a-accent) !important;
  border-bottom-color: var(--a-accent) !important;
}
.tab-badge {
  background: var(--a-surface) !important;
  border-color: var(--a-line) !important;
  color: var(--a-ink-3) !important;
}
.tab.active .tab-badge {
  background: var(--a-accent-bg) !important;
  border-color: var(--a-accent-line) !important;
  color: var(--a-accent) !important;
}

/* 邮件列表 */
.email-item {
  background: var(--a-surface) !important;
  border-color: var(--a-line) !important;
  border-radius: var(--a-r) !important;
  box-shadow: none !important;
}
.email-subject { color: var(--a-ink) !important; }
.email-from, .email-date, .email-preview { color: var(--a-ink-3) !important; }
.empty-state, .empty-state-icon { color: var(--a-ink-3) !important; }

/* 弹窗 */
.modal-overlay { background: rgba(22, 24, 29, .55) !important; }
.modal {
  background: var(--a-surface) !important;
  border: 1px solid var(--a-line) !important;
  border-top: 3px solid var(--a-accent) !important;
  border-radius: var(--a-r) !important;
  box-shadow: 0 24px 60px rgba(22, 24, 29, .30) !important;
}
.modal-header { border-bottom-color: var(--a-line-2) !important; }
.modal-title { color: var(--a-ink) !important; }
.modal-close { color: var(--a-ink-3) !important; background: transparent !important; }
.modal-close:hover { color: var(--a-danger) !important; }
.modal-footer { background: var(--a-surface-2) !important; border-top-color: var(--a-line-2) !important; }
.modal input, .modal select, .modal textarea, .paste-textarea {
  border-color: var(--a-line) !important;
  border-radius: var(--a-r) !important;
  background: var(--a-surface) !important;
  color: var(--a-ink) !important;
}

/* 分页 / 日志 / 进度 */
.page-btn {
  border-color: var(--a-line) !important;
  border-radius: var(--a-r) !important;
  background: var(--a-surface) !important;
  color: var(--a-ink) !important;
}
.page-btn:hover { border-color: var(--a-accent) !important; color: var(--a-accent) !important; }
.log-area {
  background: #fafbfc !important;
  border-color: var(--a-line) !important;
  border-left-color: var(--a-ink) !important;
  border-radius: var(--a-r) !important;
  color: var(--a-ink-2) !important;
}
.log-time { color: var(--a-ink-4) !important; }

/* 去掉遗留的彩色阴影与渐变 */
.sidebar, .toolbar, .table-card, .modal, .stat-item, .email-item, .btn {
  background-image: none !important;
}