/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --primary: #2f7bd9;
  --primary-dark: #1e5bb5;
  --primary-light: #e8f2fd;
  --success: #16a34a;
  --success-light: #dcfce7;
  --danger: #dc2626;
  --danger-light: #fee2e2;
  --warning: #f59e0b;
  --warning-light: #fef3c7;
  --wechat: #07c160;
  --bg: #f0f4f8;
  --bg-card: #ffffff;
  --bg-sidebar: #3b82bf;
  --bg-sidebar-hover: #4a90cc;
  --bg-sidebar-active: #2f7bd9;
  --bg-input: #ffffff;
  --text-primary: #333333;
  --text-secondary: #555555;
  --text-tertiary: #888888;
  --border: #d0d7de;
  --border-dark: #b4bcc4;
  --radius: 4px;
  --radius-sm: 3px;
  --shadow: 0 1px 2px rgba(0,0,0,0.08);
  --shadow-md: 0 2px 6px rgba(0,0,0,0.1);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.12);
  --sidebar-width: 180px;
  --topbar-height: 86px;
  --brand-bar-height: 50px;
  --nav-bar-height: 36px;
  --header-bg: #2f7bd9;
  --header-dark: #1e5bb5;
  --tab-active: #ffffff;
  --tab-hover: #3b82bf;
}

html { font-size: 14px; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--text-primary);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link-color, var(--primary)); text-decoration: none; }
a:hover { color: var(--primary-dark); }

/* ===== Auth Pages ===== */
.auth-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

.auth-container { width: 100%; max-width: 420px; }

