:root {
  --purple-50: #faf5ff;
  --purple-100: #f3e8ff;
  --purple-500: #a855f7;
  --purple-600: #9333ea;
  --purple-700: #7c3aed;
  --gray-50: #fafafa;
  --gray-100: #dfdfdf;
  --gray-200: #e4e4e7;
  --gray-300: #d4d4d8;
  --gray-400: #a1a1aa;
  --gray-500: #71717a;
  --gray-600: #52525b;
  --gray-700: #3f3f46;
  --gray-800: #27272a;
  --gray-900: #08080d;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --green-500: #22c55e;
  --radius: 8px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  /* Theme-aware colors (light mode defaults) */
  --bg-primary: #ffffff;
  --bg-secondary: #f4f4f5;
  --bg-tertiary: var(--gray-50);
  --border-color: var(--gray-200);
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-muted: var(--gray-500);
}

/* Dark mode overrides - invert the gray scale */
body.dark-mode {
  --bg-primary: #1f1f22;
  --bg-secondary: #18181b;
  --bg-tertiary: #3f3f46;
  --border-color: #35353d;
  --text-primary: #ffffff;
  --text-secondary: #d4d4d8;
  --text-muted: #a1a1aa;
  /* Invert grays: dark becomes light, light becomes dark */
  --gray-50: #27272a;
  --gray-100: #3f3f46;
  --gray-200: #52525b;
  --gray-300: #71717a;
  --gray-400: #a1a1aa;
  --gray-500: #d4d4d8;
  --gray-600: #e4e4e7;
  --gray-700: #f4f4f5;
  --gray-800: #fafafa;
  --gray-900: #ffffff;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
  background: var(--bg-secondary);
  color: var(--text-primary);
  height: 100vh;
  display: flex;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Sidebar */
.sidebar {
  width: 250px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  padding: 0 12px;
  transition: width 0.2s ease;
}

.sidebar.collapsed {
  width: 56px;
  cursor: e-resize;
}

.sidebar.collapsed .user-menu-trigger {
  padding: 0;
  transition: 0.2s padding ease;
}

.sidebar-header {
  padding: 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  transition: background 0.15s ease;
  position: relative;
  width: 32px;
  height: 32px;
}

.sidebar-logo:hover {
  cursor: default;
}

.sidebar.collapsed .sidebar-logo:hover {
  background: color-mix(in srgb, var(--gray-100) 50%, transparent);
  cursor: e-resize;
}

.sidebar-logo .logo-icon {
  width: 24px;
  height: 24px;
  margin-left: -2px;
  color: var(--text-primary);
  flex-shrink: 0;
  transition: opacity 0.15s ease;
}

.sidebar-logo .expand-icon {
  position: absolute;
  opacity: 0;
  width: 20px;
  height: 20px;
  transition: opacity 0.15s ease;
  color: var(--gray-600);
  flex-shrink: 0;
}

.sidebar-logo .logo-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-900);
  white-space: nowrap;
}

.sidebar-toggle {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  border-radius: 6px;
  color: var(--gray-400);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.sidebar-toggle:hover {
  background: color-mix(in srgb, var(--gray-100) 50%, transparent);
  color: var(--gray-600);
}


.sidebar-toggle .icon {
  width: 20px;
  height: 20px;
}

/* Logo text and toggle fade transition */
.sidebar-logo .logo-text,
.sidebar-toggle {
  transition: opacity 0.2s ease;
  white-space: nowrap;
}

.sidebar-logo .logo-icon {
  flex-shrink: 0;
}

/* Collapsed sidebar styles - logo icon stays in place, text fades */
.sidebar.collapsed .sidebar-logo .logo-text,
.sidebar.collapsed .sidebar-toggle {
  opacity: 0;
  pointer-events: none;
}

/* When hovering anywhere on collapsed sidebar, show expand icon */
/* Not applied during collapse animation (while .collapsing class is present) */
.sidebar.collapsed:not(.collapsing):hover .sidebar-logo .logo-icon {
  opacity: 0;
}

.sidebar.collapsed:not(.collapsing):hover .sidebar-logo .expand-icon {
  opacity: 1;
}

/* More prominent hover state when directly hovering the logo */
.sidebar.collapsed:not(.collapsing):hover .sidebar-logo {
  color: var(--gray-300);
}


.sidebar-header p {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 2px;
  margin-left: 24px;
}

.sidebar-nav {
  flex: 1;
  padding: 12px 0;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 8px;
  color: var(--gray-600);
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  margin-bottom: 2px;
  position: relative;
  height: 32px;
}

.nav-item:hover {
  background: color-mix(in srgb, var(--gray-100) 50%, transparent);
  color: var(--gray-800);
}

.nav-item.active {
  background: var(--gray-100);
  color: var(--gray-900);
}

.nav-item .icon {
  width: 16px;
  height: 16px;
  margin-right: 10px;
  opacity: 0.7;
  flex-shrink: 0;
}

.nav-item.active .icon {
  opacity: 1;
}

.nav-item .count {
  margin-left: auto;
  background: var(--gray-100);
  color: var(--gray-600);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
}


.nav-item.active .count {
  background: var(--purple-600);
  color: white;
}

/* Nav text and count fade transition */
.nav-item .nav-text,
.nav-item .count {
  transition: opacity 0.2s ease;
  white-space: nowrap;
}

/* Collapsed sidebar nav styles - icons stay in place, text fades */
.sidebar.collapsed .nav-item .nav-text,
.sidebar.collapsed .nav-item .count {
  opacity: 0;
  pointer-events: none;
}

/* Sidebar footer */
.sidebar-footer {
  padding: 12px 0;
  position: relative;
}

.user-avatar {
  width: 32px;
  height: 32px;
  background: var(--purple-100);
  color: var(--purple-600);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-info {
  flex: 1;
  min-width: 0;
}

.user-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-900);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.user-email {
  font-size: 11px;
  color: var(--gray-500);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Main content */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-primary);
  margin: 6px 6px 6px 0;
  border-radius: 6px;
  border: 1px solid var(--border-color);
}

