:root {
  font-size: 16px;
  /* Base font size */
  /* 背景层次 (Light Theme) */
  --bg-base: #fdfaf4;
  /* 主页面背景 米白 */
  --bg-surface: #f7f2e8;
  /* 卡片/侧边栏 暖米 */
  --bg-card: #ffffff;
  /* 内容卡片 纯白 */
  --bg-deep: #ede0c8;
  /* 分割线/深色背景块 */
  --bg-hover: rgba(184, 134, 11, 0.06);
  --bg-active: rgba(184, 134, 11, 0.10);

  /* 兼容旧变量（备用 var）*/
  --bg: #fdfaf4;
  --bg2: #f7f2e8;
  --bg3: rgba(255, 255, 255, 0.70);
  --bg-section-even: #f7f2e8;
  --text: #2c1f0e;
  --text-light: #44403C;
  --border2: #e8d8b8;
  --shadow: 0 2px 12px rgba(184, 134, 11, 0.10);
  --shadow-lg: 0 8px 32px rgba(184, 134, 11, 0.15);
  --radius2: 8px;
  --gold-primary: #b8860b;
  --gold2: #d4a830;
  --gold-glow: rgba(184, 134, 11, 0.20);
  --gold-gradient: linear-gradient(135deg, #b8860b, #d4a830);

  /* 品牌金色 */
  --gold: #b8860b;
  /* 主金色 深金 */
  --gold-light: #d4a830;
  /* 浅金 hover用 */
  --gold-pale: #e8c87a;
  /* 极浅金 装饰用 */
  --gold-bg: rgba(184, 134, 11, 0.08);
  /* 金色背景 */

  /* 文字层次 */
  --text-primary: #2c1f0e;
  /* 主文字 深棕 */
  --text-secondary: #7a5a30;
  /* 次要文字 */
  --text-muted: #82622b;
  /* WCAG AA Adjusted */
  /* 辅助文字 */
  --text-hint: #d4b880;
  /* 占位符 */

  /* 边框 */
  --border: #e8d8b8;
  /* 默认边框 */
  --border-gold: rgba(184, 134, 11, 0.35);
  /* 金色边框 */
  --border-focus: rgba(184, 134, 11, 0.6);
  /* 焦点边框 */

  /* 语义色 */
  --green: #2a7a4a;
  /* 成功/收益增长 */
  --red: #a03030;
  /* 危险/退出 */
  --blue: #2a4a8a;
  /* 信息提示 */

  --radius: 12px;
  --vh: 1vh;
  /* Tab Center Btn Variables */
  --tab-btn-bg: url('../img/bubble_amazon_btn.png') no-repeat center center;
  --tab-btn-bg-size: cover;
  --tab-btn-svg-display: none;
  --tab-btn-border: 2px solid rgba(255, 255, 255, 0.4);
  --tab-btn-shadow: 0 4px 20px rgba(255, 153, 0, 0.6), 0 0 15px rgba(212, 175, 55, 0.5);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* 标题字体统一用衬线体 */
h1,
h2,
h3,
.section-title,
.page-title,
.hero-title {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--text-primary);
  font-weight: 700;
}

a {
  color: inherit;
  text-decoration: none;
  transition: 0.2s;
}

/* 旧颜色物理隔离 */
/* #0a0805 -> var(--bg-base) */
/* #c9a050 -> var(--gold) */
html,
body {
  height: 100%;
  overscroll-behavior: none;
}

/* 渐入动效系统 */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate {
  animation: fadeUp 0.6s ease both;
}

.animate-delay-1 {
  animation-delay: 0.1s;
}

.animate-delay-2 {
  animation-delay: 0.2s;
}

.animate-delay-3 {
  animation-delay: 0.3s;
}

.animate-delay-4 {
  animation-delay: 0.4s;
}


/* LAYOUT - 还原备份原始布局 */
#authScreen,
#mainApp {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  height: 100dvh;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}

/* Ensure the scrollbar inside mainApp doesn't look ugly on desktop */
#authScreen::-webkit-scrollbar,
#mainApp::-webkit-scrollbar {
  width: 4px;
}

#authScreen::-webkit-scrollbar-thumb,
#mainApp::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

.page {
  display: none;
  flex-direction: column;
  width: 100%;
  min-height: 100svh;
  padding-bottom: 130px !important;
}

.page.active {
  display: flex;
}

#taskPage.active {
  display: flex;
}

#txnPage, #taskPage, #personalPage {
  background: var(--bg-base);
}

/* BOTTOM NAV - position:fixed，始终display:flex，随 mainApp 显示/隐藏 */
#bottomNav {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  transform: none !important;
  width: 100% !important;
  max-width: none !important;
  height: 60px !important;
  background: var(--bg-card) !important;
  border-top: 1px solid var(--border) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  z-index: 25000 !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

.tab-bar-inner {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  width: 100% !important;
  align-items: flex-end !important;
  justify-items: center !important;
  height: 56px;
  padding: 0 4px 8px;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  flex: 1;
  padding-bottom: 2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: 0.2s;
}

