* {
    box-sizing: border-box;
}

:root {
    --primary: #2169ff;
    --primary-dark: #1554d8;
    --text: #1f2937;
    --muted: #6b7280;
    --line: #e5eaf3;
    --page-bg: #e8f0ff;
    --danger: #ff4d4f;
    --footer-bg: #0f1624;
}

html {
    min-width: 320px;
}

body {
    margin: 0;
    background: var(--page-bg);
    color: var(--text);
    font-family: Arial, "Microsoft YaHei", sans-serif;
}

body.modal-open {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input {
    font: inherit;
}

img {
    display: block;
    max-width: 100%;
}

main {
    padding-top: 100px;
}

.container {
    width: 100%;
    max-width: 2000px;
    margin: 0 auto;
    padding: 0 40px;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 2px 16px rgba(18, 38, 79, 0.06);
    backdrop-filter: blur(10px);
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    gap: 24px;
    padding-right: 32px;
}

.header-left {
    flex: 0 0 220px;
    display: flex;
    align-items: center;
}

.logo img {
    width: 160px;
    height: 40px;
    object-fit: contain;
}

.header-center {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    min-width: 0;
}

.nav-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    min-width: 0;
}

.nav-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 100px;
    border: 0;
    background: transparent;
    color: #4b5563;
    cursor: pointer;
    font-size: 18px;
    font-weight: 500;
    white-space: nowrap;
}

.nav-item:hover,
.nav-item.active {
    color: var(--primary);
}

.nav-item.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 26px;
    width: 28px;
    height: 3px;
    border-radius: 3px;
    background: var(--primary);
    transform: translateX(-50%);
}

.nav-trigger span {
    margin-left: 4px;
    font-size: 11px;
}

.nav-dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 78px;
    left: 50%;
    display: none;
    min-width: 132px;
    transform: translateX(-50%);
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
    overflow: hidden;
}

.dropdown-menu a {
    display: block;
    padding: 12px 18px;
    color: #4b5563;
    font-size: 14px;
    white-space: nowrap;
}

.dropdown-menu a:hover {
    color: var(--primary);
    background: #f5f8ff;
}

.nav-dropdown:hover .dropdown-menu {
    display: block;
}

.header-right,
.user-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.logout-form {
    margin: 0;
}

.message-notice {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 82px;
    height: 38px;
    border: 1px solid #dbe5f5;
    border-radius: 6px;
    padding: 0 11px;
    color: #334155;
    background: #fff;
    font-size: 14px;
    white-space: nowrap;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.message-notice:hover {
    border-color: #bfdbfe;
    background: #f3f7ff;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.1);
}

.message-notice-icon {
    position: relative;
    flex: 0 0 auto;
    display: block;
    width: 17px;
    height: 13px;
    border: 2px solid currentColor;
    border-radius: 3px;
}

.message-notice-icon::before,
.message-notice-icon::after {
    content: "";
    position: absolute;
    top: 1px;
    width: 10px;
    height: 2px;
    background: currentColor;
}

.message-notice-icon::before {
    left: 0;
    transform: rotate(34deg);
    transform-origin: left center;
}

.message-notice-icon::after {
    right: 0;
    transform: rotate(-34deg);
    transform-origin: right center;
}

.message-notice-text {
    line-height: 1;
}

.message-notice em {
    position: absolute;
    right: -7px;
    top: -7px;
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    border: 2px solid #fff;
    border-radius: 999px;
    padding: 0 5px;
    color: #fff;
    background: #ef4444;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 8px 16px rgba(239, 68, 68, 0.28);
}

.user-menu {
    position: relative;
}

.user-menu::after {
    content: "";
    position: absolute;
    right: 0;
    top: 100%;
    display: none;
    width: 100%;
    min-width: 174px;
    height: 12px;
}

.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 132px;
    height: 38px;
    border: 0;
    border-radius: 6px;
    padding: 0 12px;
    color: #334155;
    background: #f3f7ff;
    font-size: 14px;
    cursor: pointer;
}

.user-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-chip b {
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    transition: transform 0.2s ease;
}

.user-menu:hover .user-chip b,
.user-menu:focus-within .user-chip b {
    transform: rotate(180deg);
}

.user-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    z-index: 80;
    display: none;
    min-width: 174px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px;
    background: #fff;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.14);
}

.user-menu:hover::after,
.user-menu:focus-within::after,
.user-menu:hover .user-dropdown,
.user-menu:focus-within .user-dropdown {
    display: block;
}

.user-dropdown a,
.user-dropdown button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 36px;
    border: 0;
    border-radius: 6px;
    padding: 0 10px;
    color: #334155;
    background: transparent;
    font-size: 14px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.user-dropdown a:hover,
.user-dropdown button:hover {
    color: var(--primary);
    background: #f3f7ff;
}

.user-dropdown span {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    padding: 0 5px;
    color: #fff;
    background: #ef4444;
    font-size: 11px;
    font-weight: 800;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    height: 38px;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    white-space: nowrap;
}

.btn-login {
    border-color: #dbe5f5;
    color: var(--primary);
    background: #fff;
}

.btn-register,
.btn-primary {
    border-color: var(--primary);
    color: #fff;
    background: var(--primary);
}

.console-btn {
    min-width: 86px;
}

.btn-ghost {
    border-color: #dbe5f5;
    color: #334155;
    background: #fff;
}

.btn-register:hover,
.btn-primary:hover {
    background: linear-gradient(90deg, #1d4ed8, #0284c7);
}

.hero-section {
    position: relative;
    height: 521px;
    overflow: hidden;
    background: url("/static/bjtp.webp") no-repeat center center / cover;
}

.hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 120px;
    text-align: center;
}

.hero-title {
    margin: 0 0 24px;
    background: linear-gradient(90deg, #0f3d8c 0%, #2169ff 45%, #19b9ff 100%);
    background-clip: text;
    color: transparent;
    font-size: 56px;
    font-weight: 700;
    line-height: 1.15;
}

.hero-search {
    display: flex;
    width: min(680px, calc(100vw - 48px));
    height: 56px;
    border: 1px solid rgba(33, 105, 255, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 34px rgba(29, 78, 216, 0.16);
    overflow: hidden;
}

.hero-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    padding: 0 22px;
    color: #111827;
    outline: none;
    font-size: 16px;
}

.hero-search button {
    width: 128px;
    border: 0;
    color: #fff;
    background: var(--primary);
    cursor: pointer;
    font-size: 16px;
}

.home-banner-img {
    position: absolute;
    left: 50px;
    bottom: 25px;
    z-index: 1;
    width: auto;
    height: 420px;
    object-fit: contain;
    pointer-events: none;
}

.features-section {
    position: relative;
    z-index: 10;
    margin-top: -150px;
    padding-top: 60px;
    padding-bottom: 30px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    width: min(1450px, 100%);
    margin: 0 auto;
}

.feature-box {
    min-height: 150px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 12px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 30px rgba(33, 105, 255, 0.08);
    backdrop-filter: blur(8px);
}

.feature-box h3 {
    margin: 0 0 12px;
    color: #1e293b;
    font-size: 20px;
}

.feature-box p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.75;
}

.special-drama,
.fixed-price-container,
.auction-container {
    width: min(1400px, calc(100% - 40px));
    margin: 0 auto;
    border-radius: 16px;
    padding: 24px 20px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(29, 78, 216, 0.08);
}

.fixed-price-container,
.auction-container {
    margin-top: 40px;
}

.auction-container {
    margin-bottom: 40px;
}

.category-tabs-container {
    margin-bottom: 24px;
}

.tabs-wrapper,
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.section-header.compact {
    margin-bottom: 18px;
}

.primary-tabs {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.tabs-scroll-wrapper {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.tabs-scroll-wrapper::-webkit-scrollbar {
    display: none;
}

.tab-item {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    border-radius: 6px;
    padding: 0 18px;
    color: #475569;
    background: #f3f7ff;
    font-size: 15px;
    white-space: nowrap;
}

.tab-item:hover,
.tab-item.active {
    color: #fff;
    background: var(--primary);
}

.refresh-button-custom,
.refresh-button,
.section-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    border: 1px solid #c7d8ff;
    border-radius: 6px;
    padding: 0 18px;
    color: var(--primary);
    background: #fff;
    font-size: 15px;
    white-space: nowrap;
}

.section-more {
    border-color: transparent;
    background: transparent;
}

.section-title {
    margin: 0;
    color: #1e293b;
    font-size: 26px;
    font-weight: 700;
}

.section-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.waterfall-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
}