/* Main header */
.main-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px;
  border-bottom: 1px solid var(--border-color);
}

.main-header-left h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--gray-900);
}

.main-header-left p {
  font-size: 13px;
  color: var(--gray-500);
}

.main-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sync-status {
  color: var(--gray-400);
  font-size: 10px;
}

.refresh-btn {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 6px;
  cursor: pointer;
  color: var(--gray-500);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.refresh-btn:hover {
  background: var(--gray-50);
  border-color: var(--gray-400);
  color: var(--gray-700);
}

.refresh-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.refresh-btn .icon {
  width: 14px;
  height: 14px;
}

.refresh-btn.spinning .icon {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.main-content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

/* Action bar */
.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  margin: 0 0 12px 0;
  background: var(--bg-primary);
  border-radius: var(--radius);
  height: 50px;
  border: 1px solid var(--border-color);
}

.action-bar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.action-bar-left label {
  font-size: 13px;
  color: var(--gray-700);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.action-bar-left input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--purple-600);
}

.action-bar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.selected-count {
  font-size: 13px;
  color: var(--gray-500);
  margin-right: 8px;
}

/* Buttons */
.btn {
  padding: 8px 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn .icon {
  width: 14px;
  height: 14px;
}

.btn-primary {
  background: var(--purple-600);
  color: white;
}

.btn-primary:hover {
  background: var(--purple-700);
}

.btn-primary:disabled {
  background: var(--gray-300);
  cursor: not-allowed;
}

.btn-secondary {
  background: var(--bg-primary);
  color: var(--gray-700);
  border: 1px solid var(--gray-300);
}

.btn-secondary:hover {
  background: var(--gray-50);
  border-color: var(--gray-400);
}

.btn-danger {
  background: var(--red-500);
  color: white;
}

.btn-danger:hover {
  background: var(--red-600);
}

.btn-ghost {
  background: transparent;
  color: var(--gray-600);
}

.btn-ghost:hover {
  background: var(--gray-100);
}

/* Upload area */
.upload-area {
  border: 1px dashed var(--gray-300);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  margin-bottom: 16px;
  background: var(--bg-primary);
  transition: all 0.15s ease;
  display: none;
}

#uploadStatus {
  text-align: center;
  margin-bottom: 20px;
  display: none;
}

.upload-area:hover {
  border-color: var(--purple-400);
  background: var(--purple-50);
}

body.dark-mode .upload-area:hover {
  background: rgba(168, 85, 247, 0.1);
}

.upload-area.dragover {
  border-color: var(--purple-500);
  background: var(--purple-50);
}

body.dark-mode .upload-area.dragover {
  background: rgba(168, 85, 247, 0.15);
}

.upload-area input[type="file"] {
  display: none;
}

.upload-area label {
  cursor: pointer;
  color: var(--gray-700);
  font-weight: 500;
}

.upload-area label strong {
  color: var(--purple-600);
}

.upload-area p {
  margin-top: 4px;
  font-size: 12px;
  color: var(--gray-500);
}

/* Table */
.table-container {
  background: var(--bg-primary);
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
  overflow: hidden;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px 16px;
  text-align: left;
}

th {
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-500);
  background: var(--gray-50);
  border-bottom: 1px solid var(--border-color);
}

td {
  font-size: 13px;
  color: var(--gray-700);
  border-bottom: 1px solid var(--gray-100);
}

tr:last-child td {
  border-bottom: none;
}

tr.expandable {
  cursor: pointer;
  transition: background 0.1s ease;
}