.tab-icon-wrap {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  position: relative;
}

.tab-item.active .tab-icon-wrap { background: var(--bg-active, rgba(184, 134, 11, 0.12)); }

.tab-item svg { stroke: var(--text-muted, #b09060);
  width: 22px;
  height: 22px;
  transition: 0.3s;
}

.tab-item.active svg {
  stroke: #b8860b;
}

.tab-label {
  font-size: 12px;
  color: var(--text-muted, #b09060);
  letter-spacing: 0;
  font-weight: 500;
  text-transform: capitalize;
}

.tab-item.active .tab-label {
  color: #b8860b;
  font-weight: 700;
}

.tab-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #b8860b;
  margin-top: 2px;
  margin-left: auto;
  margin-right: auto;
  display: none;
}

.tab-item.active .tab-dot {
  display: block;
}

.notice-dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c04040;
  border: 1.5px solid #f7f2e8;
}

.tab-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  padding-bottom: 2px;
}

.tab-center-btn {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--tab-btn-bg);
  background-size: var(--tab-btn-bg-size);
  margin-top: -24px;
  border: var(--tab-btn-border);
  box-shadow: var(--tab-btn-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.tab-center-btn svg {
  display: var(--tab-btn-svg-display, none);
}

.tab-center-btn:active {
  transform: scale(0.9);
}

.tab-center-label { font-size: 12px; font-weight: 700; color: var(--gold-primary, #b8860b);
  margin-top: 4px;
}

/* UTILS */
.hidden {
  display: none !important;
}

.sticky-header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  background: rgba(253, 250, 244, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-gold);
  z-index: 100;
}

/* PAGE HEADER */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  background: var(--bg);
  position: fixed;
  top: 56px;
  width: 100%;
  max-width: 480px;
  z-index: 50;
  border-bottom: 1px solid var(--border);
}

.logo-text {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--gold);
}

.back-btn {
  color: var(--gold);
  font-size: 18px;
  font-weight: 600;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
}

/* SECTION HELPERS */
.home-section,
.notice-section,
.promote-section {
  padding: 32px 20px;
}

.section-eyebrow {
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
  font-weight: 600;
}

.section-title {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 16px;
}

/* BUTTONS */
.btn {
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  cursor: pointer;
  border: none;
  font-family: 'Outfit', sans-serif;
  letter-spacing: 0.5px;
}

.btn-gold {
  background: #d4a830 !important;
  /* Brighter gold for clarity */
  color: #000 !important;
  font-weight: 800 !important;
  /* Bold text for readability */
  box-shadow: 0 6px 20px rgba(212, 168, 48, 0.4) !important;
  position: relative;
  overflow: hidden;
}

.btn-gold:active {
  transform: scale(0.97);
  box-shadow: 0 2px 8px var(--gold-glow);
}

.btn-outline {
  background: rgba(255, 255, 255, 0.60);
  border: 1px solid var(--border-gold);
  color: var(--gold);
  backdrop-filter: blur(5px);
}

.btn-outline:active {
  background: rgba(197, 160, 71, 0.1);
  transform: scale(0.97);
}

.btn-full {
  width: 100%;
}

.btn-text {
  color: var(--text-muted);
  font-size: 15px;
  text-align: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  transition: color 0.2s;
}

.btn-text:hover {
  color: var(--gold-primary);
}

/* GLASS CARD UTILITY - 奶昔金毛玻璃 */
.glass-card {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-lg);
}

.glass-card-gold {
  border-color: var(--border-gold);
  background: rgba(255, 255, 255, 0.82);
}


/* FORMS - 奶昔金输入框 */
.form-group {
  margin-bottom: 14px;
}

.form-group label {
  display: block;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
}

.form-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.85);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--text-primary);
  font-size: 16px;
  transition: all 0.2s ease;
  box-shadow: inset 0 1px 2px rgba(184, 134, 11, 0.04);
}

.form-input:focus {
  border-color: var(--border-focus);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.10);
  outline: none;
}

.form-input::placeholder {
  color: var(--text-hint);
}

.form-select {
  -webkit-appearance: none;
  appearance: none;
}

.input-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.btn-otp {
  background: var(--gold-bg);
  color: var(--gold);
  border: 1.5px solid var(--border-gold);
  border-radius: 8px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: 0.2s;
}

.btn-otp:active {
  transform: scale(0.95);
  background: var(--gold);
  color: #fff;
}

.btn-otp:disabled {
  opacity: 0.95;
  filter: none;
  color: var(--gold-light);
  background: var(--gold-bg);
  border-color: var(--border-gold);
  font-family: monospace;
  font-size: 14px;
  cursor: wait;
}

/* MODALS - 奶昔金弹窗 */
.modal-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  background: rgba(44, 31, 14, 0.55);
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 20px;
}

