/* 方块工坊 · 我的世界风格 UI */
* { box-sizing: border-box; }
:root { --gray: #c6c6c6; --em: #35d07f; --dia: #4fd8d2; --gold: #f8d660; --red: #d8524a; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body { font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif; font-size: 15px; color: #f2f2f2; background: #14161a; overflow-x: hidden; }
img { image-rendering: pixelated; }
a { color: #8fd0ff; text-decoration: none; }
.dim { opacity: .62; }
.bg-layer { position: fixed; inset: 0; z-index: -2; background-color: #1b1d22; background-image: url(/tex/deepslate.png); background-size: 72px; }
.bg-layer::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% -10%, rgba(120,190,255,.16), transparent 60%), linear-gradient(180deg, rgba(8,10,14,.55), rgba(6,7,10,.9)); }
h1, h2, h3, .mc-title { letter-spacing: .5px; text-shadow: 2px 2px 0 rgba(0,0,0,.55); }
.topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 14px; padding: 10px 18px; background: linear-gradient(#3f3f46, #26262b 70%); border-bottom: 4px solid #101014; box-shadow: 0 4px 0 rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.09); }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; }
/* 站点标记：一块落地的草方块 + 一枚浮起的金块，右下角一点星光 */
.brand-mark { position: relative; width: 38px; height: 38px; display: inline-block; border-radius: 10px;
  background: linear-gradient(150deg, #46c977 0%, #1f8f5a 42%, #17607f 100%);
  box-shadow: 0 0 0 3px #0c0c0f, 0 6px 16px rgba(0,0,0,.45), inset 0 0 14px rgba(255,255,255,.16);
  transition: transform .25s cubic-bezier(.2,.72,.3,1), box-shadow .25s ease; }
.brand:hover .brand-mark { transform: translateY(-2px) rotate(-3deg); box-shadow: 0 0 0 3px #0c0c0f, 0 10px 22px rgba(0,0,0,.5), 0 0 20px rgba(120,240,170,.35), inset 0 0 14px rgba(255,255,255,.22); }
.brand-mark .bm-glow { position: absolute; inset: -10px; border-radius: 16px; background: radial-gradient(circle at 32% 26%, rgba(150,255,200,.4), rgba(150,255,200,0) 68%); pointer-events: none; }
.brand-mark img { position: absolute; image-rendering: pixelated; border: none; }
.brand-mark .bm-a { left: 3px; bottom: 3px; width: 22px; height: 22px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.55)); }
.brand-mark .bm-b { right: 3px; top: 3px; width: 13px; height: 13px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.55)); }
.brand-mark .bm-spark { position: absolute; right: 5px; bottom: 5px; width: 6px; height: 6px; border-radius: 50%; background: #ffe27a; box-shadow: 0 0 8px #ffd45e; animation: bmSpark 2.6s ease-in-out infinite; }
@keyframes bmSpark { 0%, 100% { opacity: .3; transform: scale(.75); } 50% { opacity: 1; transform: scale(1.3); } }
html[data-theme="light"] .brand-mark { box-shadow: 0 0 0 3px #d8dde3, 0 6px 16px rgba(20,40,60,.18), inset 0 0 14px rgba(255,255,255,.4); }
.brand-name { font-weight: 800; font-size: 20px; letter-spacing: 2px; text-shadow: 3px 3px 0 rgba(0,0,0,.6); }
.nav { display: flex; gap: 6px; margin-left: 10px; flex-wrap: wrap; }
.nav a { display: inline-block; padding: 7px 13px; color: #e8e8e8; font-weight: 700; font-size: 14px; text-shadow: 2px 2px 0 rgba(0,0,0,.5); border: 2px solid transparent; }
.nav a:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.22); }
.nav a.on { background: rgba(120,190,255,.16); border-color: #7fb6ff; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.coin { display: flex; align-items: center; gap: 6px; padding: 5px 11px 5px 6px; background: linear-gradient(#2c3a2f, #1b241d); border: 2px solid #0e120f; box-shadow: inset 2px 2px 0 rgba(255,255,255,.12), inset -2px -2px 0 rgba(0,0,0,.45); font-weight: 800; color: #b8f5c8; }
.coin img { width: 18px; height: 18px; }
.me { display: flex; align-items: center; gap: 8px; padding: 5px 10px; background: rgba(255,255,255,.07); border: 2px solid #0d0d10; font-weight: 700; }
main { max-width: 1180px; margin: 0 auto; padding: 26px 18px 60px; }
.panel { background: #c6c6c6 url(/tex/stone.png); background-blend-mode: multiply; border: 3px solid #0c0c0f; box-shadow: inset 3px 3px 0 rgba(255,255,255,.75), inset -3px -3px 0 rgba(0,0,0,.35), 0 6px 0 rgba(0,0,0,.3); color: #1c1c1c; padding: 18px; }
.panel.dark { background: #34343a url(/tex/deepslate.png); background-blend-mode: multiply; color: #eee; box-shadow: inset 3px 3px 0 rgba(255,255,255,.14), inset -3px -3px 0 rgba(0,0,0,.5), 0 6px 0 rgba(0,0,0,.3); }
.panel.wood { background: #7a5a34 url(/tex/planks.png); background-blend-mode: multiply; color: #fff; }
.panel h2, .panel h3 { margin: 0 0 10px; }
.panel-title { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; margin-bottom: 14px; }
.panel-title img { width: 22px; height: 22px; }
.sec { margin: 22px 0; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } .nav { display: none; } }
/* 按钮 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; user-select: none; padding: 11px 18px; font-weight: 800; font-size: 15px; font-family: inherit; color: #fff; background: linear-gradient(#9a9a9a, #6f6f6f); border: 3px solid #0d0d10; box-shadow: inset 3px 3px 0 rgba(255,255,255,.5), inset -3px -3px 0 rgba(0,0,0,.35), 0 4px 0 rgba(0,0,0,.35); text-shadow: 2px 2px 0 rgba(0,0,0,.5); }
.btn:hover { background: linear-gradient(#b3c9ee, #7f97c4); box-shadow: inset 3px 3px 0 rgba(255,255,255,.6), inset -3px -3px 0 rgba(40,60,110,.6), 0 4px 0 rgba(0,0,0,.35); }
.btn:active { transform: translateY(2px); box-shadow: inset 3px 3px 0 rgba(0,0,0,.3), 0 1px 0 rgba(0,0,0,.35); }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn.primary { background: linear-gradient(#63c94e, #3a8a2b); }
.btn.primary:hover { background: linear-gradient(#7ee067, #46a034); }
.btn.gold { background: linear-gradient(#f4cf5a, #b8912a); color: #3a2c05; text-shadow: 2px 2px 0 rgba(255,255,255,.28); }
.btn.gold:hover { background: linear-gradient(#ffe17a, #cfa436); }
.btn.red { background: linear-gradient(#d8615a, #9c3129); }
.btn.red:hover { background: linear-gradient(#ea7871, #b03a31); }
.btn.sm { padding: 7px 12px; font-size: 13px; }
.btn.wide { width: 100%; }
.btn.flat { background: rgba(255,255,255,.1); box-shadow: inset 2px 2px 0 rgba(255,255,255,.16), inset -2px -2px 0 rgba(0,0,0,.32); }

/* 表单 */
label.f { display: block; font-weight: 700; margin: 12px 0 6px; }
input[type=text], input[type=email], input[type=password], input[type=number], textarea, select { width: 100%; font-family: inherit; font-size: 15px; color: #f4f4f4; background: #14161a; border: 3px solid #0c0c0f; box-shadow: inset 3px 3px 0 rgba(0,0,0,.6), inset -3px -3px 0 rgba(255,255,255,.08); padding: 11px 12px; }
textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
input:focus, textarea:focus, select:focus { outline: none; border-color: #7fb6ff; }
.hint { font-size: 12.5px; opacity: .7; margin-top: 6px; }
.opt { display: flex; gap: 10px; flex-wrap: wrap; }
.opt .card-sel { flex: 1 1 150px; cursor: pointer; padding: 12px; background: rgba(0,0,0,.22); border: 3px solid #0c0c0f; box-shadow: inset 3px 3px 0 rgba(255,255,255,.08), inset -3px -3px 0 rgba(0,0,0,.4); }
.opt .card-sel.on { border-color: #7fd06a; background: rgba(90,200,90,.18); box-shadow: inset 3px 3px 0 rgba(255,255,255,.16), 0 0 0 3px rgba(120,220,110,.25); }
.opt .card-sel b { display: block; font-size: 15px; margin-bottom: 4px; }
.opt .card-sel span { font-size: 12.5px; opacity: .75; }
.drop { border: 3px dashed #6f6f78; background: rgba(0,0,0,.25); padding: 18px; text-align: center; cursor: pointer; }
.drop:hover { border-color: #7fb6ff; background: rgba(60,110,180,.16); }
.thumbs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.thumb { position: relative; width: 92px; height: 92px; border: 3px solid #0c0c0f; background: #000; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb button { position: absolute; top: -10px; right: -10px; width: 24px; height: 24px; border: 3px solid #0c0c0f; background: #d8524a; color: #fff; font-weight: 800; cursor: pointer; padding: 0; line-height: 1; }

/* 徽标 / 状态 / 进度 */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 12.5px; font-weight: 800; border: 2px solid #0c0c0f; background: #4a4a52; color: #fff; }
.badge.ok { background: #2f7a3c; } .badge.wait { background: #8a7420; } .badge.err { background: #8a2f2f; } .badge.info { background: #2f5a8a; }
.xp { height: 22px; background: #1a1a1e; border: 3px solid #0c0c0f; box-shadow: inset 2px 2px 0 rgba(0,0,0,.6); position: relative; overflow: hidden; }
.xp i { display: block; height: 100%; background: linear-gradient(#8bf05a, #46a02a); box-shadow: inset 0 3px 0 rgba(255,255,255,.35); transition: width .4s; }
.steps { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; font-size: 12.5px; }
.steps span { padding: 3px 9px; border: 2px solid #0c0c0f; background: rgba(0,0,0,.3); opacity: .55; }
.steps span.on { opacity: 1; background: rgba(120,200,120,.25); border-color: #7fd06a; }
/* 图片 / 素材 */
.shot { border: 4px solid #0c0c0f; background: #000; box-shadow: 0 5px 0 rgba(0,0,0,.35); cursor: zoom-in; display: block; }
.shot img { display: block; width: 100%; }
.shot:hover { border-color: #7fb6ff; }
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(4,6,10,.94); display: flex; align-items: center; justify-content: center; padding: 18px; cursor: zoom-out; }
.lightbox img { max-width: 96vw; max-height: 92vh; border: 4px solid #0c0c0f; }
.mats { display: grid; grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); gap: 8px; }
.mat { display: flex; align-items: center; gap: 7px; padding: 6px 8px; background: rgba(0,0,0,.3); border: 2px solid #0c0c0f; font-size: 12px; }
.mat img { width: 26px; height: 26px; }
.mat b { font-size: 13px; }
.mat .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .85; }
.row { display: flex; align-items: center; gap: 12px; padding: 10px; background: rgba(0,0,0,.24); border: 3px solid #0c0c0f; box-shadow: inset 2px 2px 0 rgba(255,255,255,.06); }
.row + .row { margin-top: 10px; }
.row .t { flex: 1; min-width: 0; }
.row .t b { display: block; font-size: 15.5px; margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .t div { font-size: 12.5px; opacity: .68; }
.rowimg { width: 82px; height: 56px; object-fit: cover; border: 2px solid #0c0c0f; background: #000; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 8px 10px; border-bottom: 2px solid rgba(0,0,0,.35); text-align: left; }
th { background: rgba(0,0,0,.3); font-size: 12.5px; }
.toasts { position: fixed; top: 76px; right: 18px; z-index: 80; display: flex; flex-direction: column; gap: 10px; }
.toast { min-width: 240px; max-width: 380px; padding: 12px 14px; background: #2c2c31; border: 3px solid #0c0c0f; box-shadow: inset 3px 3px 0 rgba(255,255,255,.12), 0 6px 0 rgba(0,0,0,.35); font-weight: 700; animation: pop .18s ease-out; }
.toast.ok { border-color: #7fd06a; box-shadow: inset 3px 3px 0 rgba(255,255,255,.12), 0 0 0 3px rgba(120,220,110,.28); }
.toast.err { border-color: #ff8a80; box-shadow: inset 3px 3px 0 rgba(255,255,255,.12), 0 0 0 3px rgba(255,120,110,.28); }
@keyframes pop { from { transform: translateY(-10px); opacity: 0 } to { transform: none; opacity: 1 } }
.modal-wrap { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-bg { position: absolute; inset: 0; background: rgba(4,6,10,.82); }
.modal { position: relative; max-width: 960px; width: 100%; max-height: 88vh; overflow: auto; }

/* 首页 */
.hero { position: relative; overflow: hidden; border: 4px solid #0c0c0f; box-shadow: 0 8px 0 rgba(0,0,0,.4); min-height: 430px; display: flex; align-items: center; }
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,8,12,.94) 0%, rgba(6,8,12,.74) 46%, rgba(6,8,12,.12) 100%); }
.hero-in { position: relative; padding: 38px 34px; max-width: 660px; }
.hero h1 { font-size: 42px; margin: 0 0 12px; line-height: 1.15; }
.hero p { font-size: 16px; line-height: 1.8; opacity: .93; margin: 0 0 20px; }
.tagline { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; background: rgba(120,200,120,.16); border: 2px solid #7fd06a; font-size: 12.5px; font-weight: 800; margin-bottom: 14px; }
.feature { text-align: left; }
.feature img { width: 34px; height: 34px; margin-bottom: 10px; }
.feature b { display: block; font-size: 16px; margin-bottom: 6px; }
.feature p { margin: 0; font-size: 13px; line-height: 1.7; opacity: .82; }
.gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.gal .it { border: 4px solid #0c0c0f; background: #000; cursor: pointer; position: relative; box-shadow: 0 5px 0 rgba(0,0,0,.35); }
.gal .it img { display: block; width: 100%; height: 175px; object-fit: cover; }
.gal .it span { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px; background: linear-gradient(transparent, rgba(0,0,0,.9)); font-weight: 800; text-shadow: 2px 2px 0 #000; }
.gal .it:hover { border-color: #7fb6ff; }
.step-n { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: #2f5a8a; border: 3px solid #0c0c0f; font-weight: 800; margin-right: 10px; }
.footer { max-width: 1180px; margin: 0 auto; padding: 22px 18px 40px; display: flex; justify-content: space-between; gap: 14px; font-size: 12.5px; opacity: .7; flex-wrap: wrap; }
.err-box { padding: 12px 14px; background: rgba(160,50,50,.3); border: 3px solid #ff8a80; font-weight: 700; }
.ok-box { padding: 12px 14px; background: rgba(50,140,70,.28); border: 3px solid #7fd06a; font-weight: 700; }
.codebox { font-family: ui-monospace, Consolas, monospace; background: #14161a; border: 3px solid #0c0c0f; padding: 10px; font-size: 13px; white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow: auto; }
.flex { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.spin { display: inline-block; width: 14px; height: 14px; border: 3px solid rgba(255,255,255,.3); border-top-color: #fff; animation: sp .8s linear infinite; }
@keyframes sp { to { transform: rotate(360deg) } }
.kv { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 2px solid rgba(0,0,0,.28); font-size: 13.5px; }
.kv b { font-weight: 800; }
.note { font-size: 13.5px; line-height: 1.85; opacity: .9; white-space: pre-wrap; }
.msg { padding: 12px 14px; border: 3px solid #0c0c0f; background: rgba(0,0,0,.26); margin-top: 10px; }
.msg.user { background: rgba(60,110,180,.22); border-color: #6f9fd8; }
.msg .who { font-size: 12px; opacity: .7; margin-bottom: 6px; font-weight: 800; }
.msg.stage { background: rgba(150,110,45,.20); border-color: #a8823a; }
.msg.note { background: rgba(70,150,110,.20); border-color: #4f9b73; }
/* 修正：hidden 属性必须真正生效（否则遮罩层会一直压暗整个页面） */
[hidden] { display: none !important; }
.modal-wrap[hidden], .toasts[hidden] { display: none !important; }
/* ================= v4 视觉升级 ================= */
/* 首屏 */
.hero { min-height: 470px; }
.hero-bg::after { background:
  linear-gradient(90deg, rgba(6,8,12,.93) 0%, rgba(6,8,12,.72) 40%, rgba(6,8,12,.10) 76%, rgba(6,8,12,0) 100%),
  linear-gradient(0deg, rgba(6,8,12,.62), rgba(6,8,12,0) 46%); }
.hero-in { padding: 44px 40px; max-width: 700px; }
.hero h1 { font-size: 46px; }
.hero h1 em { font-style: normal; color: #8bf05a; }
.hero p { text-shadow: 1px 1px 0 rgba(0,0,0,.6); }
.hero-fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-fx .fl { position: absolute; width: 38px; height: 38px; opacity: .9; border: 2px solid rgba(0,0,0,.5); animation: bob 4.5s ease-in-out infinite; }
.hero-fx .f1 { right: 15%; top: 15%; }
.hero-fx .f2 { right: 27%; top: 54%; width: 30px; height: 30px; animation-delay: .8s; }
.hero-fx .f3 { right: 8%; top: 64%; width: 34px; height: 34px; animation-delay: 1.5s; }
.hero-fx .f4 { right: 35%; top: 22%; width: 24px; height: 24px; animation-delay: 2.2s; }
@keyframes bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-13px) } }
.hero-stats { display: flex; margin-top: 28px; width: fit-content; border: 3px solid #0c0c0f; background: rgba(8,10,14,.62); flex-wrap: wrap; }
.hero-stats div { padding: 9px 18px; text-align: center; border-right: 3px solid #0c0c0f; }
.hero-stats div:last-child { border-right: 0; }
.hero-stats b { display: block; font-size: 18px; color: #8bf05a; text-shadow: 2px 2px 0 rgba(0,0,0,.6); }
.hero-stats span { font-size: 11.5px; opacity: .72; }
.btn.lg { padding: 14px 24px; font-size: 16px; }
.mc-title { display: flex; align-items: center; gap: 10px; font-size: 24px; margin: 0 0 10px; }
.mc-title img { width: 24px; height: 24px; }
@media (max-width: 900px) { .hero-fx { display: none } .hero-in { padding: 30px 22px } .hero h1 { font-size: 32px } }

/* 步骤条 */
.flex.sb { align-items: flex-start; }
.flex.sb + .flex.sb { margin-top: 12px; }
.flex.sb b { color: #8bf05a; }
/* 「怎么用？」：数字方块与文字严格对齐，换行后缩进不跑偏 */
.step-row { display: flex; align-items: flex-start; gap: 12px; }
.step-row + .step-row { margin-top: 11px; }
.step-row .step-n { flex: 0 0 auto; margin-right: 0; margin-top: 2px; }
.step-row .step-t { flex: 1 1 auto; min-width: 0; line-height: 1.75; font-size: 13.5px; opacity: .92; }
.step-row .step-t b { color: #8bf05a; }
html[data-theme="light"] .step-row .step-t b { color: #24762a; }
.ok-txt { color: #8bf05a; }

/* 作品卡片 */
.gal .it { display: flex; flex-direction: column; overflow: hidden; transition: transform .16s ease, border-color .16s ease; }
.gal .it:hover { transform: translateY(-4px); }
.gal .it-img { position: relative; height: 180px; background: #0a0d12; }
.gal .it-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .35s ease; }
.gal .it-img img.b { opacity: 0; }
.gal .it:hover .it-img img.a { opacity: 0; }
.gal .it:hover .it-img img.b { opacity: 1; }
.gal .it-img .dims { position: absolute; right: 7px; top: 7px; bottom: auto; left: auto; z-index: 2; padding: 3px 8px; font-size: 11.5px; font-weight: 800; background: rgba(8,10,14,.84); border: 2px solid #0c0c0f; color: #8fd0ff; }
.gal .it-cap { padding: 11px 13px 13px; background: linear-gradient(#2b2b31, #1f1f23); border-top: 3px solid #0c0c0f; }
.gal .it .it-cap b { display: block; font-size: 15.5px; margin-bottom: 6px; }
.gal .it .it-cap span { position: static; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; padding: 0; background: none; font-weight: 400; font-size: 12.5px; line-height: 1.68; opacity: .74; text-shadow: none; }
/* 立体方块图标微调 */
.feature img { width: 42px; height: 42px; margin-bottom: 12px; }
.panel-title img { width: 26px; height: 26px; }

.tagline img { width: 18px !important; height: 18px !important; }
.coin img { width: 20px; height: 20px; }
.mat img { width: 30px; height: 30px; }
.step-n { background: #2f5a8a; }
/* 订单页排版 */
main { min-height: calc(100vh - 230px); }
.prevgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1060px) { .prevgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.prevgrid .shot img { aspect-ratio: 16 / 10; object-fit: cover; }
.choice { display: grid; gap: 18px; }
@media (min-width: 900px) { .choice { grid-template-columns: 320px 1fr; align-items: start; } .choice-b { border-left: 3px solid rgba(255,255,255,.14); padding-left: 18px; } }
.choice-a { background: rgba(0,0,0,.24); border: 3px solid #0c0c0f; padding: 16px; }
.choice-a .btn { width: 100%; }
.choice-a .hint { margin-top: 10px; }
.mats { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
/* 收尾打磨 */
.nav a.on { background: rgba(120,190,255,.22); border-color: #7fb6ff; box-shadow: inset 0 -3px 0 #7fb6ff, 0 0 0 1px rgba(127,182,255,.5); }
.nav a { border: 2px solid transparent; transition: background .14s, border-color .14s; }
.row { transition: background .14s, transform .14s; }
.row:hover { background: rgba(120,190,255,.12); transform: translateX(3px); }
.rowimg { width: 104px; height: 68px; }
.row .t b { font-size: 16.5px; }
.stat, .panel.stat { text-align: left; }
.badge { letter-spacing: .5px; }
.badge.wait { background: #8a7420; color: #fff8d8; }
.btn.gold { color: #3a2c05; }
/* ================= 亮色 / 暗色主题切换 ================= */
.themebtn { white-space: nowrap; margin-left: 4px; }
html[data-theme="light"] { color-scheme: light; }
html[data-theme="light"] body { color: #22262b; background: #d8dde2; }
html[data-theme="light"] .bg-layer { background-color: #e4e8eb; background-image: url(/tex/stone.png); }
html[data-theme="light"] .bg-layer::after {
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(255,255,255,.92), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(190,201,212,.55));
}
html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3,
html[data-theme="light"] .mc-title { text-shadow: 2px 2px 0 rgba(255,255,255,.9); }
html[data-theme="light"] a { color: #1a63b4; }
html[data-theme="light"] .topbar { background: linear-gradient(#fdfdfd, #e1e4e8 70%); border-bottom: 4px solid #b2b9c0; box-shadow: 0 4px 0 rgba(0,0,0,.10), inset 0 2px 0 rgba(255,255,255,.95); }
html[data-theme="light"] .brand { color: #22262b; }
html[data-theme="light"] .brand-name { text-shadow: 2px 2px 0 rgba(255,255,255,.95); }
html[data-theme="light"] .nav a { color: #2a2f35; text-shadow: none; }
html[data-theme="light"] .nav a:hover { background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.16); }
html[data-theme="light"] .nav a.on { background: rgba(80,140,220,.18); border-color: #5b93d8; color: #14406e; box-shadow: inset 0 -3px 0 #5b93d8, 0 0 0 1px rgba(91,147,216,.4); }
html[data-theme="light"] .coin { background: linear-gradient(#eefaef, #d2ecd8); border-color: #0e120f; color: #1b6b32; }
html[data-theme="light"] .me { background: rgba(0,0,0,.06); border-color: #b2b9c0; }
html[data-theme="light"] .panel,
html[data-theme="light"] .panel.dark {
  background-color: #f4f4f1; background-image: url(/tex/quartz_block.png); background-blend-mode: multiply; color: #22262b;
  box-shadow: inset 3px 3px 0 rgba(255,255,255,.9), inset -3px -3px 0 rgba(0,0,0,.13), 0 6px 0 rgba(0,0,0,.12);
  border-color: #aeb5bd;
}
html[data-theme="light"] .panel.wood { background-color: #e0c294; background-image: url(/tex/planks.png); background-blend-mode: multiply; color: #2b1f0f; }
html[data-theme="light"] .btn { color: #23272c; border-color: #a9b0b8; text-shadow: none; background: linear-gradient(#fbfbfb, #d9dcdf); box-shadow: inset 3px 3px 0 rgba(255,255,255,.85), inset -3px -3px 0 rgba(0,0,0,.14), 0 4px 0 rgba(0,0,0,.14); }
html[data-theme="light"] .btn:hover { background: linear-gradient(#dbe9ff, #a9c0e4); }
html[data-theme="light"] .btn.primary { background: linear-gradient(#63c94e, #3a8a2b); color: #fff; text-shadow: 2px 2px 0 rgba(0,0,0,.35); }
html[data-theme="light"] .btn.gold { background: linear-gradient(#f4cf5a, #c19a2c); color: #45340a; text-shadow: 1px 1px 0 rgba(255,255,255,.45); }
html[data-theme="light"] .btn.red { background: linear-gradient(#d8615a, #9c3129); color: #fff; text-shadow: 2px 2px 0 rgba(0,0,0,.3); }
html[data-theme="light"] .btn.flat { background: rgba(0,0,0,.06); box-shadow: inset 2px 2px 0 rgba(255,255,255,.8), inset -2px -2px 0 rgba(0,0,0,.12); }
html[data-theme="light"] input[type=text], html[data-theme="light"] input[type=email], html[data-theme="light"] input[type=password],
html[data-theme="light"] input[type=number], html[data-theme="light"] textarea, html[data-theme="light"] select {
  color: #22262b; background: #fdfdfc; border-color: #aeb5bd; box-shadow: inset 2px 2px 0 rgba(0,0,0,.10), inset -2px -2px 0 rgba(255,255,255,.85);
}
html[data-theme="light"] .hint, html[data-theme="light"] .dim { opacity: .72; }
html[data-theme="light"] .opt .card-sel { background: rgba(255,255,255,.6); border-color: #aeb5bd; box-shadow: inset 3px 3px 0 rgba(255,255,255,.8), inset -3px -3px 0 rgba(0,0,0,.08); }
html[data-theme="light"] .opt .card-sel.on { border-color: #4aa03a; background: rgba(120,210,110,.22); }
html[data-theme="light"] .drop { border-color: #aeb5bd; background: rgba(255,255,255,.55); }
html[data-theme="light"] .drop:hover { background: rgba(120,170,230,.16); border-color: #5b93d8; }
html[data-theme="light"] .thumb { border-color: #aeb5bd; }
html[data-theme="light"] .kv, html[data-theme="light"] th, html[data-theme="light"] td { border-color: rgba(0,0,0,.14); }
html[data-theme="light"] th { background: rgba(0,0,0,.06); }
html[data-theme="light"] .row { background: rgba(255,255,255,.66); border-color: #aeb5bd; box-shadow: inset 2px 2px 0 rgba(255,255,255,.9); }
html[data-theme="light"] .row:hover { background: rgba(120,190,255,.18); }
html[data-theme="light"] .msg { background: rgba(255,255,255,.62); border-color: #aeb5bd; }
html[data-theme="light"] .msg.user { background: rgba(120,170,230,.22); border-color: #6f9fd8; }
html[data-theme="light"] .msg.stage { background: rgba(232,196,110,.30); border-color: #c39b45; }
html[data-theme="light"] .msg.note { background: rgba(150,215,180,.34); border-color: #4f9b73; }
html[data-theme="light"] .mat { background: rgba(255,255,255,.62); border-color: #aeb5bd; }
html[data-theme="light"] .steps span { background: rgba(0,0,0,.05); border-color: #aeb5bd; }
html[data-theme="light"] .xp { background: #d3d8dc; border-color: #aeb5bd; }
html[data-theme="light"] .toast { background: #fbfbfa; color: #22262b; border-color: #aeb5bd; box-shadow: inset 3px 3px 0 rgba(255,255,255,.95), 0 6px 0 rgba(0,0,0,.14); }
html[data-theme="light"] .codebox { background: #f7f7f5; border-color: #aeb5bd; }
html[data-theme="light"] .modal-bg { background: rgba(40,48,58,.5); }
html[data-theme="light"] .choice-a { background: rgba(255,255,255,.62); border-color: #aeb5bd; }
html[data-theme="light"] .gal .it { border-color: #aeb5bd; box-shadow: 0 5px 0 rgba(0,0,0,.12); }
html[data-theme="light"] .gal .it-cap { background: linear-gradient(#fbfbfa, #e9ecee); border-top-color: #aeb5bd; }
html[data-theme="light"] .gal .it-img { background: #e7ebee; }
html[data-theme="light"] .err-box { background: rgba(220,110,100,.18); }
html[data-theme="light"] .ok-box { background: rgba(110,200,120,.2); }
html[data-theme="light"] .flex.sb b, html[data-theme="light"] .ok-txt { color: #24762a; }
html[data-theme="light"] .badge { border-color: #aeb5bd; }
html[data-theme="light"] .rowimg, html[data-theme="light"] .shot { border-color: #aeb5bd; }
html[data-theme="light"] .step-n { border-color: #aeb5bd; background: #5b93d8; }
html[data-theme="light"] .spin { border-color: rgba(0,0,0,.2); border-top-color: #444; }
/* 首屏大图保持深色照片风，文字仍用白色 */
html[data-theme="light"] .hero, html[data-theme="light"] .hero-in { color: #f5f7f8; }
html[data-theme="light"] .hero h1, html[data-theme="light"] .hero h2 { text-shadow: 3px 3px 0 rgba(0,0,0,.6); }
html[data-theme="light"] .hero-stats { background: rgba(8,10,14,.62); border-color: #0c0c0f; }
html[data-theme="light"] .hero-stats b { color: #8bf05a; text-shadow: 2px 2px 0 rgba(0,0,0,.6); }
html[data-theme="light"] .hero p { text-shadow: 1px 1px 0 rgba(0,0,0,.6); }

/* ================= v6 动画 / 背景层 / 主题过渡 ================= */

/* ---- 背景：飘浮的方块粒子 ---- */
.bg-fx { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg-fx::before {
  content: ''; position: absolute; inset: -20%;
  background: radial-gradient(46% 40% at 22% 26%, rgba(96,168,255,.16), transparent 68%),
              radial-gradient(40% 36% at 78% 68%, rgba(120,226,140,.13), transparent 70%);
  animation: bgBreathe 22s ease-in-out infinite alternate;
}
.bg-fx i {
  position: absolute; top: 104%; left: 0; display: block; width: 40px; height: 40px;
  background-repeat: no-repeat; background-size: contain; background-position: center;
  image-rendering: pixelated; opacity: .16; will-change: transform;
  animation-name: cubeDrift; animation-timing-function: linear; animation-iteration-count: infinite;
}
.bg-fx i:nth-child(1) { left: 4%;  width: 46px; height: 46px; background-image: url(/tex/cube-stone_bricks.png?v=22);   animation-duration: 34s; animation-delay: -3s;  --dx: 7vw;  --rot: 260deg; }
.bg-fx i:nth-child(2) { left: 15%; width: 30px; height: 30px; background-image: url(/tex/cube-oak_planks.png?v=22);   animation-duration: 27s; animation-delay: -12s; --dx: -6vw; --rot: -300deg; opacity: .13; }
.bg-fx i:nth-child(3) { left: 27%; width: 52px; height: 52px; background-image: url(/tex/cube-grass_block.png?v=22);  animation-duration: 41s; animation-delay: -21s; --dx: 5vw;  --rot: 200deg; }
.bg-fx i:nth-child(4) { left: 39%; width: 26px; height: 26px; background-image: url(/tex/cube-gold_block.png?v=22);   animation-duration: 24s; animation-delay: -6s;  --dx: -8vw; --rot: 340deg; opacity: .11; }
.bg-fx i:nth-child(5) { left: 51%; width: 38px; height: 38px; background-image: url(/tex/cube-deepslate_tiles.png?v=22); animation-duration: 37s; animation-delay: -16s; --dx: 6vw; --rot: 240deg; }
.bg-fx i:nth-child(6) { left: 62%; width: 34px; height: 34px; background-image: url(/tex/cube-bricks.png?v=22);       animation-duration: 30s; animation-delay: -9s;  --dx: -7vw; --rot: -260deg; opacity: .14; }
.bg-fx i:nth-child(7) { left: 73%; width: 44px; height: 44px; background-image: url(/tex/cube-diamond_block.png?v=22); animation-duration: 44s; animation-delay: -25s; --dx: 4vw; --rot: 300deg; opacity: .1; }
.bg-fx i:nth-child(8) { left: 83%; width: 28px; height: 28px; background-image: url(/tex/cube-oak_leaves.png?v=22);   animation-duration: 26s; animation-delay: -14s; --dx: -5vw; --rot: 220deg; }
.bg-fx i:nth-child(9) { left: 91%; width: 36px; height: 36px; background-image: url(/tex/cube-emerald_block.png?v=22); animation-duration: 33s; animation-delay: -19s; --dx: 8vw; --rot: -280deg; opacity: .12; }
.bg-fx i:nth-child(10) { left: 46%; width: 24px; height: 24px; background-image: url(/tex/cube-lantern.png?v=22);     animation-duration: 22s; animation-delay: -2s;  --dx: 9vw;  --rot: 360deg; opacity: .18; }
@keyframes cubeDrift {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  100% { transform: translate3d(var(--dx, 6vw), -132vh, 0) rotate(var(--rot, 300deg)); }
}
@keyframes bgBreathe { from { opacity: .7; transform: scale(1) } to { opacity: 1; transform: scale(1.07) } }
html[data-theme="light"] .bg-fx i { opacity: .3; }
html[data-theme="light"] .bg-fx::before {
  background: radial-gradient(46% 40% at 22% 26%, rgba(120,180,255,.34), transparent 68%),
              radial-gradient(40% 36% at 78% 68%, rgba(140,220,150,.3), transparent 70%);
}

/* ---- 进站：内容依次升起 ---- */
main > * { animation: riseIn .46s cubic-bezier(.2,.72,.3,1) both; }
main > *:nth-child(2) { animation-delay: .07s; }
main > *:nth-child(3) { animation-delay: .14s; }
main > *:nth-child(4) { animation-delay: .2s; }
main > *:nth-child(5) { animation-delay: .26s; }
main > *:nth-child(n+6) { animation-delay: .3s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }

/* ---- 顶栏：标签滑动的下划线 ---- */
.nav a { position: relative; }
.nav a::after {
  content: ''; position: absolute; left: 5px; right: 5px; bottom: 1px; height: 3px; background: #7fb6ff;
  transform: scaleX(0); transform-origin: left center; transition: transform .24s cubic-bezier(.2,.72,.3,1);
}
.nav a:hover::after { transform: scaleX(.6); }
.nav a.on::after { transform: scaleX(1); }
html[data-theme="light"] .nav a::after { background: #5b93d8; }
#themeBtn { transition: transform .28s cubic-bezier(.2,.72,.3,1), background-color .38s ease, color .38s ease, border-color .38s ease; }
#themeBtn:hover { transform: rotate(-14deg) scale(1.04); }
#themeBtn:active { transform: rotate(14deg) scale(.95); }

/* ---- 亮暗切换：整站平滑过渡 ---- */
body, .bg-layer, .topbar, .brand-name, .nav a, .coin, .me, .panel, .panel.dark, .panel.wood,
.btn, input, textarea, select, .row, .rowimg, .msg, .mat, .toast, .codebox, .choice-a,
.drop, .thumb, .steps span, .xp, .opt .card-sel, .gal .it, .gal .it-cap, .kv, th, td, .shot {
  transition: background-color .38s ease, color .38s ease, border-color .38s ease, box-shadow .38s ease, opacity .38s ease;
}
.bg-layer::after { transition: background .5s ease; }

/* ---- 卡片 / 面板交互 ---- */
.opt .card-sel { transition: transform .18s cubic-bezier(.2,.72,.3,1), border-color .18s ease, background-color .18s ease, box-shadow .18s ease; }
.opt .card-sel:hover { transform: translateY(-3px); }
.opt .card-sel.on { animation: selPop .3s cubic-bezier(.2,.72,.3,1); }
@keyframes selPop { 0% { transform: scale(1) } 45% { transform: scale(1.03) } 100% { transform: scale(1) } }
.feature { transition: transform .2s cubic-bezier(.2,.72,.3,1), border-color .2s ease; }
.feature:hover { transform: translateY(-4px); }
.feature img { transition: transform .3s cubic-bezier(.2,.72,.3,1); }
.feature:hover img { transform: translateY(-3px) scale(1.08); }

/* ---- 首屏：缓慢推近 ---- */
.hero-bg { animation: heroZoom 30s ease-in-out infinite alternate; }
@keyframes heroZoom { from { transform: scale(1.01) } to { transform: scale(1.09) } }

/* ---- 建造进度条：流光 ---- */
.xp { position: relative; }
.xp::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.18) 0 12px, rgba(255,255,255,0) 12px 26px);
  animation: barFlow 1.15s linear infinite;
}
@keyframes barFlow { from { background-position: 0 0 } to { background-position: 52px 0 } }

/* ---- 弹窗 / 大图 ---- */
.modal { animation: riseIn .26s cubic-bezier(.2,.72,.3,1) both; }
.modal-bg { animation: fadeIn .24s ease both; }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
.lightbox { animation: fadeIn .18s ease both; }
.lightbox img { animation: riseIn .28s cubic-bezier(.2,.72,.3,1) both; }

/* ---- 无障碍：系统开了"减少动态效果"就全部静态化 ---- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .bg-fx { display: none; }
}

/* 建造质量四档：并排一行放下 */
#tier-opt { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
#tier-opt .card-sel { padding: 11px 10px; }
#tier-opt .card-sel span { font-size: 12px; line-height: 1.6; }
@media (max-width: 720px) { #tier-opt { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ================= 建筑广场 ================= */
a.it, a.it:hover { text-decoration: none; color: inherit; }
.gal .it .it-cap .dim { opacity: .62; }
.gal .it { animation-fill-mode: both; }
.gal .it .it-cap span { -webkit-line-clamp: 4; }
html[data-theme="light"] .gal .it .it-cap { color: #22262b; }
html[data-theme="light"] .gal .it .it-cap span { opacity: .8; }
/* ================= v7 收尾打磨：滚动条 / 焦点 / 细节动效 ================= */
html { scroll-behavior: smooth; }
:focus-visible { outline: 3px solid #7fb6ff; outline-offset: 2px; }
::selection { background: #7fb6ff; color: #0c0c0f; }
* { scrollbar-width: thin; scrollbar-color: #5b6472 #1b1d21; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #1b1d21; }
::-webkit-scrollbar-thumb { background: #5b6472; border: 3px solid #1b1d21; }
::-webkit-scrollbar-thumb:hover { background: #7fb6ff; }
html[data-theme="light"] { scrollbar-color: #9aa4b0 #e7ebee; }
html[data-theme="light"] ::-webkit-scrollbar-track { background: #e7ebee; }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #9aa4b0; border-color: #e7ebee; }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #5b93d8; }

/* 长表格：鼠标划过整行高亮，好读 */
table tr { transition: background-color .16s ease; }
table tr:hover td { background: rgba(127,182,255,.1); }
html[data-theme="light"] table tr:hover td { background: rgba(91,147,216,.12); }

/* 自检通过等徽章：极轻的呼吸光，别抢眼 */
.badge.ok { animation: badgeGlow 3.4s ease-in-out infinite; }
@keyframes badgeGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(127,208,106,0) } 50% { box-shadow: 0 0 0 3px rgba(127,208,106,.18) } }

/* 标题旁的方块图标：划过去轻轻跳一下 */
.mc-title img, .panel-title img { transition: transform .28s cubic-bezier(.2,.72,.3,1); }
.mc-title:hover img, .panel-title:hover img { transform: translateY(-3px) rotate(-6deg); }

/* 顶栏标签：悬停轻微上浮 */
.nav a { transition: transform .18s cubic-bezier(.2,.72,.3,1), background-color .38s ease, color .38s ease, border-color .38s ease, box-shadow .38s ease; }
.nav a:hover { transform: translateY(-1px); }

/* 金色按钮：一道缓慢扫过的流光 */
.btn.gold { position: relative; overflow: hidden; }
.btn.gold::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 38%; left: -45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  animation: goldSweep 4.8s ease-in-out infinite; pointer-events: none;
}
@keyframes goldSweep { 0% { left: -45% } 55% { left: 115% } 100% { left: 115% } }

@media (prefers-reduced-motion: reduce) {
  .badge.ok { animation: none !important; }
  .btn.gold::after { display: none; }
}