/* 界面风格：品牌暖色（默认）+ 商务蓝（可选）+ 紧凑密度 */

/* ── 商务蓝（可选） ── */
html[data-theme="neutral"] {
  --cream: #f6f7f9;
  --orange: #2563eb;
  --orange2: #1d4ed8;
  --brown: #1f2937;
  --brown2: #111827;
  --muted: #6b7280;
  --muted2: #9ca3af;
  --line: #e5e7eb;
  --line2: #d1d5db;
  --card: rgba(255, 255, 255, 0.98);
  --shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.04);
  --accent-bg: #eff6ff;
  --accent-bg-soft: #dbeafe;
  --accent-bg-alt: #f3f4f6;
  --surface-table-head: #f9fafb;
  --surface-row-hover: #f3f4f6;
  --surface-card-from: #fff;
  --surface-card-to: #f9fafb;
  --accent-border-hover: #93c5fd;
  --banner-border: #bfdbfe;
  --banner-grad-from: #eff6ff;
  --banner-grad-to: #f8fafc;
  --banner-text: #1e40af;
  --btn-grad-from: #3b82f6;
  --btn-grad-to: #2563eb;
  --body-grad-from: #f3f4f6;
  --body-grad-mid: #f9fafb;
  --avatar-grad-from: #dbeafe;
  --avatar-grad-to: #bfdbfe;
  --skeleton-base: #e5e7eb;
  --skeleton-shine: #f3f4f6;
  --overlay-backdrop: rgba(17, 24, 39, 0.45);
  --tooltip-bg: rgba(17, 24, 39, 0.92);
  --shadow-ui: rgba(15, 23, 42, 0.08);
  --focus-ring: rgba(37, 99, 235, 0.15);
  --accent-tint-06: rgba(37, 99, 235, 0.06);
  --accent-tint-10: rgba(37, 99, 235, 0.1);
  --accent-tint-12: rgba(37, 99, 235, 0.12);
  --accent-shadow-sm: rgba(37, 99, 235, 0.08);
  --accent-shadow-md: rgba(37, 99, 235, 0.12);
  --accent-shadow-lg: rgba(37, 99, 235, 0.25);
  --accent-inset: rgba(37, 99, 235, 0.22);
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

html[data-theme="neutral"] body {
  background: var(--body-grad-from);
}

html[data-theme="neutral"] .sidebar {
  background: #fff;
}

html[data-theme="neutral"] .topbar {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
}

html[data-theme="neutral"] .btn-outline {
  border-color: var(--line2);
}

html[data-theme="neutral"] .topbar-user__avatar {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

html[data-theme="neutral"] .btn-primary {
  box-shadow: 0 8px 18px var(--accent-shadow-lg);
}

html[data-theme="neutral"] .btn-ghost {
  background: var(--accent-bg-alt);
}

html[data-theme="neutral"] .toast--success {
  background: #ecfdf3;
  border-color: #86efac;
  color: #15803d;
}
html[data-theme="neutral"] .toast--success .toast__icon {
  background: #22c55e;
}

html[data-theme="neutral"] .toast--error {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #b91c1c;
}
html[data-theme="neutral"] .toast--error .toast__icon {
  background: #ef4444;
}

html[data-theme="neutral"] .confirm-dialog__card {
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.14);
}

html[data-theme="neutral"] .confirm-dialog__input:focus {
  box-shadow: 0 0 0 3px var(--focus-ring);
}

html[data-theme="neutral"] .pgm-select__menu {
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}

html[data-theme="neutral"] .admins-security-icon {
  background: linear-gradient(135deg, var(--accent-bg-soft), var(--accent-bg-alt));
}

html[data-theme="neutral"] .sticky-save {
  background: rgba(255, 255, 255, 0.96);
  border-top-color: var(--line);
  box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.06);
}

/* ── 紧凑密度 ── */
html[data-density="compact"] {
  --sidebar: 236px;
  --sidebar-pad-x: 16px;
  --sidebar-pad-y: 20px;
  --nav-group-gap: 16px;
  --nav-item-gap: 4px;
}

html[data-density="compact"] .sidebar {
  padding: var(--sidebar-pad-y) var(--sidebar-pad-x);
}

html[data-density="compact"] .brand {
  padding: 2px 8px 18px;
  gap: 10px;
}

html[data-density="compact"] .brand h1 {
  font-size: 17px;
}