.auth-card {
  background: var(--bg-card);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.auth-header { text-align: center; margin-bottom: 28px; }
.auth-logo { color: var(--primary); margin-bottom: 12px; display: flex; justify-content: center; }
.auth-logo img { max-width: 220px; height: auto; display: block; }
/* 隐藏品牌Logo时：登录页仅显示大字站点标题 */
.auth-logo.auth-logo-text-only + .auth-title { font-size: 32px; font-weight: 800; letter-spacing: 2px; color: var(--primary); }
.auth-title { font-size: 24px; font-weight: 700; color: var(--text-primary); }
.auth-subtitle { font-size: 14px; color: var(--text-tertiary); margin-top: 6px; }

.auth-form .form-group { margin-bottom: 18px; }

.auth-divider {
  text-align: center;
  margin: 24px 0;
  position: relative;
  color: var(--text-tertiary);
  font-size: 13px;
}
.auth-divider::before {
  content: '';
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  background: var(--border);
}
.auth-divider span { background: var(--bg-card); padding: 0 16px; position: relative; }

.auth-footer { text-align: center; margin-top: 20px; font-size: 13px; }

/* ===== Forms ===== */
.form-group { margin-bottom: 16px; }
.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.form-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: var(--bg-input);
  color: var(--text-primary);
  transition: all 0.2s;
  outline: none;
}
.form-input:focus {
  border-color: var(--primary);
  background: white;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
.form-input::placeholder { color: var(--text-tertiary); }
textarea.form-input { resize: vertical; min-height: 60px; }
select.form-input { cursor: pointer; }
.form-input-readonly {
  background: var(--bg-hover, #f1f5f9);
  color: var(--text-tertiary, #94a3b8);
  cursor: not-allowed;
  border-style: dashed;
}

.input-wrapper { position: relative; }
.input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
}
.input-wrapper .form-input { padding-left: 40px; }

.form-hint { font-size: 12px; color: var(--text-tertiary); margin-top: 4px; }
.form-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px; }

/* 角色管理：按一级标签分组的页面级权限勾选 */
.perm-groups { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.perm-group { border: 1px solid var(--border-color, #e5e7eb); border-radius: 8px; padding: 12px 14px; background: #fafbfc; }
.perm-group-title { font-weight: 600; font-size: 13px; color: var(--text-secondary, #475569); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px dashed var(--border-color, #e5e7eb); }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 14px; }
.perm-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-primary, #1f2937); cursor: pointer; }
.perm-item input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary, #2f7bd9); cursor: pointer; }
.perm-top-tag { font-style: normal; font-size: 11px; color: var(--text-tertiary, #94a3b8); background: #eef1f5; padding: 1px 6px; border-radius: 4px; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary { background: var(--primary); color: var(--btn-text, #fff); }
.btn-primary:hover { background: var(--primary-dark); color: var(--btn-text, #fff); }
.btn-outline { background: white; border: 1.5px solid var(--border-dark); color: var(--text-secondary); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-wechat { background: var(--wechat); color: white; }
.btn-wechat:hover { background: #06ad56; color: white; }
.btn-mp { background: var(--wechat, #07c160); color: #fff; }
.btn-mp:hover { background: #06ad56; color: #fff; }
.btn-app { background: #16a34a; color: #fff; }
.btn-app:hover { background: #15803d; color: #fff; }
.auth-alt-logins { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }

/* ===== 小程序扫码登录面板 ===== */
.mp-scan-panel {
  margin-top: 16px;
  padding: 18px 16px;
  border: 1.5px dashed var(--primary);
  border-radius: 12px;
  background: var(--bg-card);
  text-align: center;
}
.mp-scan-title { font-size: 14px; font-weight: 600; color: var(--text-secondary); margin-bottom: 12px; }
.mp-qrcode {
  width: 180px; height: 180px;
  margin: 0 auto 10px;
  padding: 8px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  display: flex; align-items: center; justify-content: center;
}
.mp-qrcode img, .mp-qrcode canvas { display: block; }
.mp-scan-tip { font-size: 12px; color: var(--text-tertiary); margin-bottom: 10px; min-height: 18px; }
.mp-scan-back { margin-top: 12px; font-size: 13px; }
.mp-scan-back a { color: var(--primary); text-decoration: none; }
.mp-scan-back a:hover { text-decoration: underline; }
.auth-footer-icp { margin-top: 8px; font-size: 12px; color: var(--text-tertiary); }
.auth-footer-icp a { color: var(--text-tertiary); text-decoration: none; }
.auth-footer-icp a:hover { text-decoration: underline; }

.btn-block { width: 100%; justify-content: center; }
.btn-lg { padding: 12px 24px; font-size: 15px; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-default { background: white; border: 1.5px solid var(--border-dark); color: var(--text-secondary); }
.btn-default:hover { border-color: var(--primary); color: var(--primary); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ===== Logo preview & inline form ===== */
.logo-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  min-height: 56px;
  padding: 8px 12px;
  background: #f5f7fa;
  border: 1px dashed var(--border-dark);
  border-radius: var(--radius-sm);
}
.logo-preview-img { max-height: 48px; max-width: 220px; object-fit: contain; }
.inline-form { display: inline-block; margin: 0; }
.logo-upload-form { margin-top: 4px; }
.logo-reset-form { margin-top: 12px; }

/* ===== Alerts ===== */
.alert {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  margin-bottom: 16px;
}
.alert-error { background: var(--danger-light); color: #991b1b; }
.alert-success { background: var(--success-light); color: #166534; }
.alert-info { background: #e8f1fd; color: #1a56b8; }

/* ===== Admin Layout ===== */
.admin-body { display: flex; flex-direction: column; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-sidebar);
  height: 100vh;
  position: fixed;
  left: 0; top: 0;
  display: flex;
  flex-direction: column;
  z-index: 100;
  transition: transform 0.3s;
}
.sidebar.collapsed { transform: translateX(-100%); }

.sidebar-header {
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.logo-icon { color: #60a5fa; flex-shrink: 0; }
.logo-text { flex: 1; min-width: 0; }
.site-name { color: white; font-size: 15px; font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: 12px 8px; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--sidebar-text, #cbd5e1);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 2px;
  transition: all 0.2s;
}
.nav-item:hover { background: var(--bg-sidebar-hover); color: var(--sidebar-text, white); }
.nav-item.active { background: var(--bg-sidebar-active, var(--primary)); color: var(--btn-text, #fff); }
.nav-item svg { flex-shrink: 0; }

.sidebar-footer {
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  gap: 8px;
}
.user-info { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.user-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.user-avatar-sm { width: 28px; height: 28px; font-size: 12px; }
.user-details { flex: 1; min-width: 0; }
.user-name { color: white; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-role { color: #94a3b8; font-size: 11px; }
.logout-btn {
  padding: 8px;
  border-radius: var(--radius-sm);
  color: #94a3b8;
  transition: all 0.2s;
  flex-shrink: 0;
}
.logout-btn:hover { background: var(--danger); color: white; }

.main-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left 0.3s;
}
.main-content.expanded { margin-left: 0; }

.topbar {
  height: var(--topbar-height);
  background: white;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 50;
}
.sidebar-toggle {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-sm);
  display: flex;
}
.sidebar-toggle:hover { background: var(--bg); }
.page-title { font-size: 18px; font-weight: 700; flex: 1; }
.topbar-actions { display: flex; gap: 8px; }

.content { padding: 24px; flex: 1; }

/* ===== Cards ===== */
.card {
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  margin-bottom: 20px;
  overflow: hidden;
}
.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-title { font-size: 16px; font-weight: 700; }
.card-link { font-size: 13px; }
.card-body { padding: 20px; }
.card-badge { padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }

/* ===== Stats Grid ===== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.stat-card {
  background: white;
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  transition: transform 0.2s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stat-icon-blue { background: var(--primary-light); color: var(--primary); }
.stat-icon-green { background: var(--success-light); color: var(--success); }
.stat-icon-purple { background: #f3e8ff; color: #9333ea; }
.stat-icon-orange { background: #fff7ed; color: #ea580c; }
.stat-value { font-size: 28px; font-weight: 700; line-height: 1; }
.stat-label { font-size: 13px; color: var(--text-tertiary); margin-top: 4px; }

/* ===== Dashboard Row ===== */
.dashboard-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

/* ===== Tables ===== */
.data-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table th {
  text-align: left;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.data-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--bg); }
.text-muted { color: var(--text-tertiary); }

/* ===== Badges ===== */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.badge-blue { background: var(--primary-light); color: var(--primary-dark); }
.badge-green { background: var(--success-light); color: #166534; }
.badge-red { background: var(--danger-light); color: #991b1b; }
.badge-gray { background: #f1f5f9; color: #475569; }
/* 内置超级管理员专属标记（金色盾牌，明显区别于普通管理员红色徽章） */
.badge-super {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #92400e;
  border: 1px solid #f59e0b;
  font-weight: 600;
}

/* 分类公开/需登录开关（下载中心 + 知识库分类管理弹窗） */
.cat-public-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
}
.cat-public-toggle input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--primary);
  cursor: pointer;
  margin: 0;
}

/* 前台未登录提示条（下载中心/文档中心） */
.portal-guest-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0 4px;
  padding: 10px 16px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  color: var(--text-secondary);
  font-size: 13px;
  border: 1px dashed var(--primary, #3b82f6);
}
.portal-guest-hint svg { color: var(--primary, #3b82f6); }

/* ===== Action Buttons ===== */
.action-buttons { display: flex; gap: 4px; }
.btn-icon {
  background: none;
  border: none;
  padding: 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-tertiary);
  display: flex;
  transition: all 0.2s;
}
.btn-icon:hover { background: var(--bg); }
.btn-icon-edit:hover { background: var(--primary-light); color: var(--primary); }
.btn-icon-delete:hover { background: var(--danger-light); color: var(--danger); }
.btn-icon-disable:hover { background: var(--danger-light); color: var(--danger); }
.btn-icon-enable:hover { background: #dcfce7; color: #14532d; }
.btn-icon-download:hover { background: var(--success-light); color: var(--success); }

/* ===== Text Action Buttons（中文文字按钮）===== */
.btn-action {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-secondary);
  transition: all 0.15s;
  white-space: nowrap;
}
.btn-action:hover { filter: brightness(0.97); }
.btn-action-edit { color: var(--primary); border-color: var(--primary-light); background: var(--primary-light); }
.btn-action-edit:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-action-disable { color: var(--danger); border-color: var(--danger-light); background: var(--danger-light); }
.btn-action-disable:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-action-enable { color: #14532d; border-color: #bbf7d0; background: #dcfce7; }
.btn-action-enable:hover { background: #16a34a; color: #fff; border-color: #16a34a; }
.btn-action-delete { color: var(--danger); border-color: var(--danger-light); background: var(--danger-light); }
.btn-action-delete:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-action-kick { color: #9a3412; border-color: #fed7aa; background: #ffedd5; }
.btn-action-kick:hover { background: #ea580c; color: #fff; border-color: #ea580c; }
.btn-action-unbind { color: var(--text-tertiary); border-color: var(--border); background: var(--bg); }
.btn-action-unbind:hover { background: var(--text-tertiary); color: #fff; border-color: var(--text-tertiary); }
.action-protected { color: var(--text-tertiary); font-size: 12px; padding: 4px 2px; }

/* ===== Category Name Cell ===== */
.category-name { display: flex; align-items: center; }

/* ===== File Grid ===== */
.file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.file-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all 0.2s;
}
.file-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-dark); }
.file-card-header {
  padding: 14px 14px 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.file-card-actions { display: flex; gap: 2px; }
.file-card-body { padding: 14px; }
.file-card-name {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-card-meta { display: flex; gap: 10px; font-size: 12px; color: var(--text-tertiary); margin-bottom: 4px; }
.file-card-info { display: flex; gap: 10px; font-size: 12px; color: var(--text-tertiary); }
.file-card-desc { font-size: 12px; color: var(--text-secondary); margin-top: 6px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.file-card-stats { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-tertiary); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }

/* ===== File Icons ===== */
.file-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}
.file-icon-large { width: 48px; height: 48px; font-size: 11px; border-radius: 10px; }
.file-icon-pdf { background: #ef4444; }
.file-icon-doc { background: #2563eb; }
.file-icon-xls { background: #16a34a; }
.file-icon-ppt { background: #ea580c; }
.file-icon-zip { background: #f59e0b; }
.file-icon-img { background: #8b5cf6; }
.file-icon-video { background: #ec4899; }
.file-icon-audio { background: #06b6d4; }
.file-icon-text { background: #64748b; }
.file-icon-exe { background: #475569; }
.file-icon-code { background: #0f172a; }
.file-icon-default { background: #94a3b8; }

/* ===== File List (Dashboard) ===== */
.file-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.file-list-item:last-child { border-bottom: none; }
.file-icon-wrapper { flex-shrink: 0; }
.file-list-info { flex: 1; min-width: 0; }
.file-list-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-list-meta { display: flex; gap: 10px; font-size: 12px; color: var(--text-tertiary); }
.file-list-actions { flex-shrink: 0; }

/* ===== Filter Bar ===== */
.filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.filter-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.filter-select { width: auto; min-width: 140px; }
.search-wrapper { position: relative; }
.search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-tertiary); }
.search-input { padding-left: 32px; width: 220px; }

/* ===== Page Actions ===== */
.page-actions { margin-bottom: 16px; display: flex; justify-content: flex-end; }

/* ===== Modal ===== */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal {
  background: white;
  border-radius: var(--radius);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-title { font-size: 17px; font-weight: 700; }
.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--text-tertiary);
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}
.modal-close:hover { background: var(--bg); }
.modal-body { padding: 20px; }
.modal-footer { display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px; }

/* ===== Upload Zone ===== */
.upload-zone {
  border: 2px dashed var(--border-dark);
  border-radius: var(--radius);
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--bg-input);
}
.upload-zone:hover, .upload-zone.dragover {
  border-color: var(--primary);
  background: var(--primary-light);
}
.upload-zone-content { color: var(--text-tertiary); }
.upload-zone-text { font-size: 15px; font-weight: 600; color: var(--text-secondary); margin-top: 8px; }
.upload-zone-hint { font-size: 13px; margin-top: 4px; }

.file-preview-list { margin-top: 12px; }
.file-preview-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  border: 1px solid var(--border);
}
.file-preview-icon {
  width: 36px; height: 36px;
  background: var(--primary);
  color: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.file-preview-info { flex: 1; min-width: 0; }
.file-preview-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-preview-size { font-size: 12px; color: var(--text-tertiary); }
.file-preview-remove {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--text-tertiary);
  padding: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.file-preview-remove:hover { background: var(--danger-light); color: var(--danger); }

/* ===== Upload Progress Bar ===== */
.upload-progress { margin-top: 14px; }
.upload-progress-track {
  height: 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.upload-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--primary), var(--primary-hover, var(--primary)));
  border-radius: 999px;
  transition: width 0.15s ease;
}
.upload-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 6px;
}
.upload-progress-meta #uploadProgressPct { font-weight: 700; color: var(--primary); }

/* ===== User Cell ===== */
.user-cell { display: flex; align-items: center; gap: 10px; }

/* ===== WeChat Bound ===== */
.wechat-bound { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.wechat-user-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--success-light);
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
}
.wechat-avatar-placeholder {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--wechat);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.wechat-nickname { font-weight: 600; }
.wechat-status { font-size: 12px; color: var(--text-tertiary); }

/* ===== Settings Layout ===== */
.settings-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.info-banner {
  display: flex;
  gap: 12px;
  padding: 14px;
  background: #eff6ff;
  border-radius: var(--radius-sm);
  margin: 16px 0;
  font-size: 13px;
  line-height: 1.8;
}
.info-banner svg { color: var(--primary); flex-shrink: 0; margin-top: 2px; }
.info-banner p { color: var(--text-secondary); }

/* ===== QR Code ===== */
.wechat-login-card { max-width: 380px; }
.wechat-icon-lg { color: var(--wechat); display: flex; justify-content: center; margin-bottom: 8px; }
.qr-container { display: flex; flex-direction: column; align-items: center; padding: 16px 0; }
.qr-code { border-radius: 12px; border: 1px solid var(--border); }
.qr-hint { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; color: var(--text-tertiary); }
.qr-placeholder { text-align: center; color: var(--text-tertiary); padding: 40px; }
.demo-notice {
  margin-top: 16px;
  padding: 14px;
  background: #fef3c7;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: #92400e;
  text-align: center;
}
.demo-badge {
  display: inline-block;
  padding: 2px 10px;
  background: #f59e0b;
  color: white;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;
}

/* ===== Storage Info ===== */
.storage-info { text-align: center; }
.storage-display { margin-bottom: 16px; }
.storage-number { font-size: 32px; font-weight: 700; color: var(--primary); }
.storage-label { font-size: 13px; color: var(--text-tertiary); }
.storage-bar { height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
.storage-bar-fill { height: 100%; background: linear-gradient(90deg, var(--primary), #60a5fa); border-radius: 4px; transition: width 0.5s; }
.storage-detail { font-size: 12px; color: var(--text-tertiary); }

/* ===== Profile ===== */
.profile-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.profile-info { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.profile-avatar-lg {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
}
.profile-name { font-size: 20px; font-weight: 700; }
.profile-username { font-size: 14px; color: var(--text-tertiary); margin: 2px 0; }
.profile-badges { display: flex; gap: 6px; margin-top: 6px; }
.profile-stats { border-top: 1px solid var(--border); padding-top: 16px; }
.profile-stat { margin-bottom: 8px; }
.profile-stat-value { font-size: 14px; font-weight: 600; }
.profile-stat-label { font-size: 12px; color: var(--text-tertiary); }
.wechat-bound-info { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--success-light); border-radius: var(--radius-sm); margin-bottom: 16px; }
.wechat-bound-name { font-weight: 600; }
.wechat-bound-status { font-size: 12px; color: #166534; }
.wechat-unbound { text-align: center; padding: 24px 0; }
.wechat-unbound-icon { color: var(--text-tertiary); display: flex; justify-content: center; margin-bottom: 8px; }

/* ===== Download Page ===== */
.download-body { background: var(--bg); }
.download-header { background: white; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; }
.download-header-content { max-width: 1200px; margin: 0 auto; padding: 0 24px; height: 56px; display: flex; align-items: center; justify-content: space-between; }
.download-logo { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--text-primary); }
.download-header-nav { display: flex; align-items: center; gap: 4px; }
.download-header-nav-item { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--text-secondary); text-decoration: none; transition: background .15s, color .15s; }
.download-header-nav-item:hover { background: var(--bg); color: var(--text-primary); }
.download-header-nav-item.active { background: var(--primary); color: #fff; }
.download-container { max-width: 1200px; margin: 0 auto; padding: 24px; display: grid; grid-template-columns: 240px 1fr; gap: 24px; }
.download-footer {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 24px 28px;
  text-align: center;
  font-size: 12px;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.download-footer a, .download-footer-icp { color: var(--text-tertiary); text-decoration: none; }
.download-footer a:hover { text-decoration: underline; }
.download-footer-sep { opacity: .5; }
.download-sidebar { position: sticky; top: 80px; align-self: start; }
.sidebar-section { background: white; border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; }
.sidebar-title { padding: 14px 16px; font-size: 13px; font-weight: 700; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); }
.category-nav { padding: 8px; }
.category-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 2px;
  transition: all 0.2s;
}
.category-item:hover { background: var(--bg); color: var(--primary); }
.category-item.active { background: var(--primary-light); color: var(--primary-dark); font-weight: 600; }
.category-count { margin-left: auto; background: var(--bg); padding: 1px 8px; border-radius: 10px; font-size: 11px; }
.category-item.active .category-count { background: white; }
.download-main { min-width: 0; min-height: 320px; }
.download-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 16px; flex-wrap: wrap; }
.download-section-title { font-size: 20px; font-weight: 700; }
.download-search { display: flex; gap: 8px; }
.download-file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.download-file-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  gap: 14px;
  transition: all 0.2s;
}
.download-file-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-dark); transform: translateY(-2px); }
.download-file-icon { width: 56px; height: 56px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: white; flex-shrink: 0; }
.download-file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.download-file-name { font-weight: 600; font-size: 15px; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.download-file-meta { display: flex; gap: 10px; font-size: 12px; color: var(--text-tertiary); margin-bottom: 4px; }
.download-file-desc { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.download-file-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.download-file-date { font-size: 12px; color: var(--text-tertiary); }

/* ===== 门户首页：轮播 Banner + 小工具军火库 ===== */
.portal-hero { max-width: 1200px; margin: 0 auto; padding: 20px 24px 0; }
.portal-hero-inner { display: grid; grid-template-columns: 1fr 240px; gap: 20px; align-items: stretch; }
/* 新布局：纵向堆叠（轮播大图 → 军火库横条 → 搜索框） */
.portal-hero-stacked { grid-template-columns: 1fr; gap: 16px; align-items: stretch; }
.portal-carousel { position: relative; border-radius: var(--radius); overflow: hidden; background: #000; min-height: 220px; aspect-ratio: 16 / 5; }
.portal-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.portal-slide.active { opacity: 1; }
.portal-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portal-slide a { display: block; width: 100%; height: 100%; }
.portal-slide-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 40px 20px 14px;
  background: linear-gradient(transparent, rgba(0,0,0,.62));
  color: #fff; font-size: 15px; font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
  pointer-events: none;
}
.portal-carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.25); color: #fff; border: none;
  font-size: 16px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s; z-index: 5;
}
.portal-carousel-arrow:hover { background: rgba(255,255,255,.45); }
.portal-carousel-prev { left: 12px; }
.portal-carousel-next { right: 12px; }
.portal-carousel-dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; gap: 6px; justify-content: center; z-index: 5; }
.portal-carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.5); cursor: pointer; transition: background .2s, width .2s; }
.portal-carousel-dot.active { background: #fff; width: 18px; border-radius: 4px; }
.portal-carousel-empty { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary-light), var(--bg)); color: var(--text-secondary); }
.portal-carousel-placeholder { text-align: center; }
.portal-carousel-placeholder svg { margin-bottom: 8px; opacity: .6; }
.portal-carousel-placeholder p { font-size: 18px; font-weight: 700; }

/* ===== 门户英雄区：左右两栏（轮播大图 | 军火库竖排 + 搜索框）===== */
.portal-hero-split {
  display: grid; grid-template-columns: 1fr 290px; gap: 18px; align-items: stretch;
}
.portal-hero-main { min-width: 0; display: flex; }
.portal-hero-main .portal-carousel { flex: 1; }
.portal-hero-side {
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
}

/* 小工具军火库：右侧竖排卡片 */
.portal-toolbox {
  background: white; border: 1px solid var(--border); border-radius: var(--radius);
  display: flex; flex-direction: column; overflow: hidden;
}
.portal-toolbox-title {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 16px; font-size: 14px; font-weight: 700;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff; white-space: nowrap; flex-shrink: 0;
}
.portal-toolbox-title svg { flex-shrink: 0; }
.portal-toolbox-list {
  padding: 8px; display: flex; flex-direction: column; gap: 4px;
}
.portal-toolbox-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 10px;
  color: var(--text-secondary); text-decoration: none; font-size: 14px;
  transition: background .15s, color .15s;
}
.portal-toolbox-item:hover { background: var(--bg); color: var(--primary); }
.portal-toolbox-icon {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--primary-light); color: var(--primary-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.portal-toolbox-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-toolbox-empty { padding: 16px; text-align: center; color: var(--text-tertiary); font-size: 13px; }

/* 搜索框：军火库正下方 */
.portal-search {
  display: flex; gap: 8px; align-items: center;
  background: white; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px 8px 8px 14px;
}
.portal-search .search-wrapper { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.portal-search .search-input { width: 100%; border: none; }
.portal-search .search-input:focus { outline: none; box-shadow: none; }

/* 文件分类：顶部横贯整行（分类横向铺满全宽，内容区在下方）
   注意：必须用 .download-container.download-container-wide（双 class 提升特异性），
   否则会被文件末尾 2615 行的 .download-container { grid-template-columns: 200px 1fr } 覆盖，
   导致分类栏被挤回左侧侧栏。 */
.download-container.download-container-wide { grid-template-columns: 1fr; }
.cat-bar {
  background: white; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; width: 100%;
}
/* 下载中心/知识库 切换横条：位于分类卡片之上 */
.cat-bar-top {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.cat-bar-top-link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 18px; border-radius: 999px; font-size: 14px;
  color: var(--text-secondary); text-decoration: none;
  border: 1px solid var(--border); background: white;
  transition: all .15s; white-space: nowrap;
}
.cat-bar-top-link:hover { color: var(--primary-dark); border-color: var(--primary); background: var(--primary-light); }
.cat-bar-top-link.active { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; }
.cat-bar-pills {
  display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center;
}
.cat-bar-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: 999px;
  background: var(--bg); color: var(--text-secondary);
  font-size: 13px; text-decoration: none;
  border: 1px solid var(--border);
  transition: all .15s; white-space: nowrap;
}
.cat-bar-pill:hover { background: var(--primary-light); color: var(--primary-dark); border-color: var(--primary); }
.cat-bar-pill.active { background: var(--primary); color: #fff; font-weight: 600; border-color: var(--primary); }
.cat-bar-pill[data-level="1"] { margin-left: 2px; }
.cat-bar-count { background: rgba(0,0,0,.08); padding: 0 8px; border-radius: 10px; font-size: 11px; }
.cat-bar-pill.active .cat-bar-count { background: rgba(255,255,255,.25); }

@media (max-width: 860px) {
  .portal-hero-inner { grid-template-columns: 1fr; }
  .portal-hero-stacked { grid-template-columns: 1fr; }
  .portal-hero-split { grid-template-columns: 1fr; }
  .portal-toolbox-list { flex-direction: row; flex-wrap: wrap; }
  .portal-toolbox-item { flex: 1 1 40%; }
  .portal-carousel { aspect-ratio: 16 / 9; }
}

/* ===== Error Page ===== */
.error-card { text-align: center; padding: 60px 40px; }
.error-code { font-size: 72px; font-weight: 800; color: var(--primary); line-height: 1; }
.error-message { font-size: 20px; font-weight: 600; margin: 12px 0; }
.error-detail { font-size: 14px; color: var(--text-tertiary); margin-bottom: 20px; }
.error-actions { display: flex; gap: 12px; justify-content: center; }

/* ===== Empty State ===== */
.empty-state { text-align: center; padding: 48px 20px; color: var(--text-tertiary); }
.empty-state svg { margin-bottom: 12px; }
.empty-state p { margin-bottom: 16px; font-size: 15px; }

/* ===== Spinner ===== */
.spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Cafe Credentials ===== */
.password-input-wrap { position: relative; display: flex; align-items: center; }
.password-input-wrap .form-input { padding-right: 60px; }
.password-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--primary); cursor: pointer;
  font-size: 12px; padding: 2px 6px; border-radius: 4px;
}
.password-toggle:hover { background: var(--bg-hover); }

.cafe-expiry-summary {
  display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px;
}
.cafe-expiry-summary-item {
  flex: 1; min-width: 150px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.cafe-expiry-summary-item.cafe-expire-overdue { border-color: var(--danger); background: rgba(239,68,68,0.04); }
.cafe-expiry-summary-item.cafe-expire-urgent { border-color: var(--warning); background: rgba(245,158,11,0.04); }
.cafe-expiry-summary-item.cafe-expire-soon { border-color: var(--warning); }
.cafe-expiry-summary-label { font-size: 12px; color: var(--text-tertiary); }
.cafe-expiry-summary-date { font-size: 14px; font-weight: 600; color: var(--text-primary); }

.cafe-credentials-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px; margin-bottom: 20px;
}
.cafe-credential-card { margin-bottom: 0; }
.cafe-credential-card .card-header { padding: 12px 16px; }
.cafe-credential-card .card-title { font-size: 15px; display: flex; align-items: center; gap: 6px; }
.cafe-credential-card .card-body { padding: 12px 16px; }

.cred-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0; border-bottom: 1px solid var(--border-light);
  font-size: 13px;
}
.cred-row:last-child { border-bottom: none; }
.cred-label { color: var(--text-tertiary); min-width: 50px; }
.cred-value { font-weight: 500; color: var(--text-primary); text-align: right; display: flex; align-items: center; gap: 6px; }
.cred-secret { font-family: monospace; letter-spacing: 1px; }
.cred-toggle { font-size: 12px; padding: 2px 6px; }

.badge-orange { background: rgba(245,158,11,0.12); color: #d97706; }

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.collapsed { transform: translateX(0); }
  .main-content { margin-left: 0; }
  .main-content.expanded { margin-left: var(--sidebar-width); }
  .dashboard-row, .settings-layout, .profile-layout { grid-template-columns: 1fr; }
  .cafe-credentials-grid { grid-template-columns: 1fr; }
  .cafe-expiry-summary { flex-direction: column; }
  .download-container { grid-template-columns: 1fr; }
  .download-sidebar { position: static; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-form { flex-direction: column; }
  .search-input { width: 100%; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .auth-card { padding: 28px 20px; }
  .notes-layout { grid-template-columns: 1fr !important; }
  .notes-sidebar { position: static !important; }
  .notes-grid { grid-template-columns: 1fr !important; }
  .form-row { grid-template-columns: 1fr !important; }
}

/* ===== Notes / Memos ===== */
.notes-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.notes-filter-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.notes-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
}
.notes-sidebar {
  position: sticky;
  top: 80px;
  align-self: start;
}
.notes-filter-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.notes-filter-title {
  padding: 14px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
}
.notes-filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  color: var(--text-secondary);
  font-size: 14px;
  border-bottom: 1px solid var(--border);
  transition: all 0.2s;
}
.notes-filter-item:last-child { border-bottom: none; }
.notes-filter-item:hover { background: var(--bg); color: var(--primary); }
.notes-filter-item.active { background: var(--primary-light); color: var(--primary-dark); font-weight: 600; }
.notes-filter-item svg { flex-shrink: 0; }
.notes-filter-count {
  margin-left: auto;
  background: var(--bg);
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  color: var(--text-tertiary);
}
.notes-filter-item.active .notes-filter-count { background: white; }

.notes-main { min-width: 0; }
.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

/* Note Card */
.note-card {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: white;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.2s;
  box-shadow: var(--shadow);
}
.note-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Note Colors */
.note-color-default { border-top: 4px solid #94a3b8; }
.note-color-blue { border-top: 4px solid #3b82f6; background: #f0f7ff; }
.note-color-green { border-top: 4px solid #22c55e; background: #f0fdf4; }
.note-color-yellow { border-top: 4px solid #eab308; background: #fefce8; }
.note-color-red { border-top: 4px solid #ef4444; background: #fef2f2; }
.note-color-purple { border-top: 4px solid #a855f7; background: #faf5ff; }
.note-color-pink { border-top: 4px solid #ec4899; background: #fdf2f8; }

.note-card-header {
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.note-card-pin { display: flex; align-items: center; }
.note-pin-btn {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--text-tertiary);
  border-radius: var(--radius-sm);
  display: flex;
  transition: all 0.2s;
}
.note-pin-btn:hover { background: var(--bg); color: var(--warning); }
.note-pin-btn.pinned { color: var(--warning); }
.note-card-actions { display: flex; gap: 2px; }

.note-card-body {
  flex: 1;
  padding: 0 14px 10px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.note-card-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.note-card-content {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
}

.note-card-footer {
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-tertiary);
}
.note-card-author {
  display: flex;
  align-items: center;
  gap: 6px;
}
.note-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.note-card-date { font-size: 11px; }
.note-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}
.note-badge-shared {
  background: var(--primary-light);
  color: var(--primary-dark);
}
.note-badge-category {
  background: #eef2ff;
  color: #4338ca;
}

/* ===== 知识库富媒体查看（公开知识库） ===== */
.note-view-container { max-width: 860px; margin: 0 auto; }
.note-view-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; font-size: 12px; color: var(--text-tertiary); }
.note-view-author { font-weight: 600; color: var(--text-secondary); }
.note-view-content { line-height: 1.9; font-size: 15px; color: var(--text-primary); word-break: break-word; }
.note-view-content p { margin: 0 0 0.75em; }
.note-view-content p:last-child { margin-bottom: 0; }
.note-view-content img { max-width: 100%; border-radius: var(--radius); margin: 8px 0; }
.note-view-content video, .note-view-content audio { max-width: 100%; margin: 8px 0; border-radius: var(--radius); }
.note-view-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-top: 18px; }
.note-view-media-item { width: 100%; max-height: 480px; object-fit: contain; border-radius: var(--radius); background: #000; }
.note-view-audio { width: 100%; min-height: 44px; background: var(--bg); border-radius: var(--radius); }
.note-view-links { margin-top: 20px; }
.note-view-links-title { font-size: 13px; font-weight: 700; color: var(--text-secondary); margin-bottom: 8px; }
.note-view-links-list { display: flex; flex-wrap: wrap; gap: 8px; }
.note-link-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px; background: var(--bg);
  border: 1px solid var(--border); color: var(--text-secondary);
  font-size: 13px; text-decoration: none; transition: all .15s;
}
.note-link-chip:hover { background: var(--primary-light); color: var(--primary-dark); border-color: var(--primary); }

/* ===== 文档中心：内嵌查看区（同一页文档下方打开 + 返回列表） ===== */
.pub-note-detail { margin-top: 6px; }
.pub-note-detail-loading {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 60px 16px; color: var(--text-tertiary); font-size: 14px;
}
.pub-note-detail-spinner {
  width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--primary);
  animation: pub-note-spin .8s linear infinite;
}
@keyframes pub-note-spin { to { transform: rotate(360deg); } }
.pub-note-detail-error {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 48px 16px; color: var(--text-secondary); font-size: 15px;
  text-align: center;
}
/* 内嵌文档片段：宽度与上方元素（工具栏/文档网格）持平，去中心化缩窄 */
.note-view-container.pub-note-view-frag { max-width: none; }
/* 文档标题行：左标题 + 最右侧返回按钮 */
.pub-note-view-header { gap: 12px; flex-wrap: wrap; }
.pub-note-view-header .card-title {
  flex: 1 1 auto; min-width: 0; word-break: break-word;
  line-height: 1.5;
}
.pub-note-back-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--radius);
  font-size: 13px; font-weight: 600; cursor: pointer;
  background: var(--primary); color: #fff; border: 1px solid var(--primary);
  transition: all .15s; white-space: nowrap;
}
.pub-note-back-btn:hover { opacity: .9; }
/* 内嵌密码卡片：外框全宽持平，内容区限宽左对齐，避免输入框横跨整屏 */
.pub-note-password-card .pub-note-password-inner { max-width: 560px; }


/* Note Edit Page */
.note-edit-container { max-width: 800px; }
.note-textarea {
  min-height: 300px !important;
  font-family: inherit;
  line-height: 1.8;
  resize: vertical;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Color Picker */
.color-picker {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.color-option {
  cursor: pointer;
  display: flex;
  align-items: center;
}
.color-option input { display: none; }
.color-swatch {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 2px solid var(--border);
  transition: all 0.2s;
  display: block;
}
.color-option:hover .color-swatch { transform: scale(1.1); }
.color-option input:checked + .color-swatch {
  border-color: var(--text-primary);
  box-shadow: 0 0 0 2px white, 0 0 0 4px var(--primary);
}
.color-swatch-default { background: #ffffff; }
.color-swatch-blue { background: #3b82f6; }
.color-swatch-green { background: #22c55e; }
.color-swatch-yellow { background: #eab308; }
.color-swatch-red { background: #ef4444; }
.color-swatch-purple { background: #a855f7; }
.color-swatch-pink { background: #ec4899; }

/* Note Options */
.note-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.note-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.note-checkbox input { width: 16px; height: 16px; cursor: pointer; }
.note-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
}

/* Note Edit Meta */
.note-edit-meta {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 20px;
  font-size: 12px;
  color: var(--text-tertiary);
  flex-wrap: wrap;
}

/* Dashboard Note List */
.note-list { display: flex; flex-direction: column; gap: 8px; }
.note-list-item {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid #94a3b8;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: all 0.2s;
}
.note-list-item:hover { background: var(--bg); border-color: var(--border-dark); }
.note-list-item.note-color-blue { border-left-color: #3b82f6; }
.note-list-item.note-color-green { border-left-color: #22c55e; }
.note-list-item.note-color-yellow { border-left-color: #eab308; }
.note-list-item.note-color-red { border-left-color: #ef4444; }
.note-list-item.note-color-purple { border-left-color: #a855f7; }
.note-list-item.note-color-pink { border-left-color: #ec4899; }
.note-list-pin { flex-shrink: 0; width: 16px; }
.note-list-info { flex: 1; min-width: 0; }
.note-list-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-list-content { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.note-list-meta { display: flex; gap: 10px; font-size: 11px; color: var(--text-tertiary); align-items: center; }

/* ===== 文档中心：卡片式排列（与下载中心一致） ===== */
.pub-note-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.pub-note-card {
  display: flex;
  flex-direction: column;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s;
}
.pub-note-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-dark); transform: translateY(-2px); }
.pub-note-cover { aspect-ratio: 16 / 9; width: 100%; overflow: hidden; background: #f1f5f9; }
.pub-note-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pub-note-cover img.pub-note-cover-default { opacity: .9; }
.pub-note-cover-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: #cbd5e1; background: #f1f5f9;
}
.pub-note-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.pub-note-title { display: flex; align-items: center; gap: 4px; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.pub-note-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pub-note-flag { flex-shrink: 0; }
.pub-note-content { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.pub-note-meta { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--text-tertiary); flex-wrap: wrap; }
.pub-note-meta-text { white-space: nowrap; }
.pub-note-color-blue { border-top: 3px solid #3b82f6; }
.pub-note-color-green { border-top: 3px solid #22c55e; }
.pub-note-color-yellow { border-top: 3px solid #eab308; }
.pub-note-color-red { border-top: 3px solid #ef4444; }
.pub-note-color-purple { border-top: 3px solid #a855f7; }
.pub-note-color-pink { border-top: 3px solid #ec4899; }

/* ===== Cafe Management ===== */
.cafes-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.cafes-toolbar .filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  flex-wrap: wrap;
}
.cafes-toolbar .filter-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.filter-select {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: var(--bg-input);
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}
.filter-select:focus { border-color: var(--primary); }
.toolbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.cafe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}

.cafe-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.2s;
  box-shadow: var(--shadow);
}
.cafe-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.cafe-status-active { border-top: 3px solid var(--success); }
.cafe-status-expired { border-top: 3px solid var(--danger); }
.cafe-status-suspended { border-top: 3px solid var(--text-tertiary); }

.cafe-card-header { padding: 14px 16px 8px; }
.cafe-card-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 4px;
}
.cafe-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  text-decoration: none;
}
.cafe-card-title:hover { color: var(--primary); }
.cafe-status-badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.cafe-status-badge.cafe-status-active { background: var(--success-light); color: var(--success); }
.cafe-status-badge.cafe-status-expired { background: var(--danger-light); color: var(--danger); }
.cafe-status-badge.cafe-status-suspended { background: #f1f5f9; color: var(--text-tertiary); }
.cafe-status-badge.cafe-status-once { background: #eff6ff; color: #2563eb; }
.cafe-status-badge.cafe-status-terminated { background: var(--danger-light); color: var(--danger); }
.cafe-status-badge.cafe-status-default { background: #f1f5f9; color: var(--text-secondary); }
.cafe-group-tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  background: #eef2ff;
  color: #4f46e5;
  border: 1px solid #e0e7ff;
  white-space: nowrap;
}
.cafe-view-link { margin-left: 8px; font-size: 12px; color: var(--primary); text-decoration: none; font-weight: 500; }
.cafe-view-link:hover { text-decoration: underline; }

/* 客户更新历史时间线 */
.cafe-history-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.cafe-history-timeline::before {
  content: ''; position: absolute; left: 7px; top: 4px; bottom: 4px;
  width: 2px; background: var(--border);
}
.timeline-item { position: relative; padding: 0 0 18px 30px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
  position: absolute; left: 0; top: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--primary); border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--primary-light);
}
.timeline-content { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.timeline-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.timeline-action { font-weight: 600; color: var(--text-primary); font-size: 13px; }
.timeline-field { font-size: 11px; background: var(--primary-light); color: var(--primary); padding: 1px 7px; border-radius: 4px; }
.timeline-diff { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.timeline-old { background: #fee2e2; color: #b91c1c; padding: 1px 7px; border-radius: 4px; text-decoration: line-through; }
.timeline-arrow { color: var(--text-tertiary); font-weight: 700; }
.timeline-new { background: #dcfce7; color: #15803d; padding: 1px 7px; border-radius: 4px; }
.timeline-empty { background: #f1f5f9; color: var(--text-tertiary); }
.timeline-meta { margin-top: 6px; display: flex; gap: 12px; font-size: 11px; color: var(--text-tertiary); }

/* 客户操作日志 */
.cafe-log-list { display: flex; flex-direction: column; gap: 10px; }
.cafe-log-item { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--bg-secondary); }
.cafe-log-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cafe-log-action { font-weight: 600; color: var(--text-primary); font-size: 13px; }
.cafe-log-module { font-size: 11px; background: var(--primary-light); color: var(--primary); padding: 1px 7px; border-radius: 4px; }
.cafe-log-target { font-size: 12px; color: var(--text-secondary); }
.cafe-log-detail { margin-top: 4px; font-size: 12px; color: var(--text-secondary); }
.cafe-log-meta { margin-top: 6px; display: flex; gap: 12px; font-size: 11px; color: var(--text-tertiary); }

.cafe-card-address {
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.cafe-card-body { padding: 8px 16px; flex: 1; }
.cafe-info-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.cafe-info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cafe-info-label {
  font-size: 11px;
  color: var(--text-tertiary);
}
.cafe-info-value {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
}

.cafe-expire-info {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin-bottom: 8px;
}
.cafe-expire-normal { background: var(--success-light); color: var(--success); }
.cafe-expire-soon { background: var(--warning-light); color: var(--warning); }
.cafe-expire-urgent { background: #ffeded; color: #e11d48; }
.cafe-expire-overdue { background: var(--danger-light); color: var(--danger); }

.cafe-expire-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  margin-left: auto;
}
.cafe-expire-tag.cafe-expire-normal { background: var(--success-light); color: var(--success); }
.cafe-expire-tag.cafe-expire-soon { background: var(--warning-light); color: var(--warning); }
.cafe-expire-tag.cafe-expire-urgent { background: #ffeded; color: #e11d48; }
.cafe-expire-tag.cafe-expire-overdue { background: var(--danger-light); color: var(--danger); }

.cafe-note-count {
  font-size: 12px;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.cafe-card-actions {
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 6px;
}

/* Cafe Detail */
.cafe-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  gap: 12px;
  flex-wrap: wrap;
}
.cafe-detail-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cafe-detail-title-row h2 { font-size: 22px; }
.cafe-detail-actions { display: flex; gap: 8px; }

.cafe-detail-layout { display: flex; flex-direction: column; gap: 20px; }

.cafe-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.cafe-detail-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
}
.cafe-detail-label {
  font-size: 12px;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 4px;
}
.cafe-detail-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.cafe-detail-remark {
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--warning-light);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--warning);
}
.remark-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--warning);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.remark-content {
  font-size: 14px;
  color: var(--text-secondary);
  white-space: pre-wrap;
  line-height: 1.6;
}

/* Cafe Notes */
.cafe-note-form {
  background: var(--bg-input);
  padding: 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  border: 1px solid var(--border);
}
.cafe-notes-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cafe-note-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  background: white;
  transition: all 0.2s;
}
.cafe-note-item:hover { box-shadow: var(--shadow); }
.cafe-note-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}
.cafe-note-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.cafe-note-content {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 8px;
}
.cafe-note-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--text-tertiary);
}
.cafe-note-meta span { display: flex; align-items: center; gap: 4px; }

/* Badges */
.badge-red { background: var(--danger-light); color: var(--danger); }
.badge-green { background: var(--success-light); color: var(--success); }
.badge-gray { background: #f1f5f9; color: var(--text-tertiary); }
.badge-blue { background: var(--primary-light); color: var(--primary-dark); }

/* Cafe Form */
.cafe-form { max-width: 800px; }
.form-section {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.form-section:last-of-type { border-bottom: none; }
.form-section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--primary-light);
}

/* Data Table */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.data-table th {
  text-align: left;
  padding: 10px 14px;
  background: var(--bg-input);
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.data-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}
.data-table tr:hover td { background: var(--bg-input); }
.cafe-row-overdue td { background: #fff5f5; }
.cafe-table-wrap { overflow-x: auto; }

/* Cafe Reminders */
.cafe-reminder-section { margin-bottom: 16px; }
.cafe-reminder-section:last-child { margin-bottom: 0; }
.cafe-reminder-label {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cafe-reminder-danger { color: var(--danger); }
.cafe-reminder-warning { color: var(--warning); }

.cafe-reminder-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-right: 4px;
}

.cafe-reminder-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s;
}
.cafe-reminder-item:hover { background: var(--bg-input); border-color: var(--border-dark); }
.cafe-reminder-item.cafe-expire-overdue { border-left: 3px solid var(--danger); }
.cafe-reminder-name { font-weight: 600; flex: 1; }
.cafe-reminder-date { color: var(--text-secondary); font-size: 13px; }

.btn-warning {
  background: var(--warning);
  color: white;
  border: none;
}
.btn-warning:hover { background: #d97706; color: white; }

/* ===== Cafe Network Lines ===== */
.cafe-network-form {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 16px;
}
.cafe-networks-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cafe-network-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: box-shadow 0.2s;
}
.cafe-network-card:hover { box-shadow: var(--shadow-md); }
.cafe-network-fixed { border-left: 4px solid var(--primary); }
.cafe-network-adsl { border-left: 4px solid var(--success); }
.cafe-network-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--bg-input);
  border-bottom: 1px solid var(--border);
}
.cafe-network-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cafe-network-type-badge {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
}
.cafe-network-badge-fixed {
  background: var(--primary-light);
  color: var(--primary-dark);
}
.cafe-network-badge-adsl {
  background: var(--success-light);
  color: var(--success);
}
.cafe-network-body {
  padding: 10px 14px;
}
.cafe-network-body .cred-row {
  display: flex;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px dashed var(--border);
}
.cafe-network-body .cred-row:last-child { border-bottom: none; }
.cafe-network-body .cred-label {
  min-width: 80px;
  color: var(--text-secondary);
  font-size: 13px;
}
.cafe-network-body .cred-value {
  flex: 1;
  font-weight: 500;
}
.cafe-network-body .cred-secret {
  display: none;
}

/* ===== Dynamic Form Entries (cafe-form) ===== */
.dyn-add-btn {
  margin-left: 10px;
  font-size: 12px;
  padding: 3px 10px;
}
.dyn-empty-hint {
  color: var(--text-tertiary);
  font-size: 13px;
  padding: 8px 0;
}
.dyn-entry {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  background: var(--bg-input);
}
.dyn-entry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.dyn-entry-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-secondary);
}
.dyn-entry-body {
  padding: 12px 14px;
}

/* ===== Detail Page Multi-Device Sections ===== */
.cafe-inline-form {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 16px;
}
.cafe-multi-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cafe-multi-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: box-shadow 0.2s;
}
.cafe-multi-card:hover { box-shadow: var(--shadow-md); }
.cafe-multi-fixed { border-left: 4px solid var(--primary); }
.cafe-multi-adsl { border-left: 4px solid var(--success); }
.cafe-multi-router { border-left: 4px solid #8b5cf6; }
.cafe-multi-switch { border-left: 4px solid #06b6d4; }
.cafe-multi-privilege { border-left: 4px solid #f59e0b; }
.cafe-multi-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--bg-input);
  border-bottom: 1px solid var(--border);
}
.cafe-multi-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cafe-multi-badge {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
}
.cafe-badge-fixed { background: var(--primary-light); color: var(--primary-dark); }
.cafe-badge-adsl { background: var(--success-light); color: var(--success); }
.cafe-badge-router { background: #ede9fe; color: #7c3aed; }
.cafe-badge-switch { background: #cffafe; color: #0891b2; }
.cafe-badge-privilege { background: var(--warning-light); color: #d97706; }
.cafe-multi-body {
  padding: 10px 14px;
}
.cafe-multi-body .cred-row {
  display: flex;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px dashed var(--border);
}
.cafe-multi-body .cred-row:last-child { border-bottom: none; }
.cafe-multi-body .cred-label {
  min-width: 80px;
  color: var(--text-secondary);
  font-size: 13px;
}
.cafe-multi-body .cred-value {
  flex: 1;
  font-weight: 500;
}
.cafe-multi-body .cred-secret {
  display: none;
}

/* ===== Traditional Admin Style Overrides ===== */

/* Top Header Bar */
.admin-body {
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg);
}

/* ===== Top brand bar (light) ===== */
.top-brand-bar {
  height: var(--brand-bar-height);
  background: linear-gradient(180deg, #ffffff 0%, #f2f6fa 100%);
  border-bottom: 1px solid #d0d8e0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1001;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.brand-logo {
  display: flex;
  align-items: center;
  height: 100%;
}

.brand-logo-img {
  height: 42px;
  max-width: 260px;
  width: auto;
  display: block;
}

/* 隐藏品牌Logo时：后台顶栏仅显示大字站点标题 */
.brand-logo.brand-logo-text-only { padding-left: 6px; }
.brand-logo.brand-logo-text-only .brand-logo-img { display: none; }
.brand-logo-text {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--primary);
  white-space: nowrap;
}

.brand-right {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}

.brand-welcome {
  padding: 4px 8px;
}

.brand-link {
  color: var(--text-secondary);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 3px;
  transition: all 0.15s;
}

.brand-link:hover {
  background: #e8edf2;
  color: var(--primary-dark);
}

.brand-logout:hover {
  color: var(--danger);
}

/* ===== Top navigation bar (blue tabs) ===== */
.top-nav-bar {
  height: var(--nav-bar-height);
  background: linear-gradient(180deg, var(--header-bg) 0%, var(--header-dark) 100%);
  border-bottom: 1px solid var(--header-dark);
  display: flex;
  align-items: center;
  padding: 0 8px;
  position: fixed;
  top: var(--brand-bar-height); left: 0; right: 0;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0,0,0,0.12);
}

.top-tabs {
  display: flex;
  align-items: center;
  flex: 1;
  height: 100%;
}

.top-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  height: calc(100% - 6px);
  margin-top: 3px;
  color: var(--header-text, rgba(255,255,255,0.9));
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 4px 4px 0 0;
  transition: all 0.15s;
  white-space: nowrap;
}

.top-tab:hover {
  background: var(--tab-hover);
  color: var(--header-text, #fff);
}

.top-tab.active {
  background: #ffffff;
  color: var(--link-color, var(--primary));
  font-weight: 600;
  box-shadow: 0 -2px 4px rgba(0,0,0,0.06);
  border-top: 2px solid var(--primary);
}

/* Layout shell */
.admin-shell {
  display: flex;
  flex: 1;
  margin-top: var(--topbar-height);
  min-height: calc(100vh - var(--topbar-height));
}

/* Sidebar - traditional blue */
.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-sidebar);
  position: fixed;
  left: 0; top: var(--topbar-height); bottom: 0;
  border-right: 1px solid var(--header-dark);
  box-shadow: 2px 0 4px rgba(0,0,0,0.08);
  z-index: 900;
}

.sidebar-header {
  display: none;
}

.sidebar-nav {
  padding: 6px 0;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 10px 16px;
  margin: 2px 6px;
  border-radius: 0;
  color: var(--sidebar-text, rgba(255,255,255,0.92));
  font-size: 13px;
  font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.nav-item:hover {
  background: var(--bg-sidebar-hover);
  color: var(--sidebar-text, white);
}

.nav-item.active {
  background: var(--bg-sidebar-active);
  color: var(--btn-text, #fff);
  font-weight: 600;
  box-shadow: inset 3px 0 0 rgba(255,255,255,0.5);
}

.nav-item svg {
  width: 18px; height: 18px;
  opacity: 0.9;
}

.sidebar-footer {
  display: none;
}

/* Main content area */
.main-content {
  margin-left: var(--sidebar-width);
  flex: 1;
  min-height: calc(100vh - var(--topbar-height));
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.topbar {
  display: none;
}

/* Breadcrumb bar */
.breadcrumb-bar {
  background: linear-gradient(180deg, #f9fafb 0%, #eef2f6 100%);
  border-bottom: 1px solid var(--border);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}

.breadcrumb-bar svg {
  color: var(--primary);
}

.breadcrumb-current {
  color: var(--text-primary);
  font-weight: 600;
}

.breadcrumb-separator {
  color: var(--text-tertiary);
}

/* Content wrapper */
.content {
  padding: 12px;
  flex: 1;
}

.content-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Toolbar */
.page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.toolbar-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Traditional buttons */
.btn {
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid transparent;
}

.btn-primary {
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-color: var(--primary-dark);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 1px 1px rgba(0,0,0,0.08);
}

.btn-primary:hover {
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);
}

.btn-outline, .btn-secondary {
  background: linear-gradient(180deg, #ffffff 0%, #f0f4f8 100%);
  border-color: var(--border-dark);
  color: var(--text-secondary);
}

.btn-outline:hover, .btn-secondary:hover {
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
  border-color: var(--primary);
  color: var(--primary);
}

.btn-danger {
  background: linear-gradient(180deg, #ef5350 0%, #dc2626 100%);
  border-color: #b91c1c;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 1px rgba(0,0,0,0.08);
}

.btn-danger:hover {
  background: linear-gradient(180deg, #e53935 0%, #c62828 100%);
}

.btn-warning {
  background: linear-gradient(180deg, #ffb74d 0%, #f59e0b 100%);
  border-color: #d97706;
  color: white;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 1px 1px rgba(0,0,0,0.08);
}

.btn-warning:hover {
  background: linear-gradient(180deg, #ffa726 0%, #f57f17 100%);
  color: white;
}

.btn-sm {
  padding: 4px 10px;
  font-size: 12px;
}

.btn-lg {
  padding: 8px 18px;
  font-size: 13px;
}

/* Search panel (yellow) */
.search-panel {
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid #fde68a;
  border-radius: var(--radius);
  padding: 12px;
  margin: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.search-panel label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}

.search-panel .form-input,
.search-panel .filter-select {
  border: 1px solid #d4d4d4;
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  font-size: 12px;
  min-width: 140px;
  background: white;
}

.search-panel .form-input:focus,
.search-panel .filter-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(47,123,217,0.15);
}

/* Classic data table */
.classic-table-wrap {
  overflow-x: auto;
  padding: 0 12px 12px;
}

.classic-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  font-size: 13px;
  background: white;
}

.classic-table th {
  background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
  border: 1px solid var(--border);
  border-bottom: 1px solid var(--border-dark);
  padding: 9px 10px;
  text-align: left;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

.classic-table td {
  border: 1px solid #e8edf2;
  padding: 8px 10px;
  color: var(--text-secondary);
  vertical-align: middle;
}

.classic-table tr:nth-child(even) {
  background: #fafbfc;
}

.classic-table tr:hover td {
  background: #f0f7ff;
}

.classic-table tr.overdue td {
  background: #fef2f2;
}

.classic-table tr.expiring td {
  background: #fffbeb;
}

/* Cards adapt to traditional */
.card {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.card-header {
  padding: 12px 14px;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

.card-title {
  font-size: 14px;
}

.card-body {
  padding: 14px;
}

/* Stats grid adapt */
.stats-grid {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.stat-card {
  border-radius: var(--radius);
  padding: 14px;
}

.stat-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius);
}

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

.stat-label {
  font-size: 12px;
}

/* Forms adapt */
.form-input {
  border-radius: var(--radius-sm);
  border: 1px solid #d4d4d4;
  padding: 7px 10px;
  font-size: 13px;
}

.form-label {
  font-size: 12px;
}

/* Filter bar adapt */
.filter-bar {
  margin-bottom: 0;
}

.filter-form {
  gap: 6px;
}

.filter-select {
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  font-size: 12px;
}

.search-input {
  width: 180px;
  padding: 5px 8px 5px 28px;
  font-size: 12px;
}

/* Page actions */
.page-actions {
  margin-bottom: 0;
}

/* Empty state */
.empty-state {
  padding: 40px 20px;
}

/* Cafe cards -> more compact */
.cafe-grid {
  gap: 12px;
}

.cafe-card {
  border-radius: var(--radius);
}

/* Dashboard row */
.dashboard-row {
  gap: 12px;
}

/* File grid */
.file-grid {
  gap: 12px;
}

.file-card {
  border-radius: var(--radius);
}

/* Modal */
.modal {
  border-radius: var(--radius);
}

/* Notes */
.notes-layout {
  gap: 12px;
}

.note-card {
  border-radius: var(--radius);
}

/* Cafe form sections */
.form-section-title {
  font-size: 14px;
  border-bottom: 1px solid var(--primary-light);
}

/* Alerts */
.alert {
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13px;
}

/* Download page */
.download-header {
  position: static;
}

.download-container {
  grid-template-columns: 200px 1fr;
  gap: 12px;
}

/* Responsive: hide tabs, keep simple */
@media (max-width: 768px) {
  .top-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .top-tab {
    padding: 0 12px;
    font-size: 12px;
  }
  .brand-welcome {
    display: none;
  }
}

/* Utility */
.text-right { text-align: right; }
.text-center { text-align: center; }
.no-wrap { white-space: nowrap; }

/* ===== OA Dashboard (我的面板) ===== */
.dashboard-oa { padding: 12px; }

.oa-dashboard-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 12px;
  align-items: start;
}

.oa-dashboard-left,
.oa-dashboard-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.oa-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.oa-card-header {
  background: linear-gradient(180deg, #f7f9fc 0%, #eef2f6 100%);
  border-bottom: 1px solid var(--border);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.oa-card-icon {
  font-size: 15px;
  line-height: 1;
}

.oa-card-more {
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
  color: var(--primary);
}

.oa-card-more:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

.oa-card-body {
  padding: 14px;
}

.oa-card-primary .oa-card-header {
  background: linear-gradient(180deg, #e8f2fd 0%, #dbeafe 100%);
}

.oa-card-warning .oa-card-header {
  background: linear-gradient(180deg, #fff8e6 0%, #fef3c7 100%);
}

.profile-info-row {
  display: flex;
  padding: 6px 0;
  border-bottom: 1px dashed #e5e9ef;
  font-size: 13px;
}

.profile-info-row:last-child {
  border-bottom: none;
}

.profile-info-label {
  color: var(--text-secondary);
  width: 110px;
  flex-shrink: 0;
}

.profile-info-value {
  color: var(--text-primary);
  font-weight: 500;
}

.quick-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.quick-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 13px;
  transition: all 0.15s;
}

.quick-link:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary-dark);
}

.quick-link svg {
  flex-shrink: 0;
  color: var(--primary);
}

.knowledge-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.knowledge-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px dashed #e5e9ef;
  font-size: 13px;
}

.knowledge-item:last-child {
  border-bottom: none;
}

.knowledge-bullet {
  color: var(--text-tertiary);
  font-size: 12px;
}

.knowledge-link {
  flex: 1;
  min-width: 0;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.knowledge-link:hover {
  color: var(--primary);
  text-decoration: underline;
}

.knowledge-tag {
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 2px;
  white-space: nowrap;
}

.knowledge-tag-pinned {
  background: #fef3c7;
  color: #b45309;
}

.knowledge-tag-shared {
  background: #dbeafe;
  color: #1e5bb5;
}

.knowledge-date {
  color: var(--text-tertiary);
  font-size: 12px;
  white-space: nowrap;
}

.security-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--danger);
  font-size: 13px;
  line-height: 1.6;
}

.security-alert-icon {
  color: var(--warning);
  font-weight: 700;
}

.security-links {
  margin-top: 10px;
  text-align: right;
}

.security-links a {
  font-size: 12px;
  color: var(--primary);
}

.security-ok {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--success);
  font-size: 13px;
}

.security-ok-icon {
  font-weight: 700;
}

.empty-state-sm {
  text-align: center;
  padding: 20px;
  color: var(--text-tertiary);
  font-size: 13px;
}

.empty-state-sm p {
  margin-bottom: 10px;
}

.oa-mini-stats {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.oa-mini-stat {
  flex: 1;
  text-align: center;
  padding: 8px;
  border-right: 1px solid var(--border);
}

.oa-mini-stat:last-child {
  border-right: none;
}

.oa-mini-stat-value {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--primary);
}

.oa-mini-stat-label {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

@media (max-width: 992px) {
  .oa-dashboard-grid {
    grid-template-columns: 1fr;
  }
  .quick-links {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .quick-links {
    grid-template-columns: 1fr 1fr;
  }
  .oa-mini-stats {
    flex-wrap: wrap;
  }
  .oa-mini-stat {
    flex: 1 1 40%;
    border-right: none;
  }
}

/* ============================================================
   操作日志界面
   ============================================================ */
.log-filter-form {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.filter-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.filter-item .form-label {
  margin: 0;
  font-weight: 600;
  color: var(--text-secondary);
}
.filter-item .form-input {
  min-width: 150px;
}
.filter-item.filter-actions {
  flex-direction: row;
  gap: 8px;
  align-items: center;
}
.module-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  border-radius: 10px;
  background: #e0edff;
  color: #1d4ed8;
  white-space: nowrap;
}
.log-target {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.log-detail {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-tertiary);
}
.log-ip {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  color: var(--text-tertiary);
}
.empty-cell {
  text-align: center;
  padding: 40px 0;
  color: var(--text-tertiary);
}
.table-responsive {
  overflow-x: auto;
}
.pagination {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 14px;
}
.page-btn {
  padding: 6px 14px;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text-secondary);
  font-size: 13px;
  text-decoration: none;
}
.page-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.page-btn.disabled {
  opacity: 0.5;
  pointer-events: none;
}
.page-info {
  font-size: 13px;
  color: var(--text-tertiary);
}
.card-header .inline-form {
  margin-left: auto;
}
.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ===== 界面主题色配置 ===== */
.form-color {
  width: 64px;
  height: 38px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  vertical-align: middle;
}
.theme-presets {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.theme-preset {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s, border-color 0.1s;
  box-shadow: var(--shadow);
}
.theme-preset:hover { transform: scale(1.08); }
.theme-preset.selected { border-color: var(--text-primary); transform: scale(1.08); }
.theme-preset.white { border-color: #d0d7de; box-shadow: inset 0 0 0 1px #e2e8f0; }

/* ===== 富文本编辑器（知识库） ===== */
.note-editor-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  padding: 8px 10px; border: 1px solid #e2e8f0; border-bottom: none;
  border-radius: 10px 10px 0 0; background: #f8fafc;
}
.ne-btn {
  min-width: 32px; height: 30px; padding: 0 8px; border: 1px solid transparent;
  border-radius: 6px; background: #fff; color: #334155; cursor: pointer; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center; transition: background .12s, border-color .12s;
}
.ne-btn:hover { background: #eef2f7; border-color: #cbd5e1; }
.ne-sep { width: 1px; height: 20px; background: #cbd5e1; margin: 0 4px; }
.ne-hint { font-size: 12px; color: #94a3b8; margin-left: auto; }
.note-editor {
  min-height: 280px; max-height: 520px; overflow-y: auto;
  border: 1px solid #e2e8f0; border-radius: 0 0 10px 10px; padding: 14px 16px;
  background: #fff; font-size: 14px; line-height: 1.7; outline: none; color: #1e293b;
}
.note-editor:focus { border-color: #2f7bd9; box-shadow: 0 0 0 3px rgba(47,123,217,.12); }
.note-editor:empty:before { content: attr(data-placeholder); color: #94a3b8; }
.note-editor img { max-width: 100%; height: auto; border-radius: 6px; margin: 6px 0; }
.note-editor .note-img-missing,
.note-card-content .note-img-missing {
  display: inline-block;
  background: #f1f5f9;
  border: 1px dashed #cbd5e1;
  color: #64748b;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  margin: 4px 0;
}
.note-editor a { color: #2f7bd9; text-decoration: underline; }
.note-editor p { margin: 0 0 0.6em; }
.note-editor p:last-child { margin-bottom: 0; }
.note-editor h2 { font-size: 20px; margin: 14px 0 8px; }
.note-editor h3 { font-size: 17px; margin: 12px 0 6px; }
.note-editor p { margin: 6px 0; }
.note-editor ul, .note-editor ol { padding-left: 22px; margin: 6px 0; }
.note-editor blockquote { border-left: 3px solid #cbd5e1; margin: 8px 0; padding: 4px 12px; color: #475569; }
.note-editor pre { background: #f1f5f9; padding: 10px; border-radius: 6px; overflow: auto; }
/* 从网页/论坛粘贴进来的内容，浏览器会用 <div> 一行一个包裹；这里给它们段落间距，
   让编辑时的观感与保存后（后端会统一转成 <p> 段落）一致。自定义块除外，避免破坏其内部布局。 */
.note-editor > div:not(.note-cmd):not(.note-fold) { margin-bottom: 0.6em; }
.note-editor > div:not(.note-cmd):not(.note-fold):last-child { margin-bottom: 0; }
.note-editor .note-cmd, .note-editor .note-fold { margin-bottom: 0.6em; }

/* ===== 在线用户页 ===== */
.status-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle; }
.status-online { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.online-count-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px;
  padding: 0 7px; margin-left: 6px; border-radius: 999px; background: #dcfce7; color: #15803d; font-size: 12px; font-weight: 600;
}
.badge-self { font-size: 12px; color: #64748b; background: #f1f5f9; padding: 3px 9px; border-radius: 999px; }
.session-count { font-size: 11px; color: #1d4ed8; background: #e0edff; padding: 1px 7px; border-radius: 999px; margin-left: 6px; white-space: nowrap; }
.status-disabled { background: #fca5a5; box-shadow: 0 0 0 3px rgba(220,38,38,.15); }
.badge-disabled { font-size: 11px; color: #b91c1c; background: #fee2e2; padding: 1px 7px; border-radius: 999px; margin-left: 6px; white-space: nowrap; }
.online-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.btn-danger { background: #ef4444; color: #fff; border-color: #ef4444; }
.btn-danger:hover { background: #dc2626; border-color: #dc2626; }

/* ===== 菜单管理页 ===== */
.nav-group { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; margin-bottom: 16px; overflow: hidden; }
.nav-group-title { padding: 10px 14px; font-weight: 600; color: #334155; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.nav-group-items { padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.nav-item-row { display: flex; align-items: center; gap: 10px; cursor: default; }
.nav-item-row.dragging { opacity: .45; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.nav-drag-handle { cursor: grab; color: #94a3b8; font-size: 16px; line-height: 1; user-select: none; padding: 2px 4px; border-radius: 4px; }
.nav-drag-handle:active { cursor: grabbing; background: #eef2f7; }
.nav-label-input { flex: 1 1 auto; min-width: 160px; }
.nav-sort-input { flex: 0 0 96px; width: 96px; }
.nav-visible { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #475569; white-space: nowrap; }
.nav-href { font-size: 12px; color: #94a3b8; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }

/* ===== 顶部在线人数入口 ===== */
.online-badge {
  display: inline-flex; align-items: center; gap: 5px;
  color: #166534; background: #dcfce7;
  padding: 4px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 600;
  margin-right: 8px;
  transition: background .15s, color .15s;
}
.online-badge:hover { background: #bbf7d0; color: #14532d; }
.online-badge svg { color: #22c55e; }
.online-count { font-weight: 700; }

/* ===== 顶部主题色选择器（右上角图标） ===== */
.theme-picker-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin-right: 8px;
  border: none; border-radius: 8px; background: rgba(255,255,255,.18);
  color: #fff; cursor: pointer; transition: background .15s, transform .1s;
}
.theme-picker-btn:hover { background: rgba(255,255,255,.34); }
.theme-picker-btn:active { transform: scale(.94); }
.theme-picker-panel {
  position: absolute; top: 54px; right: 16px; z-index: 1200;
  width: 224px; padding: 14px;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15,23,42,.18); color: #1f2a37;
}
.theme-picker-title { font-size: 13px; font-weight: 600; margin-bottom: 10px; color: #334155; }
.theme-picker-panel .theme-presets { justify-content: flex-start; gap: 10px; }
.theme-picker-panel .theme-preset { box-shadow: none; }
.theme-custom {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 12px; font-size: 13px; color: #475569;
}
.theme-reset-btn {
  margin-top: 12px; width: 100%; padding: 8px; border: 1px solid var(--border);
  border-radius: 8px; background: #f8fafc; color: #334155; cursor: pointer; font-size: 13px;
  transition: background .15s;
}
.theme-reset-btn:hover { background: #eef2f7; }

/* ===== 客户资料「查看」只读文字框 ===== */
.cafe-textview-wrap { padding: 4px 0; }
.cafe-textview-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 10px 0;
}
.cafe-textview-hint { color: #64748b; font-size: 13px; }
.cafe-textview-box {
  width: 100%;
  min-height: 62vh;
  height: 62vh;
  resize: vertical;
  box-sizing: border-box;
  padding: 16px 18px;
  border: 1px solid #d7dee8;
  border-radius: 10px;
  background: #fbfcfe;
  color: #1f2937;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  outline: none;
}
.cafe-textview-box:focus { border-color: var(--primary, #2f7bd9); box-shadow: 0 0 0 3px rgba(47,123,217,.12); }
/* 文字框下方的「更新历史 / 操作日志」卡片，与上方文字框间距一致 */
.cafe-textview-card { margin-top: 16px; }
.cafe-textview-card:last-child { margin-bottom: 4px; }

/* ===== 数据备份与恢复 ===== */
.backup-settings-form .form-row { display: flex; flex-wrap: wrap; gap: 24px; }
.backup-settings-form .form-row .form-group { flex: 1 1 220px; min-width: 220px; }
.backup-settings-form .form-input { max-width: 180px; }
.backup-status { display: flex; flex-wrap: wrap; gap: 24px; margin: 14px 0 18px; color: #475569; font-size: 14px; }
.backup-status strong { color: #1f2937; }
.btn-icon-restore { color: #1aab5b; }
.btn-icon-restore:hover { background: #dcfce7; color: #14532d; }


/* === 任务管理页补充样式 === */
.btn-success { background: #16a34a; color: #fff; border-color: #16a34a; }
.btn-success:hover { background: #15803d; border-color: #15803d; }
.text-danger { color: #ef4444; }
.badge-amber { background: rgba(245,158,11,0.12); color: #d97706; }
.task-pool { display: flex; flex-direction: column; gap: 16px; }

/* === 到期提醒模块补充样式 === */
.page-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.page-head h2 { margin:0; font-size:20px; }
.reminder-form .form-row { margin-bottom:14px; display:flex; flex-direction:column; gap:6px; }
.reminder-form .form-row > label { font-weight:600; color:var(--text-secondary); font-size:13px; }
.reminder-form .form-row .req { color:#ef4444; }
.reminder-form input[type=text], .reminder-form input[type=date], .reminder-form input[type=number],
.reminder-form select, .reminder-form textarea {
  padding:9px 12px; border:1px solid var(--border); border-radius:8px; background:var(--bg-input); color:var(--text-primary); font-size:14px; width:100%; max-width:420px; font-family:inherit;
}
.reminder-form textarea { resize:vertical; }
.reminder-form .seg { display:flex; gap:18px; }
.reminder-form .seg label { display:flex; align-items:center; gap:6px; font-weight:500; cursor:pointer; }
.reminder-form .inline { display:flex; align-items:center; gap:8px; }
.reminder-form .inline input, .reminder-form .inline select { width:auto; }
.form-actions { margin-top:8px; }
.req { color:#ef4444; }
.rem-section { margin-top:24px; }
.rem-section h3 { font-size:15px; color:var(--text-secondary); margin:0 0 12px; }
.rem-card { padding:16px; }
.rem-card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.rem-cafe { font-size:16px; font-weight:700; }
.rem-card-sub { color:var(--text-secondary); margin:4px 0 8px; font-size:13px; }
.rem-card-meta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; color:var(--text-tertiary); font-size:13px; }
.rem-card-note { margin-top:8px; padding:8px 10px; background:var(--bg-soft); border-radius:6px; font-size:13px; color:var(--text-secondary); white-space:pre-wrap; }
.rem-card-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.rem-paused { opacity:.8; }
.rem-done { opacity:.7; }
.inline-form { display:inline; }
.badge.rem-overdue { background:var(--danger-light); color:var(--danger); }
.badge.rem-today { background:rgba(245,158,11,0.15); color:#d97706; }
.badge.rem-soon { background:var(--primary-light); color:var(--primary-dark); }
.empty-state { text-align:center; color:var(--text-tertiary); padding:40px 0; }

/* === 用户管理：界面访问 / 客户端登录勾选 === */
.ui-access-grid { display:flex; flex-wrap:wrap; gap:10px 18px; padding:10px 0; }
.ui-access-grid .chk { display:flex; align-items:center; gap:6px; font-size:13px; cursor:pointer; }

/* === 云存储配置 === */
.storage-box { border:1px solid var(--border, #e5e7eb); border-radius:10px; padding:14px 16px; margin:6px 0 14px; background:rgba(0,0,0,.02); }
.storage-subtitle { font-size:14px; font-weight:600; margin:0 0 10px; color:var(--text-secondary, #475569); }
.card-badge { font-size:12px; padding:3px 10px; border-radius:999px; font-weight:600; }
.badge-green { background:#dcfce7; color:#166534; }
.badge-gray { background:#f1f5f9; color:#64748b; }

/* === 登录页：邮箱验证码登录 === */
.code-input-row { display:flex; gap:8px; align-items:stretch; }
.code-input-row .form-input { flex:1; }
.btn-send-code { white-space:nowrap; flex:0 0 auto; }
.btn-send-code:disabled { opacity:.6; cursor:not-allowed; }

/* === 个人中心：密保开关行 === */
.switch-row { display:flex; align-items:center; gap:8px; }
.switch-label { display:flex; align-items:center; gap:8px; font-weight:500; margin:0; cursor:pointer; }

/* === 文件：预览/编辑按钮 === */
.btn-icon-view:hover { background: var(--info-light, #e0f2fe); color: var(--info, #0284c7); }
.download-file-actions { display:flex; flex-wrap:wrap; gap:8px; }
.download-file-actions .btn { margin:0; }

/* === 文本在线编辑器 === */
.code-editor {
  width: 100%;
  min-height: 420px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 13px;
  line-height: 1.6;
  tab-size: 4;
  white-space: pre;
  overflow: auto;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-code, #f8fafc);
  color: var(--text-primary, #1e293b);
  resize: vertical;
}

/* === 知识库列表式 + 弹窗详情 === */
.notes-table th,
.notes-table td { vertical-align: middle; }
.note-title-link { color: var(--primary); font-weight: 600; text-decoration: none; cursor: pointer; }
.note-title-link:hover { text-decoration: underline; }
.note-pin-tag { margin-right: 4px; font-size: 13px; }
.notes-table .table-actions { display: flex; gap: 4px; justify-content: flex-start; }
.notes-table .btn-icon-pin.pinned { color: var(--warning); background: var(--warning-light); }
.note-preview-loading { padding: 40px; text-align: center; color: var(--text-tertiary); }

.note-modal-overlay .modal { max-width: 840px; width: 92%; }
.note-modal-overlay .modal-body { max-height: 78vh; overflow-y: auto; }
.note-preview { line-height: 1.7; }
.note-preview-title { margin: 0 0 12px; font-size: 20px; font-weight: 700; color: var(--text-primary); }
.note-preview-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 16px; font-size: 13px; color: var(--text-tertiary); }
.note-preview-meta .note-badge { font-size: 12px; padding: 2px 8px; border-radius: 999px; }
.note-preview-content { color: var(--text-primary); font-size: 14px; word-break: break-word; }
.note-preview-content p { margin: 0 0 10px; }
.note-preview-content img { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin: 8px 0; }
.note-preview-content video { max-width: 100%; height: auto; }
.note-preview-media { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.note-preview-media-item { max-width: 100%; max-height: 320px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.note-preview-links { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.note-preview-links-title { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
.note-preview-links-list { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 768px) {
  .notes-table th:nth-child(2),
  .notes-table td:nth-child(2),
  .notes-table th:nth-child(3),
  .notes-table td:nth-child(3) { display: none; }
}

/* ===== 后台底部备案信息 ===== */
.layout-footer {
  padding: 14px 24px 22px;
  text-align: center;
  font-size: 12px;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.layout-footer a, .layout-footer-icp { color: var(--text-tertiary); text-decoration: none; }
.layout-footer a:hover { text-decoration: underline; }
.layout-footer-sep { opacity: .5; }

/* ===== 命令行块 + 折叠块（文档编辑器 / 前台查看） ===== */
/* 命令行块：深色终端风格 + 复制按钮 */
.note-cmd {
  border: 1px solid #2b3440; border-radius: 10px; overflow: hidden;
  background: #0f172a; color: #e2e8f0; margin: 12px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  box-shadow: 0 2px 8px rgba(15,23,42,.16);
}
.note-cmd-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; background: #1e293b; border-bottom: 1px solid #334155;
}
.note-cmd-title {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: #94a3b8; font-weight: 600;
}
.note-cmd-title::before {
  content: ''; width: 10px; height: 10px; border-radius: 50%;
  background: #ef4444; box-shadow: 14px 0 0 #f59e0b, 28px 0 0 #22c55e;
}
.note-cmd-copy {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border: 1px solid #475569; border-radius: 6px;
  background: transparent; color: #cbd5e1; font-size: 12px; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  font-family: inherit;
}
.note-cmd-copy:hover { background: #334155; border-color: #64748b; color: #fff; }
.note-cmd-copy.copied { background: #065f46; border-color: #10b981; color: #d1fae5; }
.note-cmd-body { margin: 0; padding: 12px 14px; overflow-x: auto; line-height: 1.6; font-size: 13px; color: #e2e8f0; }
.note-cmd-body code { background: transparent; color: inherit; padding: 0; font-family: inherit; }

/* 折叠块：默认收起，点击头部展开 */
.note-fold { border: 1px solid var(--border); border-radius: 10px; margin: 12px 0; background: #fff; overflow: hidden; }
.note-fold-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; cursor: pointer; user-select: none; background: #f8fafc;
  border-bottom: 1px solid transparent; transition: background .15s;
}
.note-fold-head:hover { background: #eef2f7; }
.note-fold.open .note-fold-head { border-bottom-color: var(--border); }
.note-fold-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.note-fold-arrow { font-size: 11px; color: var(--text-tertiary); transition: transform .2s; flex: none; }
.note-fold.open .note-fold-arrow { transform: rotate(90deg); }
.note-fold-body { display: none; padding: 12px 14px; line-height: 1.7; font-size: 14px; color: var(--text-primary); }
.note-fold.open .note-fold-body { display: block; }

/* 编辑器内：交互按钮不可编辑、随文档保存 */
.note-editor .note-cmd-copy, .note-editor .note-fold-head { user-select: none; }
.note-editor .note-cmd-body { white-space: pre-wrap; word-break: break-word; }

/* ===== 文档查看页：浮动「返回列表」按钮（跟随页面滚动） ===== */
.pub-note-float-group {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}
.pub-note-back-float,
.pub-note-top-float {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border: 1px solid var(--border-dark, #cbd5e1);
  border-radius: 999px;
  background: #ffffff;
  color: var(--text-primary, #1f2937);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(15,23,42,.16);
  cursor: grab;
  user-select: none;
  touch-action: none;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.pub-note-back-float.dragging,
.pub-note-top-float.dragging {
  cursor: grabbing;
  box-shadow: 0 8px 28px rgba(15,23,42,.28);
  transition: none;
}
.pub-note-back-float svg,
.pub-note-top-float svg { flex: none; pointer-events: none; }
.pub-note-back-float span,
.pub-note-top-float span { pointer-events: none; }
.pub-note-back-float:hover,
.pub-note-top-float:hover {
  background: var(--primary-light, #e8f1fd);
  border-color: var(--primary, #2f7bd9);
  color: var(--primary-dark, #1e5bb5);
}
@media (max-width: 768px) {
  .pub-note-float-group { right: 12px; gap: 8px; }
  .pub-note-back-float,
  .pub-note-top-float { padding: 8px 14px; font-size: 12px; }
}

/* ===== 文档图片管理页 ===== */
.ni-stat { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--text-secondary, #475569); }
.ni-stat-num { font-weight:700; font-size:15px; }
.ni-stat-used .ni-stat-num { color:var(--success, #16a34a); }
.ni-stat-orphan .ni-stat-num { color:var(--warning, #d97706); }
.ni-filter { margin-left:16px; display:inline-flex; align-items:center; gap:5px; font-size:13px; color:var(--text-primary, #1f2937); cursor:pointer; }
.ni-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:14px;
}
.ni-card {
  background:#fff; border:1px solid var(--border, #e2e8f0); border-radius:12px;
  overflow:hidden; box-shadow:var(--shadow, 0 1px 3px rgba(0,0,0,.06));
  display:flex; flex-direction:column; transition:box-shadow .15s, border-color .15s;
}
.ni-card:hover { box-shadow:var(--shadow-md, 0 6px 18px rgba(0,0,0,.1)); }
.ni-card.ni-orphan { border-color:#fcd34d; box-shadow:0 0 0 1px #fcd34d inset; }
.ni-thumb { position:relative; aspect-ratio:4/3; background:#f1f5f9; }
.ni-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.ni-badge {
  position:absolute; top:8px; right:8px; font-size:11px; font-weight:600;
  padding:2px 8px; border-radius:999px; color:#fff;
}
.ni-badge-used { background:rgba(22,163,74,.85); }
.ni-badge-orphan { background:rgba(217,119,6,.9); }
.ni-info { padding:10px 12px 12px; display:flex; flex-direction:column; gap:5px; flex:1; }
.ni-file { font-size:12px; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; color:var(--text-primary, #1f2937); word-break:break-all; }
.ni-meta { font-size:12px; color:var(--text-tertiary, #94a3b8); }
.ni-usedin { font-size:12px; color:var(--text-secondary, #64748b); line-height:1.5; }
.ni-usedin a { color:var(--primary, #2f7bd9); text-decoration:none; }
.ni-usedin a:hover { text-decoration:underline; }
.ni-actions { margin-top:auto; display:flex; gap:6px; flex-wrap:wrap; padding-top:6px; }
.ni-actions .btn { margin:0; }
@media (max-width: 560px) {
  .ni-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
  .search-panel { flex-wrap:wrap; }
}