.drama-card,
.product-card,
.auction-card {
    overflow: hidden;
    border: 1px solid #edf2fa;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.drama-card:hover,
.product-card:hover,
.auction-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
}

.drama-cover,
.product-cover {
    position: relative;
    display: block;
    overflow: hidden;
    background: #edf2f7;
}

.drama-cover {
    aspect-ratio: 4 / 5;
}

.product-cover {
    aspect-ratio: 16 / 10;
}

.drama-cover img,
.product-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.28s ease;
}

.drama-card:hover img,
.product-card:hover img,
.auction-card:hover img {
    transform: scale(1.04);
}

.drama-price-tag,
.product-cover span,
.auction-tag,
.corner-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    height: 26px;
    border-radius: 5px;
    padding: 0 10px;
    color: #fff;
    background: rgba(33, 105, 255, 0.92);
    font-size: 13px;
}

.product-cover span,
.auction-tag {
    background: rgba(255, 122, 26, 0.94);
}

.drama-info,
.product-content,
.auction-info {
    padding: 14px;
}

.drama-title,
.product-title {
    display: -webkit-box;
    min-height: 44px;
    margin: 0 0 8px;
    overflow: hidden;
    color: #1f2937;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.drama-desc,
.product-desc,
.drama-info p,
.product-content p {
    display: -webkit-box;
    min-height: 42px;
    margin: 0;
    overflow: hidden;
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.drama-tags,
.tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.drama-tag,
.tag-row span {
    max-width: 100%;
    border-radius: 5px;
    padding: 4px 8px;
    color: #426083;
    background: #edf4ff;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.price-row,
.product-price,
.auction-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    color: #64748b;
    font-size: 14px;
}

.price-row strong,
.price-value,
.auction-price strong {
    color: var(--danger);
    font-size: 20px;
    font-weight: 700;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 22px;
}

.product-card {
    display: flex;
    flex-direction: column;
}

.content-header {
    min-height: 44px;
}

.buy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 38px;
    margin-top: 16px;
    border-radius: 6px;
    color: #fff;
    background: var(--primary);
    font-size: 15px;
}

.auction-grid {
    margin-top: 22px;
}

.auction-timer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    border-radius: 6px;
    padding: 8px 10px;
    color: #475569;
    background: #f6f8fd;
    font-size: 13px;
}

.timer-label,
.price-label {
    color: #64748b;
}

.time {
    color: var(--primary);
    font-weight: 700;
}

.traded-section,
.news-section,
.content-section {
    width: min(1400px, calc(100% - 40px));
    margin: 40px auto;
    border-radius: 16px;
    padding: 24px 20px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(29, 78, 216, 0.08);
}

.compact-grid .drama-cover {
    aspect-ratio: 16 / 10;
}

.news-header {
    margin-bottom: 22px;
    text-align: center;
}

.news-header h2 {
    margin: 0 0 10px;
    font-size: 26px;
}

.news-header p {
    margin: 0;
    color: #64748b;
}

.news-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.news-item {
    display: flex;
    gap: 14px;
    border: 1px solid #edf2fa;
    border-radius: 8px;
    padding: 22px;
    background: #fff;
}

.news-icon {
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #fff;
    background: var(--primary);
    font-weight: 700;
}

.news-item h3 {
    margin: 0 0 8px;
    font-size: 17px;
}

.news-item p {
    margin: 0;
    color: #64748b;
    line-height: 1.7;
}

.page-heading {
    padding: 54px 0;
    background: #0f1624;
    color: #fff;
    text-align: center;
}

.page-heading h1 {
    margin: 0 0 22px;
    font-size: 34px;
}

.page-search {
    margin: 0 auto;
    box-shadow: none;
}

.empty-state {
    display: grid;
    place-items: center;
    min-height: 220px;
    border: 1px dashed #cad4e4;
    border-radius: 8px;
    color: #64748b;
    background: #fff;
}

.empty-state.small {
    min-height: 130px;
    margin-top: 18px;
}

.market-heading {
    padding: 54px 0 36px;
    background: linear-gradient(180deg, #f7fbff 0%, #e8f0ff 100%);
    text-align: center;
}

.market-heading .container {
    max-width: 920px;
}

.market-heading h1 {
    margin: 0 0 12px;
    color: #1e293b;
    font-size: 34px;
}

.market-heading p {
    margin: 0;
    color: #64748b;
    font-size: 16px;
}

.market-search-section {
    width: min(1040px, calc(100% - 40px));
    margin: 0 auto 20px;
}

.market-search-box {
    display: flex;
    height: 54px;
    border: 1px solid rgba(33, 105, 255, 0.18);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(29, 78, 216, 0.08);
    overflow: hidden;
}

.market-search-box input {
    flex: 1;
    min-width: 0;
    border: 0;
    padding: 0 18px;
    outline: none;
    font-size: 15px;
}

.market-search-box button {
    width: 116px;
    border: 0;
    color: #fff;
    background: var(--primary);
    cursor: pointer;
    font-size: 15px;
}

.category-filter {
    width: min(1400px, calc(100% - 40px));
    margin: 0 auto 24px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(29, 78, 216, 0.06);
}

.filter-container {
    padding: 18px 20px;
}

.filter-options,
.sort-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.filter-option,
.sort-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    border-radius: 6px;
    padding: 0 14px;
    color: #475569;
    background: #f3f7ff;
    font-size: 14px;
}

.filter-option.active,
.sort-option.active,
.filter-option:hover,
.sort-option:hover {
    color: #fff;
    background: var(--primary);
}

.price-filter-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    color: #64748b;
    font-size: 14px;
}

.price-filter-form label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.price-filter-form input {
    width: 108px;
    height: 36px;
    border: 1px solid #dbe5f5;
    border-radius: 6px;
    padding: 0 10px;
    color: #334155;
    background: #fff;
}

.price-filter-form button,
.price-filter-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    border: 0;
    border-radius: 6px;
    padding: 0 14px;
    cursor: pointer;
    font-size: 14px;
}

.price-filter-form button {
    color: #fff;
    background: var(--primary);
}

.price-filter-clear {
    color: #64748b;
    background: #f3f7ff;
}

.filter-divider {
    height: 1px;
    margin: 16px 0;
    background: #eef3fb;
}

.market-container {
    width: min(1400px, calc(100% - 40px));
    margin: 0 auto 44px;
    border-radius: 16px;
    padding: 24px 20px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(29, 78, 216, 0.08);
}

.market-product-grid {
    margin-top: 0;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 28px;
    border-top: 1px solid #eef3fb;
    padding-top: 20px;
}

.pagination-info,
.pagination-container,
.page-numbers {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pagination-info {
    color: #64748b;
    font-size: 14px;
}

.page-btn,
.page-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 36px;
    border-radius: 6px;
    padding: 0 12px;
    color: #475569;
    background: #f3f7ff;
    font-size: 14px;
}

.page-number.active,
.page-btn:hover,
.page-number:hover {
    color: #fff;
    background: var(--primary);
}

.page-btn.disabled {
    color: #aab5c5;
    cursor: not-allowed;
    background: #f6f8fb;
}

.traded-grid-page {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}

.traded-card-page {
    overflow: hidden;
    border-radius: 12px;
    background: #0f172a;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
}

.traded-cover {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
}

.traded-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.28s ease;
}

.traded-card-page:hover img {
    transform: scale(1.04);
}

.traded-mark {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    border-radius: 5px;
    padding: 5px 10px;
    color: #fff;
    background: rgba(255, 77, 79, 0.94);
    font-size: 13px;
}

.traded-overlay {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 44px 14px 14px;
    color: #fff;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.88) 76%);
}

.traded-overlay h2 {
    display: -webkit-box;
    margin: 0 0 8px;
    overflow: hidden;
    font-size: 15px;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.traded-price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.traded-price span {
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
}

.traded-price strong {
    color: #ffdd66;
    font-size: 18px;
}

.action-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}

.demand-publish-btn {
    width: auto;
    min-width: 120px;
    margin-top: 0;
    padding: 0 18px;
}

.demand-list-page {
    display: grid;
    gap: 16px;
}

.demand-item-page,
.demand-detail-panel,
.merchant-card-page {
    border: 1px solid #edf2fa;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

.demand-item-page a {
    display: block;
    padding: 20px;
}

.demand-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.demand-author {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
}

.demand-author img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: #eef3fb;
}

.demand-author span {
    color: #334155;
    font-weight: 700;
}

.demand-author em {
    border-radius: 5px;
    padding: 3px 7px;
    color: var(--primary);
    background: #edf4ff;
    font-size: 12px;
    font-style: normal;
}

