/* RedotPay 风格首页 index2.php — 白底极简 + 红色点缀 + 悬浮底栏 */
/* 依赖 body.myhgm-app-shell 提供的字体与基础变量（app-home.css） */

body.redot-home {
  /* 颜色/字体/圆角令牌已收敛至 design-tokens.css（--rd-* 为规范令牌别名），
     此处仅保留本文件特有的布局变量 */
  --rd-navy: #30405a;
  --rd-pad-x: 16px;
  /* 首页模块竖向间距（对齐 Redot 截图：快捷入口 / 轮播 / 卡 / 流水） */
  --rd-gap: 16px;
  background: var(--rd-bg);
  font-family: var(--rd-font);
  color: var(--rd-ink);
}

.redot-main {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 16px 120px;
  min-height: 100vh;
  background: var(--k-bg);
  font-family: var(--myhgm-app-font);
  color: var(--rd-ink);
}

/* —— 顶栏：头像 / 居中 LOGO+品牌 / 铃铛·客服 —— */
.redot-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 0 18px;
  position: sticky;
  top: 0;
  z-index: var(--k-z-header);
  background: var(--k-bg);
}

.redot-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--rd-gray);
  display: block;
  position: relative;
  z-index: 1;
}

.redot-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.redot-brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: calc(100% - 160px);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--rd-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.redot-brand img {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  pointer-events: none;
}

.redot-brand span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.redot-topbar-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  margin-left: auto;
  position: relative;
  z-index: 1;
}

.redot-topbar > .redot-topbar-spacer {
  margin-left: auto;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.redot-topbar > .redot-icon-btn:first-child {
  position: relative;
  z-index: 1;
}

.redot-icon-btn {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--rd-ink);
  font-size: 19px;
  text-decoration: none;
  position: relative;
  cursor: pointer;
  padding: 0;
}

.redot-notify-dot {
  position: absolute;
  top: 6px;
  right: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rd-red);
}

/* —— 总资产 —— */
.redot-assets {
  padding: 8px 2px 0;
}

.redot-assets-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--rd-muted);
  font-size: 14px;
  margin-bottom: 12px;
}

.redot-assets-label > span:first-child::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--k-label-4);
  margin-left: 6px;
  vertical-align: middle;
}

.redot-eye {
  border: 0;
  background: transparent;
  color: var(--rd-muted);
  padding: 0;
  line-height: 1;
  cursor: pointer;
  font-size: 16px;
}

.redot-assets-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: var(--rd-gap);
}

.redot-assets-amount {
  font-size: 44px;
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--rd-ink);
}

.redot-assets-ccy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--rd-ink);
  text-decoration: none;
  line-height: 1.2;
}

/* —— 快捷操作：圆形图标 ×4 —— */
.redot-quick {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: var(--rd-gap);
  text-align: center;
}

.redot-quick-item {
  text-decoration: none;
  color: var(--rd-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
}

.redot-quick-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  border: 1px solid var(--rd-gray-border);
  background: var(--rd-gray);
  color: var(--rd-ink);
}

.redot-quick-item.is-primary .redot-quick-icon {
  background: var(--k-ink-strong);
  border-color: var(--k-ink-strong);
  color: var(--k-bg);
}

/* —— 深色开卡推广卡 —— */
.redot-promo {
  background: var(--rd-navy);
  border-radius: 18px;
  padding: 18px 16px 16px;
  margin-bottom: var(--rd-gap);
  color: var(--k-bg);
}

.redot-promo-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.redot-promo-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--rd-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--k-bg);
  flex-shrink: 0;
}

.redot-promo-text {
  flex: 1;
  min-width: 0;
}

.redot-promo-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 3px;
  line-height: 1.35;
}

.redot-promo-sub {
  font-size: 12px;
  margin: 0;
  opacity: 0.65;
}

.redot-promo-cta {
  display: block;
  text-align: center;
  background: var(--k-bg);
  color: var(--rd-ink);
  font-size: 15px;
  font-weight: 600;
  border-radius: 999px;
  padding: 12px 16px;
  text-decoration: none;
}

