:root {
  --green: #0add9d;
  --green-dark: #00b981;
  --ink: #171c26;
  --muted: #7b8493;
  --line: #e8ebf0;
  --paper: #fff;
  --canvas: #f4f6f9;
  --orange: #ff8a34;
  --danger: #f43f5e;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif; font-size: 14px; letter-spacing: 0; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
a { color: inherit; text-decoration: none; }

.site-header { height: 82px; background: #fff; display: flex; align-items: center; padding: 0 4.5vw; position: sticky; top: 0; z-index: 30; border-bottom: 1px solid #eff1f4; }
.brand { width: 128px; height: 74px; margin-right: 24px; border: 0; background: transparent; padding: 0; overflow: hidden; flex: 0 0 auto; }
.brand img { width: 118px; height: 78px; object-fit: contain; }
.blank-media { display: block; width: 100%; height: 100%; background: #fff; }
.nav { display: flex; align-items: stretch; gap: 22px; height: 100%; flex: 1; }
.nav button { border: 0; background: transparent; color: #161b24; white-space: nowrap; position: relative; font-weight: 700; font-size: 15px; padding: 0 2px; }
.nav button.hot { color: var(--orange); }
.nav button.active::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: 23px; height: 3px; background: var(--green); border-radius: 3px; }
.mobile-only { display: none; }
.header-actions { display: flex; align-items: center; gap: 10px; margin-left: 22px; }
.icon-action { border: 0; background: none; min-width: 54px; color: #3d4552; font-size: 12px; display: grid; place-items: center; gap: 2px; }
.icon-action b { font-size: 20px; line-height: 1; font-weight: 500; }
.pill-btn { border: 1px solid var(--green); color: var(--green-dark); background: #fff; border-radius: 22px; height: 40px; padding: 0 22px; font-weight: 700; }
.pill-btn.primary, .primary-btn { color: #062a20; background: var(--green); border-color: var(--green); }
.hamburger { display: none; width: 40px; height: 40px; border: 1px solid var(--line); background: #fff; border-radius: 6px; font-size: 22px; }

main { min-height: calc(100vh - 152px); }
.page { width: min(1860px, calc(100% - 40px)); margin: 0 auto; padding: 16px 0 42px; }
.compact-page { width: min(1180px, calc(100% - 40px)); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px 200px; gap: 16px; }
.hero-slider { height: 246px; position: relative; overflow: hidden; border-radius: 8px; background: #dce9ec; }
.blank-image { background: #fff; border: 1px solid #f0f1f3; }
.hero-slider img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-dots { position: absolute; left: 50%; bottom: 12px; display: flex; gap: 7px; transform: translateX(-50%); }
.hero-dots button { width: 9px; height: 9px; border: 0; border-radius: 50%; background: rgba(255,255,255,.65); padding: 0; }
.hero-dots button.active { background: var(--green); }
.qr-panel { background: #3d3e48; border: 1px solid var(--green); border-radius: 6px; color: #fff; padding: 20px 16px; text-align: center; }
.welcome-panel { height: 246px; border-radius: 6px; overflow: hidden; background: #f3f5f7; border: 1px solid var(--green); }
.welcome-panel img { width: 100%; height: 100%; object-fit: cover; }
.qr-panel h3 { margin: 0 0 14px; color: #5af3be; font-size: 18px; }
.qr-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qr-codes img { width: 88px; max-width: 100%; aspect-ratio: 1; object-fit: cover; border: 3px solid var(--green); background: #fff; }
.qr-codes b { display: block; font-size: 12px; color: #07271e; background: var(--green); border-radius: 12px; margin: 5px auto; padding: 3px 4px; }
.qr-codes small { color: #aeb3bc; font-size: 11px; }
.invite-ad { border-radius: 2px; min-height: 246px; padding: 18px; color: #fff; background: linear-gradient(135deg, #09b97f, #007650); overflow: hidden; position: relative; }
.invite-ad h2 { font-size: 25px; margin: 0; line-height: 1.25; }
.invite-ad p { margin: 7px 0; color: #d8fff1; }
.soldier { position: absolute; right: -22px; bottom: -30px; font-size: 100px; filter: grayscale(.2); }

.toolbar, .filter-row, .sort-row { margin-top: 14px; background: #fff; border-radius: 8px; min-height: 66px; padding: 14px 20px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tab-btn, .filter-chip, .sort-btn { height: 40px; border: 1px solid #e2e5e9; border-radius: 7px; background: #fff; padding: 0 20px; color: #555e6d; white-space: nowrap; }
.tab-btn.active { background: var(--green); color: #073326; border-color: var(--green); font-weight: 700; }
.tab-btn.sale::before { content: "◆"; color: #ff365c; margin-right: 6px; }
.search-box { width: min(360px, 100%); height: 42px; border: 0; border-radius: 8px; background: #f2f4f7; display: flex; align-items: center; padding: 0 14px; }
.search-box input { width: 100%; border: 0; outline: 0; background: transparent; padding-left: 8px; }
.more-filter { margin-left: auto; }
.filter-row { min-height: 64px; }
.filter-chip { height: 36px; background: #f7f8fa; padding: 0 14px; }
.filter-chip.active { border-color: var(--green); color: var(--green-dark); background: #ecfff9; }
.sort-row { min-height: 50px; padding-top: 4px; padding-bottom: 4px; }
.sort-btn { border: 0; padding: 0 14px; height: 36px; background: transparent; }
.sort-btn.active { color: var(--green-dark); font-weight: 700; }

.table-wrap { margin-top: 14px; overflow-x: auto; background: #fff; border-radius: 8px; }
.rent-table { width: 100%; border-collapse: collapse; min-width: 1500px; font-size: 12px; }
.rent-table th { color: #525b69; background: #f6f7f9; padding: 11px 8px; font-weight: 500; white-space: nowrap; }
.rent-table td { padding: 8px; border-bottom: 1px solid #f0f2f5; text-align: center; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rent-table tbody tr:hover { background: #f2fffb; }
.fast-tag { display: block; color: #fff; background: #f0b81f; border-radius: 9px; padding: 1px 5px; width: max-content; margin: 0 auto 2px; font-size: 10px; }
.badge { display: inline-block; color: #fff; padding: 3px 9px; border-radius: 12px; font-weight: 700; }
.gold { background: #eabe26; } .blue { background: #4359ef; } .pink { background: #f03279; } .purple { background: #7146df; } .teal { background: #13a88d; } .red { background: #ef334f; }
.thumb { width: 52px; height: 28px; object-fit: cover; background: #202934; }
.order-btn { border: 0; border-radius: 18px; padding: 8px 16px; background: var(--green); color: #052d21; font-weight: 700; }
.price-deposit { color: #e9a112; }
.pagination { display: flex; gap: 8px; justify-content: center; align-items: center; padding: 20px; flex-wrap: wrap; }
.pagination button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.pagination button.active { border-color: var(--green); background: var(--green); }

.trade-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.trade-card { background: #fff; border: 1px solid transparent; border-radius: 8px; overflow: hidden; transition: .2s; }
.trade-card:hover { border-color: var(--green); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(30,45,55,.08); }
.trade-cover { height: 150px; width: 100%; object-fit: cover; background: #263642; }
.trade-body { padding: 16px; }
.trade-body h3 { margin: 0 0 12px; font-size: 15px; line-height: 1.6; height: 48px; overflow: hidden; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); }
.stat-grid div { padding: 8px 5px; text-align: center; border-right: 1px solid var(--line); }
.stat-grid div:last-child { border: 0; }
.stat-grid b { display: block; color: var(--green-dark); font-size: 16px; }
.meta-line { color: #677080; margin: 10px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.card-price { color: #f14444; font-size: 22px; font-weight: 800; }

.breadcrumb { color: #8992a0; margin: 8px 0 16px; }
.breadcrumb b { color: var(--ink); }
.page-banner { height: 220px; width: 100%; object-fit: cover; border-radius: 8px; background: #173f42; }
.section-title { margin: 28px 0 16px; font-size: 24px; }
.content-card { background: #fff; border-radius: 8px; padding: 24px; }
.article-list { display: grid; gap: 16px; }
.article-card { background: #fff; border-radius: 8px; padding: 16px; display: grid; grid-template-columns: 220px 1fr auto; gap: 20px; align-items: center; }
.article-card img { width: 220px; height: 130px; object-fit: cover; border-radius: 5px; }
.article-card h3 { margin: 0 0 12px; font-size: 18px; }
.article-card p { color: #7c8491; line-height: 1.7; }
.news-tabs { display: flex; gap: 8px; margin: 0 0 16px; }

.service-page { min-height: 620px; display: grid; place-items: center; background: #102c2c url("https://www.jujishds.com/assets/banner-right-otarYNID.png") no-repeat right bottom / 320px; border-radius: 8px; overflow: hidden; }
.service-switch { min-height: 62px; margin-bottom: 12px; padding: 10px; display: flex; justify-content: center; align-items: center; gap: 8px; background: #fff; border-radius: 7px; }
.service-switch .tab-btn { min-width: 180px; }
.calculator { width: min(540px, calc(100% - 32px)); background: rgba(255,255,255,.97); border-radius: 8px; padding: 32px; box-shadow: 0 20px 55px rgba(0,0,0,.2); }
.calculator h1 { margin: 0 0 24px; }
.amount-input { display: flex; border: 2px solid var(--green); height: 58px; border-radius: 6px; overflow: hidden; }
.amount-input input { border: 0; outline: 0; padding: 0 14px; flex: 1; min-width: 0; font-size: 20px; }
.amount-input span { background: #effaf6; padding: 18px; font-weight: 700; }
.price-preview { display: flex; justify-content: space-between; margin: 18px 0; }
.wide-btn { width: 100%; min-height: 50px; border: 0; border-radius: 6px; background: var(--green); color: #072c21; font-weight: 800; font-size: 16px; }
.bonus-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 28px; }
.bonus-grid div { background: #f4f6f8; border-radius: 6px; padding: 14px 8px; text-align: center; }
.bonus-grid b { display: block; color: var(--orange); margin-top: 6px; }
.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0; }
.plan { border: 2px solid var(--line); border-radius: 7px; padding: 18px; background: #fff; text-align: left; }
.plan.active { border-color: var(--green); background: #effff9; }
.plan strong { display: block; font-size: 28px; margin-top: 8px; }
.check-row { display: flex; align-items: center; gap: 8px; padding: 14px; background: #f6f7f8; border-radius: 6px; margin-bottom: 16px; }

.lottery-layout { display: grid; grid-template-columns: 520px 1fr; gap: 30px; align-items: start; }
.wheel { width: 460px; height: 460px; max-width: 100%; margin: auto; border: 14px solid #0c3d35; border-radius: 50%; position: relative; overflow: hidden; background: conic-gradient(#10d99c 0 45deg,#fff 45deg 90deg,#ffc848 90deg 135deg,#fff 135deg 180deg,#10d99c 180deg 225deg,#fff 225deg 270deg,#ffc848 270deg 315deg,#fff 315deg); transition: transform 3s cubic-bezier(.18,.78,.2,1); }
.wheel::after { content: "GO\A点击抽奖"; white-space: pre; display: grid; place-items: center; position: absolute; inset: 35%; border-radius: 50%; color: #fff; background: #092f2a; border: 8px solid #fff; font-weight: 800; font-size: 20px; text-align: center; }
.wheel-label { position: absolute; left: 50%; top: 50%; transform-origin: 0 0; font-size: 13px; font-weight: 700; width: 42%; text-align: right; padding-right: 8px; }
.winner-feed { background: #fff; border-radius: 8px; padding: 24px; max-height: 460px; overflow: hidden; }
.winner-feed p { padding: 10px 0; border-bottom: 1px solid var(--line); margin: 0; }
.winner-feed b { color: #f05b39; }
.rules { line-height: 1.9; }
.lottery-page .profile-head { margin: 22px 0 16px; gap: 18px; }
.lottery-page .section-title { margin: 0 0 6px; }
.lottery-page .profile-head p { margin: 0; color: var(--muted); }
.lottery-chances { flex: 0 0 auto; min-width: 116px; padding: 10px 16px; border: 1px solid #b9f0dc; border-radius: 6px; background: #edfff8; text-align: center; }
.lottery-chances small { display: block; color: #56736a; }
.lottery-chances strong { display: block; margin-top: 2px; color: #087352; font-size: 25px; overflow-wrap: anywhere; }
.lottery-public-rules { margin: 10px 0 20px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lottery-public-rules li { min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--green-dark); border-radius: 5px; background: #f8faf9; overflow-wrap: anywhere; }
.lottery-public-rules b, .lottery-public-rules span, .lottery-public-rules small { display: block; }
.lottery-public-rules span { margin-top: 3px; color: #42544e; line-height: 1.55; }
.lottery-public-rules small { margin-top: 3px; color: var(--muted); }
.lottery-rule-empty { margin: 10px 0 20px; padding: 14px; color: var(--muted); background: #f6f8f9; border-radius: 5px; }
.wheel .wheel-label img { width: 28px; height: 28px; margin-right: 5px; object-fit: contain; vertical-align: middle; }
.simulation-label { color: #875f13; background: #fff8dc; border: 1px solid #f0dc98; border-radius: 5px; padding: 9px 10px !important; font-size: 12px; line-height: 1.5; }
.winner-scroll { height: 330px; overflow: hidden; mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent); }
.winner-scroll > div { animation: winner-ticker 24s linear infinite; will-change: transform; }
.winner-scroll p { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; }
.winner-scroll p span { color: #697480; font-variant-numeric: tabular-nums; }
.winner-scroll p b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes winner-ticker { from { transform: translateY(0); } to { transform: translateY(-50%); } }

.lottery-admin-form { min-width: 0; display: grid; gap: 16px; }
.lottery-admin-form > .check-row { margin: 0; }
.lottery-basic-grid { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(260px, 1.3fr); gap: 12px; }
.lottery-basic-grid .form-group { margin: 0; }
.lottery-editor { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.lottery-editor .profile-head { gap: 14px; }
.lottery-editor h3 { margin: 0 0 4px; }
.lottery-editor .profile-head p { margin: 0; color: var(--muted); }
.lottery-editor-head, .lottery-prize-row { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(150px, 1.2fr) minmax(150px, 1fr) 90px auto; gap: 8px; align-items: center; }
.lottery-rule-head, .lottery-rule-row { display: grid; grid-template-columns: minmax(170px, 1.2fr) minmax(100px, .6fr) minmax(100px, .6fr) minmax(160px, 1fr) auto; gap: 8px; align-items: center; }
.lottery-editor-head, .lottery-rule-head { margin: 14px 0 7px; padding: 0 2px; color: #6b7680; font-size: 12px; }
#lottery-prize-rows, #lottery-rule-rows { min-width: 0; display: grid; gap: 8px; }
.lottery-prize-row, .lottery-rule-row { min-width: 0; padding-top: 8px; border-top: 1px solid #eef1f3; }
.lottery-prize-row > *, .lottery-rule-row > * { min-width: 0; }
.lottery-prize-row input, .lottery-prize-row select, .lottery-rule-row input, .lottery-rule-row select { width: 100%; min-width: 0; min-height: 40px; padding: 9px; border: 1px solid #dce1e6; border-radius: 5px; background: #fff; outline: 0; }
.lottery-prize-row input:focus, .lottery-rule-row input:focus, .lottery-rule-row select:focus { border-color: var(--green-dark); }
.lottery-prize-row input[type="file"] { padding: 6px; font-size: 11px; }
.lottery-prize-row button, .lottery-rule-row button { min-height: 38px; margin: 0; white-space: nowrap; }
.lottery-save { justify-self: end; min-width: 180px; min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
  .winner-scroll > div { animation-play-state: paused; }
}

.cashback-hero { min-height: 280px; background: linear-gradient(120deg,#122d33,#096d5b); color: #fff; border-radius: 8px; padding: 42px; display: flex; align-items: center; justify-content: space-between; overflow: hidden; }
.cashback-hero h1 { font-size: 38px; margin: 0 0 12px; }
.cashback-hero strong { font-size: 58px; color: #ffdc55; }
.cashback-columns { display: grid; grid-template-columns: 1.2fr .8fr; gap: 16px; margin-top: 16px; }
.step-list { display: grid; gap: 14px; }
.step { display: grid; grid-template-columns: 42px 1fr; gap: 12px; }
.step span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--green); font-weight: 800; }
.invite-code { font-size: 26px; padding: 18px; text-align: center; border: 1px dashed var(--green-dark); background: #f1fff9; margin: 15px 0; }
.shareholder-page { min-width: 0; }
.shareholder-hero { min-height: 230px; }
.shareholder-hero > div:first-child { min-width: 0; }
.shareholder-hero p { max-width: 720px; line-height: 1.75; overflow-wrap: anywhere; }
.shareholder-rate { flex: 0 0 auto; min-width: 190px; padding: 18px; border-left: 1px solid rgba(255,255,255,.28); text-align: center; }
.shareholder-rate small { display: block; color: #d7fff1; }
.shareholder-rate strong { display: block; margin-top: 4px; font-size: 44px; }
.shareholder-notice { margin: 16px 0; padding: 15px 18px; border: 1px solid #f0dc98; border-left: 4px solid #e9a112; border-radius: 6px; background: #fff8dc; color: #735316; }
.shareholder-notice b { display: block; margin-bottom: 5px; }
.shareholder-notice p { margin: 0; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.shareholder-stats { margin-bottom: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.shareholder-stats > div { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.shareholder-stats span { display: block; color: var(--muted); }
.shareholder-stats strong { display: block; margin-top: 6px; color: #087352; font-size: 27px; overflow-wrap: anywhere; }
.referral-share label { display: block; margin-top: 16px; color: #596571; font-weight: 700; }
.referral-share .primary-btn, .referral-share .secondary-btn { width: 100%; }
.invite-link { margin: 8px 0 10px; min-height: 54px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 5px; background: #f7f9fa; color: #4f5c66; line-height: 1.55; overflow-wrap: anywhere; word-break: break-all; }
.referral-records { margin-top: 16px; }
.referral-record { min-width: 0; padding: 13px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(140px, auto); gap: 14px; align-items: center; }
.referral-record:last-child { border-bottom: 0; }
.referral-record > div { min-width: 0; }
.referral-record b, .referral-record span { display: block; overflow-wrap: anywhere; }
.referral-record span, .referral-record small { margin-top: 3px; color: var(--muted); }
.referral-record strong { color: #087352; font-size: 18px; white-space: nowrap; }
.referral-record small { text-align: right; }
.referral-admin-form { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 6px; background: #fff; display: grid; grid-template-columns: minmax(180px, .6fr) minmax(300px, 1.4fr); gap: 14px; align-items: start; }
.referral-admin-form .form-group { min-width: 0; margin: 0; }
.referral-setting-preview { grid-column: 1 / -1; min-width: 0; padding: 16px; border: 1px solid #bcebdc; border-left: 4px solid var(--green-dark); border-radius: 6px; background: #f0fff9; }
.referral-setting-preview span { color: #668177; }
.referral-setting-preview strong { display: block; margin: 5px 0; color: #087352; font-size: 26px; }
.referral-setting-preview p { margin: 0; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.referral-admin-form > button { grid-column: 1 / -1; justify-self: end; min-width: 190px; }
.rental-commission-form { max-width: 760px; padding: 18px; border: 1px solid var(--line); border-radius: 6px; background: #fff; display: grid; grid-template-columns: minmax(190px, .7fr) minmax(300px, 1.3fr); gap: 16px; align-items: start; }
.rental-commission-form .form-group { margin: 0; }
.rental-commission-form > button { grid-column: 1 / -1; justify-self: end; min-width: 180px; }
.commission-preview { min-width: 0; padding: 14px; border: 1px solid #bcebdc; border-radius: 6px; background: #f0fff9; }
.commission-preview h3 { margin: 0 0 10px; font-size: 15px; }
.commission-preview > div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.commission-preview span { min-width: 0; padding: 10px; background: #fff; border-radius: 5px; }
.commission-preview small, .commission-preview b { display: block; }
.commission-preview small { color: var(--muted); }
.commission-preview b { margin-top: 4px; color: #087352; font-size: 20px; }
.settlement-compact { margin-top: 9px; padding: 9px 10px; border: 1px solid #c9ecdf; border-radius: 5px; background: #f2fff9; display: flex; gap: 7px 12px; flex-wrap: wrap; color: #527067; font-size: 12px; }
.settlement-compact b { color: #087352; }
.settlement-detail { margin: 18px 0; padding: 16px; border: 1px solid #bcebdc; border-radius: 6px; background: #f0fff9; }
.settlement-detail h3 { margin: 0 0 12px; }
.settlement-detail > div { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 9px; }
.settlement-detail span { min-width: 0; padding: 10px; border-radius: 5px; background: #fff; }
.settlement-detail small, .settlement-detail b { display: block; overflow-wrap: anywhere; }
.settlement-detail small { color: var(--muted); }
.settlement-detail b { margin-top: 3px; color: #087352; }
.settlement-detail p { margin: 10px 0 0; color: #577168; overflow-wrap: anywhere; }
.withdrawal-preview { margin: 14px 0; padding: 14px; border: 1px solid #bcebdc; border-radius: 6px; background: #f0fff9; }
.withdrawal-preview > p { margin: 0 0 10px; color: #49665d; }
.withdrawal-preview > div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.withdrawal-preview span { min-width: 0; padding: 10px; border-radius: 5px; background: #fff; }
.withdrawal-preview small, .withdrawal-preview b { display: block; }
.withdrawal-preview small { color: var(--muted); line-height: 1.5; }
.withdrawal-preview > small { margin-top: 9px; }
.withdrawal-preview b { margin-top: 3px; color: #087352; font-size: 18px; }
.withdrawal-amounts { min-width: 250px; display: grid; grid-template-columns: repeat(3, minmax(74px,1fr)); gap: 7px; }
.withdrawal-amounts span { min-width: 0; padding: 8px; border-radius: 5px; background: #f4f8f6; }
.withdrawal-amounts small, .withdrawal-amounts b { display: block; overflow-wrap: anywhere; }
.withdrawal-amounts small { color: var(--muted); font-size: 11px; }
.withdrawal-amounts b { margin-top: 3px; color: #374940; white-space: nowrap; }
.withdrawal-amounts span:last-child b { color: #087352; }

.auth-wrap { min-height: 670px; display: grid; place-items: center; background: linear-gradient(120deg,#e9fffa,#edf3f7); }
.auth-card { width: min(430px, calc(100% - 32px)); background: #fff; border-radius: 8px; padding: 34px; box-shadow: 0 16px 50px rgba(25,45,55,.12); }
.auth-card h1 { margin: 0 0 8px; }
.auth-card > p { color: var(--muted); margin-bottom: 24px; }
.form-group { margin: 14px 0; }
.form-group label { display: block; margin-bottom: 7px; color: #555e69; }
.form-group input, .form-group textarea, .form-group select { width: 100%; border: 1px solid #dfe3e8; border-radius: 6px; padding: 13px; outline: none; background: #fff; }
.form-group input:focus, .form-group textarea:focus { border-color: var(--green); }
.input-action { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.input-action button { border: 1px solid var(--green); color: var(--green-dark); background: #fff; border-radius: 6px; padding: 0 13px; }
.captcha-row { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 116px auto; gap: 8px; align-items: stretch; }
.captcha-row > input { min-width: 0; }
.captcha-image { width: 116px; height: 44px; max-width: 100%; display: block; object-fit: contain; border: 1px solid #dfe3e8; border-radius: 6px; background: #f5f7f8; user-select: none; }
.captcha-refresh { min-width: 58px; min-height: 44px; border: 1px solid var(--green); border-radius: 6px; color: var(--green-dark); background: #fff; padding: 0 10px; white-space: nowrap; }
.captcha-refresh:hover { background: #edfff8; }
.captcha-refresh:focus-visible { outline: 3px solid rgba(10,221,157,.18); outline-offset: 1px; }
.captcha-hint { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.publish-form { width: 100%; display: grid; gap: 0; }
.publish-section { min-width: 0; padding: 24px 0; border-top: 1px solid var(--line); }
.publish-section:first-child { padding-top: 4px; border-top: 0; }
.publish-section-title { margin: 0 0 18px; padding-left: 11px; border-left: 3px solid var(--green-dark); color: #26323c; font-size: 18px; line-height: 1.35; }
.publish-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; }
.publish-grid > *, .upload-groups > * { min-width: 0; }
.publish-grid .form-group { margin: 0; }
.publish-grid .form-group.wide, .publish-grid .wide-field { grid-column: 1 / -1; }
.field-tip { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.required-mark { margin-left: 3px; color: var(--danger); font-weight: 700; }
.calculated-field, input.calculated-field, textarea.calculated-field { color: #42505b; background: #f2f5f6; border-color: #d8dee3; font-weight: 700; }
.calculated-field:disabled, .calculated-field[readonly] { opacity: 1; cursor: default; }
.upload-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.upload-group { min-height: 150px; padding: 16px; border: 1px dashed #cbd4da; border-radius: 6px; background: #fafbfc; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.upload-group:focus-within { border-color: var(--green-dark); background: #f3fffa; }
.upload-group > label { margin: 0; font-size: 15px; }
.upload-group input[type="file"] { width: 100%; max-width: 100%; min-width: 0; padding: 9px; border: 1px solid #dce2e7; border-radius: 5px; background: #fff; color: #596571; }
.upload-group img { width: 100%; max-height: 180px; height: auto; display: block; object-fit: contain; border-radius: 5px; }
.upload-count { margin-top: auto; color: #6b7680; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.upload-count strong, .upload-count b { color: var(--green-dark); }
.publish-summary { margin-top: 4px; padding: 18px; border: 1px solid #bcebdc; border-left: 4px solid var(--green-dark); border-radius: 6px; background: #f0fff9; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 18px; color: #315b4f; }
.publish-summary > * { min-width: 0; overflow-wrap: anywhere; }
.publish-summary small, .publish-summary span { display: block; color: #668177; line-height: 1.5; }
.publish-summary strong, .publish-summary b { display: block; margin-top: 4px; color: #173f33; font-size: 18px; }
.review-mode-control { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 6px; background: #f7f9fa; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mode-option { min-width: 0; min-height: 62px; padding: 11px 12px; border: 1px solid #dce2e7; border-radius: 6px; background: #fff; display: flex; align-items: flex-start; gap: 10px; color: #46525d; cursor: pointer; overflow-wrap: anywhere; }
.mode-option:hover { border-color: #9ce7d1; background: #f4fffb; }
.mode-option:focus-within { border-color: var(--green-dark); box-shadow: 0 0 0 3px rgba(10,221,157,.12); }
.mode-option.active { position: relative; border: 2px solid var(--green-dark); color: #08382b; background: #e6fff6; box-shadow: 0 0 0 3px rgba(10,221,157,.12); }
.mode-option.active::after { content: "✓ 当前"; position: absolute; top: 8px; right: 10px; color: #087253; font-size: 12px; font-weight: 800; }
.mode-option.active b { color: #075b43; }
.mode-option input { flex: 0 0 auto; margin: 3px 0 0; accent-color: var(--green-dark); }
.mode-option span, .mode-option label { min-width: 0; line-height: 1.5; }
.mode-option strong, .mode-option b { display: block; margin-bottom: 2px; color: #26343d; }
.review-mode-status { margin-bottom: 14px; min-height: 82px; padding: 14px 18px; border: 1px solid #f0d48a; border-left: 5px solid #dca313; border-radius: 6px; color: #604a13; background: #fff9e6; display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: 14px; }
.review-mode-status.auto { color: #07543e; border-color: #9de8d1; border-left-color: var(--green-dark); background: #e8fff7; }
.review-mode-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #dca313; font-size: 20px; font-weight: 900; }
.review-mode-status.auto .review-mode-icon { background: var(--green-dark); }
.review-mode-status small { display: block; margin-bottom: 3px; opacity: .78; }
.review-mode-status strong { display: block; font-size: 20px; }
.review-mode-status p { margin: 4px 0 0; line-height: 1.5; }
.review-mode-status > b { padding: 6px 10px; border-radius: 14px; background: rgba(255,255,255,.7); white-space: nowrap; }
.status-reviewing, .status-listed, .status-unlisted, .status-rejected { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; max-width: 100%; padding: 3px 9px; border: 1px solid transparent; border-radius: 12px; font-size: 12px; font-weight: 700; line-height: 1.35; white-space: nowrap; }
.status-reviewing { color: #805b0d; background: #fff7d9; border-color: #f0d989; }
.status-listed { color: #087352; background: #e7fff6; border-color: #a9edd6; }
.status-unlisted { color: #596571; background: #f1f3f5; border-color: #d8dde2; }
.status-rejected { color: #a51e38; background: #fff0f2; border-color: #f7c3cc; }
.seller-listing-actions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.seller-listing-actions button { flex: 0 0 auto; margin: 0; }
.form-foot { display: flex; justify-content: space-between; margin: 14px 0; color: #6d7582; }
.text-button { border: 0; color: var(--green-dark); background: transparent; padding: 0; }

.profile-layout { display: grid; grid-template-columns: 220px 1fr; gap: 16px; }
.side-menu { background: #fff; border-radius: 8px; padding: 12px; align-self: start; }
.side-menu button { width: 100%; border: 0; background: transparent; text-align: left; padding: 14px; border-radius: 6px; }
.side-menu button.active { background: #eafff7; color: var(--green-dark); font-weight: 700; }
.profile-head { display: flex; justify-content: space-between; align-items: center; }
.balance { font-size: 34px; font-weight: 800; color: var(--green-dark); }
.order-list { display: grid; gap: 12px; margin-top: 16px; }
.order-card { background: #fff; border: 1px solid var(--line); border-radius: 7px; padding: 16px; display: grid; grid-template-columns: 1fr auto; gap: 12px; }
.order-card h4 { margin: 0 0 8px; }
.order-status { color: var(--green-dark); font-weight: 700; }
.empty { text-align: center; color: #89919c; padding: 70px 20px; background: #fff; border-radius: 8px; }

.site-footer { min-height: 70px; color: #dff8ef; background: linear-gradient(90deg,#049b85,#00c988); display: grid; place-items: center; text-align: center; padding: 14px; }
.footer-links { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.footer-links button { border: 0; background: transparent; color: #dff8ef; }
.copyright { margin-top: 8px; font-size: 12px; opacity: .85; }

.modal-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(10,18,24,.55); display: grid; place-items: center; padding: 18px; }
.modal { width: min(620px, 100%); max-height: calc(100vh - 36px); overflow: auto; background: #fff; border-radius: 8px; box-shadow: 0 24px 80px rgba(0,0,0,.25); }
.modal.wide { width: min(920px, 100%); }
.modal-head { height: 62px; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; }
.close-btn { width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f2f4f6; font-size: 20px; }
.modal-body { padding: 22px; line-height: 1.8; }
.modal-actions { padding: 0 22px 22px; display: flex; justify-content: flex-end; gap: 10px; }
.secondary-btn, .primary-btn { border: 1px solid var(--line); border-radius: 6px; min-height: 42px; padding: 0 22px; font-weight: 700; }
.secondary-btn { background: #fff; }
.detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.detail-grid div { background: #f6f8fa; border-radius: 5px; padding: 12px; }
.detail-grid small { display: block; color: var(--muted); }
.service-box { text-align: center; }
.service-orb { width: 82px; height: 82px; border-radius: 50%; background: var(--green); display: grid; place-items: center; margin: 0 auto 14px; font-size: 38px; }
#toast-root { position: fixed; z-index: 120; top: 98px; left: 50%; transform: translateX(-50%); display: grid; gap: 8px; pointer-events: none; }
.toast { color: #fff; background: #202a32; box-shadow: 0 8px 28px rgba(0,0,0,.2); border-radius: 5px; padding: 12px 18px; animation: toast-in .2s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }

.admin-login { min-height: 100vh; display: grid; place-items: center; background: #111a20; }
.admin-login .auth-card { box-shadow: 0 24px 80px rgba(0,0,0,.35); }
.admin-mark { width: 48px; height: 48px; display: grid; place-items: center; color: #082a21; background: var(--green); border-radius: 6px; font-size: 22px; font-weight: 900; margin-bottom: 20px; }
.back-site { width: 100%; margin-top: 12px; border: 0; color: #6a7480; background: transparent; padding: 10px; }
.admin-shell { min-height: 100vh; display: grid; grid-template-columns: 230px 1fr; background: #f2f4f7; }
.admin-sidebar { position: sticky; top: 0; height: 100vh; color: #dbe3e8; background: #172129; padding: 18px 12px; display: flex; flex-direction: column; }
.admin-brand { height: 66px; border: 0; border-bottom: 1px solid #2a353d; background: transparent; color: #fff; display: flex; align-items: center; gap: 10px; padding: 0 8px 16px; margin-bottom: 16px; }
.admin-brand img { width: 70px; height: 56px; object-fit: contain; background: #fff; border-radius: 4px; }
.admin-brand b { font-size: 16px; }
.admin-sidebar nav { display: grid; gap: 5px; }
.admin-sidebar nav button, .admin-exit { min-height: 44px; border: 0; border-radius: 5px; color: #aeb9c1; background: transparent; text-align: left; padding: 0 14px; }
.admin-sidebar nav button span { display: inline-block; width: 26px; color: #697984; font-size: 17px; }
.admin-sidebar nav button.active { color: #081f18; background: var(--green); font-weight: 700; }
.admin-sidebar nav button.active span { color: #081f18; }
.admin-exit { margin-top: auto; border: 1px solid #35434d; text-align: center; }
.admin-main { min-width: 0; }
.admin-top { height: 64px; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 28px; }
.admin-top button { border: 0; background: transparent; color: #525d68; }
.admin-content { padding: 28px; }
.admin-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.admin-title h1 { margin: 0 0 6px; font-size: 26px; }
.admin-title p { margin: 0; color: var(--muted); }
.admin-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.admin-stats div { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 22px; }
.admin-stats span { display: block; color: #697480; }
.admin-stats strong { display: block; font-size: 32px; margin-top: 10px; }
.admin-note { margin-top: 18px; background: #eafff7; border: 1px solid #b9f5df; border-radius: 6px; padding: 18px; color: #255c4c; }
.admin-form { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 18px; margin-bottom: 18px; display: grid; grid-template-columns: repeat(4,minmax(140px,1fr)); gap: 10px; }
.admin-form input, .admin-form select, .admin-form textarea { min-width: 0; border: 1px solid #dce1e6; border-radius: 5px; padding: 11px; outline: none; }
.image-form label { display: grid; gap: 7px; color: #596571; font-weight: 600; }
.image-form input[type="file"] { padding: 7px; font-size: 12px; font-weight: 400; }
.image-previews { display: grid; grid-template-columns: 120px 1fr 1fr; gap: 14px; }
.image-previews div { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 12px; }
.image-previews span { display: block; color: #66717d; margin-bottom: 8px; }
.image-previews img { width: 100%; height: 120px; object-fit: contain; background: #f3f5f7; border-radius: 4px; }
.blank-preview { height: 120px; display: grid; place-items: center; color: #a0a7ae; background: #fff; border: 1px dashed #e3e6e9; border-radius: 4px; }
.admin-brand-mark { width: 54px; height: 48px; display: grid; place-items: center; border-radius: 4px; color: #082a21; background: var(--green); font-weight: 900; font-size: 18px; }
.admin-brand b small { display: block; margin-top: 4px; color: #96a5ae; font-size: 11px; font-weight: 500; }
.admin-form input:focus, .admin-form textarea:focus { border-color: var(--green-dark); }
.article-form textarea { grid-column: 1/-2; }
.admin-table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.admin-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.admin-table th, .admin-table td { padding: 13px 14px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.admin-table th { color: #66717d; background: #f7f8fa; font-weight: 600; }
.admin-empty { color: #84909b; background: #fff; border: 1px dashed #d6dce1; border-radius: 6px; text-align: center; padding: 70px 20px; }
.danger-btn { min-height: 38px; border: 1px solid #f5a9b7; border-radius: 5px; color: #d82d4d; background: #fff4f6; padding: 0 15px; }
.mini-btn { min-height: 32px; border: 1px solid #cdd5db; border-radius: 4px; color: #43515c; background: #fff; padding: 0 10px; margin-right: 6px; }

/* Order chat, payment and account-state surfaces */
.chat-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 560px; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; background: #fff; }
.chat-list { min-width: 0; background: #f7f9fa; border-right: 1px solid var(--line); overflow-y: auto; }
.chat-list button { width: 100%; min-height: 68px; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 12px 15px; display: grid; gap: 6px; text-align: left; color: #4d5965; }
.chat-list button:hover { background: #eefbf6; }
.chat-list button.active { color: #08382b; background: #dcfff2; box-shadow: inset 3px 0 0 var(--green-dark); }
.chat-list b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-list small { color: var(--muted); }
.chat-list button.active small { color: #39816b; }
.chat-panel { min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: #f4f6f8; }
.chat-head { min-height: 72px; padding: 12px 18px; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.chat-head h2, .chat-head h3 { margin: 0 0 5px; font-size: 17px; }
.chat-head span, .chat-head small { display: block; max-width: 620px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-messages { min-height: 360px; max-height: 580px; padding: 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; overscroll-behavior: contain; }
.chat-message { align-self: flex-start; width: fit-content; max-width: min(76%, 620px); padding: 10px 13px; color: #2c3741; background: #fff; border: 1px solid #e5e9ed; border-radius: 6px; box-shadow: 0 2px 6px rgba(28,41,49,.04); overflow-wrap: anywhere; }
.chat-message b { display: block; margin-bottom: 5px; color: #52606d; font-size: 12px; }
.chat-message p { margin: 0; line-height: 1.65; white-space: pre-wrap; }
.chat-message small { display: block; margin-top: 5px; color: #929ba5; font-size: 11px; text-align: right; }
.chat-message.mine { align-self: flex-end; color: #073326; background: #dffff3; border-color: #b8f0dc; }
.chat-message.mine b { color: #157056; }
.chat-message.system { align-self: center; width: auto; max-width: 88%; color: #735316; background: #fff8dc; border-color: #f2df9e; box-shadow: none; text-align: center; }
.chat-message.system b { color: #967323; }
.chat-message.system small { text-align: center; }
.chat-compose { min-height: 72px; padding: 12px 16px; background: #fff; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.chat-compose input, .chat-compose textarea { width: 100%; min-width: 0; min-height: 44px; border: 1px solid #dce2e7; border-radius: 6px; background: #fff; padding: 10px 13px; outline: 0; resize: vertical; }
.chat-compose input:focus, .chat-compose textarea:focus { border-color: var(--green-dark); box-shadow: 0 0 0 3px rgba(10,221,157,.12); }
.chat-compose .primary-btn { min-width: 78px; }

.payment-box { width: min(680px, 100%); margin: 24px auto 0; text-align: center; }
.payment-box > h1 { margin-top: 0; }
.payment-box > p { color: #66717d; line-height: 1.75; }
.payment-box .detail-grid { margin: 20px 0; text-align: left; }
.payment-box .detail-grid b { color: #e63d4c; font-size: 20px; }
.payment-qr { display: block; width: 220px; height: 220px; max-width: 70vw; max-height: 70vw; margin: 18px auto; object-fit: contain; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.ban-reason { color: #a51e38; background: #fff1f3; border: 1px solid #facbd3; border-left: 4px solid var(--danger); border-radius: 5px; padding: 10px 12px; line-height: 1.65; overflow-wrap: anywhere; }
.compact-btn { min-height: 34px; height: auto; padding: 6px 12px; margin: 6px 0 0 6px; font-size: 12px; vertical-align: middle; white-space: nowrap; }

/* Admin group monitoring and order-intervention alerts */
.admin-chat-layout, .group-monitor-layout { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); min-height: 620px; background: #fff; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.admin-chat { display: grid; grid-template-columns: minmax(0,1fr) 230px; gap: 14px; }
.group-members { background: #f7f9fa; border: 1px solid var(--line); border-radius: 6px; padding: 12px; }
.group-members h4 { margin: 0 0 10px; }
.group-members > div { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.admin-group-list, .group-monitor-list { min-width: 0; background: #f7f9fa; border-right: 1px solid var(--line); overflow-y: auto; }
.admin-group-item, .group-monitor-item { width: 100%; min-height: 78px; padding: 13px 15px; border: 0; border-bottom: 1px solid var(--line); background: transparent; display: grid; gap: 5px; text-align: left; }
.admin-group-item:hover, .group-monitor-item:hover { background: #eefbf6; }
.admin-group-item.active, .group-monitor-item.active { background: #dcfff2; box-shadow: inset 3px 0 0 var(--green-dark); }
.admin-group-item b, .group-monitor-item b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-group-meta, .group-monitor-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; }
.admin-chat-panel, .group-monitor-panel { min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: #f4f6f8; }
.admin-chat-toolbar, .group-monitor-toolbar { min-height: 72px; padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.admin-chat-toolbar h2, .admin-chat-toolbar h3, .group-monitor-toolbar h2, .group-monitor-toolbar h3 { margin: 0; }
.admin-chat-actions, .group-monitor-actions { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.participant-list, .chat-participants { padding: 12px 16px; background: #fff; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.participant-row, .chat-participant { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; background: #f7f8fa; border-radius: 5px; }
.participant-row span, .chat-participant span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #98a1aa; }
.status-dot.active, .status-dot.online { background: var(--green-dark); box-shadow: 0 0 0 3px rgba(10,221,157,.15); }
.status-dot.pending, .status-dot.warning { background: #e9a112; }
.status-dot.danger, .status-dot.dissolved { background: var(--danger); }
.admin-alert, .intervention-alert, .request-alert { margin-bottom: 14px; padding: 14px 16px; color: #735316; background: #fff8dc; border: 1px solid #f0da8e; border-left: 4px solid #e9a112; border-radius: 6px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.admin-alert.danger, .intervention-alert { color: #8c2035; background: #fff1f3; border-color: #facbd3; border-left-color: var(--danger); }
.admin-alert strong, .intervention-alert strong, .request-alert strong { display: block; margin-bottom: 4px; }
.admin-alert p, .intervention-alert p, .request-alert p { margin: 0; line-height: 1.55; }
.admin-alert-actions, .request-alert-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.monitor-empty { min-height: 360px; padding: 30px; color: var(--muted); display: grid; place-items: center; text-align: center; background: #fff; }

/* Customer support workspace shared by users and administrators */
.support-layout { min-width: 0; min-height: 620px; display: grid; grid-template-columns: minmax(230px, 300px) minmax(0, 1fr); border: 1px solid var(--line); border-radius: 7px; overflow: hidden; background: #fff; }
.support-sidebar { min-width: 0; background: #f7f9fa; border-right: 1px solid var(--line); overflow-y: auto; }
.support-sidebar > header, .support-sidebar > h2, .support-sidebar > h3 { margin: 0; padding: 16px; background: #fff; border-bottom: 1px solid var(--line); font-size: 16px; }
.support-sidebar button, .support-sidebar .support-item { position: relative; width: 100%; min-width: 0; min-height: 72px; padding: 12px 15px; border: 0; border-bottom: 1px solid var(--line); background: transparent; display: grid; gap: 5px; text-align: left; color: #4d5965; }
.support-sidebar button:hover, .support-sidebar .support-item:hover { background: #eefbf6; }
.support-sidebar button.active, .support-sidebar .support-item.active { color: #08382b; background: #dcfff2; box-shadow: inset 3px 0 0 var(--green-dark); }
.support-sidebar b, .support-sidebar strong, .support-sidebar span, .support-sidebar small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-sidebar small { color: var(--muted); }
.support-conversation { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: #f4f6f8; }
.support-header { min-width: 0; min-height: 72px; padding: 12px 18px; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.support-header > div { min-width: 0; }
.support-header h2, .support-header h3 { margin: 0 0 4px; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-header p, .support-header span, .support-header small { display: block; margin: 0; color: var(--muted); line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-messages { min-width: 0; min-height: 390px; max-height: 620px; padding: 18px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 12px; }
.support-message { align-self: flex-start; width: fit-content; max-width: min(76%, 640px); padding: 10px 13px; color: #2c3741; background: #fff; border: 1px solid #e5e9ed; border-radius: 6px; box-shadow: 0 2px 6px rgba(28,41,49,.04); overflow-wrap: anywhere; }
.support-message b, .support-message strong { display: block; margin-bottom: 4px; color: #52606d; font-size: 12px; }
.support-message p { margin: 0; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.support-message small, .support-message time { display: block; margin-top: 5px; color: #929ba5; font-size: 11px; text-align: right; }
.support-message.user { align-self: flex-start; }
.support-message.admin { align-self: flex-end; color: #073326; background: #dffff3; border-color: #b8f0dc; }
.support-message.admin b, .support-message.admin strong { color: #157056; }
.support-message.system { align-self: center; width: auto; max-width: 90%; color: #735316; background: #fff8dc; border-color: #f2df9e; box-shadow: none; text-align: center; }
.support-message.system small, .support-message.system time { text-align: center; }
.support-compose { min-width: 0; min-height: 74px; padding: 12px 16px; background: #fff; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.support-compose input, .support-compose textarea { width: 100%; min-width: 0; min-height: 44px; max-height: 132px; border: 1px solid #dce2e7; border-radius: 6px; padding: 10px 13px; outline: 0; resize: vertical; }
.support-compose input:focus, .support-compose textarea:focus { border-color: var(--green-dark); box-shadow: 0 0 0 3px rgba(10,221,157,.12); }
.support-compose button { min-width: 78px; margin: 0; }
.support-status { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; max-width: 100%; padding: 3px 9px; border: 1px solid #a9edd6; border-radius: 12px; color: #087352; background: #e7fff6; font-size: 12px; font-weight: 700; line-height: 1.35; white-space: nowrap; }
.support-status.closed, .support-status.offline { color: #596571; background: #f1f3f5; border-color: #d8dde2; }
.support-status.pending, .support-status.waiting { color: #805b0d; background: #fff7d9; border-color: #f0d989; }
.unread-dot { display: inline-grid; place-items: center; flex: 0 0 auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; color: #fff; background: var(--danger); box-shadow: 0 0 0 2px #fff; font-size: 10px; font-weight: 800; line-height: 1; }
.support-sidebar .unread-dot { position: absolute; top: 11px; right: 11px; }

/* Club escort catalog and prize wheel */
.club-page { min-width: 0; }
.category-tabs { margin: 0 0 16px; padding: 8px; display: flex; align-items: center; gap: 7px; overflow-x: auto; background: #fff; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.category-tabs button { flex: 0 0 auto; min-height: 38px; padding: 0 17px; border: 1px solid transparent; border-radius: 5px; color: #596571; background: transparent; white-space: nowrap; }
.category-tabs button:hover { color: #087352; background: #effcf7; }
.category-tabs button.active { color: #073326; background: var(--green); border-color: var(--green); font-weight: 700; }
.club-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.club-card { min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; display: flex; flex-direction: column; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.club-card:hover { border-color: #9ce7d1; box-shadow: 0 8px 24px rgba(30,45,55,.08); transform: translateY(-2px); }
.club-cover { width: 100%; aspect-ratio: 16 / 9; display: block; object-fit: cover; background: #e8edef; }
.club-cover { position: relative; display: grid; place-items: center; color: #89929b; overflow: hidden; }
.club-cover img { width: 100%; height: 100%; object-fit: cover; }
.club-cover > b { position: absolute; top: 9px; right: 9px; padding: 4px 8px; border-radius: 4px; color: #073326; background: var(--green); font-size: 11px; }
.club-card > div:not(.club-cover), .club-card .club-body { min-width: 0; padding: 14px; }
.club-card h3, .club-card h4 { min-height: 44px; margin: 0 0 8px; font-size: 15px; line-height: 1.5; overflow: hidden; overflow-wrap: anywhere; }
.club-card p { margin: 7px 0; color: var(--muted); line-height: 1.55; overflow-wrap: anywhere; }
.club-price { display: flex; align-items: baseline; gap: 5px; margin-top: auto; color: #e63849; font-size: 22px; font-weight: 800; }
.club-price small, .club-price span { color: #7b8493; font-size: 12px; font-weight: 400; }
.product-platform { display: inline-flex; align-items: center; justify-content: center; min-height: 23px; max-width: 100%; padding: 3px 8px; color: #087352; background: #e7fff6; border: 1px solid #a9edd6; border-radius: 4px; font-size: 11px; font-weight: 700; line-height: 1.35; white-space: nowrap; }
.product-platform { gap: 10px; margin-top: 8px; }
.wheel-stage { position: relative; width: min(460px, 76vw); margin: 12px auto 22px; }
.product-platform.console { color: #3157a4; background: #edf3ff; border-color: #c7d6f7; }
.product-platform.mobile { color: #805b0d; background: #fff7d9; border-color: #f0d989; }

.wheel-overlay { position: fixed; inset: 0; z-index: 110; padding: 24px; display: grid; place-items: center; overflow-y: auto; background: rgba(9,20,20,.68); backdrop-filter: blur(3px); }
.wheel-overlay > section, .wheel-overlay > div { width: min(660px, 100%); max-height: calc(100vh - 48px); padding: 26px; overflow-y: auto; border-radius: 8px; background: #fff; box-shadow: 0 24px 80px rgba(0,0,0,.3); text-align: center; }
.prize-wheel { --wheel-size: min(460px, 76vw); position: relative; width: var(--wheel-size); height: var(--wheel-size); max-width: 100%; margin: 0; border: 13px solid #0a654d; border-radius: 50%; background: conic-gradient(#08c98d 0deg 45deg, #eafff7 45deg 90deg, #20dda5 90deg 135deg, #fff 135deg 180deg, #08c98d 180deg 225deg, #eafff7 225deg 270deg, #20dda5 270deg 315deg, #fff 315deg 360deg); box-shadow: inset 0 0 0 5px #d7fff1, 0 12px 34px rgba(4,96,72,.24); overflow: hidden; transition: transform 3.2s cubic-bezier(.14,.72,.16,1); }
.prize-wheel::before { content: ""; position: absolute; inset: 8px; border: 2px solid rgba(255,255,255,.72); border-radius: 50%; pointer-events: none; }
.wheel-pointer { position: absolute; z-index: 4; left: 50%; top: -5px; width: 0; height: 0; transform: translateX(-50%); border-left: 17px solid transparent; border-right: 17px solid transparent; border-top: 38px solid #ffce43; filter: drop-shadow(0 3px 2px rgba(0,0,0,.2)); }
.wheel-center { position: absolute; z-index: 3; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 7px solid #fff; border-radius: 50%; color: #fff; background: #075f49; box-shadow: 0 5px 16px rgba(0,0,0,.2); display: grid; place-items: center; padding: 8px; font-weight: 800; line-height: 1.25; text-align: center; cursor: pointer; }
.wheel-center:hover { background: #064c3b; }
.prize-wheel .wheel-label { position: absolute; z-index: 2; left: 50%; top: 50%; width: 43%; padding-right: 11px; transform-origin: 0 0; color: #073326; font-size: 12px; font-weight: 800; line-height: 1.25; text-align: right; overflow-wrap: anywhere; pointer-events: none; }
.prize-wheel .wheel-label img { width: 28px; height: 28px; margin-right: 5px; object-fit: contain; vertical-align: middle; }
.wheel-result { margin: 14px 0 0; padding: 14px 16px; color: #155845; background: #edfff8; border: 1px solid #b8efdc; border-radius: 6px; line-height: 1.6; overflow-wrap: anywhere; }
.wheel-result strong, .wheel-result b { color: #d83a48; font-size: 18px; }

.club-admin-form { min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.club-admin-form > * { min-width: 0; }
.club-admin-form .wide, .club-admin-form .full, .club-admin-form textarea, .club-admin-form .prize-editor { grid-column: 1 / -1; }
.club-admin-form input, .club-admin-form select, .club-admin-form textarea { width: 100%; min-width: 0; border: 1px solid #dce1e6; border-radius: 5px; padding: 11px; outline: 0; }
.club-admin-form input:focus, .club-admin-form select:focus, .club-admin-form textarea:focus { border-color: var(--green-dark); }
.club-admin-form .check-row input[type="checkbox"] { width: auto; flex: 0 0 auto; }
.escort-submit { width: 100%; min-height: 46px; margin-top: 8px; }
.prize-editor { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 6px; background: #f7f9fa; display: grid; gap: 9px; }
.prize-editor[hidden] { display: none; }
.prize-row { min-width: 0; display: grid; grid-template-columns: minmax(130px,1.2fr) 70px 90px minmax(120px,1fr) minmax(130px,1fr) auto; gap: 8px; align-items: center; }
.prize-row > * { min-width: 0; }
.prize-row button { min-width: 38px; min-height: 38px; margin: 0; }

@media (max-width: 1280px) {
  .site-header { padding: 0 18px; }
  .nav { gap: 14px; overflow-x: auto; }
  .header-actions .icon-action { display: grid; }
  .header-actions .icon-action[data-action="profile"] { display: none; }
  .hero-grid { grid-template-columns: minmax(0,1fr) 260px; }
  .invite-ad { display: none; }
  .trade-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .publish-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-chat-layout, .group-monitor-layout { grid-template-columns: 250px minmax(0,1fr); }
  .support-layout { grid-template-columns: 250px minmax(0,1fr); }
  .club-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .club-admin-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lottery-editor { overflow-x: auto; }
  .lottery-editor-head, .lottery-prize-row { min-width: 720px; }
  .lottery-rule-head, .lottery-rule-row { min-width: 680px; }
}
@media (max-width: 760px) {
  body { font-size: 13px; }
  .site-header { height: 66px; padding: 0 12px; }
  .brand { width: 92px; height: 58px; margin-right: 0; }
  .brand img { width: 88px; height: 58px; }
  .hamburger { display: block; margin-left: auto; }
  .nav { position: fixed; display: none; left: 0; right: 0; top: 66px; height: auto; max-height: calc(100vh - 66px); overflow: auto; background: #fff; padding: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.12); grid-template-columns: 1fr 1fr; }
  .nav.open { display: grid; }
  .nav button { min-height: 46px; }
  .nav button.active::after { bottom: 4px; }
  .nav .mobile-only { display: block; }
  .header-actions { margin-left: 8px; }
  .header-actions .pill-btn, .header-actions .icon-action { display: none; }
  .page, .compact-page { width: calc(100% - 20px); padding-top: 10px; }
  .hero-grid { display: block; }
  .hero-slider { height: 150px; }
  .qr-panel { display: none; }
  .toolbar, .filter-row, .sort-row { padding: 10px; border-radius: 6px; }
  .toolbar .search-box { order: 2; width: 100%; }
  .more-filter { margin-left: 0; }
  .filter-row { overflow-x: auto; flex-wrap: nowrap; }
  .trade-grid { grid-template-columns: 1fr; }
  .article-card { grid-template-columns: 100px 1fr; gap: 12px; }
  .article-card img { width: 100px; height: 90px; }
  .article-card .secondary-btn { grid-column: 1/-1; }
  .bonus-grid { grid-template-columns: repeat(2, 1fr); }
  .service-switch { display: grid; grid-template-columns: 1fr 1fr; }
  .service-switch .tab-btn { min-width: 0; width: 100%; padding: 0 8px; }
  .lottery-layout, .cashback-columns, .profile-layout { grid-template-columns: 1fr; }
  .wheel { width: 330px; height: 330px; }
  .lottery-page .profile-head { align-items: flex-start; }
  .lottery-chances { min-width: 100px; padding: 9px 12px; }
  .winner-feed { max-height: 420px; padding: 16px; }
  .winner-scroll { height: 280px; }
  .lottery-public-rules { grid-template-columns: 1fr; }
  .lottery-basic-grid { grid-template-columns: 1fr; }
  .lottery-editor { padding: 12px; overflow: visible; }
  .lottery-editor .profile-head { align-items: flex-start; flex-direction: column; }
  .lottery-editor .profile-head button { width: 100%; }
  .lottery-editor-head, .lottery-rule-head { display: none; }
  .lottery-prize-row, .lottery-rule-row { min-width: 0; grid-template-columns: 1fr 1fr; padding: 12px 0; }
  .lottery-prize-row > :nth-child(1), .lottery-prize-row > :nth-child(2), .lottery-prize-row > :nth-child(3), .lottery-rule-row > :nth-child(1), .lottery-rule-row > :nth-child(4) { grid-column: 1 / -1; }
  .lottery-prize-row button, .lottery-rule-row button { width: 100%; }
  .lottery-save { width: 100%; min-width: 0; }
  .cashback-hero { padding: 24px; }
  .cashback-hero h1 { font-size: 28px; }
  .cashback-hero strong { font-size: 40px; }
  .shareholder-hero { min-height: 220px; align-items: flex-start; flex-direction: column; gap: 18px; }
  .shareholder-rate { width: 100%; min-width: 0; padding: 12px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.28); text-align: left; }
  .shareholder-rate strong { font-size: 34px; }
  .shareholder-stats { grid-template-columns: 1fr; }
  .shareholder-stats > div { padding: 14px; }
  .referral-records .profile-head { align-items: flex-start; gap: 10px; }
  .referral-record { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .referral-record small { grid-column: 1 / -1; text-align: left; }
  .referral-admin-form { grid-template-columns: 1fr; padding: 13px; }
  .referral-setting-preview, .referral-admin-form > button { grid-column: auto; }
  .referral-admin-form > button { width: 100%; min-width: 0; justify-self: stretch; }
  .rental-commission-form { grid-template-columns: 1fr; max-width: none; padding: 13px; }
  .rental-commission-form > button { grid-column: auto; width: 100%; min-width: 0; justify-self: stretch; }
  .commission-preview > div { grid-template-columns: 1fr 1fr; }
  .settlement-detail > div { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .withdrawal-preview > div { grid-template-columns: 1fr 1fr; }
  .withdrawal-amounts { min-width: 0; grid-template-columns: 1fr 1fr; }
  .withdrawal-amounts span:last-child { grid-column: 1 / -1; }
  .side-menu { display: flex; overflow-x: auto; }
  .side-menu button { width: auto; white-space: nowrap; }
  .detail-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-shell { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; height: auto; }
  .admin-sidebar nav { grid-template-columns: repeat(2,1fr); }
  .admin-exit { margin-top: 14px; }
  .admin-content { padding: 16px; }
  .admin-stats { grid-template-columns: repeat(2,1fr); }
  .admin-form { grid-template-columns: 1fr; }
  .article-form textarea { grid-column: auto; }
  .image-previews { grid-template-columns: 1fr; }
  .captcha-row { grid-template-columns: minmax(0, 1fr) auto; }
  .captcha-row > input { grid-column: 1 / -1; }
  .captcha-image { width: min(140px, 100%); }
  .captcha-refresh { min-width: 64px; }
  .publish-section { padding: 20px 0; }
  .publish-section-title { margin-bottom: 14px; font-size: 16px; }
  .publish-grid, .upload-groups, .publish-summary { grid-template-columns: 1fr; }
  .upload-group { min-height: 132px; padding: 13px; }
  .publish-summary { padding: 14px; }
  .review-mode-control { grid-template-columns: 1fr; padding: 10px; }
  .mode-option { min-height: 56px; }
  .review-mode-status { grid-template-columns: 40px 1fr; padding: 12px; }
  .review-mode-status > b { grid-column: 1/-1; width: max-content; }
  .seller-listing-actions { width: 100%; justify-content: flex-start; }
  .seller-listing-actions button { flex: 1 1 auto; min-width: 92px; }
  .chat-layout, .admin-chat-layout, .group-monitor-layout { grid-template-columns: 1fr; min-height: 0; }
  .admin-chat { grid-template-columns: 1fr; }
  .chat-list, .admin-group-list, .group-monitor-list { display: flex; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; }
  .chat-list button, .admin-group-item, .group-monitor-item { flex: 0 0 175px; min-height: 64px; border-bottom: 0; border-right: 1px solid var(--line); }
  .chat-list button.active, .admin-group-item.active, .group-monitor-item.active { box-shadow: inset 0 -3px 0 var(--green-dark); }
  .chat-head { min-height: 66px; padding: 10px 12px; align-items: flex-start; }
  .chat-head h2, .chat-head h3 { font-size: 15px; }
  .chat-head span, .chat-head small { max-width: calc(100vw - 150px); }
  .chat-messages { min-height: 330px; max-height: 54vh; padding: 12px 10px; }
  .chat-message { max-width: 88%; }
  .chat-message.system { max-width: 96%; }
  .chat-compose { min-height: 64px; padding: 9px; gap: 7px; }
  .chat-compose .primary-btn { min-width: 62px; padding: 0 13px; }
  .payment-box { margin-top: 8px; }
  .payment-box .detail-grid { grid-template-columns: 1fr; }
  .compact-btn { margin-left: 3px; padding: 6px 9px; }
  .admin-chat-toolbar, .group-monitor-toolbar { align-items: flex-start; }
  .admin-chat-actions, .group-monitor-actions { width: 100%; }
  .admin-alert, .intervention-alert, .request-alert { align-items: flex-start; flex-direction: column; }
  .admin-alert-actions, .request-alert-actions { width: 100%; }
  .support-layout { grid-template-columns: 1fr; min-height: 0; }
  .support-sidebar { display: flex; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; }
  .support-sidebar > header, .support-sidebar > h2, .support-sidebar > h3 { flex: 0 0 130px; display: grid; align-items: center; padding: 12px; border-bottom: 0; border-right: 1px solid var(--line); }
  .support-sidebar button, .support-sidebar .support-item { flex: 0 0 176px; min-height: 66px; border-bottom: 0; border-right: 1px solid var(--line); }
  .support-sidebar button.active, .support-sidebar .support-item.active { box-shadow: inset 0 -3px 0 var(--green-dark); }
  .support-header { min-height: 66px; padding: 10px 12px; align-items: flex-start; }
  .support-header h2, .support-header h3 { font-size: 15px; }
  .support-header p, .support-header span, .support-header small { max-width: calc(100vw - 160px); }
  .support-messages { min-height: 340px; max-height: 54vh; padding: 12px 10px; }
  .support-message { max-width: 88%; }
  .support-message.system { max-width: 96%; }
  .support-compose { min-height: 64px; padding: 9px; gap: 7px; }
  .support-compose button { min-width: 62px; padding: 0 13px; }
  .category-tabs { margin-left: -10px; margin-right: -10px; padding-left: 10px; padding-right: 10px; }
  .club-grid { grid-template-columns: 1fr; gap: 12px; }
  .club-card { display: grid; grid-template-columns: 116px minmax(0, 1fr); }
  .club-cover { height: 100%; min-height: 126px; aspect-ratio: auto; }
  .club-card > div:not(.club-cover), .club-card .club-body { padding: 12px; }
  .club-card h3, .club-card h4 { min-height: 0; }
  .wheel-overlay { padding: 10px; }
  .wheel-overlay > section, .wheel-overlay > div { max-height: calc(100vh - 20px); padding: 16px 10px; }
  .prize-wheel { --wheel-size: min(330px, 84vw); border-width: 9px; }
  .wheel-pointer { border-left-width: 13px; border-right-width: 13px; border-top-width: 30px; }
  .wheel-center { border-width: 5px; font-size: 12px; }
  .prize-wheel .wheel-label { padding-right: 6px; font-size: 10px; }
  .club-admin-form { grid-template-columns: 1fr; padding: 13px; }
  .club-admin-form .wide, .club-admin-form .full, .club-admin-form textarea, .club-admin-form .prize-editor { grid-column: auto; }
  .prize-row { grid-template-columns: 1fr 1fr; }
  .prize-row > :first-child { grid-column: 1 / -1; }
  .prize-row > :nth-child(4), .prize-row > :nth-child(5) { grid-column: 1 / -1; }
  .prize-row button { width: 100%; }
}