/* 方块工坊 · 增强层样式（风格选择 / 签到 / 流水 / 我的资产 / 广场定价 / 动效 / 多语言） */

/* ---- 页面切换与进场动效 ---- */
@keyframes viewIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes popIn { 0% { opacity: 0; transform: scale(.9); } 60% { transform: scale(1.02); } 100% { opacity: 1; transform: none; } }
@keyframes glowPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(127,182,255,.45); } 50% { box-shadow: 0 0 0 8px rgba(127,182,255,0); } }
@keyframes shine { 0% { background-position: -160% 0; } 100% { background-position: 260% 0; } }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes stampIn { 0% { opacity: 0; transform: scale(1.7) rotate(-14deg); } 70% { opacity: 1; transform: scale(.96) rotate(2deg); } 100% { opacity: 1; transform: none; } }

main > * { animation: viewIn .34s cubic-bezier(.22,.7,.3,1) both; }
main > *:nth-child(2) { animation-delay: .05s; }
main > *:nth-child(3) { animation-delay: .09s; }
main > *:nth-child(4) { animation-delay: .13s; }
.panel, .card-sel, .gal .it, .style-card, .ci-cell, .asset, .lg-row { transition: transform .18s cubic-bezier(.22,.7,.3,1), border-color .18s, background .25s, box-shadow .18s; }
.card-sel:hover, .style-card:hover, .gal .it:hover, .asset:hover { transform: translateY(-3px); }
.card-sel.on, .style-card.on { animation: popIn .22s ease-out both; }

/* 主题切换整体过渡：背景、文字、边框步调一致，切换时不会闪一下 */
html { transition: background-color .42s ease; }
body, .panel, .topbar, .footer, .card-sel, .style-card, .btn, .nav a, .input, textarea, select, .badge, .kv, th, td, .lg-row, .asset, .ci-cell {
  transition: background-color .38s ease, color .38s ease, border-color .38s ease, box-shadow .38s ease, transform .18s ease;
}

