.h3-payment-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 12px auto;
  color: var(--text);
  text-align: center;
}
.h3-payment-qr img {
  display: block;
  width: 208px;
  height: 208px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}
.h3-payment-qr b { font-size: 13px; }
#h3OrderMessage > p { text-align: center; }

.dialog.h3-purchase-dialog {
  width: min(780px, 95vw);
  padding: 30px;
  color: var(--text);
  background: #131820;
  border: 1px solid #303846;
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .55);
}
.h3-purchase-dialog .dialog-head { margin-bottom: 22px; }
.h3-purchase-dialog .dialog-head h2 {
  margin: 5px 0 3px;
  color: var(--text);
  font-size: 22px;
  letter-spacing: -.35px;
}
.h3-purchase-dialog .dialog-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.h3-purchase-dialog .close { color: var(--muted); }
.h3-dialog-kicker {
  color: var(--cyan);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 1.25px;
}
.h3-purchase { display: grid; gap: 20px; }
.h3-product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  max-height: 34dvh;
  overflow: auto;
  padding: 1px 2px 5px;
}
.h3-package {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 9px;
  margin: 0 !important;
  padding: 15px;
  color: var(--text) !important;
  background: #191f28;
  border: 1px solid #303846;
  border-radius: 11px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.h3-package:hover { border-color: #526c70; background: #1c252e; }
.h3-package:disabled { cursor: default; opacity: .72; }
.h3-package.selected {
  border: 1.5px solid var(--amber);
  background: #29241d;
  box-shadow: 0 0 0 2px rgba(238, 188, 116, .09);
}
.h3-package input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}
.h3-package:focus-within { outline: none; }
.h3-package:has(input:focus-visible) { outline: 2px solid #c39a59; outline-offset: 2px; }
.h3-package-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.h3-package-heading b { overflow: hidden; color: var(--text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.h3-check {
  display: grid;
  width: 17px;
  height: 17px;
  flex: none;
  place-items: center;
  color: #fff;
  background: #394352;
  border-radius: 50%;
  font-size: 10px;
  opacity: 0;
}
.h3-package.selected .h3-check { background: #a77d43; opacity: 1; }
.h3-credit-amount { color: var(--text); font-size: 25px; line-height: 1.15; letter-spacing: -.5px; }
.h3-credit-amount small { margin-left: 5px; color: var(--muted); font-size: 12px; font-weight: 500; }
.h3-package-description {
  min-height: 34px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}
.h3-package-price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 5px;
  margin-top: 2px;
  padding-top: 9px;
  border-top: 1px solid #303846;
}
.h3-package-price b { color: var(--amber); font-size: 19px; font-weight: 700; }
.h3-package-price small { color: var(--muted); font-size: 10px; }
.h3-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.h3-section-heading b { color: var(--text); font-size: 13px; }
.h3-section-heading small { color: var(--muted); font-size: 11px; }
.h3-pay-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.h3-pay-method {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  color: var(--text);
  text-align: left;
  background: #191f28;
  border: 1px solid #303846;
  border-radius: 9px;
}
.h3-pay-method:hover { background: #1c252e; border-color: #526c70; }
.h3-pay-method.selected { background: #29241d; border: 1.5px solid var(--amber); }
.h3-pay-method img { width: 22px; height: 22px; flex: none; object-fit: contain; }
.h3-pay-method b { display: block; color: var(--text); font-size: 12px; }
.h3-pay-method small { display: block; margin-top: 1px; color: var(--muted); font-size: 10px; }
.h3-pay-check { margin-left: auto; color: var(--amber); font-size: 13px; opacity: 0; }
.h3-pay-method.selected .h3-pay-check { opacity: 1; }
.h3-order-message { display: none; padding: 0; }
.h3-order-message.visible {
  display: block;
  padding: 13px;
  background: #171e27;
  border: 1px solid #303846;
  border-radius: 11px;
}
.h3-order-message.loading { display: flex; min-height: 54px; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: 12px; }
.h3-order-spinner {
  width: 17px;
  height: 17px;
  border: 2px solid #394352;
  border-top-color: var(--amber);
  border-radius: 50%;
  animation: h3-spin .7s linear infinite;
}
@keyframes h3-spin { to { transform: rotate(360deg); } }
.h3-payment-panel { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.h3-payment-copy { display: grid; gap: 7px; }
.h3-payment-kicker { color: var(--cyan); font-size: 11px; font-weight: 650; }
.h3-payment-copy strong { color: var(--text); font-size: 19px; }
.h3-payment-copy p { max-width: 310px; color: var(--muted); font-size: 12px; }
.h3-payment-copy small { color: var(--muted); overflow-wrap: anywhere; }
.h3-purchase-error { margin: 0; padding: 12px 14px; color: #ffb4ba; background: #39252b; border: 1px solid #75414c; border-radius: 9px; font-size: 12px; }
.h3-payment-wait { display: flex; align-items: center; gap: 7px; margin-top: 6px; color: var(--muted); font-size: 11px; }
.h3-payment-wait i { width: 7px; height: 7px; background: var(--amber); border-radius: 50%; }
.h3-payment-qr { display: flex; flex: none; flex-direction: column; align-items: center; gap: 6px; color: var(--muted); text-align: center; }
.h3-payment-qr img { display: block; width: 150px; height: 150px; padding: 7px; background: #fff; border: 1px solid #394352; border-radius: 9px; }
.h3-payment-qr small { font-size: 10px; }
.h3-alipay-frame { display: grid; width: 208px; height: 208px; flex: none; place-items: center; padding: 8px; overflow: hidden; background: #fff; border: 1px solid #394352; border-radius: 12px; }
.h3-alipay-crop { width: 150px; height: 150px; overflow: hidden; }
.h3-alipay-crop iframe { display: block; width: 150px; height: 190px; border: 0; background: #fff; }
.h3-payment-open-link { color: var(--cyan); font-size: 11px; }
.h3-payment-fallback { display: grid; gap: 5px; color: var(--muted); font-size: 12px; }
.h3-payment-fallback b { color: var(--text); }
.h3-payment-fallback a { width: fit-content; margin-top: 3px; color: var(--cyan); }
.h3-order-message.error { color: #ffb4ba; background: #39252b; border-color: #75414c; }
.h3-payment-complete { display: flex; min-height: 58px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #88dfb8; text-align: center; }
.h3-payment-complete span { display: grid; width: 25px; height: 25px; place-items: center; color: #fff; background: #12b76a; border-radius: 50%; font-weight: 700; }
.h3-payment-complete b { color: #88dfb8; font-size: 14px; }
.h3-payment-complete small { color: var(--muted); font-size: 11px; }
.h3-purchase-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 14px; border-top: 1px solid #303846; }
.h3-purchase-footer > span { color: var(--muted); font-size: 10px; line-height: 1.6; }
.h3-purchase-dialog .h3-purchase-footer button {
  min-width: 205px;
  padding: 11px 16px;
  background: var(--amber);
  border-color: var(--amber);
  color: #20180b;
  border-radius: 8px;
  font-weight: 650;
}
.h3-purchase-dialog .h3-purchase-footer button:hover { background: #f5cd96; border-color: #f5cd96; }
.h3-purchase-dialog .h3-purchase-footer button:disabled { background: #725a37; border-color: #725a37; }
@media (max-width: 760px) {
  .dialog.h3-purchase-dialog { width: min(600px, 96vw); padding: 22px; }
  .h3-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 38dvh; }
}
@media (max-width: 520px) {
  .dialog.h3-purchase-dialog { width: 100%; max-width: 100%; max-height: 94dvh; padding: 18px; border-radius: 14px; }
  .h3-purchase-dialog .dialog-head { margin-bottom: 16px; }
  .h3-purchase { gap: 15px; }
  .h3-product-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .h3-package { gap: 7px; padding: 11px; }
  .h3-package-heading b { font-size: 11px; }
  .h3-credit-amount { font-size: 21px; }
  .h3-pay-methods { gap: 7px; }
  .h3-pay-method { gap: 7px; padding: 9px; }
  .h3-payment-panel { flex-direction: column-reverse; align-items: stretch; gap: 12px; }
  .h3-payment-qr img { width: 138px; height: 138px; }
  .h3-payment-copy { text-align: center; }
  .h3-payment-copy p { max-width: none; }
  .h3-payment-wait { justify-content: center; }
  .h3-purchase-footer { align-items: stretch; flex-direction: column; }
  .h3-purchase-dialog .h3-purchase-footer button { width: 100%; }
}
.avatar { position: relative; overflow: visible; cursor: default; }
.avatar img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.avatar[data-nickname]:hover::after,
.avatar[data-nickname]:focus-visible::after {
  content: attr(data-nickname);
  position: absolute;
  z-index: 30;
  left: calc(100% + 12px);
  bottom: 0;
  max-width: 240px;
  padding: 7px 10px;
  overflow: hidden;
  border: 1px solid #394252;
  border-radius: 7px;
  background: #141922;
  color: #eef1f6;
  box-shadow: 0 8px 24px #0008;
  font: 12px/1.4 var(--font, sans-serif);
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

/* Account controls live with the sidebar avatar. */
.avatar[data-nickname]:hover::after,.avatar[data-nickname]:focus-visible::after{content:none}
.account-menu{position:relative;width:33px;height:33px;margin:22px auto 0;z-index:25}
.account-menu .avatar{width:33px;height:33px;margin:0;padding:0;border:1px solid #3a4654;border-radius:50%;background:#24353c;color:#a9d8d5;cursor:pointer}
.account-menu .avatar:hover{background:#2b4149;border-color:#6a7e85}
.account-popover{display:none;position:absolute;left:calc(100% + 12px);bottom:0;width:210px;padding:14px;text-align:left;border:1px solid #394252;border-radius:10px;background:#171d26;box-shadow:0 12px 36px #0009}
.account-menu:hover .account-popover,.account-menu:focus-within .account-popover,.account-menu.open .account-popover{display:block}
.account-popover strong,.account-popover small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-popover strong{color:var(--text);font-size:13px;font-weight:600}
.account-popover small{margin-top:2px;color:var(--muted);font-size:10px}
.account-menu .account-popover button{width:100%;margin-top:12px;padding:8px 10px;border:1px solid #394252;border-radius:7px;background:#202733;color:var(--text);text-align:left;font-size:12px}
.account-menu .account-popover button:hover{border-color:#665134;background:#29241d;color:var(--amber)}