/* 玩家商城和登录页；沿用既有购买、充值、奖励接口，样式只在对应页面生效。 */
body.gate { color:#243247; background:#f0f3f7; }
body.gate main { position:static; height:auto; min-height:100vh; min-height:100dvh; overflow:visible; }
body.gate .glass { width:min(430px,100%); padding:36px; background:#fff; border:1px solid #dce2ea; border-radius:8px; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
.play-login-brand { display:flex; align-items:center; gap:11px; margin-bottom:34px; color:#243247; }
.play-login-brand > span { display:grid; place-items:center; width:36px; height:36px; background:#2864d7; color:white; border-radius:5px; font-size:19px; font-weight:650; }
.play-login-brand b { font-size:16px; letter-spacing:1px; }
body.gate .glass h1 { color:#243247; text-align:left; font-size:28px; margin:0 0 9px; }
body.gate .glass .hint { color:#68778b; text-align:left; font-size:13px; margin-bottom:27px; }
body.gate .glass label { color:#45556a; margin:17px 0 8px; }
body.gate .glass input,body.gate .glass select { background:#fff; border:1px solid #d5dde8; border-radius:5px; color:#243247; height:45px; }
body.gate .glass input::placeholder { color:#8b98aa; }
body.gate .glass input:focus,body.gate .glass select:focus { outline:2px solid #dce6fa; border-color:#2864d7; }
body.gate .glass button[type="submit"] { margin-top:28px; background:#2864d7; border-radius:5px; color:#fff; min-height:45px; }
body.gate .glass button[type="submit"]:hover { background:#1e4eac; }
body.gate .glass .err { border:1px solid #f0cfc9; background:#fff4f3; color:#b33f36; border-radius:5px; }
.shop-page { background:#f3f5f8; color:#243247; font-size:14px; line-height:1.6; }
.shop-page main { max-width:none; width:100%; height:auto; min-height:100vh; position:static; left:auto; transform:none; overflow:visible; padding:0; }
.shop-page button { font-family:inherit; transition:background .15s,border-color .15s; }
.shop-page button:focus-visible,.shop-page a:focus-visible { outline:2px solid #2864d7; outline-offset:3px; }
.shop-topbar { min-height:76px; padding:16px max(24px,calc((100% - 1184px)/2)); background:#fff; border-bottom:1px solid #e6eaf0; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.shop-brand { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.shop-brand-mark { display:grid; place-items:center; width:38px; height:38px; color:#fff; background:#2864d7; border-radius:6px; font-size:20px; font-weight:650; }
.shop-brand b { display:block; color:#243247; font-size:16px; letter-spacing:1px; }
.shop-brand small { display:block; color:#68778b; font-size:11px; }
.shop-top-actions { display:flex; align-items:center; gap:20px; color:#52647c; font-size:12px; min-width:0; }
.shop-top-actions > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px; }
.shop-page .head-out { background:#fff; border:1px solid #d9e0e8; color:#45556a; border-radius:5px; padding:7px 12px; font-size:12px; white-space:nowrap; }
.shop-page .head-out:hover { background:#f5f7fa; }
.shop-primary-nav { display:flex; gap:32px; padding:0 max(24px,calc((100% - 1184px)/2)); background:#fff; border-bottom:1px solid #dce2ea; }
.shop-primary-nav button { border:0; border-bottom:2px solid transparent; padding:15px 5px 13px; color:#52647c; background:transparent; font-size:14px; cursor:pointer; white-space:nowrap; }
.shop-primary-nav button.active { border-bottom-color:#2864d7; color:#245ac1; font-weight:650; }
.shop-primary-nav button:hover { color:#2864d7; }
.shop-workspace { max-width:1248px; padding:30px 32px 26px; margin:0 auto; }
.shop-page-title { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:22px; }
.shop-page-title > div > span { font-size:10px; color:#68778b; letter-spacing:1.5px; }
.shop-page-title h1 { font-size:27px; margin:3px 0 6px; font-weight:650; line-height:1.5; }
.shop-page-title p { margin:0; color:#68778b; font-size:13px; }
.shop-role-status { border:1px solid #dce2ea; border-radius:4px; color:#607188; background:#fff; padding:6px 12px; font-size:12px; max-width:45%; overflow-wrap:anywhere; }
.shop-account-strip { display:grid; grid-template-columns:1fr .9fr 1fr; background:#fff; border:1px solid #dce2ea; border-radius:6px; margin-bottom:26px; }
.shop-account-cell { min-width:0; padding:20px 24px; position:relative; }
.shop-account-cell + .shop-account-cell { border-left:1px solid #e6eaf0; }
.shop-label { display:block; font-size:12px; color:#68778b; margin-bottom:8px; }
.shop-account-cell > strong { display:block; font-size:23px; font-weight:650; line-height:1.5; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.shop-account-cell > p { margin:6px 0 0; color:#68778b; font-size:12px; overflow-wrap:anywhere; }
.shop-account-cell .shop-unset { font-size:18px; font-weight:500; color:#68778b; margin-top:12px; }
.shop-balance > strong { color:#245ac1; }
.shop-separator { color:#b4bfce; margin:0 6px; }
.shop-text-button { border:0; padding:0; margin-top:6px; background:transparent; color:#245ac1; cursor:pointer; font-size:12px; text-align:left; }
.shop-text-button:hover { text-decoration:underline; }
.shop-secondary-nav { display:flex; gap:8px; margin-bottom:22px; border-bottom:1px solid #d5dde8; padding-bottom:12px; overflow-x:auto; }
.shop-secondary-nav .btn-info { background:transparent; color:#52647c; border:1px solid transparent; border-radius:5px; padding:8px 17px; font-size:13px; white-space:nowrap; }
.shop-secondary-nav .btn-info.active { background:#e7eefa; color:#245ac1; border-color:#d8e3f6; font-weight:600; }
.shop-secondary-nav .btn-info:hover { background:#e7eefa; color:#245ac1; }
.shop-category-nav { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 20px; }
.shop-category-nav button { border:1px solid #dce2ea; background:#fff; color:#607188; padding:5px 12px; border-radius:4px; font-size:12px; cursor:pointer; }
.shop-category-nav button.active { border-color:#2864d7; color:#245ac1; background:#f3f7fe; }
.shop-notice { display:flex; align-items:baseline; gap:14px; border-left:3px solid #8eafea; padding:12px 16px; background:#eaf0fa; color:#52647c; font-size:12px; line-height:1.8; margin-bottom:20px; }
.shop-notice b { color:#344762; flex-shrink:0; font-weight:550; }
.shop-notice span { white-space:pre-wrap; overflow-wrap:anywhere; }
.shop-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.shop-page .panel { background:#fff; border:1px solid #dfe5ed; border-radius:6px; box-shadow:none; margin-bottom:0; overflow:hidden; min-width:0; }
.shop-page .panel-body { padding:22px; }
.shop-item { min-height:238px; }
.shop-item > .panel-body { display:flex; flex-direction:column; height:100%; }
.shop-card-top { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:18px; font-size:11px; color:#68778b; }
.shop-tag { display:inline-block; width:fit-content; border:1px solid #e1e7ef; background:#f5f7fa; color:#52647c; border-radius:4px; padding:3px 8px; font-size:11px; font-weight:400; }
.shop-first { color:#9c5c1e; }
.shop-page h3 { font-size:16px; font-weight:600; line-height:1.6; color:#243247; margin:0 0 10px; }
.shop-item-description { font-size:12px; color:#68778b; line-height:1.85; overflow-wrap:anywhere; white-space:pre-wrap; margin:0 0 22px; }
.shop-item .shop-item-description { flex:1; }
.shop-item-description p { margin:0 0 6px; }
.shop-item-footer { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:auto; }
.shop-price { display:flex; align-items:baseline; gap:7px; color:#68778b; font-size:11px; margin-bottom:0; white-space:nowrap; }
.shop-price b { font-size:25px; line-height:1.4; color:#243247; font-weight:600; font-variant-numeric:tabular-nums; }
.shop-page .btn { border-radius:5px; font-size:13px; font-weight:550; padding:10px 15px; min-height:40px; background:#2864d7; box-shadow:none; }
.shop-page .btn-warning { background:#2864d7; }
.shop-page .btn-warning:hover { background:#1e4eac; opacity:1; }
.shop-page .btn-success { background:#278068; }
.shop-page .btn-success:hover { background:#206a56; }
.shop-page .btn:disabled,.shop-page .btn:disabled:hover { background:#edf0f5; color:#8592a4; opacity:1; cursor:not-allowed; }
.shop-item-footer .btn { width:auto; min-width:86px; }
.shop-item > .panel-body > .btn { margin-top:18px; }
.shop-page h3.shop-charge-amount { font-size:34px; margin:0 0 8px; font-weight:600; font-variant-numeric:tabular-nums; }
.shop-charge-amount small { font-size:18px; font-weight:400; margin-right:6px; color:#68778b; }
.shop-reward { margin:0 0 22px; font-size:12px; color:#68778b; }
.shop-reward b { color:#45556a; font-weight:600; }
.shop-pay-actions { display:flex; gap:10px; margin-top:auto; }
.shop-pay-actions .btn { flex:1; min-width:0; }
.shop-progress { height:5px; background:#e8edf5; margin:0 0 3px; overflow:hidden; border-radius:2px; }
.shop-progress i { display:block; height:100%; background:#487bdd; }
.shop-page .edit-hint { color:#68778b; font-size:12px; line-height:1.8; }
.shop-service-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:start; }
.shop-service h3 { margin:14px 0 12px; }
.shop-online-time { margin:0 0 12px; font-size:28px; font-weight:650; color:#245ac1; font-variant-numeric:tabular-nums; }
.shop-service .btn { max-width:300px; }
.shop-service .panel-body > h3:first-child { margin-top:0; }
.shop-input-label { display:block; font-size:12px; color:#45556a; margin-bottom:8px; }
.shop-page .form-control { border-color:#d5dde8; border-radius:5px; margin-bottom:18px; max-width:300px; display:block; }
.shop-page .form-control:focus { border-color:#2864d7; box-shadow:none; outline:2px solid #dce6fa; }
.shop-payment-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:-8px 0 24px; }
.shop-payment-summary article { min-width:0; border:1px solid #dce2ea; border-radius:6px; padding:16px 20px; background:#fff; }
.shop-payment-summary strong { display:block; font-size:23px; font-weight:650; color:#245ac1; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.shop-payment-summary p { margin:6px 0 0; font-size:12px; color:#68778b; }
.shop-history-pager { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; margin-top:8px; font-size:12px; color:#68778b; }
.shop-charge-result { display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex-shrink:0; }
.shop-charge-result .shop-label { margin:3px 0 0; }
.shop-charge-result strong { font-size:23px; color:#243247; font-variant-numeric:tabular-nums; }
.shop-order-list { display:flex; flex-direction:column; gap:12px; }
.shop-order .panel-body { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.shop-order h3 { margin:0; }
.shop-order .edit-hint { margin-top:5px; overflow-wrap:anywhere; }
.shop-order .panel-body > div { min-width:0; }
.shop-empty { grid-column:1/-1; padding:65px 24px; text-align:center; background:#fff; border:1px dashed #d5dde8; border-radius:6px; color:#68778b; font-size:12px; }
.shop-empty span { font-size:15px; color:#45556a; }
.shop-empty p { margin:10px 0 0; }
.shop-loading { max-width:1248px; margin:0 auto; padding:50px 32px; color:#68778b; }
.shop-footer { display:flex; justify-content:space-between; gap:16px; color:#7c899b; font-size:11px; padding-top:28px; margin-top:30px; border-top:1px solid #dfe5ed; }
.shop-page .toast-dialog,.gate .toast-dialog { border:1px solid #dce2ea; border-radius:8px; box-shadow:0 8px 30px #24324715; }
.shop-page .toast-btn.success,.gate .toast-btn.success { background:#278068; }
.shop-page .toast-btn.error,.gate .toast-btn.error { background:#c84343; }
@media (max-width:960px) {
  .shop-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .shop-workspace { padding:25px 24px; }
  .shop-account-cell { padding:18px; }
  .shop-account-cell > strong { font-size:22px; }
}
@media (max-width:640px) {
  .shop-topbar { min-height:70px; padding:14px 18px; gap:14px; }
  .shop-top-actions { gap:9px; }
  .shop-top-actions > span { display:none; }
  .shop-primary-nav { padding:0 18px; gap:28px; }
  .shop-primary-nav button { font-size:13px; padding-top:13px; }
  .shop-workspace { padding:23px 16px; }
  .shop-page-title { margin-bottom:18px; }
  .shop-page-title h1 { font-size:24px; }
  .shop-page-title p { font-size:12px; }
  .shop-role-status { display:none; }
  .shop-account-strip { grid-template-columns:1fr 1fr; margin-bottom:22px; }
  .shop-account-cell { padding:17px; }
  .shop-account-cell > strong { font-size:21px; }
  .shop-account-cell.shop-support { grid-column:1/-1; border-left:0; border-top:1px solid #e6eaf0; display:grid; grid-template-columns:1fr auto; gap:3px 12px; padding:14px 17px; align-items:center; }
  .shop-support .shop-label { margin:0; }
  .shop-support > strong { grid-row:2; font-size:20px; }
  .shop-support .shop-text-button { grid-column:2; grid-row:1/3; margin:0; padding:7px 12px; border:1px solid #d9e0e8; border-radius:4px; }
  .shop-support > .shop-unset { grid-column:2; grid-row:1; margin:0; font-size:13px; text-align:right; }
  .shop-support > p { grid-column:1/-1; margin-top:3px; }
  .shop-secondary-nav { gap:5px; margin-bottom:18px; }
  .shop-secondary-nav .btn-info { flex:1 0 auto; padding:8px 7px; font-size:12px; }
  .shop-grid,.shop-service-grid { grid-template-columns:1fr; gap:14px; }
  .shop-page .panel-body { padding:20px; }
  .shop-item { min-height:210px; }
  .shop-notice { display:block; padding:11px 13px; font-size:12px; }
  .shop-notice b { display:block; margin-bottom:4px; }
  .shop-order .panel-body { flex-wrap:wrap; gap:12px; }
  .shop-order .shop-price b { font-size:21px; }
  .shop-payment-summary { grid-template-columns:1fr; gap:10px; margin-bottom:20px; }
  .shop-payment-summary article { padding:14px 12px; }
  .shop-payment-summary strong { font-size:20px; }
  .shop-charge-order .panel-body { align-items:flex-start; }
  .shop-charge-result { align-items:flex-start; }
  .shop-footer { font-size:10px; padding-top:20px; margin-top:24px; }
  .shop-footer > span { display:none; }
  body.gate .glass { padding:29px 25px; }
}
.shop-quota-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:18px; border:1px solid #e5eaf1; border-radius:5px; background:#f8fafc; margin:18px 0; }
.shop-quota-grid span { display:block; color:#8290a3; font-size:12px; margin-bottom:8px; }
.shop-quota-grid strong { color:#376bc0; font-size:27px; font-weight:600; font-variant-numeric:tabular-nums; }
.shop-quota-grid strong small { font-size:12px; font-weight:400; color:#8794a6; }
.shop-quota-paid { grid-column:1/-1; border-top:1px solid #e5eaf1; padding-top:14px; }
.shop-quota-paid strong { font-size:21px; color:#435773; }
.shop-password-form .field { margin-bottom:16px; }
.shop-form-error { color:#c44444; font-size:12px; line-height:1.7; min-height:0; margin:0 0 14px; }
@media (prefers-reduced-motion:reduce) { .shop-page * { transition:none !important; } }

.shop-sign-rewards{list-style:none;padding:0;margin:16px 0}.shop-sign-rewards li{display:flex;gap:12px;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #edf0f4;font-size:13px}.shop-sign-rewards li b{flex:1;font-weight:500}.shop-item .form-control{margin-top:8px}.shop-service .btn-info{margin-top:12px}

body.gate {
  color:#f5f7fa;
  background:
    linear-gradient(110deg,rgba(12,27,43,.91) 0%,rgba(17,42,65,.78) 52%,rgba(18,47,73,.35) 100%),
    url("/assets/wjdr-winter-scene.png") center 58% / cover fixed,
    #172b40;
}
body.gate .glass {
  width:min(440px,100%);
  padding:34px 36px 30px;
  background:rgba(16,34,52,.84);
  border:1px solid rgba(222,235,245,.46);
  border-top:2px solid #d6b067;
  border-radius:7px;
  box-shadow:0 22px 65px rgba(5,15,26,.4);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.play-login-brand { color:#fff; margin-bottom:31px; }
.play-login-brand > span { color:#f1d28d; background:rgba(255,255,255,.08); border:1px solid rgba(214,176,103,.82); border-radius:4px; }
.play-login-brand b { color:#f5f7fa; }
body.gate .glass h1 { color:#fff; }
body.gate .glass .hint { color:#d0d9e3; }
body.gate .glass label { color:#e1e8ef; }
body.gate .glass input,body.gate .glass select {
  color:#f5f7fa;
  background:rgba(244,248,252,.08);
  border:1px solid rgba(217,230,241,.38);
  border-radius:4px;
}
body.gate .glass input::placeholder { color:#b5c2cf; }
body.gate .glass input:focus,body.gate .glass select:focus { outline:2px solid rgba(120,190,235,.34); border-color:#73b7e5; }
body.gate .glass button[type="submit"] { color:#fff; background:#3395d0; border:1px solid #78c6f2; border-radius:4px; }
body.gate .glass button[type="submit"]:hover { background:#287fb7; }
body.gate .glass .err { color:#ffd6d2; background:rgba(107,31,31,.76); border:1px solid rgba(255,160,147,.48); border-radius:4px; }
.shop-page { color:#273747; background:#edf0f2; }
.shop-topbar {
  min-height:78px;
  color:#f6f8fa;
  background:#172b40;
  border-bottom:2px solid #b99754;
}
.shop-brand-mark { color:#f0d28e; background:rgba(255,255,255,.07); border:1px solid #b99754; border-radius:4px; }
.shop-brand b { color:#f6f8fa; }
.shop-brand small { color:#bdc9d5; }
.shop-top-actions { color:#d3dbe3; }
.shop-page .head-out { color:#e1e7ed; background:rgba(255,255,255,.06); border-color:rgba(221,231,239,.32); }
.shop-page .head-out:hover { background:rgba(255,255,255,.14); }
.shop-primary-nav { gap:30px; border-bottom-color:#d4d9de; }
.shop-primary-nav button { border-bottom-width:3px; }
.shop-primary-nav button.active { border-bottom-color:#bd9651; color:#2c719f; }
.shop-primary-nav button:hover { color:#2c719f; }
.shop-page-title {
  min-height:190px;
  padding:24px 28px;
  color:#f5f7fa;
  background-color:#20364a;
  background-image:linear-gradient(90deg,#172b40 0%,rgba(23,43,64,.96) 42%,rgba(23,43,64,.34) 100%),url("/assets/wjdr-recharge.png");
  background-position:center,right center;
  background-size:cover,auto 100%;
  background-repeat:no-repeat;
  border-left:3px solid #b99754;
}
.shop-page-title > div > span { color:#dbc58f; }
.shop-page-title h1 { color:#fff; }
.shop-page-title p { color:#d3dce5; }
.shop-role-status { color:#f0e4c5; background:rgba(18,36,53,.58); border-color:rgba(230,214,174,.46); }
.shop-account-strip { border-color:#d6dce1; border-top:2px solid #b99754; }
.shop-balance > strong { color:#2b779e; }
.shop-text-button { color:#2c719f; }
.shop-secondary-nav .btn-info.active { color:#285f7e; background:#e5edf0; border-color:#c5d6dc; box-shadow:inset 0 -2px #b99754; }
.shop-secondary-nav .btn-info:hover { color:#285f7e; background:#edf2f3; }
.shop-category-nav button.active { color:#245f82; background:#eaf1f3; border-color:#9ebac5; }
.shop-notice { border-left-color:#b99754; background:#f5f3ed; color:#596675; }
.shop-notice b { color:#35485b; }
.shop-tag { color:#526272; background:#f1f3f4; border-color:#d9dfe3; }
.shop-first { color:#986d27; }
.shop-price b { color:#8b672c; }
.shop-page .btn,.shop-page .btn-warning { background:#318fbd; }
.shop-page .btn-warning:hover { background:#26769f; }
.shop-page .btn-success { background:#418b70; }
.shop-page .btn-success:hover { background:#33745d; }
.shop-progress i { background:#398fbd; }
.shop-quota-grid strong { color:#2f779b; }
.shop-quota-paid strong { color:#6d706e; }
.shop-page .toast-btn.success,.gate .toast-btn.success { background:#418b70; }
@media (max-width:640px) {
  body.gate { background-position:center 54%; background-attachment:scroll; }
  body.gate .glass { padding:28px 24px 25px; }
  .shop-page-title { min-height:168px; padding:20px 18px; background-position:center,right center; background-size:cover,auto 100%; }
  .shop-page-title h1 { font-size:23px; }
}
.shop-bug-wrap { display:block; }
.shop-bug-frame { width:100%; height:78vh; border:0; border-radius:8px; background:#fff; }