/* —— 运营 banner 轮播（浅蓝） —— */
.redot-banners {
  margin-bottom: var(--rd-gap);
}

.redot-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 18px;
  border-radius: 16px;
  min-height: 96px;
  /* 产品插画色（Banner），非 chrome 令牌 */
  background: #e8eef4;
  color: #17233b;
  text-decoration: none;
}

.redot-banner-text {
  flex: 1;
  min-width: 0;
}

.redot-banner-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 4px;
  line-height: 1.35;
}

.redot-banner-sub {
  font-size: 12px;
  margin: 0;
  opacity: 0.7;
}

.redot-banner-icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.redot-banner-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.redot-banners .swiper-pagination {
  position: static;
  margin-top: 8px;
  text-align: center;
}

.redot-banners .swiper-pagination-bullet {
  background: var(--k-label-4);
  opacity: 1;
  width: 6px;
  height: 6px;
}

.redot-banners .swiper-pagination-bullet-active {
  background: var(--k-label-2);
}

/* —— 交易列表 —— */
.redot-tx {
  margin-bottom: var(--rd-gap);
}

.redot-tx-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px 4px;
}

.redot-tx-head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--rd-ink);
}

.redot-tx-more {
  color: var(--k-label-4);
  font-size: 18px;
  text-decoration: none;
  line-height: 1;
  padding: 4px;
}

.redot-tx-footer {
  display: flex;
  justify-content: center;
  padding: 16px 0 4px;
}

.redot-tx-more-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--rd-muted);
  text-decoration: none;
}

.redot-tx-more-link:hover,
.redot-tx-more-link:focus {
  color: var(--rd-ink);
  text-decoration: underline;
}

.redot-tx-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--rd-line);
}

a.redot-tx-row {
  color: inherit;
  text-decoration: none;
}

a.redot-tx-row:hover {
  opacity: 0.92;
}

.redot-bill-detail {
  padding: 8px 0 24px;
}

.redot-bill-detail-title {
  margin: 0 0 8px;
  text-align: center;
  font-size: 15px;
  color: var(--k-label-3);
}

.redot-bill-detail-amount {
  margin: 0 0 24px;
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--k-ink-strong);
}

.redot-bill-detail-amount.is-credit {
  color: var(--k-success);
}

.redot-bill-detail-amount.is-debit {
  color: var(--k-danger);
}

.redot-bill-detail-amount.is-neutral {
  color: var(--k-label-3);
}

.redot-bill-detail-status {
  display: flex;
  justify-content: center;
  margin: -8px 0 24px;
}

.redot-bill-status-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
}

.redot-bill-status-icon.is-success {
  background: var(--k-success-tint);
  color: var(--k-success);
}

.redot-bill-status-icon.is-fail {
  background: var(--k-danger-tint);
  color: var(--k-danger);
}

.redot-bill-detail-fields {
  margin: 0;
}

.redot-bill-detail-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--rd-line);
}

.redot-bill-detail-row:last-child {
  border-bottom: 0;
}

.redot-bill-detail-row dt {
  margin: 0;
  flex-shrink: 0;
  color: var(--k-label-3);
  font-size: 14px;
}

.redot-bill-detail-row dd {
  margin: 0;
  text-align: right;
  font-size: 14px;
  color: var(--k-ink-strong);
  word-break: break-word;
}

.redot-bill-detail-row dd a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.redot-tx-row:last-child {
  border-bottom: 0;
}

.redot-tx-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--rd-gray);
  color: var(--k-label-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.redot-tx-body {
  flex: 1;
  min-width: 0;
}

.redot-tx-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--rd-ink);
  margin: 0 0 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.redot-tx-time {
  font-size: 12px;
  color: var(--rd-muted);
  margin: 0;
}

.redot-tx-aside {
  text-align: right;
  flex-shrink: 0;
}

.redot-tx-amt {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--rd-ink);
}

.redot-tx-amt.is-credit {
  color: var(--k-success);
}

.redot-tx-amt.is-debit {
  color: var(--k-danger);
}

.redot-tx-amt.is-neutral {
  color: var(--k-label-3);
}

.redot-tx-status {
  display: block;
  font-size: 12px;
  margin-top: 2px;
}

