/* ================================================================
   LYMOW Vanguard — Shared Styles (i18n picker, theme toggle, light theme)
   ================================================================ */

/* ---- CSS Variables for Dark/Light Themes (暖色编辑式 / warm editorial) ---- */
:root {
  /* Warm dark theme (default) — 暖棕暗色，去掉了冷蓝科技感 */
  --bt-bg: #171512;
  --bt-card: #211e19;
  --bt-border: #38322a;
  --bt-border-subtle: #2a251f;
  --bt-text-primary: #ede6d8;
  --bt-text-secondary: #a89a86;
  --bt-text-tertiary: #6e6355;
  --bt-header-bg: #211e19;
  --bt-input-bg: #14110e;
  --bt-accent: #c2703d;
  --bt-success: #7ba832;
  --bt-danger: #e2705c;
  --bt-warning: #d9a441;
  --bt-hover-bg: #2b251e;
  --bt-accent-rgb: 194, 112, 61;
  --bt-success-rgb: 123, 168, 50;
  --bt-danger-rgb: 226, 112, 92;
  --bt-warning-rgb: 217, 164, 65;
  --bt-text-secondary-rgb: 168, 154, 134;
}

[data-theme="light"] {
  /* Warm editorial (light) — 与 admin-theme.css 保持一致 */
  --bt-bg: #faf6ef;
  --bt-card: #fffdf9;
  --bt-border: #e7ddc9;
  --bt-border-subtle: #efe8d8;
  --bt-text-primary: #3a3121;
  --bt-text-secondary: #6f6350;
  --bt-text-tertiary: #9a8c73;
  --bt-header-bg: #fffdf9;
  --bt-input-bg: #f3ede0;
  --bt-accent: #b45309;
  --bt-success: #4d7c0f;
  --bt-danger: #b91c1c;
  --bt-warning: #a16207;
  --bt-hover-bg: #f4ede1;
  --bt-accent-rgb: 180, 83, 9;
  --bt-success-rgb: 77, 124, 15;
  --bt-danger-rgb: 185, 28, 28;
  --bt-warning-rgb: 161, 98, 7;
  --bt-text-secondary-rgb: 111, 99, 80;
}

/* 标题走衬线，营造「编辑式 / 纸感」，正文仍保留无衬线 */
h1, h2, h3, h4 {
  font-family: Georgia, 'Times New Roman', 'Songti SC', 'Noto Serif SC', serif;
}

/* ---- Language Picker ---- */
.lang-picker-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.lang-trigger {
  background: transparent;
  border: 1px solid var(--bt-border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--bt-text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.lang-trigger:hover {
  color: var(--bt-accent);
  border-color: var(--bt-accent);
}

.lang-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: var(--bt-card);
  border: 1px solid var(--bt-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  z-index: 1000;
  min-width: 160px;
  overflow: hidden;
}

.lang-menu.show { display: block; }

.lang-item {
  display: block;
  width: 100%;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--bt-text-primary);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}

.lang-item:hover { background: var(--bt-hover-bg); }
.lang-item.active { color: var(--bt-accent); font-weight: 600; }

/* ---- Theme Toggle ---- */
.theme-toggle-group {
  display: inline-flex;
  gap: 2px;
  background: var(--bt-card);
  border: 1px solid var(--bt-border);
  border-radius: 6px;
  padding: 2px;
}

.theme-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
}

.theme-btn:hover { background: var(--bt-hover-bg); }
.theme-btn.active { background: var(--bt-accent); color: #fff; }

/* ---- User Menu ---- */
.user-menu-wrap {
  position: relative;
  display: inline-flex;
}

.user-menu-trigger {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #fff;
  border: none;
  cursor: pointer;
  line-height: 1;
}

.user-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 200px;
  background: var(--bt-card);
  border: 1px solid var(--bt-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  z-index: 1000;
  overflow: hidden;
}

.user-dropdown.show {
  display: block;
}

.user-dropdown-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
}

.user-dropdown-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  flex-shrink: 0;
}

.user-dropdown-name {
  font-weight: 600;
  color: var(--bt-text-primary);
  font-size: 14px;
}

.user-dropdown-email {
  font-size: 11px;
  color: var(--bt-text-tertiary);
}

.user-dropdown-divider {
  border-top: 1px solid var(--bt-border-subtle);
}

.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 13px;
  color: var(--bt-text-primary);
  text-decoration: none;
  transition: background 0.1s;
}

.user-dropdown-item:hover {
  background: var(--bt-hover-bg);
}

.user-dropdown-item.logout {
  color: var(--bt-danger);
}