/* ============================================================
 * pages.css —— 各页面特定样式
 * 首页 / 档案详情 / 表单 / 繁殖 / 知识库 / 设置 / 标签管理
 * ============================================================ */

/* ---------- 通用页面顶部标题（硬约束：所有子页面标题行高度一致） ---------- */
.page-title {
  position: absolute; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  padding: 30px 16px 12px; /* 问题 6：顶部留白从 50px 减至 30px，标题上移 */
  min-height: 90px;
  display: flex; align-items: center; gap: 10px;
}
.page-title .pt-name {
  font-family: 'Noto Sans SC', sans-serif; font-size: 20px; font-weight: 700; color: var(--text-dark);
  text-shadow: var(--text-halo); letter-spacing: 0.5px; line-height: 28px;
}
.page-title .pt-logo { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; }
.page-title .pt-action { margin-left: auto; }

/* 统一返回按钮（左上角底色胶囊，UED 风格） */
.back-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 14px 6px 10px; border-radius: 20px;
  background: rgba(255,255,255,0.62); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.7); color: var(--text-dark);
  font-size: 14px; font-weight: 600; cursor: pointer;
  box-shadow: 0 2px 10px rgba(20,60,100,0.10); text-shadow: var(--text-halo);
  text-decoration: none; transition: all .2s ease;
}
.back-btn:active { transform: scale(0.96); }
.back-btn svg { width: 20px; height: 20px; flex-shrink: 0; }

/* ---------- 首页 Header 栏（UED §6.1） ---------- */
.home-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between;
  padding: 34px 16px 10px; /* 问题 6：与.page-title 对齐，顶部留白 30px */
}
.home-header .header-left { display: flex; align-items: center; gap: 10px; }
.home-header .header-logo {
  width: 36px; height: 36px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.home-header .header-title {
  font-family: 'Noto Sans SC', sans-serif; font-size: 20px; font-weight: 700; color: var(--text-dark);
  letter-spacing: 0.5px; text-shadow: var(--text-halo); line-height: 28px;
}
.home-header .header-search-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.62); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.7); display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-mid); box-shadow: 0 2px 8px rgba(20,60,100,0.06);
}

/* Tab 计数徽章 */
.tab-count { font-size: 11px; font-weight: 600; opacity: 0.85; }

/* 顶部 in-app-nav（三态筛选 Tab） */
.in-app-nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  padding: 54px 16px 0;
  display: flex; flex-direction: column; gap: 10px;
}
.in-app-nav .ian-row { display: flex; justify-content: center; gap: 10px; }
.in-app-nav .ian-row::-webkit-scrollbar { display: none; }
.search-wrap {
  overflow: hidden; max-height: 0; transition: max-height .35s ease;
}
.search-wrap.open { max-height: 80px; }
.search-wrap .finput { margin-top: 2px; }

/* Tab 通用 */
.tab {
  padding: 7px 17px; border-radius: 20px; font-size: 13px; font-weight: 500; cursor: pointer;
  background: rgba(255,255,255,0.55); color: var(--text-mid); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.7); box-shadow: 0 2px 8px rgba(20,60,100,0.06);
  transition: all .25s ease;
  white-space: nowrap; flex-shrink: 0;
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.tab:active { transform: scale(0.95); }
.tab.active { 
  background: var(--grad-blue); color: var(--cloud-white); 
  border-color: rgba(255,255,255,0.55); 
  box-shadow: 0 3px 12px rgba(74,144,217,0.42);
  font-weight: 600;
}

/* ---------- 首页列表 ---------- */
.list-section { padding-bottom: 10px; }
.bird-list { display: flex; flex-direction: column; gap: 2px; }