/* ---- 右下角浮动工具条（语言切换） ---- */
.fab-dock { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.fab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; font: inherit; font-weight: 800; font-size: 13px; cursor: pointer;
  color: #eaf7ff; background: linear-gradient(#3a4a5e, #26313d); border: 3px solid #0c0c0f; border-radius: 0; box-shadow: 0 5px 0 rgba(0,0,0,.42), inset 0 2px 0 rgba(255,255,255,.16); }
.fab:hover { transform: translateY(-2px); border-color: #7fb6ff; }
.fab:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.42); }
.fab img { width: 20px; height: 20px; }
.fab.gold { background: linear-gradient(#d8b23c, #a9812a); color: #241a04; }
.fab.glow { animation: glowPulse 2.1s ease-out infinite; }
html[data-theme="light"] .fab { color: #16202b; background: linear-gradient(#f3f5f8, #dfe4ea); border-color: #9aa3ad; box-shadow: 0 5px 0 rgba(120,130,145,.4), inset 0 2px 0 #fff; }

/* ---- 建筑风格选择 ---- */
.style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
.style-card { position: relative; cursor: pointer; padding: 11px 12px 12px; border: 3px solid #0c0c0f; background: linear-gradient(#2c2c33, #202027); overflow: hidden; }
.style-card .sw { display: flex; gap: 3px; margin-bottom: 8px; }
.style-card .sw i { width: 14px; height: 14px; display: block; border: 2px solid #0c0c0f; }
.style-card b { display: block; font-size: 13.5px; margin-bottom: 3px; }
.style-card span { display: block; font-size: 11.5px; line-height: 1.55; opacity: .7; }
.style-card.on { border-color: #8bf05a; box-shadow: inset 0 0 0 2px rgba(139,240,90,.35), 0 0 0 2px rgba(139,240,90,.25); }
.style-card.on::after { content: '✓'; position: absolute; right: 7px; top: 5px; font-weight: 900; color: #8bf05a; }
html[data-theme="light"] .style-card { background: linear-gradient(#fbfcfd, #eef1f4); border-color: #b3bac2; }
html[data-theme="light"] .style-card .sw i { border-color: #b3bac2; }

/* ---- 每日签到 ---- */
.ci-wrap { text-align: center; }
.ci-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 16px 0 6px; }
@media (min-width: 660px) { .ci-grid { grid-template-columns: repeat(7, 1fr); } }
.ci-cell { position: relative; padding: 13px 6px 11px; border: 3px solid #0c0c0f; background: linear-gradient(#31313a, #23232a); }
.ci-cell .d { font-size: 11px; font-weight: 800; opacity: .66; margin-bottom: 6px; }
.ci-cell .r { font-size: 15px; font-weight: 900; color: #f8d660; }
.ci-cell .r img { width: 18px; height: 18px; vertical-align: -3px; margin-right: 3px; }
.ci-cell.done { background: linear-gradient(#27502f, #1b3a22); border-color: #0c0c0f; }
.ci-cell.done::after { content: '已领'; position: absolute; right: 5px; top: 4px; font-size: 9.5px; font-weight: 900; color: #8bf05a; }
.ci-cell.today { animation: glowPulse 1.9s ease-out infinite; border-color: #f8d660; box-shadow: inset 0 0 0 2px rgba(248,214,96,.4); }
.ci-cell.big { background: linear-gradient(#5a3a12, #3a2508); }
html[data-theme="light"] .ci-cell { background: linear-gradient(#fbfcfd, #eef1f4); border-color: #b3bac2; }
html[data-theme="light"] .ci-cell.done { background: linear-gradient(#dff5e2, #c8eccc); }
html[data-theme="light"] .ci-cell.big { background: linear-gradient(#ffeec2, #ffe08a); }

/* ---- 账户流水 / 我的资产 ---- */
.lg-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 11px 13px; border: 3px solid #0c0c0f; background: linear-gradient(#2b2b31, #202027); margin-bottom: 8px; }
.lg-row .rz { font-size: 13px; }
.lg-row .tm { font-size: 11px; opacity: .55; margin-top: 3px; }
.lg-row .dl { font-weight: 900; font-size: 15px; text-align: right; white-space: nowrap; }
.lg-row .dl.plus { color: #8bf05a; }
.lg-row .dl.minus { color: #ff9b8f; }
.lg-row .bal { font-size: 11.5px; opacity: .6; text-align: right; }
.lg-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.lg-sum > div { text-align: center; padding: 12px 8px; border: 3px solid #0c0c0f; background: rgba(0,0,0,.24); }
.lg-sum b { display: block; font-size: 19px; }
.lg-sum span { font-size: 11.5px; opacity: .62; }
html[data-theme="light"] .lg-row { background: linear-gradient(#fbfcfd, #eef1f4); border-color: #b3bac2; }
html[data-theme="light"] .lg-sum > div { background: rgba(255,255,255,.7); border-color: #b3bac2; }

.asset { display: flex; gap: 13px; padding: 12px; border: 3px solid #0c0c0f; background: linear-gradient(#2b2b31, #202027); margin-bottom: 10px; align-items: center; }
.asset img.th { width: 108px; height: 68px; object-fit: cover; border: 2px solid #0c0c0f; background: #0a0d12; flex: 0 0 auto; }
.asset .mt { flex: 1 1 auto; min-width: 0; }
.asset .mt b { display: block; font-size: 14.5px; margin-bottom: 4px; }
.asset .mt span { font-size: 12px; opacity: .7; line-height: 1.6; display: block; }
html[data-theme="light"] .asset { background: linear-gradient(#fbfcfd, #eef1f4); border-color: #b3bac2; }
html[data-theme="light"] .asset img.th { border-color: #b3bac2; }

/* ---- 价格标签 ---- */
.price-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; font-size: 11.5px; font-weight: 900; border: 2px solid #0c0c0f; }
.price-tag.free { background: #2f6f3c; color: #dff7e3; }
.price-tag.paid { background: linear-gradient(#d8b23c, #a9812a); color: #241a04; }
.price-tag img { width: 14px; height: 14px; }

/* ---- 通用小件 ---- */
.range-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.chip { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border: 2px solid #0c0c0f; background: rgba(127,182,255,.16); color: #bcdcff; }
html[data-theme="light"] .chip { background: rgba(60,120,200,.14); color: #2a5580; border-color: #b3bac2; }
.shine { background-image: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.34) 50%, transparent 70%); background-size: 220% 100%; animation: shine 2.6s linear infinite; }
.floaty { animation: floatY 3.4s ease-in-out infinite; }
.stamp { animation: stampIn .5s cubic-bezier(.2,1.5,.4,1) both; }
.sec-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.sec-h h3 { margin: 0; }
.lang-fab .lb { font-weight: 900; letter-spacing: .5px; }
/* ============ 广场卡片角标修复 ============
   style.css 里 `.gal .it span` 会把卡片内任何 span 拉成整块图的尺寸：
   left/right/bottom 全撑满 + 深色渐变底 + padding，于是价格角标（以及角标里的
   小方块图标）会盖住整张预览图。下面用更高优先级把它钉回左上角。 */
.gal .it .it-img .price-tag {
  position: absolute; left: 7px; top: 7px; right: auto; bottom: auto;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; background: rgba(8, 10, 14, .86); border: 2px solid #0c0c0f;
  font-size: 11.5px; font-weight: 900; line-height: 1.25; text-shadow: none;
  white-space: nowrap; z-index: 3;
}
.gal .it .it-img .price-tag.free { color: #8bf05a; }
.gal .it .it-img .price-tag.paid { color: #ffd75e; }
.gal .it .it-img .price-tag img { position: static; inset: auto; width: 13px; height: 13px; object-fit: contain; }
/* 卡片尺寸标签同样别被撑开（原本靠 style.css 里的 .dims 规则，这里兜底） */
.gal .it .it-img .dims { position: absolute; left: auto; right: 7px; top: 7px; bottom: auto; }

/* ============ 新建页：压扁成“一屏放得下” ============ */
#new-form textarea { min-height: 74px; }
#new-form .drop { padding: 12px; }
#new-form > .hint { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#size-opt .card-sel, #tier-opt .card-sel { padding: 9px 10px; }
#size-opt .card-sel b, #tier-opt .card-sel b { font-size: 14px; margin-bottom: 3px; }
#size-opt .card-sel span, #tier-opt .card-sel span {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: 11.5px; line-height: 1.5;
}
.opt .card-sel .pill { font-size: 11.5px; padding: 2px 8px; }
.range-chips { margin-top: 6px; }
#tier-opt { gap: 8px; }
#size-opt { gap: 8px; }

/* 风格：从大卡片改成紧凑胶囊，一屏能全看到 */
.style-grid { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 8px; }
.style-chip {
  position: relative; display: flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 7px 9px; border: 3px solid #0c0c0f; background: linear-gradient(#2c2c33, #202027);
  font-size: 12.5px; font-weight: 700; line-height: 1.25;
  transition: transform .16s cubic-bezier(.22,.7,.3,1), border-color .16s, background .25s;
}
.style-chip:hover { transform: translateY(-2px); }
.style-chip .sw { display: flex; gap: 2px; flex: 0 0 auto; }
.style-chip .sw i { width: 9px; height: 9px; display: block; border: 2px solid #0c0c0f; }
.style-chip.on { border-color: #8bf05a; box-shadow: inset 0 0 0 2px rgba(139, 240, 90, .32); }
html[data-theme="light"] .style-chip { background: linear-gradient(#fbfcfd, #eef1f4); border-color: #b3bac2; }
html[data-theme="light"] .style-chip .sw i { border-color: #b3bac2; }

/* 折叠说明 */
.note-fold { margin-top: 10px; padding: 8px 11px; border: 3px solid #0c0c0f; background: rgba(0, 0, 0, .18); }
.note-fold > summary { cursor: pointer; font-weight: 700; font-size: 12.5px; opacity: .85; }
.note-fold[open] > summary { margin-bottom: 8px; }
.note-fold .hint { margin-top: 8px; }
html[data-theme="light"] .note-fold { border-color: #b3bac2; background: rgba(255, 255, 255, .5); }
/* 广场卡片：标题区撑满剩余高度，别露出黑色空白条 */
.gal .it .it-cap { flex: 1 1 auto; }

/* 新建页第二轮压扁：把拖拽框收成一行、卡片再瘦一点 */
#new-form .drop { padding: 9px 12px; }
#new-form .drop .hint { display: inline; margin: 0 0 0 8px; font-size: 11.5px; }
#new-form > .hint { -webkit-line-clamp: 1; }
#size-opt .card-sel span, #tier-opt .card-sel span { font-size: 11.5px; line-height: 1.45; }
#size-opt .card-sel, #tier-opt .card-sel { padding: 8px 9px; }
#size-opt .card-sel b, #tier-opt .card-sel b { font-size: 13.5px; }
.style-chip { padding: 5px 8px; font-size: 12px; }
.style-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 7px; }
.style-chip .sw i { width: 8px; height: 8px; }
label.f { margin: 10px 0 5px; }
#new-form .hint { margin-top: 5px; }
/* 新建页第三轮：风格胶囊做成单行色条样式，整页收进一屏 */
.style-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 7px; }
.style-chip {
  padding: 5px 8px; font-size: 11.5px; border-left-width: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#new-form { padding: 14px 16px; }
#new-form .drop br { display: none; }
label.f { margin: 8px 0 4px; }
#new-form .panel-title { margin-bottom: 4px; }
#new-form .flex.between { margin-bottom: 2px; }
/* 顶部那条提示还是给两行，信息别被截断 */
#new-form > .hint { -webkit-line-clamp: 2; }/* ================= 建筑广场：搜索 / 排序 / 筛选 工具条 ================= */
.plaza-head { margin-bottom: 14px; }
.plaza-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 11px 13px; margin-bottom: 16px; border: 3px solid #0c0c0f;
  background: linear-gradient(#2b2b31, #212127); animation: riseIn .42s cubic-bezier(.2,.72,.3,1) both;
  box-shadow: inset 3px 3px 0 rgba(255,255,255,.1), inset -3px -3px 0 rgba(0,0,0,.45), 0 4px 0 rgba(0,0,0,.32);
}
.pt-search { position: relative; display: flex; align-items: center; gap: 9px; flex: 1 1 280px; min-width: 210px; }
.pt-search > img { width: 20px; height: 20px; flex: 0 0 auto; image-rendering: pixelated; transition: transform .3s cubic-bezier(.22,.7,.3,1); }
.pt-search:focus-within > img { transform: translateY(-2px) rotate(-8deg); }
.pt-search input {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 14px; font-weight: 600; color: #f2f5f8;
  padding: 9px 36px 9px 12px; border: 3px solid #0c0c0f; background: #15171c;
  box-shadow: inset 3px 3px 0 rgba(0,0,0,.5), inset -3px -3px 0 rgba(255,255,255,.06);
  transition: border-color .2s, box-shadow .2s;
}
.pt-search input::placeholder { color: rgba(235,240,246,.42); font-weight: 500; }
.pt-search input:focus { outline: none; border-color: #8bf05a; box-shadow: inset 3px 3px 0 rgba(0,0,0,.5), 0 0 0 2px rgba(139,240,90,.3); }
.pt-search input::-webkit-search-cancel-button { display: none; }
.pt-x {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 900; line-height: 1; color: #cdd6e0;
  background: rgba(255,255,255,.12); border: 2px solid #0c0c0f;
}
.pt-x:hover { background: #d8615a; color: #fff; }
.pt-rows { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; flex: 1 1 auto; }
.pt-group { display: flex; align-items: center; gap: 7px; }
.pt-label { font-size: 11.5px; font-weight: 800; opacity: .6; letter-spacing: .5px; }
.pt-chip {
  font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; color: #e9eef4;
  padding: 6px 11px; border: 2px solid #0c0c0f; background: linear-gradient(#4a4a52, #3a3a41);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.16), inset -2px -2px 0 rgba(0,0,0,.34);
  transition: transform .16s cubic-bezier(.22,.7,.3,1), background-color .2s, border-color .2s, box-shadow .2s;
}
.pt-chip:hover { transform: translateY(-2px); background: linear-gradient(#5b5b66, #46464e); }
.pt-chip:active { transform: translateY(1px); }
.pt-chip.on {
  background: linear-gradient(#63c94e, #3a8a2b);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.4), inset -2px -2px 0 rgba(0,0,0,.4), 0 0 0 2px rgba(139,240,90,.32);
}
.pt-stat { margin-left: auto; font-size: 12px; font-weight: 800; opacity: .62; white-space: nowrap; }
/* 卡片上的热度行（浏览 / 下载 / 作者） */
.gal .it .it-cap .price-badge { font-size: 11.5px; }
.plaza-hot { display: flex; align-items: center; gap: 12px; margin-top: 9px; }
.gal .it .it-cap .plaza-hot .ph {
  display: inline-flex; align-items: center; gap: 4px; position: static; bottom: auto;
  padding: 0; background: none; text-shadow: none; overflow: visible;
  font-size: 11.5px; font-weight: 800; opacity: .68;
}
.gal .it .it-cap .plaza-hot .ph img { width: 13px; height: 13px; image-rendering: pixelated; vertical-align: -2px; }
.gal .it .it-cap .plaza-hot .ph.by { margin-left: auto; opacity: .8; max-width: 46%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; }
/* 卡片悬停：上浮 + 外发光 + 预览图轻推近 */
.gal .it:hover { box-shadow: 0 0 0 2px rgba(127,182,255,.45), 0 10px 22px rgba(0,0,0,.45); }
.gal .it:hover .it-img img { transform: scale(1.05); }
.gal .it .it-img img { transition: opacity .35s ease, transform .5s cubic-bezier(.22,.7,.3,1); }
/* 空态 / 骨架屏 */
.gal .plaza-empty { grid-column: 1 / -1; text-align: center; padding: 34px 22px; animation: riseIn .36s ease both; }
.plaza-empty .pe-i { width: 46px; height: 46px; image-rendering: pixelated; animation: floatY 3.4s ease-in-out infinite; }
.plaza-empty .pe-t { font-size: 17px; font-weight: 900; margin-top: 10px; }
.gal .it.sk { pointer-events: none; }
.sk-img, .sk-l { background-image: linear-gradient(100deg, #24242b 30%, #3a3a45 50%, #24242b 70%); background-size: 220% 100%; animation: skShine 1.35s linear infinite; }
.sk-img { height: 180px; }
.sk-l { display: block; height: 11px; margin-bottom: 8px; font-size: 0; line-height: 0; border-radius: 0; }
.sk-l.w1 { width: 60%; } .sk-l.w2 { width: 94%; } .sk-l.w3 { width: 42%; }
@keyframes skShine { from { background-position: 130% 0; } to { background-position: -130% 0; } }
/* 亮色主题下的工具条与卡片 */
html[data-theme="light"] .plaza-tools {
  background: linear-gradient(#fbfcfd, #eef1f4); border-color: #b3bac2;
  box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 rgba(0,0,0,.06), 0 4px 0 rgba(120,130,145,.26);
}
html[data-theme="light"] .pt-search input { background: #fff; color: #1c2229; border-color: #b3bac2; box-shadow: inset 2px 2px 0 rgba(0,0,0,.07); }
html[data-theme="light"] .pt-search input::placeholder { color: rgba(40,50,60,.42); }
html[data-theme="light"] .pt-x { background: rgba(0,0,0,.08); color: #38424d; border-color: #b3bac2; }
html[data-theme="light"] .pt-chip { background: linear-gradient(#fbfcfd, #e7ebef); color: #26303a; border-color: #b3bac2; box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 rgba(0,0,0,.07); }
html[data-theme="light"] .pt-chip:hover { background: linear-gradient(#ffffff, #eef2f6); }
html[data-theme="light"] .pt-chip.on { background: linear-gradient(#63c94e, #3a8a2b); color: #fff; border-color: #2c5f22; }
html[data-theme="light"] .plaza-empty { background: linear-gradient(#fbfcfd, #eef1f4); border-color: #b3bac2; color: #26303a; }
html[data-theme="light"] .sk-img, html[data-theme="light"] .sk-l { background-image: linear-gradient(100deg, #e6eaee 30%, #f7f9fb 50%, #e6eaee 70%); }
html[data-theme="light"] .gal .it:hover { box-shadow: 0 0 0 2px rgba(91,147,216,.45), 0 10px 20px rgba(60,70,85,.25); }
@media (prefers-reduced-motion: reduce) {
  .sk-img, .sk-l, .plaza-empty .pe-i { animation: none !important; }
}
/* ================= v41：主页数据 / 双生成方式 / 后台台账 / 资产分页 ================= */
#app.enter { animation: pageIn .34s cubic-bezier(.2,.72,.3,1) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(12px) scale(.995); } to { opacity: 1; transform: none; } }

.stat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.stat-cell { position: relative; overflow: hidden; padding: 16px 18px; border: 3px solid #0c0c0f;
  background: linear-gradient(#2b2b31, #1d1d22); }
.stat-cell::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, #46c977, #63d3ff, #ffd45e); opacity: .85; }
.stat-cell b { display: block; font-size: 30px; line-height: 1.1; letter-spacing: 1px;
  background: linear-gradient(180deg, #fff, #b9f5c8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-cell span { display: block; margin-top: 4px; font-size: 12px; opacity: .68; }
.stat-cell i { position: absolute; right: 12px; top: 12px; width: 26px; height: 26px; opacity: .85; }
html[data-theme="light"] .stat-cell { background: linear-gradient(#ffffff, #eef2f5); border-color: #b3bac2; }
html[data-theme="light"] .stat-cell b { background: linear-gradient(180deg, #1d7a45, #3aa0c9); -webkit-background-clip: text; background-clip: text; }

/* 两种生成方式：整个下单页按这个分区，互不干扰 */
.mode-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.mode-card { cursor: pointer; padding: 16px 18px; border: 3px solid #0c0c0f; background: linear-gradient(#2b2b31, #1f1f25);
  transition: transform .2s cubic-bezier(.2,.72,.3,1), border-color .2s, box-shadow .2s; }
.mode-card:hover { transform: translateY(-3px); }
.mode-card .mc-head { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16px; }
.mode-card .mc-head img { width: 26px; height: 26px; image-rendering: pixelated; }
.mode-card p { margin: 8px 0 10px; font-size: 12.5px; line-height: 1.7; opacity: .76; }
.mode-card .mc-pill { display: inline-block; font-size: 11.5px; padding: 3px 10px; border: 2px solid #0c0c0f;
  background: rgba(0,0,0,.28); margin-right: 8px; }
.mode-card.on { border-color: #8bf05a; background: linear-gradient(rgba(60,150,80,.28), rgba(30,90,60,.28)); box-shadow: 0 0 0 3px rgba(139,240,90,.22); }
.mode-card.on .mc-pill { background: rgba(139,240,90,.18); }
html[data-theme="light"] .mode-card { background: linear-gradient(#ffffff, #eef2f5); border-color: #b3bac2; }
html[data-theme="light"] .mode-card.on { border-color: #4aa03a; background: linear-gradient(rgba(120,210,110,.2), rgba(120,210,110,.1)); }
@media (max-width: 860px) { .mode-pick { grid-template-columns: 1fr; } .stat-cards { grid-template-columns: 1fr; } }

/* 生成方式的标识 */
.mode-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 2px 9px;
  border: 2px solid #0c0c0f; background: rgba(0,0,0,.3); margin-right: 6px; }
.mode-tag.hand { color: #ffd77a; border-color: #6b5313; }
.mode-tag.style { color: #8fe0ff; border-color: #17506b; }
html[data-theme="light"] .mode-tag { background: rgba(255,255,255,.75); color: #2c3b46; border-color: #b3bac2; }

/* 后台台账 / 资产分页 的标签条 */
.tab-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.tab-row .tab { cursor: pointer; font: inherit; font-size: 13px; padding: 7px 14px; color: inherit;
  border: 3px solid #0c0c0f; background: rgba(0,0,0,.26); transition: transform .16s, background .2s, border-color .2s; }
.tab-row .tab:hover { transform: translateY(-2px); }
.tab-row .tab.on { border-color: #8bf05a; background: rgba(90,200,90,.2); box-shadow: inset 0 0 0 2px rgba(139,240,90,.22); }
html[data-theme="light"] .tab-row .tab { background: rgba(255,255,255,.75); border-color: #b3bac2; }
html[data-theme="light"] .tab-row .tab.on { border-color: #4aa03a; background: rgba(120,210,110,.2); }
.tab-body { animation: pageIn .26s ease-out both; }

.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 16px 0 4px; }
.pager .pg-info { font-size: 12.5px; opacity: .72; }

.fav-btn { cursor: pointer; font: inherit; font-size: 12px; padding: 5px 11px; border: 3px solid #0c0c0f;
  background: rgba(0,0,0,.26); transition: transform .16s, background .2s, border-color .2s; }
.fav-btn:hover { transform: translateY(-2px); }
.fav-btn.on { border-color: #ffd45e; color: #ffde8a; background: rgba(255,200,60,.16); }
html[data-theme="light"] .fav-btn { background: rgba(255,255,255,.75); border-color: #b3bac2; }
html[data-theme="light"] .fav-btn.on { border-color: #c79a1e; color: #a97c00; background: rgba(255,214,90,.3); }

.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.asset-grid .it { margin: 0; }

/* ---- v42 小修：标签别被撑成整行、收藏按钮别折行 ---- */
.asset .mt .mode-tag { display: inline-flex; width: auto; margin: 0 0 5px; }
.asset .btn, .asset .fav-btn { white-space: nowrap; }
.asset .mt > span.mode-tag { display: inline-flex; }
.fav-btn { min-width: 68px; justify-content: center; }


/* ---- v43：广场卡片上的收藏键钉在图片右下角（原来跟左上角的价格角标叠在一起，看不见） ---- */
.gal .it .it-img .fav-btn {
  position: absolute; right: 7px; bottom: 7px; left: auto; top: auto; z-index: 4;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 0; padding: 2px 9px; font-size: 15px; line-height: 1.5;
  background: rgba(8, 10, 14, .86); border-width: 2px; color: #cfd8e3;
}
.gal .it .it-img .fav-btn:hover { transform: translateY(-2px); }
.gal .it .it-img .fav-btn.on { color: #ffd75e; background: rgba(60, 44, 6, .88); border-color: #ffd45e; }
html[data-theme="light"] .gal .it .it-img .fav-btn { background: rgba(255, 255, 255, .9); border-color: #b3bac2; color: #4a5260; }
html[data-theme="light"] .gal .it .it-img .fav-btn.on { color: #a97c00; background: rgba(255, 240, 200, .95); border-color: #c79a1e; }

/* ================= 顶部活动条（测试期折扣 + QQ 群） ================= */
.promo { position: relative; display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap;
  padding: 8px 44px 8px 12px; text-align: center; color: #2b2106; font-weight: 800; font-size: 13.5px;
  background: linear-gradient(180deg, #ffe387 0%, #f6c94b 55%, #d9a41f 100%);
  border-bottom: 4px solid #101014; overflow: hidden;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.6), inset 0 -3px 0 rgba(0,0,0,.16), 0 4px 0 rgba(0,0,0,.28);
  text-shadow: 1px 1px 0 rgba(255,255,255,.4); }
.promo::after { content: ""; position: absolute; top: 0; bottom: 0; left: -45%; width: 34%; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
  animation: promoShine 5s ease-in-out infinite; }
@keyframes promoShine { 0% { left: -45%; } 55% { left: 108%; } 100% { left: 108%; } }
.promo-tag { padding: 2px 8px; background: #b3401f; color: #fff; border: 2px solid #101014; font-size: 11.5px;
  letter-spacing: 1px; text-shadow: none; box-shadow: inset 2px 2px 0 rgba(255,255,255,.28); }
.promo-qq { padding: 1px 8px; background: #fff9e6; border: 2px solid #101014; font-family: Consolas, monospace;
  font-size: 14px; letter-spacing: .6px; cursor: pointer; box-shadow: inset 2px 2px 0 rgba(255,255,255,.7); }
.promo-qq:hover { background: #fff; }
.promo .btn.sm { padding: 5px 11px; font-size: 12.5px; border-width: 2px;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.45), 0 3px 0 rgba(0,0,0,.3); }
.promo-x { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px;
  cursor: pointer; background: rgba(0,0,0,.14); color: #3a2c05; border: 2px solid #101014; font-family: inherit;
  font-size: 12px; font-weight: 800; line-height: 1; }
.promo-x:hover { background: rgba(0,0,0,.3); color: #fff; }
@media (max-width: 700px) { .promo { font-size: 12.5px; padding: 7px 38px 7px 8px; gap: 6px; } .promo-tag { display: none; } }

/* 兑换页：购买积分入口 */
.buy-credits { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px;
  border-top: 2px dashed rgba(255,255,255,.18); }
.buy-credits .hint { margin: 0; flex: 1; min-width: 220px; }
html[data-theme="light"] .buy-credits { border-top-color: rgba(40,50,60,.18); }

/* ================= 会员体系 ================= */
.coin.member { color: #ffe9a8; border-color: #4a3a12; background: linear-gradient(#4a3d1c, #2c2410); }
.coin.member.m-normal { color: #d8dee6; background: linear-gradient(#3a4049, #232830); border-color: #14171c; }
.coin.member.m-iron { color: #e6ecf2; background: linear-gradient(#5a6169, #333941); border-color: #191d22; }
.coin.member.m-gold { color: #ffeaa0; background: linear-gradient(#6b5a1c, #3a300e); border-color: #241d06; }
.coin.member.m-diamond { color: #c9f6ff; background: linear-gradient(#1f5a66, #0e2c33); border-color: #06171b; }
.coin.member.m-withered { color: #e8d3ac; background: linear-gradient(#5a4630, #33261a); border-color: #1c140d; }
.member-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.member-badge { display: inline-flex; align-items: center; padding: 6px 14px; font-size: 16px; font-weight: 900; letter-spacing: .5px; border: 2px solid #0c0c0f; box-shadow: inset 2px 2px 0 rgba(255,255,255,.18), inset -2px -2px 0 rgba(0,0,0,.45); }
.member-badge.m-normal { background: linear-gradient(#5b6470, #3a424c); color: #eef2f7; }
.member-badge.m-iron { background: linear-gradient(#9aa4ae, #626b74); color: #1b1f24; }
.member-badge.m-gold { background: linear-gradient(#ffd75e, #c99a12); color: #3a2c04; }
.member-badge.m-diamond { background: linear-gradient(#57e0f0, #1b8fa6); color: #04262c; }
.member-badge.m-withered { background: linear-gradient(#a8895f, #6b5334); color: #fff6e6; }
.member-xp { margin-top: 10px; }
html[data-theme="light"] .coin.member.m-normal { color: #2b323a; background: linear-gradient(#f2f4f7, #dfe3e8); border-color: #9aa3ad; }
html[data-theme="light"] .coin.member.m-iron { color: #23282e; background: linear-gradient(#eef1f4, #ccd2d8); border-color: #9aa3ad; }
html[data-theme="light"] .coin.member.m-gold { color: #5a4406; background: linear-gradient(#fff3c4, #f2d572); border-color: #b8992f; }
html[data-theme="light"] .coin.member.m-diamond { color: #08505c; background: linear-gradient(#dcfbff, #a9e8f2); border-color: #4ba6b8; }
html[data-theme="light"] .coin.member.m-withered { color: #4a3620; background: linear-gradient(#f6ebd6, #ddc9a4); border-color: #a98d63; }
table tr.on td { background: rgba(255,215,94,.12); }
html[data-theme="light"] table tr.on td { background: rgba(214,160,20,.16); }