/* QQ经典农场 · 设计令牌与主题
   默认跟随系统（沧浪）；data-theme=light|dark × data-palette=dai|lang|xiang|he
   语义色（稀有度等）随主题微调，不随色板换家族。
   色名取意传统色：青黛、沧浪、秋香、藕荷。 */

:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  /* 夜间 · 青黛（默认） */
  --ui-bg-0: #0f1412;
  --ui-bg-1: #151c18;
  --ui-bg-2: #1c2621;
  --ui-panel: #1a2420;
  --ui-panel-2: #202b25;
  --ui-field: #121a16;
  --ui-line: #2b3a32;
  --ui-line-strong: #4a5f54;
  --ui-text: #e8efe9;
  --ui-muted: #93a89c;
  --ui-accent: #6fbf8a;
  --ui-accent-2: #8fd4a3;
  --ui-accent-soft: #234536;
  --ui-accent-border: #3f7358;
  --ui-on-accent: #0d1f16;
  --ui-good: #7ddea2;
  --ui-good-soft: #203b2c;
  --ui-warn: #e6c57c;
  --ui-warn-soft: #3c321e;
  --ui-danger: #f0a3a9;
  --ui-danger-soft: #41262d;
  --ui-info: #8ec6c8;
  --ui-info-soft: #233a3a;
  --ui-special: #d4b8e8;
  --ui-special-soft: #352b44;
  --ui-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  --ui-backdrop: rgba(0, 0, 0, 0.55);
  /* 语义 · 传统色系 */
  --rare-common: #8a958f;
  --rare-rare: #57c3c2;
  --rare-precious: #7f9fd0;
  --rare-craft: #e0b35a;
  /* 土地语义色（夜间柔化） */
  --land-1: #9aa8a0;
  --land-2: #f0a3a9;
  --land-3: #a8b4bc;
  --land-4: #e6c57c;
  --land-5: #d4b8e8;
  --land-6: #8ec6c8;
  --land-1-soft: #2a322e;
  --land-2-soft: #41262d;
  --land-3-soft: #2a3238;
  --land-4-soft: #3c321e;
  --land-5-soft: #352b44;
  --land-6-soft: #1f3436;
  --radius-shell: 12px;
  --radius-card: 10px;
  --radius-ctl: 8px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --ui-bg-0: #eef1ef;
  --ui-bg-1: #e6ebe8;
  --ui-bg-2: #dce3df;
  --ui-panel: #f7f8f7;
  --ui-panel-2: #eef2f0;
  --ui-field: #f7f8f7;
  --ui-line: #d2ddd6;
  --ui-line-strong: #8a9c91;
  --ui-text: #22332a;
  --ui-muted: #5b6f63;
  --ui-accent: #3d7a5a;
  --ui-accent-2: #2f6348;
  --ui-accent-soft: #e2f0e7;
  --ui-accent-border: #7fad92;
  --ui-on-accent: #ffffff;
  --ui-good: #216647;
  --ui-good-soft: #e4f2e9;
  --ui-warn: #8a650e;
  --ui-warn-soft: #fbf0d9;
  --ui-danger: #a82c39;
  --ui-danger-soft: #fbe9ec;
  --ui-info: #2f6f78;
  --ui-info-soft: #e5f2f3;
  --ui-special: #7a4a8a;
  --ui-special-soft: #f1eafa;
  --ui-shadow: 0 10px 28px rgba(34, 51, 44, 0.08);
  --ui-backdrop: rgba(27, 38, 33, 0.4);
  --rare-common: #6b756f;
  --rare-rare: #2f6f78;
  --rare-precious: #3a5fa8;
  --rare-craft: #a67c1a;
  --land-1: #6b756f;
  --land-2: #a82c39;
  --land-3: #475569;
  --land-4: #8a650e;
  --land-5: #7a4a8a;
  --land-6: #2f6f78;
  --land-1-soft: #e8eee9;
  --land-2-soft: #fbe9ec;
  --land-3-soft: #e8edf2;
  --land-4-soft: #fbf0d9;
  --land-5-soft: #f1eafa;
  --land-6-soft: #e5f2f3;
}

