/* 森の园 · 动森图鉴 — 与网页端同款主题 */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: #FAF1E2; color: #3E2F23; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; }

.page { max-width: 1080px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column;
  background-image:
    repeating-linear-gradient(0deg, rgba(62,47,35,.04) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(62,47,35,.04) 0 1px, transparent 1px 32px); }

.header { background: linear-gradient(135deg, #9A6238, #D29B63); padding: 22px 24px 20px; }
.header-in { display: flex; align-items: center; gap: 14px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-leaf { font-size: 40px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.brand-txt h1 { font-size: 24px; color: #FFF7E8; text-shadow: 0 2px 6px rgba(62,47,23,.4); letter-spacing: 2px; }
.brand-txt p { font-size: 13px; color: #F7E3C3; margin-top: 3px; letter-spacing: 1px; }

.main { flex: 1; padding: 16px 20px 40px; }
.toolbar { position: sticky; top: 0; background: #FAF1E2; padding: 10px 0 12px; z-index: 5; border-bottom: 2px solid #E4D5BC; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip { padding: 6px 14px; border-radius: 16px; background: #FFF9EF; border: 1.5px solid #D8C7A8;
  color: #3E2F23; font-size: 13px; cursor: pointer; user-select: none; transition: all .15s; }
.chip:hover { border-color: #C0824F; }
.chip.on { background: linear-gradient(135deg, #C0824F, #9A6238); color: #FFF7E8; border-color: #9A6238; }
.search-box input { width: 100%; padding: 12px 16px; border-radius: 12px; border: 2px solid #D8C7A8;
  background: #FFF9EF; font-size: 15px; color: #3E2F23; outline: none; }
.search-box input:focus { border-color: #C0824F; }
.stats { margin-top: 10px; font-size: 12.5px; color: #8A7455; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 12px; margin-top: 16px; }
.card { background: #FFF9EF; border: 1.5px solid #E4D5BC; border-radius: 12px; padding: 10px 8px 8px;
  cursor: pointer; transition: all .15s; text-align: center; }
.card:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(62,47,35,.12); border-color: #C0824F; }
.card-img { width: 56px; height: 56px; object-fit: contain; image-rendering: pixelated; margin: 0 auto 8px; display: block; }
.card-name { font-size: 13px; color: #3E2F23; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-cat { font-size: 11px; color: #A08A68; margin-top: 3px; }
.card-v { font-size: 11px; color: #C0824F; margin-top: 2px; }

.loadmore { text-align: center; padding: 18px 0 6px; color: #8A7455; font-size: 13px; }
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 20px 0 6px; }
.pager-btn { min-width: 36px; height: 34px; padding: 0 10px; border: 1px solid #E3CFA8; border-radius: 8px;
  background: #FFF9EC; color: #5A4426; font-size: 13px; cursor: pointer; transition: all .15s; }
.pager-btn:hover:not(:disabled):not(.on) { background: #F6EAD3; border-color: #C0824F; }
.pager-btn.on { background: linear-gradient(135deg, #C0824F, #9A6238); border-color: #9A6238; color: #FFF; font-weight: 700; }
.pager-btn:disabled { opacity: .45; cursor: default; }
.pager-dot { align-self: center; color: #A08B6E; font-size: 13px; padding: 0 2px; }
.empty { text-align: center; padding: 60px 0; color: #A08A68; font-size: 14px; }

.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; }
.modal[hidden] { display: none; }
.modal-mask { position: absolute; inset: 0; background: rgba(62,47,23,.55); }
.modal-box { position: relative; width: min(420px, 90vw); background: #FFF9EF; border-radius: 16px;
  padding: 26px 22px 24px; box-shadow: 0 12px 32px rgba(62,47,23,.35); }
.modal-close { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; border: none; border-radius: 50%;
  background: #E4D5BC; color: #3E2F23; font-size: 15px; cursor: pointer; }
.modal-body { text-align: center; }
.m-img { width: 96px; height: 96px; object-fit: contain; image-rendering: pixelated; margin: 0 auto 12px; }
.modal-box h2 { font-size: 19px; margin-bottom: 6px; }
.m-meta { font-size: 13px; color: #8A7455; margin-bottom: 14px; }
.m-colors { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.color-thumb { width: 52px; height: 52px; border: 2px solid #E4D5BC; border-radius: 8px; cursor: pointer;
  overflow: hidden; background: #FFF; transition: all .15s; }
.color-thumb img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.color-thumb.on { border-color: #C0824F; box-shadow: 0 0 0 2px #C0824F; }
.color-tag { font-size: 11px; color: #8A7455; }

.footer { text-align: center; padding: 22px 16px 30px; color: #8A7455; font-size: 12px; line-height: 1.9;
  border-top: 1px solid #E4D5BC; }
.icp { color: #3E2F23; }
.shop-link { color: #C0824F; font-weight: 600; text-decoration: none; }
.shop-link:hover { text-decoration: underline; }

@media (max-width: 480px) {
  .brand-txt h1 { font-size: 19px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 9px; }
}