/* ============================================
   MR.VIP Base — Clean Light Theme
   ============================================ */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body {
  font-family: var(--font);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--brand); text-decoration:none; }
img, svg { display:block; max-width:100%; }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; font-size:inherit; }
ul, ol { list-style:none; }
input, textarea, select { font-family:inherit; font-size:inherit; outline:none; }

::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:var(--r-full); }

/* ---- Buttons ---- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  padding:10px 24px; font-weight:600; font-size:var(--fs-14);
  border-radius:var(--r-lg); transition:all var(--ease-base); cursor:pointer;
  border: none;
}
.btn-brand {
  background:var(--brand); color:var(--text-inverse);
  box-shadow:0 1px 3px rgba(37,99,235,0.3);
}
.btn-brand:hover { background:var(--brand-dark); transform:translateY(-1px); box-shadow:0 4px 12px rgba(37,99,235,0.25); }
.btn-gold {
  background:var(--gold-gradient); color:var(--text-inverse);
  box-shadow:0 1px 3px rgba(202,138,4,0.3);
}
.btn-gold:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(202,138,4,0.25); }
.btn-outline {
  background:transparent; color:var(--text-primary);
  border:1.5px solid var(--border); padding:9px 23px;
}
.btn-outline:hover { border-color:var(--brand); color:var(--brand); }
.btn-ghost {
  background:transparent; color:var(--text-secondary); padding:8px 16px;
}
.btn-ghost:hover { color:var(--text-primary); background:var(--bg-hover); }
.btn-sm { padding:6px 14px; font-size:var(--fs-13); border-radius:var(--r-md); }
.btn-lg { padding:14px 32px; font-size:var(--fs-16); border-radius:var(--r-lg); }
.btn-block { width:100%; }
.btn-danger { background:var(--danger); color:var(--text-inverse); }
.btn-success { background:var(--success); color:var(--text-inverse); }

/* ---- Badge ---- */
.badge {
  display:inline-flex; align-items:center; padding:2px 8px;
  font-size:var(--fs-11); font-weight:600; border-radius:var(--r-full); line-height:1.5;
}
.badge-gold { background:var(--gold-bg); color:var(--gold); }
.badge-brand { background:var(--brand-bg); color:var(--brand); }
.badge-danger { background:var(--danger-bg); color:var(--danger); }
.badge-success { background:var(--success-bg); color:var(--success); }
.badge-dot {
  width:6px; height:6px; padding:0; border-radius:50%;
  background:var(--danger); display:inline-block;
}

/* ---- Card ---- */
.card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:var(--s-5);
  box-shadow:var(--shadow-card);
}

/* ---- Input ---- */
.input {
  width:100%; padding:10px 14px;
  background:var(--bg-input); border:1.5px solid var(--border);
  border-radius:var(--r-md); color:var(--text-primary);
  font-size:var(--fs-15); transition:border-color var(--ease-fast);
}
.input:focus { border-color:var(--brand); background:var(--bg-primary); }
.input::placeholder { color:var(--text-tertiary); }

/* ---- Progress ---- */
.progress { width:100%; height:6px; background:var(--bg-tertiary); border-radius:var(--r-full); overflow:hidden; }
.progress-fill { height:100%; border-radius:var(--r-full); transition:width 0.8s ease; }
.progress-fill--brand { background:var(--brand); }
.progress-fill--gold { background:linear-gradient(90deg,var(--gold),var(--gold-light)); }

/* ---- Toast ---- */
.toast {
  position:fixed; top:60px; left:50%; transform:translateX(-50%) translateY(-16px);
  padding:10px 24px; background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--r-full); font-size:var(--fs-13); font-weight:500;
  box-shadow:var(--shadow-lg); z-index:var(--z-toast);
  opacity:0; pointer-events:none; transition:all var(--ease-base);
  color:var(--text-primary);
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ---- Divider ---- */
.divider { height:1px; background:var(--border); margin:var(--s-4) 0; }

/* ---- Section Header ---- */
.sec-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:var(--s-3);
}
.sec-title { font-size:var(--fs-16); font-weight:700; color:var(--text-primary); }
.sec-more { font-size:var(--fs-13); color:var(--text-tertiary); }

/* ---- Tag ---- */
.tag {
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 10px; font-size:var(--fs-12); font-weight:500;
  border-radius:var(--r-full); background:var(--bg-tertiary); color:var(--text-secondary);
}

/* ---- Toggle Switch ---- */
.toggle {
  width:44px; height:24px; border-radius:var(--r-full);
  background:var(--border); position:relative; cursor:pointer;
  transition:background var(--ease-fast); flex-shrink:0;
}
.toggle.on { background:var(--brand); }
.toggle::after {
  content:''; position:absolute; top:2px; left:2px;
  width:20px; height:20px; border-radius:50%;
  background:white; box-shadow:var(--shadow-sm);
  transition:transform var(--ease-fast);
}
.toggle.on::after { transform:translateX(20px); }

/* ---- Utilities ---- */
.flex { display:flex; }
.flex-col { flex-direction:column; }
.flex-center { display:flex; align-items:center; justify-content:center; }
.flex-between { display:flex; align-items:center; justify-content:space-between; }
.gap-1{gap:var(--s-1)}.gap-2{gap:var(--s-2)}.gap-3{gap:var(--s-3)}.gap-4{gap:var(--s-4)}.gap-6{gap:var(--s-6)}
.text-center{text-align:center}
.text-brand{color:var(--brand)}.text-gold{color:var(--gold)}.text-success{color:var(--success)}.text-danger{color:var(--danger)}.text-muted{color:var(--text-secondary)}.text-light{color:var(--text-tertiary)}
.fw-500{font-weight:500}.fw-600{font-weight:600}.fw-700{font-weight:700}.fw-800{font-weight:800}
.w-full{width:100%}
.hidden{display:none!important}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-1{margin-top:var(--s-1)}.mt-2{margin-top:var(--s-2)}.mt-3{margin-top:var(--s-3)}.mt-4{margin-top:var(--s-4)}.mt-6{margin-top:var(--s-6)}
.mb-1{margin-bottom:var(--s-1)}.mb-2{margin-bottom:var(--s-2)}.mb-3{margin-bottom:var(--s-3)}.mb-4{margin-bottom:var(--s-4)}