.col-checkbox { width: 48px; max-width: 48px; }
.col-expand { width: 32px; max-width: 32px; }
.col-order { width: 15%; }
.col-buyer { width: 15%; }
.col-country { width: 10%; }
.col-method { width: 20%; }
.col-tracking { width: 20%; }
.col-total { width: 10%; }
.col-shipped { width: 15%; }
.col-more { width: 48px; max-width: 48px; }

.expand-cell {
  width: 0%;
  padding: 12px 8px 12px 0;
}

.expand-icon {
  width: 16px;
  height: 16px;
  color: var(--gray-400);
  transition: transform 0.2s ease;
}

.expand-icon.open {
  transform: rotate(90deg);
}

.checkbox-cell {
  width: 0%;
  padding: 12px 8px 12px 16px;
}

.checkbox-cell input {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--purple-600);
}

/* Details row */
.details {
  display: none;
  background: var(--gray-50);
}

.details.open {
  display: table-row;
}

.details > td {
  padding: 0;
  border-bottom: 1px solid var(--border-color);
}

.details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  padding: 16px;
}

.details-grid-shipped {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  padding: 16px;
}


.details-section {
  padding: 16px;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  border-radius: 6px;
}

.details-section h4 {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-500);
  margin-bottom: 8px;
}

.details-section p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--gray-700);
}

.details-section p strong {
  font-weight: 500;
}

.summary-table {
  width: 100%;
}

.summary-table tr td {
  padding: 4px 0;
  border: none;
  font-size: 13px;
}

.summary-table tr td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.summary-table tr.total td {
  font-weight: 600;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
}

.items-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.item-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 13px;
}

.item-name {
  color: var(--gray-700);
}

.item-name .expansion {
  font-size: 12px;
  color: var(--gray-500);
}

.item-info {
  text-align: right;
  color: var(--gray-500);
  font-size: 12px;
}

/* Tracking code */
.tracking-code {
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  font-size: 12px;
  background: var(--purple-50);
  color: var(--purple-700);
  padding: 4px 8px;
  border-radius: 4px;
}

body.dark-mode .tracking-code {
  background: rgba(168, 85, 247, 0.2);
  color: var(--purple-400);
}

.tracking-untracked {
  color: var(--gray-400);
  font-size: 12px;
}

.copy-btn {
  padding: 4px 8px;
  font-size: 11px;
  margin-left: 8px;
}

/* More menu */
.more-cell {
  width: 48px;
  max-width: 48px;
  text-align: right;
  padding: 12px 16px 12px 8px;
}

.more-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: var(--gray-400);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.more-btn:hover {
  background: var(--gray-100);
  color: var(--gray-600);
}

.more-btn .icon {
  width: 16px;
  height: 16px;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  display: none;
  position: fixed;
  background: var(--bg-primary);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  border: 1px solid var(--border-color);
  min-width: 160px;
  z-index: 1000;
  padding: 4px;
}

.dropdown-menu.open {
  display: block;
}

.dropdown-item {
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  border-radius: 4px;
  color: var(--gray-700);
}

.dropdown-item:hover {
  background: color-mix(in srgb, var(--gray-100) 50%, transparent)
}

.dropdown-item .icon {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}

.dropdown-item.danger {
  color: var(--red-500);
}

.dropdown-item.danger:hover {
  background: color-mix(in srgb, var(--gray-100) 50%, transparent)
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 48px 20px;
}

.empty-state .icon {
  width: 40px;
  height: 40px;
  color: var(--gray-300);
  margin-bottom: 12px;
}

.empty-state h3 {
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-700);
  margin-bottom: 4px;
}

.empty-state p {
  font-size: 13px;
  color: var(--gray-500);
}

/* Modal */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.modal-overlay.open {
  display: flex;
}

.modal {
  background: var(--bg-primary);
  border-radius: 12px;
  padding: 24px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.modal h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

.modal p {
  font-size: 14px;
  color: var(--gray-600);
  margin-bottom: 20px;
  line-height: 1.5;
}

.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Hidden */
.hidden {
  display: none !important;
}

/* Order link */
.order-link {
  color: var(--gray-900);
  text-decoration: none;
  font-weight: 500;
}

.order-link:hover {
  color: var(--purple-600);
}

/* Tab content visibility */
.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* Snackbar */
.snackbar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: #18181b;
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  transition: all 0.2s ease;
  z-index: 2000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

body.dark-mode .snackbar {
  background: #fafafa;
  color: #18181b;
}

.snackbar.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.snackbar.success {
  background: var(--green-500);
}

.snackbar.error {
  background: var(--red-500);
}

/* Login Page */
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  background: var(--bg-secondary);
}

.login-card {
  background: var(--bg-primary);
  border-radius: 12px;
  padding: 40px;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border-color);
}

