.work-show-page {
    --detail-ink: #18231d;
    --detail-muted: #68736c;
    --detail-green: #254b3c;
    --detail-green-dark: #17372c;
    --detail-gold: #c99b43;
    --detail-gold-light: #ead5a6;
    --detail-paper: #fffdfa;
    --detail-panel: #fffdfa;
    --detail-text: #18231d;
    --detail-soft: #f4efe3;
    --detail-line: #e6dcc6;
    min-height: 100vh;
    padding-top: 0;
    color: var(--detail-ink);
    background:
        radial-gradient(circle at 8% 3%, rgba(207, 171, 96, .13), transparent 28%),
        linear-gradient(180deg, #f8f5ed 0, #f4f0e7 560px, #f7f4ed 100%);
}

.work-detail-body .footer {
    margin-top: 0;
    border-top: 1px solid rgba(225, 190, 111, .3);
    background:
        radial-gradient(circle at 12% 0, rgba(205, 160, 67, .13), transparent 30%),
        linear-gradient(180deg, #12231c 0, #0b1511 100%);
    box-shadow: inset 0 1px 0 rgba(255, 239, 197, .04);
}

.work-detail-body .footer .column-title {
    color: #efd492;
    letter-spacing: .08em;
}

.work-detail-body .footer .link-item,
.work-detail-body .footer .footer-erweima,
.work-detail-body .footer .icp-link,
.work-detail-body .footer .beian-link {
    color: rgba(222, 215, 198, .7);
}

.work-detail-body .footer .link-item:hover,
.work-detail-body .footer .icp-link:hover,
.work-detail-body .footer .beian-link:hover {
    color: #f0d89d;
}

.work-detail-body .footer .footer-erweima img {
    border: 1px solid rgba(226, 192, 114, .5);
    border-radius: 4px;
    padding: 5px;
    background: #f7f0de;
    box-shadow: 0 12px 30px rgba(2, 8, 5, .28);
}

.work-detail-body .footer .footer-bottom {
    border-top-color: rgba(226, 192, 114, .22);
    color: rgba(205, 198, 181, .62);
}

.work-detail-body .header {
    border-bottom: 1px solid rgba(225, 190, 111, .28);
    background:
        radial-gradient(circle at 18% -80%, rgba(207, 166, 76, .18), transparent 35%),
        rgba(13, 23, 19, .97);
    box-shadow: 0 10px 34px rgba(7, 15, 12, .24);
}

.work-detail-body .logo img {
    filter: brightness(0) saturate(100%) invert(82%) sepia(35%) saturate(702%) hue-rotate(359deg) brightness(94%) contrast(88%);
}

.work-detail-body .nav-item {
    color: #d6d1c5;
}

.work-detail-body .nav-item:hover,
.work-detail-body .nav-item.active {
    color: #efd492;
}

.work-detail-body .nav-item.active::after {
    background: linear-gradient(90deg, #a77c2c, #efd492);
    box-shadow: 0 0 14px rgba(226, 188, 103, .36);
}

.work-detail-body .dropdown-menu,
.work-detail-body .user-dropdown {
    border-color: #4b4636;
    background: #14241d;
    box-shadow: 0 18px 42px rgba(4, 10, 8, .34);
}

.work-detail-body .dropdown-menu a,
.work-detail-body .user-dropdown a,
.work-detail-body .user-dropdown button {
    color: #d8d2c5;
}

.work-detail-body .dropdown-menu a:hover,
.work-detail-body .user-dropdown a:hover,
.work-detail-body .user-dropdown button:hover {
    color: #f0d89d;
    background: #20362c;
}

.work-detail-body .btn-login,
.work-detail-body .message-notice,
.work-detail-body .user-chip {
    border-color: rgba(229, 198, 127, .45);
    color: #efd492;
    background: rgba(255, 255, 255, .035);
}

.work-detail-body .btn-login:hover,
.work-detail-body .message-notice:hover,
.work-detail-body .user-chip:hover {
    border-color: #dfbd70;
    color: #fff0c8;
    background: rgba(218, 179, 91, .12);
    box-shadow: 0 8px 22px rgba(4, 12, 9, .2);
}

.work-detail-body .btn-register {
    border-color: #e1bf73;
    color: #17231d;
    background: linear-gradient(135deg, #f0daa3, #c99b43);
    box-shadow: 0 8px 22px rgba(5, 13, 10, .22);
}

.work-detail-body .btn-register:hover {
    color: #101b16;
    background: linear-gradient(135deg, #f6e6bd, #d9ae59);
}

.work-detail-body .user-chip b {
    color: #bfa76d;
}

.work-show-shell {
    width: min(1380px, calc(100% - 64px));
    margin: 0 auto;
    padding: 30px 0 80px;
}

.work-breadcrumb {
    display: flex;
    min-height: 40px;
    align-items: center;
    gap: 11px;
    overflow: hidden;
    margin-bottom: 18px;
    color: #948a76;
    font-size: 16px;
    white-space: nowrap;
}

.work-breadcrumb a {
    color: var(--detail-green);
    font-weight: 700;
}

.work-breadcrumb a:hover {
    color: #9d7325;
}

.work-breadcrumb strong {
    overflow: hidden;
    color: #5b625d;
    font-weight: 600;
    text-overflow: ellipsis;
}

.work-show-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(420px, .8fr);
    gap: 30px;
    align-items: start;
}

.work-gallery {
    min-width: 0;
    border: 1px solid var(--detail-line);
    border-radius: 10px;
    padding: 13px;
    background: var(--detail-paper);
    box-shadow: 0 22px 58px rgba(52, 46, 32, .1);
}

.work-gallery-stage {
    position: relative;
    display: grid;
    overflow: hidden;
    width: 100%;
    min-height: 420px;
    place-items: center;
    border-radius: 6px;
    background:
        radial-gradient(circle at 50% 45%, rgba(91, 111, 101, .28), transparent 42%),
        #101b17;
}

.work-gallery-stage::before {
    position: absolute;
    z-index: 1;
    inset: 16px;
    border: 1px solid rgba(234, 213, 166, .22);
    border-radius: 3px;
    content: '';
    pointer-events: none;
}

.work-gallery-stage > img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 720px;
    display: block;
    object-fit: contain;
    object-position: center;
    background: #101b17;
}

.work-gallery-stage > span {
    position: absolute;
    z-index: 2;
    right: 26px;
    bottom: 26px;
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    border: 1px solid rgba(234, 213, 166, .45);
    border-radius: 4px;
    padding: 0 14px;
    color: #f8efd9;
    font-size: 13px;
    font-weight: 700;
    background: rgba(17, 31, 25, .82);
    backdrop-filter: blur(8px);
}

.work-gallery-thumbs {
    display: grid;
    grid-auto-columns: 86px;
    grid-auto-flow: column;
    gap: 10px;
    overflow-x: auto;
    margin-top: 13px;
    padding: 1px 0 2px;
    scrollbar-width: thin;
    scrollbar-color: #cbbd9e transparent;
}

.work-gallery-thumbs button {
    position: relative;
    width: 86px;
    height: 68px;
    overflow: hidden;
    border: 1px solid var(--detail-line);
    border-radius: 4px;
    padding: 3px;
    background: #f0ebdf;
    cursor: pointer;
}

.work-gallery-thumbs button.active {
    border-color: var(--detail-gold);
    box-shadow: 0 0 0 1px var(--detail-gold);
}

.work-gallery-thumbs button:focus-visible {
    outline: 2px solid var(--detail-green);
    outline-offset: 2px;
}

.work-gallery-thumbs img {
    width: 100%;
    height: 100%;
    border-radius: 2px;
    object-fit: contain;
    object-position: center;
    background: #101b17;
}

body.work-viewer-open { overflow: hidden; }
.work-image-viewer { position: fixed; z-index: 1200; inset: 0; display: grid; visibility: hidden; place-items: center; opacity: 0; transition: opacity .2s ease, visibility .2s ease; }
.work-image-viewer.show { visibility: visible; opacity: 1; }
.work-image-viewer-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: color-mix(in srgb, var(--site-ink, #101c18) 88%, transparent); cursor: zoom-out; }
.work-image-viewer-panel { position: relative; width: min(94vw, 1280px); height: min(92vh, 900px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; margin: 0; border: 1px solid color-mix(in srgb, var(--site-gold, #c9a86a) 48%, transparent); border-radius: 10px; padding: 12px; color: var(--site-gold-light, #ead7aa); background: linear-gradient(145deg, var(--site-ink-soft, #193027), var(--site-ink, #101c18)); box-shadow: 0 28px 80px color-mix(in srgb, var(--site-ink, #101c18) 58%, transparent); }
.work-image-viewer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 2px 10px; }
.work-image-viewer-toolbar > div { display: flex; align-items: center; gap: 7px; }
.work-image-viewer-toolbar button { min-width: 36px; height: 34px; border: 1px solid color-mix(in srgb, var(--site-gold, #c9a86a) 48%, transparent); border-radius: 5px; padding: 0 10px; color: var(--site-gold-light, #ead7aa); background: color-mix(in srgb, var(--site-paper, #fff) 9%, transparent); font: inherit; cursor: pointer; }
.work-image-viewer-toolbar button:hover { color: var(--site-ink, #101c18); background: var(--site-gold, #c9a86a); }
.work-image-viewer-toolbar span { min-width: 54px; color: color-mix(in srgb, var(--site-gold-light, #ead7aa) 78%, var(--site-muted, #69756f)); font-size: 13px; text-align: center; }
.work-image-viewer-stage { position: relative; overflow: hidden; display: grid; place-items: center; min-height: 0; border: 1px solid color-mix(in srgb, var(--site-gold, #c9a86a) 18%, transparent); border-radius: 6px; background: color-mix(in srgb, var(--site-ink, #101c18) 86%, black); touch-action: none; cursor: zoom-in; }
.work-image-viewer-stage.is-zoomed { cursor: grab; }
.work-image-viewer-stage.is-zoomed:active { cursor: grabbing; }
.work-image-viewer-stage img { max-width: 100%; max-height: 100%; display: block; object-fit: contain; transform-origin: center; user-select: none; will-change: transform; }
.work-image-viewer-panel > p { margin: 9px 0 0; color: color-mix(in srgb, var(--site-gold-light, #ead7aa) 58%, var(--site-muted, #69756f)); font-size: 12px; text-align: center; }
@media (max-width: 640px) { .work-image-viewer-panel { width: 100vw; height: 100dvh; border: 0; border-radius: 0; } .work-image-viewer-toolbar strong { display: none; } .work-image-viewer-toolbar { justify-content: flex-end; } }

.work-purchase-panel {
    position: sticky;
    top: 118px;
    display: grid;
    gap: 14px;
    min-width: 0;
}

.work-overview-card,
.work-merchant,
.work-transaction-card {
    overflow: hidden;
    border: 1px solid var(--detail-line);
    border-radius: 8px;
    background: var(--detail-paper);
    box-shadow: 0 16px 42px rgba(48, 42, 29, .09);
}

.work-title-meta {
    position: relative;
    padding: 28px 30px 22px;
}

.work-record-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid #e9dfca;
    padding-bottom: 13px;
}

.work-record-head span {
    position: relative;
    padding-left: 50px;
    color: #946e27;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .16em;
}

.work-record-head span::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 38px;
    height: 2px;
    background: linear-gradient(90deg, var(--detail-gold), var(--detail-gold-light));
    content: '';
    transform: translateY(-50%);
}

.work-record-head em {
    color: #aaa08b;
    font-family: Georgia, serif;
    font-size: 10px;
    font-style: normal;
    letter-spacing: .1em;
}

.work-badges,
.work-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.work-badges span,
.work-labels span {
    display: inline-flex;
    min-height: 27px;
    align-items: center;
    border: 1px solid #dfd5bf;
    border-radius: 3px;
    padding: 0 10px;
    color: #625b4d;
    font-size: 12px;
    font-weight: 700;
    background: #f8f4ea;
}

.work-badges span.sale-state {
    border-color: #d8bd7e;
    color: #76541c;
    background: #f8edcf;
}

.work-badges span.sale-state.is-traded {
    border-color: #cfd6d2;
    color: #53615a;
    background: #edf1ef;
}

.work-title-meta h1 {
    margin: 22px 0 18px;
    color: #16251e;
    font-family: Georgia, "Songti SC", "STSong", "Microsoft YaHei", serif;
    font-size: clamp(30px, 2.5vw, 40px);
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: .02em;
    overflow-wrap: anywhere;
}

.work-title-meta .work-badges {
    gap: 7px;
}

.work-labels {
    padding: 20px 30px 0;
}

.work-labels span {
    border-color: #d7e1d9;
    color: var(--detail-green);
    background: #f0f5f1;
}

.work-description {
    margin: 20px 30px 0;
    border-top: 1px solid #ebe3d4;
    padding: 18px 0 24px;
}

.work-description > span {
    display: block;
    color: var(--detail-green-dark);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .08em;
}

.work-description p {
    display: -webkit-box;
    overflow: hidden;
    margin: 10px 0 0;
    color: var(--detail-muted);
    font-size: 14px;
    line-height: 1.9;
    white-space: pre-wrap;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.work-merchant {
    display: grid;
    grid-template-columns: auto 52px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    margin-top: 34px;
    padding: 16px 22px;
    color: inherit;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.work-merchant:hover {
    border-color: #c9aa65;
    box-shadow: 0 20px 48px rgba(48, 42, 29, .15);
}

.work-merchant-mark {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    border-radius: 3px;
    padding: 0 12px;
    color: #f0dbab;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    background: var(--detail-green-dark);
}

.work-merchant > img,
.work-merchant > .fallback {
    display: grid;
    width: 52px;
    height: 52px;
    overflow: hidden;
    place-items: center;
    border: 1px solid #dbc895;
    border-radius: 5px;
    color: #f8ebc8;
    background: var(--detail-green);
    object-fit: cover;
}

.work-merchant > img + span,
.work-merchant > .fallback + span {
    min-width: 0;
}

.work-merchant small {
    display: block;
    margin-bottom: 3px;
    color: #9b752f;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
}

.work-merchant b,
.work-merchant em {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.work-merchant b {
    color: #26382f;
    font-size: 16px;
}

.work-merchant em {
    margin-top: 3px;
    color: #948c7b;
    font-size: 13px;
    font-style: normal;
}

.work-merchant > strong {
    color: var(--detail-green);
    font-size: 14px;
}

.work-transaction-card {
    border-color: color-mix(in srgb, var(--site-gold, #c9a86a) 34%, var(--site-ink, #101c18));
    background: var(--site-ink, #101c18);
    box-shadow: 0 18px 44px color-mix(in srgb, var(--site-ink, #101c18) 24%, transparent);
}

.work-purchase-box {
    padding: 25px 30px 27px;
    color: #fff;
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--site-gold, #c9a86a) 20%, transparent), transparent 42%),
        linear-gradient(135deg, var(--site-ink, #101c18), var(--site-ink-soft, #193027));
}

.work-price-row {
    display: grid;
    gap: 9px;
}

.work-price-row span {
    color: color-mix(in srgb, var(--site-paper, #fbf9f4) 78%, var(--site-muted, #69756f));
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
}

.work-price-row strong {
    color: var(--site-gold-light, #ead7aa);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(34px, 3vw, 44px);
    line-height: 1;
}

.work-rights-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 19px;
}

.work-rights-summary span {
    position: relative;
    padding-left: 14px;
    color: color-mix(in srgb, var(--site-paper, #fbf9f4) 80%, var(--site-muted, #69756f));
    font-size: 12px;
}

.work-rights-summary span::before {
    position: absolute;
    top: 6px;
    left: 0;
    width: 6px;
    height: 6px;
    border: 1px solid var(--site-gold, #c9a86a);
    border-radius: 50%;
    content: '';
}

.work-buyout-note { margin: 12px 0 0; color: color-mix(in srgb, var(--site-paper, #fbf9f4) 58%, var(--site-muted, #69756f)); font-size: 12px; line-height: 1.75; }
.work-buyout-note a { color: var(--site-gold, #c9a86a); font-weight: 800; }

.work-production-file {
    margin-top: 28px;
    padding: 30px;
    border: 1px solid #e5e8e6;
    border-radius: 18px;
    background: #fff;
}
.work-production-file > header span { color: #16705f; font-size: 12px; font-weight: 750; letter-spacing: .12em; }
.work-production-file > header h2 { margin: 5px 0 4px; color: #18231f; font-size: 24px; }
.work-production-file > header p, .work-production-note { margin: 0; color: #74807b; font-size: 13px; }
.work-production-file-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.work-production-file-grid article { padding: 16px 18px; border-radius: 12px; background: #f5f8f7; }
.work-production-file-grid small { display: block; color: #84908b; font-size: 12px; }
.work-production-file-grid strong { display: block; margin-top: 5px; color: #20322c; font-size: 17px; }
.work-production-note { margin-top: 15px; }

@media (max-width: 720px) {
    .work-production-file { padding: 22px 18px; }
    .work-production-file-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.work-purchase-box form {
    margin: 21px 0 0;
}

.work-purchase-actions { display: grid; grid-template-columns: minmax(0, 1fr) 56px; gap: 10px; margin-top: 21px; }
.work-purchase-actions form { margin: 0; min-width: 0; }
.work-physical-options { display: grid; gap: 8px; margin: 0 0 12px; padding: 13px; border: 1px solid var(--detail-line); border-radius: 12px; background: color-mix(in srgb, var(--detail-panel) 90%, transparent); }
.work-physical-options header { display: grid; gap: 2px; margin-bottom: 2px; }
.work-physical-options header strong { color: var(--detail-text); font-size: 14px; }
.work-physical-options header span { color: var(--detail-muted); font-size: 11px; }
.work-physical-options > label { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid var(--detail-line); border-radius: 9px; cursor: pointer; }
.work-physical-options > label.is-selected { border-color: var(--detail-gold); background: color-mix(in srgb, var(--detail-gold) 9%, transparent); }
.work-physical-options > label input { flex: 0 0 auto; accent-color: var(--detail-gold); }
.work-physical-options > label span { display: grid; flex: 1; gap: 1px; min-width: 0; }
.work-physical-options > label b { color: var(--detail-text); font-size: 12px; }
.work-physical-options > label em { overflow: hidden; color: var(--detail-muted); font-size: 10px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.work-physical-options > label > strong { color: var(--detail-gold); font-size: 12px; white-space: nowrap; }
.work-shipping-address { margin-top: 4px; padding-top: 11px; border-top: 1px dashed var(--detail-line); }
.work-shipping-address > strong { display: block; margin-bottom: 8px; color: var(--detail-text); font-size: 12px; }
.work-address-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.work-address-grid label { display: grid; gap: 4px; }
.work-address-grid label.wide { grid-column: 1 / -1; }
.work-address-grid span { color: var(--detail-muted); font-size: 10px; }
.work-address-grid input { width: 100%; min-width: 0; padding: 8px 9px; border: 1px solid var(--detail-line); border-radius: 7px; background: var(--detail-panel); color: var(--detail-text); }
.work-order-total { display: flex; align-items: center; justify-content: space-between; padding-top: 9px; border-top: 1px solid var(--detail-line); color: var(--detail-muted); font-size: 12px; }
.work-order-total strong { color: var(--detail-gold); font-size: 17px; }
.work-modal-open { overflow: hidden; }
.work-buyout-modal { --detail-panel: #fffdfa; --detail-text: #18231d; --detail-muted: #68736c; --detail-gold: #b78329; --detail-line: #dfd3bb; position: fixed; z-index: 1300; inset: 0; display: grid; place-items: center; padding: 22px; color: var(--detail-text); opacity: 0; visibility: hidden; transition: opacity .18s,visibility .18s; }
.work-buyout-modal[aria-hidden="false"] { opacity: 1; visibility: visible; }
.work-buyout-modal-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(7,14,18,.76); backdrop-filter: blur(8px); }
.work-buyout-modal-panel { position: relative; isolation: isolate; width: min(880px,100%); max-height: min(850px,calc(100vh - 44px)); overflow: auto; border: 1px solid var(--detail-line); border-radius: 20px; background-color: #fffdfa; background-image: none; opacity: 1; box-shadow: 0 30px 90px rgba(0,0,0,.38); }
.work-buyout-modal-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 24px 26px 19px; border-bottom: 1px solid var(--detail-line); }
.work-buyout-modal-panel > header span { color: var(--detail-gold); font-size: 13px; font-weight: 900; letter-spacing: .15em; }
.work-buyout-modal-panel > header h2 { margin: 5px 0 4px; color: var(--detail-text); font-size: 27px; }
.work-buyout-modal-panel > header p { margin: 0; color: var(--detail-muted); font-size: 15px; line-height: 1.6; }
.work-buyout-modal-panel > header > button { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--detail-line); border-radius: 50%; color: var(--detail-muted); background: transparent; font-size: 21px; cursor: pointer; }
.work-buyout-design-line { display: grid; grid-template-columns: 62px 1fr auto; gap: 14px; align-items: center; margin: 20px 26px 0; padding: 13px; border: 1px solid var(--detail-line); border-radius: 13px; background: color-mix(in srgb,var(--detail-gold) 5%,transparent); }
.work-buyout-design-line img { width: 62px; height: 62px; border-radius: 9px; object-fit: cover; }
.work-buyout-design-line span { display: grid; gap: 2px; min-width: 0; }
.work-buyout-design-line small,.work-buyout-design-line em { color: var(--detail-muted); font-size: 13px; font-style: normal; line-height: 1.5; }
.work-buyout-design-line strong { overflow: hidden; color: var(--detail-text); font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.work-buyout-design-line > b { color: var(--detail-gold); font-size: 23px; }
.work-modal-products { padding: 22px 26px; }
.work-modal-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.work-modal-section-head strong { color: var(--detail-text); font-size: 19px; }
.work-modal-section-head span { color: var(--detail-muted); font-size: 13px; }
.work-modal-product-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.work-modal-product-grid label { display: grid; grid-template-columns: 20px 96px 1fr; gap: 13px; align-items: center; padding: 12px; border: 1px solid #c5cfda; border-radius: 11px; cursor: pointer; background: #f3f6f9; transition: border-color .15s,background .15s; }
.work-modal-external-product { display: grid; grid-template-columns: 96px 1fr; gap: 13px; align-items: center; padding: 12px; border: 1px dashed var(--detail-gold); border-radius: 11px; color: inherit; background: #fff7e7; transition: border-color .15s,background .15s,transform .15s; }
.work-modal-external-product:hover { border-style: solid; background: color-mix(in srgb,var(--detail-gold) 13%,transparent); transform: translateY(-1px); }
.work-modal-product-grid label:has(input:checked) { border-color: var(--detail-gold); background: #fff3d8; box-shadow: 0 0 0 2px color-mix(in srgb,var(--detail-gold) 18%,transparent); }
.work-modal-product-grid input { width: 16px; height: 16px; accent-color: var(--detail-gold); }
.work-modal-product-grid i { display: grid; width: 96px; height: 96px; overflow: hidden; place-items: center; border: 1px solid #40515e; border-radius: 9px; background: linear-gradient(145deg,#71818d,#465762); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.work-modal-product-grid i img { width: auto; height: auto; max-width: calc(100% - 16px); max-height: calc(100% - 16px); padding: 0; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0,0,0,.28)); }
.work-modal-product-grid span { display: grid; gap: 2px; min-width: 0; }
.work-modal-product-grid b { color: var(--detail-text); font-size: 16px; }
.work-modal-product-grid em { color: var(--detail-muted); font-size: 13px; font-style: normal; line-height: 1.5; }
.work-modal-product-grid strong { color: var(--detail-gold); font-size: 16px; }
.work-modal-empty { padding: 17px; border: 1px dashed var(--detail-line); border-radius: 10px; color: var(--detail-muted); font-size: 14px; text-align: center; }
.work-buyout-modal-panel form > footer { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 26px; border-top: 1px solid var(--detail-line); background: color-mix(in srgb,var(--detail-panel) 94%,transparent); backdrop-filter: blur(10px); }
.work-buyout-modal-panel form > footer div { display: grid; grid-template-columns: auto auto; gap: 1px 10px; align-items: baseline; }
.work-buyout-modal-panel form > footer span { color: var(--detail-muted); font-size: 14px; }
.work-buyout-modal-panel form > footer strong { color: var(--detail-gold); font-size: 27px; }
.work-buyout-modal-panel form > footer small { grid-column: 1/-1; color: var(--detail-muted); font-size: 13px; }
.work-buyout-modal-panel form > footer .work-buy-button { width: auto; min-width: 190px; margin: 0; }
@media (max-width: 680px) {
    .work-buyout-modal { padding: 10px; }
    .work-buyout-modal-panel { max-height: calc(100vh - 20px); border-radius: 15px; }
    .work-modal-product-grid { grid-template-columns: 1fr; }
    .work-buyout-design-line { grid-template-columns: 52px 1fr; margin-left: 16px; margin-right: 16px; }
    .work-buyout-design-line img { width: 52px; height: 52px; }
    .work-buyout-design-line > b { grid-column: 2; }
    .work-modal-products { padding-left: 16px; padding-right: 16px; }
    .work-buyout-modal-panel form > footer { align-items: stretch; flex-direction: column; }
    .work-buyout-modal-panel form > footer .work-buy-button { width: 100%; }
}
.work-cart-button { position: relative; display: grid; width: 56px; height: 52px; place-items: center; border: 1px solid var(--site-gold, #c9a86a); border-radius: 4px; color: var(--site-ink, #101c18); background: var(--site-gold-light, #ead7aa); cursor: pointer; transition: transform .2s ease, background .2s ease, color .2s ease; }
.work-cart-button svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.work-cart-button:hover { color: var(--site-paper, #fbf9f4); background: var(--site-ink-soft, #193027); transform: translateY(-1px); }
.work-cart-button.is-added { color: var(--site-paper, #fbf9f4); border-color: var(--site-gold, #c9a86a); background: linear-gradient(135deg, var(--site-ink-soft, #193027), var(--site-ink, #101c18)); cursor: default; }
.work-cart-button.is-added:disabled { opacity: 1; }
.work-cart-button.is-added::after { position: absolute; top: -8px; right: -8px; padding: 2px 5px; border: 2px solid var(--site-paper, #fbf9f4); border-radius: 8px; color: var(--site-paper, #fbf9f4); background: var(--site-ink, #101c18); content: '已加入'; font-size: 10px; font-weight: 800; white-space: nowrap; }

.work-buy-button {
    display: flex;
    width: 100%;
    height: 52px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--site-gold-light, #ead7aa);
    border-radius: 4px;
    padding: 0 18px;
    color: var(--site-ink, #101c18);
    font: inherit;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: .06em;
    background: linear-gradient(135deg, var(--site-gold-light, #ead7aa), var(--site-gold, #c9a86a));
    box-shadow: 0 10px 26px color-mix(in srgb, var(--site-ink, #101c18) 22%, transparent);
    cursor: pointer;
    transition: transform .2s ease, filter .2s ease;
}

.work-buy-button:hover {
    color: var(--site-ink, #101c18);
    filter: brightness(1.04);
    transform: translateY(-1px);
}

.work-traded-notice {
    display: grid;
    min-height: 58px;
    align-content: center;
    gap: 4px;
    margin-top: 21px;
    border: 1px solid rgba(216, 189, 126, .45);
    border-radius: 4px;
    padding: 10px 18px;
    color: #e8ddc8;
    background: linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(216, 189, 126, .08));
    box-shadow: inset 0 1px rgba(255, 255, 255, .06);
}

.work-traded-notice strong {
    color: #efd79d;
    font-size: 15px;
    letter-spacing: .08em;
}

.work-traded-notice span {
    color: rgba(244, 239, 228, .68);
    font-size: 12px;
}

.work-utility-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid color-mix(in srgb, var(--site-gold, #c9a86a) 25%, transparent);
}

.work-utility-actions button,
.work-utility-actions a {
    display: flex;
    min-height: 49px;
    align-items: center;
    justify-content: center;
    border: 0;
    padding: 0 8px;
    color: color-mix(in srgb, var(--site-paper, #fbf9f4) 82%, var(--site-muted, #69756f));
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    background: transparent;
    cursor: pointer;
}

.work-utility-actions > * + * {
    border-left: 1px solid color-mix(in srgb, var(--site-gold, #c9a86a) 22%, transparent);
}

.work-utility-actions button:hover,
.work-utility-actions a:hover {
    color: var(--site-ink, #101c18);
    background: var(--site-gold-light, #ead7aa);
}

.work-mockup-section,
.work-media-section,
.work-rights-section,
.work-related-section {
    margin-top: 34px;
    border: 1px solid var(--detail-line);
    border-radius: 8px;
    padding: 30px;
    background: var(--detail-paper);
    box-shadow: 0 18px 46px rgba(55, 47, 31, .07);
}

.work-mockup-buy-button {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 14px;
    width: 100%;
    min-height: 62px;
    align-items: center;
    margin-top: 18px;
    border: 1px solid var(--site-gold, #c9a86a);
    border-radius: 8px;
    padding: 10px 15px;
    color: var(--site-ink, #101c18);
    background: linear-gradient(135deg, var(--site-gold-light, #ead7aa), var(--site-gold, #c9a86a));
    box-shadow: 0 9px 22px color-mix(in srgb, var(--site-ink, #101c18) 13%, transparent);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.work-mockup-buy-button span { font-size: 11px; opacity: .72; }
.work-mockup-buy-button strong { grid-column: 1; font-size: 15px; letter-spacing: .03em; }
.work-mockup-buy-button i { grid-column: 2; grid-row: 1 / 3; font-size: 24px; font-style: normal; }
.work-mockup-buy-button:hover { transform: translateY(-2px); filter: brightness(1.03); box-shadow: 0 14px 30px color-mix(in srgb, var(--site-ink, #101c18) 20%, transparent); }

.work-mockup-section {
    display: grid;
    grid-template-columns: minmax(280px, .72fr) minmax(420px, 1.28fr);
    min-height: 560px;
    overflow: hidden;
    padding: 0;
}

.work-mockup-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 52px clamp(30px, 4vw, 64px);
    background: linear-gradient(145deg, #fffdfa, #f4efe3);
}

.work-mockup-copy > span {
    margin-bottom: 9px;
    color: #a77d30;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .2em;
}

.work-mockup-copy h2 {
    margin: 0;
    color: var(--detail-green-dark);
    font-family: Georgia, "Songti SC", "STSong", "Microsoft YaHei", serif;
    font-size: clamp(26px, 3vw, 38px);
}

.work-mockup-copy > p {
    margin: 20px 0 0;
    color: var(--detail-muted);
    font-size: 14px;
    line-height: 1.9;
}

.work-cushion-section { margin-top: 18px; }
.work-cushion-section .work-mockup-copy { background: linear-gradient(145deg, #f8f4ea, #ebe5d8); }
.work-mug-section { margin-top: 18px; }
.work-mug-section .work-mockup-copy { background: linear-gradient(145deg, #fffaf0, #eee5d5); }
.work-hoodie-section { margin-top: 18px; }
.work-hoodie-section .work-mockup-copy { background: linear-gradient(145deg, #f4f1e9, #e5dfd2); }
.work-canvas-section { margin-top: 18px; }
.work-canvas-section .work-mockup-copy { background: linear-gradient(145deg, #faf6ed, #e8e0d2); }
.work-phone-case-section { margin-top: 18px; }
.work-phone-case-section .work-mockup-copy { background: linear-gradient(145deg, #f5f4f0, #e2e2dd); }
.work-tote-section { margin-top: 18px; }
.work-tote-section .work-mockup-copy { background: linear-gradient(145deg, #faf3e3, #e8dcc7); }
.work-skateboard-section { margin-top: 18px; }
.work-skateboard-section .work-mockup-copy { background: linear-gradient(145deg, #f0eee8, #dcd8cf); }
.work-sticker-section { margin-top: 18px; }
.work-sticker-section .work-mockup-copy { background: linear-gradient(145deg, #fffaf0, #eae3d5); }
.work-cushion-guide { display: grid; gap: 9px; margin-top: 28px; border-left: 3px solid var(--detail-gold); padding: 14px 0 14px 18px; }
.work-cushion-guide strong { margin-bottom: 2px; color: var(--detail-green-dark); font-size: 13px; }
.work-cushion-guide span { position: relative; padding-left: 14px; color: #6c766f; font-size: 12px; }
.work-cushion-guide span::before { position: absolute; top: 6px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--detail-gold); content: ''; }

.work-mockup-colors {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
}

.work-mockup-colors button {
    display: inline-flex;
    height: 40px;
    align-items: center;
    gap: 8px;
    border: 1px solid #ded5c3;
    border-radius: 4px;
    padding: 0 12px;
    color: #56625b;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    background: #fff;
    cursor: pointer;
}

.work-mockup-colors button:hover,
.work-mockup-colors button.is-active {
    border-color: var(--detail-green);
    color: var(--detail-green-dark);
    box-shadow: 0 0 0 1px var(--detail-green);
}

.work-mockup-colors i {
    width: 17px;
    height: 17px;
    border: 1px solid rgba(23, 55, 44, .22);
    border-radius: 50%;
    background: var(--swatch);
    box-shadow: inset 0 1px 2px rgba(255,255,255,.35);
}

.work-mockup-more-colors {
    flex-basis: 100%;
}

.work-mockup-more-colors summary {
    width: fit-content;
    padding: 3px 0;
    color: var(--detail-green);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.work-mockup-more-colors > div {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.work-mockup-copy > small {
    margin-top: 24px;
    color: #989181;
    font-size: 11px;
    line-height: 1.7;
}

.work-mockup-editor {
    display: grid;
    gap: 14px;
    margin-top: 26px;
    border-top: 1px solid #ded5c3;
    padding-top: 22px;
}

.work-mockup-editor label {
    display: grid;
    gap: 8px;
}

.work-mockup-editor label > span {
    display: flex;
    justify-content: space-between;
    color: #44534b;
    font-size: 12px;
    font-weight: 800;
}

.work-mockup-editor output {
    color: #9a742c;
    font-variant-numeric: tabular-nums;
}

.work-mockup-editor input[type="range"] {
    width: 100%;
    accent-color: var(--detail-green);
    cursor: pointer;
}

.work-mockup-editor > button {
    justify-self: start;
    border: 0;
    border-bottom: 1px solid #b9944c;
    padding: 2px 0;
    color: var(--detail-green);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    background: transparent;
    cursor: pointer;
}

.work-mockup-canvas {
    position: relative;
    display: grid;
    min-height: 560px;
    place-items: center;
    overflow: hidden;
    padding: 18px 30px 36px;
    background: linear-gradient(145deg, #d9d3c5, #eee9df 48%, #c9c3b6);
}

.work-mockup-canvas::before {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(31, 52, 42, .12) .7px, transparent .7px);
    background-size: 7px 7px;
    content: '';
    opacity: .2;
}

.work-mockup-glow {
    position: absolute;
    width: 62%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(255,255,255,.62);
    filter: blur(18px);
}

.work-shirt-product,
.work-cushion-product,
.work-mug-product,
.work-hoodie-product,
.work-canvas-product,
.work-phone-case-product,
.work-tote-product,
.work-skateboard-product,
.work-sticker-product {
    position: relative;
    z-index: 1;
    width: min(100%, 570px);
    aspect-ratio: 1;
    filter: drop-shadow(0 22px 18px rgba(22, 35, 29, .22));
}

.work-canvas-product {
    --canvas-inset: clamp(9px, 1.8vw, 18px);
    width: auto;
    height: min(68vw, 470px);
    max-width: 570px;
    max-height: 500px;
    aspect-ratio: var(--canvas-ratio, .725);
    padding: var(--canvas-inset);
    border: clamp(8px, 1.5vw, 15px) solid #b98a55;
    background: #f7f1e6;
    box-shadow: inset 0 0 0 2px rgba(77, 48, 24, .48), inset 0 0 14px rgba(61, 39, 20, .24), 0 24px 32px rgba(22, 35, 29, .2);
    filter: none;
}

.work-shirt-base,
.work-shirt-texture,
.work-cushion-base,
.work-cushion-texture,
.work-mug-base,
.work-mug-texture,
.work-hoodie-base,
.work-hoodie-texture,
.work-canvas-base,
.work-canvas-texture,
.work-phone-case-base,
.work-phone-case-texture,
.work-phone-case-camera,
.work-tote-base,
.work-tote-texture,
.work-skateboard-base,
.work-skateboard-texture,
.work-sticker-base,
.work-sticker-texture {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.work-shirt-tint {
    position: absolute;
    z-index: 2;
    inset: 0;
    background: var(--shirt-color);
    mix-blend-mode: multiply;
    -webkit-mask: url('/static/preview/tshirt-realistic.png') center / contain no-repeat;
    mask: url('/static/preview/tshirt-realistic.png') center / contain no-repeat;
}

.work-cushion-tint {
    position: absolute;
    z-index: 2;
    inset: 0;
    background: var(--shirt-color);
    mix-blend-mode: multiply;
    -webkit-mask: url('/static/preview/cushion-realistic.png') center / contain no-repeat;
    mask: url('/static/preview/cushion-realistic.png') center / contain no-repeat;
}

.work-mug-tint {
    position: absolute;
    z-index: 2;
    inset: 0;
    background: var(--shirt-color);
    mix-blend-mode: multiply;
    -webkit-mask: url('/static/preview/mug-realistic.png') center / contain no-repeat;
    mask: url('/static/preview/mug-realistic.png') center / contain no-repeat;
}

.work-hoodie-tint {
    position: absolute;
    z-index: 2;
    inset: 0;
    background: var(--shirt-color);
    mix-blend-mode: multiply;
    -webkit-mask: url('/static/preview/hoodie-realistic.png') center / contain no-repeat;
    mask: url('/static/preview/hoodie-realistic.png') center / contain no-repeat;
}

.work-canvas-tint {
    position: absolute;
    z-index: 2;
    inset: var(--canvas-inset);
    background: var(--shirt-color);
    mix-blend-mode: multiply;
    opacity: .35;
}

.work-phone-case-tint {
    position: absolute;
    z-index: 2;
    inset: 0;
    background: var(--shirt-color);
    mix-blend-mode: multiply;
    -webkit-mask: url('/static/preview/phone-case-realistic.png') center / contain no-repeat;
    mask: url('/static/preview/phone-case-realistic.png') center / contain no-repeat;
}

.work-tote-tint {
    position: absolute;
    z-index: 2;
    inset: 0;
    background: var(--shirt-color);
    mix-blend-mode: multiply;
    -webkit-mask: url('/static/preview/tote-bag-realistic.png') center / contain no-repeat;
    mask: url('/static/preview/tote-bag-realistic.png') center / contain no-repeat;
}

.work-shirt-print,
.work-cushion-print,
.work-mug-print,
.work-hoodie-print,
.work-canvas-print,
.work-phone-case-print,
.work-tote-print,
.work-skateboard-print,
.work-sticker-print {
    --print-area-width: 27.4%;
    --print-area-height: 29%;
    position: absolute;
    z-index: 3;
    top: 42.7%;
    left: 50%;
    display: grid;
    width: var(--print-area-width);
    height: var(--print-area-height);
    place-items: center;
    overflow: hidden;
    touch-action: none;
    cursor: grab;
    transform: translate(-50%, -50%);
    user-select: none;
}

.work-cushion-print {
    top: 50%;
    --print-area-width: 60%;
    --print-area-height: 60%;
}

.work-mug-print {
    top: 49%;
    left: 46%;
    --print-area-width: 27%;
    --print-area-height: 36%;
    border-radius: 10%;
}

.work-hoodie-print {
    top: 43.5%;
    --print-area-width: 36%;
    --print-area-height: 28%;
}

.work-canvas-print {
    inset: var(--canvas-inset);
    width: auto;
    height: auto;
    z-index: 3;
    transform: none;
}

.work-phone-case-print {
    top: 49%;
    --print-area-width: 36%;
    --print-area-height: 78%;
    border-radius: 16%;
}

.work-tote-print {
    top: 64%;
    --print-area-width: 42%;
    --print-area-height: 40%;
}

.work-skateboard-print {
    top: 49%;
    --print-area-width: 21%;
    --print-area-height: 90%;
    border-radius: 44% / 10%;
}

.work-sticker-print {
    top: 50%;
    --print-area-width: 100%;
    --print-area-height: 100%;
    overflow: visible;
}

.sticker-art {
    position: absolute;
    display: block;
    overflow: hidden;
}

.sticker-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center;
    will-change: transform;
}

.sticker-art.is-circle-one { top: 9.5%; left: 19%; width: 27%; height: 27%; border-radius: 50%; }
.sticker-art.is-square-one { top: 9.5%; left: 54.5%; width: 29.5%; height: 25.5%; border-radius: 13%; }
.sticker-art.is-vertical { top: 39%; left: 22%; width: 19%; height: 29%; border-radius: 13%; }
.sticker-art.is-circle-two { top: 38.5%; left: 54%; width: 26.5%; height: 26.5%; border-radius: 50%; }
.sticker-art.is-square-two { top: 70%; left: 20.5%; width: 22.5%; height: 21%; border-radius: 13%; }
.sticker-art.is-blob { top: 68%; left: 50%; width: 33%; height: 23%; border-radius: 48% 52% 44% 56% / 55% 48% 52% 45%; }

.work-shirt-print.is-dragging,
.work-cushion-print.is-dragging,
.work-mug-print.is-dragging,
.work-hoodie-print.is-dragging,
.work-canvas-print.is-dragging,
.work-phone-case-print.is-dragging,
.work-tote-print.is-dragging,
.work-skateboard-print.is-dragging,
.work-sticker-print.is-dragging {
    cursor: grabbing;
}

.work-shirt-print img,
.work-cushion-print img,
.work-mug-print img,
.work-hoodie-print img,
.work-canvas-print img,
.work-phone-case-print img,
.work-tote-print img,
.work-skateboard-print img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-origin: center;
    will-change: transform;
    user-select: none;
}

.work-canvas-print img { object-fit: cover; }

.work-wall-art-scene {
    position: relative;
    aspect-ratio: 16 / 9;
    min-height: 360px;
    overflow: hidden;
    background: #d8c8b4 url('/static/preview/living-room-wall-art-realistic.webp') center / cover no-repeat;
}

.work-wall-art-frame {
    position: absolute;
    z-index: 3;
    top: 15%;
    left: 54%;
    height: clamp(105px, 12vw, 165px);
    max-width: 30%;
    aspect-ratio: var(--canvas-ratio, .725);
    padding: clamp(5px, .65vw, 9px);
    border: clamp(6px, .8vw, 10px) solid #8d6743;
    background: #eee7da;
    box-shadow: inset 0 0 0 1px #4f3521, 7px 12px 20px rgba(48, 34, 22, .3);
    transform: translateX(-50%);
}

.work-wall-art-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }

.work-wall-art-caption { position: absolute; z-index: 6; right: 18px; bottom: 14px; padding: 6px 10px; border-radius: 999px; color: #f8f2e8; background: rgba(38, 45, 40, .68); font-size: 11px; }

.work-shirt-texture,
.work-cushion-texture,
.work-mug-texture,
.work-hoodie-texture,
.work-canvas-texture,
.work-phone-case-texture,
.work-tote-texture,
.work-skateboard-texture,
.work-sticker-texture {
    z-index: 4;
    opacity: .17;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.work-phone-case-camera {
    z-index: 5;
    clip-path: polygon(27% 7%, 52% 7%, 52% 32%, 27% 32%);
    pointer-events: none;
}

.work-phone-case-camera-tint {
    position: absolute;
    z-index: 6;
    inset: 0;
    background: var(--shirt-color);
    clip-path: polygon(27% 7%, 52% 7%, 52% 32%, 27% 32%);
    mix-blend-mode: multiply;
    -webkit-mask: url('/static/preview/phone-case-realistic.png') center / contain no-repeat;
    mask: url('/static/preview/phone-case-realistic.png') center / contain no-repeat;
    pointer-events: none;
}


.work-mockup-canvas > span {
    position: absolute;
    z-index: 2;
    bottom: 24px;
    color: #68736c;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
}

.work-media-section > header,
.work-rights-section > header,
.work-related-section > header {
    margin-bottom: 24px;
}

.work-media-section > header > span,
.work-rights-section > header > span,
.work-related-section > header span {
    display: block;
    margin-bottom: 7px;
    color: #a77d30;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
}

.work-media-section h2,
.work-rights-section h2,
.work-related-section h2 {
    margin: 0;
    color: var(--detail-green-dark);
    font-family: Georgia, "Songti SC", "STSong", "Microsoft YaHei", serif;
    font-size: 25px;
    line-height: 1.35;
    letter-spacing: .03em;
}

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

.work-video-grid video {
    width: 100%;
    max-height: 520px;
    border: 8px solid #eee7d8;
    border-radius: 6px;
    background: #101b17;
}

.work-text-sample {
    max-height: 360px;
    overflow-y: auto;
    margin-top: 18px;
    border-left: 3px solid var(--detail-gold);
    padding: 18px 20px;
    color: #5f6b64;
    font-size: 14px;
    line-height: 1.95;
    white-space: pre-wrap;
    background: #f8f5ed;
}

.work-certificate-section {
    margin-top: 22px;
}

.work-certificate-card {
    position: relative;
    overflow: hidden;
    border: 1px solid #d8c294;
    border-radius: 8px;
    padding: clamp(24px, 4vw, 44px);
    color: #20362e;
    background:
        linear-gradient(135deg, rgba(255,255,255,.92), rgba(247,241,226,.96)),
        repeating-linear-gradient(45deg, rgba(176, 137, 64, .08) 0 1px, transparent 1px 12px);
    box-shadow: 0 24px 70px rgba(49, 74, 61, .14);
}

.work-certificate-card::before {
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(176, 137, 64, .42);
    border-radius: 5px;
    pointer-events: none;
    content: '';
}

.work-certificate-watermark {
    position: absolute;
    right: 6%;
    bottom: -24px;
    color: rgba(52, 96, 75, .055);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(96px, 17vw, 230px);
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
}

.work-certificate-header,
.work-certificate-body,
.work-chain-panel,
.work-certificate-footer {
    position: relative;
    z-index: 1;
}

.work-certificate-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid rgba(176, 137, 64, .35);
    padding-bottom: 24px;
}

.work-certificate-header span,
.work-certificate-summary span,
.work-chain-panel span,
.certificate-title-row span {
    display: block;
    color: #a77d30;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .18em;
}

.work-certificate-header h2 {
    margin: 8px 0 10px;
    color: var(--detail-green-dark);
    font-family: Georgia, "Songti SC", "STSong", "Microsoft YaHei", serif;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.15;
}

.work-certificate-header p {
    max-width: 620px;
    margin: 0;
    color: #69766e;
    font-size: 13px;
    line-height: 1.8;
}

.work-certificate-header strong {
    flex: none;
    border: 1px solid rgba(167, 125, 48, .35);
    border-radius: 999px;
    padding: 9px 14px;
    color: #7b5a22;
    background: rgba(255,255,255,.64);
    font-size: 12px;
    letter-spacing: .08em;
}

.work-certificate-body {
    display: grid;
    grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
    gap: clamp(22px, 4vw, 40px);
    padding: 30px 0;
}

.work-certificate-cover {
    overflow: hidden;
    border: 10px solid #fff;
    border-radius: 6px;
    aspect-ratio: 4 / 5;
    background: #eee7d8;
    box-shadow: 0 18px 38px rgba(41, 59, 50, .16);
}

.work-certificate-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.certificate-title-row h3 {
    margin: 7px 0 18px;
    color: #1f342d;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.3;
}

.work-certificate-info dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

.work-certificate-info dl div {
    min-width: 0;
    border: 1px solid rgba(222, 211, 188, .9);
    border-radius: 5px;
    padding: 14px 16px;
    background: rgba(255,255,255,.55);
}

.work-certificate-info dt {
    margin-bottom: 7px;
    color: #8c7d63;
    font-size: 11px;
    font-weight: 800;
}

.work-certificate-info dd {
    overflow: hidden;
    margin: 0;
    color: #263d34;
    font-size: 14px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.work-chain-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid rgba(39, 75, 59, .18);
    border-radius: 6px;
    padding: 16px 18px;
    background: rgba(31, 54, 46, .94);
}

.work-chain-panel code {
    display: block;
    overflow-wrap: anywhere;
    margin-top: 8px;
    color: #f8e2ae;
    font-size: 15px;
    font-weight: 800;
}

.work-chain-panel button {
    flex: none;
    border: 1px solid rgba(248, 226, 174, .48);
    border-radius: 4px;
    padding: 10px 14px;
    color: #f8e2ae;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    background: transparent;
    cursor: pointer;
}

.work-certificate-footer {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 22px;
    align-items: center;
    margin-top: 24px;
}

.work-certificate-seal {
    display: grid;
    width: 112px;
    height: 112px;
    place-items: center;
    border: 2px solid rgba(165, 47, 53, .72);
    border-radius: 50%;
    color: #a52f35;
    transform: rotate(-10deg);
}

.work-certificate-seal span {
    font-size: 36px;
    font-weight: 900;
    line-height: 1;
}

.work-certificate-seal em {
    margin-top: -22px;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.work-chain-fingerprint {
    display: grid;
    grid-template-columns: repeat(16, minmax(0, 1fr));
    gap: 4px;
}

.work-chain-fingerprint i {
    display: block;
    height: 18px;
    border-radius: 2px;
    background: rgba(47, 90, 71, var(--fingerprint-alpha));
}

.work-certificate-summary {
    min-width: 190px;
    text-align: right;
}

.work-certificate-summary strong {
    display: block;
    margin-top: 8px;
    color: #263d34;
    font-size: 15px;
    overflow-wrap: anywhere;
}

.work-rights-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.work-rights-grid article {
    min-width: 0;
    border: 1px solid #e9dfca;
    border-radius: 5px;
    padding: 22px;
    background: #faf7ef;
}

.work-rights-grid article > span {
    display: inline-grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    color: #f4ddb0;
    font-family: Georgia, serif;
    font-size: 12px;
    font-weight: 800;
    background: var(--detail-green);
}

.work-rights-grid h3 {
    margin: 15px 0 0;
    color: #25382e;
    font-size: 16px;
}

.work-rights-grid p {
    margin: 9px 0 0;
    color: var(--detail-muted);
    font-size: 13px;
    line-height: 1.8;
}

.work-rules-detail {
    margin-top: 18px;
    border-top: 1px solid #e9dfca;
    padding-top: 18px;
}

.work-rules-detail summary {
    color: var(--detail-green);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.work-rules-detail > div {
    margin-top: 12px;
    color: var(--detail-muted);
    font-size: 13px;
    line-height: 1.8;
}

.work-rules-detail p {
    margin: 5px 0;
}

.work-related-section > header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

.work-related-section > header > a {
    border-bottom: 1px solid #c9a85d;
    padding-bottom: 3px;
    color: var(--detail-green);
    font-size: 12px;
    font-weight: 800;
}

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

.work-related-card {
    display: block;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e3d9c3;
    border-radius: 5px;
    padding-bottom: 16px;
    color: inherit;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.work-related-card:hover {
    border-color: #c8aa66;
    box-shadow: 0 14px 34px rgba(57, 49, 31, .12);
    transform: translateY(-3px);
}

.work-related-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #eee9dd;
}

.work-related-card > span,
.work-related-card > strong,
.work-related-card > em {
    display: block;
    margin-right: 16px;
    margin-left: 16px;
}

.work-related-card > span {
    margin-top: 14px;
    color: #9a742c;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
}

.work-related-card > strong {
    overflow: hidden;
    margin-top: 6px;
    color: #26362e;
    font-size: 14px;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.work-related-card > em {
    margin-top: 10px;
    color: #8f661e;
    font-family: Georgia, serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
}

@media (max-width: 1180px) {
    .work-show-shell {
        width: min(100% - 40px, 1120px);
    }

    .work-show-hero {
        grid-template-columns: minmax(0, 1fr) 410px;
        gap: 22px;
    }

    .work-title-meta,
    .work-purchase-box {
        padding-right: 24px;
        padding-left: 24px;
    }

    .work-labels {
        padding-right: 24px;
        padding-left: 24px;
    }

    .work-description {
        margin-right: 24px;
        margin-left: 24px;
    }

    .work-merchant {
        padding-right: 24px;
        padding-left: 24px;
    }

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

@media (max-width: 900px) {
    .work-show-shell {
        width: min(100% - 28px, 760px);
    }

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

    .work-purchase-panel {
        position: static;
    }

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

    .work-certificate-body,
    .work-certificate-footer {
        grid-template-columns: 1fr;
    }

    .work-certificate-cover {
        max-width: 260px;
    }

    .work-certificate-summary {
        text-align: left;
    }

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

    .work-mockup-copy {
        padding: 36px;
    }
}

@media (max-width: 620px) {
    .work-show-shell {
        width: calc(100% - 20px);
        padding-top: 12px;
        padding-bottom: 48px;
    }

    .work-breadcrumb {
        min-height: 34px;
        margin-bottom: 10px;
        gap: 7px;
        font-size: 14px;
    }

    .work-gallery {
        border-radius: 7px;
        padding: 7px;
    }

    .work-gallery-stage {
        min-height: min(80vw, 420px);
        aspect-ratio: auto;
    }

    .work-gallery-stage > img {
        max-height: 80vh;
    }

    .work-gallery-stage::before {
        inset: 9px;
    }

    .work-gallery-stage > span {
        right: 16px;
        bottom: 16px;
    }

    .work-gallery-thumbs {
        grid-auto-columns: 66px;
        gap: 7px;
        margin-top: 8px;
    }

    .work-gallery-thumbs button {
        width: 66px;
        height: 56px;
    }

    .work-title-meta,
    .work-merchant,
    .work-purchase-box {
        padding-right: 18px;
        padding-left: 18px;
    }

    .work-title-meta {
        padding-top: 24px;
    }

    .work-title-meta h1 {
        font-size: 28px;
    }

    .work-labels {
        padding-right: 18px;
        padding-left: 18px;
    }

    .work-description {
        margin-right: 18px;
        margin-left: 18px;
    }

    .work-price-row strong {
        font-size: 32px;
    }

    .work-merchant {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .work-merchant-mark {
        display: none;
    }

    .work-merchant > img,
    .work-merchant > .fallback {
        width: 42px;
        height: 42px;
    }

    .work-merchant > strong {
        display: none;
    }

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

    .work-utility-actions a {
        grid-column: 1 / -1;
        border-top: 1px solid rgba(234, 213, 166, .16);
        border-left: 0;
    }

    .work-mockup-section,
    .work-media-section,
    .work-certificate-section,
    .work-rights-section,
    .work-related-section {
        margin-top: 18px;
        padding: 20px 16px;
    }

    .work-certificate-section {
        padding: 0;
    }

    .work-certificate-card {
        padding: 26px 18px;
    }

    .work-certificate-card::before {
        inset: 8px;
    }

    .work-certificate-header,
    .work-chain-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .work-certificate-header strong,
    .work-chain-panel button {
        width: fit-content;
    }

    .work-certificate-body {
        padding: 24px 0;
    }

    .work-certificate-info dl {
        grid-template-columns: 1fr;
    }

    .work-certificate-seal {
        width: 90px;
        height: 90px;
    }

    .work-chain-fingerprint {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    .work-mockup-section {
        min-height: 0;
        padding: 0;
    }

    .work-mockup-copy {
        padding: 28px 20px;
    }

    .work-mockup-canvas {
        min-height: 390px;
        padding: 10px 6px 30px;
    }

    .work-media-section h2,
    .work-rights-section h2,
    .work-related-section h2 {
        font-size: 21px;
    }

    .work-video-grid,
    .work-related-grid {
        grid-template-columns: 1fr;
    }

    .work-related-section > header {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .work-buy-button,
    .work-related-card {
        transition: none;
    }
}