/* ---------- 档案详情 ---------- */
.detail-hero {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: rgba(255,255,255,0.46); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-radius: 20px; margin: 4px 2px 0; padding: 16px 12px 14px;
  box-shadow: 0 4px 18px rgba(20,60,100,0.10);
}
.hero-avatar {
  width: 96px; height: 96px; border-radius: 50%; border: 3.5px solid #3E8BD8; object-fit: cover;
  background: var(--grad-blue); display: flex; align-items: center; justify-content: center;
  color: var(--cloud-white); font-size: 34px; font-weight: 700; font-family: 'Noto Sans SC', serif;
  box-shadow: 0 8px 30px rgba(20,60,100,0.26);
}
.detail-name { font-size: 26px; font-weight: 700; margin-top: 11px; color: var(--text-dark); text-shadow: var(--text-halo); font-family: 'Noto Sans SC', serif; letter-spacing: 0.5px; }
.detail-tags { display: flex; gap: 6px; justify-content: center; margin-top: 7px; flex-wrap: wrap; }
.detail-age { font-size: 11.5px; color: var(--text-light); margin-top: 7px; text-shadow: var(--text-halo); font-weight: 500; }

/* 编辑/删除按钮（右上角，UED §6.2） */
.detail-edit-btn {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,0.66); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.7); display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.06); color: var(--text-mid);
}
.detail-edit-btn svg { width: 18px; height: 18px; }

/* 信息区 2x2 玻璃卡片网格（UED .iitem） */
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 12px 2px 0; }
.iitem {
  background: rgba(255,255,255,0.66); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-radius: 13px; padding: 10px 12px; border: 1px solid rgba(255,255,255,0.75);
}
.iitem .ilabel { font-size: 10.5px; color: var(--text-mid); margin-bottom: 3px; }
.iitem .ivalue { font-size: 13.5px; font-weight: 600; color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: var(--text-halo); }

.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.gallery-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 11px; border: 1px solid rgba(255,255,255,0.7); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4); }

