/* JOIN Game - Main Styles */
@import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@400;500;600;700;800;900&display=swap');

:root {
  --cream: #f4f4f0;
  --black: #000000;
  --white: #ffffff;
  --pink: #ff90e8;
  --muted: #e8e8e4;
  --muted-fg: #666666;
  --card: #ffffff;
  --border: #000000;
  --destructive: #dc2626;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Epilogue', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background-color: var(--cream);
  color: var(--black);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

h1 { font-weight: 900; margin: 0; }
h2, h3, h4, h5, h6 { margin: 0; }
p { margin: 0; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* ── Animations ─────────────────────────────────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-20px); }
}
@keyframes bounce-subtle {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}
@keyframes glow {
  0%, 100% { box-shadow: 0 0 5px var(--pink), 0 0 10px var(--pink); }
  50%       { box-shadow: 0 0 10px var(--pink), 0 0 20px var(--pink); }
}
@keyframes slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scroll-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes scroll-right {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.animate-float         { animation: float 3s ease-in-out infinite; }
.animate-bounce-subtle { animation: bounce-subtle 2s ease-in-out infinite; }
.animate-glow          { animation: glow 2s ease-in-out infinite; }
.animate-slide-up      { animation: slide-up 0.5s ease-out; }
.animate-scroll-left   { animation: scroll-left 40s linear infinite; }
.animate-scroll-right  { animation: scroll-right 40s linear infinite; }
.animate-pulse         { animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }
.animate-scroll-left:hover,
.animate-scroll-right:hover { animation-play-state: paused; }

/* ── Card hover ─────────────────────────────────────────────── */
.card-hover { transition: all 0.3s ease; }
.card-hover:hover {
  box-shadow: 8px 8px 0px var(--black);
  transform: translate(-2px, -2px);
}

/* ── Button helpers ─────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--black); color: var(--white);
  border: 2px solid var(--black);
  padding: 0.75rem 2rem; font-weight: 600; font-size: 1rem;
  transition: all 0.2s ease; cursor: pointer;
}
.btn-primary:hover {
  background: var(--pink);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px var(--black);
}

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--black);
  border: 2px solid var(--black);
  padding: 0.75rem 2rem; font-weight: 600; font-size: 1rem;
  transition: all 0.2s ease; cursor: pointer;
}
.btn-secondary:hover {
  background: var(--pink);
  border-color: var(--pink);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px var(--black);
}

.cta-button { transition: all 0.2s ease; }
.cta-button:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px rgba(0,0,0,1);
}

/* ── Card base ──────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 2px solid var(--border);
  padding: 1.5rem;
}

/* ── Sidebar (streamer/fan dashboards) ──────────────────────── */
.sidebar {
  width: 16rem; border-right: 2px solid var(--black);
  background: rgba(244,244,240,0.5);
  min-height: calc(100vh - 4rem);
  position: sticky; top: 4rem; flex-shrink: 0;
}
.sidebar nav { padding: 1.5rem; }
.sidebar-link {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1rem; border-radius: 0.5rem;
  font-weight: 500; transition: all 0.2s;
}
.sidebar-link:hover { background: rgba(255,144,232,0.1); transform: translateX(4px); }
.sidebar-link.active {
  background: var(--black); color: var(--white);
  box-shadow: 0 4px 0 0 rgba(0,0,0,1);
}

/* ── Tabs ───────────────────────────────────────────────────── */
.tabs { border-bottom: 2px solid var(--black); display: flex; gap: 0; }
.tab-btn {
  padding: 0.75rem 1.5rem; font-weight: 600; background: none;
  border: none; border-bottom: 3px solid transparent;
  margin-bottom: -2px; transition: all 0.2s; cursor: pointer;
}
.tab-btn:hover { color: var(--pink); }
.tab-btn.active { border-bottom-color: var(--black); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Form elements ──────────────────────────────────────────── */
.form-input {
  width: 100%; border: 2px solid var(--black);
  padding: 0.75rem 1rem; background: var(--white);
  font-size: 1rem; transition: all 0.2s; outline: none;
}
.form-input:focus { border-color: var(--pink); box-shadow: 0 0 0 2px rgba(255,144,232,0.3); }
.form-label { font-weight: 600; font-size: 0.875rem; display: block; margin-bottom: 0.5rem; }
.form-textarea { resize: vertical; min-height: 8rem; }
.form-select {
  width: 100%; border: 2px solid var(--black);
  padding: 0.75rem 1rem; background: var(--white);
  font-size: 1rem; cursor: pointer; outline: none;
}

/* ── Badge ──────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.25rem 0.75rem; border: 2px solid var(--black);
  font-size: 0.75rem; font-weight: 700;
}
.badge-green { background: #22c55e; color: white; border-color: #22c55e; }
.badge-red   { background: #ef4444; color: white; border-color: #ef4444; }
.badge-yellow { background: #FDFD96; color: black; }
.badge-pink  { background: var(--pink); color: black; }
.badge-outline { background: transparent; }

/* ── Progress bar ───────────────────────────────────────────── */
.progress-bg  { background: var(--muted); height: 0.75rem; border-radius: 999px; overflow: hidden; }
.progress-bar { background: var(--black); height: 100%; border-radius: 999px; transition: width 0.5s; }

/* ── Avatar ─────────────────────────────────────────────────── */
.avatar {
  border-radius: 9999px; border: 2px solid var(--black);
  overflow: hidden; background: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
}

/* ── Toggle switch ──────────────────────────────────────────── */
.toggle-wrap { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; }
.toggle {
  position: relative; width: 3rem; height: 1.5rem;
  background: var(--muted); border: 2px solid var(--black);
  border-radius: 999px; transition: background 0.2s; flex-shrink: 0;
}
.toggle.on { background: var(--black); }
.toggle::after {
  content: ''; position: absolute;
  top: 2px; left: 2px;
  width: 1rem; height: 1rem;
  background: white; border-radius: 50%;
  transition: transform 0.2s;
}
.toggle.on::after { transform: translateX(1.5rem); }

/* ── Modal ──────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  z-index: 100; display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.modal-overlay.hidden { display: none; }
.modal-box {
  background: var(--white); border: 2px solid var(--black);
  max-width: 28rem; width: 100%; padding: 2rem; position: relative;
}
.modal-close {
  position: absolute; top: 1rem; right: 1rem;
  background: none; border: none; font-size: 1.5rem; cursor: pointer;
}

/* ── Section spacing ────────────────────────────────────────── */
.section { padding: 5rem 1rem; }

/* ── Scrolling testimonials ─────────────────────────────────── */
.testimonials-row { overflow: hidden; }
.testimonials-track { display: flex; gap: 1.5rem; width: max-content; }

/* ── Step indicator ─────────────────────────────────────────── */
.step-circle {
  width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; border: 2px solid var(--black);
}
.step-circle.active { background: var(--black); color: var(--white); }
.step-circle.inactive { background: var(--muted); color: var(--muted-fg); }
.step-line { flex: 1; height: 4px; background: var(--muted); }
.step-line.active { background: var(--black); }

/* ── Bar chart helper ───────────────────────────────────────── */
.chart-container { height: 16rem; display: flex; align-items: flex-end; gap: 1rem; }
.chart-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.chart-bar {
  width: 100%; border: 2px solid var(--black);
  border-radius: 4px 4px 0 0;
  transition: all 0.5s; min-height: 4px;
}
.chart-bar:hover { opacity: 0.8; }

/* ── Online dot ─────────────────────────────────────────────── */
.online-dot {
  position: absolute; bottom: -2px; right: -2px;
  width: 12px; height: 12px;
  background: #22c55e; border: 2px solid white;
  border-radius: 9999px;
}

/* ── Skin filter btn ────────────────────────────────────────── */
.filter-btn {
  padding: 0.5rem 1.5rem; border: 2px solid var(--black);
  font-weight: 600; background: var(--white); cursor: pointer;
  transition: all 0.2s;
}
.filter-btn:hover { box-shadow: 0 4px 0 0 rgba(0,0,0,1); transform: translateY(-2px); }
.filter-btn.active {
  background: var(--black); color: var(--white);
  box-shadow: 0 4px 0 0 rgba(0,0,0,1);
}

/* ── Moderation log badges ──────────────────────────────────── */
.mod-banned   { background: #fee2e2; color: #b91c1c; border: 2px solid #fca5a5; padding: 0.25rem 0.75rem; font-weight: 700; font-size: 0.75rem; }
.mod-muted    { background: #fef9c3; color: #854d0e; border: 2px solid #fde047; padding: 0.25rem 0.75rem; font-weight: 700; font-size: 0.75rem; }
.mod-promoted { background: #dcfce7; color: #166534; border: 2px solid #86efac; padding: 0.25rem 0.75rem; font-weight: 700; font-size: 0.75rem; }

/* ── Page wrapper ───────────────────────────────────────────── */
.page-with-sidebar { display: flex; padding-top: 4rem; }
.page-main { flex: 1; padding: 2rem; min-width: 0; }
@media (max-width: 1024px) { .sidebar { display: none; } }

/* ── Page layout ─────────────────────────────────────────────── */
.page-content { padding-top: 6rem; padding-bottom: 4rem; padding-left: 1rem; padding-right: 1rem; }
.page-auth { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; padding-top: 5rem; }
.container-sm  { max-width: 28rem; width: 100%; }
.container-md  { max-width: 40rem; margin: 0 auto; }
.container-lg  { max-width: 52rem; margin: 0 auto; }
.container-xl  { max-width: 72rem; margin: 0 auto; }
.container-2xl { max-width: 80rem; margin: 0 auto; }
.container-3xl { max-width: 88rem; margin: 0 auto; }

/* ── Flex utilities ──────────────────────────────────────────── */
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col     { display: flex; flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.shrink-0     { flex-shrink: 0; }
.flex-1       { flex: 1; }
.ml-auto      { margin-left: auto; }

/* ── Gap ─────────────────────────────────────────────────────── */
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }

/* ── Grid ────────────────────────────────────────────────────── */
.grid-2       { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.grid-2-lg    { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.grid-3       { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.grid-3-lg    { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.grid-4       { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; }
.grid-auto-sm { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 1.5rem; }
.grid-auto-md { display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 1.5rem; }
.grid-auto-lg { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 1.5rem; }
.grid-auto-xl { display: grid; grid-template-columns: repeat(auto-fill,minmax(400px,1fr)); gap: 2rem; }

/* ── Spacing ─────────────────────────────────────────────────── */
.p-0  { padding: 0; }
.p-2  { padding: 0.5rem; }
.p-3  { padding: 0.75rem; }
.p-4  { padding: 1rem; }
.p-5  { padding: 1.25rem; }
.p-6  { padding: 1.5rem; }
.p-8  { padding: 2rem; }
.p-12 { padding: 3rem; }
.mb-1  { margin-bottom: 0.25rem; }
.mb-2  { margin-bottom: 0.5rem; }
.mb-3  { margin-bottom: 0.75rem; }
.mb-4  { margin-bottom: 1rem; }
.mb-5  { margin-bottom: 1.25rem; }
.mb-6  { margin-bottom: 1.5rem; }
.mb-8  { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }
.mt-1  { margin-top: 0.25rem; }
.mt-2  { margin-top: 0.5rem; }
.mt-4  { margin-top: 1rem; }
.mt-6  { margin-top: 1.5rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ── Typography ──────────────────────────────────────────────── */
.text-xs    { font-size: 0.75rem; }
.text-sm    { font-size: 0.875rem; }
.text-lg    { font-size: 1.1rem; }
.text-xl    { font-size: 1.25rem; }
.text-2xl   { font-size: 1.5rem; }
.text-3xl   { font-size: 2.25rem; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-muted  { color: var(--muted-fg); }
.text-destructive { color: var(--destructive); }
.text-pink   { color: var(--pink); }
.font-600    { font-weight: 600; }
.font-700    { font-weight: 700; }
.font-900    { font-weight: 900; }
.leading-7   { line-height: 1.7; }
.leading-8   { line-height: 1.8; }
.uppercase   { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.05em; }
.nowrap      { white-space: nowrap; }

/* ── Display / Position ──────────────────────────────────────── */
.block    { display: block; }
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }
.w-full   { width: 100%; }
.object-cover { object-fit: cover; }

/* ── Colours ─────────────────────────────────────────────────── */
.bg-muted   { background: var(--muted); }
.bg-yellow  { background: #FDFD96; }
.bg-pink    { background: var(--pink); }
.bg-teal    { background: #DAF5F0; }
.bg-peach   { background: #F8D6B3; }
.bg-white   { background: white; }
.bg-section-teal  { background: rgba(218,245,240,1); border: 4px solid var(--black); }
.bg-section-peach { background: rgba(246,214,181,1); border: 4px solid var(--black); }
.border-green { border-color: #22c55e !important; }
.border-pink  { border-color: var(--pink) !important; }
.border-4 { border-width: 4px !important; }

/* ── Button variants ─────────────────────────────────────────── */
.btn-xs   { padding: 0.375rem 0.75rem !important; font-size: 0.8rem !important; }
.btn-sm   { padding: 0.5rem 1.25rem !important; font-size: 0.9rem !important; }
.btn-md   { padding: 0.625rem 1.5rem !important; }
.btn-lg   { padding: 0.75rem 1.5rem !important; font-size: 1rem !important; }
.btn-full { width: 100%; display: flex; justify-content: center; }
.btn-yellow { background: #FDFD96 !important; color: black !important; border: 2px solid black !important; font-weight: 600; cursor: pointer; }
.btn-green  { background: #22c55e; color: white; border: none; font-weight: 600; font-size: 1rem; cursor: pointer; padding: 0.75rem 1.5rem; }
.btn-destructive { padding: 0.375rem 0.75rem; border: 2px solid var(--destructive); background: transparent; color: var(--destructive); cursor: pointer; font-weight: 700; transition: all 0.15s; }
.btn-destructive:hover { background: var(--destructive); color: white; }

/* ── Rewards checklist (package modal) ───────────────────────── */
.rewards-checklist { max-height: 10rem; overflow-y: auto; border: 2px solid var(--black); padding: 0.75rem; }
.reward-option { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; cursor: pointer; }
.pkg-color-input { height: 3rem; cursor: pointer; }

/* ── Avatar variants ─────────────────────────────────────────── */
.avatar-sm  { width: 2rem;   height: 2rem;   font-size: 0.75rem; }
.avatar-md  { width: 2.5rem; height: 2.5rem; font-size: 1rem; }
.avatar-lg  { width: 3rem;   height: 3rem;   font-size: 1.25rem; }
.avatar-xl  { width: 4rem;   height: 4rem;   font-size: 1.5rem; }
.avatar-2xl { width: 6rem;   height: 6rem;   font-size: 2rem;  border-width: 4px; }
.avatar-3xl { width: 8rem;   height: 8rem;   font-size: 3rem;  border-width: 4px; }

/* ── Card padding variants ───────────────────────────────────── */
.card-sm { padding: 1rem !important; }
.card-lg { padding: 2rem !important; }
.card-xl { padding: 3rem !important; }

/* ── Stat card ────────────────────────────────────────────────── */
.stat-card-inner { display: flex; align-items: center; gap: 1rem; }
.stat-icon   { padding: 0.5rem; border: 2px solid black; flex-shrink: 0; }
.stat-icon-yellow { background: #FDFD96; }
.stat-icon-pink   { background: var(--pink); }
.stat-icon-teal   { background: #DAF5F0; }
.stat-icon-peach  { background: #F8D6B3; }
.stat-label  { font-size: 0.75rem; color: var(--muted-fg); }
.stat-value  { font-size: 1.5rem; font-weight: 700; }
.stat-change { font-size: 0.75rem; }
.stat-change-up   { color: #22c55e; }
.stat-change-down { color: var(--destructive); }

/* ── Streamer card ────────────────────────────────────────────── */
.streamer-card { padding: 0 !important; overflow: hidden; }
.streamer-thumbnail { position: relative; height: 10rem; overflow: hidden; }
.streamer-thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block; }
.viewer-count { position: absolute; top: 0.5rem; right: 0.5rem; background: rgba(0,0,0,0.7); color: white; padding: 0.25rem 0.5rem; font-size: 0.75rem; }
.live-badge   { position: absolute; top: 0.5rem; left: 0.5rem; font-size: 0.7rem; border-radius: 999px; }
.live-dot     { width: 0.5rem; height: 0.5rem; background: white; border-radius: 50%; display: inline-block; margin-right: 0.25rem; }
.streamer-body { padding: 1rem; }
.streamer-meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.streamer-photo    { border-radius: 50%; border: 2px solid black; object-fit: cover; }
.streamer-photo-sm { width: 2.5rem; height: 2.5rem; }
.streamer-photo-md { width: 4rem;   height: 4rem; }
.streamer-photo-xl { width: 8rem;   height: 8rem; border-width: 4px; }
.streamer-profile-stats { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 1.5rem; }

/* ── Skin card ────────────────────────────────────────────────── */
.skin-card   { padding: 0 !important; overflow: hidden; }
.skin-img    { height: 12rem; overflow: hidden; }
.skin-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.skin-body   { padding: 1rem; }
.skin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }

/* ── Map card ─────────────────────────────────────────────────── */
.map-card    { padding: 0 !important; overflow: hidden; }
.map-img     { position: relative; }
.map-img img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.map-featured-label { position: absolute; top: 1rem; left: 1rem; z-index: 1; background: var(--pink); color: white; padding: 0.25rem 1rem; font-size: 0.875rem; font-weight: 700; }
.map-body    { padding: 1.5rem; }
.map-header  { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }

/* ── List items ───────────────────────────────────────────────── */
.list-item { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem; transition: background 0.2s; }
.list-item:hover { background: rgba(255,144,232,0.1); }
.list-item-bordered { display: flex; align-items: center; justify-content: space-between; padding: 1rem; border: 2px solid var(--black); transition: all 0.2s; margin-bottom: 0.75rem; }
.list-info  { display: flex; align-items: center; gap: 0.75rem; }
.list-meta  { text-align: right; }

/* ── Form group ───────────────────────────────────────────────── */
.form-group    { margin-bottom: 1rem; }
.form-group-lg { margin-bottom: 1.5rem; }
.form-divider  { position: relative; margin: 1.5rem 0; }
.form-divider hr { border: none; border-top: 2px solid var(--black); margin: 0; }
.form-divider-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: var(--white); padding: 0 1rem; font-size: 0.875rem; color: var(--muted-fg); }

/* ── Accordion ────────────────────────────────────────────────── */
.accordion-btn      { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 1.5rem; text-align: left; background: white; border: none; cursor: pointer; gap: 1rem; }
.accordion-icon     { font-size: 1.75rem; flex-shrink: 0; }
.accordion-question { font-weight: 600; font-size: 1.05rem; }
.accordion-chevron  { font-size: 1.25rem; transition: transform 0.3s; flex-shrink: 0; }
.accordion-answer   { max-height: 0; overflow: hidden; transition: max-height 0.3s; }
.accordion-answer.open { max-height: 500px; }
.accordion-content  { padding: 0 1.5rem 1.5rem 4.25rem; color: var(--muted-fg); line-height: 1.7; }

/* ── Modal extras ─────────────────────────────────────────────── */
.modal-title   { font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; }
.modal-summary { background: var(--muted); padding: 1rem; margin-bottom: 1.5rem; }
.modal-row     { display: flex; justify-content: space-between; margin-bottom: 0.5rem; }

/* ── Popular / bonus ──────────────────────────────────────────── */
.popular-badge { position: absolute; top: -1rem; left: 50%; transform: translateX(-50%); background: var(--pink); color: black; padding: 0.25rem 1.5rem; font-size: 0.875rem; font-weight: 700; white-space: nowrap; }
.bonus-box     { background: rgba(255,144,232,0.1); border: 2px solid var(--pink); padding: 0.5rem; margin-bottom: 1rem; text-align: center; font-size: 0.875rem; font-weight: 600; color: var(--pink); }

/* ── Headings ─────────────────────────────────────────────────── */
.section-header  { text-align: center; margin-bottom: 2rem; }
.heading-xl { font-size: clamp(2.5rem,8vw,5rem); line-height: 1.1; font-weight: 900; margin-bottom: 1.5rem; }
.heading-lg { font-size: clamp(2rem,6vw,3rem); font-weight: 900; margin-bottom: 1rem; }
.heading-md { font-size: clamp(1.75rem,5vw,3rem); font-weight: 900; margin-bottom: 0.5rem; }
.heading-dashboard { font-size: 2.25rem; font-weight: 900; margin-bottom: 0.5rem; }
.subtitle    { color: var(--muted-fg); font-size: 1.25rem; max-width: 48rem; margin: 0 auto 2rem; line-height: 1.7; }

/* ── Link helpers ─────────────────────────────────────────────── */
.link-hover-pink:hover { color: var(--pink) !important; }
.link-muted  { font-size: 0.875rem; color: var(--muted-fg); transition: color 0.2s; }
.link-muted:hover { color: var(--pink); }
.link-black  { font-weight: 600; color: var(--black); transition: color 0.2s; }
.link-black:hover { color: var(--pink); }

/* ── Highlight cards ──────────────────────────────────────────── */
.highlight-card   { padding: 1rem; border: 2px solid black; }
.highlight-yellow { background: #FDFD96; }
.highlight-pink   { background: var(--pink); }
.highlight-teal   { background: #DAF5F0; }

/* ── Server online banner ─────────────────────────────────────── */
.server-online-banner { background: #f0fdf4; border: 2px solid #22c55e !important; }

/* ── Footer simple (dashboard pages / legal) ─────────────────── */
.footer-simple { border-top: 4px solid var(--black); background: rgba(219,245,240,1); padding: 1.5rem 1rem; }
.footer-simple-inner { max-width: 72rem; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.footer-legal-links { display: flex; gap: 1rem; }

/* ── Animation delay utilities ──────────────────────────────── */
.delay-1  { animation-delay: 0.1s; }
.delay-15 { animation-delay: 0.15s; }
.delay-2  { animation-delay: 0.2s; }
.delay-25 { animation-delay: 0.25s; }
.delay-3  { animation-delay: 0.3s; }
.delay-4  { animation-delay: 0.4s; }
.delay-45 { animation-delay: 0.45s; }
.delay-5  { animation-delay: 0.5s; }
.delay-6  { animation-delay: 0.6s; }
.delay-7  { animation-delay: 0.7s; }
.delay-75 { animation-delay: 0.75s; }
.delay-8  { animation-delay: 0.8s; }
.delay-9  { animation-delay: 0.9s; }
.delay-10 { animation-delay: 1s; }
.delay-105 { animation-delay: 1.05s; }

/* ── Additional utilities ────────────────────────────────────── */
.justify-center  { justify-content: center; }
.cursor-pointer  { cursor: pointer; }
.self-start      { align-self: flex-start; }
.flex-item       { flex: 1; min-width: 200px; }
.input-sm        { width: 12rem !important; }
.input-disabled  { opacity: 0.6; }
.container-48    { max-width: 48rem; margin: 0 auto; }
.container-56    { max-width: 56rem; margin: 0 auto; }
.pt-4            { padding-top: 1rem; }
.list-none       { list-style: none; margin: 0; padding: 0; }
.text-green      { color: #16a34a; }
.rank-number     { font-size: 1.75rem; font-weight: 900; }
.badge-rounded   { border-radius: 999px; }
.popular-badge-dark { background: black !important; color: white !important; }

/* ── Edit profile panel ──────────────────────────────────────── */
.edit-form-panel { display: none; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 2px solid var(--black); }
.edit-form-panel.open { display: block; }
.badge-icon       { font-size: 2.5rem; }
.badge-item-title { font-size: 1.05rem; margin-bottom: 0.25rem; }
.heading-2xl      { font-size: 2rem; }

/* ── Toggle row (apply/forgot password step views) ───────────── */
.step-view        { display: none; }
.step-view.active { display: block; }