:root {
  --ink: #324137;
  --muted: #748078;
  --paper: #f7f1e5;
  --paper-deep: #ece1ce;
  --green: #6f8767;
  --green-dark: #4f684d;
  --green-pale: #dfe9d7;
  --rose: #c98279;
  --gold: #ba8c42;
  --line: rgba(70, 86, 70, .15);
  --shadow: 0 18px 50px rgba(72, 63, 47, .12);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #e8dfcf; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  background:
    radial-gradient(circle at 10% 0%, rgba(255,255,255,.75), transparent 30%),
    linear-gradient(135deg, #e8e0d0, #f4eddf 45%, #dfe6d5);
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

.paper-noise {
  pointer-events: none;
  position: fixed;
  inset: 0;
  opacity: .17;
  z-index: 20;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}

.welcome-screen {
  min-height: 100vh;
  padding: 40px 20px;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
}
.welcome-screen::before,
.welcome-screen::after {
  content: "";
  position: fixed;
  width: 330px;
  height: 330px;
  border-radius: 55% 45% 62% 38%;
  filter: blur(1px);
  opacity: .26;
  z-index: -1;
}
.welcome-screen::before { left: -90px; bottom: -90px; background: #8da281; transform: rotate(18deg); }
.welcome-screen::after { right: -120px; top: -100px; background: #d6a497; transform: rotate(-22deg); }
.welcome-card {
  width: min(650px, 100%);
  padding: 54px;
  text-align: center;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 34px;
  background: rgba(250, 246, 237, .88);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}
.welcome-mark { font-size: 56px; filter: drop-shadow(0 7px 9px rgba(99,70,45,.15)); }
.eyebrow, .section-kicker {
  margin: 6px 0;
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .22em;
}
h1, h2 { font-family: Georgia, "STSong", serif; font-weight: 600; }
.welcome-card h1 { margin: 4px 0 12px; font-size: clamp(34px, 7vw, 56px); }
.welcome-copy { margin: 0 auto 32px; max-width: 460px; color: var(--muted); line-height: 1.8; }
.welcome-form { text-align: left; }
.welcome-form label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 700; }
.input-row { display: flex; gap: 10px; }
input, textarea, select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 12px 14px;
  color: var(--ink);
  background: rgba(255,255,255,.72);
  outline: none;
}
input:focus, textarea:focus, select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(111,135,103,.13); }
.primary-btn, .secondary-btn, .mini-btn, .icon-btn, .text-btn {
  border: 0;
  border-radius: 13px;
  padding: 11px 16px;
  transition: transform .16s ease, opacity .16s ease, background .16s ease;
}
.primary-btn { color: white; background: var(--green-dark); box-shadow: 0 8px 16px rgba(79,104,77,.18); }
.secondary-btn { color: var(--green-dark); background: var(--green-pale); }
.primary-btn:hover, .secondary-btn:hover, .mini-btn:hover, .icon-btn:hover, .text-btn:hover { transform: translateY(-1px); }
button:disabled { cursor: not-allowed; opacity: 1; transform: none !important; }
.mini-btn:disabled, .primary-btn:disabled, .secondary-btn:disabled {
  color: #f4f1eb;
  background: #b6b5b0;
  box-shadow: none;
  filter: grayscale(.2);
}
.import-box { margin-top: 22px; text-align: left; border-top: 1px dashed var(--line); padding-top: 18px; }
.import-box summary { cursor: pointer; color: var(--green-dark); font-weight: 700; }
.import-box p { color: var(--muted); font-size: 13px; }
.import-box textarea { margin-bottom: 10px; resize: vertical; }
.privacy-note { margin: 22px 0 0; color: #8c918b; font-size: 12px; }

.app-shell { width: min(1440px, calc(100% - 32px)); margin: 0 auto; position: relative; z-index: 1; }
.topbar { padding: 34px 4px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.topbar h1 { margin: 0; font-size: clamp(28px, 4vw, 44px); }
.topbar-side { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex: 1 1 420px; min-width: 0; flex-wrap: wrap; }
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.danger-secondary-btn { color: #9a4d43; border-color: rgba(154,77,67,.28); background: rgba(255,245,242,.92); font-weight: 700; }
.icon-btn { width: 44px; height: 44px; padding: 0; font-size: 23px; color: var(--green-dark); background: rgba(255,255,255,.65); }
.dashboard-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.metric-card {
  min-height: 92px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 19px;
  background: rgba(248,244,235,.78);
  box-shadow: 0 8px 24px rgba(78,67,48,.07);
}
.metric-icon { font-size: 30px; }
.metric-card small { display: block; color: var(--muted); font-size: 12px; }
.metric-card strong { display: block; margin-top: 4px; font-family: Georgia, serif; font-size: 21px; }
.weather-card { background: linear-gradient(135deg, rgba(255,250,223,.92), rgba(228,239,221,.85)); }

.main-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(320px, .8fr); gap: 14px; }
.main-column, .side-column { display: grid; gap: 14px; align-content: start; }
.panel {
  border: 1px solid rgba(255,255,255,.8);
  border-radius: var(--radius);
  padding: 22px;
  background: rgba(249,245,236,.84);
  box-shadow: 0 12px 30px rgba(79,68,48,.08);
  backdrop-filter: blur(10px);
}
.panel-heading { display: flex; justify-content: space-between; align-items: end; gap: 14px; margin-bottom: 18px; }
.panel-heading.compact { margin-bottom: 12px; }
.panel-heading h2 { margin: 0; font-size: 25px; }
.text-btn { color: var(--green-dark); background: transparent; font-weight: 700; }
.muted { color: var(--muted); font-size: 12px; }

.pots-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pot-card {
  min-height: 196px;
  padding: 15px;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(92,111,84,.16);
  background: linear-gradient(180deg, rgba(230,238,219,.75), rgba(238,221,196,.68));
}
.pot-card::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 21px; height: 24px; border-radius: 50%; background: rgba(83,62,43,.09); filter: blur(3px); }
.pot-number { position: absolute; top: 12px; left: 13px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.plant-visual { min-height: 74px; display: grid; place-items: center; font-size: 58px; position: relative; z-index: 1; }
.flower-name { text-align: center; font-family: Georgia, "STSong", serif; font-size: 20px; font-weight: 700; }
.pot-status { min-height: 32px; margin: 7px 0 10px; text-align: center; color: var(--muted); font-size: 12px; line-height: 1.45; }
.progress-track { height: 7px; margin: 8px 0 12px; border-radius: 999px; overflow: hidden; background: rgba(63,78,61,.12); }
.progress-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #91aa80, #d3a565); }
.pot-actions { display: flex; justify-content: center; gap: 7px; position: relative; z-index: 2; }
.pot-actions select { padding: 8px 9px; font-size: 12px; }
.mini-btn { padding: 8px 11px; color: white; background: var(--green); font-size: 12px; white-space: nowrap; }
.mini-btn.rose { background: var(--rose); }
.mini-btn.gold { background: var(--gold); }
.empty-pot .plant-visual { opacity: .56; filter: grayscale(.25); }
.withered-pot { background: linear-gradient(180deg, rgba(224,216,199,.84), rgba(204,185,162,.78)); }

.vase-grid { min-height: 188px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 12px; border-radius: 20px; background: linear-gradient(180deg, rgba(219,232,230,.42), rgba(231,216,190,.38)); }
.vase-slot { padding: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 1px dashed rgba(75,95,75,.24); border-radius: 18px; }
.vase-flower { font-size: 46px; }
.vase-slot strong { margin: 7px 0 3px; }
.vase-slot small { color: var(--muted); }
.vase-slot select { margin: 9px 0 7px; font-size: 12px; }

.cat-empty { padding: 24px; text-align: center; border-radius: 18px; background: rgba(225,234,219,.55); }
.cat-avatar { font-size: 74px; filter: drop-shadow(0 8px 9px rgba(80,64,44,.12)); }
.cat-layout { display: grid; grid-template-columns: 170px 1fr; gap: 24px; align-items: center; }
.cat-portrait { padding: 18px; text-align: center; border-radius: 21px; background: linear-gradient(145deg, #e7deca, #dfead7); }
.cat-portrait h3 { margin: 7px 0 0; font-family: Georgia, "STSong", serif; font-size: 22px; }
.stat-row { display: grid; grid-template-columns: 58px 1fr 34px; align-items: center; gap: 9px; margin-bottom: 9px; font-size: 12px; }
.stat-track { height: 9px; border-radius: 999px; overflow: hidden; background: rgba(55,69,55,.12); }
.stat-fill { height: 100%; border-radius: inherit; background: var(--green); }
.cat-actions { margin-top: 15px; display: flex; flex-wrap: wrap; gap: 7px; }
.cat-badges { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.badge { padding: 5px 9px; border-radius: 999px; background: rgba(111,135,103,.12); color: var(--green-dark); font-size: 11px; }

.tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 4px; border-radius: 14px; background: rgba(64,80,63,.07); }
.tab-btn { border: 0; padding: 9px; border-radius: 10px; color: var(--muted); background: transparent; }
.tab-btn.active { color: white; background: var(--green); }
.tab-content { display: none; margin-top: 16px; }
.tab-content.active { display: block; }
.subheading { margin: 18px 0 8px; font-family: Georgia, "STSong", serif; font-size: 17px; }
.subheading:first-child { margin-top: 0; }
.shop-list, .inventory-list { display: grid; gap: 8px; }
.shop-item, .inventory-item, .collection-item {
  padding: 10px 11px;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,.42);
}
.shop-item.locked { opacity: .52; }
.item-icon { font-size: 24px; text-align: center; }
.item-meta strong { display: block; font-size: 13px; }
.item-meta small { color: var(--muted); font-size: 10px; }
.item-actions { display: flex; gap: 5px; }
.empty-note { padding: 20px; color: var(--muted); text-align: center; border: 1px dashed var(--line); border-radius: 14px; font-size: 12px; }
.collection-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.collection-item { grid-template-columns: 30px 1fr; }
.collection-item.unknown { opacity: .4; filter: grayscale(1); }

.message-box { max-height: 260px; overflow: auto; padding: 14px; white-space: pre-wrap; color: #465448; border-radius: 14px; background: rgba(255,255,255,.45); font-size: 12px; line-height: 1.65; }
.events-list { margin-top: 10px; display: grid; gap: 6px; }
.event-line { padding: 7px 9px; border-left: 3px solid var(--green); background: rgba(111,135,103,.08); font-size: 11px; }
.command-panel summary { cursor: pointer; font-weight: 700; }
.command-form { margin-top: 12px; display: flex; gap: 8px; }

footer { padding: 22px 4px 34px; display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }
.link-btn { border: 0; color: var(--muted); text-decoration: underline; background: transparent; }
.danger-link-btn { color: #9a4d43; font-weight: 700; }

.modal { position: fixed; inset: 0; z-index: 100; padding: 18px; display: grid; place-items: center; background: rgba(39,48,40,.42); backdrop-filter: blur(5px); }
.modal-card { width: min(520px, 100%); position: relative; padding: 28px; border-radius: 24px; background: var(--paper); box-shadow: var(--shadow); }
.modal-card h2 { margin-top: 0; }
.modal-close { position: absolute; right: 15px; top: 13px; border: 0; font-size: 26px; color: var(--muted); background: transparent; }
.key-box { padding: 13px; word-break: break-all; border-radius: 13px; background: #eae1d2; font-family: ui-monospace, monospace; font-size: 11px; }
.modal-actions { margin-top: 14px; display: flex; gap: 8px; }
.danger-modal-body { display: grid; gap: 12px; }
.danger-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.danger-choice-btn {
  padding: 14px 12px;
  display: grid;
  gap: 6px;
  text-align: left;
  border: 1px solid rgba(125,148,115,.28);
  border-radius: 16px;
  background: rgba(255,255,255,.62);
  color: var(--ink);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.danger-choice-btn strong,
.danger-choice-btn span {
  display: block;
}
.danger-choice-btn strong {
  font-size: 14px;
  color: var(--green-dark);
}
.danger-choice-btn span {
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
}
.danger-choice-btn.active {
  border-color: rgba(154,77,67,.45);
  box-shadow: 0 10px 22px rgba(154,77,67,.12);
  background: rgba(255,245,242,.92);
}
.danger-choice-btn:disabled {
  opacity: .56;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.danger-disabled-hint {
  margin: 0;
  font-size: 12px;
  color: #9a4d43;
}
.danger-warning-box {
  padding: 14px;
  border: 1px solid rgba(154,77,67,.22);
  border-radius: 16px;
  background: rgba(154,77,67,.08);
  color: #5e4038;
}
.danger-warning-box strong { display: block; margin-bottom: 8px; }
.danger-warning-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.danger-confirm-copy { margin: 0; color: var(--green-dark); }
.danger-confirm-input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid rgba(92,111,84,.22);
  border-radius: 12px;
  background: rgba(255,253,248,.94);
  font: inherit;
  box-sizing: border-box;
}
.danger-confirm-hint { color: var(--muted); font-size: 11px; }
.danger-primary-btn { background: #9a4d43; box-shadow: 0 8px 16px rgba(154,77,67,.16); }
.update-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(100vh - 170px);
  overflow: auto;
  padding-right: 6px;
  display: grid;
  gap: 16px;
}
.update-intro {
  margin: 0;
  color: var(--ink);
  line-height: 1.75;
}
.update-section {
  display: grid;
  gap: 8px;
}
.update-section h3 {
  margin: 0;
  font-size: 16px;
  color: var(--green-dark);
}
.update-section p {
  margin: 0;
  color: var(--ink);
  line-height: 1.75;
}
.update-section ul {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
  color: var(--ink);
  line-height: 1.7;
}
.update-section li { margin: 0; }
.update-resource-list {
  padding-left: 0;
  list-style: none;
}
.update-resource-list li {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.56);
  border: 1px solid rgba(111,135,103,.14);
}
.update-modal-actions {
  margin-top: 4px;
  justify-content: flex-end;
}
.toast { position: fixed; z-index: 200; left: 50%; bottom: 26px; transform: translateX(-50%); padding: 11px 18px; color: white; border-radius: 999px; background: rgba(48,64,49,.94); box-shadow: 0 10px 28px rgba(30,38,30,.2); font-size: 13px; }

.loading { cursor: progress; }
.spin { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1050px) {
  .main-grid { grid-template-columns: 1fr; }
  .side-column { grid-template-columns: 1fr 1fr; }
  .command-panel { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .app-shell { width: min(100% - 18px, 1440px); }
  .welcome-card { padding: 34px 22px; }
  .input-row { flex-direction: column; }
  .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
  .pots-grid { grid-template-columns: 1fr; }
  .vase-grid { grid-template-columns: 1fr; }
  .side-column { grid-template-columns: 1fr; }
  .cat-layout { grid-template-columns: 1fr; }
  .cat-portrait { display: flex; align-items: center; justify-content: center; gap: 18px; }
  .topbar { align-items: flex-start; }
  .top-actions { flex-direction: column; align-items: stretch; }
  .top-actions .secondary-btn { font-size: 11px; }
  .danger-choice-grid { grid-template-columns: 1fr; }
  .update-modal-body { max-height: calc(100vh - 150px); gap: 14px; }
  footer { flex-direction: column; gap: 10px; align-items: center; }
}


/* v4.8.4 状态细节与猫咪信箱 */
.letter-list { display: grid; gap: 9px; }
.letter-card {
  width: 100%; display: flex; align-items: center; gap: 11px; text-align: left;
  border: 1px solid rgba(111, 91, 62, .15); border-radius: 13px; padding: 11px 12px;
  background: rgba(255, 251, 239, .82); color: inherit; cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease;
}
.letter-card:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(75, 58, 35, .08); }
.letter-card.locked { opacity: .45; filter: grayscale(1); cursor: default; }
.letter-card.locked:hover { transform: none; box-shadow: none; }
.letter-card > span { font-size: 22px; }
.letter-card div { display: grid; gap: 2px; }
.letter-card small { color: var(--muted, #7a8076); }
.letter-paper {
  white-space: pre-wrap; line-height: 1.9; padding: 22px; border-radius: 14px;
  background: #fffaf0; border: 1px solid rgba(135, 103, 58, .17);
  box-shadow: inset 0 0 30px rgba(190, 153, 91, .06);
}

.metric-meta { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.coin-icon { width: 31px; height: 31px; display: inline-grid; place-items: center; }
.coin-icon svg { width: 31px; height: 31px; display: block; }
.growth-badge { position: absolute; top: 11px; right: 11px; z-index: 2; padding: 4px 7px; border-radius: 999px; background: rgba(111,135,103,.14); color: var(--green-dark); font-size: 10px; font-weight: 800; }
.growth-badge.paused { color: #8b8174; background: rgba(120,110,95,.12); }
.locked-badge { filter: grayscale(1); opacity: .38; }


/* v4.8.5 图标与透明猫咪 */
.cat-image {
  width: min(142px, 100%);
  height: 124px;
  display: block;
  margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(95, 68, 39, .13));
}
.flower-icon-image {
  width: 1em;
  height: 1em;
  display: block;
  object-fit: contain;
}
.plant-visual .flower-icon-image {
  width: 78px;
  height: 78px;
}
.vase-flower .flower-icon-image {
  width: 48px;
  height: 48px;
}
.item-icon .flower-icon-image {
  width: 28px;
  height: 28px;
  margin: auto;
}


/* v4.8.6 固定六格花圃 */
.locked-pot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-style: dashed;
  background: linear-gradient(180deg, rgba(229,228,220,.68), rgba(218,213,199,.58));
}
.locked-pot::after { opacity: .35; }
.locked-pot-icon {
  min-height: 66px;
  display: grid;
  place-items: center;
  font-size: 38px;
  opacity: .48;
  filter: grayscale(1);
}
.locked-pot .flower-name { color: #85867e; }
.locked-pot .pot-status { max-width: 150px; }


/* v4.8.7 主操作区 */
.garden-heading-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.garden-notice {
  min-height: 48px;
  margin: -4px 0 16px;
  padding: 11px 14px;
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  gap: 9px;
  color: #415443;
  border: 1px solid rgba(111,135,103,.18);
  border-radius: 15px;
  background: linear-gradient(90deg, rgba(231,239,221,.82), rgba(255,249,231,.72));
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-line;
}
.garden-event-bar {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.offline-summary-bar {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.offline-summary-chip {
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(111,135,103,.14);
  color: #3f5140;
  border: 1px solid rgba(111,135,103,.18);
  font-size: 11px;
  line-height: 1.4;
  white-space: nowrap;
}
.garden-event-chip {
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.62);
  color: #415443;
  border: 1px solid rgba(111,135,103,.16);
  font-size: 11px;
  line-height: 1.4;
  white-space: nowrap;
}
.notice-bell { font-size: 18px; }
.quick-shop-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}
.quick-shop-item {
  min-height: 76px;
  padding: 10px;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.42);
}
.quick-shop-item.locked { opacity: .5; }
.quick-shop-item .mini-btn { padding: 7px 9px; }

@media (max-width: 1050px) {
  .quick-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .garden-heading-actions { align-items: flex-end; flex-direction: column; }
  .quick-shop-grid { grid-template-columns: 1fr; }
}


/* v4.8.8 手机紧凑布局 */
@media (max-width: 760px) {
  :root { --radius: 16px; }

  .app-shell {
    width: calc(100% - 10px);
  }

  .topbar {
    padding: 14px 2px 10px;
    align-items: center;
  }

  .topbar h1 {
    font-size: 24px;
  }

  .topbar .eyebrow {
    font-size: 8px;
    letter-spacing: .16em;
  }

  .top-actions {
    flex-direction: row;
    align-items: center;
    gap: 5px;
  }

  .icon-btn {
    width: 34px;
    height: 34px;
    font-size: 18px;
    border-radius: 10px;
  }

  .top-actions .secondary-btn {
    padding: 8px 9px;
    font-size: 10px;
    border-radius: 10px;
  }

  .update-section h3 {
    font-size: 15px;
  }

  /* 四个状态卡始终保持同一排 */
  .dashboard-grid {
    grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr));
    gap: 5px;
    margin-bottom: 8px;
  }

  .metric-card {
    min-width: 0;
    min-height: 60px;
    padding: 7px 6px;
    gap: 5px;
    border-radius: 13px;
    box-shadow: 0 4px 12px rgba(78,67,48,.06);
  }

  .metric-card > div {
    min-width: 0;
  }

  .metric-icon {
    flex: 0 0 auto;
    font-size: 17px;
  }

  .coin-icon,
  .coin-icon svg {
    width: 18px;
    height: 18px;
  }

  .metric-card small {
    font-size: 8px;
    line-height: 1.1;
    white-space: nowrap;
  }

  .metric-card strong {
    margin-top: 1px;
    font-size: 13px;
    line-height: 1.1;
    white-space: nowrap;
  }

  .metric-meta {
    margin-top: 2px;
    font-size: 7px;
    line-height: 1.15;
    white-space: normal;
  }

  .main-grid,
  .main-column,
  .side-column {
    gap: 8px;
  }

  .panel {
    padding: 12px;
    border-radius: 16px;
  }

  .panel-heading {
    margin-bottom: 10px;
    gap: 8px;
    align-items: center;
  }

  .panel-heading h2 {
    font-size: 19px;
  }

  .section-kicker {
    font-size: 8px;
    letter-spacing: .16em;
  }

  .muted {
    font-size: 9px;
  }

  .garden-heading-actions {
    flex-direction: row;
    align-items: center;
    gap: 5px;
  }

  .garden-heading-actions .mini-btn {
    padding: 6px 7px;
    font-size: 9px;
  }

  .garden-notice {
    min-height: 38px;
    margin: -2px 0 8px;
    padding: 7px 9px;
    grid-template-columns: 18px 1fr;
    gap: 6px;
    border-radius: 11px;
    font-size: 9px;
    line-height: 1.4;
  }

  .offline-summary-bar,
  .garden-event-bar {
    gap: 5px;
    margin-top: 5px;
  }

  .offline-summary-chip,
  .garden-event-chip {
    padding: 3px 7px;
    font-size: 9px;
  }

  .notice-bell {
    font-size: 14px;
  }

  /* 六个花盆在手机上显示为两列三行 */
  .pots-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .pot-card {
    min-height: 154px;
    padding: 9px;
    border-radius: 15px;
  }

  .pot-card::after {
    left: 22%;
    right: 22%;
    bottom: 12px;
    height: 14px;
  }

  .pot-number {
    top: 7px;
    left: 8px;
    font-size: 8px;
  }

  .growth-badge {
    top: 6px;
    right: 6px;
    padding: 3px 5px;
    font-size: 7px;
  }

  .plant-visual {
    min-height: 49px;
    font-size: 38px;
  }

  .plant-visual .flower-icon-image {
    width: 48px;
    height: 48px;
  }

  .flower-name {
    font-size: 15px;
  }

  .pot-status {
    min-height: 25px;
    margin: 3px 0 5px;
    font-size: 9px;
    line-height: 1.3;
  }

  .progress-track {
    height: 5px;
    margin: 4px 0 7px;
  }

  .pot-actions {
    gap: 4px;
  }

  .pot-actions select {
    min-width: 0;
    padding: 6px 5px;
    font-size: 9px;
  }

  .mini-btn {
    padding: 6px 7px;
    border-radius: 9px;
    font-size: 9px;
  }

  .locked-pot-icon {
    min-height: 43px;
    font-size: 27px;
  }

  .locked-pot .pot-status {
    max-width: 120px;
  }

  /* 花种商店两列 */
  .quick-shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .quick-shop-item {
    min-width: 0;
    min-height: 61px;
    padding: 7px;
    grid-template-columns: 25px minmax(0, 1fr) auto;
    gap: 5px;
    border-radius: 11px;
  }

  .quick-shop-item .item-icon {
    font-size: 19px;
  }

  .quick-shop-item .item-meta strong {
    font-size: 10px;
  }

  .quick-shop-item .item-meta small {
    font-size: 7px;
    line-height: 1.2;
  }

  .quick-shop-item .mini-btn {
    padding: 5px 6px;
    font-size: 8px;
  }

  /* 花瓶保持三格横排 */
  .vase-grid {
    min-height: 130px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    padding: 5px;
    border-radius: 14px;
  }

  .vase-slot {
    min-width: 0;
    padding: 7px 4px;
    border-radius: 12px;
  }

  .vase-flower {
    font-size: 30px;
  }

  .vase-flower .flower-icon-image {
    width: 31px;
    height: 31px;
  }

  .vase-slot strong {
    margin: 4px 0 1px;
    font-size: 10px;
  }

  .vase-slot small {
    font-size: 7px;
    line-height: 1.25;
  }

  .vase-slot select {
    margin: 5px 0 4px;
    padding: 5px 3px;
    font-size: 8px;
  }

  /* 猫咪仍保持横向，不再拆成上下两大块 */
  .cat-layout {
    grid-template-columns: 95px minmax(0, 1fr);
    gap: 10px;
  }

  .cat-portrait {
    display: block;
    padding: 8px;
    border-radius: 14px;
  }

  .cat-image {
    width: 84px;
    height: 74px;
  }

  .cat-portrait h3 {
    margin-top: 3px;
    font-size: 16px;
  }

  .stat-row {
    grid-template-columns: 34px minmax(0, 1fr) 22px;
    gap: 5px;
    margin-bottom: 5px;
    font-size: 9px;
  }

  .stat-track {
    height: 6px;
  }

  .cat-actions {
    margin-top: 8px;
    gap: 4px;
  }

  .cat-badges {
    margin-top: 6px;
    gap: 4px;
  }

  .badge {
    padding: 3px 6px;
    font-size: 8px;
  }

  .tabs {
    gap: 3px;
    padding: 3px;
  }

  .tab-btn {
    padding: 7px;
    font-size: 10px;
  }

  .tab-content {
    margin-top: 10px;
  }

  .shop-item,
  .inventory-item,
  .collection-item {
    padding: 8px;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 6px;
  }

  .item-icon {
    font-size: 20px;
  }

  .collection-grid {
    gap: 6px;
  }

  .message-box {
    max-height: 150px;
    padding: 10px;
    font-size: 9px;
  }

  .event-line {
    padding: 6px 7px;
    font-size: 9px;
  }

  .command-panel {
    display: none;
  }

  footer {
    padding: 13px 2px 18px;
    font-size: 8px;
  }
}

@media (max-width: 380px) {
  .metric-card {
    padding: 6px 4px;
    gap: 3px;
  }

  .metric-icon {
    font-size: 15px;
  }

  .metric-card strong {
    font-size: 12px;
  }

  .metric-card small {
    font-size: 7px;
  }

  .pot-card {
    min-height: 148px;
    padding: 8px;
  }

  .flower-name {
    font-size: 14px;
  }
}


/* v4.8.9 猫咪区与花瓶样式微调 */
.cat-panel .panel-heading { margin-bottom: 10px; }
.cat-layout { align-items: start; }
.cat-portrait {
  padding: 14px;
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(233,224,206,.95), rgba(225,235,217,.95));
}
.cat-portrait h3 { margin: 8px 0 2px; }
.cat-image {
  width: min(200px, 100%);
  height: 150px;
  object-fit: contain;
}
.cat-utilities {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
}
.utility-card {
  padding: 10px 10px 9px;
  border-radius: 15px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.42);
  font-size: 11px;
  color: var(--green-dark);
  text-align: center;
}
.utility-card strong { display:block; margin-top: 4px; font-size: 12px; }
.utility-card small { display:block; margin-top: 3px; font-size: 10px; color: var(--muted); }
.utility-card.locked { opacity: .45; filter: grayscale(.8); }
.stat-row { grid-template-columns: 44px 1fr 28px; gap: 7px; margin-bottom: 7px; font-size: 11px; }
.stat-track { height: 7px; }
.cat-actions { margin-top: 10px; gap: 6px; }
.cat-actions .mini-btn { padding: 8px 10px; font-size: 10px; }

.vase-grid.real-vase {
  min-height: 206px;
  align-items: end;
  background: linear-gradient(180deg, rgba(235,242,239,.55), rgba(239,229,205,.45));
}
.vase-slot.real-vase-slot {
  min-height: 150px;
  position: relative;
  justify-content: flex-end;
  border: 0;
  background: transparent;
}
.vase-slot.real-vase-slot::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 16px;
  width: 62px;
  height: 78px;
  transform: translateX(-50%);
  border-radius: 18px 18px 22px 22px / 10px 10px 26px 26px;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(179,207,206,.18));
  border: 2px solid rgba(140,170,170,.45);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
.vase-slot.real-vase-slot::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 87px;
  width: 54px;
  height: 11px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(255,255,255,.42);
  border: 1px solid rgba(140,170,170,.35);
}
.vase-slot.real-vase-slot > * { position: relative; z-index: 1; }
.vase-slot.real-vase-slot .vase-flower { margin-bottom: 14px; }
.vase-slot.real-vase-slot strong { margin-top: 0; }
.vase-slot.real-vase-slot select { width: calc(100% - 10px); }


/* v4.8.9 手机端进一步紧凑化 */
@media (max-width: 760px) {
  .dashboard-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }
  .weather-card { grid-column: auto; }
  .metric-card {
    min-height: 64px;
    padding: 8px 6px;
    gap: 4px;
  }
  .metric-card strong { font-size: 12px; }
  .metric-card small { font-size: 8px; }
  .metric-meta { font-size: 7px; line-height: 1.15; }

  .pots-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .pot-card {
    min-height: 138px;
    padding: 8px 7px;
    border-radius: 14px;
  }
  .pot-number { font-size: 7px; top: 7px; left: 7px; }
  .growth-badge { top: 6px; right: 6px; padding: 2px 5px; font-size: 6px; }
  .plant-visual { min-height: 40px; font-size: 30px; }
  .plant-visual .flower-icon-image { width: 38px; height: 38px; }
  .flower-name { font-size: 12px; }
  .pot-status { min-height: 22px; margin: 2px 0 4px; font-size: 8px; line-height: 1.2; }
  .progress-track { height: 4px; margin: 3px 0 5px; }
  .pot-actions { gap: 3px; }
  .pot-actions select { padding: 5px 4px; font-size: 8px; }
  .mini-btn { padding: 5px 6px; border-radius: 9px; font-size: 8px; }
  .locked-pot-icon { min-height: 34px; font-size: 21px; }

  .garden-heading-actions { gap: 4px; }
  .garden-heading-actions .mini-btn { font-size: 8px; padding: 5px 6px; }

  .cat-layout {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .cat-portrait {
    display: grid;
    grid-template-columns: 92px 1fr;
    align-items: center;
    gap: 10px;
    text-align: left;
    padding: 10px;
  }
  .cat-image {
    width: 90px;
    height: 78px;
    margin: 0;
  }
  .cat-portrait h3 { font-size: 17px; margin: 0 0 4px; }
  .cat-utilities {
    margin-top: 6px;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 5px;
  }
  .utility-card { padding: 6px 6px 5px; font-size: 8px; border-radius: 11px; }
  .utility-card strong { font-size: 9px; }
  .stat-row { grid-template-columns: 28px 1fr 20px; gap: 5px; margin-bottom: 4px; font-size: 9px; }
  .stat-track { height: 6px; }
  .cat-actions { margin-top: 6px; gap: 4px; }
  .cat-actions .mini-btn { padding: 6px 7px; font-size: 8px; }

  .vase-grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 4px;
    padding: 6px;
    min-height: 120px;
  }
  .vase-slot.real-vase-slot { min-height: 112px; padding: 6px 3px; }
  .vase-slot.real-vase-slot::before {
    width: 38px;
    height: 48px;
    bottom: 18px;
    border-radius: 12px 12px 15px 15px / 8px 8px 18px 18px;
  }
  .vase-slot.real-vase-slot::after {
    width: 32px;
    height: 8px;
    bottom: 59px;
  }
  .vase-slot.real-vase-slot .vase-flower { margin-bottom: 8px; }
  .vase-flower { font-size: 24px; }
  .vase-flower .flower-icon-image { width: 24px; height: 24px; }
  .vase-slot strong { font-size: 9px; margin: 2px 0 1px; }
  .vase-slot small { font-size: 7px; line-height: 1.15; }
  .vase-slot select { margin: 4px 0 3px; padding: 4px 2px; font-size: 7px; width: calc(100% - 6px); }
  .quick-shop-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 380px) {
  .pots-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 5px; }
  .pot-card { min-height: 132px; padding: 7px 6px; }
  .flower-name { font-size: 11px; }
}


/* v4.8.10 商店双标签与小方块卡片 */
.store-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-bottom: 10px;
  padding: 4px;
  border-radius: 14px;
  background: rgba(64,80,63,.07);
}
.store-tab-btn {
  border: 0;
  padding: 9px;
  border-radius: 10px;
  color: var(--muted);
  background: transparent;
  transition: background .16s ease, color .16s ease;
}
.store-tab-btn.active {
  color: white;
  background: var(--green);
}
.store-pane { display: none; }
.store-pane.active { display: block; }
.store-hint {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 10px;
}
.shop-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.shop-square-card {
  aspect-ratio: 1 / 1;
  min-width: 0;
  padding: 10px 8px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.46);
}
.shop-square-card.locked {
  opacity: .46;
  filter: grayscale(.82);
}
.shop-square-icon {
  min-height: 34px;
  display: grid;
  place-items: center;
  font-size: 30px;
  line-height: 1;
}
.shop-square-icon .flower-icon-image {
  width: 34px;
  height: 34px;
}
.shop-square-icon .asset-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.shop-square-name {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.15;
}
.shop-square-note {
  min-height: 30px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.35;
}
.shop-buy-btn {
  width: 100%;
  padding: 6px 4px;
  font-size: 8px;
}
.tabs.two-tabs {
  grid-template-columns: repeat(2, 1fr);
}