.modal-sheet {
  background: var(--bg-card, #fffdf8);
  border: 1.5px solid var(--border-gold);
  border-radius: 24px;
  width: 100%;
  max-width: 400px;
  max-height: 92vh;
  box-shadow: 0 20px 60px rgba(44, 31, 14, 0.20), 0 0 0 1px rgba(184, 134, 11, 0.08);
  position: relative;
  animation: modalIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-header-premium {
  padding: 32px 24px 16px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg-base-glass, rgba(253, 250, 244, 0.60));
}

.modal-header-premium h3 {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.modal-header-premium p {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.modal-body-premium {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  background: rgba(184, 134, 11, 0.08);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 18px;
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.modal-close:hover {
  background: rgba(184, 134, 11, 0.15);
  color: var(--gold);
}


/* TOAST - 奶昔金 */
.toast-wrap {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 90%;
  max-width: 380px;
  pointer-events: none;
}

.toast {
  background: rgba(253, 250, 244, 0.95);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--text-primary);
  animation: slideDown .3s ease;
  box-shadow: 0 4px 16px rgba(44, 31, 14, 0.12);
  backdrop-filter: blur(12px);
}

.toast.success {
  border-color: #FF9900;
  color: #c05c00;
  background: rgba(245, 224, 179, 0.95);
}

.toast.error {
  border-color: var(--red);
  color: var(--red);
}

.toast.gold {
  border-color: var(--gold);
  color: var(--gold);
}

.auth-error-msg {
  background: rgba(224, 73, 73, 0.1);
  border: 1px solid rgba(224, 73, 73, 0.4);
  color: #ff6b6b;
  padding: 12px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 20px;
  text-align: center;
  font-weight: 500;
}

.auth-error-msg.hidden {
  display: none;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px)
  }

  to {
    opacity: 1;
    transform: none
  }
}


/* LEGACY AUTH STYLES REMOVED TO PREVENT CONFLICTS IN V3.0 (Step 2738) */

/* VIP BADGE */
.vip-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  background: var(--gold);
  color: #0a0a0a;
  letter-spacing: 1px;
}

/* ACCOUNT INFO */
.account-info .info-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.account-info .info-row:last-child {
  border: none;
}

.account-info .info-label {
  color: var(--text-muted);
}

.account-info .info-val {
  color: var(--text);
  font-weight: 500;
}

/* INVITE */
.invite-code-box {
  background: var(--bg3);
  border: 2px dashed var(--gold);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 4px;
  margin-bottom: 16px;
}

/* BONUS PREVIEW */
.bonus-preview {
  background: rgba(200, 169, 110, .1);
  border: 1px solid var(--gold);
  border-radius: var(--radius2);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--gold);
  margin-top: 8px;
}

/* DEPOSIT METHOD */
.deposit-method-info {
  background: var(--bg3);
  border-radius: var(--radius2);
  padding: 14px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.6;
}

.deposit-method-info strong {
  color: var(--gold);
  display: block;
  margin-bottom: 4px;
}

/* TXN */
.txn-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.txn-tab {
  padding: 6px 14px;
  border-radius: 20px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  color: var(--text-muted);
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}

.txn-tab.active {
  background: var(--gold) !important;
  color: #FFFFFF !important;
  border-color: var(--gold) !important;
  font-weight: 700;
}

.txn-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.txn-desc {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 3px;
}

.txn-date {
  font-size: 13px;
  color: var(--text-muted);
}

.txn-amt {
  font-weight: 700;
  font-size: 15px;
}

.txn-amt.pos {
  color: var(--green);
}

.txn-amt.neg {
  color: var(--red);
}

.txn-status {
  font-size: 13px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--bg3);
  color: var(--text-muted);
}

.txn-status.completed {
  color: var(--green);
  background: rgba(76, 175, 80, .1);
}

.txn-status.pending {
  color: var(--gold);
  background: rgba(200, 169, 110, .1);
}

.hidden {
  display: none !important;
}

/* Personal Header / Check-in */
.signin-btn {
  margin-left: auto;
  background: #FFF4D6;
  border: 0.5px solid #C88A00;
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 70px;
}

.signin-btn:hover {
  background: #faedcc;
  transform: translateY(-1px);
}

.signin-btn:active {
  transform: scale(0.95);
}

.signin-icon {
  font-size: 18px;
  margin-bottom: 2px;
}

.signin-btn span {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.signin-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(1);
}

/* Deposit Bonus Table */
.deposit-table {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 15px;
}

.deposit-row {
  background: rgba(255, 255, 255, 0.75);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
}

.deposit-row:hover {
  background: rgba(255, 255, 255, 0.95);
  transform: translateX(4px);
  border-color: var(--border-gold);
}

.deposit-info {
  flex: 1;
}