/* 亲鸟并排卡片（UED .parent-card） */
.parent-row { display: flex; gap: 10px; margin-top: 12px; }
.parent-card {
  flex: 1; background: rgba(255,255,255,0.66); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-radius: 15px; padding: 11px 10px 10px; border: 1px solid rgba(255,255,255,0.75); text-align: center;
}
.parent-card .pavatar {
  width: 42px; height: 42px; border-radius: 50%; margin: 0 auto 6px;
  display: flex; align-items: center; justify-content: center; color: #fff;
  font-size: 16px; font-weight: 700; font-family: 'Noto Sans SC', serif;
}
.parent-card .pavatar.male-bg { background: linear-gradient(135deg, #64B5F6, #42A5F5); }
.parent-card .pavatar.female-bg { background: linear-gradient(135deg, #F48FB1, #EC407A); }
.parent-card .pname2 { font-size: 13px; font-weight: 600; color: var(--text-dark); text-shadow: var(--text-halo); }
.parent-card .prole { font-size: 10px; color: var(--text-mid); margin-top: 2px; }
.parent-card .pnote { font-size: 10.5px; color: var(--text-mid); margin-top: 3px; }
.parent-card .pnote.empty { color: #9E9E9E; }

/* 时间线（UED 风格：蓝橙渐变竖线 + 圆点 + 标签徽章） */
.timeline { margin-top: 12px; position: relative; padding: 13px 14px 13px 30px; background: rgba(255,255,255,0.52); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 16px; box-shadow: 0 4px 16px rgba(20,60,100,0.10); }
.timeline::before { content: ''; position: absolute; left: 14px; top: 14px; bottom: 14px; width: 2px; background: linear-gradient(180deg, #3E8BD8, #FF7E3A); border-radius: 1px; opacity: 0.55; }
.timeline-item { position: relative; margin-bottom: 13px; }
.timeline-item:last-child { margin-bottom: 0; }
.tl-dot { position: absolute; left: -20px; top: 3px; width: 11px; height: 11px; border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 1px 4px rgba(20,60,100,0.2); background: #3E8BD8; }
/* 时间线节点图标区分 */
.tl-dot.stage-pairing { background: #FF9A6C; } /* 配对 - 暖橙 */
.tl-dot.stage-egg { background: #FFD4A8; } /* 下蛋 - 浅橙 */
.tl-dot.stage-incubation { background: #FFB74D; } /* 孵化 - 橙色 */
.tl-dot.stage-hatching { background: #4CAF50; } /* 破壳 - 绿色 */
.tl-dot.stage-chick { background: #81C784; } /* 幼鸟 - 浅绿 */
.tl-dot.stage-fledged { background: #42A5F5; } /* 离巢 - 蓝色 */
.tl-dot.stage-independent { background: #5BA8D0; } /* 独立 - 浅蓝 */
.tl-card { padding: 10px 12px; }
.tl-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.tl-date { font-size: 10.5px; color: var(--text-mid); }
.tl-content { font-size: 12.5px; color: #0c3157; line-height: 1.55; text-shadow: 0 1px 4px rgba(255,255,255,0.9), 0 0 2px rgba(255,255,255,0.65); }
.tl-extra { font-size: 12.5px; color: var(--text-mid); margin-top: 6px; }

/* 空状态玻璃卡片（UED 风格） */
.empty-glass {
  background: rgba(255,255,255,0.56); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: 14px; padding: 18px 16px; text-align: center;
  font-size: 13.5px; color: var(--text-light); border: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 4px 16px rgba(20,60,100,0.08);
}

/* 统一空白页文案规范（问题 1） */
.empty-state {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  padding: 0 24px;
}
.empty-state-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
  text-shadow: var(--text-halo);
  margin-bottom: 8px;
}
.empty-state-desc {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-light);
  text-shadow: var(--text-halo);
}

/* ---------- 表单页 ---------- */
.form-scroll { padding-bottom: 200px; }
.form-group { background: rgba(255,255,255,0.66); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 18px; padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--card-shadow); border: 1px solid rgba(255,255,255,0.75); }
.seg { display: flex; gap: 8px; background: rgba(255,255,255,0.5); border-radius: 14px; padding: 4px; }
.seg button { flex: 1; padding: 9px 0; border-radius: 11px; font-size: 13.5px; color: var(--text-mid); background: transparent; transition: all .2s ease; }
.seg button.active { background: var(--grad-blue); color: var(--cloud-white); box-shadow: 0 2px 10px rgba(74,144,217,0.4); }

/* 头像上传区（UED .upzone 风格） */
.avatar-upzone {
  width: 100%; height: 156px; border-radius: 20px; border: 2px dashed rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.42); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  cursor: pointer; transition: all .2s; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  margin-bottom: 14px;
}
.avatar-upzone:hover { border-color: var(--sky-top); background: rgba(74,144,217,0.06); }
.avatar-upzone .upreview {
  width: 84px; height: 84px; border-radius: 50%; overflow: hidden;
  background: rgba(255,255,255,0.5); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(20,60,100,0.18), inset 0 0 0 2px rgba(255,255,255,0.6);
}
.avatar-upzone .upreview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-upzone svg.icz { width: 34px; height: 34px; color: var(--text-mid); }
.avatar-upzone p { font-size: 13.5px; color: var(--text-mid); margin: 0; }
.avatar-upzone .up-hint { font-size: 12px; color: var(--text-light); margin-top: -4px; }

.mode-row { display: flex; gap: 8px; margin-bottom: 10px; }

/* ---------- 繁殖 ---------- */
.breeding-list { display: flex; flex-direction: column; gap: 2px; }

/* 繁殖详情 */
.breed-header { padding: 8px 0 4px; }
.bh-card {
  background: rgba(255,255,255,0.56); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: 14px; padding: 14px 16px; border: 1px solid rgba(255,255,255,0.7);
  text-align: center;
}
.bh-card .bh-names { font-family: 'Noto Sans SC', serif; font-size: 19px; font-weight: 700; color: var(--text-dark); }
.bh-card .bh-meta { font-size: 12.5px; color: var(--text-mid); margin-top: 6px; }

/* ---------- 知识库 ---------- */
.kb-list { display: flex; flex-direction: column; gap: 2px; }

/* ---------- 设置 / 标签管理 ---------- */
.settings-logo { display: flex; flex-direction: column; align-items: center; margin: 6px 0 10px; }
.settings-logo img { width: 92px; height: 92px; border-radius: 20px; box-shadow: 0 6px 20px rgba(20,60,100,0.22); }
.settings-logo .sl-name { font-family: 'Noto Sans SC', serif; font-size: 19px; font-weight: 700; margin-top: 8px; color: var(--text-dark); text-shadow: var(--text-halo); }
.settings-logo .sl-ver { font-size: 12.5px; font-weight: 600; color: var(--text-dark); margin-top: 3px; text-shadow: var(--text-halo); }

.info-row { display: flex; align-items: center; padding: 6px 0; font-size: 14px; }
.info-k { font-weight: 600; color: var(--text-dark); min-width: 50px; }
.info-v { color: var(--text-mid); }

.tag-group { background: var(--card-bg); border-radius: 18px; padding: 12px 14px; margin-bottom: 12px; }
.tag-group .tg-head { font-size: 14px; font-weight: 700; color: var(--text-dark); margin-bottom: 10px; }
.tag-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.4); }
.tag-row:last-child { border-bottom: none; }
.tag-row .tr-name { flex: 1; font-size: 14px; color: var(--text-dark); }
.tag-row .tr-count { font-size: 11.5px; color: var(--text-light); margin-right: 4px; }
.tag-row .tr-edit, .tag-row .tr-del { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--text-mid); background: rgba(255,255,255,0.5); }
.tag-row .tr-del { color: #FF7043; }
.tag-row input.finput { flex: 1; padding: 8px 12px; font-size: 14px; }

/* ---------- 成长报告预览 ---------- */
.report-preview { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 16px; }
.report-preview img { max-width: 100%; border-radius: 12px; box-shadow: 0 8px 28px rgba(20,60,100,0.28); }
.report-actions { display: flex; gap: 10px; width: 100%; max-width: 420px; }
.report-actions .btn-primary, .report-actions .btn-secondary { flex: 1; }

/* ---------- 富文本编辑器（知识编辑） ---------- */
.kb-editor { border: 1.5px solid rgba(255,255,255,0.75); border-radius: var(--radius-input); background: var(--input-bg); }
.kb-toolbar { display: flex; gap: 4px; padding: 6px 8px; border-bottom: 1px solid rgba(0,0,0,0.08); flex-wrap: wrap; }
.kb-tbtn { width: 32px; height: 32px; border: none; border-radius: 8px; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #555; font-size: 15px; transition: background .15s; }
.kb-tbtn:hover { background: rgba(0,0,0,0.06); }
.kb-tbtn:active { background: rgba(0,0,0,0.1); }

/* contentEditable 编辑器 */
#k-content[contenteditable] { padding: 12px; min-height: 200px; outline: none; font-size: 14.5px; line-height: 1.7; color: var(--text-dark); word-break: break-word; }
#k-content[contenteditable]:empty::before { content: attr(data-placeholder); color: var(--text-light); pointer-events: none; }
#k-content[contenteditable] ul { list-style: disc; padding-left: 1.5em; margin: 0.5em 0; }
#k-content[contenteditable] li { margin: 0.2em 0; }

/* 知识详情富文本内容展示 */
.kb-rich-content ul { list-style: disc; padding-left: 1.5em; margin: 0.5em 0; }
.kb-rich-content ol { list-style: decimal; padding-left: 1.5em; margin: 0.5em 0; }
.kb-rich-content li { margin: 0.2em 0; }
.kb-rich-content b, .kb-rich-content strong { font-weight: 700; }
.kb-rich-content i, .kb-rich-content em { font-style: italic; }

/* 空态插画容器 */
.empty-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 90px; }

/* ============ 暗色系覆盖（页面层） ============ */
/* 返回按钮暗色 */
[data-theme="dark"] .back-btn {
  background: rgba(50,50,55,0.7); border: 1px solid rgba(60,60,65,0.5);
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
/* 首页 header 搜索按钮暗色 */
[data-theme="dark"] .home-header .header-search-btn {
  background: rgba(50,50,55,0.7); border: 1px solid rgba(60,60,65,0.5);
}
/* Tab 暗色 */
[data-theme="dark"] .tab {
  background: rgba(55,55,60,0.7); border: 1px solid rgba(70,70,75,0.6); color: #C0C0C0;
}
[data-theme="dark"] .tab.active {
  background: var(--grad-blue); color: var(--cloud-white);
  border-color: rgba(60,80,120,0.5);
  box-shadow: 0 3px 12px rgba(74,144,217,0.42);
}
/* 档案详情 hero 暗色 */
[data-theme="dark"] .detail-hero {
  background: rgba(40,40,45,0.55);
  box-shadow: 0 4px 18px rgba(0,0,0,0.2);
}
/* 编辑按钮暗色 */
[data-theme="dark"] .detail-edit-btn {
  background: rgba(50,50,55,0.7); border: 1px solid rgba(60,60,65,0.5);
}
/* 信息网格暗色 */
[data-theme="dark"] .iitem {
  background: rgba(50,50,55,0.65); border: 1px solid rgba(60,60,65,0.5);
}
/* 画廊图片暗色边框 */
[data-theme="dark"] .gallery-grid img {
  border: 1px solid rgba(60,60,65,0.5);
}
/* 亲鸟卡片暗色 */
[data-theme="dark"] .parent-card {
  background: rgba(50,50,55,0.65); border: 1px solid rgba(60,60,65,0.5);
}
/* 时间线暗色 */
[data-theme="dark"] .timeline {
  background: rgba(50,50,55,0.55); border: 1px solid rgba(60,60,65,0.4);
}
[data-theme="dark"] .tl-dot {
  border-color: rgba(40,40,45,0.9);
}
[data-theme="dark"] .tl-content {
  color: #B0B0B0; text-shadow: none;
}
/* 空状态玻璃卡片暗色 */
[data-theme="dark"] .empty-glass {
  background: rgba(50,50,55,0.55); border: 1px solid rgba(60,60,65,0.5);
}
/* 表单组暗色 */
[data-theme="dark"] .form-group {
  background: rgba(50,50,55,0.65); box-shadow: 0 4px 16px rgba(0,0,0,0.2); border: 1px solid rgba(60,60,65,0.5);
}
/* 分段选择器暗色 */
[data-theme="dark"] .seg {
  background: rgba(50,50,55,0.5);
}
/* 头像上传区暗色 */
[data-theme="dark"] .avatar-upzone {
  background: rgba(50,50,55,0.4); border: 2px dashed rgba(80,80,90,0.6);
}
[data-theme="dark"] .avatar-upzone:hover {
  border-color: #3E7BD8; background: rgba(62,123,216,0.08);
}
[data-theme="dark"] .avatar-upzone .upreview {
  background: rgba(50,50,55,0.5); box-shadow: 0 4px 14px rgba(0,0,0,0.2), inset 0 0 0 2px rgba(60,60,65,0.5);
}
/* 繁殖详情头部暗色 */
[data-theme="dark"] .bh-card {
  background: rgba(50,50,55,0.6); border: 1px solid rgba(60,60,65,0.5);
}
/* 标签管理行暗色 */
[data-theme="dark"] .tag-row {
  border-bottom: 1px solid rgba(60,60,65,0.4);
}
[data-theme="dark"] .tag-row .tr-edit, [data-theme="dark"] .tag-row .tr-del {
  background: rgba(50,50,55,0.5);
}
[data-theme="dark"] .tag-group {
  border: 1px solid rgba(60,60,65,0.3);
}
/* 富文本编辑器暗色 */
[data-theme="dark"] .kb-editor {
  border: 1.5px solid rgba(60,60,65,0.6); background: var(--input-bg);
}
[data-theme="dark"] .kb-toolbar {
  border-bottom: 1px solid rgba(60,60,65,0.4);
}
[data-theme="dark"] .kb-tbtn { color: #B0B0B0; }
[data-theme="dark"] .kb-tbtn:hover { background: rgba(255,255,255,0.08); }
/* 设置页 logo 阴影暗色 */
[data-theme="dark"] .settings-logo img {
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

/* ---------- 主题切换 UI ---------- */
.theme-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0;
}
.theme-label {
  font-size: 14px; font-weight: 500; color: var(--text-dark);
}
.theme-toggle {
  display: flex; gap: 10px;
}
.theme-opt {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  cursor: pointer; padding: 6px 12px; border-radius: 12px;
  border: 2px solid transparent; transition: all .2s ease;
}
.theme-opt.active {
  border-color: var(--sky-top);
  background: rgba(62,139,216,0.08);
}
.theme-opt span {
  font-size: 11.5px; font-weight: 600; color: var(--text-mid);
}
.theme-opt.active span { color: var(--sky-top); }
.theme-preview {
  width: 48px; height: 32px; border-radius: 8px;
  border: 1px solid rgba(120,120,120,0.2);
}
.theme-preview.theme-light {
  background: linear-gradient(180deg, #87CEEB 0%, #B8E0F0 100%);
}
.theme-preview.theme-dark {
  background: linear-gradient(180deg, #2C3E50 0%, #1E1E1E 100%);
}
/* 暗色下主题切换 UI */
[data-theme="dark"] .theme-opt.active {
  border-color: #5F96D8; background: rgba(62,123,216,0.15);
}
[data-theme="dark"] .theme-opt.active span { color: #5F96D8; }

/* ---------- 登录页 ---------- */
.login-wrap {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.login-card {
  width: 100%; max-width: 340px;
  background: rgba(255,255,255,0.72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-radius: 24px; padding: 36px 28px 32px;
  border: 1px solid rgba(255,255,255,0.8);
  box-shadow: 0 12px 40px rgba(20,60,100,0.18);
  text-align: center;
}
.login-logo {
  width: 72px; height: 72px; border-radius: 18px;
  box-shadow: 0 6px 20px rgba(20,60,100,0.2);
  margin: 0 auto 12px;
  display: block;
}
.login-title {
  font-family: 'Noto Sans SC', serif; font-size: 22px; font-weight: 700;
  color: var(--text-dark); text-shadow: var(--text-halo);
}
.login-sub {
  font-size: 13px; color: var(--text-light); margin-top: 6px;
}
.login-form {
  margin-top: 24px; text-align: left;
}
.login-field {
  margin-bottom: 14px;
}
.login-label {
  display: block; font-size: 12.5px; font-weight: 600;
  color: var(--text-mid); margin-bottom: 5px;
}
.login-input {
  width: 100%; padding: 11px 14px; font-size: 14.5px;
  border-radius: 12px;
}
.login-btn {
  width: 100%; margin-top: 8px; padding: 12px 0; font-size: 15px;
  border-radius: 14px;
}
.login-error {
  font-size: 12.5px; color: #E53935; min-height: 18px;
  text-align: center; margin-top: 4px;
  opacity: 0; transition: opacity .2s;
}
.login-error.show { opacity: 1; }

/* 登录方式切换 */
.login-switch {
  text-align: center; margin-top: 14px;
}
.login-switch-btn {
  font-size: 13px; color: var(--text-muted, #8a9bae);
  cursor: pointer; transition: color .2s;
}
.login-switch-btn:hover { color: var(--accent, #43a7c7); }

/* Magic Link 成功提示 */
.login-success {
  font-size: 13px; color: #2e7d32; text-align: center;
  padding: 12px 0; line-height: 1.6;
}
[data-theme="dark"] .login-success { color: #66bb6a; }
[data-theme="dark"] .login-switch-btn { color: var(--text-muted-dark, #7a8a9e); }

/* 登录页暗色适配 */
[data-theme="dark"] .login-card {
  background: rgba(40,40,45,0.78);
  border: 1px solid rgba(60,60,65,0.6);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
[data-theme="dark"] .login-logo {
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
[data-theme="dark"] .login-input {
  background: rgba(50,50,55,0.7);
  border: 1px solid rgba(60,60,65,0.5);
  color: var(--text-dark);
}
[data-theme="dark"] .login-error { color: #FF7043; }