/* v4.8.10 更紧凑的花瓶展示 */
.vase-grid.real-vase {
  min-height: 164px;
  padding: 8px;
  gap: 8px;
}
.vase-slot.real-vase-slot {
  min-height: 124px;
  padding: 7px 5px;
}
.vase-slot.real-vase-slot::before {
  width: 52px;
  height: 64px;
  bottom: 12px;
  border-radius: 16px 16px 20px 20px / 9px 9px 24px 24px;
}
.vase-slot.real-vase-slot::after {
  width: 43px;
  height: 9px;
  bottom: 69px;
}
.vase-slot.real-vase-slot .vase-flower {
  margin-bottom: 18px;
  font-size: 36px;
}
.vase-slot.real-vase-slot .vase-flower .flower-icon-image {
  width: 36px;
  height: 36px;
}
.vase-slot.real-vase-slot strong { font-size: 11px; }
.vase-slot.real-vase-slot small { font-size: 8px; }

@media (max-width: 760px) {
  .store-panel .panel-heading {
    align-items: flex-start;
  }
  .store-tabs {
    margin-bottom: 7px;
    padding: 3px;
  }
  .store-tab-btn {
    padding: 7px;
    font-size: 9px;
  }
  .store-hint {
    margin-bottom: 7px;
    font-size: 7px;
  }
  .shop-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }
  .shop-square-card {
    padding: 6px 4px 5px;
    border-radius: 11px;
  }
  .shop-square-icon {
    min-height: 25px;
    font-size: 23px;
  }
  .shop-square-icon .flower-icon-image {
    width: 24px;
    height: 24px;
  }
  .shop-square-name {
    margin-top: 1px;
    font-size: 9px;
  }
  .shop-square-note {
    min-height: 25px;
    font-size: 6px;
    line-height: 1.25;
  }
  .shop-buy-btn {
    padding: 4px 2px;
    font-size: 7px;
    border-radius: 7px;
  }

  .vase-grid.real-vase {
    min-height: 104px;
    padding: 5px;
    gap: 4px;
  }
  .vase-slot.real-vase-slot {
    min-height: 91px;
    padding: 4px 2px;
  }
  .vase-slot.real-vase-slot::before {
    width: 34px;
    height: 42px;
    bottom: 8px;
    border-radius: 10px 10px 13px 13px / 6px 6px 15px 15px;
  }
  .vase-slot.real-vase-slot::after {
    width: 28px;
    height: 6px;
    bottom: 45px;
  }
  .vase-slot.real-vase-slot .vase-flower {
    margin-bottom: 12px;
    font-size: 23px;
  }
  .vase-slot.real-vase-slot .vase-flower .flower-icon-image {
    width: 23px;
    height: 23px;
  }
  .vase-slot.real-vase-slot strong {
    font-size: 8px;
  }
  .vase-slot.real-vase-slot small {
    font-size: 6px;
    line-height: 1.1;
  }
  .vase-slot.real-vase-slot select {
    width: calc(100% - 4px);
    margin: 2px 0;
    padding: 3px 1px;
    font-size: 6px;
  }
  .vase-slot.real-vase-slot .mini-btn {
    padding: 4px 5px;
    font-size: 6px;
  }
}