html[data-density="compact"] .nav button {
  min-height: 40px;
  padding: 10px 14px 10px 16px;
  font-size: 13px;
  border-radius: 12px;
  gap: 10px;
}

html[data-density="compact"] .nav__icon {
  width: 18px;
  height: 18px;
}

html[data-density="compact"] .nav-group__label {
  padding: 0 14px 8px;
  font-size: 10px;
}

html[data-density="compact"] .topbar {
  padding: 10px 20px;
}

html[data-density="compact"] .topbar h2 {
  font-size: 18px;
}

html[data-density="compact"] .content {
  padding: 16px 20px 56px;
}

html[data-density="compact"] .panel {
  padding: 14px 16px;
  border-radius: 14px;
  margin-bottom: 12px;
}

html[data-density="compact"] .panel h3 {
  font-size: 15px;
  margin-bottom: 10px;
}

html[data-density="compact"] .stats {
  gap: 10px;
  margin-bottom: 14px;
}

html[data-density="compact"] .stat-card {
  padding: 14px 16px;
  border-radius: 14px;
}

html[data-density="compact"] .stat-card span {
  font-size: 12px;
}

html[data-density="compact"] .stat-card b {
  font-size: 26px;
  margin-top: 4px;
}

html[data-density="compact"] .btn {
  padding: 8px 16px;
  font-size: 13px;
}

html[data-density="compact"] .btn-sm {
  padding: 5px 10px;
  font-size: 12px;
}

html[data-density="compact"] th,
html[data-density="compact"] td {
  padding: 8px 8px;
}

html[data-density="compact"] .um-table th,
html[data-density="compact"] .um-table td {
  padding: 7px 10px;
  font-size: 12px;
}

html[data-density="compact"] #tab-users .um-table-wrap--scroll {
  min-height: 120px;
}

html[data-density="compact"] #tab-admins .um-table-wrap--scroll {
  min-height: 120px;
}

html[data-density="compact"] .um-subnav__btn {
  padding: 6px 12px;
  font-size: 12px;
}

html[data-density="compact"] .um-search {
  padding: 7px 10px;
  font-size: 13px;
}

html[data-density="compact"] .um-date-label input {
  padding: 6px 8px;
  font-size: 12px;
}

html[data-density="compact"] .field {
  margin-bottom: 12px;
}

html[data-density="compact"] .field span {
  font-size: 12px;
}

html[data-density="compact"] .field input,
html[data-density="compact"] .field select,
html[data-density="compact"] .field textarea {
  padding: 8px 10px;
  font-size: 13px;
}

html[data-density="compact"] .field select {
  padding-right: 30px;
}

html[data-density="compact"] .um-sort-label select,
html[data-density="compact"] .um-pagination__select,
html[data-density="compact"] .admin-role-select,
html[data-density="compact"] .batch-bar select {
  height: 32px;
  padding: 0 26px 0 10px;
  font-size: 12px;
  border-radius: 8px;
}

html[data-density="compact"] .um-pagination__select {
  padding-right: 24px;
}

html[data-density="compact"] .pgm-select__trigger {
  height: 32px;
  font-size: 12px;
  border-radius: 8px;
  padding-left: 10px;
}

html[data-density="compact"] label.field .pgm-select__trigger {
  height: 36px;
}

html[data-density="compact"] .admins-security-card {
  padding: 18px 20px 20px;
}

html[data-density="compact"] .admins-security-form input {
  height: 38px;
}

html[data-density="compact"] .user-card {
  padding: 10px 12px;
  border-radius: 12px;
}

html[data-density="compact"] .panel-users__head {
  margin-bottom: 10px;
}

html[data-density="compact"] .breadcrumb {
  font-size: 12px;
}

/* ── 外观设置下拉 ── */
.topbar-appearance {
  position: relative;
}

.topbar-appearance__dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--line2);
  border-radius: 14px;
  box-shadow: 0 12px 32px var(--shadow-ui);
  padding: 12px;
  z-index: 120;
}

.topbar-appearance__section + .topbar-appearance__section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

.topbar-appearance__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.topbar-appearance__choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.topbar-appearance__choice {
  border: 1px solid var(--line2);
  background: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--brown);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}

.topbar-appearance__choice:hover {
  background: var(--accent-bg);
}

.topbar-appearance__choice.is-active {
  border-color: var(--orange);
  background: var(--accent-bg);
  color: var(--orange);
}