/* 平滑过渡的发光参数（@property 注册后可被 transition 插值） */
@property --glow-intensity { syntax: '<number>'; inherits: true; initial-value: 0.4; }
@property --hue-shift { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
:root { --bg: #03040d; --fg: #e8ecff; --muted: #8f9ad0; --accent: #ffd36b; --panel: #0b1030d9; --line: #2a3570;
  --btn: #2b3a8a; --btn-h: #3a4cb0; --radius: 12px; --ease-pop: cubic-bezier(.34, 1.56, .64, 1); --cat: var(--c-经典, #ffd36b); }
* { box-sizing: border-box }
body { margin: 0; min-height: 100vh; color: var(--fg); font-family: system-ui, "PingFang SC", "Noto Sans CJK SC", sans-serif;
  background: radial-gradient(ellipse at 50% 100%, #1b2a5a 0%, #0a0f2a 50%, var(--bg) 100%) }
#sky, #sky-fallback { position: fixed; inset: 0; z-index: -1; pointer-events: none; width: 100%; height: 100% }
#sky { --star-density: 1.6 } .paint #sky { background-image: paint(starfield) } .paint #sky-fallback { display: none }
header { display: flex; gap: 14px; align-items: center; padding: 10px 18px; background: #0009; backdrop-filter: blur(6px); flex-wrap: wrap; position: sticky; top: 0; z-index: 5 }
.logo { font-size: 20px; font-weight: 700; color: var(--accent); text-decoration: none; text-shadow: 0 0 calc(var(--glow-intensity, .4) * 20px) #ffd36b88 }
nav a { color: #b9c4ff; margin-inline-end: 10px; text-decoration: none; transition: color .2s } nav a:hover { color: #fff }
#mode { margin-inline-start: auto; display: flex; gap: 8px; align-items: center; font-size: 13px; flex-wrap: wrap }
.badge { padding: 3px 8px; border-radius: 10px; background: #333a; border: 1px solid #556 } .b-self { border-color: #9b7bff; color: #cbb8ff } .b-host { border-color: #ffb347; color: #ffd08a }
/* 按钮：浮入、悬停上浮发光、按下缩放 */
button, .btn { --glow-intensity: .25; font: inherit; border-radius: 10px; border: 1px solid #4a5590; background: var(--btn); color: var(--fg); padding: 7px 14px; cursor: pointer;
  box-shadow: 0 0 calc(var(--glow-intensity) * 24px) hsl(calc(220deg + var(--hue-shift, 0deg)) 90% 70% / .6);
  transition: transform .18s var(--ease-pop), --glow-intensity .3s, --hue-shift .6s, background .2s; animation: floatUp .5s var(--ease-pop) both; text-decoration: none; display: inline-block }
button:hover:not(:disabled), .btn:hover { --glow-intensity: .9; --hue-shift: 40deg; transform: translateY(-2px); background: var(--btn-h) }
button:active:not(:disabled) { transform: scale(.94) } button:disabled { opacity: .45; cursor: not-allowed; animation: none }
.primary { --btn: #8a5a10; --btn-h: #b07818; border-color: var(--accent) }
.breathe { animation: breathe 2.4s ease-in-out infinite }
@keyframes floatUp { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@keyframes breathe { 0%, 100% { --glow-intensity: .2; opacity: .75 } 50% { --glow-intensity: 1; opacity: 1 } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-24px) } to { opacity: 1; transform: none } }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } } @keyframes pop { from { opacity: 0; transform: scale(.7) } to { opacity: 1; transform: none } }
input, select, textarea { font: inherit; border-radius: 8px; border: 1px solid #4a5590; background: #141a3a; color: var(--fg); padding: 6px 10px }
main { max-width: 1100px; margin: 0 auto; padding: 16px } #banner { text-align: center; font-size: 13px; color: #ffd08a }
main > * { animation: slideIn .45s ease-out both }
.scene { position: relative; width: 100%; height: min(72vh, 680px); border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--bg) }
.scene canvas { display: block; width: 100%; height: 100% }
.scene-ui { position: absolute; left: 10px; top: 10px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 2 } .scene-ui button { padding: 4px 10px; font-size: 13px }
.scene-ui .on { --btn: #6a3cff } .scene-hint { position: absolute; bottom: 10px; width: 100%; text-align: center; font-size: 12px; color: var(--muted); pointer-events: none }
#tip { position: fixed; z-index: 9; max-width: 280px; background: #0b1030ee; border: 1px solid var(--cat); padding: 10px; border-radius: 10px; font-size: 14px; pointer-events: none; animation: fade .15s }
/* 分类色（作用域覆盖 --cat） */
[data-cat="经典"] { --cat: #ffd36b } [data-cat="风景"] { --cat: #6ec8ff } [data-cat="人物"] { --cat: #ffb3cf } [data-cat="动物"] { --cat: #3ddc97 } [data-cat="卡通"] { --cat: #ff9f43 } [data-cat="物质类"] { --cat: #c9a0ff }
.tag { display: inline-block; padding: 1px 8px; border-radius: 8px; background: color-mix(in srgb, var(--cat) 25%, transparent); color: var(--cat); border: 1px solid var(--cat); font-size: 12px }
.card { --glow-intensity: .15; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--cat, var(--line)); border-radius: var(--radius); padding: 14px; margin: 10px 0;
  box-shadow: 0 0 calc(var(--glow-intensity) * 30px) color-mix(in srgb, var(--cat) 60%, transparent); transition: transform .25s var(--ease-pop), --glow-intensity .3s }
.card.hover:hover { --glow-intensity: .8; transform: translateY(-3px) } .muted { color: var(--muted); font-size: 13px }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center } textarea { width: 100%; min-height: 90px } a { color: #9fc0ff }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px }
.notice { border: 1px solid #ffb347; background: #3a2a0a99; padding: 10px; border-radius: 10px; font-size: 14px } .agree { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0; font-size: 14px }
.modal { position: fixed; inset: 0; background: #000a; display: grid; place-items: center; z-index: 20; animation: fade .25s ease }
.modal-box { background: #0d1336; border: 1px solid var(--cat, var(--line)); border-radius: 16px; padding: 20px; width: min(92vw, 440px); animation: pop .45s var(--ease-pop) both }
#toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 30 }
.toast { background: #141a3a; border-left: 4px solid #9bf; padding: 10px 14px; border-radius: 8px; max-width: 360px; font-size: 14px; animation: slideIn .3s } .toast.ok { border-color: #6f6 } .toast.err { border-color: #f66 }
footer { text-align: center; color: #9aa3cf; font-size: 12px; padding: 20px } h2 { color: var(--accent) } .spectrum { width: 96px; height: 96px; border-radius: 50% }
.stage { font-size: 13px; color: var(--accent) } .reject { color: #ff8a8a }
@media (max-width: 700px) { nav a { margin-inline-end: 6px; font-size: 14px } .scene { height: 62vh } }
@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; transition: none !important } }
[hidden] { display: none !important }
/* 千亿级导航 */
.scene-nav { position: absolute; right: 10px; top: 10px; z-index: 2; text-align: right; font-size: 12px; max-width: 60% }
.scene-nav .crumbs { display: flex; gap: 3px; flex-wrap: wrap; justify-content: flex-end; align-items: center } .scene-nav button { padding: 3px 8px; font-size: 12px }
.scene-tools { margin: 8px 0; align-items: center } .scene-tools input { padding: 6px 8px }
@media (max-width: 700px) { .scene-nav { top: auto; bottom: 46px; right: 6px; max-width: 94% } .scene-hint { font-size: 10px; bottom: 4px; padding: 0 6px; box-sizing: border-box } }
/* 全屏 3D 首页背景：场景固定铺满视口，UI 叠加其上 */
body.home main { max-width: none; padding: 0 12px; pointer-events: none; position: relative; z-index: 1 }
body.home main > *:not(.scene) { pointer-events: auto; max-width: 1100px; margin-left: auto; margin-right: auto }
body.home main > .home-spacer { pointer-events: none; height: calc(100dvh - 230px) }
body.home footer { position: relative; z-index: 1; background: #02030bcc }
body.home header { background: #02030b66 } body.home #banner { position: relative; z-index: 2 }
.scene { position: fixed; inset: 0; width: 100vw; height: 100dvh; border: 0; border-radius: 0; z-index: 0; animation: none !important; background: #02030b }
.scene .scene-ui { top: 64px } .scene .scene-nav { top: 64px }
.home-dock { background: #0b0a24b3; backdrop-filter: blur(8px); border: 1px solid #e8b85a55; border-radius: 14px; padding: 6px 12px; box-shadow: 0 0 30px #ffb34722 }
.home-dock .scene-tools { margin: 4px 0 } .home-dock .scene-hint { position: static; padding-bottom: 2px }
.glass { background: #0b0a24c0; backdrop-filter: blur(8px); border: 1px solid #ffffff18; border-radius: 14px; padding: 4px 14px; margin-top: 18px }
@media (max-width: 700px) { .scene .scene-ui { top: 96px; left: 6px } .scene .scene-ui button { font-size: 11px; padding: 3px 7px }
  .scene .scene-nav { top: auto; bottom: auto; top: 128px; right: 6px } body.home main > .home-spacer { height: calc(100dvh - 300px) } .home-dock .scene-hint { font-size: 10px } }
.home-dock .scene-hint { pointer-events: auto }
body.home main > .scene { pointer-events: auto }
.scene .scene-ui, .scene .scene-nav { top: calc(var(--hdr, 56px) + 8px) }
@media (max-width: 700px) { .scene .scene-nav { top: calc(var(--hdr, 90px) + 40px) } }
body.home #banner { pointer-events: none; padding: 2px 6px }
/* 语言切换（地球图标下拉） */
#lang { position: relative; font-size: 13px }
#langbtn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px } #langbtn svg { flex: none }
#langmenu { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: #0b1030f2; border: 1px solid var(--line); border-radius: 10px; z-index: 40; max-height: 70vh; overflow-y: auto; min-width: 170px; box-shadow: 0 8px 30px #0008 }
#langmenu li { padding: 8px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; text-align: start } #langmenu li:hover, #langmenu li:focus { background: var(--btn-h) }
#langmenu li[aria-selected=true] { color: var(--accent); font-weight: 700 }
@media (max-width: 700px) { #lang { position: absolute; top: 10px; inset-inline-end: 12px } .logo { padding-inline-end: 56px } .lang-cur { display: none } #langbtn { padding: 6px 8px } #langmenu li { padding: 10px 14px } }
.prevail { font-size: 13px }
[dir=rtl] #toasts { right: auto; left: 16px } [dir=rtl] code { direction: ltr; unicode-bidi: embed }

.fulfill-badge { --cat: #ffd36b; background: linear-gradient(135deg, #7a4cff55, #ffd36b44); border-color: #ffd36b; color: #ffe9a8; margin-inline-start: 6px; animation: breathe 2.8s ease-in-out infinite }
.toast.celebrate { border: 1px solid #ffd36b; background: linear-gradient(135deg, #2a1a5acc, #5a3a10cc); box-shadow: 0 0 28px #ffd36b66; font-size: 16px }

/* 极简头部 + 右侧滑出菜单（ampleforth 风格） */
header { position: fixed; top: 0; left: 0; right: 0; height: 52px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; background: transparent !important; backdrop-filter: none; z-index: 15; pointer-events: none }
header > * { pointer-events: auto }
body { padding-top: 52px } body.home { padding-top: 0 }
body:not(.home) header { background: linear-gradient(#03040dcc, #03040d00) !important }
.logo { display: inline-flex; color: #fff; padding: 6px; text-shadow: none } .logo:hover { color: var(--accent) }
.icon-btn { all: unset; pointer-events: auto; cursor: pointer; display: inline-grid; place-items: center; width: 40px; height: 40px; color: #fff; border-radius: 6px }
.icon-btn:hover, .icon-btn:focus-visible { background: #ffffff1a } .icon-btn:focus-visible { outline: 2px solid #7ee787 }
#menu-bd { position: fixed; inset: 0; z-index: 40; background: #0008; animation: fade .3s ease; touch-action: none }
#menu { position: fixed; top: 0; bottom: 0; inset-inline-end: 0; width: min(78vw, 440px); z-index: 41; background: #0d0d0d; color: #e6e6e6; overflow-y: auto; overscroll-behavior: contain;
  padding: 84px 32px 40px; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Courier New", monospace; letter-spacing: .08em;
  transform: translateX(100%); opacity: 0; visibility: hidden; transition: transform .38s cubic-bezier(.2,.8,.2,1), opacity .3s, visibility 0s .38s }
[dir=rtl] #menu { transform: translateX(-100%) }
body.menu-open #menu { transform: none; opacity: 1; visibility: visible; transition: transform .38s cubic-bezier(.2,.8,.2,1), opacity .3s }
body.menu-open { overflow: hidden }
#menu-x { position: absolute; top: 0; inset-inline-end: 0; width: 52px; height: 52px; border-radius: 0; background: #000 } #menu-x:hover { background: #222 }
#menu nav { display: flex; flex-direction: column }
#menu nav a, #mode .mlink { color: #e6e6e6; text-transform: uppercase; font-size: 14px; padding: 18px 0; margin: 0; text-decoration: none; transition: color .2s, padding .2s }
#menu nav a:hover, #mode .mlink:hover { color: #fff; padding-inline-start: 6px }
#menu .acc, #mode .mlink { color: #7ee787 } #menu .acc::before, #mode .mlink::before { content: "# "; font-weight: 700 }
#menu nav a.cur { color: #fff; text-decoration: underline; text-underline-offset: 6px }
.menu-sec { margin-top: 26px; padding-top: 18px; border-top: 1px solid #ffffff1a } .menu-h { font-size: 11px; color: #a3a3a3; text-transform: uppercase; margin-bottom: 8px }
#menu #mode { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0; font-size: 13px }
#mode .mlink { all: unset; pointer-events: auto; cursor: pointer; color: #7ee787; text-transform: uppercase; font-size: 14px; padding: 12px 0; letter-spacing: .08em }
#mode .badge { font-family: inherit; margin-bottom: 6px; word-break: break-all }
#menu #lang { position: static } #menu #langbtn { font-family: inherit; animation: none; background: transparent; border-color: #444; box-shadow: none }
#menu #langmenu { position: static; margin-top: 8px; background: #161616; border-color: #333; max-height: 40vh }
#menu #lang .lang-cur { display: inline }
.scene .scene-ui, .scene .scene-nav { top: calc(var(--hdr, 52px) + 6px) } body.home #banner { margin-top: 52px }
@media (max-width: 700px) { #menu { width: 82vw; padding: 76px 26px 32px } .logo { padding-inline-end: 6px } .scene .scene-ui { top: calc(var(--hdr, 52px) + 6px) } .scene .scene-nav { top: calc(var(--hdr, 52px) + 40px) } }
body.home #banner { margin-top: 52px }

/* 调试控件：默认隐藏；body.debug（?debug=1 / localStorage wt_debug=1）时显示 */
.debug-only { display: none !important; }
body.debug .scene-ui.debug-only { display: flex !important; }
body.debug .home-lists.debug-only { display: grid !important; }
body.debug span.debug-only { display: inline !important; }
body.debug .scene-nav.debug-only, body.debug .home-dock.debug-only { display: block !important; }
body.home:not(.debug) main > .home-spacer { height: calc(100dvh - 100px) }
@media (max-width: 700px) { body.home:not(.debug) main > .home-spacer { height: calc(100dvh - 120px) } }
body.home:not(.debug) main > .home-spacer { display: none }
html:has(body.home:not(.debug)), body.home:not(.debug) { overflow: hidden; height: 100dvh; overscroll-behavior: none }
body.home:not(.debug) footer { position: fixed; left: 0; right: 0; bottom: 0; background: transparent }
body.debug footer.debug-only { display: block !important }
/* 封面选择 */
.cover-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 6px; margin: 6px 0 }
.cover-grid button { padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: none; line-height: 0 }
.cover-grid button.on { border-color: #e8b85a; box-shadow: 0 0 0 2px #e8b85a55 }
.cover-grid img { width: 100%; aspect-ratio: 3/4; object-fit: cover }
/* 折页卡：封面绕左侧书脊翻开 */
.fold { position: relative; width: min(320px, 78vw); aspect-ratio: 3/4; margin: 4px auto; perspective: 1400px }
.fold-page { position: absolute; inset: 0; border-radius: 10px; padding: 18px 16px; box-sizing: border-box; overflow: auto; color: #3a2410;
  background: linear-gradient(160deg, #fbf3df, #efdcb4); box-shadow: inset 0 0 0 1px #c9a46a, inset 8px 0 14px -8px #8a5a2088 }
.fold-page .muted { color: #7a5a3a } .fold-text { font-size: 19px; line-height: 1.5; margin: .5em 0 }
.fold-cover { position: absolute; inset: 0; transform-origin: left center; transform-style: preserve-3d; transition: transform 1.1s cubic-bezier(.3,.7,.2,1); cursor: pointer; z-index: 2 }
.fold.open .fold-cover { transform: rotateY(-158deg); pointer-events: none }
.fold-front, .fold-back { position: absolute; inset: 0; border-radius: 10px; overflow: hidden; backface-visibility: hidden; box-shadow: 0 6px 18px #0006 }
.fold-front img { width: 100%; height: 100%; object-fit: cover; display: block }
.fold-back { transform: rotateY(180deg); background: linear-gradient(200deg, #f3e4c4, #d9bd88) }
.fold-lock { position: absolute; top: 10px; right: 10px; font-size: 26px; background: #0008; border-radius: 50%; width: 44px; height: 44px; display: grid; place-items: center }
.fold-hint { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; color: #fff; font-size: 13px; text-shadow: 0 1px 3px #000 }
.fold.locked .fold-page { display: grid; place-items: center; text-align: center }
.fold.shake .fold-cover { animation: fshake .45s }
@keyframes fshake { 25% { transform: rotateY(-8deg) } 75% { transform: rotateY(-3deg) } }

/* 菜单：光栖手风琴 */
#menu nav .gq { all: unset; cursor: pointer; color: #e6e6e6; text-transform: uppercase; font-size: 14px; padding: 18px 0; font-family: inherit }
#menu nav .gq::after { content: " +"; color: #777 } #menu nav .gq[aria-expanded=true]::after { content: " −" } #menu nav .gq:hover { color: #fff }
#menu .gqsub { display: flex; flex-direction: column; padding-inline-start: 18px; border-inline-start: 1px solid #ffffff22; margin-bottom: 6px } #menu .gqsub[hidden] { display: none }
#menu .gqsub a { padding: 12px 0 !important; font-size: 13px !important; color: #bbb } #menu .gqsub a::before { content: "└ "; color: #555 }
/* 光栖起源 */
.origin { max-width: 680px; margin: 24px auto 60px; padding: 34px 26px; background: linear-gradient(180deg, #0b0a24e6, #070616f0); border: 1px solid #e8b85a33; border-radius: 16px;
  color: #e9e3d4; font-family: "Noto Serif CJK SC", "Songti SC", serif; line-height: 2; letter-spacing: .04em; box-shadow: 0 0 60px #6a3cff22 }
.origin h1 { text-align: center; font-size: 24px; color: #f3d48a; letter-spacing: .2em; margin: 0 0 1.4em; font-weight: 600 }
.origin h3 { color: #f3d48a; font-size: 17px; margin: 1.8em 0 .5em; padding-bottom: .3em; border-bottom: 1px solid #e8b85a33; letter-spacing: .15em }
.origin p { margin: .7em 0 } .origin b { color: #ffe2a8 } .origin ul { padding-inline-start: 1.2em; margin: .4em 0 } .origin li { margin: .7em 0 } .origin li::marker { color: #e8b85a }

/* 首页放大镜搜索 */
.qbtn { position: fixed; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 5; width: 50px; height: 50px; border-radius: 50%; padding: 0; display: grid; place-items: center;
  background: #0b0a24cc; color: #f3e2b8; border: 1px solid #e8b85a66; backdrop-filter: blur(8px); box-shadow: 0 4px 18px #0008 } [dir=rtl] .qbtn { right: auto; left: 16px }
body:not(.home) .qbtn { display: none }
.qres { max-height: 40vh; overflow: auto; margin: 8px 0; display: flex; flex-direction: column; gap: 4px } .qhit { text-align: start; white-space: normal }
.pager { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px } .pager #pgl { flex: 1; text-align: center }
/* 我的星愿 */
.mw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px }
.mw { position: relative; padding: 0; border-radius: 10px; overflow: hidden; background: #1a1430; border: 1px solid #c9a86a55; text-align: left; color: inherit }
.mw img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block }
.mw span { display: block; font-size: 12px; padding: 4px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.mw i { position: absolute; top: 4px; right: 4px; font-style: normal }
.up-row { display: flex; gap: 10px; margin: 6px 0 }
.up-box { flex: 1; position: relative; aspect-ratio: 3/4; border: 1.5px dashed #c9a86a; border-radius: 10px; display: grid; place-items: center; cursor: pointer; overflow: hidden; text-align: center; font-size: 13px; padding: 6px }
.up-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.fold-inimg { width: 100%; max-height: 45%; object-fit: cover; border-radius: 8px; display: block; margin-bottom: 8px }
.up-box.sm { aspect-ratio: 3/2; max-width: 140px; }
button.link { background: none; border: none; color: #c9a86a; text-decoration: underline; cursor: pointer; font-size: 13px; padding: 4px }
.fold-inbg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .55; border-radius: 10px; pointer-events: none }
.fold-inbody { position: relative; z-index: 1 }
#sync { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 30; background: #0b0f2acc; border: 1px solid #c9a86a55; color: #e8d9b5; font-size: 12px; padding: 4px 12px; border-radius: 14px; pointer-events: none }
#sync[hidden] { display: none }
#waking { position: fixed; left: 50%; top: 64px; transform: translateX(-50%); z-index: 40; background: #2a1d0ecc; border: 1px solid #c9a86a88; color: #f3e2b8; font-size: 12px; padding: 5px 14px; border-radius: 14px; pointer-events: none }
#waking[hidden] { display: none }

/* 钱包 / 站内信 / 安全设置 */
.hdr-r { display: inline-flex; align-items: center; gap: 2px }
.bell { position: relative } .bell[hidden] { display: none }
#bellN { position: absolute; top: 3px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 8px; background: #ff4d6d; color: #fff; font: 700 10px/16px sans-serif; text-align: center }
#bellN[hidden] { display: none }
.tabs { gap: 6px; margin: 4px 0 10px } .tabs button.on { background: #7ee78733; border-color: #7ee787 }
.wlist { display: grid; gap: 8px; margin: 8px 0 }
.witem { display: flex; align-items: center; gap: 10px; width: 100%; text-align: start; padding: 10px 12px } .witem img, .witem i { width: 28px; height: 28px; border-radius: 8px; font-style: normal; display: grid; place-items: center; color: #fff; font-weight: 800 } .witem .wok { color: #86efac; font-size: 12px } .wmiss { gap: 8px; flex-wrap: wrap } h3 > i[aria-hidden] { display: inline-grid; width: 28px; height: 28px; border-radius: 8px; place-items: center; color: #fff; font-style: normal; vertical-align: middle }
.witem b { flex: 1 } .witem.off { opacity: .75 }
.dev { padding: 8px 0; border-bottom: 1px solid #ffffff14; flex-wrap: nowrap }
.msg { cursor: default } .msg.unread { border-color: #ffd36e88; cursor: pointer } .msg .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff4d6d; margin-inline-end: 6px; vertical-align: middle }
.totpkey { word-break: break-all; letter-spacing: .5px } .ntf { align-items: flex-start; margin: 10px 0 } .evpay { margin: 8px 0 } .evpay label { display: inline-block; margin: 4px 8px 4px 0 }

.qr { width: 200px; margin: 8px auto; background: #fff; padding: 6px; border-radius: 8px } .qr svg { display: block; width: 100%; height: auto }
.rcodes { background: #0006; padding: 10px; border-radius: 8px; font: 15px/1.7 ui-monospace, monospace; text-align: center; user-select: all; margin: 0 }
/* ---------- UX 改进 ---------- */
.brand { color: #f3e2b8; text-decoration: none; font-weight: 700; letter-spacing: .12em; font-size: 15px; margin-inline-start: 2px; margin-inline-end: auto; text-shadow: 0 0 10px #ffd36b66 } .brand:hover { color: #fff }
#topnav { display: none }
@media (min-width: 1024px) { #topnav { display: flex; gap: 4px; margin-inline-end: 12px }
  #topnav a { color: #e6e6e6; text-decoration: none; padding: 7px 12px; border-radius: 999px; font-size: 14px; transition: background .2s, color .2s; margin: 0 }
  #topnav a:hover { background: #ffffff14; color: #fff } #topnav a.cur { color: #1a1300; background: linear-gradient(90deg, #ffe7a3, #e8b85a); box-shadow: 0 0 14px #e8b85a66 } }
.gold-title { font-size: 30px; letter-spacing: .04em; background: linear-gradient(100deg, #fff4cf 0%, #ffd36b 40%, #e8a93a 70%, #fff4cf 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 12px #ffd36b66); margin-bottom: 4px }
.tagline { color: #f3e2b8; margin: 0 0 14px; font-size: 15px }
.cta { gap: 10px; margin: 10px 0 16px } .cta button { flex: 1 1 140px; min-height: 44px }
h3.sub { margin: 6px 0 8px; font-size: 15px; color: #cfd6ff }
.samples { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px }
.card.sample { position: relative; display: flex; gap: 10px; align-items: center; margin: 0; padding: 10px } .card.sample img { width: 54px; height: 72px; object-fit: cover; border-radius: 6px; flex: none }
.card.sample p { margin: 0; font-size: 13px; line-height: 1.6 } .sample-tag { position: absolute; top: 6px; inset-inline-end: 6px; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: #ffd36b22; color: #ffd36b; border: 1px solid #ffd36b55 }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px } .chip { font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid #e8b85a55; color: #f3e2b8; background: #e8b85a14; text-decoration: none } .chip:hover { background: #e8b85a2a }
.card.motif { position: relative; overflow: hidden }
.card.motif::after { content: ""; position: absolute; inset-inline-end: -6px; top: -6px; width: 90px; height: 70px; opacity: .22; pointer-events: none;
  background: radial-gradient(circle at 70% 30%, #ffd36b 0 2px, transparent 3px), radial-gradient(circle at 40% 60%, #ffe9a8 0 1.5px, transparent 2.5px), radial-gradient(circle at 85% 70%, #fff 0 1px, transparent 2px),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 70' fill='none' stroke='%23ffd36b' stroke-width='1.4'%3E%3Cpath d='M88 4C60 14 44 30 30 60M58 20c-6 2-12 0-16-6M46 38c6-1 12 2 15 8'/%3E%3Cpath d='M42 14c-4-6-2-11 4-12 2 6 0 10-4 12zM61 46c6-3 11-1 12 5-6 2-10 0-12-5z' fill='%23ffd36b33'/%3E%3C/svg%3E") no-repeat right top / contain }
.empty { text-align: center; padding: 8px 0 4px } .empty p { margin: 6px auto 0; max-width: 32em; color: var(--muted); line-height: 1.7 }
.seedling { position: relative; width: 90px; height: 70px; margin: 0 auto }
.seedling .sd { position: absolute; left: 44px; bottom: 6px; width: 3px; height: 30px; background: linear-gradient(#9be07a, #4f8f3a); border-radius: 2px; transform-origin: bottom; animation: grow 2.6s ease-in-out infinite alternate }
.seedling .lf1, .seedling .lf2 { position: absolute; bottom: 30px; width: 18px; height: 10px; background: #8fd46e; border-radius: 100% 0; animation: sway 3s ease-in-out infinite alternate }
.seedling .lf1 { left: 27px; transform-origin: right bottom } .seedling .lf2 { left: 46px; transform: scaleX(-1); transform-origin: left bottom; animation-delay: -1.5s }
.seedling::before { content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 8px; border-radius: 50%; background: radial-gradient(#e8b85a55, transparent 70%) }
.seedling b { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #ffd36b; box-shadow: 0 0 8px #ffd36b; animation: rise 3s linear infinite; opacity: 0 }
.seedling b:nth-of-type(1) { left: 30px; bottom: 20px } .seedling b:nth-of-type(2) { left: 58px; bottom: 26px; animation-delay: 1s } .seedling b:nth-of-type(3) { left: 44px; bottom: 40px; animation-delay: 2s }
@keyframes grow { from { transform: scaleY(.75) } to { transform: scaleY(1) } } @keyframes sway { from { rotate: -8deg } to { rotate: 8deg } }
@keyframes rise { 0% { opacity: 0; translate: 0 0 } 30% { opacity: 1 } 100% { opacity: 0; translate: 0 -34px } }
.sparkle { position: fixed; left: 50%; top: 42%; z-index: 60; pointer-events: none } .sparkle i { position: absolute; color: #ffd36b; font-style: normal; font-size: 16px; text-shadow: 0 0 10px #ffd36b; animation: spark 1.1s var(--d) ease-out forwards; opacity: 0 }
@keyframes spark { 0% { opacity: 0; transform: translate(0, 0) scale(.3) } 30% { opacity: 1 } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1) rotate(90deg) } }
.skel { display: flex; gap: 12px; align-items: center; padding: 12px; margin-bottom: 10px; border-radius: 12px; background: #ffffff08; border: 1px solid #ffffff10 }
.skel i { width: 48px; height: 64px; border-radius: 6px; flex: none } .skel span { display: block; height: 10px; border-radius: 5px; flex: 1 } .skel span + span { flex: .6 }
.skel i, .skel span { background: linear-gradient(90deg, #ffffff0d 0%, #ffd36b2a 50%, #ffffff0d 100%) 0 0 / 200% 100%; animation: shimmer 1.4s linear infinite }
@keyframes shimmer { to { background-position: -200% 0 } }
.growth .gbar { height: 12px; border-radius: 999px; background: #ffffff12; overflow: hidden; border: 1px solid #ffd36b33 } .growth .gbar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6fbf5a, #ffd36b, #ffe7a3); box-shadow: 0 0 12px #ffd36b88; transition: width .8s } .growth-live { text-align: center; margin: 8px 0 4px; font-size: 13px }
.gstages { list-style: none; display: flex; justify-content: space-between; padding: 0; margin: 8px 0 4px } .gstages li { flex: 1; text-align: center; font-size: 12px; color: var(--muted) }
.gstages b { display: block; width: 10px; height: 10px; margin: 0 auto 4px; border-radius: 50%; background: #ffffff22; border: 1px solid #ffd36b55 } .gstages li.done b { background: #6fbf5a } .gstages li.on { color: #ffd36b; font-weight: 700 } .gstages li.on b { background: #ffd36b; box-shadow: 0 0 10px #ffd36b }
.months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px } .months div { text-align: center; padding: 8px 4px; border-radius: 10px; background: #ffffff08; border: 1px solid #ffffff14; display: flex; flex-direction: column; gap: 2px }
.months em { font-style: normal; font-size: 22px } .months span { font-size: 11px; color: var(--muted) } .months div.on { border-color: #ffd36b; background: #ffd36b14; box-shadow: 0 0 14px #ffd36b33 }
#fab { position: fixed; z-index: 6; left: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); display: inline-flex; gap: 6px; align-items: center; padding: 0 18px; height: 48px; border-radius: 999px; text-decoration: none; font-weight: 700; color: #1a1300; background: linear-gradient(90deg, #ffe7a3, #e8b85a); box-shadow: 0 6px 20px #e8b85a55, 0 2px 8px #0008 }
[dir=rtl] #fab { left: auto; right: 16px } #fab[hidden], body:has(#modal:not([hidden])) #fab, body.menu-open #fab { display: none }
body.home #fab { bottom: calc(76px + env(safe-area-inset-bottom)) }
ul.bul { margin: 6px 0; padding-inline-start: 1.2em } ul.bul li { margin: 4px 0 }
@media (max-width: 700px) { .card p, .card li, .notice { line-height: 1.75 } .card li + li { margin-top: 6px } .card h3 { margin-bottom: 10px } .gold-title { font-size: 27px } }
.card.sample { padding-top: 26px } .samples { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)) } @media (min-width: 1024px) { .samples { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) } .cta button { flex: 0 1 240px } }
.blkwarn { margin: 6px 0; padding: 8px 10px; border-radius: 8px; background: #ff4d4d1a; border: 1px solid #ff6b6b66; color: #ffb3b3; font-size: 13px; line-height: 1.6 }

/* 交友卡 / 礼品卡 */
.card.k-social, .mw.k-social, .row.k-social { border-left: 3px solid #4f9dff }
.mw-k { position: absolute; top: 4px; left: 4px; font-style: normal; z-index: 1; text-shadow: 0 1px 2px #000 }
.soc-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 }
.tag.soc { background: #4f9dff22; border-color: #4f9dff66; color: #bcd9ff }
.tag.k-gift { background: #e0a84a22; border-color: #e0a84a77 }
.soc-intro, .gift-note { margin: .3em 0 }
.gift-ft code { font-size: 12px }
.hint { font-size: 12px; margin: 6px 0 0 }
.kwrap { display: grid; gap: 6px; margin: 6px 0 }
.kwrap label { display: block }
.ct-edit, .ct-show { margin-top: 10px }
.mw.gl { display: block; width: 100%; padding: 8px 10px; margin: 6px 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.gsec { margin: 14px 0 4px }
.mw.gl span.tag { display: inline-block; padding: 1px 8px; margin: 0 4px }
.card { position: relative }
.loc-corner { position: absolute; top: 8px; right: 10px; font-size: 11px; color: #9ec5ff; max-width: 46%; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 2; pointer-events: none }
.loc-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px }
@media (max-width: 420px) { .loc-row { grid-template-columns: 1fr } }
.tag.ktype { background: #6a5acd33; border-color: #6a5acd77 }
.tag.kvis { background: #2a4a6a55; border-color: #5a8ababa; font-size: 11px }
.locked-card { opacity: .92; border-style: dashed }
.card.k-gift { border-left: 3px solid #e0a84a }

/* 心愿卡（商品链接） */
.card.k-goods, .mw.k-goods { border-left: 3px solid #c9a0ff }
.goods { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; padding: 8px; border-radius: 10px; background: #ffffff08; border: 1px solid #c9a0ff44 }
.goods-img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; flex: none; background: #0003 }
.goods-info { flex: 1; min-width: 0 } .goods-title { margin: 0 0 4px; font-weight: 600; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical }
.goods-price { color: #ffd36b; font-size: 16px } .goods-link { display: inline-block; margin-top: 4px; font-size: 13px; word-break: break-all }
.cg-h { grid-column: 1 / -1; font-size: 12px; color: var(--muted); margin: 6px 0 0 }

/* ---------- 首次访问引导（方案一）：半透明层，避开树冠，移动端底部抽屉 ---------- */
#gq-guide { position: fixed; inset: 0; z-index: 30; pointer-events: none; display: flex; align-items: flex-end; justify-content: center; padding: 0 14px calc(18px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent 28%, #02030bcc 68%, #02030be6 100%); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); animation: gqGuideIn .45s ease both }
#gq-guide[hidden] { display: none }
#gq-guide .gq-guide-panel { pointer-events: auto; width: min(440px, 100%); max-height: min(62dvh, 520px); overflow: auto; margin-bottom: 8px; padding: 18px 18px 16px; border-radius: 18px 18px 14px 14px; background: #0b0a24e6; border: 1px solid #e8b85a66; box-shadow: 0 12px 40px #000a, 0 0 40px #ffb34722; color: #f6ecd2; position: relative }
#gq-guide .gq-guide-x { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border: 0; border-radius: 999px; background: transparent; color: #f3e2b8cc; font-size: 22px; line-height: 1; cursor: pointer }
#gq-guide .gq-guide-x:hover { color: #ffe7a3; background: #ffffff12 }
#gq-guide h2 { margin: 4px 36px 6px 0; font-size: 1.35rem; font-weight: 700; color: #ffe7a3; letter-spacing: .02em }
#gq-guide .gq-guide-sub { margin: 0 0 12px; color: #d8c9a8; font-size: .95rem; line-height: 1.45 }
#gq-guide ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px }
#gq-guide li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: #ffffff0a; border: 1px solid #ffffff12; font-size: .92rem; line-height: 1.4 }
#gq-guide li em { flex: 0 0 auto; font-style: normal; font-size: 1.1rem }
#gq-guide .gq-guide-actions { display: flex; flex-direction: column; gap: 8px }
#gq-guide .gq-guide-cta { display: inline-flex; justify-content: center; align-items: center; height: 44px; border-radius: 999px; text-decoration: none; font-weight: 700; color: #1a1300; background: linear-gradient(90deg, #ffe7a3, #e8b85a); box-shadow: 0 4px 16px #e8b85a55 }
#gq-guide .gq-guide-sec { display: inline-flex; justify-content: center; align-items: center; height: 40px; border-radius: 999px; text-decoration: none; color: #f3e2b8; border: 1px solid #e8b85a66; background: #ffffff08 }
#gq-guide .gq-guide-foot { margin-top: 10px; display: flex; align-items: center; gap: 8px; color: #b9aa8c; font-size: .85rem }
#gq-guide .gq-guide-foot input { accent-color: #e8b85a }
@keyframes gqGuideIn { from { opacity: 0 } to { opacity: 1 } }
@media (min-width: 701px) {
  #gq-guide { align-items: center; padding-top: 18vh; padding-bottom: 8vh; background: linear-gradient(180deg, transparent 18%, #02030baa 55%, #02030bd8 100%) }
  #gq-guide .gq-guide-panel { border-radius: 16px; max-height: min(58dvh, 480px) }
}
@media (max-width: 700px) {
  #gq-guide { align-items: flex-end; padding: 0; background: linear-gradient(180deg, transparent 35%, #02030bcc 70%, #02030bf0 100%) }
  #gq-guide .gq-guide-panel { width: 100%; max-width: none; border-radius: 18px 18px 0 0; margin: 0; max-height: 58dvh; padding-bottom: calc(14px + env(safe-area-inset-bottom)) }
}
[dir=rtl] #gq-guide .gq-guide-x { right: auto; left: 8px }
[dir=rtl] #gq-guide h2 { margin: 4px 0 6px 36px }
body:has(#gq-guide:not([hidden])) #fab { display: none }

/* ---------- 无障碍 ---------- */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 }
:focus-visible { outline: 2px solid #7dd3fc !important; outline-offset: 2px }
.icon-btn:focus-visible, #fab:focus-visible, .qbtn:focus-visible { outline: 2px solid #7dd3fc !important; outline-offset: 2px }
#scene canvas:focus-visible { outline-offset: -4px }
.skip-link { position: fixed; top: -60px; left: 8px; z-index: 100; padding: 8px 14px; border-radius: 8px; background: #0b0a24; color: #ffe7a3; text-decoration: none; border: 1px solid #7dd3fc }
.skip-link:focus { top: 8px }
img, video, canvas { max-width: 100% }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important } }

/* ---------- 制作页：实时预览 + 卡片封面设计 ---------- */
.mk-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 22px; align-items: start }
.mk-prev { position: sticky; top: calc(var(--hdr, 60px) + 12px); border: 1px solid #ffffff1f; border-radius: 14px; padding: 12px; background: #0b0a24 }
.pv-head { display: flex; align-items: center; justify-content: space-between; gap: 8px } .pv-head h4 { margin: 0 }
.pv-toggle { display: none }
.pv-modes { display: flex; gap: 6px; margin: 8px 0 } .pv-modes button[aria-pressed=true] { background: #e8b85a; color: #1a1205 }
.pv-card { border-radius: 14px; overflow: hidden; background: #fffaf0; color: #2a2238; box-shadow: 0 8px 24px #0006 }
.pv-cover { position: relative; aspect-ratio: 4/3; overflow: hidden } .pv-cover img { width: 100%; height: 100%; object-fit: cover; display: block }
.pv-sample { position: absolute; top: 8px; inset-inline-end: 8px; background: #000a; color: #fff; font-size: 12px; padding: 2px 8px; border-radius: 99px }
.pv-text { padding: 12px 14px } .pv-text p, .pv-inbody p { margin: .4em 0; overflow-wrap: anywhere }
.pv-card .tag, .pv-inbody .tag { background: #2a22381a; color: #2a2238 }
.pv-meta { font-size: 12px; color: #5a5068 } .pv-sub { color: #4a4058 } .pv-price { color: #b4321f; font-weight: 700 } .pv-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px }
.pv-fold { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; perspective: 800px }
.pv-page { position: relative; margin: 0; aspect-ratio: 3/4; border-radius: 10px; overflow: hidden; background: #fffaf0; color: #2a2238; box-shadow: 0 6px 18px #0006 }
.pv-page > img { width: 100%; height: 100%; object-fit: cover; display: block } .pv-page:first-child { transform: rotateY(8deg); transform-origin: right }
.pv-in { background: var(--bg) center/cover, #fffaf0 } .pv-inbody { position: absolute; inset: 10% 8%; background: #fffaf0e6; border-radius: 8px; padding: 8px; font-size: 13px; overflow: auto }
.pv-page figcaption { position: absolute; bottom: 4px; inset-inline-start: 6px; font-size: 11px; background: #000a; color: #fff; padding: 1px 6px; border-radius: 6px }
.cover-design { border: 1px solid #ffffff1f; border-radius: 12px; padding: 8px 12px; margin: 10px 0 } .cover-design legend { font-weight: 700; color: var(--accent); padding: 0 6px }
.cg-sec { margin: 6px 0 } .cg-t { margin: 8px 0 2px; font-size: 14px }
.up-box:focus-within { outline: 2px solid #7dd3fc; outline-offset: 2px }
@media (max-width: 860px) {
  .mk-grid { grid-template-columns: 1fr } .mk-prev { order: -1; top: calc(var(--hdr, 56px) + 4px); z-index: 5 }
  .pv-toggle { display: inline-block } .mk-prev:not(.open) .pv-panel { display: none } .mk-prev .pv-body { max-height: 55vh; overflow: auto }
}
.pv-modes button { font-size: 13px; padding: 6px 10px } .pv-toggle { font-size: 13px; padding: 6px 10px }
.card.motif:has(.mk-grid) { overflow: clip }

/* ---------- 门卡 ---------- */
.gate-claim { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; border: 1.5px solid #ffd36e; background: #ffd36e14; border-radius: 12px; padding: 10px 12px; margin: 8px 0 }
.gate-filter { gap: 6px; margin: 8px 0 } .gate-filter button[aria-pressed=true] { background: #e8b85a; color: #1a1205 }
.gate-list { display: grid; gap: 8px } .gate-card { border: 1px solid #ffffff22; border-radius: 12px; padding: 10px 12px }
.gate-card.st-valid { border-color: #5ad1a0aa } .gate-card.st-expired { opacity: .85; border-color: #e8b85a88 } .gate-card.st-revoked { opacity: .85; border-color: #ff6b81aa }
.gate-st { font-size: 12px; padding: 2px 8px; border-radius: 99px; background: #ffffff1a } .st-valid .gate-st { background: #14532d; color: #bbf7d0 } .st-expired .gate-st { background: #713f12; color: #fde68a } .st-revoked .gate-st { background: #7f1d1d; color: #fecaca }
.gate-why { color: #ffb4a8; margin: .3em 0 } .gate-prog { margin: 4px 0; padding-inline-start: 18px }
.gate-dot { position: relative } .gate-dot::after { content: ''; position: absolute; top: 2px; inset-inline-end: -2px; width: 8px; height: 8px; border-radius: 50%; background: #ff4d6d; box-shadow: 0 0 0 2px #0b0a24 }
.gate-deny { border-color: #ff9aa8aa } .gate-deny h3 { margin-top: 0 } .gate-deny .row { gap: 8px; flex-wrap: wrap; margin-top: 8px } .gate-prog-line { font-size: 18px; color: #ffe7a3 }
/* 成就门卡 / 树洞 */
.gface { display: block; height: auto; border-radius: 10px; object-fit: cover; aspect-ratio: 600/894; background: #0b1230 }
.gface.mini { width: 56px; height: auto; flex: none } .gface.badge { width: 34px; height: auto; border-radius: 6px; flex: none } .gface.big { width: min(240px, 60vw); margin: 0 auto; box-shadow: 0 8px 30px #6aa8ff55 } .gface.ach-face { width: 88px; height: auto; flex: none }
svg.gface { height: auto }
.gate-card { display: flex; gap: 12px; align-items: flex-start } .gc-body { flex: 1; min-width: 0 }
.gate-claimed { display: flex; justify-content: center; margin: 12px 0 }
.cg-t { margin: 16px 0 8px }
.ach-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) }
.ach-card { display: flex; gap: 12px; border: 1px solid #ffffff22; border-radius: 14px; padding: 10px; background: #ffffff08 } .ach-card.met { border-color: #5ad1a0aa }
.ach-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px } .ach-body p { margin: 0; font-size: 13px }
.ach-bar { height: 8px; border-radius: 6px; background: #ffffff22; overflow: hidden } .ach-bar i { display: block; height: 100%; background: linear-gradient(90deg, #6aa8ff, #f6d38a) } .ach-n { color: #f6d38a; font-variant-numeric: tabular-nums }
.th-bar { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 8px 0 12px }
.th-badges { display: flex; gap: 8px; flex-wrap: wrap } .th-badge { display: inline-flex; gap: 8px; align-items: center; border: 1px solid #f6d38a88; border-radius: 10px; padding: 4px 10px 4px 6px; background: #f6d38a14 } .th-badge small { font-size: 11px }
.th-locked { text-align: center } .th-filter { gap: 6px; margin: 8px 0 } .th-filter button[aria-pressed=true] { border-color: #f6d38a; color: #f6d38a }
.th-compose textarea { width: 100%; box-sizing: border-box; resize: vertical } .th-post { position: relative } .th-mark { background: #2b6a4a; margin-bottom: 4px; display: inline-block }
.th-meta { justify-content: space-between; font-size: 12px } .th-empty { text-align: center; padding: 28px 12px } .th-foot { text-align: center; font-size: 12px }
.th-like[aria-pressed=true] { border-color: #f6d38a }
#topnav .th-lock, #menu .th-lock { font-size: .85em }
/* 合作卡 / 详情滑动 */
.card[data-cid] { cursor: pointer }
.card.ad { position: relative; padding-top: 34px; border: 1px solid #f6d38a55; background: linear-gradient(160deg, #f6d38a14, #ffffff06 55%) }
.card.ad.ad-r3 { border-color: #f6d38a88 } .card.ad.ad-r2 { border: 1.5px solid #f6d38acc } .card.ad.ad-r1 { border: 2px solid #f6d38a; box-shadow: 0 0 18px #f6d38a33 }
.ad-tag { position: absolute; top: 8px; inset-inline-start: 10px; font-size: 12px; line-height: 1; padding: 4px 8px; border-radius: 999px; background: #f6d38a; color: #1b1405; font-weight: 700; letter-spacing: .04em }
.ad-row { display: flex; gap: 12px; align-items: flex-start } .ad-main { flex: 1; min-width: 0 } .ad-main p { margin: .3em 0 }
.ad-cover { width: 84px; aspect-ratio: 3/4; object-fit: cover; border-radius: 10px; flex: none } .ad-cover.big { width: 140px }
.ad-banner { margin: 8px 0; padding: 8px 12px; border-radius: 10px; border: 1px dashed #f6d38a88; background: #f6d38a14; color: #f6d38a; font-size: 14px }
@media (prefers-reduced-motion: no-preference) { .card.ad { transition: transform .2s ease, box-shadow .2s ease } .card.ad:hover { transform: translateY(-3px); box-shadow: 0 8px 22px #f6d38a33 }
  #view.sw-in-r { animation: swr .28s ease-out } #view.sw-in-l { animation: swl .28s ease-out } }
@keyframes swr { from { opacity: .2; transform: translateX(40px) } to { opacity: 1; transform: none } } @keyframes swl { from { opacity: .2; transform: translateX(-40px) } to { opacity: 1; transform: none } }
.sw-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 10px }
.sw-btn { min-width: 44px; min-height: 40px; padding: 6px 14px; border-radius: 10px; border: 1px solid #ffffff33; background: #ffffff10; color: inherit; font: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center }
.sw-btn.dim { opacity: .45; cursor: default } .sw-btn.sw-err { border-color: #ff9a7a; color: #ffb59c } .sw-load { cursor: default; opacity: .85 }
.sw-pos { font-variant-numeric: tabular-nums; color: #cfd6ff; font-size: 13px }
.ad-main > * { display: block }
/* 下一页加载动画（光栖风格：三颗金色圆点呼吸） */
.sw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.sw-loader { animation: none; position: fixed; inset-inline-end: 12px; top: 50%; display: flex; gap: 6px; opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 5 }
.sw-loader.on { opacity: 1 } .sw-loader i { width: 9px; height: 9px; border-radius: 50%; background: #e8c87a; box-shadow: 0 0 8px #e8c87a99; opacity: .5 }
@media (prefers-reduced-motion: no-preference) {
  .sw-loader.on i { animation: swpulse 1.2s ease-in-out infinite } .sw-loader i:nth-child(2) { animation-delay: .2s !important } .sw-loader i:nth-child(3) { animation-delay: .4s !important }
  #view > *:not(.sw-loader) { transition: translate .22s ease } #view.sw-loading > *:not(.sw-loader) { translate: -12px 0 }
  #view.sw-nudge > *:not(.sw-loader) { animation: swnudge .24s ease-out } }
@keyframes swpulse { 0%, 100% { transform: scale(.6); opacity: .35 } 50% { transform: scale(1.15); opacity: 1 } }
@keyframes swnudge { 0%, 100% { translate: 0 0 } 40% { translate: -8px 0 } }
/* 商家：我的广告卡 / 提升排名 */
.ad-notice { margin: 8px 0; padding: 10px 12px; border-radius: 10px; border: 1px solid #f6d38a66; background: #f6d38a12; color: #f6d38a }
.ad-ex { margin: 8px 0 } .ad-ex summary { cursor: pointer; color: #f6d38a }
.ad-tbl { border-collapse: collapse; width: 100%; font-size: 13px; margin: 6px 0 } .ad-tbl th, .ad-tbl td { border-bottom: 1px solid #ffffff22; padding: 6px 8px; text-align: start }
.ad-mine p { margin: .25em 0 } .ad-rk b { color: #f6d38a; font-size: 18px } .ad-empty { text-align: center; padding: 24px 12px }
.tu-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 } .tu-stats span { display: flex; flex-direction: column; font-size: 12px; color: #cfd6ff; border: 1px solid #ffffff22; border-radius: 10px; padding: 8px } .tu-stats b { font-size: 16px; color: #fff }
.tu-quick { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 } .tu-quick button[aria-pressed=true] { border-color: #f6d38a; color: #f6d38a }
.tu-lab { display: block; margin: 6px 0 } .tu-lab input { width: 100%; box-sizing: border-box; margin-top: 4px }
.tu-err { color: #ffb59c; margin: 4px 0; font-size: 13px } .tu-prev { margin: 8px 0; padding: 8px 10px; border-radius: 10px; background: #ffffff0d } .tu-prev small { display: block; margin-top: 4px }
.tu-recv { font-size: 13px; word-break: break-all } .tu-state { min-height: 1.4em; margin: 6px 0; font-size: 14px } .tu-state.err { color: #ffb59c } .tu-state.wait { color: #e8c87a }
.tu-ok { border: 1px solid #5ad1a0aa; border-radius: 10px; padding: 10px 12px; margin: 8px 0 } .ad-up { margin-inline-start: 8px }
/* 域名切换提示条 */
#dombar { position: sticky; top: 0; z-index: 40; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; padding: 8px 12px; font-size: 14px; background: #2b2410; color: #ffe3a0; border-bottom: 1px solid #f6d38a88 }
#dombar.blocked { background: #3a1410; color: #ffd0c4; border-color: #ff8a70aa } #dombar.info { background: #10301f; color: #c4f5da; border-color: #5ad1a0aa } #dombar small { display: block; opacity: .85 }
.recvline code { word-break: break-all; overflow-wrap: anywhere; user-select: all }
/* 团购礼品卡 */
.gb-form label.gb-l { display: block; margin: 12px 0 4px; color: #f3e2b8; font-weight: 600 } .gb-form textarea, .gb-form input:not([type=checkbox]), .gb-form select { width: 100%; box-sizing: border-box }
.gb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px } @media (max-width: 520px) { .gb-grid { grid-template-columns: 1fr } }
.gb-opts { border: 1px solid #ffd36b44; border-radius: 10px; margin: 14px 0; padding: 8px 12px } .gb-opts legend { color: #ffd36b; padding: 0 6px }
.gb-c { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; line-height: 1.6 } .gb-c input { margin-top: 5px; flex: none; width: 18px; height: 18px } .gb-c small { display: block } .gb-gas { color: #ffd36b }
.gb-total { margin: 14px 0; padding: 12px; border-radius: 10px; background: #ffd36b14; border: 1px solid #ffd36b55 } .gb-total b { font-size: 22px; color: #ffd36b } .gb-recv { margin: 8px 0 0; font-size: 13px } .gb-recv code { word-break: break-all }
.gb-rules ul { margin: 6px 0; padding-inline-start: 20px } .gb-rules li { line-height: 1.7; margin: 4px 0 }
.gb-foot { text-align: center; color: #ffd36b; font-weight: 600; border-top: 1px solid #ffd36b44; padding: 14px 8px; margin: 18px 0 8px; line-height: 1.7 }
.gb-bless { font-style: italic; color: #f3e2b8; overflow-wrap: anywhere } .gb-list { list-style: none; padding: 0; margin: 0 } .gb-list li { margin: 6px 0 } .gb-list a { display: block; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; min-height: 24px }
.gb-bar { height: 12px; border-radius: 99px; background: #ffffff18; overflow: hidden; margin: 10px 0 } .gb-bar i { display: block; height: 100%; background: linear-gradient(90deg, #e8a93a, #fff4cf); transition: width .5s }
.gb-home { color: #ffd36b; text-decoration: underline } .gb-claimcard h3 { overflow-wrap: anywhere }
.gb-note { margin: 8px 0; padding: 8px 12px; border-inline-start: 3px solid #ffd36b; background: #ffd36b10; border-radius: 6px } .gb-note h4 { margin: 0 0 4px; color: #ffd36b; font-size: 14px } .gb-note p { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap }
.gb-disc { margin: 8px 0; padding: 8px 12px; border: 1px solid #ffb59c88; border-radius: 8px; color: #ffd6c6; font-weight: 600; line-height: 1.6 } .gb-val { color: #ffd36b; font-weight: 600; margin: 6px 0 } .gb-pay b { font-size: 20px; color: #ffd36b }
/* 团购礼品卡：附加内容（创建页列表 + 领取页网格 + 全屏预览） */
.gb-att { margin: 14px 0; padding: 12px; border: 1px solid #ffd36b55; border-radius: 12px; background: #ffd36b08 } .gb-att-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap } .gb-att-h h4 { margin: 0; color: #ffd36b; font-size: 15px } .gb-atc { color: #ffd36b; font-weight: 600 }
.gb-att-b { display: flex; gap: 8px; margin: 8px 0 } .gb-att-b button { flex: 1; min-height: 44px } .gb-att-b button:disabled { opacity: .4; cursor: not-allowed } .gb-amax { color: #ffb59c }
.gb-al { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px } .gb-ait { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid #ffd36b33; border-radius: 10px; background: #0c1228aa } .gb-ait.over { outline: 2px dashed #ffd36b } .gb-ait.st-err { border-color: #ff6b6b }
.gb-dh { cursor: grab; color: #ffd36b; padding: 4px; user-select: none } .gb-th { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: #1a2038; display: inline-flex; align-items: center; justify-content: center } .gb-th img { width: 100%; height: 100%; object-fit: cover }
.gb-ph { font-size: 24px; display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: #1a2038 } .gb-ainfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px } .gb-ainfo b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .gb-at { width: 100%; margin-top: 4px }
.gb-aact { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end } .gb-aact button { min-width: 36px; min-height: 36px; padding: 2px 6px } .gb-attd { font-size: 12px; margin: 6px 0 } .gb-cv { display: flex; align-items: center; gap: 10px } .gb-pvbox { margin: 12px 0 }
.gb-attv { margin: 10px 0 } .gb-attv h4 { margin: 0 0 6px; color: #ffd36b; font-size: 14px } .gb-ag { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px } .gb-ag li { border: 1px solid #ffd36b44; border-radius: 10px; overflow: hidden; background: #0a0f24; text-align: center; min-width: 0 }
.gb-ai { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in } .gb-ai img, .gb-pc img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block } .gb-pc .gb-ph { aspect-ratio: 1; font-size: 32px } .gb-pc b { display: block; font-size: 12px; padding: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.gb-pb { margin: 2px 0 8px; padding: 3px 10px; border-radius: 20px; font-size: 12px; min-height: 32px }
@media (max-width: 560px) { .gb-ag { grid-template-columns: repeat(2, 1fr) } .gb-aact { max-width: 120px } .gb-ait { flex-wrap: wrap } .gb-ainfo { flex-basis: 40% } }
.gb-lb { display: flex; align-items: center; gap: 6px; margin: 8px 0 } .gb-lb img { flex: 1; min-width: 0; max-height: 70vh; object-fit: contain; border-radius: 8px } .gb-lb button { min-width: 44px; min-height: 44px; font-size: 22px }
.gb-ag li { align-self: start } .gb-ai img, .gb-pc img { height: auto } .gb-pc .gb-ph { height: auto; width: 100%; aspect-ratio: 1 } .gb-ai { line-height: 0 }
#modal-box[data-cat=lb] { width: min(96vw, 980px); max-width: none } .gb-lb img { width: 100%; height: 72vh; max-height: 72vh }
/* 手机钱包连接：顶部状态胶囊 / 无注入提示 / 深链接按钮 / MWA 推荐项 */
.wstat { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid #ffffff33; background: #0b1030cc; color: #e6ecff; max-width: 48vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.wstat.on { border-color: #7ee78788; color: #bff3c4 } .wstat.on > span:first-child { color: #7ee787 } .wstat.wait { border-color: #ffd36b88; color: #ffd36b } .wstat.off { border-color: #ff9b7a99 } .wstat button { all: unset; cursor: pointer; color: #ffc9b8; font-size: 12px; padding: 2px 0 }
@media (max-width: 480px) { .wstat .wst-w { display: none } .wstat { padding: 3px 8px; max-width: 42vw } }
.wmob { margin: 8px 0; padding: 10px 12px; border: 1px solid #ffd36b88; border-radius: 10px; background: #ffd36b14; color: #ffe9b0; font-weight: 600; line-height: 1.5 }
.witem.wdeep { text-decoration: none; color: inherit; border: 1px solid var(--line, #ffffff33); border-radius: 10px; background: #ffffff0a; min-height: 48px; box-sizing: border-box } .witem.rec { border-color: #ffd36b } .wcqr, .qr { max-width: 260px; margin: 8px auto }