.redot-tx-status.is-credit {
  color: var(--k-success);
}

.redot-tx-status.is-debit {
  color: var(--rd-muted);
}

.redot-tx-status.is-success {
  color: var(--k-success);
}

.redot-tx-status.is-fail {
  color: var(--k-danger);
}

.redot-tx-status.is-cancel {
  color: var(--k-label-4);
}

.redot-tx-status.is-pending {
  color: var(--k-warning);
}

.redot-empty {
  padding: 30px 8px;
  text-align: center;
  color: var(--rd-muted);
  font-size: 13px;
}

.redot-alert {
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13px;
  margin-bottom: 14px;
  background: var(--rd-gray);
  color: var(--rd-ink);
}

.redot-alert--ok {
  background: var(--k-success-tint);
  color: var(--k-success);
}

.redot-alert--err {
  background: var(--k-danger-tint);
  color: var(--k-danger);
}

.redot-more-section {
  margin-bottom: 28px;
}

.redot-more-section h2 {
  font-size: 16px;
  font-weight: 700;
  margin: 12px 0 14px;
}

/* —— 悬浮底栏（胶囊） —— */
.redot-tabbar {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: max(14px, env(safe-area-inset-bottom, 0px));
  z-index: var(--k-z-header);
  max-width: 448px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  background: var(--k-bg);
  border-radius: 999px;
  box-shadow: var(--k-shadow-tabbar);
  padding: 6px;
}

.redot-tab {
  flex: 1;
  display: flex;
  text-decoration: none;
  color: var(--rd-ink);
}

.redot-tab-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 7px 4px 6px;
  border-radius: 999px;
  font-size: 20px;
  line-height: 1.15;
}

.redot-tab-text {
  font-size: 11px;
  font-weight: 500;
}

.redot-tab.is-active {
  color: var(--rd-blue);
}

.redot-tab.is-active .redot-tab-inner {
  background: var(--k-info-tint);
}

.redot-tab.is-active .redot-tab-text {
  font-weight: 600;
}

/* —— 资产页 funds2.php 专用 —— */

/* 操作胶囊按钮行（添加资金 / 兑换 / 提现） */
.redot-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 28px;
}

.redot-pill {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--rd-gray);
  border: 1px solid var(--rd-gray-border);
  color: var(--rd-ink);
  font-size: 14px;
  font-weight: 600;
  border-radius: 12px;
  padding: 13px 10px;
  text-decoration: none;
  line-height: 1.2;
}

.redot-pill--dark {
  background: var(--k-ink-strong);
  border-color: var(--k-ink-strong);
  color: var(--k-bg);
}

.redot-pill--dark:hover,
.redot-pill--dark:focus,
.redot-pill--dark:active {
  background: var(--k-ink-strong);
  border-color: var(--k-ink-strong);
  color: var(--k-bg);
}

/* 处理中的充提提示 */
.redot-pending {
  background: var(--rd-gray);
  border-radius: 14px;
  padding: 6px 14px;
  margin-bottom: 20px;
}

.redot-pending-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  font-size: 13px;
  color: var(--rd-ink);
}

.redot-pending-row + .redot-pending-row {
  border-top: 1px solid var(--rd-gray-border);
}

.redot-pending-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--k-warning-ink);
  background: var(--k-warning-tint);
  border-radius: 999px;
  padding: 3px 10px;
}

.redot-pending-mid {
  min-width: 0;
  flex: 1;
}

.redot-pending-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.redot-pending-cancel {
  margin: 0;
}

.redot-pending-cancel-btn {
  border: 0;
  background: transparent;
  color: var(--k-danger);
  font-size: 12px;
  font-weight: 600;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.redot-pending-cancel-btn:hover {
  color: var(--k-danger);
}

/* 加密货币 / 法币 下划线页签 */
.redot-asset-tabs {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--rd-line);
  margin-bottom: 4px;
}

.redot-asset-tab {
  border: 0;
  background: transparent;
  padding: 10px 2px 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--rd-muted);
  cursor: pointer;
  position: relative;
}