.login-header {
  text-align: center;
  margin-bottom: 32px;
}

.login-header h1 {
  font-size: 24px;
  font-weight: 600;
  color: var(--gray-900);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 8px;
}

.login-header p {
  color: var(--gray-500);
  font-size: 14px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

.form-group input {
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.15s ease;
  background: var(--bg-primary);
  color: var(--text-primary);
}

.form-group input:focus {
  outline: none;
  border-color: var(--purple-500);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);
}

.login-btn {
  padding: 12px;
  background: var(--purple-600);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
  margin-top: 8px;
}

.login-btn:hover {
  background: var(--purple-700);
}

.login-btn:disabled {
  background: var(--gray-300);
  cursor: not-allowed;
}

.login-error {
  color: var(--red-500);
  font-size: 13px;
  text-align: center;
}

.login-success {
  color: var(--green-500);
  font-size: 13px;
  text-align: center;
}

.forgot-password-link {
  color: var(--gray-500);
  font-size: 13px;
  text-align: center;
  cursor: pointer;
  margin-top: 16px;
}

.forgot-password-link:hover {
  color: var(--purple-600);
}

.login-step {
  display: none;
}

.login-step.active {
  display: block;
}

.back-link {
  color: var(--gray-500);
  font-size: 13px;
  text-align: center;
  cursor: pointer;
  margin-top: 16px;
}

.back-link:hover {
  color: var(--purple-600);
}

/* Hide dashboard when not logged in */
.app-container {
  display: none;
  width: 100%;
  height: 100%;
}

.app-container.authenticated {
  display: flex;
}

/* User menu trigger */
.user-menu-trigger {
  display: flex;
  align-items: center;
  padding: 8px;
  gap: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
  position: relative;
  transition: 0.2s padding ease;
}

.user-menu-trigger:hover {
  background: color-mix(in srgb, var(--gray-100) 50%, transparent);
}

.sidebar.collapsed .user-menu-trigger:hover {
  background: none;
  opacity: 0.9;
}

.user-menu-chevron {
  width: 16px;
  height: 16px;
  color: var(--gray-400);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.user-menu-trigger.open .user-menu-chevron {
  transform: rotate(180deg);
}

/* User info fade transition */
.user-info,
.user-menu-chevron {
  transition: opacity 0.2s ease;
  white-space: nowrap;
}

.user-avatar {
  flex-shrink: 0;
}

/* Collapsed sidebar footer styles - avatar stays in place, text fades */
.sidebar.collapsed .user-info,
.sidebar.collapsed .user-menu-chevron {
  opacity: 0;
  pointer-events: none;
}

.sidebar.collapsed .user-menu {
  min-width: 200px;
}

/* User menu popup */
.user-menu {
  display: none;
  position: absolute;
  bottom: calc(100%);
  left: 0;
  right: 0;
  background: var(--bg-primary);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.05);
  padding: 8px;
  z-index: 1000;
  border: 1px solid var(--border-color);
}

.user-menu.open {
  display: block;
}


.user-menu-header .user-email {
  font-size: 13px;
  color: var(--gray-500);
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--gray-700);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  transition: background 0.15s ease;
}

.user-menu-item:hover {
  background: var(--gray-100);
}

.user-menu-item .icon {
  width: 16px;
  height: 16px;
  color: var(--gray-500);
}

.user-menu-divider {
  height: 1px;
  background: var(--gray-200);
  margin: 4px 0;
}

/* Settings Page */
.settings-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-secondary);
  z-index: 100;
  overflow-y: auto;
}

.settings-container.open {
  display: block;
}

.settings-page {
  max-width: 600px;
  margin: 0 auto;
  padding: 24px;
}

.settings-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}

.settings-back-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  color: var(--gray-600);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.settings-back-btn:hover {
  background: var(--gray-200);
}

.settings-header h1 {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
}

.settings-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.settings-section {
  background: var(--bg-primary);
  border-radius: 12px;
  padding: 24px;
  border: 1px solid var(--border-color);
}

.settings-section h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.settings-description {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.settings-description strong {
  color: var(--text-secondary);
}

.settings-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settings-form .btn {
  align-self: flex-start;
}

.settings-note {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 12px;
}

.settings-success {
  color: var(--green-500);
  font-size: 13px;
  margin-top: 8px;
}

.settings-error {
  color: var(--red-500);
  font-size: 13px;
  margin-top: 8px;
}

/* Theme Toggle */
.theme-toggle {
  display: flex;
  gap: 8px;
}

.theme-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.theme-option:hover {
  border-color: var(--purple-500);
  color: var(--text-primary);
}

.theme-option.active {
  border-color: var(--purple-500);
  background: var(--purple-50);
  color: var(--purple-700);
}

body.dark-mode .theme-option.active {
  background: var(--purple-700);
  color: white;
}