.d-range {
  font-size: 13px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.d-arrival {
  font-size: 14px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.d-amt {
  color: var(--gold);
  font-weight: 700;
  font-family: 'Playfair Display', serif;
  font-size: 16px;
}

.d-plus {
  background: rgba(42, 122, 74, 0.08);
  color: var(--green);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  margin-left: auto;
}

.d-arrow {
  color: var(--text-muted);
  font-size: 18px;
  margin-left: 10px;
}

/* PERSONAL QUICK ACTIONS */
.personal-quick-actions {
  display: flex;
  gap: 8px;
  margin-left: 12px;
}

/* PAYOUT TABS */
.payout-tabs {
  display: flex;
  margin-bottom: 24px;
  background: var(--bg3);
  padding: 4px;
  border-radius: 14px;
  border: 1px solid var(--border2);
}

.p-tab {
  flex: 1;
  padding: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  border-radius: 10px;
  transition: 0.3s;
}

.p-tab.active {
  background: var(--gold);
  color: #000;
  box-shadow: 0 4px 12px rgba(200, 169, 110, 0.3);
}

.copy-btn {
  background: rgba(200, 169, 110, 0.1);
  color: var(--gold);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  border: 1px solid rgba(200, 169, 110, 0.3);
  margin-left: 10px;
}

.copy-btn:active {
  background: var(--gold);
  color: #000;
}

/* PERSONAL QUICK ACTIONS ROW */
.personal-actions-row {
  display: flex;
  gap: 10px;
  padding: 0 16px;
  margin-bottom: 10px;
  background: transparent;
}

.action-btn {
  flex: 1;
  padding: 13px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.3s;
  border: none;
}

.action-btn.btn-gold {
  background: #C88A00 !important;
  color: #fff !important;
  box-shadow: none !important;
  font-weight: 500 !important;
  border: none !important;
}

.action-btn.btn-outline {
  background: #fff !important;
  color: #E07B00 !important;
  box-shadow: none !important;
  font-weight: 500 !important;
  border: 1.5px solid #E07B00 !important;
}

.action-btn:active {
  transform: scale(0.96);
}

/* Google Login Button */
.google-btn {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: white;
  color: #1f1f1f;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 12px;
  font-size: 14px;
}

.google-btn:hover {
  background: #f1f1f1;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.google-btn img {
  width: 18px;
  height: 18px;
}

.divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 16px 0;
  color: var(--text-muted);
  font-size: 12px;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.divider:not(:empty)::before {
  margin-right: .75em;
}

.divider:not(:empty)::after {
  margin-left: .75em;
}

/* Google Sim Picker */
.google-account-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #f1f1f1;
  cursor: pointer;
  transition: background 0.2s;
}

.google-account-item:hover {
  background: #f8f9fa;
}

.google-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #4285f4;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin-right: 12px;
  font-size: 14px;
}

/* TOASTS */
.toast-wrap {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 400px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
}

.toast {
  background: rgba(20, 20, 20, 0.95);
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 14px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  animation: toastIn 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  pointer-events: auto;
  backdrop-filter: blur(10px);
  text-align: center;
}

.toast.error {
  background: rgba(224, 90, 90, 0.95);
  border-color: var(--red);
  color: white;
}

.toast.success {
  background: rgba(245, 224, 179, 0.95);
  /* Milkshake Gold */
  border-color: #FF9900;
  /* Amazon Orange */
  color: #c05c00;
  /* Darker orange for readable text */
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.9);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* GLOBAL STICKY HEADER & LOGO */
.sticky-header {
  height: 44px;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  background: #0f0f0f;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(255, 184, 0, 0.15);
}

.logo-text {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 900;
  color: #FF5A00;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
}

/* ⚡ HOME LEADERSHIP SECTION FIX ⚡ */
/* ===== 手机浏览器核心修复 ===== */

/* 1. HTML和BODY — 手机浏览器兼容 */
html {
  height: -webkit-fill-available !important;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

body {
  height: 100vh !important;
  height: 100dvh !important;
  overflow: hidden !important;
  /* Move scrollbar to #mainApp to fix fixed-element offset */
  margin: 0 !important;
  padding: 0 !important;
  background: #e5e5e5;
  /* Add a subtle background outside the app container on desktop */
}

/* Force inner pages to NOT trigger extra body scroll */
.page {
  min-height: auto;
  height: max-content;
  min-height: 100%;
}

/* 2. 登录页整体容器 */
.login-page,
.auth-page,
.login-wrapper,
#authScreen {
  position: relative !important;
  min-height: 100dvh !important;
  height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  /* 内容沉底 */
  background: var(--bg-base, #fdfaf4) !important;
  overflow: hidden !important;
}

#authScreen.hidden {
  display: none !important;
}

/* 3. 图片区域 — 固定高度，人脸不裁切 */
.hero-media,
.login-image,
.hero-section,
#authHero {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  z-index: 1 !important;
}

.hero-media img,
.login-image img,
.hero-bg img,
.auth-hero-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  background-position: center top !important;
  background-size: cover !important;
  image-rendering: -webkit-optimize-contrast !important;
  filter: none !important;
  opacity: 1 !important;
}

/* 图片底部渐变过渡 */
.hero-media::after,
.login-image::after,
#authHero::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 65% !important;
  /* 只遮下半部分 */
  background: linear-gradient(to bottom,
      transparent 0%,
      rgba(245, 237, 216, 0.55) 35%,
      rgba(245, 237, 216, 0.82) 60%,
      rgba(245, 237, 216, 0.95) 100%) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* 4. 内容区 — 自动填充剩余空间 */