.redot-asset-tab.is-active {
  color: var(--rd-ink);
  font-weight: 700;
}

.redot-asset-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--rd-ink);
}

.redot-asset-panel.is-hidden {
  display: none;
}

/* 持币行 */
.redot-asset-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 2px;
  border-bottom: 1px solid var(--rd-line);
  text-decoration: none;
  color: var(--rd-ink);
}

.redot-asset-row:last-child {
  border-bottom: 0;
}

.redot-asset-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--rd-gray);
}

.redot-asset-mid {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.redot-asset-symbol {
  font-size: 16px;
  font-weight: 400;
  color: var(--rd-ink);
}

.redot-asset-name {
  font-size: 13px;
  color: var(--rd-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.redot-asset-right {
  text-align: right;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.redot-asset-balance {
  font-size: 16px;
  font-weight: 400;
  color: var(--rd-ink);
}

.redot-asset-usd {
  font-size: 13px;
  color: var(--rd-muted);
}

/* L0 用户法币区 KYC 提示 */
.redot-kyc-hint {
  padding: 28px 8px;
  text-align: center;
}

.redot-kyc-hint p {
  font-size: 13px;
  color: var(--rd-muted);
  margin: 0 0 16px;
  line-height: 1.6;
}

.redot-kyc-cta {
  max-width: 220px;
  margin: 0 auto;
}

/* —— 骨架屏（页面过渡加载占位） —— */

.redot-skeleton {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  z-index: var(--k-z-skeleton);
  background: var(--k-bg);
  padding: 14px 16px 0;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.redot-skeleton.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.redot-skeleton-tabbar {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: max(14px, env(safe-area-inset-bottom, 0px));
}

.rd-sk {
  display: inline-block;
  background: var(--k-fill-f2);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
}

.rd-sk::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.65) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-100%);
  animation: rd-sk-shimmer 1.4s ease-in-out infinite;
}

@keyframes rd-sk-shimmer {
  to {
    transform: translateX(100%);
  }
}

.rd-sk-circle {
  border-radius: 50%;
}

.rd-sk-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 4px;
}

.rd-sk-topbar-icons {
  display: inline-flex;
  gap: 10px;
}

.rd-sk-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rd-sk-grid {
  display: grid;
  gap: 10px;
}

.rd-sk-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.rd-sk-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.rd-sk-quick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.rd-sk-list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 2px;
}

.rd-sk-list-mid {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rd-sk-list-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .rd-sk::after {
    animation: none;
  }
}

/* —— 提交按钮 loading（防重复点击） —— */

.rd-btn-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: var(--k-bg);
  animation: rd-btn-spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes rd-btn-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rd-btn-spinner {
    animation-duration: 1.4s;
  }
}

/* —— 首页 Credit 卡入口 —— */
.redot-credit {
  background: var(--k-bg);
  border: 1px solid var(--rd-line);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: var(--rd-gap);
}

.redot-credit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  color: var(--rd-ink);
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 10px;
}

.redot-credit-head i {
  color: var(--rd-muted);
  font-size: 14px;
}

.redot-credit-label {
  margin: 0;
  font-size: 12px;
  color: var(--rd-muted);
}

.redot-credit-mask {
  margin: 6px 0 14px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--rd-ink);
}

.redot-credit-cta {
  display: block;
  text-align: center;
  text-decoration: none;
  color: var(--rd-ink);
  font-weight: 600;
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--rd-gray-border);
  background: var(--k-bg);
}

.redot-home-cards {
  margin-bottom: var(--rd-gap);
}

.redot-home-cards .redot-credit-head {
  margin-bottom: 12px;
}

.redot-vcards--home {
  margin-top: 0;
}

/* —— 子页顶栏 —— */
.redot-topbar--page .redot-brand--page {
  position: static;
  left: auto;
  transform: none;
  flex: 1;
  display: block;
  max-width: none;
  pointer-events: auto;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
}

.redot-topbar--page .redot-topbar-actions {
  margin-left: 0;
}

.redot-topbar-spacer {
  width: 36px;
  display: inline-block;
}

/* —— 通用列表 / 表单壳 —— */
.redot-list {
  background: var(--k-bg);
}