@media (max-width: 380px) {
  .shop-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }
  .shop-square-card {
    padding-inline: 3px;
  }
  .shop-square-name { font-size: 8px; }
  .shop-square-note { font-size: 5.5px; }
}


/* v4.8.11 实时交互与图鉴快捷入口 */
.metric-link {
  cursor: pointer;
  user-select: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.metric-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(71, 82, 66, .11);
}
.metric-link:active {
  transform: translateY(0) scale(.985);
}
.metric-link:focus-visible {
  outline: 3px solid rgba(111, 135, 103, .26);
  outline-offset: 2px;
}
.pending-action {
  position: relative;
  opacity: .82 !important;
  transform: scale(.975);
}
.pending-action::after {
  content: "";
  width: 10px;
  height: 10px;
  margin-left: 6px;
  display: inline-block;
  vertical-align: -1px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: actionSpin .65s linear infinite;
}
@keyframes actionSpin {
  to { transform: rotate(360deg); }
}
.shortcut-highlight {
  animation: shortcutGlow 1.2s ease;
}
@keyframes shortcutGlow {
  0%, 100% { box-shadow: var(--shadow); }
  35% { box-shadow: 0 0 0 5px rgba(111,135,103,.18), var(--shadow); }
}

@media (max-width: 760px) {
  .pending-action::after {
    width: 7px;
    height: 7px;
    margin-left: 3px;
    border-width: 1.5px;
  }
}