.demand-category-badge,
.status-tag {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    border-radius: 5px;
    padding: 5px 9px;
    color: var(--primary);
    background: #edf4ff;
    font-size: 13px;
}

.status-tag {
    color: #067647;
    background: #ecfdf3;
}

.demand-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.demand-title-row.detail {
    align-items: flex-start;
    margin-top: 20px;
}

.demand-title-row h2 {
    margin: 0;
    color: #1e293b;
    font-size: 20px;
    line-height: 1.4;
}

.demand-title-row.detail h2 {
    font-size: 28px;
}

.demand-item-page p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #64748b;
    line-height: 1.75;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.demand-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.demand-tag {
    border-radius: 5px;
    padding: 5px 8px;
    color: #426083;
    background: #edf4ff;
    font-size: 12px;
}

.demand-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
}

.demand-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    color: #64748b;
    font-size: 13px;
}

.demand-footer strong {
    color: var(--danger);
    font-size: 18px;
}

.demand-detail-container {
    width: min(980px, calc(100% - 40px));
    margin: 0 auto 44px;
}

.demand-detail-panel {
    padding: 28px;
}

.demand-description {
    margin: 22px 0;
    color: #334155;
    font-size: 16px;
    line-height: 1.9;
}

.demand-meta-list {
    margin-top: 24px;
    border-top: 1px solid #edf2fa;
    padding-top: 20px;
}

.merchant-grid-page {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.merchant-rank-section + .merchant-rank-section {
    margin-top: 42px;
}

.merchant-rank-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.merchant-rank-heading h2 {
    margin: 0 0 6px;
    color: #152238;
    font-size: 26px;
    font-weight: 700;
}

.merchant-rank-heading p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
}

.merchant-rank-heading > span {
    flex: 0 0 auto;
    color: #2563eb;
    font-size: 14px;
    font-weight: 600;
}

.merchant-card-page {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 18px;
    text-align: center;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.merchant-card-page:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
}

.merchant-rank-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    border-radius: 999px;
    padding: 4px 9px;
    background: #eef4ff;
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.merchant-avatar-page {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    border-radius: 10px;
    object-fit: cover;
    background: #eef3fb;
}

.merchant-body {
    width: 100%;
    min-width: 0;
}

.merchant-body h2 {
    margin: 0 0 8px;
    overflow: hidden;
    color: #1e293b;
    font-size: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.merchant-body p {
    display: -webkit-box;
    min-height: 42px;
    margin: 0;
    overflow: hidden;
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.merchant-stats-page {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
    color: #64748b;
    font-size: 13px;
}

.merchant-stat-strong {
    color: #ef4444;
    font-weight: 700;
}

.about-page {
    padding: 40px 0;
    background: #f6f8ff;
}

.about-content,
.process-content-page {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
    border-radius: 12px;
    padding: 40px;
    background: #fff;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
}

.about-header {
    margin-bottom: 46px;
    text-align: center;
}

.about-header h1 {
    margin: 0 0 14px;
    color: #2c3e50;
    font-size: 36px;
}

.about-header p {
    margin: 0;
    color: #64748b;
}

.about-section {
    margin-bottom: 38px;
}

.about-section:last-child {
    margin-bottom: 0;
}

.about-section h2 {
    position: relative;
    margin: 0 0 18px;
    padding-left: 14px;
    color: #2c3e50;
    font-size: 24px;
}

.about-section h2::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    width: 4px;
    height: 20px;
    border-radius: 2px;
    background: var(--primary);
}

.about-section p {
    margin: 0;
    color: #34495e;
    line-height: 1.85;
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.about-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.about-grid article,
.process-panel {
    border-radius: 12px;
    padding: 24px;
    background: #f8f9ff;
}

.about-grid h3 {
    margin: 0 0 10px;
    color: #2c3e50;
    font-size: 18px;
}

.contact-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    color: #34495e;
}

.process-content-page {
    display: grid;
    gap: 24px;
}

.process-panel {
    scroll-margin-top: 120px;
}

.process-panel header {
    margin-bottom: 22px;
}

.process-panel h1 {
    margin: 0 0 8px;
    color: #1e293b;
    font-size: 26px;
}

.process-panel header p {
    margin: 0;
    color: #64748b;
}

.process-steps-page {
    display: grid;
    gap: 16px;
}

.process-steps-page article {
    display: flex;
    gap: 16px;
    border-radius: 10px;
    padding: 18px;
    background: #fff;
}

.process-steps-page span {
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #fff;
    background: var(--primary);
    font-weight: 700;
}

.process-steps-page h2 {
    margin: 0 0 8px;
    color: #1e293b;
    font-size: 18px;
}

.process-steps-page p {
    margin: 0;
    color: #64748b;
    line-height: 1.7;
}

.work-detail {
    padding: 48px 0;
}

.legacy-work-page {
    padding: 30px 0 50px;
    background: #f5f7fb;
}

.legacy-work-shell {
    width: min(1400px, calc(100% - 40px));
    margin: 0 auto;
    border-radius: 12px;
    padding: 22px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(32, 54, 94, 0.07);
}

.legacy-top-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

.legacy-mini-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    height: 36px;
    border: 1px solid #dbe5f5;
    border-radius: 6px;
    padding: 0 14px;
    color: #3b4b66;
    background: #fff;
    font-size: 14px;
}

.legacy-mini-btn:hover {
    color: var(--primary);
    border-color: #bcd0ff;
    background: #f5f8ff;
}

.legacy-work-detail {
    display: grid;
    grid-template-columns: minmax(380px, 0.9fr) minmax(0, 1.1fr);
    gap: 28px;
    align-items: start;
}

.legacy-left-section,
.legacy-right-section {
    min-width: 0;
}

.legacy-cover-container {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: #f0f3f8;
}

.legacy-cover {
    width: 100%;
    max-height: 690px;
    object-fit: contain;
}

.legacy-cert-badge {
    position: absolute;
    right: 18px;
    bottom: 18px;
    display: grid;
    place-items: center;
    width: 104px;
    height: 104px;
    border: 4px solid rgba(255, 255, 255, 0.78);
    border-radius: 50%;
    color: #fff;
    background: rgba(33, 105, 255, 0.86);
    box-shadow: 0 10px 26px rgba(33, 105, 255, 0.28);
    text-align: center;
}

.legacy-cert-badge strong {
    display: block;
    font-size: 18px;
}

.legacy-cert-badge span {
    display: block;
    margin-top: 4px;
    color: #ffdf72;
    font-size: 12px;
    letter-spacing: 1px;
}

.legacy-basic-info {
    margin-top: 18px;
    border: 1px solid #edf2fa;
    border-radius: 10px;
    padding: 18px;
    background: #fff;
}

.legacy-title-row h1 {
    margin: 0 0 16px;
    color: #1e293b;
    font-size: 20px;
    line-height: 1.45;
}

.legacy-info-line {
    display: flex;
    gap: 8px;
    margin-top: 9px;
    font-size: 13px;
}

.legacy-info-line span {
    color: #333;
}

.legacy-info-line em {
    color: #7b8798;
    font-style: normal;
}

.legacy-tags {
    margin: 14px 0 0;
}

.legacy-desc {
    margin-top: 18px;
}

.legacy-desc span {
    color: #596579;
    font-size: 15px;
    font-weight: 700;
}

.legacy-desc p {
    margin: 8px 0 0;
    color: #4b5563;
    font-size: 14px;
    line-height: 1.7;
    white-space: pre-wrap;
}

.legacy-sample-section {
    border: 1px solid #edf2fa;
    border-radius: 10px;
    padding: 18px;
    background: #fff;
}

.legacy-sample-section + .legacy-sample-section,
.legacy-bottom-wrapper {
    margin-top: 18px;
}

.legacy-section-title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}

.legacy-section-title strong {
    color: #1e293b;
    font-size: 18px;
}

.legacy-section-title span {
    color: #8a94a6;
    font-size: 12px;
}

.legacy-image-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.legacy-image-item {
    display: block;
    overflow: hidden;
    border-radius: 8px;
    background: #f0f3f8;
}

.legacy-image-item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 0.22s ease;
}

.legacy-image-item:hover img {
    transform: scale(1.04);
}

.legacy-video-grid {
    display: grid;
    gap: 12px;
}

.legacy-video-grid video {
    width: 100%;
    max-height: 360px;
    border-radius: 8px;
    background: #0f172a;
}

.legacy-text-preview {
    max-height: 220px;
    overflow: auto;
    border-radius: 8px;
    padding: 14px;
    color: #475569;
    background: #f7faff;
    line-height: 1.8;
    white-space: pre-wrap;
}