.login-content,
.auth-content,
.hero-content {
  position: relative !important;
  z-index: 10 !important;
  /* 在遮罩层上面 */
  padding: 12px 20px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  background: transparent !important;
}

/* 5. SINCE 标签 */
.since-tag {
  display: inline-block !important;
  width: fit-content !important;
  max-width: fit-content !important;
  align-self: flex-start !important;
  /* 关键：防止在 flex 容器中拉伸 */
  padding: 5px 16px !important;
  margin-bottom: 8px !important;
  border-radius: 2px !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  background: rgba(0, 0, 0, 0.18) !important;
  color: #FFFFFF !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  backdrop-filter: blur(4px) !important;
  box-shadow: none !important;
  animation: fadeUp 0.6s ease both 0.1s;
}

/* 6. 主标题 — 手机端固定字号 */
.hero-title,
.login-title,
h1 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(1.7rem, 5vw, 1.9rem) !important;
  font-weight: 900 !important;
  line-height: 2.0 !important;
  color: var(--text-primary, #1a1207) !important;
  letter-spacing: 0.03em !important;
  margin: 0 0 8px !important;
  word-break: keep-all !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.08) !important;
  animation: fadeUp 0.6s ease both 0.2s;
}

/* 7. 副标语 */
.hero-sub,
.login-subtitle {
  font-size: clamp(0.82rem, 3.2vw, 0.95rem) !important;
  font-weight: 500 !important;
  color: #5d4324 !important;
  line-height: 1.6 !important;
  margin-bottom: 12px !important;
  letter-spacing: 0.01em !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5) !important;
  animation: fadeUp 0.6s ease both 0.28s;
  white-space: nowrap !important;
}

/* 8. 按钮组 */
.btn-group,
.button-group,
.auth-buttons {
  margin-top: clamp(8px, 2vh, 16px) !important;
  margin-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(8px, 2vh, 16px) !important;
  animation: fadeUp 0.6s ease both 0.36s;
}

