/* Recharge modal. The area outside the window stays completely transparent. */
.zg-recharge {
    position: fixed; inset: 0; z-index: 2147483000;
    display: flex; align-items: center; justify-content: center;
    padding: 16px; background: transparent; box-sizing: border-box;
    color: #493723; font: 14px/1.6 -apple-system, BlinkMacSystemFont, "Microsoft YaHei", sans-serif;
    touch-action: auto;
}
.zg-recharge[hidden], .zg-recharge [hidden] { display: none !important; }
.zg-recharge * { box-sizing: border-box; }
.zg-recharge button, .zg-recharge input { font: inherit; }
.zg-recharge button { cursor: pointer; }
.zg-dialog {
    position: relative; width: min(100%, 640px); max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain;
    border: 1px solid #c39c5e; border-radius: 12px;
    background: #f6efdf; box-shadow: 0 8px 24px #0004, inset 0 0 0 4px #e8d7b7;
    scrollbar-width: thin; scrollbar-color: #b49a72 #f6efdf;
}
.zg-shop-header {
    position: relative; min-height: 154px; overflow: hidden; padding: 22px 28px 20px;
    border-bottom: 3px solid #c7a567;
    background: radial-gradient(ellipse at 72% 90%, #aa5543 0, transparent 55%), linear-gradient(115deg, #3b1719, #78322a 65%, #44211f);
    color: #f9e8bd; isolation: isolate;
}
.zg-shop-header::before {
    content: ""; position: absolute; inset: 7px; z-index: -1;
    border: 1px solid #dfb97545; border-radius: 5px;
}
.zg-shop-header::after {
    content: ""; position: absolute; width: 230px; height: 230px; top: 20px; right: 28px;
    border: 1px solid #e1b97440; border-radius: 50%; z-index: -1;
    box-shadow: 0 0 0 8px #e1b97408, 0 0 0 9px #e1b97416;
}
.zg-shop-beauty {
    position: absolute; width: 200px; height: 200px; object-fit: contain;
    right: 38px; bottom: -49px; z-index: -1; filter: drop-shadow(-8px 4px 10px #210b1655);
}
.zg-close {
    position: absolute; right: 16px; top: 15px; padding: 5px 11px;
    color: #f1dab0; border: 1px solid #d8b37366; border-radius: 5px;
    background: #3b1719; font-size: 12px !important;
}
.zg-close:hover { background: #602b25; }
.zg-eyebrow { display: flex; align-items: center; gap: 7px; margin: 0 0 9px; font-size: 10px; letter-spacing: 2px; color: #dcc393; }
.zg-seal { display: inline-grid; place-items: center; width: 22px; height: 24px; border: 1px solid #b79968; font-family: "Songti SC", SimSun, serif; font-size: 15px; }
.zg-dialog h2 { margin: 0; font: 35px/1.4 "Songti SC", SimSun, serif; letter-spacing: 6px; color: #ffedc9; }
.zg-subtitle { margin: 8px 0 0; font-size: 11px; letter-spacing: 2px; color: #d8bc95; }
.zg-shop-body { padding: 18px 26px 15px; }
.zg-role-bar { display: flex; align-items: baseline; gap: 13px; padding: 10px 13px; border: 1px solid #dfcfaf; background: #ede3ce; border-radius: 5px; }
.zg-role-label { flex-shrink: 0; color: #8d785c; font-size: 11px; }
.zg-role { margin: 0; color: #57402a; font-size: 13px; overflow-wrap: anywhere; min-width: 0; }
.zg-section-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 12px; }
.zg-section-title h3 { margin: 0; font: 18px/1.4 "Songti SC", SimSun, serif; letter-spacing: 2px; }
.zg-section-title > span { font-size: 11px; color: #947444; }
.zg-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.zg-product {
    display: flex; flex-direction: column; align-items: center; position: relative; min-width: 0;
    padding: 10px 0 0; overflow: hidden; border: 1px solid #d8be91; border-radius: 6px;
    color: #6b4723; background: radial-gradient(ellipse at 50% 40%, #fffdf3, #f5e6c9);
    box-shadow: inset 0 0 0 3px #fff9ec, 0 2px 3px #977d4510;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.zg-product:hover { border-color: #a74731; transform: translateY(-2px); box-shadow: inset 0 0 0 3px #fff9ec, 0 5px 12px #8a4b2822; }
.zg-product-caption { font-size: 9px; letter-spacing: 2px; color: #a58a60; }
.zg-ingot { display: block; width: min(100%, 145px); height: 66px; object-fit: contain; margin: 0; }
.zg-product strong { font-size: 25px; font-weight: 600; line-height: 1.3; margin: 0 0 9px; font-variant-numeric: tabular-nums; }
.zg-product strong small { font-size: 11px; font-weight: 400; }
.zg-product-price { display: flex; align-items: center; justify-content: center; gap: 3px; width: 100%; padding: 6px 8px; border-top: 1px solid #dac39b; background: #ecdbbb; font-size: 16px; color: #7c3d26; }
.zg-product-price > small { font-size: 10px; }
.zg-product-price > span { margin-left: auto; font-size: 10px; color: #886c44; }
.zg-product-price > small { margin-left: 3px; }
.zg-custom-entry { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-top: 14px; padding: 11px 13px; border: 1px solid #d6be98; border-radius: 5px; background: #f2e7d3; color: #826c4e; text-align: left; font-size: 12px !important; }
.zg-custom-entry strong { color: #963e2c; font-weight: 500; }
.zg-custom-entry:hover { background: #edddbe; }
.zg-note { color: #8c7b63; font-size: 11px; line-height: 1.7; margin: 8px 0; }
.zg-shop-note { text-align: center; margin: 10px 0 0; }
.zg-summary { margin: 0 0 19px; padding: 4px 0 13px; border-bottom: 1px solid #deceb1; }
.zg-summary > div { display: flex; justify-content: space-between; gap: 20px; margin: 8px 0; }
.zg-summary dt { color: #8c7859; font-size: 12px; flex-shrink: 0; }
.zg-summary dd { margin: 0; text-align: right; overflow-wrap: anywhere; font-size: 13px; color: #624229; }
.zg-label { display: flex; justify-content: space-between; align-items: center; font-size: 13px; margin: 0 0 8px; }
.zg-label small { font-size: 10px; font-weight: 400; color: #9b8666; }
.zg-amount { display: flex; align-items: center; gap: 10px; padding: 9px 15px; border: 1px solid #ba955d; background: #fffcf4; border-radius: 6px; }
.zg-amount > span { font-size: 24px; color: #9b6d32; }
.zg-amount input { width: 100%; min-width: 0; border: none; background: none; color: #643c20; font-size: 30px; line-height: 1.3; outline: none; font-variant-numeric: tabular-nums; }
.zg-amount .zg-amount-unit { font-size: 12px; color: #9b8666; }
.zg-amount:focus-within { border-color: #ab6241; box-shadow: 0 0 0 3px #c3925c22; }
.zg-total { display: flex; align-items: center; gap: 8px; padding: 9px 13px; margin: 15px 0; border: 1px solid #d9bc87; border-radius: 6px; background: radial-gradient(ellipse at 8% 50%, #fff2c1, #efdfbd 65%); }
.zg-total > img { width: 98px; height: 64px; object-fit: contain; }
.zg-total > div { display: flex; flex-direction: column; }
.zg-total > div > span { color: #a1834d; font-size: 10px; }
.zg-total strong { color: #8b4f24; font-size: 25px; font-weight: 600; font-variant-numeric: tabular-nums; }
.zg-total-mark { margin-left: auto; border: 1px solid #caaa71; color: #a6854f; padding: 3px 7px; font-size: 10px; }
.zg-payment { display: flex; align-items: center; gap: 9px; margin: 14px 0; font-size: 12px; }
.zg-alipay { display: inline-grid; place-items: center; width: 29px; height: 29px; background: #2879b4; color: white; font-size: 20px; border-radius: 6px; }
.zg-payment small { display: block; font-size: 10px; color: #9a866a; }
.zg-actions { display: flex; gap: 10px; margin-top: 17px; }
.zg-actions button { padding: 12px 17px; border-radius: 5px; }
.zg-primary { flex: 1; border: 1px solid #873828; background: linear-gradient(#b25439, #913a29); color: #ffedcd; box-shadow: inset 0 0 0 3px #be754344; letter-spacing: 1px; }
.zg-primary:hover { background: linear-gradient(#bc6144, #a3442e); }
.zg-secondary { border: 1px solid #c6ad83; background: #eee2cc; color: #856b48; }
.zg-recharge button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.zg-recharge :focus-visible { outline: 2px solid #ae703a; outline-offset: 3px; }
.zg-recharge input:focus-visible { outline: none; }
#recharge-error { color: #a7442f; font-size: 12px; margin: 10px 0 0; overflow-wrap: anywhere; }
#recharge-error:empty { display: none; }
.zg-bottom-line { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; color: #b19a77; font: 10px/1.4 "Songti SC", SimSun, serif; letter-spacing: 3px; }
.zg-bottom-line span { width: 35px; height: 1px; background: #d8c6a8; }
@media (max-width: 480px) {
    .zg-recharge { padding: 10px; }
    .zg-dialog { max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); border-radius: 9px; }
    .zg-shop-header { min-height: 142px; padding: 20px 18px 18px; }
    .zg-shop-beauty { width: 172px; height: 172px; right: 4px; bottom: -35px; }
    .zg-shop-header::after { right: -24px; }
    .zg-close { right: 12px; top: 12px; font-size: 10px !important; padding: 4px 8px; }
    .zg-eyebrow { font-size: 9px; letter-spacing: 1px; }
    .zg-dialog h2 { font-size: 30px; letter-spacing: 4px; }
    .zg-subtitle { font-size: 9px; letter-spacing: 1px; max-width: 180px; }
    .zg-shop-body { padding: 14px 14px 12px; }
    .zg-products { gap: 8px; }
    .zg-product { padding-top: 9px; }
    .zg-ingot { height: 54px; }
    .zg-product strong { font-size: 21px; margin-bottom: 8px; }
    .zg-product strong small { font-size: 9px; }
    .zg-product-price { font-size: 14px; padding: 6px; }
    .zg-product-price > span { font-size: 9px; }
    .zg-total { gap: 3px; padding: 8px; }
    .zg-total > img { width: 78px; }
    .zg-total strong { font-size: 22px; }
    .zg-total-mark { font-size: 9px; padding: 2px 4px; }
    .zg-actions button { padding: 12px 10px; font-size: 12px; }
    .zg-section-title { margin-top: 15px; }
}
@media (max-width: 350px) {
    .zg-product-price > span, .zg-total-mark { display: none; }
    .zg-product-price > small { margin-left: 0; }
    .zg-shop-beauty { right: -22px; }
    .zg-role-bar { padding: 8px; gap: 7px; }
}
@media (prefers-reduced-motion: reduce) { .zg-product { transition: none; } }