.redot-list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--rd-line);
  text-decoration: none;
  color: var(--rd-ink);
}

.redot-list-row:last-child {
  border-bottom: 0;
}

.redot-list-mid {
  flex: 1;
  min-width: 0;
}

.redot-list-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.redot-list-sub {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--rd-muted);
}

/* Page-level subtitle under topbar (not list-row meta) */
.redot-page-lead {
  margin: 0 0 20px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--rd-muted);
  text-wrap: pretty;
}

/* Support ticket image attachments */
.support-att-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  max-width: 92%;
}

.support-att-grid--end {
  margin-left: auto;
  justify-content: flex-end;
}

.support-att-grid a {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--k-bg-secondary, #f5f5f5);
}

.support-att-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.redot-list-right {
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--rd-ink);
  text-align: right;
}

.redot-list-row--flush {
  border-bottom: 0;
  padding: 8px 2px 16px;
}

.redot-pill--compact {
  padding: 6px 12px;
  font-size: 12px;
  flex: 0 0 auto;
}

.redot-menu {
  margin-top: 8px;
}

.redot-menu-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 2px;
  border-bottom: 1px solid var(--rd-line);
  text-decoration: none;
  color: var(--rd-ink);
  font-size: 15px;
  font-weight: 500;
}

.redot-menu-row i.bi:first-child {
  font-size: 18px;
  width: 24px;
  text-align: center;
}

.redot-menu-row .redot-menu-chevron {
  margin-left: auto;
  color: var(--rd-muted);
}

.redot-menu-row:has(.redot-menu-value) .redot-menu-chevron,
.redot-menu-row:has(.redot-menu-check) .redot-menu-chevron {
  margin-left: 8px;
}

.redot-menu-value {
  margin-left: auto;
  color: var(--rd-muted);
  font-size: 14px;
  font-weight: 400;
}

.redot-menu-row.is-active {
  color: var(--k-accent);
}

.redot-2fa-qr {
  width: 168px;
  height: 168px;
}

.redot-2fa-secret code {
  font-size: 13px;
  word-break: break-all;
  color: var(--k-ink-strong);
}

.redot-transfer-method-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.redot-transfer-method-tab {
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  background: var(--k-fill-f2);
  color: var(--k-label-2);
  font-size: 13px;
  font-weight: 600;
}

.redot-transfer-method-tab.is-active {
  background: var(--k-accent-tint);
  color: var(--k-accent);
}

.redot-transfer-recipient {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 14px;
  background: var(--k-fill-f1);
  border: 1px solid var(--k-hairline);
}

.redot-transfer-recipient__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--k-fill-f2);
}

.redot-transfer-recipient__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--k-ink-strong);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.redot-transfer-recipient__uid {
  font-size: 12px;
  color: var(--k-label-3);
  margin-top: 2px;
}

.redot-transfer-recipient__ok {
  margin-left: auto;
  color: var(--k-success);
  font-size: 18px;
  flex: 0 0 auto;
}

.redot-profile-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 2px 20px;
  text-decoration: none;
  color: inherit;
}

.redot-profile-head .redot-avatar {
  width: 56px;
  height: 56px;
}

.redot-profile-meta {
  flex: 1;
  min-width: 0;
}

.redot-profile-email {
  margin: 0;
  font-weight: 700;
  font-size: 16px;
}

.redot-profile-uid {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--rd-muted);
}

.redot-badge-ok {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--k-success-tint);
  color: var(--k-success);
  font-size: 11px;
  font-weight: 600;
}

.redot-referral {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  background: var(--rd-gray);
  margin-bottom: 18px;
}

