/* ===== 基础重置 ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  background-color: #0a1a0f;
  font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: #fff;
  overflow-x: hidden;
  min-height: 100vh;
}
a { text-decoration: none; color: inherit; }
button { border: none; background: none; font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }

/* ===== CSS 变量 ===== */
:root {
  --gold: #ffd700;
  --gold2: #ffb300;
  --green-dark: #0a1a0f;
  --green-mid: #0d2010;
  --green-panel: rgba(6,30,15,0.7);
}

/* ===== 工具类 ===== */
.gold-text {
  background: linear-gradient(135deg, #ffd700, #ffb300, #ffd700);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.glass-panel {
  background: rgba(6,30,15,0.7);
  border: 1px solid rgba(255,215,0,0.15);
  backdrop-filter: blur(8px);
}
.whitespace-nowrap { white-space: nowrap; }

/* ===== 动画 ===== */
@keyframes float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes pulse {
  0%,100% { opacity: 1; }
  50% { opacity: 0.5; }
}
@keyframes ping {
  75%,100% { transform: scale(2); opacity: 0; }
}
@keyframes pulse-glow {
  0%,100% { box-shadow: 0 0 20px rgba(255,157,0,0.45); }
  50% { box-shadow: 0 0 35px rgba(255,157,0,0.75); }
}
@keyframes claim-scroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
@keyframes slide-in-top {
  from { opacity:0; transform: translateY(-16px) scaleY(0.92); }
  to { opacity:1; transform: translateY(0) scaleY(1); }
}
@keyframes toast-in {
  0% { opacity:0; transform: translateY(-16px) scale(0.95); }
  60% { opacity:1; transform: translateY(3px) scale(1.02); }
  100% { opacity:1; transform: translateY(0) scale(1); }
}
@keyframes flipCharIn {
  0% { transform: translateY(110%); opacity:0; }
  60% { transform: translateY(-6%); opacity:1; }
  100% { transform: translateY(0); opacity:1; }
}
@keyframes flipCharOut {
  0% { transform: translateY(0); opacity:1; }
  100% { transform: translateY(-110%); opacity:0; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.animate-float { animation: float 3s ease-in-out infinite; }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }
.animate-ping { animation: ping 1s cubic-bezier(0,0,0.2,1) infinite; }
.animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }
.animate-claim-scroll { animation: claim-scroll 30s linear infinite; }
.animate-slide-in-top { animation: slide-in-top 0.4s cubic-bezier(0.22,1,0.36,1) both; }
.animate-toast-in { animation: toast-in 0.35s cubic-bezier(0.34,1.56,0.64,1) forwards; }

/* ===== 布局 ===== */
.page-wrapper {
  min-height: 100vh;
  width: 100%;
  background: #0a1a0f;
  overflow-x: hidden;
  padding-bottom: 112px;
  position: relative;
}
.orbs-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.orb {
  position: absolute;
  border-radius: 50%;
  background: rgba(234,179,8,0.1);
}
.main-content {
  max-width: 448px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
  padding: 24px 16px 0;
}

/* ===== Banner Strip ===== */
.banner-strip {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  background: linear-gradient(to right, rgba(249,115,22,0.2), rgba(250,204,21,0.15), rgba(249,115,22,0.2));
  border: 1px solid rgba(251,191,36,0.3);
  padding: 8px 12px;
}
.banner-strip p {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  line-height: 1.4;
}
.banner-strip .highlight { color: #fdba74; }

/* ===== Hero Section ===== */
.hero { text-align: center; margin-bottom: 12px; display: flex; flex-direction: column; align-items: center; }
.hero-badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 16px;
  background: rgba(0,0,0,0.4);
  border-radius: 9999px;
  border: 1px solid rgba(234,179,8,0.3);
  margin-bottom: 12px;
  backdrop-filter: blur(4px);
  font-size: 14px; font-weight: 500; color: #facc15;
}
.hero-gift { width: 96px; height: 96px; object-fit: contain; margin-bottom: 12px; }
.hero-title { font-size: 36px; font-weight: 900; margin-bottom: 4px; line-height: 1.2; }
.hero-title span { font-size: 48px; display: block; }
.hero-sub { color: rgba(255,255,255,0.6); font-size: 14px; margin-bottom: 8px; }
.live-badge {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: #fff;
  background: rgba(249,115,22,0.25);
  padding: 6px 16px; border-radius: 9999px;
  border: 1px solid rgba(253,186,116,0.4);
  margin-bottom: 12px;
}
.live-dot-wrap { position: relative; display: flex; width: 10px; height: 10px; }
.live-dot-ping {
  position: absolute; inset: 0; border-radius: 50%;
  background: rgba(253,186,116,0.75);
  animation: ping 1s cubic-bezier(0,0,0.2,1) infinite;
}
.live-dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: #fb923c; }
.hero-desc { color: rgba(255,255,255,0.7); font-size: 14px; line-height: 1.6; max-width: 320px; text-align: center; margin-bottom: 16px; }

/* CTA Buttons */
.btn-register {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 52px;
  font-size: 18px; font-weight: 900; color: #fff;
  border-radius: 9999px;
  border: 1px solid rgba(74,222,128,0.6);
  background: rgba(22,163,74,0.3);
  box-shadow: 0 8px 25px rgba(34,197,94,0.5);
  transition: all 0.2s;
  margin-bottom: 8px;
  white-space: nowrap;
}
.btn-register:hover { background: rgba(22,163,74,0.5); }
.btn-register:active { transform: scale(0.95); }
.register-hint { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #facc15; font-weight: 700; margin-bottom: 8px; }
.btn-safex {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 40px;
  font-size: 14px; font-weight: 700; color: #fff;
  border-radius: 9999px;
  background: linear-gradient(to bottom, #f87171, #ef4444, #b91c1c);
  box-shadow: 0 6px 20px rgba(220,38,38,0.5);
  border: 1px solid rgba(252,165,165,0.6);
  transition: all 0.2s;
  margin-bottom: 6px;
  white-space: nowrap;
}
.btn-safex:hover { opacity: 0.9; }
.btn-safex:active { transform: scale(0.95); }
.safex-hint { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255,255,255,0.4); margin-bottom: 16px; }

/* Steps */
.steps-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 8px; margin-bottom: 16px; }
.step-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.step-circle {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid;
}
.step-circle.active { background: rgba(234,179,8,0.25); border-color: #facc15; }
.step-circle.inactive { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.25); }
.step-num { font-weight: 900; font-size: 16px; }
.step-num.active { color: #facc15; }
.step-num.inactive { color: rgba(255,255,255,0.7); }
.step-label { font-size: 11px; font-weight: 700; line-height: 1.3; text-align: center; white-space: pre-line; }
.step-label.active { color: #fff; }
.step-label.inactive { color: rgba(255,255,255,0.7); }

/* Quota Panel */
.quota-panel { width: 100%; border-radius: 16px; padding: 16px; }
.quota-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.quota-live { display: flex; align-items: center; gap: 8px; }
.quota-live-dot-wrap { position: relative; display: flex; width: 10px; height: 10px; }
.quota-live-dot-ping { position: absolute; inset: 0; border-radius: 50%; background: rgba(163,230,53,0.75); animation: ping 1s cubic-bezier(0,0,0.2,1) infinite; }
.quota-live-dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: #a3e635; }
.quota-label { font-weight: 700; color: #fff; font-size: 14px; }
.quota-rush { color: #fdba74; font-size: 12px; font-weight: 700; }
.quota-num { color: #facc15; font-weight: 900; font-size: 30px; }
.quota-total { color: rgba(255,255,255,0.5); font-size: 14px; margin-bottom: 2px; }
.quota-bar-bg { width: 100%; background: rgba(0,0,0,0.5); border-radius: 9999px; height: 8px; margin-bottom: 6px; border: 1px solid rgba(234,179,8,0.2); }
.quota-bar-fill {
  background: linear-gradient(to right, #a3e635, #fde047, #fb923c);
  height: 8px; border-radius: 9999px;
  transition: width 1s;
  position: relative;
}
.quota-bar-shine { position: absolute; top: 0; right: 0; bottom: 0; width: 12px; background: rgba(255,255,255,0.3); border-radius: 9999px; animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }
.quota-meta { display: flex; align-items: center; justify-content: space-between; font-size: 12px; margin-bottom: 12px; }
.quota-pct { color: rgba(255,255,255,0.5); }
.quota-pct span { color: #facc15; font-weight: 700; }
.quota-midnight { color: rgba(255,255,255,0.5); }
.quota-midnight span { color: #fdba74; font-weight: 700; font-family: monospace; }
.countdown-box { display: flex; align-items: center; justify-content: space-between; background: rgba(0,0,0,0.3); padding: 12px; border-radius: 12px; border: 1px solid rgba(234,179,8,0.1); }
.countdown-label { font-size: 14px; color: rgba(255,255,255,0.7); }
.countdown-digits { display: flex; align-items: center; gap: 6px; font-family: monospace; font-weight: 700; font-size: 18px; }
.cd-digit { background: #facc15; color: #000; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 14px; font-weight: 900; box-shadow: 0 0 10px rgba(255,215,0,0.5); }
.cd-sep { color: #facc15; animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }

/* ===== Claim Flow ===== */
.claim-section { border-radius: 12px; padding: 16px; margin-bottom: 8px; }
.claim-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.claim-icon-wrap { width: 24px; height: 24px; border-radius: 50%; background: rgba(234,179,8,0.2); border: 1px solid rgba(234,179,8,0.4); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.claim-title { color: #fff; font-weight: 900; font-size: 14px; }
.claim-badge { margin-left: auto; font-size: 9px; font-weight: 700; color: #6ee7b7; background: rgba(16,185,129,0.2); border: 1px solid rgba(52,211,153,0.3); border-radius: 9999px; padding: 2px 8px; }
.claim-steps { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.claim-step { display: flex; align-items: flex-start; gap: 10px; }
.claim-step-num { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; font-size: 10px; font-weight: 900; color: #fff; }
.claim-step-num.green { background: linear-gradient(135deg, #4ade80, #16a34a); }
.claim-step-num.yellow { background: linear-gradient(135deg, #fde047, #f97316); }
.claim-step-title { color: #fff; font-weight: 700; font-size: 12px; }
.claim-step-desc { color: rgba(255,255,255,0.55); font-size: 10px; margin-top: 2px; }
.agent-card { border-radius: 8px; background: rgba(0,0,0,0.4); border: 1px solid rgba(234,179,8,0.2); padding: 10px; margin-top: 4px; }
.agent-card-label { color: rgba(255,255,255,0.6); font-size: 10px; margin-bottom: 6px; }
.agent-card-row { display: flex; align-items: center; justify-content: space-between; }
.agent-id { color: #facc15; font-weight: 900; font-size: 24px; }
.btn-copy { font-size: 10px; background: rgba(234,179,8,0.2); border: 1px solid rgba(234,179,8,0.3); color: #fde047; padding: 4px 10px; border-radius: 9999px; transition: background 0.2s; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.btn-copy:hover { background: rgba(234,179,8,0.3); }
.agent-card-hint { color: rgba(255,255,255,0.4); font-size: 10px; margin-top: 2px; }
.claim-tip { border-radius: 8px; background: rgba(234,179,8,0.1); border: 1px solid rgba(234,179,8,0.25); padding: 8px 12px; display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.claim-tip-text { font-size: 10px; color: rgba(250,204,21,0.9); font-weight: 500; }
.btn-red {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 48px;
  font-size: 16px; font-weight: 900; color: #fff;
  border-radius: 9999px;
  background: linear-gradient(to bottom, #f87171, #ef4444, #b91c1c);
  box-shadow: 0 6px 20px rgba(220,38,38,0.5);
  border: 1px solid rgba(252,165,165,0.6);
  transition: all 0.2s;
  white-space: nowrap;
}
.btn-red:hover { opacity: 0.9; }
.btn-red:active { transform: scale(0.95); }

/* ===== Welfare Section ===== */
.welfare-section { border-radius: 12px; padding: 16px; margin-bottom: 8px; }
.welfare-header { text-align: center; margin-bottom: 12px; }
.welfare-tag { display: inline-flex; align-items: center; justify-content: center; gap: 4px; border-radius: 9999px; background: #facc15; color: #000; padding: 2px 12px; font-size: 10px; font-weight: 900; margin-bottom: 8px; }
.welfare-title { font-size: 20px; font-weight: 900; color: #fff; line-height: 1.3; }
.welfare-items { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.welfare-item { display: flex; align-items: flex-start; gap: 12px; border-radius: 12px; background: rgba(6,30,15,0.6); border: 1px solid rgba(234,179,8,0.2); padding: 12px; }
.welfare-icon { width: 36px; height: 36px; border-radius: 8px; background: linear-gradient(135deg, #fde047, #f97316); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; }
.welfare-item-title { color: #fff; font-weight: 900; font-size: 14px; }
.welfare-item-desc { color: rgba(255,255,255,0.65); font-size: 12px; margin-top: 2px; line-height: 1.5; }
.welfare-note { text-align: center; color: rgba(255,255,255,0.45); font-size: 10px; margin-bottom: 12px; }
.btn-yellow {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 48px;
  font-size: 16px; font-weight: 900; color: #fff;
  border-radius: 9999px;
  background: linear-gradient(to bottom, #fde047, #fb923c, #f97316);
  box-shadow: 0 6px 20px rgba(255,157,0,0.5);
  border: 1px solid #fef08a;
  transition: all 0.2s;
  white-space: nowrap;
}
.btn-yellow:hover { opacity: 0.9; }
.btn-yellow:active { transform: scale(0.95); }

/* ===== Activity Section ===== */
.activity-section { border-radius: 12px; padding: 16px; margin-bottom: 8px; }
.activity-title { font-size: 16px; font-weight: 900; text-align: center; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; }
.activity-title-line { width: 32px; height: 1px; background: linear-gradient(to right, transparent, #facc15); }
.activity-title-line.right { background: linear-gradient(to left, transparent, #facc15); }
.activity-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; text-align: center; }
.stat-card { border-radius: 8px; background: rgba(0,0,0,0.3); border: 1px solid rgba(234,179,8,0.15); padding: 6px; position: relative; overflow: hidden; }
.stat-card-glow { position: absolute; inset: 0; background: rgba(74,222,128,0.05); border-radius: 8px; animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }
.stat-val { color: #facc15; font-weight: 900; font-size: 14px; }
.stat-label { color: rgba(255,255,255,0.45); font-size: 9px; display: flex; align-items: center; justify-content: center; gap: 2px; }
.stat-dot { width: 4px; height: 4px; border-radius: 50%; background: #a3e635; animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; display: inline-block; }
.scroll-table { background: rgba(6,30,15,0.85); border-radius: 12px; overflow: hidden; border: 1px solid rgba(234,179,8,0.2); }
.scroll-table-head { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 6px 12px; background: rgba(6,30,15,0.7); border-bottom: 1px solid rgba(234,179,8,0.15); font-size: 10px; color: rgba(250,204,21,0.85); font-weight: 700; }
.scroll-table-body { height: 224px; overflow: hidden; position: relative; }
.scroll-fade-top { position: absolute; inset-x: 0; top: 0; height: 12px; background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent); z-index: 10; }
.scroll-fade-bottom { position: absolute; inset-x: 0; bottom: 0; height: 12px; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); z-index: 10; }
.scroll-inner { display: flex; flex-direction: column; }
.scroll-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; min-height: 36px; padding: 0 12px; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 12px; }
.scroll-phone { color: rgba(255,255,255,0.85); letter-spacing: 0.05em; }
.scroll-amount { color: #facc15; font-weight: 900; white-space: nowrap; }
.scroll-time { color: rgba(255,255,255,0.45); font-size: 10px; white-space: nowrap; }

/* ===== User Feedback ===== */
.feedback-section { margin-bottom: 8px; }
.feedback-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.feedback-title { font-size: 16px; font-weight: 900; color: #fff; display: flex; align-items: center; gap: 6px; }
.feedback-count { display: flex; align-items: center; gap: 4px; border-radius: 9999px; background: rgba(22,163,74,0.25); border: 1px solid rgba(34,197,94,0.3); padding: 2px 10px; }
.feedback-count-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; flex-shrink: 0; }
.feedback-count-text { color: #86efac; font-size: 10px; font-weight: 700; }
.feedback-list-wrap { position: relative; height: 256px; overflow: hidden; border-radius: 12px; }
.feedback-fade-top { position: absolute; inset-x: 0; top: 0; height: 24px; background: linear-gradient(to bottom, #0a1a0f, transparent); z-index: 10; pointer-events: none; }
.feedback-fade-bottom { position: absolute; inset-x: 0; bottom: 0; height: 24px; background: linear-gradient(to top, #0a1a0f, transparent); z-index: 10; pointer-events: none; }
.feedback-list { display: flex; flex-direction: column; gap: 8px; overflow: hidden; height: 100%; }
.feedback-card { display: flex; align-items: flex-start; gap: 10px; border-radius: 12px; border: 1px solid; padding: 10px 12px; flex-shrink: 0; transition: all 0.5s; }
.feedback-card.normal { background: rgba(6,30,15,0.6); border-color: rgba(255,255,255,0.08); }
.feedback-card.new { background: rgba(6,78,59,0.7); border-color: rgba(52,211,153,0.4); transform: scale(1.01); animation: slide-in-top 0.4s cubic-bezier(0.22,1,0.36,1) both; }
.feedback-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 900; font-size: 14px; flex-shrink: 0; ring: 2px solid rgba(255,255,255,0.2); }
.feedback-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.feedback-name { color: #fff; font-weight: 900; font-size: 12px; display: flex; align-items: center; gap: 6px; }
.feedback-new-badge { font-size: 8px; font-weight: 900; background: #10b981; color: #fff; padding: 1px 4px; border-radius: 9999px; line-height: 1; }
.feedback-time { color: rgba(255,255,255,0.35); font-size: 9px; flex-shrink: 0; }
.feedback-stars { display: flex; gap: 2px; margin-bottom: 4px; }
.star { font-size: 10px; }
.star.on { color: #facc15; }
.star.off { color: rgba(255,255,255,0.2); }
.feedback-comment { color: rgba(255,255,255,0.8); font-size: 12px; line-height: 1.5; }

/* ===== Why Play ===== */
.why-section { border-radius: 12px; padding: 16px; margin-bottom: 8px; overflow: hidden; position: relative; }
.why-orb { position: absolute; top: -32px; right: -32px; width: 128px; height: 128px; border-radius: 50%; background: rgba(163,230,53,0.1); filter: blur(48px); }
.why-title { font-size: 18px; font-weight: 900; color: #fff; line-height: 1.3; text-align: center; }
.why-sub { margin-top: 4px; color: #facc15; font-weight: 700; font-size: 12px; text-align: center; }
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; margin-top: 12px; }
.why-card { border-radius: 12px; background: rgba(6,30,15,0.7); border: 1px solid rgba(234,179,8,0.25); padding: 12px; }
.why-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.why-card-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.why-card-icon.green { background: rgba(163,230,53,0.2); }
.why-card-icon.orange { background: rgba(253,186,116,0.2); }
.why-card-tag { font-size: 9px; color: #d9f99d; font-weight: 700; }
.why-card-title { color: #fff; font-weight: 900; font-size: 12px; margin-bottom: 8px; }
.why-bars { display: flex; flex-direction: column; gap: 6px; }
.why-bar-bg { height: 6px; border-radius: 9999px; background: rgba(255,255,255,0.1); overflow: hidden; }
.why-bar-fill { height: 100%; border-radius: 9999px; }
.why-bar-fill.g1 { background: linear-gradient(to right, #a3e635, #fde047); }
.why-bar-fill.g2 { background: linear-gradient(to right, #67e8f9, #a3e635); }
.why-bar-fill.g3 { background: linear-gradient(to right, #fde047, #fb923c); }
.why-chart { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; align-items: flex-end; height: 40px; }
.why-bar-col { border-radius: 2px 2px 0 0; }
.why-bar-col.c1 { background: rgba(163,230,53,0.55); height: 50%; }
.why-bar-col.c2 { background: rgba(253,224,71,0.8); height: 80%; }
.why-bar-col.c3 { background: #fb923c; height: 100%; }
.why-badge { border-radius: 12px; background: linear-gradient(to right, #fde047, #fb923c, #f97316); padding: 1px; }
.why-badge-inner { border-radius: 11px; background: rgba(6,30,15,0.8); padding: 8px; text-align: center; }
.why-badge-text { color: #fff; font-weight: 900; font-size: 12px; }

/* ===== VIP Groups ===== */
.vip-section { border-radius: 12px; padding: 16px; margin-bottom: 8px; }
.vip-header { text-align: center; margin-bottom: 12px; }
.vip-tag { font-size: 10px; color: rgba(250,204,21,0.7); font-weight: 700; margin-bottom: 2px; }
.vip-title { font-size: 16px; font-weight: 900; color: #fff; }
.vip-sub { color: rgba(255,255,255,0.6); font-size: 12px; margin-top: 2px; }
.vip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vip-card { border-radius: 12px; background: rgba(6,30,15,0.6); border: 1px solid rgba(234,179,8,0.2); padding: 12px; }
.vip-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.vip-card-icon { width: 32px; height: 32px; border-radius: 8px; background: rgba(234,179,8,0.2); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.vip-card-tag { font-size: 9px; color: #fde047; font-weight: 700; background: rgba(234,179,8,0.2); padding: 2px 6px; border-radius: 9999px; }
.vip-card-title { color: #fff; font-weight: 900; font-size: 12px; }
.vip-card-sub { color: rgba(255,255,255,0.5); font-size: 10px; }
.vip-inner { margin-top: 6px; background: rgba(0,0,0,0.3); border-radius: 8px; padding: 6px; }
.vip-inner-header { display: flex; align-items: center; justify-content: space-between; font-size: 9px; }
.vip-inner-badge { color: #fde047; font-weight: 700; }
.vip-inner-live { color: #4ade80; font-weight: 700; }
.vip-inner-val { color: #facc15; font-weight: 900; font-size: 18px; }
.vip-inner-unit { color: rgba(255,255,255,0.5); font-size: 9px; }
.vip-inner-desc { color: rgba(255,255,255,0.5); font-size: 9px; }

/* ===== Provincial Leagues ===== */
.leagues-section { margin-bottom: 8px; }
.leagues-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.leagues-header-left { }
.leagues-header-tag { font-size: 10px; color: rgba(250,204,21,0.7); font-weight: 700; }
.leagues-header-title { font-size: 14px; font-weight: 900; color: #fff; line-height: 1.3; }
.leagues-open { font-size: 9px; color: #4ade80; font-weight: 700; background: rgba(34,197,94,0.2); border: 1px solid rgba(74,222,128,0.3); padding: 2px 8px; border-radius: 9999px; white-space: nowrap; }
.leagues-panel { border-radius: 12px; padding: 10px; }
.leagues-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.league-item { display: flex; align-items: center; justify-content: space-between; background: rgba(0,0,0,0.3); border-radius: 8px; padding: 6px 8px; }
.league-item-left { min-width: 0; }
.league-item-top { display: flex; align-items: center; gap: 4px; }
.league-province { color: #fff; font-size: 10px; font-weight: 700; }
.league-name { color: #facc15; font-size: 9px; font-weight: 700; }
.league-match { color: rgba(255,255,255,0.5); font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.league-status { font-size: 8px; color: #86efac; background: rgba(34,197,94,0.2); border: 1px solid rgba(74,222,128,0.3); padding: 2px 4px; border-radius: 9999px; font-weight: 700; white-space: nowrap; margin-left: 4px; }
.leagues-footer { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 8px; }
.leagues-footer-hint { color: rgba(255,255,255,0.5); font-size: 10px; }
.leagues-footer-right { display: flex; align-items: center; gap: 6px; }
.leagues-footer-id { color: #facc15; font-weight: 900; font-size: 12px; }

/* ===== Games Section ===== */
.games-section { margin-bottom: 8px; }
.games-title { text-align: center; margin-bottom: 12px; }
.games-title h2 { font-size: 18px; font-weight: 900; }
.games-title p { color: rgba(255,255,255,0.65); font-size: 12px; margin-top: 2px; }
.games-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.game-card { position: relative; border-radius: 12px; border: 1px solid rgba(234,179,8,0.25); padding: 12px; overflow: hidden; }
.game-card.full { grid-column: span 2; }
.game-card-orb { position: absolute; top: -16px; right: -16px; width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,0.05); filter: blur(16px); }
.game-card-header { display: flex; align-items: flex-start; justify-content: space-between; position: relative; }
.game-card-icon-wrap { display: flex; align-items: center; gap: 6px; }
.game-card-icon { width: 28px; height: 28px; border-radius: 8px; background: rgba(0,0,0,0.4); border: 1px solid rgba(234,179,8,0.3); display: flex; align-items: center; justify-content: center; }
.game-card-title { color: #fff; font-weight: 900; font-size: 12px; line-height: 1.2; }
.game-card-desc { color: rgba(255,255,255,0.55); font-size: 9px; line-height: 1.2; }
.game-tag { font-size: 8px; font-weight: 900; padding: 2px 6px; border-radius: 9999px; flex-shrink: 0; }
.game-tag.hot { background: #fb923c; color: #000; }
.game-tag.pop { background: #fde047; color: #000; }
.game-tag.live { background: #a3e635; color: #000; }
/* Sport card */
.sport-card { margin-top: 8px; border-radius: 8px; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); padding: 8px; font-size: 10px; }
.sport-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.live-tag { font-size: 8px; background: #ef4444; color: #fff; font-weight: 900; padding: 2px 4px; border-radius: 4px; animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }
.sport-league { color: rgba(255,255,255,0.7); font-size: 9px; font-weight: 500; }
.sport-min { color: #fdba74; font-size: 9px; font-weight: 700; }
.sport-score-row { display: flex; align-items: center; justify-content: space-between; color: #fff; font-size: 10px; font-weight: 700; }
.sport-score { display: flex; align-items: center; gap: 2px; }
.sport-score-home { color: #fde047; font-weight: 900; font-size: 14px; }
.sport-score-sep { color: rgba(255,255,255,0.4); font-size: 12px; }
.sport-score-away { color: #fff; font-weight: 900; font-size: 14px; }
.sport-odds { margin-top: 6px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; text-align: center; }
.sport-odd { border-radius: 4px; background: rgba(255,255,255,0.1); padding: 2px 0; color: rgba(255,255,255,0.8); font-size: 8px; }
/* Live card */
.live-card { margin-top: 8px; border-radius: 8px; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); padding: 8px; }
.live-header { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.live-type { color: rgba(255,255,255,0.6); font-size: 9px; }
.live-viewers { margin-left: auto; font-size: 9px; font-weight: 700; color: #facc15; }
.live-bets { display: flex; gap: 4px; justify-content: center; margin-bottom: 6px; }
.live-bet { flex: 1; border-radius: 4px; padding: 4px; text-align: center; font-size: 9px; font-weight: 900; color: #fff; }
.live-bet.banker { background: rgba(239,68,68,0.8); }
.live-bet.player { background: rgba(59,130,246,0.8); }
.live-bet.tie { background: rgba(34,197,94,0.8); }
.live-history { display: flex; gap: 2px; }
.live-hist-item { flex: 1; height: 14px; border-radius: 4px; text-align: center; font-size: 7px; font-weight: 700; line-height: 14px; color: #fff; transition: all 0.5s; }
.live-hist-item.banker { background: rgba(248,113,113,0.7); }
.live-hist-item.player { background: rgba(96,165,250,0.7); }
/* Slot card */
.slot-card { margin-top: 8px; border-radius: 8px; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); padding: 8px; }
.slot-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.slot-label { color: rgba(255,255,255,0.6); font-size: 9px; }
.slot-jackpot { font-size: 9px; font-weight: 700; color: #facc15; }
.slot-symbols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.slot-sym { border-radius: 4px; background: linear-gradient(135deg, rgba(253,224,71,0.3), rgba(249,115,22,0.4)); border: 1px solid rgba(253,224,71,0.4); padding: 8px; text-align: center; color: #fef08a; font-weight: 900; font-size: 18px; }
/* Lottery card */
.lottery-card { margin-top: 8px; border-radius: 8px; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); padding: 8px; }
.lottery-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.lottery-label { color: rgba(255,255,255,0.6); font-size: 9px; }
.lottery-period { font-size: 9px; font-weight: 700; color: #facc15; }
.lottery-balls { display: flex; gap: 2px; align-items: center; justify-content: center; margin-bottom: 4px; }
.lottery-ball { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 900; font-size: 9px; }
.lottery-countdown { display: flex; align-items: center; justify-content: center; gap: 4px; }
.lottery-cd-label { color: rgba(255,255,255,0.5); font-size: 8px; }
.lottery-cd-val { color: #fdba74; font-size: 9px; font-weight: 900; }
/* Poker card */
.poker-card { margin-top: 8px; border-radius: 8px; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); padding: 8px; }
.poker-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.poker-label { color: rgba(255,255,255,0.6); font-size: 9px; }
.poker-tables-count { font-size: 9px; font-weight: 700; color: #facc15; }
.poker-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.poker-table { border-radius: 4px; background: rgba(6,78,59,0.6); border: 1px solid rgba(22,163,74,0.3); padding: 6px; }
.poker-table-name { color: #fff; font-size: 9px; font-weight: 700; }
.poker-table-players { color: rgba(255,255,255,0.5); font-size: 8px; }
.poker-table-blind { color: #facc15; font-size: 8px; font-weight: 700; }
.poker-suits { margin-top: 4px; display: flex; justify-content: center; gap: 4px; }
.poker-suit { font-size: 14px; }
.poker-suit.black { color: #fff; }
.poker-suit.red { color: #f87171; }

/* ===== Bottom CTA ===== */
.bottom-cta-section { position: relative; margin-bottom: 8px; }
.bottom-cta-glow { position: absolute; inset: -2px; background: linear-gradient(to right, #facc15, #fde047, #facc15); border-radius: 18px; filter: blur(4px); opacity: 0.25; animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }
.bottom-cta-border { position: relative; background: linear-gradient(to bottom, #10b981, #064e3b); padding: 1px; border-radius: 18px; }
.bottom-cta-inner { background: rgba(6,30,15,0.8); border-radius: 15px; padding: 16px; text-align: center; backdrop-filter: blur(4px); }
.bottom-cta-badge { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 9999px; background: rgba(234,179,8,0.2); border: 1px solid rgba(234,179,8,0.4); padding: 4px 12px; color: #facc15; font-size: 10px; font-weight: 700; margin-bottom: 8px; }
.bottom-cta-title { font-size: 18px; font-weight: 900; color: #fff; margin-bottom: 4px; line-height: 1.3; }
.bottom-cta-desc { color: rgba(255,255,255,0.65); font-size: 12px; margin-bottom: 12px; }
.bottom-cta-note { color: rgba(255,255,255,0.45); font-size: 10px; margin-top: 8px; }
.trust-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.trust-badge { border-radius: 12px; background: rgba(6,30,15,0.55); border: 1px solid rgba(234,179,8,0.2); padding: 10px; text-align: center; }
.trust-badge-icon { width: 32px; height: 32px; margin: 0 auto 6px; border-radius: 8px; background: rgba(234,179,8,0.15); border: 1px solid rgba(234,179,8,0.3); display: flex; align-items: center; justify-content: center; }
.trust-badge-title { color: #fff; font-weight: 900; font-size: 12px; }
.trust-badge-sub { color: rgba(255,255,255,0.55); font-size: 10px; margin-top: 2px; }
.notice-box { border-radius: 12px; padding: 12px; margin-bottom: 8px; }
.notice-title { display: flex; align-items: center; justify-content: center; gap: 8px; color: #fff; font-weight: 700; font-size: 14px; }
.notice-desc { text-align: center; color: rgba(255,255,255,0.65); font-size: 12px; margin-top: 4px; }
.page-footer { text-align: center; font-size: 10px; color: rgba(255,255,255,0.4); padding-bottom: 16px; }
.page-footer p + p { margin-top: 2px; }

/* ===== Fixed Bottom Bar ===== */
.fixed-bottom { position: fixed; bottom: 0; left: 0; right: 0; padding: 12px; background: linear-gradient(to top, #000, rgba(0,0,0,0.92), transparent); z-index: 40; }
.fixed-bottom-inner { max-width: 448px; margin: 0 auto; }

/* ===== Modals ===== */
.modal-overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal-overlay.bottom { align-items: flex-end; padding: 0; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.85); backdrop-filter: blur(4px); }
.modal-box {
  position: relative; width: 100%; max-width: 384px;
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(160deg, #1a3a1a 0%, #0d2010 60%, #0a1a0c 100%);
  border: 1px solid rgba(255,200,0,0.25);
}
.modal-box.sheet {
  max-width: 448px; border-radius: 24px 24px 0 0;
  background: #0d2010; border: 1px solid rgba(234,179,8,0.3);
  padding: 16px 20px 32px;
  overflow-y: auto; max-height: 92vh;
  scrollbar-width: none;
}
.modal-handle { width: 40px; height: 4px; border-radius: 9999px; background: rgba(255,255,255,0.2); margin: 0 auto 12px; }
.modal-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); transition: background 0.2s; z-index: 10; }
.modal-close:hover { background: rgba(255,255,255,0.2); }
.modal-top-badge { display: flex; justify-content: center; padding-top: 20px; padding-bottom: 12px; }
.modal-badge-inner { display: inline-flex; align-items: center; gap: 6px; background: rgba(234,179,8,0.2); border: 1px solid rgba(234,179,8,0.4); border-radius: 9999px; padding: 4px 12px; color: #facc15; font-size: 12px; font-weight: 700; }
.modal-title { text-align: center; padding: 0 24px; margin-bottom: 16px; }
.modal-title h2 { font-size: 24px; font-weight: 900; color: #fff; }
.guide-card { margin: 0 16px 12px; border-radius: 12px; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); overflow: hidden; }
.guide-code-row { padding: 16px 20px 12px; border-bottom: 1px solid rgba(255,255,255,0.08); text-align: center; }
.guide-code-label { color: rgba(255,255,255,0.5); font-size: 12px; margin-bottom: 4px; }
.guide-code-num { color: #fff; font-weight: 900; font-size: 48px; line-height: 1; }
.guide-code-num span { color: rgba(255,255,255,0.6); font-size: 30px; }
.guide-amount-row { padding: 12px 20px 16px; text-align: center; }
.guide-amount-label { color: rgba(255,255,255,0.5); font-size: 12px; margin-bottom: 4px; }
.guide-amount-val { display: flex; align-items: baseline; justify-content: center; gap: 4px; }
.guide-amount-sym { color: #facc15; font-weight: 900; font-size: 24px; }
.guide-amount-num { color: #facc15; font-weight: 900; font-size: 60px; line-height: 1; }
.guide-amount-unit { color: #facc15; font-weight: 900; font-size: 24px; }
.guide-time-row { margin: 0 16px 12px; border-radius: 12px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.08); padding: 10px 16px; display: flex; align-items: center; gap: 8px; }
.guide-time-label { color: rgba(255,255,255,0.4); font-size: 12px; }
.guide-time-val { color: rgba(255,255,255,0.7); font-size: 12px; font-weight: 500; }
.guide-hint { margin: 0 16px 16px; border-radius: 12px; background: rgba(234,179,8,0.1); border: 1px solid rgba(234,179,8,0.25); padding: 12px 16px; }
.guide-hint-inner { display: flex; align-items: flex-start; gap: 8px; }
.guide-hint-text { color: rgba(253,224,71,0.9); font-size: 12px; line-height: 1.6; }
.guide-hint-text .agent-link { color: #facc15; font-weight: 900; display: inline-flex; align-items: center; gap: 2px; }
.guide-cta { padding: 0 16px 16px; }
.btn-green {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 56px;
  font-size: 16px; font-weight: 900; color: #fff;
  border-radius: 12px;
  background: linear-gradient(to bottom, #4ade80, #16a34a);
  box-shadow: 0 6px 24px rgba(34,197,94,0.45);
  transition: all 0.2s;
  white-space: nowrap;
}
.btn-green:hover { opacity: 0.9; }
.btn-green:active { transform: scale(0.95); }
.guide-bottom-note { text-align: center; padding-bottom: 16px; padding-left: 16px; padding-right: 16px; color: rgba(255,255,255,0.3); font-size: 10px; }

/* SafeX Modal */
.safex-step-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.safex-step-num { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 10px; font-weight: 900; color: #fff; }
.safex-step-num.green { background: linear-gradient(135deg, #4ade80, #16a34a); }
.safex-step-num.yellow { background: linear-gradient(135deg, #fde047, #f97316); }
.safex-step-title { color: #fff; font-weight: 700; font-size: 14px; }
.safex-step-sub { color: rgba(255,255,255,0.4); font-size: 10px; }
.safex-divider { display: flex; align-items: center; gap: 8px; margin: 12px 0; }
.safex-divider-line { flex: 1; height: 1px; background: rgba(255,255,255,0.1); }
.safex-divider-text { color: rgba(255,255,255,0.3); font-size: 10px; }
.qr-wrap { display: flex; justify-content: center; margin-bottom: 12px; }
.qr-box { width: 176px; height: 176px; background: #fff; border-radius: 16px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 8px; }
.qr-box img { width: 100%; height: 100%; object-fit: contain; }
.safex-agent-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 12px; }
.safex-agent-id { color: #facc15; font-weight: 900; font-size: 24px; }
.safex-hint { color: rgba(255,255,255,0.4); font-size: 10px; text-align: center; margin-bottom: 12px; }
.safex-platforms { display: flex; align-items: center; justify-content: center; gap: 12px; color: rgba(255,255,255,0.4); font-size: 10px; margin-bottom: 12px; }
.btn-tutorial {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12px; color: #34d399;
  border: 1px solid rgba(16,185,129,0.3); background: rgba(16,185,129,0.1);
  border-radius: 12px; padding: 10px;
  transition: background 0.2s;
  white-space: nowrap;
}
.btn-tutorial:hover { background: rgba(16,185,129,0.2); }
.tutorial-box { margin-bottom: 12px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); }
.tutorial-section { background: #0a1a0c; }
.tutorial-section + .tutorial-section { border-top: 1px solid rgba(255,255,255,0.08); background: #0c1e0e; }
.tutorial-section-3 { background: #0a1a0c; border-top: 1px solid rgba(255,255,255,0.08); }
.tutorial-toggle { width: 100%; display: flex; align-items: center; gap: 8px; padding: 12px 16px; }
.tutorial-toggle-num { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #fde047, #f97316); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tutorial-toggle-num span { color: #fff; font-weight: 900; font-size: 10px; }
.tutorial-toggle-title { color: #fff; font-weight: 700; font-size: 12px; text-align: left; }
.tutorial-toggle-sub { color: rgba(255,255,255,0.4); font-size: 10px; text-align: left; }
.tutorial-toggle-arrow { margin-left: auto; color: rgba(255,255,255,0.4); }
.tutorial-content { padding: 0 16px 16px; }
.tutorial-platform-title { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 12px; font-weight: 700; color: #fff; }
.tutorial-step-item { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.tutorial-step-num { width: 16px; height: 16px; border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.tutorial-step-num.blue { background: rgba(59,130,246,0.3); border: 1px solid rgba(96,165,250,0.4); }
.tutorial-step-num.green { background: rgba(16,185,129,0.3); border: 1px solid rgba(52,211,153,0.4); }
.tutorial-step-num.yellow { background: rgba(234,179,8,0.3); border: 1px solid rgba(250,204,21,0.4); }
.tutorial-step-num span { font-size: 9px; font-weight: 700; }
.tutorial-step-num.blue span { color: #93c5fd; }
.tutorial-step-num.green span { color: #6ee7b7; }
.tutorial-step-num.yellow span { color: #fde047; }
.tutorial-step-text { color: rgba(255,255,255,0.7); font-size: 11px; }
.btn-ios { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 36px; margin-top: 8px; font-size: 12px; font-weight: 700; color: #fff; border-radius: 12px; background: linear-gradient(to right, #3b82f6, #2563eb); white-space: nowrap; }
.btn-android { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 36px; font-size: 12px; font-weight: 700; color: #fff; border-radius: 12px; background: linear-gradient(to right, #22c55e, #16a34a); white-space: nowrap; }
.ios-warning { margin-top: 8px; background: rgba(234,179,8,0.1); border: 1px solid rgba(234,179,8,0.2); border-radius: 8px; padding: 8px 12px; }
.ios-warning-text { color: #facc15; font-size: 10px; display: flex; align-items: center; justify-content: space-between; }
.android-toggle { width: 100%; display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 12px; font-weight: 700; color: #fff; }
.android-method-title { font-size: 10px; font-weight: 700; margin-bottom: 6px; }
.android-method-title.green { color: #34d399; }
.android-method-title.yellow { color: #facc15; }
.register-field { display: flex; align-items: center; gap: 12px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.register-field-label { color: rgba(255,255,255,0.5); font-size: 10px; }
.register-field-desc { color: rgba(255,255,255,0.8); font-size: 12px; }
.contact-step { display: flex; align-items: center; gap: 12px; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 12px; margin-bottom: 8px; }
.contact-step-text { color: rgba(255,255,255,0.85); font-size: 12px; }
.safex-bottom-note { color: rgba(255,255,255,0.3); font-size: 10px; text-align: center; margin-top: 8px; }

/* ===== Toast ===== */
.toast-container { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 9999; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 8px; background: rgba(6,30,15,0.95); border: 1px solid rgba(74,222,128,0.4); border-radius: 12px; padding: 10px 16px; color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; animation: toast-in 0.35s cubic-bezier(0.34,1.56,0.64,1) forwards; backdrop-filter: blur(8px); }

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