.legacy-bottom-wrapper {
    border: 1px solid #edf2fa;
    border-radius: 10px;
    padding: 18px;
    background: #fff;
}

.legacy-price-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #edf1f7;
    padding: 14px 0;
}

.legacy-price-section:first-child {
    padding-top: 0;
}

.legacy-price-section span {
    color: #475569;
    font-size: 15px;
}

.legacy-price-section em {
    display: inline-flex;
    margin-left: 6px;
    border-radius: 4px;
    padding: 3px 6px;
    color: #fff;
    background: #ff4d4f;
    font-size: 12px;
    font-style: normal;
}

.legacy-price-section strong {
    color: var(--danger);
    font-size: 30px;
}

.legacy-price-section.hot strong {
    font-size: 38px;
}

.legacy-old-price {
    color: #9aa4b2 !important;
    text-decoration: line-through;
}

.legacy-buttons-section {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.legacy-buy-form {
    margin: 0;
}

.legacy-buy-btn,
.legacy-contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 46px;
    border: 0;
    border-radius: 6px;
    color: #fff;
    background: var(--primary);
    cursor: pointer;
    font-size: 16px;
}

.legacy-contact-btn {
    color: var(--primary);
    border: 1px solid #c7d8ff;
    background: #fff;
}

.legacy-rules-card {
    margin-top: 26px;
    border: 1px solid #edf2fa;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.legacy-rules-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #edf2fa;
    background: #f7faff;
}

.legacy-rules-tabs span {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 22px;
    color: #64748b;
    font-weight: 700;
}

.legacy-rules-tabs span.active {
    color: var(--primary);
    background: #fff;
}

.legacy-rules-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    padding: 24px;
}

.legacy-rules-content h2 {
    margin: 0 0 14px;
    color: #1e293b;
    font-size: 22px;
}

.legacy-rules-content h3 {
    margin: 18px 0 8px;
    color: #2c3a55;
    font-size: 16px;
}

.legacy-rules-content p,
.legacy-rules-content li {
    color: #4b5563;
    line-height: 1.8;
}

.legacy-hash {
    word-break: break-all;
}

.work-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
    gap: 32px;
    align-items: start;
}

.auction-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr);
    gap: 32px;
    align-items: start;
}

.work-media,
.work-info-panel,
.auth-panel,
.placeholder-panel {
    border: 1px solid #edf2fa;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(32, 54, 94, 0.06);
}

.work-media {
    overflow: hidden;
}

.work-media img {
    width: 100%;
    max-height: 720px;
    object-fit: contain;
    background: #f0f3f8;
}

.work-info-panel {
    padding: 28px;
}

.work-category {
    display: inline-flex;
    margin-bottom: 14px;
    border-radius: 5px;
    padding: 7px 10px;
    color: var(--primary);
    background: #edf4ff;
    font-size: 13px;
}

.work-info-panel h1 {
    margin: 0 0 16px;
    font-size: 30px;
    line-height: 1.35;
}

.work-info-panel p {
    color: #64748b;
    line-height: 1.8;
}

.detail-price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 26px 0 22px;
    border-top: 1px solid #edf1f7;
    border-bottom: 1px solid #edf1f7;
    padding: 20px 0;
    color: #64748b;
}

.detail-price strong {
    color: var(--danger);
    font-size: 32px;
}

.detail-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

.inline-action-form {
    margin: 0;
}

.detail-actions .buy-btn {
    width: auto;
    min-width: 120px;
    margin-top: 0;
    border: 0;
    cursor: pointer;
}

.detail-error {
    margin: -8px 0 22px;
}

.meta-list {
    display: grid;
    gap: 14px;
    margin: 0;
}

.meta-list div {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    color: #64748b;
}

.meta-list dt {
    color: #2c3a55;
    font-weight: 700;
}

.meta-list dd {
    margin: 0;
    text-align: right;
}

.text-link {
    color: var(--primary);
}

.muted-text {
    color: #64748b;
    font-size: 14px;
}

.detail-section-container {
    margin-top: 28px;
}

.detail-section-card {
    border: 1px solid #edf2fa;
    border-radius: 8px;
    padding: 24px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(32, 54, 94, 0.06);
}

.auction-price-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 24px 0;
}

.auction-price-panel div {
    border-radius: 8px;
    padding: 18px;
    background: #f6f8fd;
}

.auction-price-panel span {
    display: block;
    margin-bottom: 8px;
    color: #64748b;
    font-size: 14px;
}

.auction-price-panel strong {
    color: var(--danger);
    font-size: 30px;
}

.auction-price-panel .time {
    color: var(--primary);
    font-size: 22px;
}

.auction-meta-list {
    margin-bottom: 24px;
    border-top: 1px solid #edf1f7;
    padding-top: 18px;
}

.bid-history-list {
    display: grid;
    gap: 10px;
}

.bid-history-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 18px;
    align-items: center;
    border-radius: 8px;
    padding: 13px 14px;
    color: #64748b;
    background: #f7faff;
    font-size: 14px;
}

.bid-history-item strong {
    color: var(--danger);
    font-size: 17px;
}

.merchant-hero {
    padding: 48px 0 32px;
    background: linear-gradient(180deg, #f7fbff 0%, #e8f0ff 100%);
}

.merchant-hero-inner {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 18px;
    max-width: 980px;
    text-align: center;
}

.merchant-avatar-wrap {
    display: grid;
    place-items: center;
}

.merchant-hero-avatar {
    width: 128px;
    height: 128px;
    border: 4px solid #fff;
    border-radius: 50%;
    object-fit: cover;
    background: #eef3fb;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12);
}

.merchant-hero-main h1 {
    margin: 0 0 12px;
    color: #1e293b;
    font-size: 36px;
}

.merchant-hero-main p {
    max-width: 860px;
    margin: 0;
    color: #64748b;
    line-height: 1.8;
}

.merchant-hero-stats {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;
    color: #475569;
    font-size: 14px;
}

.merchant-hero-stats span {
    border-radius: 999px;
    padding: 7px 12px;
    background: rgba(255, 255, 255, 0.76);
}

.merchant-hero-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}

.merchant-contact-box {
    display: grid;
    justify-items: center;
    gap: 8px;
    min-width: min(420px, 100%);
    border: 1px solid #dce8ff;
    border-radius: 8px;
    padding: 16px;
    color: #334155;
    background: rgba(255, 255, 255, 0.78);
    font-size: 14px;
}

.merchant-contact-box strong {
    color: #1e293b;
}

.merchant-works-section {
    scroll-margin-top: 120px;
}

.merchant-work-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 22px;
    border-bottom: 1px solid #edf2fa;
    padding-bottom: 14px;
}

.merchant-work-tabs span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border-radius: 6px;
    padding: 0 16px;
    color: #475569;
    background: #f3f7ff;
    font-size: 14px;
}

.merchant-work-tabs span.active {
    color: #fff;
    background: var(--primary);
}

.merchant-sold-header {
    margin-top: 34px;
    border-top: 1px solid #edf2fa;
    padding-top: 22px;
}

.merchant-legacy-page {
    padding: 10px 0 48px;
    background: #f6f8ff;
}

.merchant-legacy-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 10px 0;
}

.merchant-info-legacy {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin-top: 80px;
    margin-bottom: 20px;
    border-radius: 16px;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.merchant-avatar-legacy {
    width: 120px;
    height: 120px;
    border: 4px solid #fff;
    border-radius: 60px;
    object-fit: cover;
    background: #eef3fb;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

.merchant-avatar-legacy:hover {
    transform: scale(1.05);
}

.merchant-details-legacy {
    flex: 1;
    min-width: 200px;
    margin-left: 30px;
}

.merchant-header-legacy {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 15px;
}

.merchant-name-legacy {
    min-width: 200px;
    margin: 0;
    overflow: hidden;
    color: #333;
    font-size: 24px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.merchant-actions-legacy {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.merchant-follow-form {
    margin: 0;
}

.action-btn-legacy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: auto;
    height: 32px;
    border: 0;
    border-radius: 20px;
    padding: 8px 16px;
    color: #333;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    font-size: 13px;
    transition: all 0.3s ease;
}

.action-btn-legacy:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.follow-btn-legacy {
    min-width: 80px;
    color: #fff;
    background: linear-gradient(135deg, #6c7cff, #4b5fe4);
    font-weight: 500;
    cursor: pointer;
}

.follow-btn-legacy.followed {
    color: #64748b;
    background: #f2f3f5;
    box-shadow: none;
}

.share-btn-legacy,
.qrcode-btn-legacy {
    min-width: 100px;
    border: 1px solid #e5e6eb;
    color: #333;
    background: #fff;
}

.share-btn-legacy:hover,
.qrcode-btn-legacy:hover {
    border-color: #6c7cff;
    color: #6c7cff;
    background: rgba(108, 124, 255, 0.04);
}

.merchant-flash {
    width: min(1300px, calc(100% - 32px));
    margin: 12px auto -54px;
}

.merchant-contact-modal[hidden] {
    display: none;
}

.merchant-contact-modal {
    position: fixed;
    z-index: 80;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
}

.merchant-contact-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.52);
}

.merchant-contact-dialog {
    position: relative;
    width: min(420px, 100%);
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.28);
}

.merchant-contact-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #edf2fa;
    padding: 16px 18px;
}