/* 沧浪 · 浪青 */
:root[data-theme="dark"][data-palette="lang"] {
  --ui-bg-0: #0d1316;
  --ui-bg-1: #121a1f;
  --ui-bg-2: #18232a;
  --ui-panel: #152028;
  --ui-panel-2: #1b2831;
  --ui-line: #2c3c46;
  --ui-line-strong: #516873;
  --ui-muted: #8fa8b3;
  --ui-accent: #6eb8c4;
  --ui-accent-2: #8ecdd6;
  --ui-accent-soft: #1d3d43;
  --ui-accent-border: #3d7580;
  --ui-on-accent: #0c1c20;
}
:root[data-theme="light"][data-palette="lang"] {
  --ui-bg-0: #eef2f3;
  --ui-bg-1: #e5ecee;
  --ui-bg-2: #dae4e8;
  --ui-panel: #f7f9f9;
  --ui-panel-2: #eef3f5;
  --ui-field: #f7f9f9;
  --ui-line: #c8d9e0;
  --ui-muted: #4f6a74;
  --ui-accent: #2f6f78;
  --ui-accent-2: #255860;
  --ui-accent-soft: #dceef1;
  --ui-accent-border: #7aafb8;
  --ui-on-accent: #ffffff;
}

/* 秋香 · 秋日暖金 */
:root[data-theme="dark"][data-palette="xiang"] {
  --ui-bg-0: #16110c;
  --ui-bg-1: #1d160f;
  --ui-bg-2: #261d14;
  --ui-panel: #201810;
  --ui-panel-2: #2a2015;
  --ui-line: #3d2f22;
  --ui-line-strong: #6b563d;
  --ui-muted: #b3a084;
  --ui-accent: #e0a35c;
  --ui-accent-2: #efb878;
  --ui-accent-soft: #3d2a14;
  --ui-accent-border: #8a6234;
  --ui-on-accent: #1a1208;
}
:root[data-theme="light"][data-palette="xiang"] {
  --ui-bg-0: #f3f1ed;
  --ui-bg-1: #ebe6df;
  --ui-bg-2: #e2dbd1;
  --ui-panel: #faf9f7;
  --ui-panel-2: #f3efe9;
  --ui-field: #faf9f7;
  --ui-line: #e0d2bc;
  --ui-muted: #6e5c45;
  --ui-accent: #a66a28;
  --ui-accent-2: #8a571f;
  --ui-accent-soft: #f5e8d6;
  --ui-accent-border: #c9a06a;
  --ui-on-accent: #ffffff;
}

/* 藕荷 · 藕合浅绯 */
:root[data-theme="dark"][data-palette="he"] {
  --ui-bg-0: #151014;
  --ui-bg-1: #1c151b;
  --ui-bg-2: #251c23;
  --ui-panel: #1f1720;
  --ui-panel-2: #292028;
  --ui-line: #3a2c36;
  --ui-line-strong: #66505c;
  --ui-muted: #b09aa6;
  --ui-accent: #d4a0b4;
  --ui-accent-2: #e4b6c6;
  --ui-accent-soft: #3d2832;
  --ui-accent-border: #7f5568;
  --ui-on-accent: #1c1016;
}
:root[data-theme="light"][data-palette="he"] {
  --ui-bg-0: #f2f0f1;
  --ui-bg-1: #eae6e8;
  --ui-bg-2: #e1dbde;
  --ui-panel: #faf9f9;
  --ui-panel-2: #f3eff0;
  --ui-field: #faf9f9;
  --ui-line: #e4d0d8;
  --ui-muted: #6e5360;
  --ui-accent: #9a5570;
  --ui-accent-2: #7f425a;
  --ui-accent-soft: #f5e6ec;
  --ui-accent-border: #c89aab;
  --ui-on-accent: #ffffff;
}