.redot-referral-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--rd-red);
  color: var(--k-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.redot-referral-text {
  flex: 1;
  min-width: 0;
}

.redot-referral-text strong {
  display: block;
  font-size: 14px;
}

.redot-referral-text span {
  font-size: 12px;
  color: var(--rd-muted);
}

.redot-referral-cta {
  flex-shrink: 0;
  text-decoration: none;
  background: var(--k-bg);
  color: var(--rd-ink);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
}

body.redot-home .main-container,
body.redot-home .card {
  font-family: var(--rd-font, var(--myhgm-app-font));
}

body.redot-home .footer {
  display: none !important;
}

/* —— Global Bootstrap → Redot overrides (forms / cards / buttons) —— */
body.redot-home h1,
body.redot-home h2,
body.redot-home h3,
body.redot-home h4,
body.redot-home h5,
body.redot-home h6,
body.redot-home .h5,
body.redot-home label,
body.redot-home .form-label,
body.redot-home .form-floating > label {
  font-family: var(--rd-font, var(--myhgm-app-font));
  color: var(--rd-ink);
}

body.redot-home h5,
body.redot-home .h5 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

body.redot-home .text-muted,
body.redot-home .small {
  color: var(--rd-muted) !important;
}

body.redot-home .card,
body.redot-home .card.shadow-sm,
body.redot-home .card.shadow {
  background: var(--rd-bg);
  border: 1px solid var(--rd-gray-border);
  border-radius: var(--rd-radius-lg);
  box-shadow: none !important;
}

body.redot-home .card-body {
  padding: 16px;
}

body.redot-home .form-control,
body.redot-home .form-select,
body.redot-home .form-floating > .form-control,
body.redot-home .form-floating > .form-select {
  background: var(--rd-gray);
  border: 1px solid transparent;
  border-radius: var(--rd-radius);
  font-size: 15px;
  font-family: var(--rd-font, var(--myhgm-app-font));
  color: var(--rd-ink);
  min-height: 52px;
  height: 52px;
  line-height: 1.25;
  box-shadow: none !important;
}

/* Bootstrap floating label：固定高度 + padding，避免标签与输入文案叠在一起 */
body.redot-home .form-floating > .form-control,
body.redot-home .form-floating > .form-select {
  padding: 1.15rem 0.9rem 0.45rem;
}

body.redot-home .form-floating > .form-control:focus,
body.redot-home .form-floating > .form-select:focus {
  background: var(--k-bg);
  border-color: var(--rd-gray-border);
  box-shadow: none !important;
  color: var(--rd-ink);
}

body.redot-home .form-control:focus,
body.redot-home .form-select:focus {
  background: var(--k-bg);
  border-color: var(--rd-gray-border);
  box-shadow: none !important;
  color: var(--rd-ink);
}

body.redot-home .form-floating > label {
  color: var(--rd-muted);
  font-size: 14px;
  padding: 0.9rem;
  transform-origin: 0 0;
}

body.redot-home .form-floating > .form-control:focus ~ label,
body.redot-home .form-floating > .form-control:not(:placeholder-shown) ~ label,
body.redot-home .form-floating > .form-select ~ label {
  color: var(--rd-muted);
  opacity: 0.9;
  transform: scale(0.78) translateY(-0.55rem) translateX(0.1rem);
}

body.redot-home .form-control::placeholder {
  color: var(--rd-muted);
}

/* 浮动标签场景勿再显示可见 placeholder，否则与 label 叠字 */
body.redot-home .form-floating > .form-control::placeholder {
  color: transparent;
}

body.redot-home .btn-dark,
body.redot-home .btn.btn-dark {
  background: var(--k-ink-strong);
  border-color: var(--k-ink-strong);
  color: var(--k-bg);
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  padding: 12px 20px;
  font-family: var(--rd-font, var(--myhgm-app-font));
  box-shadow: none !important;
}

body.redot-home .btn-dark:hover,
body.redot-home .btn-dark:focus,
body.redot-home .btn-dark:active,
body.redot-home .btn-dark:focus-visible {
  background: var(--k-ink-strong);
  border-color: var(--k-ink-strong);
  color: var(--k-bg);
  box-shadow: none !important;
}

body.redot-home .btn-light,
body.redot-home .btn.btn-light {
  background: var(--rd-gray);
  border: 1px solid var(--rd-gray-border);
  color: var(--rd-ink);
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  padding: 11px 18px;
  font-family: var(--rd-font, var(--myhgm-app-font));
  box-shadow: none !important;
}

body.redot-home .btn-outline-secondary,
body.redot-home .btn-outline-dark {
  background: var(--k-bg);
  border: 1px solid var(--rd-gray-border);
  color: var(--rd-ink);
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  box-shadow: none !important;
}

body.redot-home .btn-primary {
  background: var(--rd-red);
  border-color: var(--rd-red);
  border-radius: 999px;
  font-weight: 600;
  box-shadow: none !important;
}

body.redot-home .alert {
  border: none;
  border-radius: var(--rd-radius);
  font-size: 13px;
  padding: 12px 14px;
  font-family: var(--rd-font, var(--myhgm-app-font));
}

body.redot-home .alert-success {
  background: var(--k-success-tint);
  color: var(--k-success);
}

body.redot-home .alert-danger,
body.redot-home .alert-warning {
  background: var(--k-danger-tint);
  color: var(--k-danger);
}

body.redot-home .alert-info {
  background: var(--rd-gray);
  color: var(--rd-ink);
}

body.redot-home .list-group-item {
  border-color: var(--rd-line);
  font-family: var(--rd-font, var(--myhgm-app-font));
  padding: 14px 4px;
}

body.redot-home .list-group-flush .list-group-item {
  background: transparent;
}

body.redot-home .myhgm-bills-filter-card {
  background: var(--rd-gray) !important;
  border: none !important;
  border-radius: var(--rd-radius-lg) !important;
  box-shadow: none !important;
}

body.redot-home .myhgm-bills-filter-card .card-body {
  padding: 14px;
}

body.redot-home .tag.border {
  border-color: var(--rd-gray-border) !important;
  border-radius: 999px;
  background: var(--rd-gray);
}

/* Flat panel helper (replaces heavy cards in markup) */
.redot-panel {
  background: var(--rd-gray);
  border-radius: var(--rd-radius-lg);
  padding: 16px;
  margin-bottom: 16px;
}

.redot-panel--white {
  background: var(--k-bg);
  border: 1px solid var(--rd-gray-border);
}

.redot-submit {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--k-ink-strong);
  color: var(--k-bg) !important;
  border: none;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  padding: 14px 20px;
  text-decoration: none;
  font-family: var(--rd-font, var(--myhgm-app-font));
  cursor: pointer;
}