.merchant-contact-header h2 {
    margin: 0;
    color: #152238;
    font-size: 18px;
}

.merchant-contact-close {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    color: #64748b;
    background: #f1f5f9;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.merchant-contact-body {
    display: grid;
    gap: 14px;
    justify-items: center;
    padding: 22px;
    color: #475569;
    text-align: center;
}

.merchant-contact-qrcode {
    width: 220px;
    max-width: 100%;
    aspect-ratio: 1;
    border: 1px solid #edf2fa;
    border-radius: 10px;
    object-fit: contain;
    background: #f8fafc;
}

.merchant-contact-tip {
    margin: 0;
    color: #64748b;
    font-size: 14px;
}

.merchant-contact-empty {
    width: 220px;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    padding: 36px 16px;
    color: #94a3b8;
    background: #f8fafc;
    font-size: 14px;
}

.merchant-contact-list {
    display: grid;
    gap: 8px;
    width: 100%;
    font-size: 15px;
}

body.modal-open {
    overflow: hidden;
}

.merchant-stats-legacy {
    position: absolute;
    top: 30px;
    right: 30px;
    display: flex;
    gap: 20px;
    margin: 15px 0;
}

.stat-item-legacy {
    display: flex;
    align-items: center;
    border-radius: 24px;
    padding: 10px 20px;
    background-color: rgba(108, 124, 255, 0.08);
    box-shadow: 0 2px 8px rgba(108, 124, 255, 0.1);
    transition: all 0.3s ease;
}

.stat-item-legacy:hover {
    transform: translateY(-2px);
    background-color: rgba(108, 124, 255, 0.12);
    box-shadow: 0 4px 12px rgba(108, 124, 255, 0.15);
}

.stat-value-legacy {
    margin-right: 6px;
    color: #333;
    font-size: 18px;
    font-weight: 600;
}

.stat-label-legacy {
    color: #666;
    font-size: 14px;
}

.merchant-bio-legacy {
    display: -webkit-box;
    margin: 20px 0 0;
    overflow: hidden;
    color: #666;
    font-size: 16px;
    line-height: 1.6;
    transition: all 0.3s ease;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.bio-expand-legacy {
    display: inline-block;
    margin-top: 8px;
    border-radius: 16px;
    padding: 4px 12px;
    color: #6c7cff;
    background: rgba(108, 124, 255, 0.08);
    cursor: pointer;
    font-size: 14px;
}

.merchant-contact-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    color: #666;
    font-size: 13px;
}

.merchant-contact-inline span {
    border-radius: 16px;
    padding: 6px 12px;
    background: #f5f7fa;
}

.works-section-legacy {
    margin: 20px;
    border-radius: 12px;
    padding: 20px;
    background: #fff;
}

.section-header-legacy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
    padding: 0 20px;
}

.work-tabs-legacy {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tab-item-legacy {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    border-radius: 16px;
    padding: 6px 12px;
    color: #666;
    background-color: #f5f7fa;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
}

.tab-item-legacy.active {
    color: #fff;
    background-color: #6c7cff;
}

.tab-count-legacy {
    display: inline-flex;
    align-items: center;
    color: #999;
    font-size: 14px;
}

.display-options-legacy {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.display-mode-toggle-legacy {
    display: flex;
    gap: 4px;
    border-radius: 20px;
    padding: 4px;
    background: #f5f7fa;
}

.mode-btn-legacy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    padding: 6px 12px;
    color: #666;
    cursor: pointer;
    font-size: 14px;
}

.mode-btn-legacy.active {
    color: #fff;
    background-color: #6c7cff;
}

.filter-options-legacy {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 0;
}

.filter-select-legacy,
.filter-select-wrap-legacy {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    min-width: 100px;
    border: 1px solid #e5e6eb;
    border-radius: 20px;
    padding: 6px 12px;
    color: #333;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
}

.filter-select-wrap-legacy {
    position: relative;
    padding: 0;
}

.filter-select-wrap-legacy select {
    width: 100%;
    min-width: 112px;
    height: 34px;
    border: 0;
    border-radius: 20px;
    padding: 0 28px 0 12px;
    color: #333;
    background: transparent;
    cursor: pointer;
    outline: none;
    appearance: none;
    font-size: 14px;
}

.filter-select-legacy::after,
.filter-select-wrap-legacy::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 6px;
    border-top: 4px solid #666;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    transform: translateY(-50%);
    pointer-events: none;
}

.filter-select-legacy:hover,
.filter-select-wrap-legacy:hover {
    border-color: #6c7cff;
    color: #6c7cff;
}

.works-container-legacy.paged {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    align-items: start;
    overflow-y: auto;
    padding: 0;
    background: #fff;
}

.work-card-legacy {
    overflow: hidden;
    border: 1px solid #edf2fa;
    border-radius: 12px;
    color: inherit;
    background: #fff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.work-card-legacy:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.1);
}

.work-cover-wrapper-legacy {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: #f0f3f8;
}

.work-cover-legacy {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.28s ease;
}

.work-card-legacy:hover .work-cover-legacy {
    transform: scale(1.04);
}

.work-tags-legacy {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    gap: 8px;
}

.status-tag-legacy,
.for-sale-tag-legacy,
.sold-tag-legacy {
    display: inline-flex;
    align-items: center;
    border-radius: 6px;
    padding: 5px 9px;
    color: #fff;
    background: #ff6b6b;
    font-size: 12px;
}

.for-sale-tag-legacy,
.sold-tag-legacy {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #6c7cff;
}

.sold-tag-legacy {
    background: #ff4d4f;
}

.work-info-legacy {
    padding: 14px;
}

.work-info-legacy h2 {
    display: -webkit-box;
    min-height: 44px;
    margin: 0 0 10px;
    overflow: hidden;
    color: #333;
    font-size: 16px;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.work-meta-legacy {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.work-meta-legacy strong {
    color: #ff4d4f;
    font-size: 18px;
}

.no-data-legacy {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 0;
    color: #999;
    font-size: 14px;
}

.no-data-icon-legacy {
    position: relative;
    display: grid;
    place-items: center;
    width: 120px;
    height: 120px;
    margin-bottom: 15px;
    border-radius: 50%;
    background: #f3f7ff;
}

.no-data-icon-legacy::before {
    content: "";
    width: 52px;
    height: 38px;
    border: 2px solid #c9d7ef;
    border-radius: 8px;
    background: linear-gradient(135deg, transparent 56%, #dbe7ff 56%);
}

.no-data-icon-legacy::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    margin: -36px 0 0 22px;
    border-radius: 50%;
    background: #c9d7ef;
}

.no-data-legacy.compact {
    padding: 28px 0 10px;
}

.sold-block-legacy {
    margin-top: 26px;
    border-top: 1px solid #f0f0f0;
    padding-top: 20px;
}

.work-sample-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.work-sample-grid img {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    object-fit: cover;
    background: #eef3fb;
}

.work-video {
    width: 100%;
    max-height: 560px;
    margin-top: 18px;
    border-radius: 8px;
    background: #0f172a;
}

.work-text-content {
    margin-top: 18px;
    border-radius: 8px;
    padding: 18px;
    color: #334155;
    background: #f7faff;
    line-height: 1.9;
    white-space: pre-wrap;
}

.order-page {
    padding: 48px 0;
}

.order-container {
    width: min(980px, 100%);
}

.order-container.narrow {
    width: min(680px, 100%);
}

.order-panel {
    border: 1px solid #edf2fa;
    border-radius: 8px;
    padding: 28px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(32, 54, 94, 0.06);
}

.order-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
}

.order-header h1,
.pay-panel h1,
.success-panel h1 {
    margin: 0;
    color: #1e293b;
    font-size: 30px;
}

.order-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    border-radius: 5px;
    padding: 0 12px;
    color: #067647;
    background: #ecfdf3;
    font-size: 14px;
}