/* 9. SIGN IN 主按钮 */
.btn-signin,
#signInBtnMain,
button[type="submit"] {
  width: 100% !important;
  padding: 12px 20px !important;
  font-size: 0.85rem !important;
  margin-bottom: 8px !important;
  background: var(--gold-primary, #b8860b) !important;
  color: var(--text-primary, #ffffff) !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  border: none !important;
  border-radius: 8px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-transform: uppercase !important;
  height: auto !important;
  min-height: unset !important;
}

.btn-signin:active,
#signInBtnMain:active {
  transform: scale(0.98) !important;
}

/* 10. CREATE ACCOUNT 次按钮 */
.btn-create {
  width: 100% !important;
  padding: 12px 20px !important;
  font-size: 0.85rem !important;
  margin-bottom: 8px !important;
  background: transparent !important;
  color: var(--gold-primary, #b8860b) !important;
  border: 1px solid rgba(184, 134, 11, 0.4) !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  height: auto !important;
  min-height: unset !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-transform: uppercase !important;
}

.btn-create:active {
  transform: scale(0.98) !important;
}

/* 11. Forgot password */
.forgot-link,
.footer-links {
  text-align: center !important;
  margin-top: 16px !important;
  margin-bottom: 0 !important;
  animation: fadeUp 0.6s ease both 0.44s;
}

.forgot-link a,
.forgot-pwd,
.footer-links a {
  color: var(--text-muted, #b09060) !important;
  font-size: 12px !important;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* 12. 条款文字 */
.terms-text,
.auth-legal {
  text-align: center !important;
  font-size: 11px !important;
  color: var(--text-muted, #b09060) !important;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
  padding: 0 16px !important;
  white-space: normal !important;
  word-break: break-word !important;
  line-height: 1.6 !important;
}

.terms-text a,
.auth-legal a {
  color: var(--gold-primary, #b8860b) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* 13. LOGO 左上角 */
.hero-logo,
.brand-logo,
#loginBrandMark {
  position: absolute !important;
  top: 16px !important;
  left: 16px !important;
  z-index: 10 !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  animation: fadeUp 0.6s ease both 0s;
}

.logo-diamond,
.brand-dot {
  color: var(--gold-primary, #b8860b) !important;
  font-size: 8px !important;
}

.logo-text,
.brand-name {
  color: var(--text-primary, #2c1f0e) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
}

/* 14. 手机端点击高亮去除 */
* {
  -webkit-tap-highlight-color: transparent;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =================== AUTH MODAL WARM RICE GOLD UPGRADE =================== */
/* 弹窗背景 */
.login-modal,
.auth-modal,
.signin-dialog,
#loginModal .modal-sheet,
#registerModal .modal-sheet,
#forgotModal .modal-sheet {
  background: var(--bg-base, #fdfaf4) !important;
  border: 1px solid var(--border, #e8d8b8) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(184, 134, 11, 0.15) !important;
}

/* 弹窗标题 PREMIUM ACCESS */
.modal-title,
#loginModal .modal-header-premium h3,
#registerModal .modal-header-premium h3,
#forgotModal .modal-header-premium h3 {
  color: var(--text-primary, #2c1f0e) !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
}

/* 副标题 Sign in to your DEPOP-EARN account */
.modal-subtitle,
#loginModal .modal-header-premium p,
#registerModal .modal-header-premium p,
#forgotModal .modal-header-premium p {
  color: var(--text-muted, #7a5a30) !important;
  font-size: 12px !important;
}

/* 分割线 */
.modal-divider,
#loginModal .divider::before,
#loginModal .divider::after,
#registerModal .divider::before,
#registerModal .divider::after {
  border-color: var(--border, #e8d8b8) !important;
}

/* 表单标签 EMAIL ADDRESS / SECURITY PASSWORD */
.form-label,
#loginModal .form-group label,
#registerModal .form-group label,
#forgotModal .form-group label {
  color: var(--text-muted, #7a5a30) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
}

/* 输入框 */
#loginModal .form-input,
#registerModal .form-input,
#forgotModal .form-input {
  background: var(--bg-card, #ffffff) !important;
  border: 1px solid var(--border, #e8d8b8) !important;
  border-radius: 8px !important;
  color: var(--text-primary, #2c1f0e) !important;
  font-size: 14px !important;
  padding: 12px 14px !important;
}

#loginModal .form-input:focus,
#registerModal .form-input:focus,
#forgotModal .form-input:focus {
  border-color: var(--gold-primary, #b8860b) !important;
  box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.1) !important;
  outline: none !important;
}

#loginModal .form-input::placeholder,
#registerModal .form-input::placeholder,
#forgotModal .form-input::placeholder {
  color: var(--text-hint, #d4b880) !important;
}

/* SIGN IN 主按钮 */
.btn-signin,
#loginModal .btn-gold,
#registerModal .btn-gold,
#forgotModal .btn-gold {
  background: var(--gold-primary, #b8860b) !important;
  color: var(--text-primary, #ffffff) !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  min-height: 52px !important;
  width: 100% !important;
}

.btn-signin:active,
#loginModal .btn-gold:active,
#registerModal .btn-gold:active,
#forgotModal .btn-gold:active {
  transform: scale(0.98) !important;
}

/* or 分隔文字 */
.or-divider,
#loginModal .divider,
#registerModal .divider {
  color: var(--text-muted, #b09060) !important;
  font-size: 12px !important;
}

/* Google 登录按钮 */
.btn-google,
#loginModal .google-btn,
#registerModal .google-btn {
  background: var(--bg-card, #ffffff) !important;
  border: 1px solid var(--border, #e8d8b8) !important;
  border-radius: 8px !important;
  color: var(--text-primary, #2c1f0e) !important;
  font-size: 13px !important;
  min-height: 48px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

/* 底部链接 Create Account / Forgot Password */
.modal-links a,
.auth-links a,
#loginModal .btn-text,
#registerModal .btn-text,
#forgotModal .btn-text {
  color: var(--gold-primary, #b8860b) !important;
  font-size: 12px !important;
  text-decoration: none !important;
  background: none !important;
  border: none !important;
  padding: 10px !important;
  cursor: pointer !important;
}

/* 关闭按钮 X */
.modal-close,
#loginModal .modal-close,
#registerModal .modal-close,
#forgotModal .modal-close {
  background: #f7f2e8 !important;
  border: 1px solid var(--border, #e8d8b8) !important;
  color: var(--text-muted, #7a5a30) !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 11. 手机端法律文本优化 */
.auth-legal {
  font-size: 11px !important;
  text-align: center !important;
  white-space: nowrap !important;
  margin-top: 8px !important;
  color: var(--text-muted, #7a5a30) !important;
}

/* 12. LOGO 区域固定在顶部 */
.hero-logo,
.brand-mark {
  position: absolute !important;
  top: 16px !important;
  left: 16px !important;
  z-index: 50 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.brand-dot {
  width: 10px !important;
  height: 10px !important;
  background: var(--gold-primary, #b8860b) !important;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) !important;
}

.brand-name {
  color: var(--text-primary, #2c1f0e) !important;
  font-family: 'Playfair Display', serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
}

/* 15. LEGAL MODAL 重构 - 极简奢华风格 */
#legalModal .modal-sheet {
  background: #1a1408 !important;
  /* 深金棕色背景 */
  border: 1px solid rgba(184, 134, 11, 0.4) !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
  padding: 0 !important;
  overflow: hidden !important;
  max-width: 420px !important;
  width: 90% !important;
  margin: 0 auto !important;
}

#legalTitle {
  font-family: 'Playfair Display', serif !important;
  color: #C9A227 !important;
  letter-spacing: 0.2em !important;
  font-size: 1.1rem !important;
  text-transform: uppercase !important;
  text-align: center !important;
  padding: 24px 0 4px !important;
  margin: 0 !important;
}

#legalModal .modal-header-premium p {
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-align: center !important;
  margin-bottom: 16px !important;
  border-bottom: 1px solid rgba(184, 134, 11, 0.2) !important;
  padding-bottom: 12px !important;
}

#legalBody {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(184, 134, 11, 0.15) !important;
  border-radius: 6px !important;
  padding: 20px !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 13px !important;
  line-height: 1.8 !important;
  margin: 0 20px !important;
  max-height: 50vh !important;
  overflow-y: auto !important;
}

/* 滚动条美化 */
#legalBody::-webkit-scrollbar {
  width: 3px !important;
}

#legalBody::-webkit-scrollbar-track {
  background: transparent !important;
}

#legalBody::-webkit-scrollbar-thumb {
  background: rgba(184, 134, 11, 0.5) !important;
  border-radius: 2px !important;
}

#legalBody p {
  margin-bottom: 14px !important;
}

#legalBody h3,
#legalBody strong {
  color: #C9A227 !important;
  font-size: 12px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  display: block !important;
  margin: 16px 0 6px !important;
}

#legalModal .btn-gold {
  background: linear-gradient(135deg, #B8860B, #C9A227) !important;
  color: #fff !important;
  font-size: 12px !important;
  letter-spacing: 0.2em !important;
  padding: 14px !important;
  border: none !important;
  border-radius: 6px !important;
  width: calc(100% - 40px) !important;
  margin: 16px 20px 24px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

#legalModal .modal-close {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(184, 134, 11, 0.3) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  top: 12px !important;
  right: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}


.tab-3d-bell {
  filter: grayscale(100%) opacity(0.5);
  transition: all 0.3s;
}

.tab-item.active .tab-3d-bell {
  filter: drop-shadow(0 4px 6px rgba(255, 165, 0, 0.5));
}



/* =========================================
   THEME CONFIGURATIONS (Multi-Theme System)
   ========================================= */

/* Theme A: Premium Dark Sapphire (尊贵黑金) */
[data-theme="premium-dark"] {
  /* Backgrounds */
  --bg-base: #0f172a ;       
  --bg-surface: #1e293b ;    
  --bg-card: #0b0f19 ;       
  --bg-deep: #020617 ;       
  --bg-card-glass: rgba(11, 15, 25, 0.85) ;
  --bg-base-glass: rgba(15, 23, 42, 0.85) ;
  
  --bg: #0f172a ;
  --bg2: #1e293b ;
  --bg3: rgba(0, 0, 0, 0.70) ;
  --bg-section-even: #1e293b ;
  
  /* Texts */
  --text-primary: #f8fafc ;
  --text-white: #ffffff ;  
  --text-secondary: #cbd5e1 ;
  --text-muted: #94a3b8 ;    
  --text-hint: #64748b ;     
  --text: #f8fafc ;          
  --text-light: #94a3b8 ;    
  
  /* Borders */
  --border: #334155 ;        
  --border-light: #1e293b ;
  --border2: #334155 ;       
  
  /* Golds */
  --gold-primary: #facc15 ;  
  --gold2: #eab308 ;
  --gold-dark: #ca8a04 ;
  --gold-muted: #a16207 ;
  --gold-light: #fef08a ;
  --gold-glow: rgba(250, 204, 21, 0.25) ;
  --gold-gradient: linear-gradient(135deg, #facc15, #eab308) ;
  --gold: #facc15 ;
  
  /* Shadows */
  --shadow: 0 4px 12px rgba(0,0,0, 0.5) ;
  --shadow-lg: 0 8px 32px rgba(0,0,0, 0.6) ;
  --tab-btn-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23D4AF37' d='M257.2 162.7c-48.7 1.8-169.5 15.5-169.5 117.5 0 109.5 138.3 114 183.5 43.2 6.5 10.2 35.4 37.5 45.3 46.8l22.7-17.1c-2.8-51-2.5-109.5-2.5-190.5-2.4-76.3-43.2-116.6-117.5-116.6-92 0-148 40.3-148 40.3l16 22.8s49.2-31.7 105.7-31.7c42.4 0 62 17.8 62 62v26.4c-47.5-5.3-95-5.3-97.7-5.1zM261 240.4c0 31.2-11.8 64.6-54.8 64.6-28.5 0-46.8-14.8-46.8-43.2 0-38.3 49-43.2 97.7-43.2 3.9 0 3.9 21.8 3.9 21.8zm118.8 141.2c-41.2 38.3-94 58.5-151 58.5-57 0-109.8-20.2-151-58.5-4.2-3.9-10.8-4.2-14.8 0l-16 16c-3.9 3.9-3.9 10.2 0 14.2 46.5 43.5 108 67 172.5 67 64.5 0 126-23.5 172.5-67 3.9-3.9 3.9-10.2 0-14.2l-16-16c-4-4.3-10.6-4.1-14.8.2zM216 414.2c27.5 0 54.2-5.7 79-16.6 4.8-2.1 10.2-1 13.8 2.8l13.2 14c3.9 4.2 3.5 10.8-.8 14.5-27.5 24-62.8 37.2-99.5 37.2-12.8 0-25.5-1.5-38-4.5-4.5-1.1-7.5-5.2-7.5-10v-20.2c0-4.5 3-8.5 7.5-9.6 10.5-2.6 21.2-4 32.3-4z'/%3E%3C/svg%3E") no-repeat center center, radial-gradient(circle at 50% 10%, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 40%), linear-gradient(135deg, #1f1f1f 0%, #000000 100%);
  --tab-btn-bg-size: 50%, 100% 100%, 100% 100%;
  --tab-btn-svg-display: none;
  --tab-btn-border: none;
  --tab-btn-shadow: inset 0 0 15px rgba(0,0,0,0.8), 0 0 0 2px #111, 0 0 0 5px #D4AF37, 0 0 0 7px #000, 0 10px 20px rgba(212,175,55,0.4);
}

/* Theme B: Amazon Prime Classic (亚马逊经典) */
[data-theme="amazon-classic"] {
  /* Backgrounds */
  --bg-base: #232F3E ;       
  --bg-surface: #131A22 ;    
  --bg-card: #37475A ;       
  --bg-deep: #0f141a ;       
  --bg-card-glass: rgba(55, 71, 90, 0.85) ;
  --bg-base-glass: rgba(35, 47, 62, 0.85) ;
  
  --bg: #232F3E ;
  --bg2: #131A22 ;
  --bg3: rgba(0, 0, 0, 0.70) ;
  --bg-section-even: #131A22 ;
  
  /* Texts */
  --text-primary: #ffffff ;
  --text-white: #ffffff ;  
  --text-secondary: #e2e8f0 ;
  --text-muted: #94a3b8 ;    
  --text-hint: #64748b ;
  --text: #ffffff ;          
  --text-light: #cccccc ;    
  
  /* Borders */
  --border: #4f5a65 ;        
  --border-light: #37475a ;
  --border2: #4f5a65 ;       
  
  /* Golds */
  --gold-primary: #FF9900 ;  
  --gold2: #e47911 ;
  --gold-dark: #c66000 ;
  --gold-muted: #995500 ;
  --gold-light: #ffb84d ;
  --gold-glow: rgba(255, 153, 0, 0.25) ;
  --gold-gradient: linear-gradient(135deg, #FF9900, #e47911) ;
  --gold: #FF9900 ;
  
  /* Shadows */
  --shadow: 0 4px 12px rgba(0,0,0, 0.5) ;
  --shadow-lg: 0 8px 32px rgba(0,0,0, 0.6) ;
  --tab-btn-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23FF9900' d='M257.2 162.7c-48.7 1.8-169.5 15.5-169.5 117.5 0 109.5 138.3 114 183.5 43.2 6.5 10.2 35.4 37.5 45.3 46.8l22.7-17.1c-2.8-51-2.5-109.5-2.5-190.5-2.4-76.3-43.2-116.6-117.5-116.6-92 0-148 40.3-148 40.3l16 22.8s49.2-31.7 105.7-31.7c42.4 0 62 17.8 62 62v26.4c-47.5-5.3-95-5.3-97.7-5.1zM261 240.4c0 31.2-11.8 64.6-54.8 64.6-28.5 0-46.8-14.8-46.8-43.2 0-38.3 49-43.2 97.7-43.2 3.9 0 3.9 21.8 3.9 21.8zm118.8 141.2c-41.2 38.3-94 58.5-151 58.5-57 0-109.8-20.2-151-58.5-4.2-3.9-10.8-4.2-14.8 0l-16 16c-3.9 3.9-3.9 10.2 0 14.2 46.5 43.5 108 67 172.5 67 64.5 0 126-23.5 172.5-67 3.9-3.9 3.9-10.2 0-14.2l-16-16c-4-4.3-10.6-4.1-14.8.2zM216 414.2c27.5 0 54.2-5.7 79-16.6 4.8-2.1 10.2-1 13.8 2.8l13.2 14c3.9 4.2 3.5 10.8-.8 14.5-27.5 24-62.8 37.2-99.5 37.2-12.8 0-25.5-1.5-38-4.5-4.5-1.1-7.5-5.2-7.5-10v-20.2c0-4.5 3-8.5 7.5-9.6 10.5-2.6 21.2-4 32.3-4z'/%3E%3C/svg%3E") no-repeat center center, radial-gradient(circle at 50% 10%, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 40%), linear-gradient(135deg, #232f3e 0%, #131921 100%);
  --tab-btn-bg-size: 50%, 100% 100%, 100% 100%;
  --tab-btn-svg-display: none;
  --tab-btn-border: none;
  --tab-btn-shadow: inset 0 0 15px rgba(0,0,0,0.6), 0 0 0 2px #131921, 0 0 0 5px #FF9900, 0 0 0 7px #000, 0 10px 20px rgba(255,153,0,0.4);
}