.redot-submit:hover,
.redot-submit:focus,
.redot-submit:active {
  background: var(--k-ink-strong);
  color: var(--k-bg) !important;
}

.redot-submit--ghost {
  background: var(--rd-gray);
  color: var(--rd-ink) !important;
  border: 1px solid var(--rd-gray-border);
}

.redot-submit--ghost:hover,
.redot-submit--ghost:focus,
.redot-submit--ghost:active {
  background: var(--rd-gray);
  color: var(--rd-ink) !important;
}

.redot-page-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 4px 0 16px;
  color: var(--rd-ink);
}

.redot-section-gap {
  margin-bottom: var(--rd-gap);
}

/* Auth pages (signin/signup) — light token alignment without full redot shell */
body.myhgm-auth-redot {
  --myhgm-app-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", "Inter", "PingFang SC", "Microsoft YaHei", sans-serif;
  /* 颜色/圆角令牌由 design-tokens.css 提供 */
  font-family: var(--myhgm-app-font);
  color: var(--rd-ink);
}

body.myhgm-auth-redot .form-control,
body.myhgm-auth-redot .form-floating > .form-control {
  background: var(--rd-gray);
  border: 1px solid transparent;
  border-radius: var(--rd-radius);
  font-size: 15px;
  font-family: var(--myhgm-app-font);
  min-height: 48px;
  box-shadow: none !important;
}

body.myhgm-auth-redot .form-control:focus,
body.myhgm-auth-redot .form-floating > .form-control:focus {
  background: var(--k-bg);
  border-color: var(--rd-gray-border);
  box-shadow: none !important;
}

/* 只读邀请码：去掉可编辑的悬停/聚焦观感 */
body.myhgm-auth-redot .form-control:read-only,
body.myhgm-auth-redot .form-control.is-readonly,
body.myhgm-auth-redot .form-floating > .form-control:read-only,
body.myhgm-auth-redot .form-floating > .form-control.is-readonly {
  background: var(--k-bg-secondary) !important;
  border-color: transparent !important;
  color: var(--k-label-2);
  cursor: default;
  caret-color: transparent;
  box-shadow: none !important;
  outline: none !important;
}