.order-status.status-pending {
    color: #b54708;
    background: #fffaeb;
}

.order-status.status-cancelled,
.order-status.status-closed {
    color: #475467;
    background: #f2f4f7;
}

.danger-action {
    color: #b42318;
    border-color: #fecdca;
    background: #fff;
}

.order-work {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    border-radius: 8px;
    padding: 16px;
    background: #f7faff;
}

.order-work img {
    width: 132px;
    height: 96px;
    border-radius: 8px;
    object-fit: cover;
    background: #eef3fb;
}

.order-work h2 {
    margin: 0 0 8px;
    color: #1e293b;
    font-size: 20px;
    line-height: 1.4;
}

.order-work p {
    margin: 0 0 10px;
    color: #64748b;
}

.order-work strong {
    color: var(--danger);
    font-size: 24px;
}

.order-meta {
    margin-top: 24px;
    border-top: 1px solid #edf1f7;
    padding-top: 20px;
}

.order-actions {
    margin-top: 24px;
    margin-bottom: 0;
}

.order-detail-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.order-detail-actions .inline-action-form {
    display: flex;
}

.order-action-button {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 68px;
    align-items: center;
    gap: 12px;
    overflow: hidden;
    border: 1px solid #dce4ef;
    border-radius: 14px;
    padding: 12px 15px;
    color: #344054;
    background: linear-gradient(145deg, #fff, #f8fafc);
    box-shadow: 0 8px 22px rgb(15 23 42 / 6%);
    text-align: left;
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

button.order-action-button {
    width: 100%;
    font: inherit;
}

.order-action-button:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--primary) 34%, #dce4ef);
    box-shadow: 0 14px 30px rgb(15 23 42 / 11%);
}

