.balance-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 0;
  font-size: 12px;
  flex-wrap: wrap;
}

.bal-guest {
  border: none;
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 12px;
  cursor: pointer;
}

.bal-user {
  color: #fff;
  font-weight: 600;
}

.bal-vip {
  margin-left: 4px;
  background: #fbbf24;
  color: #78350f;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
}

.bal-amt {
  color: rgba(255, 255, 255, 0.95);
}

.bal-btn {
  margin-left: auto;
  border: none;
  background: #fff;
  color: #6b4cff;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 14px;
  cursor: pointer;
}

.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.55);
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}

.auth-overlay.open {
  display: flex;
}

.auth-dialog {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  overflow: auto;
  background: #fff;
  border-radius: 16px 16px 0 0;
  padding: 20px 18px calc(18px + env(safe-area-inset-bottom));
  animation: auth-up 0.25s ease;
}

@keyframes auth-up {
  from { transform: translateY(24px); opacity: 0.6; }
  to { transform: none; opacity: 1; }
}

.auth-close {
  position: absolute;
  right: 12px;
  top: 8px;
  border: none;
  background: none;
  font-size: 28px;
  line-height: 1;
  color: #888;
  cursor: pointer;
}

.auth-panel {
  display: none;
}

.auth-panel.active {
  display: block;
}

.auth-panel h2 {
  font-size: 18px;
  margin-bottom: 16px;
  text-align: center;
}

.auth-panel label {
  display: block;
  font-size: 13px;
  color: #555;
  margin-bottom: 12px;
}

.auth-panel input {
  display: block;
  width: 100%;
  margin-top: 6px;
  height: 42px;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 0 12px;
  font-size: 15px;
}

.auth-primary {
  width: 100%;
  border: none;
  height: 44px;
  border-radius: 22px;
  background: linear-gradient(90deg, #6b4cff, #8b5cf6);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  margin-top: 8px;
  cursor: pointer;
}

.auth-links {
  text-align: center;
  margin-top: 14px;
  font-size: 13px;
}

.auth-links a {
  color: #6b4cff;
}

.auth-hint {
  font-size: 12px;
  color: #888;
  margin-bottom: 12px;
  text-align: center;
}

.recharge-presets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.recharge-presets button {
  height: 40px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f9fafb;
  font-weight: 600;
  cursor: pointer;
}

.auth-toast {
  position: fixed;
  left: 50%;
  bottom: calc(80px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(12px);
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13px;
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  max-width: 90%;
  text-align: center;
}

.auth-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.cs-overlay {
  position: fixed;
  inset: 0;
  z-index: 210;
  background: rgba(0, 0, 0, 0.55);
  display: none;
  align-items: flex-end;
  justify-content: center;
}

.cs-overlay.open {
  display: flex;
}

.cs-dialog {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: #fff;
  border-radius: 16px 16px 0 0;
  padding: 20px 18px calc(18px + env(safe-area-inset-bottom));
}

.cs-dialog h2 {
  text-align: center;
  font-size: 18px;
  margin-bottom: 10px;
}

.cs-intro {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 12px;
  white-space: pre-wrap;
}

.cs-link-btn {
  display: block;
  text-align: center;
  margin-bottom: 14px;
  padding: 10px;
  border-radius: 10px;
  background: #ecfdf5;
  color: #059669;
  font-weight: 700;
}

.cs-form textarea {
  width: 100%;
  margin-top: 6px;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px;
  font-size: 14px;
  resize: vertical;
}

.cs-history {
  margin-top: 16px;
  max-height: 220px;
  overflow-y: auto;
  border-top: 1px solid #eee;
  padding-top: 12px;
}

.cs-history-hint {
  font-size: 12px;
  color: #999;
  text-align: center;
  padding: 8px 0;
}

.cs-h-item {
  background: #f8fafc;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
  font-size: 13px;
}

.cs-h-meta {
  font-size: 11px;
  color: #94a3b8;
  margin-bottom: 6px;
}

.cs-h-content {
  color: #334155;
  line-height: 1.45;
  white-space: pre-wrap;
}

.cs-h-reply {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #e2e8f0;
  color: #059669;
  line-height: 1.45;
  white-space: pre-wrap;
}

.cs-h-reply span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 4px;
}

.cs-h-pending {
  margin-top: 6px;
  font-size: 12px;
  color: #f59e0b;
}