/* 在设计稿 theme.css 基础上：可交互控件、平板断点、首页布局。颜色沿用设计稿。 */
:root { --orange-2: #ffa53d; --text: #f2ece5; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *:before, *:after { transition: none !important; animation: none !important; } }
body.locked { overflow: hidden; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--orange-2); outline-offset: 3px; }
#main:focus, #main:focus-visible { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.crumb a:hover { color: #c8b49b; }

/* 按钮化的设计元素 */
.icon-btn { position: relative; padding: 6px; border: 0; background: none; color: #e8dccb; }
.icon-btn .dot { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 2px var(--bg); }
.btn:hover:not(.primary) { background: #2c1d0e; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { border-color: var(--red); color: var(--red); }
.btn.ghost { border-color: #58391f; }
.link-btn { display: inline; padding: 0; border: 0; background: none; color: var(--orange); font-size: inherit; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.heart { border: 0; cursor: pointer; transition: color .15s, background .15s; }
.heart:hover { background: #0006; }
.heart.on { color: #ff7a1a; }
.heart.on svg, .fav-btn.on svg { fill: currentColor; }
.fav-btn.on { color: var(--orange-2); border-color: #a4622a; }
.chart-tabs button { padding: 6px 12px; border: 1px solid #3e2c1a; border-radius: 4px; background: none; color: #a48a68; font-size: 11px; }
.chart-tabs button.selected { background: #482a0e; color: #ffa544; }
.trade-switch button { width: 50%; padding: 13px; border: 0; border-radius: 0; background: #1a140d; color: #a28765; font-size: 14px; }
.trade-switch button.selected { background: linear-gradient(90deg, #ff9800, #ff6200); color: white; }
button.book-row { width: 100%; border: 0; border-bottom: 1px solid #2d2215; border-radius: 0; background: none; color: inherit; font-size: 14px; justify-content: space-between; cursor: pointer; }
button.book-row:hover { background: #ffffff08; }
button.tab { cursor: pointer; }
button.close { padding: 2px 8px; border: 0; background: none; font-size: 25px; line-height: 1; }
button.notice { width: 100%; padding: 20px 0; border: 0; border-bottom: 1px solid #432e16; border-radius: 0; background: none; color: inherit; text-align: left; white-space: normal; justify-content: flex-start; align-items: flex-start; font-size: 14px; }
button.notice:hover h3 { color: var(--orange-2); }
.notice.unread h3:after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-radius: 50%; background: var(--orange); vertical-align: middle; }
.msg-meta { margin-bottom: 22px; }
.drawer { overflow-y: auto; }
.drawer .sidebar { display: block; border: 0; padding: 0; }
.drawer .sidebar .group { margin: 19px 0 8px; font-size: 10px; color: #8a7459; letter-spacing: 2px; }

.error { color: var(--red); font-size: 12px; min-height: 1em; margin: 6px 0 10px; }
.error:empty { margin: 0; }
[aria-invalid="true"] { border-color: var(--red) !important; }
.field input[readonly] { color: #9c8c78; }
.liquidity-badge.owned { color: var(--green); border-color: #2d6c52; }
.notice-line { font-size: 12px; color: #d9b384; }
.owned-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.work-select { height: 42px; border: 1px solid var(--line); border-radius: 6px; padding: 0 14px; color: #d6c6b1; background: #15120e; max-width: 100%; }
.filters select { color: #d6c6b1; }
.result-count { font-size: 12px; margin: -10px 0 16px; }
.row-link { cursor: pointer; }
.row-link:hover td { background: #ffffff05; }
.table-wrap.compact { overflow-x: auto; }
.table-wrap.compact table { width: 100%; border-collapse: collapse; min-width: 560px; }
.table-wrap table { width: 100%; border-collapse: collapse; }
.empty-state { text-align: center; padding: 48px 24px; }
.empty-state h2 { margin-bottom: 10px !important; }
.empty-state .muted { margin: 0 0 22px; font-size: 13px; }
.empty-state .actions { justify-content: center; }
.page-actions { margin: 6px 0 20px; flex-wrap: wrap; }
.demo-tools { margin-top: 10px; padding: 14px 18px; border: 1px dashed #4d361f; border-radius: 8px; color: #a88f6f; font-size: 12px; max-width: 420px; }
.demo-tools summary { cursor: pointer; }
.demo-tools .hint { margin: 10px 0; }
.h-sub { font-size: 24px !important; }
.h-mini { font-size: 15px; }
.small-text { line-height: 1.8; font-size: 12px; }
.storage-note { max-width: 1240px; margin: 10px auto 0; font-size: 12px; color: #ffb563; }
.liq-order { display: block; padding: 6px 0 12px; border-bottom: 1px solid #302519; }
.liq-order:last-of-type { border: 0; }
.footer .link-btn { font-size: 10px; color: #a07a45; }
.stat strong.green, .stat strong.red { font-size: inherit; }

/* 提示 */
#toasts { position: fixed; top: 22px; left: 50%; transform: translateX(-50%); z-index: 30; display: grid; gap: 8px; justify-items: center; pointer-events: none; width: max-content; max-width: calc(100% - 32px); }
.toast { padding: 11px 18px; border: 1px solid #704b26; border-radius: 8px; background: #1d150c; color: #f4dcbc; font-size: 13px; box-shadow: 0 14px 40px #000a; animation: toast-in .2s ease-out; transition: opacity .3s, transform .3s; }
.toast.success { border-color: #2d6c52; color: #8fe8bf; }
.toast.error { border-color: #7a3a32; color: #ffb0a6; }
.toast.out { opacity: 0; transform: translateY(-6px); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } }

/* 平板与窄屏：设计稿只定义了 1240 桌面与 600 手机两档 */
@media (max-width: 1288px) {
  .desktop-header, .page, .footer, .storage-note { padding-left: 24px; padding-right: 24px; }
  .page { padding-top: 30px; padding-bottom: 55px; }
}
@media (max-width: 1100px) {
  .nav { gap: 16px; font-size: 12px; }
  .desktop-header { gap: 18px; }
  .art-grid { grid-template-columns: repeat(3, 1fr); }
  .detail-market-grid { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 900px) {
  .desktop-header { display: none; }
  .m-header { display: flex; height: 60px; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid #35250f; }
  .m-header .brand { font-size: 20px; gap: 8px; }
  .m-header .brand svg { width: 25px; height: 29px; }
  .m-header .actions { gap: 4px; }
  .m-bottom { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 8; background: #11110ffa; border-top: 1px solid #3d2c14; padding: 10px 10px calc(14px + env(safe-area-inset-bottom, 0px)); justify-content: space-around; }
  .m-bottom a { display: flex; align-items: center; flex-direction: column; gap: 6px; font-size: 10px; color: #93784f; }
  .m-bottom a.active { color: #ff9f2d; }
  .page { padding-bottom: 110px; }
  .footer { display: none; }
  .detail-market-grid { grid-template-columns: 1fr; }
  .detail-market-grid .chart { margin-top: 0; }
  .table-wrap { overflow-x: auto; }
  .table-wrap table { min-width: 640px; }
  .filters { flex-wrap: wrap; }
  .filters .grow { display: none; }
  .filters .search { flex: 1 1 100%; }
  .search input { width: 100%; }
}
@media (max-width: 600px) {
  .page { padding: 21px 16px 110px; }
  .art-grid { grid-template-columns: repeat(2, 1fr); }
  .tabs { overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .trade-switch button { font-size: 13px; padding: 11px; }
  .artwork-title .actions { width: 100%; }
  .work-select { width: 100%; }
  .modal { max-height: calc(100dvh - 32px); overflow-y: auto; }
  .stats.three { grid-template-columns: 1fr 1fr 1fr; }
  .detail-info .actions { flex-wrap: wrap; }
  .stepper { gap: 6px; }
  #toasts { top: 70px; }
}

/* ---------- 首页 ---------- */
.page-home { max-width: 1240px; overflow-x: clip; }
.home-hero { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: 12px; padding-top: 6px; }
.home-hero-copy .eyebrow { color: #ff8a1c; font-size: 13px; letter-spacing: 1.5px; margin-bottom: 18px; }
.home-hero-copy h1 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.22; letter-spacing: 1px; margin: 0 0 22px; font-weight: 800; text-wrap: balance; }
.home-hero-copy h1 span { color: #ff8412; }
.home-hero-copy p { color: #cfc2b1; font-size: 16px; margin: 0 0 30px; }
.home-hero-copy .actions .btn { min-width: 170px; padding: 15px 22px; font-size: 15px; border-radius: 8px; }
.home-hero-copy .actions .btn.ghost { border-color: #5b4a3a; background: #0d0b09aa; }
.app-links { display: flex; align-items: center; gap: 12px; margin-top: 28px; font-size: 12px; color: #a99985; }
.app-links button { padding: 0; border: 0; background: none; color: #cdbfac; font-size: 12px; gap: 6px; }
.app-links button:hover { color: var(--orange-2); }
.app-links i { width: 1px; height: 12px; background: #4a3c2e; }
.home-hero-art img { width: 100%; display: block; aspect-ratio: 592 / 380; object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 94%, transparent), linear-gradient(0deg, transparent, #000 12%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 16%, #000 94%, transparent), linear-gradient(0deg, transparent, #000 12%); mask-composite: intersect; }

.home-overview { display: grid; grid-template-columns: 1.1fr repeat(4, 1fr); align-items: center; margin: 22px 0 28px; padding: 24px 0; border: 1px solid #3a2c1e; border-radius: 12px; background: linear-gradient(120deg, #1f160e, #11100d); }
.ov-title { padding: 0 24px; }
.ov-title h2 { font-size: 26px; margin: 0 0 6px; font-weight: 700; }
.ov-title span { font-size: 12px; color: #a0907b; letter-spacing: 1px; }
.ov-item { padding: 0 24px; border-left: 1px solid #3a2c1e; }
.ov-item label { display: block; font-size: 13px; color: #b9ab98; margin-bottom: 8px; }
.ov-item div { display: flex; align-items: center; gap: 12px; }
.ov-item strong { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ov-item .icon { color: var(--orange); width: 22px; height: 22px; }
.ov-item small { display: block; font-size: 12px; margin-top: 8px; }

.home-section { margin: 34px 0; }
.home-head { display: flex; align-items: center; gap: 22px; margin-bottom: 18px; flex-wrap: wrap; }
.home-head h2 { font-size: 28px; margin: 0; font-weight: 700; display: flex; align-items: baseline; gap: 12px; }
.home-head h2 span { font-size: 13px; color: #a0907b; font-weight: 400; letter-spacing: .5px; }
.home-head .pills { display: flex; gap: 10px; flex: 1; flex-wrap: wrap; }
.home-head .pills .tab:not(.active) { background: #15120e; }
.home-head .more { font-size: 13px; color: #e8dccb; margin-left: auto; }
.home-head .more:hover, .home-more .link:hover { color: var(--orange-2); }
.home-head .live { margin-left: auto; font-size: 13px; color: #d9cdbd; display: flex; align-items: center; gap: 8px; }
.home-head .live i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px #2dd59c22; }
.home-grid { grid-template-columns: repeat(4, 1fr); }
.home-grid .creator span small { display: block; font-size: 9px; color: #9b8f80; }
.home-grid .art-info h3 { font-size: 18px; }
.home-grid .price-row b { font-size: 19px; }
.home-trades td { font-size: 14px; }
.home-trades .cell-art small { color: #9b8f80; }
.home-more { text-align: right; margin-top: -12px; font-size: 13px; }

.app-banner { position: relative; display: grid; grid-template-columns: 1.3fr 0.9fr 0.5fr; align-items: center; gap: 20px; margin: 44px 0 36px; padding: 34px 40px; border: 1px solid #3a2c1e; border-radius: 14px; overflow: hidden;
  background: radial-gradient(ellipse 60% 110% at 72% 120%, #b1470099, transparent 70%), linear-gradient(120deg, #1a120b, #0f0d0a); }
.app-banner h2 { font-size: 30px; margin: 0 0 12px; font-weight: 800; text-wrap: balance; }
.app-banner p { color: #d7cab8; margin: 0 0 24px; font-size: 15px; }
.app-banner .btn { padding: 13px 24px; font-size: 15px; border-color: #b06a2c; }
.phone { justify-self: center; width: 150px; aspect-ratio: 9 / 18; border-radius: 26px; padding: 7px; background: linear-gradient(160deg, #3a332c, #111); box-shadow: 0 20px 50px #000b, 0 0 60px #ff6a0033; transform: rotate(8deg); }
.phone-screen { height: 100%; border-radius: 20px; background: radial-gradient(ellipse at 50% 30%, #3a1a06, #0b0806 70%); display: grid; place-content: center; text-align: center; gap: 8px; }
.phone-screen svg { width: 42px; height: 46px; margin: 0 auto; }
.phone-screen b { font-size: 17px; font-style: italic; }
.phone-screen small { font-size: 11px; color: #c9b8a3; font-style: italic; line-height: 1.6; }
.app-words { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 1px solid #4a3a2a; color: #cdbfac; font-size: 13px; display: grid; gap: 12px; }
.home-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 26px 0 30px; border-top: 1px solid #2c2218; }
.home-footer .brand { font-size: 21px; }
.home-footer .brand svg { width: 26px; height: 30px; }
.home-footer p { margin: 6px 0 0; font-size: 12px; color: #9b8f80; }
.home-footer nav { display: flex; gap: 22px; font-size: 13px; color: #b9ab98; }
.home-footer nav a:hover { color: var(--orange-2); }
.home-footer small { width: 100%; font-size: 11px; color: #7b6a58; }

@media (max-width: 1100px) {
  .home-overview { grid-template-columns: repeat(4, 1fr); row-gap: 18px; }
  .ov-title { grid-column: 1 / -1; }
  .ov-item:nth-child(2) { border-left: 0; }
  .home-grid { grid-template-columns: repeat(2, 1fr); }
  .app-banner { grid-template-columns: 1fr auto; }
  .app-words { display: none; }
}
@media (max-width: 760px) {
  .home-hero { grid-template-columns: 1fr; }
  .home-hero-art { order: -1; margin: 0 -16px; }
  .home-overview { grid-template-columns: 1fr 1fr; padding: 20px 0; }
  .ov-item { padding: 0 18px; }
  .ov-item:nth-child(4) { border-left: 0; }
  .ov-item strong { font-size: 20px; }
  .ov-item .icon { display: none; }
  .home-head h2 { font-size: 22px; }
  .home-head .pills { order: 3; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; }
  .home-grid .art-info h3 { font-size: 13px; }
  .home-grid .price-row b { font-size: 15px; }
  .app-banner { grid-template-columns: 1fr; padding: 26px 22px; }
  .app-banner h2 { font-size: 23px; }
  .app-banner .actions { flex-wrap: wrap; }
  .phone { display: none; }
  .home-footer { padding-bottom: 20px; }
  .home-trades table { min-width: 0; }
  .home-trades th:nth-child(3), .home-trades td:nth-child(3) { display: none; }
  .home-trades th, .home-trades td { padding: 12px 10px; }
}

/* ---------- 动效：沿用 Documents/CUI 版本的节奏与缓动 ---------- */
.btn, .art-card, .heart, .icon-btn, .wallet, .tab, .chart-tabs button, .home-footer nav a, .ticker-item, .panel.five-quotes, .liq-order, .order-card { transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s, border-color .25s, background .25s, color .2s; }
.btn:hover:not(:disabled) { transform: translateY(-2px); }
.btn.primary { box-shadow: 0 4px 23px #ff660033; }
.btn.primary:hover { box-shadow: 0 10px 32px #ff7a0099; background: linear-gradient(135deg, #ffa043, #ff3d00); filter: none; }
.btn:not(.primary):hover { border-color: var(--orange); box-shadow: 0 0 12px #ff7a0033; }
.btn:active:not(:disabled) { transform: translateY(0); }
.icon-btn:hover, .wallet:hover { color: #ffb45d; box-shadow: 0 0 12px #ff7a0040; border-radius: 8px; }
.wallet:hover { border-color: var(--orange); background: #ff7a0026; }
.art-top { overflow: hidden; }
.art-top img { transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.art-card:hover { transform: translateY(-8px); border-color: #a8561d; box-shadow: 0 16px 36px #ff7a002e; }
.art-card:hover .art-top img { transform: scale(1.06); }
.heart:hover, .heart.on { box-shadow: 0 0 10px #ff7a0066; }
.big-art { transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.detail-grid > div:first-child { overflow: hidden; border-radius: 10px; }
.detail-grid > div:first-child:hover .big-art { transform: scale(1.04); }
.row-link td, .home-trades td { transition: background .2s; }
.home-trades tbody tr:hover td { background: #ff7a000d; }

/* 首屏：整体缓慢漂浮，背后光晕呼吸 */
.home-hero-art { position: relative; isolation: isolate; }
.home-hero-art:before { content: ""; position: absolute; inset: 8% 10%; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse, #ff6a0040, transparent 70%); filter: blur(24px); animation: heroGlow 6s ease-in-out infinite alternate; }
.home-hero-art img { animation: heroFloat 6s ease-in-out infinite alternate; }
@keyframes heroFloat { 0% { transform: translateY(0) rotate(-.4deg); } 100% { transform: translateY(-14px) rotate(.3deg); } }
@keyframes heroGlow { 0% { opacity: .55; transform: scale(.94); } 100% { opacity: 1; transform: scale(1.06); } }

/* 实时圆点脉冲 */
.home-head .live i, .icon-btn .dot { animation: pulseDot 2s infinite; }
@keyframes pulseDot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: .5; } }

/* 作品行情滚动条 */
.ticker { position: relative; overflow: hidden; margin: -8px 0 28px; padding: 12px 0; border-block: 1px solid #2a1f14; background: #0d0b09aa;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ticker-track { display: flex; width: max-content; animation: tickerScroll 45s linear infinite; }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
.ticker-copy { display: contents; }
.ticker-item { display: flex; align-items: center; gap: 10px; padding: 4px 26px; border-right: 1px solid #2a1f14; font-size: 13px; white-space: nowrap; color: #d9cdbd; }
.ticker-item img { width: 26px; height: 26px; border-radius: 5px; object-fit: cover; }
.ticker-item b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ticker-item small { font-size: 12px; }
.ticker-item:hover { color: #ffb45d; }
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* 提示条弹入 */
.toast { animation: toastIn .3s cubic-bezier(.16, 1, .3, 1); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-14px) scale(.97); } to { opacity: 1; transform: none; } }

/* 弹窗、抽屉进入 */
.modal-backdrop { animation: fadeIn .2s ease-out; }
.modal { animation: modalIn .3s cubic-bezier(.16, 1, .3, 1); }
.drawer { animation: drawerIn .35s cubic-bezier(.16, 1, .3, 1); }
.drawer-backdrop { animation: fadeIn .2s ease-out; }
.modal-backdrop.swap, .drawer-backdrop.swap { animation: none; } /* 弹窗之间切换时遮罩不重播 */
@keyframes fadeIn { from { opacity: 0; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(.98); } }
@keyframes drawerIn { from { transform: translateX(100%); } }
/* 弹窗、抽屉关闭：与进入对应的缓出 */
.layer-out { pointer-events: none; }
.layer-out .modal-backdrop, .layer-out .drawer-backdrop { animation: fadeOut .24s ease-in forwards; }
.layer-out .modal { animation: modalOut .24s cubic-bezier(.4, 0, 1, 1) forwards; }
.layer-out .drawer { animation: drawerOut .26s cubic-bezier(.4, 0, 1, 1) forwards; }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes modalOut { to { opacity: 0; transform: translateY(16px) scale(.98); } }
@keyframes drawerOut { to { transform: translateX(100%); } }

/* 分页按钮 */
.pagination button { padding: 9px 13px; border: 1px solid #35271a; border-radius: 4px; background: none; color: #95816a; font-size: 12px; }
.pagination button.selected { color: #ff982f; background: #422511; border-color: #804014; }
.pagination button:disabled { opacity: .35; cursor: default; }
.pagination button:not(:disabled):hover { border-color: #804014; color: #ffb45d; }

/* 手机没有悬停：去掉悬停位移，保留漂浮、滚动、脉冲 */
@media (hover: none) {
  .art-card:hover, .btn:hover:not(:disabled) { transform: none; }
  .art-card:hover .art-top img, .detail-grid > div:first-child:hover .big-art { transform: none; }
}
@media (max-width: 600px) {
  .ticker { margin: 0 -16px 22px; }
  .ticker-item { padding: 2px 16px; font-size: 12px; }
  .pagination { flex-wrap: wrap; }
}

/* ---------- 第二批：资产与账户 ---------- */
.big-figure { font-size: 30px; margin: 14px 0 28px; font-variant-numeric: tabular-nums; }
.balance-panel .money-split { flex-wrap: wrap; }
.balance-actions { margin-top: 30px; flex-wrap: wrap; }
.form-options button { padding: 12px 21px; border: 1px solid #4d361c; border-radius: 5px; background: none; color: #d6c6b1; font-size: 13px; }
.form-options button.selected { border-color: #ff8d1a; color: #ffb24a; background: #3d260d; }
.form-layout .btn.wide, .narrow-form .btn { margin-top: 6px; }
.sep { border: 0; border-top: 1px solid #302519; margin: 6px 0 14px; }
.sub-h { margin-top: 30px !important; }
.account-main { min-width: 0; }
.narrow-form { max-width: 460px; }
button.payment-method { display: block; width: 100%; text-align: left; color: inherit; font-size: 14px; white-space: normal; cursor: pointer; }
button.payment-method:hover { border-color: #a4622a; }
.avatar-link { display: inline-flex; border-radius: 50%; }
.avatar-link:hover .avatar { box-shadow: 0 0 12px #ff7a0066; }
.login-row { justify-content: space-between; margin-bottom: 18px; }
.login-row .choice { margin: 0; }
.modal .tabs { margin-bottom: 22px; }
.login-notice { animation: toastIn .3s cubic-bezier(.16, 1, .3, 1); transition: opacity .3s; }
.login-notice.out { opacity: 0; }
.login-notice button { background: none; }
.me-row { width: 100%; border: 0; border-bottom: 1px solid #302519; border-radius: 0; background: none; color: inherit; text-align: left; font-size: 14px; white-space: normal; }
.me-row:last-child { border-bottom: 0; }
.me-row .chevron { color: #9c8466; font-size: 20px; }
.me-row:hover h3 { color: var(--orange-2); }
.me-balance { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.me-balance .big-figure { margin: 8px 0 0; font-size: 26px; }
.notice-dismiss { background: none; }
.header-right .btn.small, .m-header .btn.small { padding: 9px 14px; }
@media (max-width: 900px) {
  .account-layout { display: block; }
  .account-layout .sidebar { display: none; }
}

/* ---------- 第三批：创作者、区块、帮助 ---------- */
.liquidity-badge.pending-badge { color: #ffb563; border-color: #7a511f; background: #442b1344; }
.unreleased-price { font-size: 16px !important; color: #ffb563; }
.img-ph { width: 42px; height: 42px; border-radius: 6px; background: #241b12; display: grid; place-items: center; color: #8a704c; flex-shrink: 0; }
.cw-preview { display: block; max-width: 100%; max-height: 320px; margin: 0 auto 18px; border-radius: 8px; }
.chain-event { display: grid; gap: 4px; padding: 14px 0 14px 18px; border-left: 2px solid #573619; position: relative; }
.chain-event:before { content: ""; position: absolute; left: -6px; top: 18px; width: 10px; height: 10px; border-radius: 50%; background: #ff8514; }
.chain-event small { color: #937448; font-size: 11px; }
.contact-card { text-align: center; padding: 40px 24px; }
.contact-card .box-icon { display: inline-grid; margin-bottom: 18px; }
.contact-mail { font-size: 21px; margin: 8px 0; }
.contact-card .actions { justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.faq { border-bottom: 1px solid #35261a; }
.faq:last-of-type { border-bottom: 0; }
.faq summary { list-style: none; cursor: pointer; border: 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq[open] .chevron { color: var(--orange-2); }
.faq > p { margin: 0 0 18px 57px; }
.quick-asks { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 18px; padding-top: 18px; border-top: 1px solid #35261a; }
.quick-asks .label { width: 100%; }
a.lesson, button.lesson { display: flex; align-items: center; width: 100%; color: inherit; text-align: left; font-size: 14px; white-space: normal; transition: border-color .25s, transform .25s cubic-bezier(.16, 1, .3, 1); }
a.lesson:hover, button.lesson:hover { border-color: #a4622a; transform: translateX(4px); }
.lesson .end { margin-left: auto; flex-shrink: 0; }
.lesson .chevron { color: #c4955c; font-size: 12px; }
.label-text { display: block; color: #b7a084; font-size: 12px; margin-bottom: 10px; }
.upload { cursor: pointer; text-align: center; padding: 16px; }
.upload input[type=file] { max-width: 100%; font-size: 12px; color: #a08b72; }
.upload.drag { border-color: var(--orange); background: #ff7a0014; }
td.clip { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-messages { overflow-y: auto; }
.creator-identity { flex-wrap: wrap; }

/* 费用汇总（形式沿用 Documents/CUI 首页出价弹窗） */
.fee-summary-box { display: flex; flex-direction: column; gap: 9px; margin: 18px 0 12px; padding: 16px 19px; border: 1px solid #2f2418; border-radius: 10px; background: #0000004d; }
.fee-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: #a8998a; font-variant-numeric: tabular-nums; }
.fee-row.total-row { margin-top: 3px; padding-top: 11px; border-top: 1px solid #3a2c1e; font-size: 15px; font-weight: 700; color: #fff; }
.fee-row .highlight-val { color: #ffa043; font-size: 20px; }
.owned-modal .fee-summary-box { margin-top: 8px; }

/* 走势图刻度：HTML 叠加层，不随 SVG 拉伸变形 */
.chart-wrap { position: relative; }
.chart-wrap .chart { margin-top: 0 !important; }
.detail-market-grid .chart-wrap { margin-top: 78px; }
.chart-wrap > span { position: absolute; transform: translateY(-50%); font-size: 11px; color: #8d765a; white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums; }
.chart-wrap .ax-x { transform: translate(-50%, -50%); }
.chart-wrap .ax-x.first { transform: translate(0, -50%); }
.chart-wrap .ax-x.last { transform: translate(-100%, -50%); }
.chart-wrap .ax-now { padding: 2px 6px; border-radius: 3px; background: #ff8d24; color: #1b0f04; font-weight: 700; }
.chart-wrap .now-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff9c28; box-shadow: 0 0 0 4px #ff8d2433; transform: translate(-50%, -50%); animation: nowPulse 2s infinite; }
@keyframes nowPulse { 0%, 100% { box-shadow: 0 0 0 3px #ff8d2440; } 50% { box-shadow: 0 0 0 7px #ff8d2400; } }
@media (max-width: 900px) { .detail-market-grid .chart-wrap { margin-top: 0; } }
@media (max-width: 600px) { .chart-wrap > span { font-size: 9px; } .chart-wrap .ax-now { padding: 1px 4px; } }

/* ---------- 借鉴 Documents/CUI：持有状态角标、存证标签、行情弹窗、全局搜索 ---------- */
/* 完整区块地址：不省略，放不下时自动换行 */
.hash { word-break: break-all; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.kv-list .row .v .hash { display: inline-block; max-width: 100%; text-align: right; }
.artwork-chain-address { flex-wrap: wrap; row-gap: 6px; }
.artwork-chain-address .hash { font-size: 12px; }

/* 持有状态角标：左上角磨砂胶囊 */
.art-top, .art-frame { position: relative; }
.hold-badge { position: absolute; top: 11px; left: 11px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid #ffffff1f; border-radius: 999px;
  background: #0a0a0ecc; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .3px; pointer-events: none; }
.hold-badge i { width: 6px; height: 6px; border-radius: 50%; background: #9c8e7d; }
.hold-badge.owned { border-color: #2dd59c55; } .hold-badge.owned i { background: var(--green); box-shadow: 0 0 8px var(--green); }
.hold-badge.selling { border-color: #ff8d2466; } .hold-badge.selling i { background: var(--orange); box-shadow: 0 0 8px var(--orange); animation: nowPulse 2s infinite; }
.hold-badge.unreleased { border-color: #ffb56355; } .hold-badge.unreleased i { background: #ffb563; }
.hold-badge.onsale i { background: #62b5ff; }
.art-frame .hold-badge { top: 16px; left: 16px; font-size: 12px; padding: 6px 13px; }
@media (max-width: 600px) { .art-top .hold-badge { top: 7px; left: 7px; padding: 3px 8px; font-size: 9px; gap: 4px; } }

/* 大图描边光晕 + 存证标签 */
.art-frame .big-art { border: 2px solid #ff7a0055; box-shadow: 0 0 30px #ff7a0033; border-radius: 12px; }
.chain-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chain-badges span { padding: 5px 11px; border: 1px solid #ffffff14; border-radius: 999px; background: #ffffff0d; color: #a8998a; font-size: 11px; }

/* 行情弹窗 */
.market-modal { width: min(920px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; }
.mk-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 26px; }
.mk-visual .big-art { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.mk-addr { margin: 14px 0 0; display: grid; gap: 6px; font-size: 12px; }
.mk-title { font-size: 24px; margin: 6px 0 16px; }
.data-box { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; padding: 16px 18px; border: 1px solid #2f2418; border-radius: 10px; background: #0000004d; margin-bottom: 16px; }
.data-box > div { display: grid; gap: 4px; }
.data-lbl { font-size: 11px; color: #8f8171; }
.data-val { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.data-val .highlight-val { color: #ffa043; }
.market-modal .panel { padding: 16px 16px 10px; margin-bottom: 14px; }
.market-modal .panel h2 { font-size: 15px; }
.market-modal .chart { height: 180px; }
.market-modal .chart-tabs button { padding: 4px 8px; font-size: 10px; }
.mk-actions { flex-wrap: wrap; }
.mk-actions .link { margin-left: auto; font-size: 13px; }
@media (max-width: 760px) {
  .mk-grid { grid-template-columns: 1fr; gap: 16px; }
  .mk-visual .art-frame { max-width: 260px; }
  .market-modal { padding: 20px; }
  .mk-actions .link { margin-left: 0; width: 100%; }
}

/* 全局搜索：⌘K / Ctrl+K 聚焦，获得焦点时展开并发光 */
.g-search { display: flex; align-items: center; gap: 8px; width: 190px; padding: 7px 10px 7px 13px; border: 1px solid #ffffff14; border-radius: 999px; background: #ffffff0d; color: #9c8e7d; transition: width .25s cubic-bezier(.16, 1, .3, 1), border-color .25s, box-shadow .25s, background .25s; }
.g-search:focus-within { width: 250px; border-color: var(--orange); background: #ffffff14; box-shadow: 0 0 14px #ff7a0040; }
.g-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: #fff; font-size: 12px; }
.g-search input::-webkit-search-cancel-button { display: none; }
.g-search kbd { padding: 2px 6px; border: 1px solid #ffffff1f; border-radius: 5px; font: 10px/1.4 inherit; color: #9c8e7d; white-space: nowrap; }
.desktop-header .nav { flex: 1 1 auto; }
@media (max-width: 1240px) { .g-search { width: 150px; } .g-search:focus-within { width: 200px; } .g-search kbd { display: none; } }
@media (max-width: 1100px) { .g-search { display: none; } }

/* 实时价格闪烁 */
@keyframes flashUp { 0% { color: #fff; background: #2dd59c40; } 100% { background: transparent; } }
@keyframes flashDown { 0% { color: #fff; background: #ef736840; } 100% { background: transparent; } }
.flash-up { animation: flashUp 1.1s ease-out; border-radius: 3px; }
.flash-down { animation: flashDown 1.1s ease-out; border-radius: 3px; }

/* 撮合中：旋转圆环 + 外圈呼吸，当前步骤圆点脉冲 */
.check .spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid #ffa3312e; border-top-color: #ffa331; border-right-color: #ffa331aa; animation: spin .9s linear infinite; }
.pending-result .check { animation: ringPulse 2s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ringPulse { 0%, 100% { box-shadow: 0 0 0 0 #ff8d2455; } 50% { box-shadow: 0 0 0 12px #ff8d2400; } }
@keyframes stepPulse { 0%, 100% { box-shadow: 0 0 0 0 #ff851499; } 50% { box-shadow: 0 0 0 7px #ff851400; } }
@media (max-width: 600px) { .check .spinner { width: 22px; height: 22px; } }
.quick-prices { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 14px; }
.quick-prices .btn { font-size: 11px; padding: 7px 11px; }

/* 缩略走势最新价标识点 */
.spark { overflow: visible; }
.spark .spark-halo { opacity: .28; transform-box: fill-box; transform-origin: center; animation: sparkHalo 1.8s ease-in-out infinite; }
@keyframes sparkHalo { 0%, 100% { transform: scale(.6); opacity: .35; } 50% { transform: scale(1.25); opacity: .08; } }

/* ---------- 统一下拉菜单（与主视觉一致） ---------- */
.pm-select { position: relative; display: inline-block; min-width: 0; }
.pm-select > select { position: absolute; inset: 0; opacity: 0; pointer-events: none; width: 100%; height: 100%; }
.pm-select-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; height: 42px; padding: 0 14px; border: 1px solid var(--line); border-radius: 6px; background: #15120e; color: #e6d8c4; font-size: 13px; text-align: left; white-space: nowrap; transition: border-color .2s, box-shadow .2s, background .2s; }
.pm-select-btn:hover { border-color: #7a511f; background: #1b150e; transform: none !important; box-shadow: none; }
.pm-select.open .pm-select-btn, .pm-select-btn:focus-visible { border-color: var(--orange); box-shadow: 0 0 0 3px #ff7a0022, 0 0 14px #ff7a0026; outline: none; }
.pm-select-value { overflow: hidden; text-overflow: ellipsis; }
.pm-select-btn .icon { color: #c4955c; transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
.pm-select.open .pm-select-btn .icon { transform: rotate(180deg); color: var(--orange); }
.pm-select-list { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; min-width: 100%; max-height: 280px; overflow-y: auto; margin: 0; padding: 6px; list-style: none;
  border: 1px solid #704b26; border-radius: 10px; background: radial-gradient(ellipse at 100% 0, #8a3e0c2e, transparent 70%), #19140d; box-shadow: 0 18px 50px #000c, 0 0 0 1px #ff7a000d;
  display: none; max-width: calc(100vw - 32px); transform-origin: top; }
.pm-select.up .pm-select-list { top: auto; bottom: calc(100% + 6px); transform-origin: bottom; }
.pm-select.right .pm-select-list { left: auto; right: 0; }
.pm-select.open .pm-select-list { display: block; animation: dropIn .22s cubic-bezier(.16, 1, .3, 1); }
@keyframes dropIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.pm-select.up.open .pm-select-list { animation-name: dropUp; }
@keyframes dropUp { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.pm-select-list li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; border-radius: 6px; color: #cdbfac; font-size: 13px; white-space: nowrap; cursor: pointer; }
.pm-select-list li:hover, .pm-select-list li.hl { background: #ff7a0017; color: #ffd5a3; }
.pm-select-list li.on { color: #ffa043; font-weight: 600; }
.pm-select-list li.on .icon { color: #ffa043; }
.pm-select-list li.disabled { opacity: .4; cursor: default; }
.pm-select-list::-webkit-scrollbar { width: 6px; } .pm-select-list::-webkit-scrollbar-thumb { background: #4d361f; border-radius: 3px; }
/* 各处尺寸 */
.field .pm-select, .form-layout .pm-select { display: block; width: 100%; }
.field .pm-select-btn { height: 46px; padding: 0 15px; background: #10100d; border-color: #4d361f; font-size: 14px; }
.filters .pm-select { min-width: 160px; }
.pm-select.work-select { padding: 0; border: 0; background: none; height: auto; min-width: 220px; }
@media (max-width: 600px) {
  .filters .pm-select { min-width: 0; width: calc(50% - 5px); }
  .filters .pm-select-btn { height: 38px; font-size: 11px; }
  .pm-select.work-select { width: 100%; }
}

/* ---------- 导航高亮横线：随文字宽度自适应，悬停时由中间展开 ---------- */
.nav a:after { content: ""; position: absolute; bottom: 19px; left: 0; right: 0; width: auto !important; height: 3px; border-radius: 3px; background: #ff7c06; transform: scaleX(0); opacity: 0; transition: transform .3s cubic-bezier(.16, 1, .3, 1), opacity .2s; }
.nav a:hover { color: #ffb45d; }
.nav a:hover:after { transform: scaleX(1); opacity: .45; }
.nav a.active:after { transform: scaleX(1); opacity: 1; box-shadow: 0 0 10px #ff7c0699; }

/* 未发售作品：实时参考价 */
.unreleased-price-box { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.unreleased-price-box .ref-line { display: grid; align-content: start; gap: 6px; }
.unreleased-price-box .price { font-size: 30px; }
.unreleased-price-box .ref-line + .ref-line { padding-left: 18px; border-left: 1px solid #3a2c1e; }
.ref-price-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; padding: 14px 16px; border: 1px solid #5a3a18; border-radius: 10px; background: #2a1a0b66; }
.ref-price-bar > div { display: grid; gap: 4px; }
.ref-price-bar strong { font-size: 22px; color: #ffa043; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .unreleased-price-box { grid-template-columns: 1fr; } .unreleased-price-box .ref-line + .ref-line { padding: 14px 0 0; border-left: 0; border-top: 1px solid #3a2c1e; } }

/* ---------- 首页跑马灯：热门作品横向滚动，悬停暂停 ---------- */
.marquee { overflow: hidden; padding: 12px 0 16px; margin: -12px 0 -16px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.marquee-track { display: flex; gap: 20px; width: max-content; animation: marqueeX var(--dur, 50s) linear infinite; }
.marquee-copy { display: contents; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
@keyframes marqueeX { to { transform: translateX(calc(-50% - 10px)); } }
.hot-marquee .art-card { flex: 0 0 280px; }
.hot-marquee .art-info h3 { font-size: 17px; }
.hot-marquee .price-row b { font-size: 18px; }
.hot-marquee .creator span small { display: block; font-size: 9px; color: #9b8f80; }

.trade-ticker { border: 1px solid var(--line); border-radius: 10px; background: #13120e; overflow: hidden; }
.tt-head, .tt-row { display: grid; grid-template-columns: minmax(0, 2.2fr) 1fr 1fr 0.8fr; align-items: center; gap: 12px; padding: 0 20px; }
.tt-head { height: 46px; background: #211b14; font-size: 12px; color: #a38d73; position: relative; z-index: 1; }
.tt-row { height: 68px; border-bottom: 1px solid #302519; font-size: 14px; color: inherit; transition: background .2s; }
.tt-row:hover { background: #ff7a000f; }
.tt-row .tt-price { font-weight: 600; font-variant-numeric: tabular-nums; }
.tt-row .cell-art small { color: #9b8f80; }
@media (max-width: 760px) {
  .hot-marquee .art-card { flex-basis: 190px; }
  .hot-marquee .art-info h3 { font-size: 13px; }
  .hot-marquee .price-row b { font-size: 15px; }
  .tt-head, .tt-row { grid-template-columns: minmax(0, 1.8fr) 1fr 0.8fr; padding: 0 14px; }
  .tt-head span:nth-child(3), .tt-row > span:nth-of-type(2) { display: none; }
  .tt-row { height: 60px; font-size: 13px; }
}
.trade-ticker + .home-more { margin-top: 14px; }
/* 作品行情滚动条置于导航栏下方 */
.home > .ticker:first-child { margin: -18px 0 22px; }
@media (max-width: 600px) { .home > .ticker:first-child { margin: -10px -16px 16px; } }

/* ---------- 所有大图四角圆角 ---------- */
/* 详情/弹窗/订单/结算大图：直接在图片上裁圆角，不依赖外层容器 */
.big-art { border-radius: 12px; clip-path: inset(0 round 12px); }
.detail-grid > div:first-child { overflow: visible; border-radius: 0; }
/* 作品卡片：图片四周留白、四角圆角（参考 Documents/CUI 卡片） */
.art-card .art-top { margin: 10px 10px 0; border-radius: 10px; overflow: hidden; isolation: isolate; }
.art-card .art-top .hold-badge { top: 9px; left: 9px; }
@media (max-width: 600px) { .art-card .art-top { margin: 7px 7px 0; border-radius: 8px; } }
/* 缩略走势：固定 24H，右下角标注 */
.spark-wrap { position: relative; display: inline-flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.spark-wrap small { font-size: 9px; line-height: 1; color: #8f8171; letter-spacing: .5px; }
/* 卡片图片与边框间距收窄 */
.art-card .art-top { margin: 5px 5px 0; border-radius: 8px; }
@media (max-width: 600px) { .art-card .art-top { margin: 4px 4px 0; border-radius: 7px; } }

/* ---------- 最新成交：「实时更新」原地展开提示 + 新行平滑插入 ---------- */
.home-head .live { display: inline-flex; align-items: center; gap: 8px; padding: 5px 4px 5px 0; border: 1px solid transparent; border-radius: 999px; white-space: nowrap; transition: padding .4s cubic-bezier(.16, 1, .3, 1), background .4s, border-color .4s; }
.live-label, .live-bubble { display: inline-block; overflow: hidden; vertical-align: middle; transition: max-width .5s cubic-bezier(.16, 1, .3, 1), opacity .35s; }
.live-label { max-width: 6em; }
.live-bubble { max-width: 0; opacity: 0; }
.live-bubble b { color: #ffa043; margin-right: 6px; }
.home-head .live.has-new { padding: 5px 13px 5px 11px; border-color: #ff8d2466; background: linear-gradient(110deg, #3d220a, #1d140b); box-shadow: 0 6px 22px #ff6a0026; }
.live.has-new .live-label { max-width: 0; opacity: 0; }
.live.has-new .live-bubble { max-width: 420px; opacity: 1; }
.live.has-new i { background: var(--orange); box-shadow: 0 0 0 4px #ff8d2433; }

.tt-list { --tt-h: 68px; height: calc(var(--tt-h) * 8); overflow: hidden; }
.tt-list .tt-row { height: var(--tt-h); transition: margin-top .7s cubic-bezier(.22, .8, .3, 1), opacity .6s ease, background 1.2s ease; }
.tt-list .tt-row.entering { margin-top: calc(-1 * var(--tt-h)); opacity: 0; transition: none; }
.tt-list .tt-row.leaving { opacity: 0; }
.tt-row.fresh { background: linear-gradient(90deg, #ff7a0026, #ff7a0008 60%, transparent); }
.tt-row.fresh .tt-price { color: #ffa043; }
.new-tag { margin-left: 8px; padding: 2px 6px; border-radius: 4px; background: #ff8d24; color: #1b0f04; font-size: 9px; font-style: normal; font-weight: 800; letter-spacing: .5px; vertical-align: middle; animation: nowPulse 1.6s infinite; }
@media (max-width: 760px) {
  .tt-list { --tt-h: 60px; }
  .live-bubble .lb-name { display: none; }
  .home-head .live.has-new { padding: 4px 10px 4px 9px; font-size: 12px; }
}

/* 最新成交：固定 8 条，新成交顶部插入，末条淡出 */
.tt-list { position: relative; }
.tt-list .tt-row:last-child { border-bottom: 0; }
.tt-row { overflow: hidden; }

/* ---------- 宽屏自适应：内容随屏幕放宽，不再固定 1240px 居中 ---------- */
:root { --page-max: 2240px; --gutter: clamp(16px, 3.2vw, 64px); }
.desktop-header, .page, .footer, .storage-note { max-width: var(--page-max); padding-left: var(--gutter); padding-right: var(--gutter); box-sizing: border-box; }
.page-home { max-width: var(--page-max); }
.desktop-header { width: 100%; }
@media (min-width: 1500px) {
  .art-grid { grid-template-columns: repeat(5, 1fr); }
  .detail-market-grid { grid-template-columns: minmax(0, 1fr) 420px; }
  .big-art { max-height: 720px; }
  .home-hero-copy h1 { font-size: clamp(56px, 3.6vw, 76px); }
  .hot-marquee .art-card { flex-basis: 300px; }
}
@media (min-width: 1900px) {
  .art-grid { grid-template-columns: repeat(6, 1fr); }
  .hot-marquee .art-card { flex-basis: 320px; }
  body { font-size: 15px; }
}
@media (max-width: 600px) { .page { padding-left: 16px; padding-right: 16px; } }
@media (min-width: 2200px) { .art-grid { grid-template-columns: repeat(7, 1fr); } .hot-marquee .art-card { flex-basis: 340px; } }
/* 首屏主图原图 592px，宽屏下限制放大倍数以保持清晰 */
.home-hero-art { max-width: 820px; justify-self: end; width: 100%; }
@media (max-width: 760px) {
  .home-head:has(#tt-live) { flex-wrap: nowrap; }
  .home-head:has(#tt-live) h2 span { display: none; }
}
/* 卡片图片铺满卡片顶部与两侧，去掉四周黑边，四角保持圆角 */
.art-card .art-top { margin: 0; border-radius: 9px; }
.art-card .art-top .hold-badge { top: 11px; left: 11px; }
@media (max-width: 600px) { .art-card .art-top { margin: 0; border-radius: 8px; } .art-card .art-top .hold-badge { top: 7px; left: 7px; } }

/* ---------- 大图不留黑边：统一正方形 + 铺满（覆盖设计稿固定高度 460/325px + contain 的写法） ---------- */
.big-art { width: 100% !important; height: auto !important; max-height: none !important; aspect-ratio: 1 / 1 !important; object-fit: cover !important; background: transparent !important; display: block; }
.art-frame { width: 100%; max-width: 720px; }
.split .panel .big-art, .order-art-name + a .big-art { max-width: 560px; margin: 0 auto; }

/* ---------- 头像（Multiavatar） ---------- */
.mavatar { display: inline-block; flex-shrink: 0; line-height: 0; border-radius: 50%; overflow: hidden; vertical-align: middle; }
.mavatar svg { width: 100%; height: 100%; display: block; }
.av-fallback { display: grid; place-items: center; width: 100%; height: 100%; background: #3a2512; color: #ffb45d; font-weight: 700; line-height: 1; }
.mavatar.avatar { width: 34px; height: 34px; border: 1px solid #b36a35; }
.mavatar.cr-av { width: 22px; height: 22px; }
.home-grid .mavatar.cr-av, .hot-marquee .mavatar.cr-av { width: 26px; height: 26px; }
.detail-info .mavatar.cr-av { width: 30px; height: 30px; }
.mavatar.buyer-av { width: 20px; height: 20px; margin-right: 8px; }
.tt-buyer { display: inline-flex; align-items: center; min-width: 0; }
.creator-identity .mavatar.avatar { width: 46px; height: 46px; }
@media (max-width: 600px) { .mavatar.cr-av { width: 18px; height: 18px; } }

.av-edit { position: relative; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; flex-shrink: 0; }
.mavatar.profile-av { width: 72px; height: 72px; border: 2px solid #b36a35; box-shadow: 0 0 18px #ff7a0033; }
.av-edit .av-edit-label { position: absolute; inset: auto 0 0; padding: 3px 0; border-radius: 0 0 36px 36px; background: #000a; color: #ffd5a3; font-size: 10px; text-align: center; opacity: 0; transition: opacity .2s; }
.av-edit:hover .av-edit-label, .av-edit:focus-visible .av-edit-label { opacity: 1; }
.av-edit:hover .profile-av { border-color: var(--orange); }
@media (hover: none) { .av-edit .av-edit-label { opacity: 1; } }

.avatar-modal { width: min(540px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; }
.av-preview { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; padding: 16px; border: 1px solid #3a2c1e; border-radius: 12px; background: #0000004d; }
.av-preview > div { display: grid; gap: 6px; }
.av-preview small { color: #9c8e7d; font-size: 12px; }
.mavatar.av-big { width: 96px; height: 96px; border: 2px solid var(--orange); box-shadow: 0 0 24px #ff7a0040; animation: modalIn .35s cubic-bezier(.16, 1, .3, 1); }
.av-head { margin: 4px 0 12px !important; }
.av-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 8px; }
.av-opt { padding: 3px; border: 2px solid transparent; border-radius: 50%; background: none; aspect-ratio: 1; transition: border-color .2s, transform .2s; }
.av-opt .mavatar { width: 100%; height: 100%; }
.av-opt:hover { transform: translateY(-2px) !important; border-color: #7a511f; box-shadow: none; }
.av-opt.on { border-color: var(--orange); box-shadow: 0 0 12px #ff7a0055; }
@media (max-width: 600px) { .av-grid { grid-template-columns: repeat(4, 1fr); } .mavatar.av-big { width: 76px; height: 76px; } }
.avatar-modal .modal-actions { justify-content: flex-end; }
/* 换一批：候选头像依次淡入，弹窗不重绘 */
.av-grid.shuffling .av-opt { animation: avIn .38s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--i) * 22ms); }
@keyframes avIn { from { opacity: 0; transform: scale(.85); } }