/* 主区渐变：跟随色板（原首页质感） */
:root[data-theme="dark"] {
  --ui-hero-grad: linear-gradient(135deg, var(--ui-bg-0) 0%, var(--ui-bg-2) 42%, var(--ui-accent-soft) 100%);
  --ui-card-grad: linear-gradient(165deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
}
:root[data-theme="light"] {
  --ui-hero-grad: linear-gradient(135deg, var(--ui-bg-0) 0%, var(--ui-bg-1) 55%, var(--ui-bg-2) 100%);
  --ui-card-grad: linear-gradient(165deg, var(--ui-panel), var(--ui-panel-2));
}

/* 焦点与选中 */
:root {
  --ui-focus: var(--ui-accent);
  --ui-selection: var(--ui-accent-soft);
}
::selection {
  background: var(--ui-selection);
  color: var(--ui-text);
}

html {
  background: var(--ui-bg-0);
  color: var(--ui-text);
}
body {
  background: var(--ui-bg-0);
  color: var(--ui-text);
}

/* 壳层工具类：逐步替换硬编码色 */
.ui-panel {
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-card);
}
.ui-muted { color: var(--ui-muted); }
.ui-accent { color: var(--ui-accent); }
.ui-line { border-color: var(--ui-line); }
.ui-focus:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}

/* 表单控件：深色下禁止浅色底 */
input,
select,
textarea {
  background: var(--ui-field);
  color: var(--ui-text);
  border-color: var(--ui-line);
}
input::placeholder,
textarea::placeholder {
  color: var(--ui-muted);
  opacity: 0.85;
}
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--ui-accent);
  outline-offset: 1px;
}
select option {
  background: var(--ui-panel);
  color: var(--ui-text);
}


/* 布局/文本工具类（替换 Tailwind 硬编码） */
.ui-bg-0 { background: var(--ui-bg-0); }
.ui-bg-1 { background: var(--ui-bg-1); }
.ui-panel { background: var(--ui-panel); }
.ui-panel-2 { background: var(--ui-panel-2); }
.ui-field { background: var(--ui-field); }
.ui-text { color: var(--ui-text); }
.ui-muted { color: var(--ui-muted); }
.ui-accent { color: var(--ui-accent); }
.ui-line { border-color: var(--ui-line); }
.ui-border { border: 1px solid var(--ui-line); }


.ui-card-soft {
  background: var(--ui-panel-2);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-card);
}
.ui-ctl {
  background: var(--ui-field);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-ctl);
  color: var(--ui-text);
}
.ui-ctl:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 1px;
}

.ui-backdrop { background: var(--ui-backdrop); }

/* 语义文字色 */
.ui-good { color: var(--ui-good); }
.ui-warn { color: var(--ui-warn); }
.ui-danger { color: var(--ui-danger); }
.ui-info { color: var(--ui-info); }
.ui-special { color: var(--ui-special); }