body.myhgm-auth-redot .form-control:read-only:hover,
body.myhgm-auth-redot .form-control:read-only:focus,
body.myhgm-auth-redot .form-control:read-only:focus-visible,
body.myhgm-auth-redot .form-control.is-readonly:hover,
body.myhgm-auth-redot .form-control.is-readonly:focus,
body.myhgm-auth-redot .form-control.is-readonly:focus-visible,
body.myhgm-auth-redot .form-floating > .form-control:read-only:hover,
body.myhgm-auth-redot .form-floating > .form-control:read-only:focus,
body.myhgm-auth-redot .form-floating > .form-control:read-only:focus-visible,
body.myhgm-auth-redot .form-floating > .form-control.is-readonly:hover,
body.myhgm-auth-redot .form-floating > .form-control.is-readonly:focus,
body.myhgm-auth-redot .form-floating > .form-control.is-readonly:focus-visible {
  background: var(--k-bg-secondary) !important;
  border-color: transparent !important;
  color: var(--k-label-2);
  cursor: default;
  box-shadow: none !important;
  outline: none !important;
}

body.myhgm-auth-redot .btn-dark,
body.myhgm-auth-redot .btn.btn-primary,
body.myhgm-auth-redot button[type="submit"].btn {
  background: var(--k-ink-strong);
  border-color: var(--k-ink-strong);
  color: var(--k-bg);
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  padding: 12px 20px;
  font-family: var(--myhgm-app-font);
  box-shadow: none !important;
}

body.myhgm-auth-redot .btn-dark:hover,
body.myhgm-auth-redot .btn-dark:focus,
body.myhgm-auth-redot .btn-dark:active,
body.myhgm-auth-redot .btn.btn-primary:hover,
body.myhgm-auth-redot .btn.btn-primary:focus,
body.myhgm-auth-redot .btn.btn-primary:active,
body.myhgm-auth-redot button[type="submit"].btn:hover,
body.myhgm-auth-redot button[type="submit"].btn:focus,
body.myhgm-auth-redot button[type="submit"].btn:active {
  background: var(--k-ink-strong);
  border-color: var(--k-ink-strong);
  color: var(--k-bg);
  box-shadow: none !important;
}

/* —— Virtual cards list (plastic card face) —— */
.redot-vcards {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
}

a.redot-vcard {
  display: block;
  text-decoration: none;
  color: var(--k-bg);
  border-radius: 18px;
  padding: 18px 18px 16px;
  min-height: 152px;
  position: relative;
  overflow: hidden;
  /* 对齐 FiMobile .dark-bg（产品卡面色，非 chrome） */
  background-color: #092c9f;
  background-image: url("../img/backgorund-image.svg");
  background-repeat: repeat-x;
  background-position: bottom center;
  background-size: 100%;
  box-shadow:
    var(--k-shadow-card),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

a.redot-vcard:active {
  transform: scale(0.985);
}

.redot-vcard::after {
  content: none;
}

.redot-vcard__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.redot-vcard__brand {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.92;
}

.redot-vcard__status {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: var(--k-bg);
  text-transform: capitalize;
}

.redot-vcard__number {
  position: relative;
  z-index: 1;
  margin: 28px 0 22px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.redot-vcard__foot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.redot-vcard__alias {
  font-size: 13px;
  font-weight: 500;
  opacity: 0.85;
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.redot-vcard__bal {
  text-align: right;
}

.redot-vcard__bal-amt {
  display: block;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.redot-vcard__bal-ccy {
  display: block;
  font-size: 11px;
  font-weight: 600;
  opacity: 0.72;
  margin-top: 2px;
}

.redot-vcard--alt {
  /* 产品卡面色，非 chrome */
  background-color: #092c9f;
  background-image: url("../img/backgorund-image.svg");
  background-repeat: repeat-x;
  background-position: bottom center;
  background-size: 100%;
  box-shadow:
    var(--k-shadow-card),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}