/* v4.9.6: current white-green web layout, targeted changes only */
.custom-metric-icon { display:grid; place-items:center; }
.custom-metric-icon img { width:36px; height:36px; object-fit:contain; }
.main-switch-strip { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin:0 0 -1px 16px; position:relative; z-index:3; }
.sticky-title-tabs { display:flex; gap:8px; align-items:flex-end; }
.sticky-tab { min-width:92px; padding:9px 18px 10px; border:1px solid rgba(80,97,77,.17); border-bottom-color:#cfc8b9; border-radius:14px 14px 7px 7px; color:var(--muted); background:#ece8dc; font-weight:800; box-shadow:0 5px 12px rgba(72,63,47,.06); }
.sticky-tab span { display:block; margin-bottom:3px; font-size:8px; letter-spacing:.22em; opacity:.75; }
.sticky-tab.active { color:#fff; background:var(--green); border-color:var(--green); transform:translateY(1px); }
.main-harvest-btn { margin:0 16px 8px 0; }
.main-switch-pane { display:none; }
.main-switch-pane.active { display:block; }
.garden-panel > .panel-heading, .store-panel > .panel-heading, .bouquet-panel > .panel-heading { display:none; }
.garden-panel, .store-panel, .bouquet-panel { border-top-left-radius:10px; }
.cat-house-heading { align-items:flex-end; }
.cat-sticky-tabs { display:flex; gap:7px; align-items:flex-end; }
.cat-sticky-tab { padding:9px 15px; border-radius:12px 12px 8px 8px; background:#ece8dc; color:var(--muted); font-weight:800; }
.cat-sticky-tab.active { background:var(--green); color:#fff; }
.cat-switch-pane { display:none; }
.cat-switch-pane.active { display:block; }
.legacy-tabs-panel { display:none !important; }
.asset-img { width:100%; height:100%; object-fit:contain; display:block; }
.metric-card .asset-img { width:36px; height:36px; }
.notice-bell { width:23px; height:23px; display:inline-grid; place-items:center; }
.notice-bell img { width:23px; height:23px; object-fit:contain; }
.plant-visual { position:relative; }
.plant-visual .stage-icon { width:82px; height:82px; object-fit:contain; }
.plant-visual .pest-overlay { position:absolute; right:10px; top:5px; width:32px; height:32px; object-fit:contain; filter:drop-shadow(0 2px 4px rgba(93,77,54,.15)); }
.locked-pot-icon img { width:62px; height:62px; object-fit:contain; }
.cat-image { content:none; }
.cat-utilities { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.utility-card { gap:7px; min-height:80px; padding:10px; }
.utility-card img { width:min(100%, 56px); height:56px; object-fit:contain; }
.cat-actions { margin-top:14px; }
.backpack-modal-grid { display:grid; gap:16px; max-height:66vh; overflow:auto; padding-right:3px; }
.backpack-group h3 { margin:0 0 9px; }
.backpack-list { display:grid; gap:8px; }
.backpack-item { display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.52); }
.backpack-item img { width:40px; height:40px; object-fit:contain; }
.backpack-meta strong { display:block; }
.backpack-meta small { display:block; color:var(--muted); line-height:1.35; }
.backpack-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.cat-shop-asset, .shop-item-asset { width:48px; height:48px; object-fit:contain; }
.cat-collection-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.cat-collectible-card { min-height:120px; padding:10px; display:grid; grid-template-columns:42px minmax(0,1fr); gap:9px; align-items:start; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.52); }
.cat-collectible-card img { width:40px; height:40px; object-fit:contain; }
.cat-collectible-card strong { display:block; margin-bottom:4px; }
.cat-collectible-card small { display:block; color:var(--muted); font-size:11px; line-height:1.38; }
.cat-collectible-card.unknown { opacity:.58; }
.cat-letter-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.cat-letter-card { min-height:105px; padding:10px; display:flex; gap:8px; align-items:flex-start; text-align:left; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.52); }
.cat-letter-card img { width:30px; height:30px; object-fit:contain; flex:0 0 30px; }
.cat-letter-card strong { display:block; margin-bottom:4px; }
.cat-letter-card small { display:block; color:var(--muted); }
.cat-letter-card.locked { opacity:.48; }
.vase-stage { position:relative; width:82px; height:104px; margin:0 auto 5px; }
.vase-stage::before { content:""; position:absolute; left:18px; right:18px; top:32px; bottom:2px; border:2px solid rgba(111,135,103,.38); border-top:0; border-radius:0 0 28px 28px; background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(223,233,215,.32)); z-index:1; }
.vase-stage::after { content:""; position:absolute; width:34px; height:18px; left:50%; top:22px; transform:translateX(-50%); border:2px solid rgba(111,135,103,.38); border-bottom:0; border-radius:9px 9px 0 0; background:rgba(255,255,255,.18); z-index:1; }
.vase-stage img { position:absolute; left:50%; top:0; transform:translateX(-50%); width:66px; height:66px; object-fit:contain; z-index:2; }
.vase-stage.empty img { display:none; }
@media (max-width:900px) { .cat-collection-grid,.cat-letter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px) { .main-switch-strip { margin-left:5px; } .sticky-tab { min-width:72px; padding:8px 12px; } .main-harvest-btn { margin-right:5px; } .cat-collection-grid,.cat-letter-grid { grid-template-columns:1fr; } .backpack-item { grid-template-columns:38px minmax(0,1fr); } .backpack-actions { grid-column:1/-1; justify-content:flex-start; } }



/* v4.9.8: shared note board */
.main-strip-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 16px 8px 0;
}
.main-strip-actions .main-harvest-btn { margin: 0; }
.notes-open-btn {
  padding: 10px 17px;
  border: 1px solid rgba(80,97,77,.18);
  border-radius: 14px;
  color: var(--green-dark);
  background: #f4f0e6;
  font-weight: 800;
  box-shadow: 0 5px 12px rgba(72,63,47,.06);
}
.notes-open-btn:hover { transform: translateY(-1px); }
.notes-open-btn.has-unread::after {
  content: "新";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  margin-left: 5px;
  padding: 0 3px;
  border-radius: 8px;
  color: #fffaf1;
  background: #d47d62;
  font-size: 10px;
  line-height: 1;
}
.bouquet-main-tab.has-unread::after {
  content: "新";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  margin-left: 5px;
  padding: 0 3px;
  border-radius: 8px;
  color: #fffaf1;
  background: #d47d62;
  font-size: 10px;
  line-height: 1;
}
.vase-heading-actions { display: flex; align-items: center; gap: 8px; }
.bouquet-collection-tabs { display: flex; gap: 6px; margin-bottom: 16px; padding: 4px; border-radius: 14px; background: #f3ecdf; }
.bouquet-collection-tab { flex: 1; border: 0; border-radius: 10px; padding: 8px; color: var(--muted); background: transparent; font-weight: 800; }
.bouquet-collection-tab.active { color: var(--green-dark); background: #fffaf2; box-shadow: 0 3px 8px rgba(72,63,47,.08); }
.bouquet-shelf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.bouquet-shelf-card { position: relative; min-height: 116px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 10px 6px; border: 1px solid var(--line); border-radius: 16px; color: var(--green-dark); background: #fffaf2; }
.bouquet-shelf-card.received { cursor: pointer; }
.bouquet-shelf-card.locked { color: #a59d90; background: #f0ece5; cursor: default; }
.bouquet-card-artwork { width: 100%; height: 72px; display: flex; align-items: center; justify-content: center; }
.bouquet-artwork { display: block; width: min(100%, 148px); height: 72px; object-fit: contain; object-position: center; }
.bouquet-artwork-silhouette { background: #c8c8c0; opacity: .78; mask-repeat: no-repeat; mask-position: center; mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; }
.modal-card-bouquet-detail { width: min(440px, calc(100vw - 36px)); max-height: calc(100vh - 36px); }
.bouquet-detail-summary { display: grid; justify-items: center; margin: 0 0 10px; text-align: center; }
.bouquet-detail-artwork { display: flex; justify-content: center; margin: 0 0 3px; }
.bouquet-detail-artwork .bouquet-artwork { width: min(100%, 190px); height: 108px; }
.bouquet-detail-name { margin: 0; color: var(--green-dark); font-size: 19px; }
.bouquet-detail-count { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.bouquet-shelf-card small { color: var(--muted); }
.bouquet-empty { padding: 28px 12px; color: var(--muted); text-align: center; }
.bouquet-card-list, .bouquet-history-list { display: grid; gap: 10px; }
.bouquet-message-card { position: relative; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: #fffaf2; }
.bouquet-new-badge { position: absolute; top: 7px; right: 7px; display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; color: #fffaf1; background: #d47d62; font-size: 10px; font-weight: 800; line-height: 1; }
.bouquet-message-card strong, .bouquet-message-card time { display: block; }
.bouquet-message-card time, .bouquet-history-row time { margin-top: 4px; color: var(--muted); font-size: 12px; }
.bouquet-message-card p { margin: 10px 0 0; line-height: 1.7; white-space: pre-wrap; }
.bouquet-back-btn { margin-bottom: 12px; }
.bouquet-detail-components, .bouquet-detail-first { color: var(--muted); line-height: 1.7; }
.bouquet-detail-components { margin: 0; }
.bouquet-detail-first { margin: 4px 0 0; }
.bouquet-detail-card { margin: 12px 0; padding: 12px 14px; border: 1px solid #e4d5be; border-radius: 15px; background: #fff7ea; }
.bouquet-detail-card strong, .bouquet-detail-card time { display: block; }
.bouquet-detail-card time { margin-top: 5px; color: var(--muted); font-size: 12px; }
.bouquet-detail-card p { margin: 7px 0 0; color: var(--green-dark); line-height: 1.65; white-space: pre-wrap; }
.bouquet-history-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; background: #f7eee1; }
.bouquet-history-row span { line-height: 1.6; text-align: right; }
.bouquet-history-list { max-height: 132px; overflow: auto; padding-right: 2px; }
.notes-intro { margin: 0 0 14px; color: var(--muted); line-height: 1.7; }
.notes-composer {
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.45);
}
.notes-input-row { display: flex; gap: 10px; }
.notes-input-row input { min-width: 0; background: #fffdf8; }
.notes-send-btn { flex: 0 0 auto; white-space: nowrap; }
.notes-composer-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}
.notes-divider { height: 1px; margin: 18px 0; background: var(--line); }
.notes-list { display: grid; gap: 11px; }
.note-card {
  padding: 13px 15px 14px;
  border: 1px solid #ddd5c7;
  border-radius: 17px;
  background: #fffaf0;
  box-shadow: 0 5px 14px rgba(72,63,47,.05);
}
.note-card.note-ai { background: #eef3e9; border-color: #d2deca; }
.note-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.note-card-head strong { font-size: 13px; color: var(--green-dark); }
.note-card-head time { color: var(--muted); font-size: 11px; }
.note-card p { margin: 8px 0 0; line-height: 1.65; word-break: break-word; }
.notes-empty, .notes-loading {
  padding: 26px 18px;
  border: 1px dashed #d6cfbf;
  border-radius: 17px;
  color: var(--muted);
  text-align: center;
  background: rgba(255,255,255,.35);
}
.notes-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 13px;
}
.notes-pager button:disabled { cursor: default; opacity: .42; }

/* v4.9.7 fixed narrow layout retained in v4.9.8 */
html, body { min-width: 960px; }
.page {
  width: 920px;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}
.top-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.letter-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.collection-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vase-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cat-layout { grid-template-columns: 280px minmax(0, 1fr); }
.supplies, .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }


/* v4.9.8b: layout regression hotfix */
html, body { min-width: 0; }
.app-shell {
  width: min(920px, calc(100vw - 16px));
  max-width: calc(100vw - 16px);
  margin-left: auto;
  margin-right: auto;
}
.main-switch-strip {
  justify-content: flex-start;
}
.main-strip-actions {
  align-self: flex-end;
  margin: 0 0 8px 0;
}
.main-strip-actions .mini-btn {
  padding: 9px 15px;
  border-radius: 14px;
  font-size: 12px;
}
.plant-visual > .asset-img,
.plant-visual > .stage-icon {
  width: 82px;
  height: 82px;
  object-fit: contain;
}
.modal-card {
  width: min(680px, calc(100vw - 36px));
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-card-wide {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 24px);
}
.modal-body-encyclopedia {
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(100vh - 170px);
  overflow: auto;
  padding-right: 6px;
}
.encyclopedia-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.encyclopedia-item {
  min-width: 0;
  min-height: 156px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  text-align: center;
  border: 1px solid rgba(111,135,103,.16);
  border-radius: 16px;
  background: rgba(255,255,255,.58);
}
.encyclopedia-item.unknown {
  opacity: .5;
  filter: grayscale(.9);
}
.encyclopedia-item-icon {
  width: 100%;
  min-height: 78px;
  display: grid;
  place-items: center;
}
.encyclopedia-item-icon > .asset-img,
.encyclopedia-item-icon > .flower-icon-image {
  width: 72px;
  height: 72px;
  object-fit: contain;
}
.encyclopedia-item-meta {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 4px;
}
.encyclopedia-item-meta strong,
.encyclopedia-item-meta small {
  display: block;
  overflow-wrap: anywhere;
}
.collection-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.collection-item {
  min-height: 132px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.collection-item .item-icon {
  width: 100%;
  min-height: 72px;
  display: grid;
  place-items: center;
}
.collection-item .item-icon > .asset-img,
.collection-item .item-icon > .flower-icon-image {
  width: 68px;
  height: 68px;
  object-fit: contain;
}
.collection-item .item-meta small {
  display: block;
  margin-top: 4px;
}


/* v4.9.8c: fix cat stat rows with icon + label + bar + value */
.stat-row.with-icon {
  grid-template-columns: 36px 42px minmax(120px, 1fr) 30px;
  gap: 8px;
  align-items: center;
}
.stat-row.with-icon .stat-mini-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
}
.stat-row.with-icon .stat-mini-icon > .asset-img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}
.stat-row.with-icon > span:nth-child(2) {
  white-space: nowrap;
}
.stat-row.with-icon .stat-track {
  width: 100%;
  min-width: 0;
}
@media (max-width: 760px) {
  .stat-row.with-icon {
    grid-template-columns: 28px 30px minmax(0, 1fr) 22px;
    gap: 5px;
  }
  .stat-row.with-icon .stat-mini-icon,
  .stat-row.with-icon .stat-mini-icon > .asset-img {
    width: 26px;
    height: 26px;
  }
}

/* v4.9.9: backpack entries, cat controls, shop sizing, encyclopedia counts */
.backpack-open-btn,
.cat-backpack-btn {
  border: 1px solid rgba(80,97,77,.22);
  color: var(--green-dark);
  background: #f4f0e6;
  font-weight: 800;
}

.cat-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cat-title-row h2 { margin: 0; }
.cat-backpack-btn {
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 12px;
}

.cat-name-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}
.cat-portrait .cat-name-row h3 { margin: 0; }
.cat-pet-btn {
  padding: 9px 15px;
  border-radius: 13px;
  font-size: 12px;
  white-space: nowrap;
}

/* Both shop tabs use one stable card and image size. */
.shop-square-card {
  aspect-ratio: auto;
  height: 276px;
  min-height: 276px;
  min-width: 0;
  overflow: hidden;
  padding: 12px 10px 10px;
  gap: 8px;
  align-items: stretch;
  justify-content: flex-start;
}
.shop-square-icon {
  width: 100%;
  height: 120px;
  min-height: 120px;
  padding: 6px;
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1.2;
  overflow: visible;
}
.shop-square-icon > .asset-img,
.shop-square-icon > .flower-icon-image {
  display: block;
  width: min(100%, 112px);
  height: auto;
  max-height: 112px;
  object-fit: contain;
}
.shop-square-name {
  min-height: 32px;
  margin: 0;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.3;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.shop-square-note {
  flex: 1 1 auto;
  min-height: 56px;
  display: grid;
  align-content: start;
  margin: 0;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.shop-buy-btn {
  width: 100%;
  margin-top: auto;
  padding: 7px 5px;
  font-size: 10px;
}

@media (max-width: 760px) {
  .modal-card-wide {
    width: min(100vw - 20px, 680px);
    padding: 22px 18px;
  }
  .encyclopedia-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .shop-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .shop-square-card {
    height: 252px;
    min-height: 252px;
  }
  .shop-square-icon {
    height: 96px;
    min-height: 96px;
    font-size: 16px;
  }
  .shop-square-icon > .asset-img,
  .shop-square-icon > .flower-icon-image {
    width: min(100%, 92px);
    height: auto;
    max-height: 92px;
  }
}

@media (max-width: 420px) {
  .encyclopedia-grid {
    grid-template-columns: 1fr;
  }
  .shop-square-name {
    min-height: 32px;
    font-size: 12px;
  }
  .shop-square-note {
    min-height: 38px;
    font-size: 9px;
  }
}

.backpack-group-heading,
.inventory-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}
.backpack-group-heading h3,
.inventory-heading-row .subheading {
  margin: 0;
}
.backpack-actions {
  flex-wrap: nowrap;
  white-space: nowrap;
}
.backpack-sell-all { flex: 0 0 auto; }

.collection-item { min-height: 150px; }
.collection-harvest-count {
  margin-top: 3px !important;
  color: var(--green-dark) !important;
  font-size: 10px !important;
}

/* v4.9.9 button sizing follow-up: moved controls should no longer remain tiny. */
.cat-backpack-btn {
  padding: 10px 18px;
  font-size: 13px;
}
.cat-pet-btn {
  padding: 10px 17px;
  font-size: 13px;
}

.cat-details {
  display: grid;
  gap: 12px;
}

.cat-section-block {
  padding: 14px;
  border: 1px solid rgba(92,111,84,.14);
  border-radius: 16px;
  background: rgba(255,255,255,.45);
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
}

.cat-section-block h4 {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--green-dark);
}

.cat-phase-hint {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.cat-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.cat-layout,
.cat-details,
.cat-info-grid {
  min-width: 0;
}

.cat-info-card {
  padding: 10px 11px;
  border-radius: 13px;
  background: rgba(231,238,225,.72);
  border: 1px solid rgba(92,111,84,.1);
}

.cat-info-card strong,
.cat-info-card span,
.cat-info-card small {
  display: block;
}

.cat-info-card strong {
  margin-bottom: 4px;
  font-size: 11px;
  color: var(--muted);
}

.cat-info-card span {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.cat-info-card small {
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
}

.cat-care-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 7px;
  align-items: stretch;
}

.cat-care-actions .mini-btn,
.cat-care-actions .primary-btn {
  width: 100%;
  justify-content: center;
  min-height: 40px;
}

@media (max-width: 620px) {
  .topbar-side,
  .top-actions {
    width: 100%;
  }

  .cat-info-grid,
  .cat-care-actions {
    grid-template-columns: 1fr;
  }
}

.icon-fallback-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 30px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(92,111,84,.12);
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  word-break: break-word;
}

.shop-square-icon > .icon-fallback-label {
  max-width: 92px;
  min-height: 36px;
}