/* 语义软底徽章 / 标签 */
.ui-soft-good,
.ui-chip-good { background: var(--ui-good-soft); color: var(--ui-good); }
.ui-soft-warn,
.ui-chip-warn { background: var(--ui-warn-soft); color: var(--ui-warn); }
.ui-soft-danger,
.ui-chip-danger { background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-soft-info,
.ui-chip-info { background: var(--ui-info-soft); color: var(--ui-info); }
.ui-soft-special,
.ui-chip-special { background: var(--ui-special-soft); color: var(--ui-special); }
.ui-soft-muted,
.ui-chip-muted { background: var(--ui-panel-2); color: var(--ui-muted); }

/* 语义提示条 */
.ui-note-good {
  background: var(--ui-good-soft);
  border: 1px solid color-mix(in srgb, var(--ui-good) 35%, transparent);
  color: var(--ui-good);
}
.ui-note-warn {
  background: var(--ui-warn-soft);
  border: 1px solid color-mix(in srgb, var(--ui-warn) 35%, transparent);
  color: var(--ui-warn);
}
.ui-note-danger {
  background: var(--ui-danger-soft);
  border: 1px solid color-mix(in srgb, var(--ui-danger) 35%, transparent);
  color: var(--ui-danger);
}
.ui-note-info {
  background: var(--ui-info-soft);
  border: 1px solid color-mix(in srgb, var(--ui-info) 35%, transparent);
  color: var(--ui-info);
}
.ui-note-special {
  background: var(--ui-special-soft);
  border: 1px solid color-mix(in srgb, var(--ui-special) 35%, transparent);
  color: var(--ui-special);
}

/* 主按钮 / 激活标签：跟随色板 accent */
.ui-btn-accent {
  background: var(--ui-accent);
  border: 1px solid var(--ui-accent);
  color: var(--ui-on-accent);
  border-radius: var(--radius-ctl);
  font-weight: 650;
}
.ui-btn-accent:hover {
  background: var(--ui-accent-2);
  border-color: var(--ui-accent-2);
}
.ui-tab-active {
  background: var(--ui-accent) !important;
  border-color: var(--ui-accent) !important;
  color: var(--ui-on-accent) !important;
}

/* 稀有度文字（语义色已随主题） */
.ui-rare-1 { color: var(--rare-common); }
.ui-rare-2 { color: var(--rare-rare); }
.ui-rare-3 { color: var(--rare-precious); }
.ui-rare-4 { color: var(--rare-craft); }

/* 图区底：禁止浅色渐变 */
.ui-img-well {
  background: var(--ui-panel-2);
  border: 1px solid var(--ui-line);
}
.ui-img-well-warn {
  background: var(--ui-warn-soft);
  border: 1px solid color-mix(in srgb, var(--ui-warn) 30%, transparent);
}
.ui-img-well-good {
  background: var(--ui-good-soft);
  border: 1px solid color-mix(in srgb, var(--ui-good) 30%, transparent);
}

/* 土地徽章 / 网格 */
.ui-land-1 { color: var(--land-1); background: var(--land-1-soft); }
.ui-land-2 { color: var(--land-2); background: var(--land-2-soft); }
.ui-land-3 { color: var(--land-3); background: var(--land-3-soft); }
.ui-land-4 { color: var(--land-4); background: var(--land-4-soft); }
.ui-land-5 { color: var(--land-5); background: var(--land-5-soft); }
.ui-land-6 { color: var(--land-6); background: var(--land-6-soft); }
.ui-land-cell-1 { background: var(--land-1-soft); border-color: var(--land-1); }
.ui-land-cell-2 { background: var(--land-2-soft); border-color: var(--land-2); }
.ui-land-cell-3 { background: var(--land-3-soft); border-color: var(--land-3); }
.ui-land-cell-4 { background: var(--land-4-soft); border-color: var(--land-4); }
.ui-land-cell-5 { background: var(--land-5-soft); border-color: var(--land-5); }
.ui-land-cell-6 { background: var(--land-6-soft); border-color: var(--land-6); }

/* ── 图鉴页统一排版 ── */
.atlas-head {
  max-width: 80rem;
  margin: 0 auto;
  padding: 1.1rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
}
.atlas-title {
  font-size: 1.15rem;
  font-weight: 750;
  color: var(--ui-text);
  line-height: 1.3;
}
.atlas-sub {
  margin-top: 0.2rem;
  font-size: 0.8rem;
  color: var(--ui-muted);
  line-height: 1.5;
}
.atlas-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.75rem;
}
.atlas-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  background: var(--ui-panel);
  border-bottom: 1px solid var(--ui-line);
}
.atlas-filter-input {
  flex: 1 1 12rem;
  min-width: 0;
  min-height: 2.25rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
}
.atlas-filter-select {
  min-height: 2.25rem;
  padding: 0.35rem 0.7rem;
  font-size: 0.85rem;
}
.atlas-filter-btn {
  min-height: 2.25rem;
  padding: 0.4rem 1rem;
  font-size: 0.85rem;
  cursor: pointer;
}
.atlas-reset {
  font-size: 0.8rem;
  color: var(--ui-muted);
  padding: 0.35rem 0.4rem;
}
.atlas-reset:hover { color: var(--ui-accent); }
.atlas-body {
  max-width: 80rem;
  margin: 0 auto;
  padding: 1rem;
}
.atlas-grid {
  display: grid;
  gap: 0.7rem;
}
.atlas-grid-plant {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) {
  .atlas-grid-plant { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .atlas-grid-plant { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .atlas-grid-plant { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .atlas-grid-plant { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.atlas-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-card);
  overflow: hidden;
  cursor: pointer;
}
.atlas-card:hover { border-color: var(--ui-accent-border); }
.atlas-card:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 2px;
}
.atlas-card-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.4rem;
}
.atlas-card-badges:empty { display: none; }
.atlas-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border-radius: 0.35rem;
  padding: 0.08rem 0.35rem;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.35;
}
.atlas-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 6.25rem;
  background: var(--ui-panel-2);
  border-bottom: 1px solid var(--ui-line);
}
.atlas-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.7rem;
}
.atlas-thumb-fallback {
  font-size: 1.85rem;
  line-height: 1;
  opacity: 0.85;
}
.atlas-card-body {
  padding: 0.55rem 0.65rem 0.7rem;
}
.atlas-card-title {
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--ui-text);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.atlas-card-meta {
  margin-top: 0.3rem;
  font-size: 0.72rem;
  color: var(--ui-muted);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.atlas-modal-head {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  padding: 1.4rem 1.4rem 1rem;
  border-bottom: 1px solid var(--ui-line);
}
.plant-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.plant-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.plant-modal-panel {
  position: relative;
  width: min(40rem, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--ui-panel);
  color: var(--ui-text);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-card);
  box-shadow: var(--ui-shadow);
}
.plant-modal-close {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--ui-muted);
  font-size: 1.05rem;
  cursor: pointer;
}
.plant-modal-close:hover { background: var(--ui-panel-2); color: var(--ui-text); }
.plant-modal-head {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.15rem 2.6rem 1rem 1.15rem;
  border-bottom: 1px solid var(--ui-line);
}
.plant-modal-thumb {
  width: 6.5rem;
  height: 6.5rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--ui-panel-2);
  border: 1px solid var(--ui-line);
}
.plant-modal-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.45rem;
}
.plant-modal-intro { min-width: 0; flex: 1; }
.plant-modal-intro h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}
.plant-modal-id {
  margin-top: 0.3rem;
  font-size: 0.75rem;
  font-family: ui-monospace, monospace;
  color: var(--ui-muted);
}
.plant-modal-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.7rem;
}
.plant-stat {
  display: inline-flex;
  align-items: center;
  border-radius: 0.4rem;
  padding: 0.15rem 0.45rem;
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.4;
  background: var(--ui-panel-2);
  border: 1px solid var(--ui-line);
  color: var(--ui-text);
}
.plant-modal-body { padding: 1rem 1.15rem 1.2rem; }
.plant-modal-body h4 {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  font-weight: 700;
}
.plant-phase-note {
  margin: 0 0 0.7rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ui-muted);
}
.plant-phase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5.6rem, 1fr));
  gap: 0.6rem;
}
.plant-phase {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.55rem 0.35rem 0.65rem;
  text-align: center;
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-card);
  background: var(--ui-panel-2);
}
.plant-phase.is-mature { border-color: var(--ui-accent-border); }
.plant-phase-img {
  width: 4.25rem;
  height: 4.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.plant-phase-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.plant-phase-name {
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.3;
}
.plant-phase-time {
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--ui-muted);
}
.plant-phase-list { display: grid; gap: 0.35rem; }
.plant-phase-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--ui-line);
  border-radius: 0.6rem;
  background: var(--ui-panel-2);
  font-size: 0.82rem;
}
.plant-phase-row span:last-child { color: var(--ui-muted); white-space: nowrap; }