.order-action-button > span:nth-child(2) {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.order-action-button strong {
    font-size: 14px;
    line-height: 1.1;
}

.order-action-button small {
    overflow: hidden;
    color: #8290a5;
    font-size: 11px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-action-icon {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border-radius: 11px;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, #fff);
}

.order-action-icon svg,
.order-action-arrow {
    width: 19px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.order-action-arrow {
    width: 17px;
    margin-left: auto;
    opacity: .7;
}

.order-action-button.primary {
    border-color: color-mix(in srgb, var(--primary) 58%, transparent);
    color: #fff;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 82%, #071426), var(--primary));
    box-shadow: 0 14px 30px color-mix(in srgb, var(--primary) 23%, transparent);
}

.order-action-button.primary::after {
    position: absolute;
    top: -55px;
    right: -30px;
    width: 125px;
    height: 125px;
    border: 1px solid rgb(255 255 255 / 15%);
    border-radius: 50%;
    background: rgb(255 255 255 / 7%);
    content: "";
}

.order-action-button.primary .order-action-icon {
    color: #fff;
    background: rgb(255 255 255 / 14%);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%);
}

.order-action-button.primary small {
    color: rgb(255 255 255 / 70%);
}

.order-action-button.danger .order-action-icon {
    color: #b42318;
    background: #fff1f0;
}

.order-action-button.danger:hover {
    border-color: #f4b8b3;
    background: #fffafa;
}

.order-action-button.delete-order {
    color: #8f1d14;
    background: linear-gradient(145deg, #fffafa, #fff2f0);
}

.order-success-actions {
    align-items: stretch;
}

.order-success-actions .source-download-action {
    min-width: 330px;
}

.order-success-actions > .btn {
    min-height: 68px;
    border-radius: 14px;
}

.pay-panel p,
.success-panel p {
    margin: 12px 0 22px;
    color: #64748b;
    line-height: 1.8;
}

.pay-amount-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-radius: 8px;
    padding: 20px;
    color: #64748b;
    background: #f7faff;
}

.pay-amount-box strong {
    color: var(--danger);
    font-size: 34px;
}

.pay-submit-form {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.pay-submit-form .buy-btn {
    width: auto;
    min-width: 150px;
    min-height: 48px;
    margin-top: 0;
    border: 0;
    border-radius: 14px;
    padding: 0 26px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 82%, #071426), var(--primary));
    box-shadow: 0 12px 26px color-mix(in srgb, var(--primary) 24%, transparent);
    font-weight: 800;
    letter-spacing: .02em;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.pay-submit-form .buy-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px color-mix(in srgb, var(--primary) 30%, transparent);
    filter: brightness(1.06);
}

.pay-submit-form .buy-btn:disabled {
    transform: none;
    opacity: .68;
    box-shadow: none;
    cursor: wait;
}

.order-payment-options { display: grid; gap: 12px; margin: 24px 0; }
.order-buyout-summary { display: grid; gap: 6px; margin: 18px 0; padding: 15px 17px; border: 1px solid #e2d5b9; border-radius: 10px; color: #34473f; background: #fbf7ed; }
.order-buyout-summary strong { color: #755b2f; font-size: 15px; }
.order-buyout-summary span { font-size: 13px; line-height: 1.7; }
.order-buyout-summary small { color: #7b8581; font-size: 11px; overflow-wrap: anywhere; }
.order-agreement-check { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 14px; color: #586661; font-size: 12px; line-height: 1.7; }
.order-agreement-check input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--primary); }
.order-agreement-check a { color: var(--primary); font-weight: 700; }
.order-payment-option { display: flex; align-items: center; gap: 14px; padding: 17px 18px; border: 1px solid #dce5eb; border-radius: 14px; background: #fff; cursor: pointer; transition: .2s ease; }
.order-payment-option:has(input:checked) { border-color: #2d8d78; background: #f0faf7; box-shadow: inset 0 0 0 1px #2d8d78; }
.order-payment-option input { accent-color: #2d8d78; }.order-payment-option span { display: grid; gap: 3px; flex: 1; }.order-payment-option b { color: #18332d; font-size: 16px; }.order-payment-option em { color: #7b8985; font-size: 13px; font-style: normal; }.order-payment-option i { color: #2d8d78; font-size: 12px; font-style: normal; font-weight: 700; }
.order-payment-option.is-insufficient { opacity: .55; cursor: not-allowed; }
.order-payment-qrcode { display: grid; justify-items: center; gap: 8px; margin: 20px 0; padding: 20px; border-radius: 16px; background: #f3f8f6; }.order-payment-qrcode[hidden] { display: none; }.order-payment-qrcode img { width: 240px; height: 240px; background: #fff; }.order-payment-qrcode strong { color: #183c33; }.order-payment-qrcode span { color: #7c8985; font-size: 12px; }
.order-payment-tip { margin: 0 0 18px; color: #74827e; font-size: 13px; }.order-payment-tip.error { color: #c74646; }

.success-icon {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin-bottom: 18px;
    border-radius: 50%;
    color: #fff;
    background: #12b76a;
    font-size: 34px;
    font-weight: 700;
}

.placeholder-page {
    min-height: 520px;
    display: grid;
    place-items: center;
    padding: 60px 16px;
}

.placeholder-panel {
    width: min(560px, 100%);
    padding: 34px;
    text-align: center;
}

.placeholder-panel h1 {
    margin: 0 0 12px;
}

.placeholder-panel p {
    margin: 0 0 24px;
    color: #64748b;
    line-height: 1.8;
}

.auth-page {
    min-height: 620px;
    display: grid;
    place-items: center;
    padding: 60px 16px;
    background: url("/static/login-bg.jpg") center / cover no-repeat;
}

.auth-panel {
    width: min(430px, 100%);
    padding: 34px;
}

.auth-panel h1 {
    margin: 0 0 10px;
    font-size: 28px;
}

.auth-panel p {
    color: #64748b;
}

.auth-error,
.auth-success {
    margin-top: 18px;
    border-radius: 6px;
    padding: 11px 13px;
    font-size: 14px;
    line-height: 1.5;
}

.auth-error {
    color: #b42318;
    background: #fff1f0;
}

.auth-success {
    color: #067647;
    background: #ecfdf3;
}

.auth-form {
    display: grid;
    gap: 18px;
    margin-top: 26px;
}

.auth-form label {
    display: grid;
    gap: 8px;
    color: #33415c;
}

.auth-form input {
    width: 100%;
    height: 44px;
    border: 1px solid #d9e1ef;
    border-radius: 6px;
    padding: 0 14px;
    font-size: 15px;
}

.auth-form button {
    height: 44px;
    border: 0;
    border-radius: 6px;
    color: #fff;
    background: var(--primary);
    cursor: pointer;
    font-size: 16px;
}

.auth-note {
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
}

.auth-note a {
    color: var(--primary);
}

.auth-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
    color: var(--primary);
    font-size: 14px;
}

.auth-login-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 22px 0 18px; border-radius: 10px; padding: 4px; background: #eef2f6; }
.auth-login-tabs button { height: 40px; border: 0; border-radius: 8px; color: #718096; font: inherit; font-size: 14px; font-weight: 700; background: transparent; cursor: pointer; }
.auth-login-tabs button.active { color: #245f78; background: #fff; box-shadow: 0 2px 8px rgba(30,55,70,.1); }
.auth-form[hidden] { display: none; }
.auth-code-field { display: grid; grid-template-columns: minmax(0,1fr) 112px; gap: 9px; }
.public-site-body .auth-form .auth-code-field button { height: 44px; padding: 0 10px; color: #245f78; border: 1px solid #b9d1dc; border-radius: 8px; font-size: 12px; background: #f1f7f9; box-shadow: none; white-space: nowrap; }
.public-site-body .auth-form .auth-code-field button:hover { color: #fff; background: #2d7696; }
.public-site-body .auth-form .auth-code-field button:disabled { opacity: .65; cursor: wait; }
.auth-login-tabs ~ .auth-form { margin-top: 0; }
.auth-sms-message { margin-top: 7px; color: #64748b; font-size: 12px; }
.auth-sms-message.error { color: #b42318; }
.auth-sms-advisory { display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 3px 10px; border: 1px solid #f2d49b; border-radius: 10px; padding: 13px 14px; background: #fff9ec; }
.auth-sms-advisory > span { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: #fff; font-size: 13px; font-weight: 800; background: #d58a17; }
.auth-sms-advisory p { grid-column: 2; margin: 0; color: #76551f; font-size: 12px; line-height: 1.7; }
.auth-sms-advisory > div { display: flex; grid-column: 2; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 7px; }
.auth-sms-advisory a.auth-reset-password-button { display: inline-flex; min-height: 34px; align-items: center; border: 1px solid #9f5f05; border-radius: 7px; padding: 0 13px; color: #fff; font-size: 12px; font-weight: 800; text-decoration: none; background: linear-gradient(135deg, #a96608, #d88a16); box-shadow: 0 5px 12px rgba(169,102,8,.2); transition: transform 150ms ease, box-shadow 150ms ease; }
.auth-sms-advisory a.auth-reset-password-button:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 7px 16px rgba(169,102,8,.28); }
.public-site-body .auth-sms-advisory button { width: auto; height: 34px; border: 1px solid #d58a17; border-radius: 7px; padding: 0 12px; color: #fff; font-size: 12px; font-weight: 800; background: #c77c0d; box-shadow: none; }
.public-site-body .auth-sms-advisory button:hover { background: #a96508; }
.auth-sms-fields { display: grid; gap: 18px; }
.auth-sms-fields[hidden] { display: none; }

.faq-page {
    padding: 70px 16px;
    background: #f7faff;
}

.faq-container {
    width: min(980px, 100%);
    margin: 0 auto;
}

.faq-header {
    margin-bottom: 34px;
    text-align: center;
}

.faq-header h1 {
    margin: 0 0 12px;
    color: #1e293b;
    font-size: 36px;
}

.faq-header p {
    margin: 0;
    color: #64748b;
}

.faq-list {
    border: 1px solid #edf2fa;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 30px rgba(32, 54, 94, 0.06);
}

.faq-item {
    border-bottom: 1px solid #edf2fa;
}

.faq-item:last-child {
    border-bottom: 0;
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 28px;
    color: #1e293b;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary b {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 400;
    transition: transform 0.22s ease;
}

.faq-item[open] summary {
    background: #f8f9ff;
}

.faq-item[open] summary b {
    transform: rotate(180deg);
}

.faq-item p {
    margin: 0;
    padding: 0 28px 24px;
    color: #475569;
    line-height: 1.9;
    background: #f8f9ff;
}

.footer {
    min-height: 400px;
    margin-top: 40px;
    padding: 60px 0 20px;
    color: #fff;
    background: var(--footer-bg);
}

.footer-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 42px;
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 40px;
}

.footer-links {
    flex: 1;
    display: flex;
    justify-content: center;
    gap: 120px;
    margin: 0 60px;
}

.link-column {
    display: flex;
    flex-direction: column;
    min-width: 120px;
}

.column-title {
    margin-bottom: 18px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

.link-item {
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 14px;
}

.link-item:hover,
.icp-link:hover {
    color: #fff;
}

.footer-erweima {
    flex: 0 0 auto;
    text-align: center;
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
}

.footer-erweima img {
    width: 150px;
    height: 150px;
    margin-bottom: 12px;
    object-fit: cover;
    background: #fff;
}

.footer-bottom {
    width: min(1800px, calc(100% - 80px));
    margin: 44px auto 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 22px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 13px;
    text-align: center;
}

.icp-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 20px;
    line-height: 1.8;
}

.icp-link,
.beian-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: rgba(255, 255, 255, 0.62);
}

.beian-icon {
    width: 18px;
    height: 18px;
}

@media (max-width: 1280px) {
    .nav-menu {
        gap: 20px;
    }

    .nav-item {
        font-size: 16px;
    }

    .header-left {
        flex-basis: 180px;
    }

    .waterfall-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .footer-links {
        gap: 60px;
        margin: 0 20px;
    }
}

@media (max-width: 980px) {
    main {
        padding-top: 76px;
    }

    .header {
        height: 76px;
    }

    .nav-container {
        padding: 0 18px;
    }

    .header-left {
        flex-basis: auto;
    }

    .logo img {
        width: 132px;
        height: auto;
    }

    .header-center {
        display: none;
    }

    .console-btn {
        display: none;
    }

    .hero-section {
        height: 440px;
    }

    .hero-content {
        padding-top: 82px;
    }

    .hero-title {
        font-size: 38px;
    }

    .home-banner-img {
        left: 50%;
        bottom: 14px;
        height: 250px;
        opacity: 0.78;
        transform: translateX(-50%);
    }

    .features-section {
        margin-top: -90px;
    }

    .features-grid,
    .waterfall-grid,
    .product-grid,
    .news-list,
    .traded-grid-page,
    .merchant-grid-page {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .merchant-rank-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .work-detail-grid {
        grid-template-columns: 1fr;
    }

    .auction-detail-grid,
    .merchant-hero-inner,
    .legacy-work-detail,
    .legacy-rules-content {
        grid-template-columns: 1fr;
    }

    .work-sample-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .legacy-image-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .merchant-legacy-container {
        width: calc(100% - 24px);
    }

    .merchant-header-legacy,
    .section-header-legacy {
        align-items: flex-start;
        flex-direction: column;
    }

    .merchant-stats-legacy {
        position: static;
        margin: 12px 0;
    }

    .display-options-legacy {
        width: 100%;
        justify-content: space-between;
    }

    .footer-content {
        display: grid;
        grid-template-columns: 1fr 150px;
        gap: 26px;
    }

    .footer-links {
        justify-content: flex-start;
        gap: 36px;
        margin: 0;
    }
}

@media (max-width: 640px) {
    .container {
        padding: 0 16px;
    }

    .header-right {
        gap: 8px;
    }

    .btn {
        min-width: 58px;
        height: 34px;
        font-size: 14px;
    }

    .hero-section {
        height: 380px;
    }

    .hero-content {
        padding-top: 58px;
    }

    .hero-title {
        width: min(330px, 100%);
        font-size: 30px;
    }

    .hero-search {
        width: calc(100vw - 32px);
        height: 50px;
    }

    .hero-search button {
        width: 88px;
    }

    .home-banner-img {
        height: 190px;
    }

    .features-section {
        margin-top: -60px;
        padding-top: 40px;
    }

    .features-grid,
    .waterfall-grid,
    .product-grid,
    .news-list,
    .traded-grid-page,
    .merchant-grid-page {
        grid-template-columns: 1fr;
    }

    .special-drama,
    .fixed-price-container,
    .auction-container,
    .traded-section,
    .news-section,
    .content-section {
        width: calc(100% - 24px);
        border-radius: 12px;
        padding: 18px 12px;
    }

    .tabs-wrapper,
    .section-header {
        align-items: flex-start;
    }

    .section-header {
        flex-direction: column;
    }

    .section-actions {
        width: 100%;
        justify-content: space-between;
    }

    .section-title {
        font-size: 22px;
    }

    .work-detail-grid {
        gap: 18px;
    }

    .legacy-work-shell {
        width: calc(100% - 24px);
        padding: 14px;
    }

    .legacy-top-actions {
        justify-content: flex-start;
    }

    .legacy-mini-btn {
        min-width: 0;
        flex: 1 1 calc(50% - 8px);
    }

    .legacy-image-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .legacy-price-section,
    .legacy-section-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .legacy-price-section.hot strong {
        font-size: 32px;
    }

    .merchant-info-legacy {
        flex-direction: column;
        align-items: center;
        margin-top: 30px;
        padding: 80px 6px 10px;
        text-align: center;
    }

    .merchant-avatar-legacy {
        width: 80px;
        height: 80px;
        margin-bottom: 10px;
    }

    .merchant-details-legacy {
        width: 100%;
        margin-left: 0;
        padding: 0;
    }

    .merchant-name-legacy {
        min-width: 0;
        max-width: 90vw;
        font-size: 18px;
        white-space: normal;
        word-break: break-all;
    }

    .merchant-actions-legacy {
        justify-content: center;
        margin-top: 8px;
    }

    .action-btn-legacy {
        min-width: 90px;
        height: 38px;
        padding: 0 18px;
        font-size: 15px;
    }

    .stat-item-legacy {
        padding: 8px 14px;
    }

    .stat-value-legacy {
        font-size: 15px;
    }

    .stat-label-legacy {
        font-size: 12px;
    }

    .merchant-bio-legacy {
        margin-top: 10px;
        font-size: 13px;
        line-height: 1.5;
        -webkit-line-clamp: 2;
    }

    .bio-expand-legacy {
        margin-top: 4px;
        padding: 3px 10px;
        font-size: 13px;
    }

    .works-section-legacy {
        margin: 16px 0;
        padding: 14px;
    }

    .section-header-legacy {
        padding: 0;
    }

    .display-options-legacy,
    .filter-options-legacy {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .display-mode-toggle-legacy,
    .filter-select-legacy {
        width: 100%;
    }

    .works-container-legacy.paged {
        grid-template-columns: 1fr;
    }

    .auction-detail-grid {
        gap: 18px;
    }

    .auction-price-panel,
    .bid-history-item {
        grid-template-columns: 1fr;
    }

    .work-info-panel h1 {
        font-size: 24px;
    }

    .detail-actions {
        flex-direction: column;
    }

    .order-detail-actions {
        grid-template-columns: 1fr;
    }

    .order-success-actions .source-download-action {
        width: 100%;
        min-width: 0;
    }

    .detail-actions .buy-btn,
    .detail-actions .btn {
        width: 100%;
    }

    .inline-action-form,
    .pay-submit-form {
        width: 100%;
    }

    .pay-submit-form,
    .order-header {
        flex-direction: column;
    }

    .order-work {
        grid-template-columns: 1fr;
    }

    .order-work img {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
    }

    .market-search-section,
    .category-filter,
    .market-container {
        width: calc(100% - 24px);
    }

    .pagination {
        align-items: flex-start;
        flex-direction: column;
    }

    .pagination-container {
        width: 100%;
        flex-wrap: wrap;
    }

    .price-filter-form,
    .price-filter-form label {
        width: 100%;
    }

    .price-filter-form input {
        flex: 1;
        width: auto;
        min-width: 0;
    }

    .demand-item-head,
    .demand-footer,
    .demand-title-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .demand-detail-container {
        width: calc(100% - 24px);
    }

    .about-content,
    .process-content-page {
        width: calc(100% - 24px);
        padding: 24px 18px;
    }

    .about-grid,
    .about-grid.three,
    .contact-list {
        grid-template-columns: 1fr;
    }

    .faq-page {
        padding: 42px 12px;
    }

    .faq-header h1 {
        font-size: 28px;
    }

    .faq-item summary {
        align-items: flex-start;
        padding: 20px;
    }

    .faq-item p {
        padding: 0 20px 20px;
        font-size: 14px;
    }

    .footer {
        padding-top: 36px;
    }

    .footer-content {
        grid-template-columns: 1fr;
        padding: 0 24px;
    }

    .footer-links {
        display: grid;
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .footer-erweima {
        text-align: left;
    }

    .footer-bottom {
        width: calc(100% - 48px);
    }
}
/* Shared custom dialog: replaces native confirm/alert/prompt UI. */
.site-dialog-layer[hidden]{display:none}.site-dialog-layer{position:fixed;inset:0;z-index:3000;display:grid;place-items:center;padding:20px}.site-dialog-backdrop{position:absolute;inset:0;border:0;background:rgb(8 15 27 / 72%);backdrop-filter:blur(4px)}.site-dialog-panel{position:relative;overflow:hidden;width:min(520px,calc(100vw - 32px));border:1px solid rgb(148 163 184 / 22%);border-radius:16px;background:#fff;box-shadow:0 32px 90px rgb(2 6 23 / 38%)}.site-dialog-copy{display:grid;grid-template-columns:58px minmax(0,1fr);gap:18px;padding:27px 27px 22px}.site-dialog-mark{display:grid;width:54px;height:54px;place-items:center;border-radius:50%;color:#b42318;background:#fee4e2;font-size:25px;font-weight:900}.site-dialog-kicker{color:#b42318;font-size:10px;font-weight:900;letter-spacing:.12em}.site-dialog-copy h2{margin:5px 0 9px;color:#172033;font-size:22px}.site-dialog-copy p{margin:0;color:#667085;font-size:13px;line-height:1.75;white-space:pre-line}.site-dialog-value{display:block;width:calc(100% - 54px);min-height:90px;box-sizing:border-box;margin:0 27px 20px;border:1px solid #d5deea;border-radius:9px;padding:11px;color:#344054;background:#f8fafc;resize:vertical}.site-dialog-actions{display:flex;justify-content:flex-end;gap:9px;border-top:1px solid #e7ecf3;padding:16px 27px 20px;background:#f8fafc}.site-dialog-actions button{min-width:92px;min-height:38px;border:1px solid #d0d7e2;border-radius:8px;color:#475467;background:#fff;font-weight:800;cursor:pointer}.site-dialog-actions button.primary{border-color:#3158a8;color:#fff;background:#3158a8}.site-dialog-actions button.primary.danger{border-color:#d92d20;background:#d92d20}.site-dialog-actions button.primary.danger:hover{background:#b42318}@media(max-width:560px){.site-dialog-copy{grid-template-columns:44px minmax(0,1fr);gap:13px;padding:22px 20px 18px}.site-dialog-mark{width:42px;height:42px}.site-dialog-actions{padding:14px 20px 18px}.site-dialog-actions button{flex:1}.site-dialog-value{width:calc(100% - 40px);margin-right:20px;margin-left:20px}}

.order-physical-summary,.order-shipping-form{margin-top:18px;overflow:hidden;border:1px solid var(--border-color);border-radius:14px;background:var(--card-bg)}.order-physical-summary>header,.order-shipping-form>header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px 18px;border-bottom:1px solid var(--border-color)}.order-physical-summary header div,.order-shipping-form header div{display:grid;gap:3px}.order-physical-summary header span,.order-shipping-form header span{color:var(--primary-color);font-size:9px;font-weight:800;letter-spacing:.12em}.order-physical-summary header strong,.order-shipping-form header strong{color:var(--text-color);font-size:15px}.order-physical-summary header em,.order-shipping-form header em{padding:5px 9px;border-radius:999px;color:var(--primary-color);background:color-mix(in srgb,var(--primary-color) 10%,transparent);font-size:10px;font-style:normal}.order-shipping-form header p{margin:0;color:var(--muted-color);font-size:10px}.order-price-lines{display:grid;padding:7px 18px 13px}.order-price-lines>div{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 0;border-bottom:1px dashed var(--border-color);color:var(--muted-color);font-size:12px}.order-price-lines>div strong{color:var(--text-color)}.order-price-lines>div.total{margin-top:4px;border-bottom:0;color:var(--text-color);font-weight:800}.order-price-lines>div.total strong{color:var(--primary-color);font-size:20px}.order-address-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:18px}.order-address-grid label{display:grid;gap:6px}.order-address-grid label.wide{grid-column:1/-1}.order-address-grid span{color:var(--muted-color);font-size:10px;font-weight:700}.order-address-grid input{width:100%;height:42px;padding:0 12px;border:1px solid var(--border-color);border-radius:8px;color:var(--text-color);background:var(--card-bg)}.order-shipping-form>button{margin:0 18px 18px}.order-address-required{display:grid;gap:3px;width:100%;padding:14px 16px;border:1px solid #e8c47b;border-radius:10px;color:#765514;background:#fff8e8}.order-address-required span{font-size:10px}@media(max-width:640px){.order-address-grid{grid-template-columns:1fr}.order-address-grid label.wide{grid-column:auto}}