/* 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-1-soft: #2a322e;
  --land-2-soft: #41262d;
  --land-3-soft: #2a3238;
  --land-4-soft: #3c321e;
  --land-5-soft: #352b44;
  --radius-shell: 12px;
  --radius-card: 10px;
  --radius-ctl: 8px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --ui-bg-0: #f3f6f2;
  --ui-bg-1: #eaf1ea;
  --ui-bg-2: #e0ebe3;
  --ui-panel: #ffffff;
  --ui-panel-2: #f2f7f3;
  --ui-field: #ffffff;
  --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-1-soft: #e8eee9;
  --land-2-soft: #fbe9ec;
  --land-3-soft: #e8edf2;
  --land-4-soft: #fbf0d9;
  --land-5-soft: #f1eafa;
}

/* 沧浪 · 浪青 */
: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: #f0f5f7;
  --ui-bg-1: #e4eef2;
  --ui-bg-2: #d8e7ec;
  --ui-panel: #ffffff;
  --ui-panel-2: #f0f6f8;
  --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: #f8f4ee;
  --ui-bg-1: #f2ebe1;
  --ui-bg-2: #e9dfd0;
  --ui-panel: #ffffff;
  --ui-panel-2: #f7f1e8;
  --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: #f8f3f5;
  --ui-bg-1: #f3e9ed;
  --ui-bg-2: #ecdee4;
  --ui-panel: #ffffff;
  --ui-panel-2: #f8f0f3;
  --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) 45%, var(--ui-accent-soft) 100%);
  --ui-card-grad: linear-gradient(165deg, rgba(255,255,255,0.95), rgba(255,255,255,0.75));
}

/* 焦点与选中 */
: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-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); }

/* ── 图鉴页统一排版 ── */
.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 {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
}
.atlas-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 0.35rem;
  padding: 0.08rem 0.3rem;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.3;
}
.atlas-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 5.5rem;
  background: var(--ui-panel-2);
  border-bottom: 1px solid var(--ui-line);
}
.atlas-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.35rem;
}
.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;
  min-height: 2.1em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.atlas-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.55rem;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  color: var(--ui-muted);
  line-height: 1.4;
}
.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);
}