/* ============================================
   DIAMONDSPARK.IN  -  Light Design System
   White · Saffron · Gold · Maroon
   Poppins + Cormorant Garamond + Inter
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&family=Cormorant+Garamond:wght@600;700&family=Inter:wght@300;400;500;600&family=Noto+Sans+Devanagari:wght@400;600&display=swap');

:root {
  /* Backgrounds */
  --void:       #FAFAFA;
  --deep:       #F2F2F2;
  --panel:      #FFFFFF;
  --panel2:     #F8F6F4;
  /* Borders */
  --border:     rgba(255,107,26,0.12);
  --border2:    rgba(255,107,26,0.2);
  /* Brand */
  --gold:       #E8960A;
  --gold2:      #FFB830;
  --gold-dim:   #B8720A;
  --blue:       #1565C0;
  --blue2:      #1E88E5;
  --blue-dim:   #0D47A1;
  --diamond:    #1565C0;
  --silver:     #546E7A;
  --bronze:     #BF6B2A;
  --saffron:    #FF6B1A;
  --orange:     #FF9933;
  --maroon:     #8B1A34;
  /* Text */
  --white:      #1A0806;
  --muted:      #6B5850;
  --subtle:     #9E8880;
  /* Status */
  --success:    #2E7D32;
  --danger:     #C62828;
  --warning:    #E65100;
  /* Glows → softer shadows for light */
  --glow-gold:  rgba(232,150,10,0.15);
  --glow-blue:  rgba(21,101,192,0.12);
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:17px; }
body {
  font-family:'Poppins','Inter',sans-serif;
  background:#FAFAFA;
  color:var(--white);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display { font-family:'Cormorant Garamond','Poppins',serif; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:#FAFAFA; }
::-webkit-scrollbar-thumb { background:linear-gradient(var(--saffron),var(--maroon)); border-radius:3px; }

/* ── STARFIELD CANVAS (hidden on light theme) ── */
#starfield { position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0; }

/* ── FLOATING DIAMONDS ── */
.float-diamond {
  position:fixed; pointer-events:none; z-index:1;
  font-size:1.23rem; opacity:0;
  animation:floatUp 9s ease-in infinite;
}
@keyframes floatUp {
  0%   { transform:translateY(100vh) rotate(0deg);   opacity:0; }
  10%  { opacity:0.15; }
  90%  { opacity:0.04; }
  100% { transform:translateY(-120px) rotate(720deg); opacity:0; }
}

/* ── UTILITY ── */
.hidden   { display:none !important; }
.flex     { display:flex; }
.flex-col { flex-direction:column; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.gap-1 { gap:0.5rem; } .gap-2 { gap:1rem; } .gap-3 { gap:1.5rem; }
.text-gold   { color:var(--gold); }
.text-blue   { color:var(--blue); }
.text-muted  { color:var(--muted); }
.text-center { text-align:center; }
.text-sm     { font-size:0.94rem; }
.font-600    { font-weight:600; }
.font-700    { font-weight:700; }
.mt-2 { margin-top:1rem; }
.w-full { width:100%; }

/* ── PAGE SYSTEM ── */
.page { display:none; position:relative; z-index:1; min-height:100vh; }
.page.active { display:block; }

/* ── NAVBAR ── */
#navbar {
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 2rem; height:64px;
  background:rgba(255,255,255,0.94);
  backdrop-filter:blur(24px) saturate(1.8);
  border-bottom:1px solid rgba(255,107,26,0.15);
  box-shadow:0 1px 20px rgba(0,0,0,0.06);
}
.nav-logo {
  font-family:'Poppins',serif; font-size:1.43rem; font-weight:900;
  background:linear-gradient(130deg,var(--gold),var(--saffron));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; cursor:pointer; letter-spacing:-0.3px;
}
.nav-logo .gem { color:var(--gold); -webkit-text-fill-color:var(--gold); }
.nav-links { display:flex; align-items:center; gap:1.2rem; }
.nav-links a {
  color:var(--muted); font-size:0.99rem; font-weight:600;
  transition:color .2s;
}
.nav-links a:hover { color:var(--saffron); }
.nav-wallet {
  display:flex; align-items:center; gap:6px;
  background:rgba(255,107,26,0.08); border:1px solid rgba(255,107,26,0.2);
  border-radius:50px; padding:6px 16px;
  font-size:0.94rem; font-weight:700; cursor:pointer;
  color:var(--white); transition:background .2s;
}
.nav-wallet:hover { background:rgba(255,107,26,0.14); }
.nav-avatar {
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg,var(--saffron),var(--maroon));
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1.01rem; color:#fff; cursor:pointer;
  box-shadow:0 2px 10px rgba(255,107,26,0.3);
}
.mobile-nav-toggle {
  display:none; background:none; border:none;
  font-size:1.46rem; cursor:pointer; color:var(--muted);
}

/* ── LANG TOGGLE ── */
.lang-toggle {
  display:flex; border:1.5px solid rgba(255,107,26,0.22);
  border-radius:50px; overflow:hidden;
  background:rgba(255,107,26,0.05);
}
.lang-btn {
  padding:5px 12px; border:none; font-size:13px; font-weight:700;
  cursor:pointer; background:transparent; color:var(--muted);
  font-family:inherit; transition:all .2s;
}
.lang-btn.active {
  background:linear-gradient(135deg,var(--saffron),var(--maroon));
  color:#fff;
}

/* ── MOBILE MENU ── */
.mobile-menu {
  position:fixed; top:64px; left:0; right:0; z-index:499;
  background:#fff; border-bottom:1px solid var(--border);
  padding:1rem; display:none; flex-direction:column; gap:0.5rem;
  box-shadow:0 8px 32px rgba(0,0,0,0.1);
}
.mobile-menu.open { display:flex; }
.mobile-menu a {
  padding:0.75rem 1rem; border-radius:12px;
  font-weight:600; color:var(--white);
  transition:background .2s;
}
.mobile-menu a:hover { background:rgba(255,107,26,0.08); color:var(--saffron); }

/* ── NOTIFICATIONS ── */
.notif-panel {
  position:fixed; top:64px; right:1.5rem; z-index:600;
  width:320px; background:#fff; border:1px solid var(--border);
  border-radius:18px; box-shadow:0 16px 48px rgba(0,0,0,0.12);
  transform:translateY(-10px) scale(0.97); opacity:0;
  pointer-events:none; transition:all .22s;
}
.notif-panel.open { transform:translateY(0) scale(1); opacity:1; pointer-events:all; }
.notif-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:1rem 1.2rem; border-bottom:1px solid var(--border);
}
.notif-item { padding:0.9rem 1.2rem; border-bottom:1px solid rgba(255,107,26,0.08); font-size:0.94rem; }

/* ── TOAST ── */
#toast-container { position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999; display:flex; flex-direction:column; gap:0.6rem; }
.toast {
  padding:0.85rem 1.4rem; border-radius:14px; font-size:0.99rem; font-weight:600;
  color:#fff; min-width:220px; max-width:340px;
  box-shadow:0 8px 32px rgba(0,0,0,0.14);
  animation:toastIn .3s ease;
}
.toast-success { background:linear-gradient(135deg,#2E7D32,#43A047); }
.toast-error   { background:linear-gradient(135deg,#C62828,#E53935); }
.toast-info    { background:linear-gradient(135deg,#1565C0,#1E88E5); }
@keyframes toastIn { from { opacity:0; transform:translateX(30px); } to { opacity:1; transform:none; } }

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:0.6rem 1.4rem; border-radius:50px; border:none;
  font-family:inherit; font-weight:700; cursor:pointer;
  transition:transform .2s, box-shadow .2s, background .2s;
  font-size:1.01rem;
}
.btn:hover { transform:translateY(-1px); }
.btn-sm  { padding:0.45rem 1rem; font-size:0.9rem; }
.btn-lg  { padding:0.85rem 2rem; font-size:1.12rem; }

.btn-gold {
  background:linear-gradient(135deg,var(--gold2),var(--gold));
  color:#fff;
  box-shadow:0 4px 16px rgba(232,150,10,0.3);
}
.btn-gold:hover { box-shadow:0 8px 28px rgba(232,150,10,0.45); }

.btn-blue {
  background:linear-gradient(135deg,var(--blue2),var(--blue));
  color:#fff;
  box-shadow:0 4px 16px rgba(21,101,192,0.25);
}
.btn-blue:hover { box-shadow:0 8px 28px rgba(21,101,192,0.38); }

.btn-ghost {
  background:rgba(255,255,255,0.8); color:var(--white);
  border:1.5px solid rgba(255,107,26,0.22);
  backdrop-filter:blur(12px);
}
.btn-ghost:hover { background:rgba(255,107,26,0.07); border-color:var(--saffron); }

.btn-danger {
  background:linear-gradient(135deg,#C62828,#E53935);
  color:#fff;
}

/* ── CARDS ── */
.card {
  background:#fff;
  border:1px solid rgba(255,107,26,0.1);
  border-radius:18px;
  padding:1.4rem;
  box-shadow:0 2px 16px rgba(0,0,0,0.05);
}
.card-glow {
  box-shadow:0 4px 24px rgba(255,107,26,0.1), 0 1px 0 rgba(255,255,255,0.9) inset;
}

/* ── DIVIDERS ── */
.divider {
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,107,26,0.15),rgba(139,26,52,0.1),transparent);
  margin:0;
}

/* ── HOME PAGE HERO SECTION WRAPPER ── */
.hero {
  padding-top:64px;
  background:#FAFAFA;
  min-height:100vh;
}
.hero-inner {
  display:grid; grid-template-columns:1fr 1fr;
  align-items:center; gap:2rem;
  max-width:1200px; margin:0 auto;
  padding:4rem 2rem 3rem;
}
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.87rem; font-weight:700; letter-spacing:3px;
  text-transform:uppercase; color:var(--saffron);
  margin-bottom:1.2rem;
}
.hero h1 {
  font-size:clamp(2.4rem,5vw,4rem); font-weight:900;
  line-height:1.05; letter-spacing:-1.5px; margin-bottom:1.2rem;
  color:#1A0806;
}
.gradient-text {
  background:linear-gradient(120deg,var(--orange),var(--gold2),var(--saffron));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-sub { font-size:1.12rem; color:var(--muted); line-height:1.8; margin-bottom:2rem; }
.hero-btns { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:2.5rem; }
.hero-stats {
  display:flex; gap:2rem; flex-wrap:wrap;
}
.hstat .n { font-size:1.68rem; font-weight:900; color:var(--gold); }
.hstat .l { font-size:0.83rem; color:var(--muted); font-weight:600; margin-top:2px; }

/* ── HERO VISUAL CARDS ── */
.hero-visual {
  position:relative; height:480px;
}
.hv-card {
  position:absolute; border-radius:20px; overflow:hidden;
  background:#fff; box-shadow:0 12px 40px rgba(0,0,0,0.1);
  border:1px solid rgba(255,107,26,0.1);
  transition:transform .3s;
}
.hv-card:hover { transform:translateY(-6px); }
.hvc1 { width:175px; left:0; top:10%; z-index:3; }
.hvc2 { width:155px; left:140px; top:0; z-index:2; }
.hvc3 { width:145px; right:10%; top:20%; z-index:2; }
.hvc4 { width:130px; right:0; top:55%; z-index:3; }
.hv-img {
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg,#FFF5EC,#FFE0C0); position:relative;
}
.hv-img-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(26,8,6,0.7) 0%,transparent 50%);
}
.hv-info { position:absolute; bottom:0; left:0; right:0; padding:0.75rem; }
.hv-name { font-size:0.94rem; font-weight:700; color:#fff; margin-bottom:4px; }
.hv-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.hv-live-badge {
  position:absolute; bottom:8%; left:50%; transform:translateX(-50%);
  background:rgba(255,255,255,0.92); border:1px solid rgba(255,107,26,0.2);
  border-radius:14px; padding:0.6rem 1.2rem; text-align:center;
  box-shadow:0 8px 24px rgba(0,0,0,0.1); z-index:4; white-space:nowrap;
}
.hv-live-badge .big { font-size:1.57rem; font-weight:900; color:var(--saffron); }
.hv-live-badge .small { font-size:0.78rem; color:var(--muted); }

/* ── BADGES ── */
.live-badge {
  display:inline-flex; align-items:center; gap:4px;
  background:#EF4444; color:#fff;
  font-size:0.69rem; font-weight:800; letter-spacing:0.5px;
  padding:3px 8px; border-radius:20px; text-transform:uppercase;
}
.online-dot {
  width:7px; height:7px; background:var(--success);
  border-radius:50%; display:inline-block;
  box-shadow:0 0 0 2px rgba(46,125,50,0.2);
}

/* ── RANK BADGES ── */
.rank-badge {
  font-size:0.69rem; font-weight:700; padding:3px 8px;
  border-radius:20px; display:inline-block;
}
.rank-diamond { background:rgba(21,101,192,0.12); color:var(--blue); border:1px solid rgba(21,101,192,0.2); }
.rank-gold    { background:rgba(232,150,10,0.12); color:var(--gold); border:1px solid rgba(232,150,10,0.2); }
.rank-silver  { background:rgba(84,110,122,0.12); color:var(--silver); border:1px solid rgba(84,110,122,0.2); }
.rank-bronze  { background:rgba(191,107,42,0.12); color:var(--bronze); border:1px solid rgba(191,107,42,0.2); }
.rank-beginner{ background:rgba(107,88,80,0.1); color:var(--muted); border:1px solid rgba(107,88,80,0.15); }

/* ── SECTION ── */
.section {
  background:#FAFAFA;
  padding:4rem 0;
}
.section-inner {
  max-width:1200px; margin:0 auto; padding:0 2rem;
}
.section-header { margin-bottom:2.5rem; }
.eyebrow {
  font-size:0.81rem; font-weight:800; letter-spacing:3.5px;
  text-transform:uppercase; color:var(--saffron); margin-bottom:0.6rem;
  display:flex; align-items:center; gap:8px;
}
.eyebrow::before {
  content:''; width:24px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--saffron),var(--gold));
}
.section h2 {
  font-size:clamp(1.8rem,3.5vw,2.8rem); font-weight:800;
  color:#1A0806; letter-spacing:-0.5px;
}

/* ── SEARCH ── */
.search-wrap {
  position:relative; display:flex; align-items:center;
}
.search-icon {
  position:absolute; left:1rem; font-size:1.12rem; color:var(--muted);
}
.search-input {
  width:100%; padding:0.85rem 1rem 0.85rem 2.8rem;
  border:1.5px solid rgba(255,107,26,0.18);
  border-radius:50px; background:#fff;
  font-family:inherit; font-size:1.01rem; color:var(--white);
  outline:none; transition:border-color .2s, box-shadow .2s;
}
.search-input:focus {
  border-color:var(--saffron);
  box-shadow:0 0 0 3px rgba(255,107,26,0.1);
}
.search-input::placeholder { color:var(--subtle); }

/* ── FILTER CHIPS ── */
.filter-row { display:flex; gap:0.5rem; flex-wrap:wrap; }
.filter-chip {
  padding:0.45rem 1rem; border-radius:50px;
  border:1.5px solid rgba(255,107,26,0.18);
  background:#fff; color:var(--muted);
  font-size:0.9rem; font-weight:600; cursor:pointer;
  transition:all .2s; font-family:inherit;
}
.filter-chip:hover { border-color:var(--saffron); color:var(--saffron); }
.filter-chip.active {
  background:linear-gradient(135deg,var(--saffron),var(--maroon));
  border-color:transparent; color:#fff;
}

/* ── MODEL GRID ── */
.model-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:1.2rem;
}
.model-card {
  background:#fff; border:1px solid rgba(255,107,26,0.1);
  border-radius:18px; overflow:hidden; cursor:pointer;
  transition:transform .25s, box-shadow .25s;
  box-shadow:0 2px 12px rgba(0,0,0,0.06);
}
.model-card:hover { transform:translateY(-6px); box-shadow:0 16px 40px rgba(255,107,26,0.15); }
.model-card-img {
  height:180px; background:linear-gradient(145deg,#FFF5EC,#FFE0C0);
  display:flex; align-items:center; justify-content:center;
  font-size:3.36rem; position:relative;
  overflow:hidden;
}
.model-card-img img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center top;
}
.model-card-img-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(26,8,6,0.6) 0%,transparent 50%);
}
.model-card-info { padding:1rem; }
.model-card-name { font-size:1.06rem; font-weight:800; margin-bottom:0.4rem; color:#1A0806; }
.model-card-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:0.85rem; }
.model-card-actions { display:flex; gap:0.5rem; margin-top:0.8rem; }

/* ── HOW IT WORKS ── */
.step-card {
  background:#fff; border:1px solid rgba(255,107,26,0.1);
  border-radius:20px; padding:2rem 1.5rem; text-align:center;
  box-shadow:0 2px 16px rgba(0,0,0,0.05);
  transition:transform .25s, box-shadow .25s; position:relative;
}
.step-card:hover { transform:translateY(-6px); box-shadow:0 16px 40px rgba(255,107,26,0.12); }
.step-num {
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(135deg,var(--saffron),var(--maroon));
  color:#fff; font-size:1.23rem; font-weight:900;
  margin-bottom:1.2rem;
  box-shadow:0 4px 16px rgba(255,107,26,0.35);
}

/* ── TOKEN CARDS ── */
.token-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1.2rem;
  margin-top:2rem;
}
.token-card {
  background:#fff; border:2px solid rgba(255,107,26,0.15);
  border-radius:20px; padding:1.8rem 1.2rem; text-align:center;
  cursor:pointer; transition:all .25s;
  box-shadow:0 2px 16px rgba(0,0,0,0.05);
}
.token-card:hover { border-color:var(--saffron); transform:translateY(-4px); box-shadow:0 12px 32px rgba(255,107,26,0.15); }
.token-card.popular {
  border-color:var(--gold); background:linear-gradient(145deg,#FFFBF0,#FFF5DC);
  box-shadow:0 4px 24px rgba(232,150,10,0.2);
}
.token-card.selected { border-color:var(--saffron); background:rgba(255,107,26,0.05); }
.token-amount { font-size:2.69rem; font-weight:900; color:var(--gold); }
.token-name   { font-size:0.92rem; font-weight:700; color:var(--muted); margin:0.3rem 0; text-transform:uppercase; letter-spacing:1px; }
.token-price  { font-size:1.57rem; font-weight:800; color:var(--saffron); margin:0.4rem 0; }
.token-desc   { font-size:0.87rem; color:var(--muted); }
.popular-badge {
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg,var(--gold2),var(--gold));
  color:#fff; font-size:0.73rem; font-weight:800; letter-spacing:1px;
  padding:3px 12px; border-radius:20px; text-transform:uppercase;
}
.token-card { position:relative; }

/* ── AUTH PAGE ── */
.auth-page {
  min-height:100vh; background:#FAFAFA;
  display:flex; align-items:center; justify-content:center;
  padding:80px 1.5rem 2rem;
}
.auth-box {
  width:100%; max-width:440px;
  background:#fff; border:1px solid rgba(255,107,26,0.12);
  border-radius:24px; padding:2.5rem;
  box-shadow:0 8px 48px rgba(0,0,0,0.08);
}
.auth-role-tabs {
  display:flex; gap:0.4rem; margin-bottom:1.4rem;
  background:rgba(255,107,26,0.06);
  border-radius:50px; padding:4px;
}
.auth-role-tab {
  flex:1; padding:0.6rem; border:none; border-radius:50px;
  font-family:inherit; font-size:1.06rem; font-weight:700;
  cursor:pointer; background:transparent; color:var(--muted);
  transition:all .2s;
}
.auth-role-tab.active {
  background:linear-gradient(135deg,var(--saffron),var(--maroon));
  color:#fff; box-shadow:0 2px 10px rgba(255,107,26,0.35);
}
.auth-tabs {
  display:flex; border-bottom:2px solid rgba(255,107,26,0.1);
  margin-bottom:1.4rem; gap:0;
}
.auth-tab {
  flex:1; padding:0.7rem; border:none; border-bottom:2px solid transparent;
  font-family:inherit; font-size:1.14rem; font-weight:700;
  cursor:pointer; background:transparent; color:var(--muted);
  margin-bottom:-2px; transition:all .2s;
}
.auth-tab.active { color:var(--saffron); border-bottom-color:var(--saffron); }

/* ── FORMS ── */
.form-group { margin-bottom:1.1rem; }
.form-group label { display:block; font-size:1.03rem; font-weight:700; margin-bottom:0.4rem; color:var(--muted); }
.form-control {
  width:100%; padding:0.75rem 1rem;
  border:1.5px solid rgba(255,107,26,0.18);
  border-radius:12px; background:#fff;
  font-family:inherit; font-size:1.14rem; color:var(--white);
  outline:none; transition:border-color .2s, box-shadow .2s;
}
.form-control:focus {
  border-color:var(--saffron);
  box-shadow:0 0 0 3px rgba(255,107,26,0.1);
}
.form-control::placeholder { color:var(--subtle); }
textarea.form-control { resize:vertical; min-height:80px; }
select.form-control { appearance:none; cursor:pointer; }

/* ── DASHBOARD ── */
.dashboard {
  max-width:1280px; margin:0 auto;
  padding:72px 1.2rem 3rem;
  min-height:100vh; background:#FAFAFA;
}
.dashboard-grid {
  display:grid; grid-template-columns:220px 1fr; gap:1.5rem;
  margin-top:1.5rem; align-items:start;
}
.dashboard-content { min-width:0; }
.dashboard-panel { display:none; }
.dashboard-panel.active { display:block; }

/* ── STATS GRID ── */
.stats-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(175px,1fr));
  gap:1rem; margin-bottom:1.5rem;
}
.stat-card {
  background:#fff; border:1px solid rgba(255,107,26,0.1);
  border-radius:18px; padding:1.4rem;
  box-shadow:0 2px 12px rgba(0,0,0,0.05);
  transition:transform .25s, box-shadow .25s;
}
.stat-card:hover { transform:translateY(-4px); box-shadow:0 10px 28px rgba(255,107,26,0.1); }
.stat-label { font-size:0.87rem; color:var(--muted); font-weight:600; margin-bottom:0.6rem; }
.stat-value { font-size:2.24rem; font-weight:900; color:#1A0806; line-height:1; }
.stat-sub   { font-size:0.81rem; color:var(--subtle); margin-top:0.3rem; }

/* ── SIDEBAR ── */
.sidebar { position:sticky; top:80px; align-self:start; }
.sidebar-menu { display:flex; flex-direction:column; gap:0.25rem; }
.sidebar-item {
  display:flex; align-items:center; gap:0.7rem;
  padding:0.7rem 1rem; border-radius:12px; border:none;
  background:transparent; color:var(--muted);
  font-family:inherit; font-size:0.97rem; font-weight:600;
  cursor:pointer; transition:all .2s; text-align:left; width:100%;
}
.sidebar-item:hover { background:rgba(255,107,26,0.07); color:var(--saffron); }
.sidebar-item.active {
  background:linear-gradient(135deg,rgba(255,107,26,0.12),rgba(139,26,52,0.08));
  color:var(--saffron);
  border-left:3px solid var(--saffron);
}
.sidebar-item .icon { font-size:1.23rem; }

/* ── TABLES ── */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
thead tr { background:rgba(255,107,26,0.05); border-bottom:2px solid rgba(255,107,26,0.1); }
th { padding:0.75rem 1rem; text-align:left; font-size:0.87rem; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; }
td { padding:0.85rem 1rem; border-bottom:1px solid rgba(255,107,26,0.07); font-size:0.96rem; color:var(--white); }
tr:last-child td { border-bottom:none; }
tr:hover td { background:rgba(255,107,26,0.03); }

/* ── WALLET CARD ── */
.wallet-balance-card {
  background:linear-gradient(135deg,var(--saffron),var(--maroon));
  border-radius:20px; padding:2rem; color:#fff; margin-bottom:1.2rem;
  box-shadow:0 8px 32px rgba(255,107,26,0.3);
}
.wallet-balance-label { font-size:0.92rem; font-weight:700; opacity:0.85; margin-bottom:0.5rem; }
.wallet-balance-amount { font-size:3.58rem; font-weight:900; line-height:1; margin-bottom:0.4rem; }

/* ── PROGRESS BAR ── */
.progress-bar {
  height:8px; background:rgba(255,107,26,0.1);
  border-radius:4px; overflow:hidden;
}
.progress-fill {
  height:100%;
  background:linear-gradient(90deg,var(--saffron),var(--gold));
  border-radius:4px; transition:width 1s ease;
}

/* ── ADMIN ── */
.admin-layout { display:grid; grid-template-columns:220px 1fr; min-height:100vh; }
.admin-sidebar {
  background:#fff; border-right:1px solid rgba(255,107,26,0.1);
  padding:80px 1rem 2rem; position:sticky; top:0; height:100vh;
  overflow-y:auto;
}
.admin-main { background:#FAFAFA; padding:80px 2rem 2rem; min-width:0; }
.admin-nav-title { font-size:0.76rem; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--subtle); padding:0.5rem 0.5rem 0.3rem; margin-top:0.8rem; }
.admin-panel { display:none; }
.admin-panel.active { display:block; }

/* ── CHAT ── */
.chat-container {
  display:grid; grid-template-columns:280px 1fr;
  background:#fff; border:1px solid var(--border);
  border-radius:18px; overflow:hidden;
  box-shadow:0 4px 24px rgba(0,0,0,0.06);
  height:calc(100vh - 160px); min-height:400px;
}
.chat-list { border-right:1px solid var(--border); overflow-y:auto; background:#FAFAFA; }
.chat-list-header { padding:1rem 1.2rem; font-weight:800; font-size:1.01rem; border-bottom:1px solid var(--border); color:#1A0806; }
.chat-item { padding:0.85rem 1.2rem; cursor:pointer; transition:background .15s; border-bottom:1px solid rgba(255,107,26,0.07); }
.chat-item:hover { background:rgba(255,107,26,0.05); }
.chat-item.active { background:rgba(255,107,26,0.08); }
.chat-main { display:flex; flex-direction:column; }
.chat-header { padding:0.85rem 1.2rem; border-bottom:1px solid var(--border); background:#fff; }
.chat-messages { flex:1; overflow-y:auto; padding:1.2rem; display:flex; flex-direction:column; gap:0.6rem; background:#FAFAFA; }
.msg { max-width:72%; padding:0.7rem 1rem; border-radius:16px; font-size:1.1rem; line-height:1.55; word-break:break-word; }
.msg-in  { background:#fff; border:1px solid rgba(255,107,26,0.1); color:#1A0806; align-self:flex-start; border-radius:16px 16px 16px 4px; }
.msg-out { background:linear-gradient(135deg,var(--saffron),var(--maroon)); color:#fff; align-self:flex-end; border-radius:16px 16px 4px 16px; }
.chat-input-area { display:flex; gap:0.5rem; padding:0.85rem; border-top:1px solid var(--border); background:#fff; }
.chat-input { flex:1; padding:0.65rem 1rem; border:1.5px solid rgba(255,107,26,0.18); border-radius:50px; font-family:inherit; font-size:1.1rem; color:#1A0806; outline:none; resize:none; background:#fff; }
.chat-input:focus { border-color:var(--saffron); }
.violation-warning { background:rgba(198,40,40,0.08); border-left:3px solid var(--danger); padding:0.5rem 1rem; font-size:0.87rem; color:var(--danger); display:none; }

/* ── VIDEO CALL ── */
.call-layout { display:grid; grid-template-columns:1fr 300px; height:100vh; min-height:100vh; background:#111; overflow:hidden; }
.call-main { background:#111; position:relative; }
.call-sidebar { background:#1a1a1a; border-left:1px solid rgba(255,255,255,0.1); display:flex; flex-direction:column; overflow:hidden; color:#fff; }

/* ── MODALS ── */
.modal-overlay {
  position:fixed; inset:0; z-index:800;
  background:rgba(26,8,6,0.5); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center;
  padding:1rem;
}
.modal-overlay.open { display:flex; }
#modal-gift-shop { z-index: 1500; }
#incoming-call-alert { z-index: 2000; }
@keyframes pulseRing {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.75; }
}
.modal {
  background:#fff; border-radius:24px;
  padding:2rem; width:100%; max-width:420px;
  box-shadow:0 20px 60px rgba(0,0,0,0.15);
  border:1px solid rgba(255,107,26,0.12);
}
.modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.4rem; }
.modal-close { background:none; border:none; font-size:1.34rem; cursor:pointer; color:var(--muted); padding:4px; }
.modal-close:hover { color:var(--saffron); }

/* ── PROFILE PAGE (model profile) ── */
.profile-page { max-width:800px; margin:0 auto; padding:80px 1.5rem 3rem; min-height:100vh; }
.profile-header { display:flex; gap:1.5rem; align-items:flex-start; margin-bottom:2rem; flex-wrap:wrap; }
.profile-avatar { width:100px; height:100px; border-radius:50%; object-fit:cover; background:linear-gradient(145deg,#FFF5EC,#FFE0C0); display:flex; align-items:center; justify-content:center; font-size:3.36rem; flex-shrink:0; border:3px solid rgba(255,107,26,0.2); }
.profile-info { flex:1; min-width:200px; }
.profile-name { font-size:2.02rem; font-weight:900; color:#1A0806; margin-bottom:0.4rem; }
.profile-actions { display:flex; gap:0.6rem; flex-wrap:wrap; margin-top:1rem; }

/* ── MODEL PROFILE (buddy detail page) ── */
.model-profile-hero {
  display:flex; gap:1.5rem; align-items:flex-start; flex-wrap:wrap;
  max-width:1200px; margin:0 auto; padding:96px 1.5rem 0;
}
.model-profile-img {
  width:110px; height:110px; border-radius:50%; overflow:hidden; flex-shrink:0;
  background:linear-gradient(145deg,#FFF5EC,#FFE0C0);
  display:flex; align-items:center; justify-content:center;
  font-size:3rem; border:3px solid rgba(255,107,26,0.2);
}
.model-profile-img img { width:100%; height:100%; object-fit:cover; display:block; }
.model-profile-info { flex:1; min-width:200px; padding-top:0.3rem; }
.model-profile-name { font-size:1.7rem; font-weight:900; color:#1A0806; margin-bottom:0.2rem; }
.model-profile-stats { display:flex; gap:1.8rem; flex-wrap:wrap; }
.model-profile-stat { text-align:center; }
.model-profile-stat .val { font-size:1.2rem; font-weight:800; color:var(--saffron); }
.model-profile-stat .lbl { font-size:0.85rem; color:var(--muted); margin-top:2px; }
@media(max-width:768px) {
  .model-profile-hero { padding-top:84px; gap:1rem; }
  .model-profile-img { width:84px; height:84px; font-size:2.2rem; }
  .model-profile-name { font-size:1.4rem; }
  .model-profile-stats { gap:1.1rem; }
  .model-profile-grid { grid-template-columns:1fr !important; }
}

/* ── REVEAL ANIMATION ── */
.reveal { opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity:1; transform:none; }

/* ── LANG SPECIFIC ── */
.lang-hi { font-family:'Noto Sans Devanagari','Poppins',sans-serif; }

/* ── GLOW ORBS (kept but lighter) ── */
.glow-orb { position:absolute; border-radius:50%; pointer-events:none; }
.glow-gold { background:radial-gradient(circle,rgba(232,150,10,0.08),transparent 65%); }
.glow-blue { background:radial-gradient(circle,rgba(21,101,192,0.07),transparent 65%); }
.breathe     { animation:breathe 6s ease-in-out infinite; }
.breathe-alt { animation:breathe 6s ease-in-out infinite 3s; }
@keyframes breathe { 0%,100% { transform:scale(1); opacity:.7; } 50% { transform:scale(1.08); opacity:1; } }

/* ── GEM GLOW ── */
@keyframes gemGlow {
  0%,100% { filter:drop-shadow(0 0 6px rgba(255,107,26,0.5)); }
  50%      { filter:drop-shadow(0 0 14px rgba(232,150,10,0.7)); }
}

/* ── FOOTER ── */
footer {
  background:#fff; border-top:1px solid rgba(255,107,26,0.12);
  padding:2.5rem; text-align:center;
}

/* ── RESPONSIVE ── */
@media (max-width:960px) {
  .hero-inner { grid-template-columns:1fr; }
  .hero-visual { display:none; }
  .dashboard-grid { grid-template-columns:1fr; }
  .admin-layout { grid-template-columns:1fr; }
  .admin-sidebar { position:static; height:auto; padding:80px 1rem 1rem; }
  .chat-container { grid-template-columns:1fr; }
  .chat-list { max-height:220px; }
  .call-layout { grid-template-columns:1fr; grid-template-rows:1fr auto; }

  /* Sidebar becomes horizontal scroll tab bar on mobile */
  .sidebar { position:static; top:auto; }
  .sidebar > .card { padding:0.4rem !important; }
  .sidebar-menu { flex-direction:row !important; overflow-x:auto; gap:0.3rem; padding:0.3rem; scrollbar-width:none; }
  .sidebar-menu::-webkit-scrollbar { display:none; }
  .sidebar-item { flex-shrink:0; padding:0.5rem 0.8rem !important; border-radius:50px !important; font-size:0.87rem !important; white-space:nowrap; border-left:none !important; }
  .sidebar-item.active { border-left:none !important; box-shadow:0 2px 10px rgba(255,107,26,0.25); }
  .sidebar-item .icon { font-size:1.01rem; }

  /* Model grid 2 cols on mobile */
  .model-grid { grid-template-columns:repeat(2,1fr) !important; gap:0.8rem !important; }
  .model-card-img { height:140px; }

  /* Stats 2 cols */
  .stats-grid { grid-template-columns:repeat(2,1fr); }

  /* Admin sidebar horizontal */
  .admin-sidebar { padding:80px 0.8rem 1rem; }
  .admin-nav-title { display:none; }
}
@media (max-width:640px) {
  .mobile-nav-toggle { display:block; }
  .nav-links { display:none; }
  #nav-guest.nav-links,#nav-user.nav-links,#nav-model.nav-links,#nav-admin.nav-links { display:none; }
  #nav-guest.nav-links.mobile-open,#nav-user.nav-links.mobile-open { display:flex; flex-direction:column; position:fixed; top:64px; left:0; right:0; background:#fff; padding:1rem; border-bottom:1px solid var(--border); z-index:498; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .token-grid { grid-template-columns:1fr; }
  .dashboard { padding:76px 1rem 2rem; }
  .section-inner { padding:0 1rem; }
  #navbar { padding:0 1rem; }
}

/* ============================================================
   REVENUE FEATURES  -  Gift Shop, Plans, Events, Ads
============================================================ */

/* ---- STATUS PILLS ---- */
.status-pill {
  display:inline-block; padding:3px 10px; border-radius:20px;
  font-size:0.81rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
}
.status-active    { background:rgba(46,125,50,.12);   color:#2E7D32; }
.status-pending   { background:rgba(232,150,10,.12);  color:#E65100; }
.status-upcoming  { background:rgba(21,101,192,.12);  color:#1565C0; }
.status-live      { background:rgba(198,40,40,.12);   color:#C62828; }
.status-completed { background:rgba(107,88,80,.1);    color:var(--muted); }
.status-cancelled { background:rgba(198,40,40,.08);   color:#C62828; }
.status-rejected  { background:rgba(198,40,40,.08);   color:#C62828; }
.status-expired   { background:rgba(107,88,80,.1);    color:var(--muted); }

/* ---- GIFT SHOP ---- */
.gift-category-label {
  font-size:0.87rem; font-weight:800; letter-spacing:2px; text-transform:uppercase;
  color:var(--saffron); margin:1rem 0 .5rem;
}
.gift-row { display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:.5rem; }
.gift-item {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:.8rem .9rem; border-radius:16px; cursor:pointer;
  border:2px solid rgba(255,107,26,.12); background:#fff;
  transition:all .22s; min-width:80px;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.gift-item:hover { border-color:var(--saffron); transform:translateY(-3px); box-shadow:0 8px 20px rgba(255,107,26,.15); }
.gift-item.gift-selected { border-color:var(--saffron); background:rgba(255,107,26,.06); box-shadow:0 4px 16px rgba(255,107,26,.2); }
.gift-item.gift-locked { opacity:.45; cursor:not-allowed; }
.gift-emoji { font-size:2.13rem; }
.gift-name  { font-size:0.81rem; font-weight:700; color:var(--white); }
.gift-price { font-size:0.76rem; color:var(--gold); font-weight:700; }

/* Gift animation overlay */
.gift-animation-overlay {
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
}
.gift-anim-inner {
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  animation:giftPop 3s ease forwards;
}
.gift-anim-emoji { font-size:6.72rem; }
.gift-anim-name  { font-size:1.57rem; font-weight:900; color:var(--saffron); background:#fff; padding:.4rem 1.4rem; border-radius:50px; box-shadow:0 4px 20px rgba(0,0,0,.12); }
@keyframes giftPop {
  0%   { opacity:0; transform:scale(.5) translateY(60px); }
  20%  { opacity:1; transform:scale(1.1) translateY(0); }
  70%  { opacity:1; transform:scale(1) translateY(-20px); }
  100% { opacity:0; transform:scale(.8) translateY(-80px); }
}

/* ---- BUDDY SUBSCRIPTION PLANS ---- */
.plan-current-banner {
  display:flex; justify-content:space-between; align-items:center;
  background:linear-gradient(135deg,rgba(255,107,26,.08),rgba(139,26,52,.06));
  border:1px solid rgba(255,107,26,.18); border-radius:16px;
  padding:1.2rem 1.5rem; margin-bottom:1.5rem;
}
.plan-current-label { font-size:0.84rem; color:var(--muted); font-weight:600; margin-bottom:3px; }
.plan-current-name  { font-size:1.34rem; font-weight:900; color:var(--white); }
.plan-expires       { font-size:0.83rem; color:var(--muted); margin-top:3px; }
.plan-badge { padding:5px 14px; border-radius:20px; font-size:0.87rem; font-weight:800; }
.plan-badge-free    { background:rgba(107,88,80,.1); color:var(--muted); }
.plan-badge-bronze  { background:rgba(191,107,42,.14); color:var(--bronze); }
.plan-badge-silver  { background:rgba(84,110,122,.12); color:var(--silver); }
.plan-badge-gold    { background:rgba(232,150,10,.14); color:var(--gold); }
.plan-badge-diamond { background:rgba(21,101,192,.12); color:var(--blue); }

.plan-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem;
}
.plan-card {
  border:2px solid rgba(255,107,26,.12); border-radius:20px;
  padding:1.5rem 1.2rem; background:#fff; position:relative;
  transition:transform .25s,box-shadow .25s;
  box-shadow:0 2px 12px rgba(0,0,0,.05);
}
.plan-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(255,107,26,.12); }
.plan-card.plan-popular { border-color:var(--gold); background:linear-gradient(145deg,#FFFCF5,#FFF9E8); }
.plan-card.plan-current { border-color:var(--saffron); }
.plan-popular-tag {
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg,var(--gold2),var(--gold));
  color:#fff; font-size:0.73rem; font-weight:800; letter-spacing:1px;
  padding:3px 12px; border-radius:20px; text-transform:uppercase; white-space:nowrap;
}
.plan-name  { font-size:0.87rem; font-weight:800; text-transform:uppercase; letter-spacing:1.5px; color:var(--muted); margin-bottom:.5rem; }
.plan-price { font-size:2.02rem; font-weight:900; color:var(--saffron); margin-bottom:1rem; }
.plan-price span { font-size:1.79rem; }
.plan-features { list-style:none; margin-bottom:1.2rem; display:flex; flex-direction:column; gap:.4rem; }
.plan-features li { font-size:0.9rem; color:var(--muted); display:flex; align-items:flex-start; gap:6px; }
.plan-check { color:var(--success); font-weight:900; flex-shrink:0; }

/* ---- EVENTS ---- */
.events-section { background:#FAFAFA; padding:4rem 0; }
.event-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1.2rem; margin-top:1.5rem; }
.event-card {
  background:#fff; border:1px solid rgba(255,107,26,.1); border-radius:18px;
  overflow:hidden; cursor:pointer; transition:transform .25s,box-shadow .25s;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}
.event-card:hover { transform:translateY(-6px); box-shadow:0 16px 40px rgba(255,107,26,.15); }
.event-card-thumb {
  height:140px; background:linear-gradient(145deg,#FFF5EC,#FFE0C0);
  display:flex; align-items:center; justify-content:center; position:relative;
}
.event-live-glow { box-shadow:inset 0 0 0 3px rgba(198,40,40,.5); animation:liveGlow 1.5s ease-in-out infinite; }
@keyframes liveGlow { 0%,100% { box-shadow:inset 0 0 0 3px rgba(198,40,40,.5); } 50% { box-shadow:inset 0 0 0 3px rgba(198,40,40,.9); } }
.event-card-date { position:absolute; bottom:8px; right:8px; background:rgba(26,8,6,.7); color:#fff; font-size:0.76rem; font-weight:700; padding:3px 8px; border-radius:8px; }
.event-card-body { padding:1rem; }
.event-card-title { font-size:1.06rem; font-weight:800; margin-bottom:.3rem; color:var(--white); }
.event-card-meta  { font-size:0.84rem; color:var(--muted); margin-bottom:.7rem; }
.event-card-footer { display:flex; justify-content:space-between; align-items:center; }
.event-price { color:var(--saffron); font-weight:800; font-size:0.99rem; }
.event-seats { font-size:0.81rem; color:var(--muted); }

.event-row-card {
  display:flex; align-items:center; gap:1rem;
  padding:1rem; border:1px solid rgba(255,107,26,.1); border-radius:14px;
  background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.event-thumb { font-size:2.24rem; flex-shrink:0; width:48px; text-align:center; }

/* ---- AD SLOTS ---- */
.ad-slot { min-height:90px; border-radius:12px; overflow:hidden; margin:1.5rem 0; }
.ad-placeholder {
  background:rgba(255,107,26,.04); border:1px dashed rgba(255,107,26,.2);
  border-radius:12px; min-height:90px;
  display:flex; align-items:center; justify-content:center;
}
.ad-placeholder span { font-size:0.81rem; color:var(--subtle); font-weight:600; letter-spacing:1px; text-transform:uppercase; }
.ad-slot-banner { min-height:90px; }
.ad-slot-square { min-height:250px; min-width:300px; }
.ad-slot-sidebar { min-height:600px; }

/* ---- SPONSORSHIP BANNER on profile ---- */
.sponsor-banner {
  display:flex; align-items:center; gap:.8rem;
  background:linear-gradient(135deg,rgba(232,150,10,.08),rgba(255,107,26,.06));
  border:1px solid rgba(232,150,10,.2); border-radius:14px;
  padding:.8rem 1rem; margin:1rem 0; font-size:0.94rem;
}
.sponsor-badge { background:linear-gradient(135deg,var(--gold2),var(--gold)); color:#fff; font-size:0.76rem; font-weight:800; padding:2px 8px; border-radius:10px; }

/* ---- ADMIN PANELS ADDITIONS ---- */
.admin-report-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin-bottom:1.5rem; }

/* ============================================================
   REFERRAL COMMISSION SYSTEM
============================================================ */
.referral-hero-card {
  display:grid; grid-template-columns:1fr auto;
  gap:2rem; align-items:center;
  background:linear-gradient(135deg,rgba(255,107,26,.08),rgba(139,26,52,.06));
  border:1px solid rgba(255,107,26,.18); border-radius:20px;
  padding:1.8rem; margin-bottom:1.2rem;
}
@media(max-width:640px){ .referral-hero-card{ grid-template-columns:1fr; } }

.referral-hero-label { font-size:0.81rem; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:.4rem; }
.referral-code-display {
  font-size:2.46rem; font-weight:900; letter-spacing:6px;
  color:var(--saffron); font-family:'Poppins',monospace;
  margin-bottom:.8rem;
  filter:drop-shadow(2px 3px 0 rgba(200,80,10,.18));
}
.referral-link-row { display:flex; gap:.5rem; margin-bottom:1rem; }
.referral-link-input {
  flex:1; padding:.55rem 1rem; border:1.5px solid rgba(255,107,26,.2);
  border-radius:50px; font-size:0.87rem; color:var(--muted);
  background:#fff; outline:none; font-family:inherit;
}
.referral-how {
  font-size:0.9rem; color:var(--muted); line-height:1.7;
  background:rgba(255,255,255,.6); border-radius:12px; padding:.8rem 1rem;
}
.referral-hero-right { display:flex; flex-direction:column; gap:1rem; }
.ref-stat { text-align:center; padding:.8rem 1.4rem; background:#fff; border-radius:14px; border:1px solid rgba(255,107,26,.1); box-shadow:0 2px 8px rgba(0,0,0,.05); min-width:110px; }
.ref-stat-val { font-size:2.02rem; font-weight:900; line-height:1; }
.ref-stat-lbl { font-size:0.78rem; color:var(--muted); font-weight:600; margin-top:3px; }

/* ============================================================
   ADMIN INVISIBLE MONITOR
============================================================ */
.monitor-modal-overlay {
  position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,0.95);
  display:none; flex-direction:column;
}
.monitor-modal-overlay.open { display:flex; }

.monitor-topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px;
  background:rgba(139,26,52,0.4);
  border-bottom:1px solid rgba(255,107,26,0.3);
  flex-shrink:0;
}
.monitor-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(139,26,52,0.6); border:1px solid rgba(255,107,26,0.4);
  border-radius:50px; padding:6px 16px;
  font-size:15px; font-weight:800; color:#fff; letter-spacing:.5px;
}
.monitor-badge .invisible-dot {
  width:9px; height:9px; background:#22c55e; border-radius:50%;
  box-shadow:0 0 8px #22c55e; animation:pulse-dot 1.5s ease-in-out infinite;
}
.monitor-session-info {
  font-size:15px; color:rgba(255,255,255,0.6);
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.monitor-controls { display:flex; gap:10px; align-items:center; }
.monitor-btn {
  padding:8px 18px; border-radius:50px; border:none;
  font-size:15px; font-weight:700; cursor:pointer; font-family:inherit;
  transition:all .2s;
}
.monitor-btn-audio {
  background:rgba(255,255,255,0.12); color:#fff;
}
.monitor-btn-audio:hover { background:rgba(255,255,255,0.2); }
.monitor-btn-leave {
  background:linear-gradient(135deg,#C62828,#E53935); color:#fff;
  box-shadow:0 4px 16px rgba(198,40,40,0.4);
}
.monitor-btn-leave:hover { box-shadow:0 8px 24px rgba(198,40,40,0.6); transform:translateY(-1px); }

.monitor-main {
  flex:1; overflow:hidden; position:relative;
  display:flex; align-items:center; justify-content:center;
  background:#000;
}
#monitor-remote-container {
  width:100%; height:100%;
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:center; gap:4px; padding:8px;
}
.monitor-video-wrapper {
  position:relative; background:#111; border-radius:10px;
  overflow:hidden; flex:1 1 300px; max-width:640px;
  aspect-ratio:16/9; min-height:180px;
}
.monitor-video-el { width:100%; height:100%; object-fit:cover; }
.monitor-participant-label {
  position:absolute; bottom:10px; left:12px; z-index:2;
  background:rgba(0,0,0,0.6); color:#fff;
  font-size:13px; font-weight:700;
  padding:4px 10px; border-radius:8px;
}

.monitor-statusbar {
  padding:10px 24px;
  background:rgba(0,0,0,0.8);
  border-top:1px solid rgba(255,255,255,0.06);
  display:flex; align-items:center; gap:16px;
  font-size:13px; flex-shrink:0; flex-wrap:wrap;
}
.monitor-connection-ok { color:#22c55e; font-weight:700; }
.monitor-participant-count { color:rgba(255,255,255,0.5); }
.monitor-invisible-note { color:rgba(255,107,26,0.7); margin-left:auto; }

/* Admin monitoring panel stats */
.monitor-badge-row {
  display:flex; align-items:center; gap:16px;
  padding:16px 20px; background:rgba(139,26,52,0.06);
  border:1px solid rgba(139,26,52,0.15); border-radius:16px;
  margin-bottom:.5rem;
}
.monitor-stat { display:flex; flex-direction:column; align-items:center; gap:2px; }
.monitor-stat-num { font-size:2.02rem; font-weight:900; color:var(--maroon); line-height:1; }
.monitor-stat-lbl { font-size:0.81rem; color:var(--muted); font-weight:600; }

/* ============================================================
   1-ON-1 VIDEO CALL OVERLAY
============================================================ */
.video-call-overlay {
  position:fixed; inset:0; z-index:950;
  background:#0a0a0a;
  display:flex; flex-direction:column;
}
.video-call-overlay.hidden { display:none; }

.vc-topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px; background:rgba(0,0,0,0.6);
}
.vc-timer { color:#fff; font-weight:800; font-size:1.23rem; font-variant-numeric:tabular-nums; }
.vc-badge { color:#FFB830; font-weight:700; font-size:0.94rem; }

.vc-main { flex:1; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.vc-remote-video {
  width:100%; height:100%; object-fit:cover; background:#111;
}
.vc-remote-placeholder {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; color:rgba(255,255,255,0.4);
  font-size:1.06rem; pointer-events:none;
}
.vc-self-video {
  position:absolute; bottom:20px; right:20px;
  width:120px; height:160px; object-fit:cover;
  border-radius:14px; border:2px solid rgba(255,184,48,0.6);
  background:#000; box-shadow:0 8px 24px rgba(0,0,0,0.5);
}

.vc-controls {
  display:flex; justify-content:center; gap:18px;
  padding:18px; background:rgba(0,0,0,0.6);
}
.vc-btn {
  width:54px; height:54px; border-radius:50%; border:none;
  background:rgba(255,255,255,0.12); color:#fff; font-size:1.46rem;
  cursor:pointer; transition:background .2s;
}
.vc-btn:hover { background:rgba(255,255,255,0.22); }
.vc-btn-end { background:linear-gradient(135deg,#C62828,#E53935); }
.vc-btn-end:hover { background:linear-gradient(135deg,#D32F2F,#EF5350); }

/* ============================================================
   BUDDY GO-LIVE BROADCAST OVERLAY
============================================================ */
.live-broadcast-overlay {
  position:fixed; inset:0; z-index:950;
  background:#0a0a0a;
  display:flex; flex-direction:column;
}
.live-broadcast-overlay.hidden { display:none; }

.lb-topbar {
  display:flex; align-items:center; gap:16px;
  padding:14px 22px; background:rgba(198,40,40,0.15);
  border-bottom:1px solid rgba(239,68,68,0.3);
  position:relative; z-index:2;
}
.lb-badge {
  background:#C62828; color:#fff; font-weight:800; font-size:0.87rem;
  padding:4px 12px; border-radius:20px; letter-spacing:.5px;
  animation:pulse-dot 1.5s ease-in-out infinite;
}
.lb-viewers { color:rgba(255,255,255,0.6); font-size:0.94rem; }

.lb-main { flex:1; position:relative; background:#111; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.lb-preview-video { width:100%; height:100%; object-fit:cover; }

/* Chat panel now floats as a transparent overlay at the bottom of the
   video so the Buddy stays fully visible behind it. */
.lb-chat-panel {
  position:absolute; left:0; right:0; bottom:0;
  max-height:42%;
  overflow-y:auto;
  padding:0.9rem 1rem 1rem;
  display:flex; flex-direction:column; gap:0.5rem;
  background:transparent;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 22%);
  mask-image:linear-gradient(to bottom, transparent, #000 22%);
}
.lb-chat-panel > * { pointer-events:auto; }

.lb-chat-empty { font-size:1.12rem; color:rgba(255,255,255,0.65); text-align:center; padding:1rem; text-shadow:0 1px 4px rgba(0,0,0,0.9); }

/* Regular chat message line */
.lb-chat-msg {
  font-size:1.18rem; line-height:1.45; color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,0.95), 0 0 8px rgba(0,0,0,0.7);
  word-break:break-word;
}
.lb-chat-name { font-weight:700; color:#ffd54f; margin-right:0.3em; }
.lb-chat-time { font-size:0.87rem; color:rgba(255,255,255,0.75); margin-left:0.5em; white-space:nowrap; }

/* Gift event — highlighted card so it stands out from plain messages */
.lb-gift-card {
  display:flex; align-items:center; gap:0.55rem;
  background:linear-gradient(135deg, rgba(255,193,7,0.28), rgba(255,111,0,0.22));
  border:1px solid rgba(255,193,7,0.55);
  border-radius:14px;
  padding:0.5rem 0.85rem;
  font-size:1.18rem; color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,0.8);
  box-shadow:0 2px 10px rgba(0,0,0,0.35);
  animation:giftCardIn 0.28s ease;
}
.lb-gift-emoji { font-size:1.68rem; line-height:1; }
.lb-gift-card strong { color:#ffe082; }

@keyframes giftCardIn {
  from { opacity:0; transform:translateY(10px) scale(0.97); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

@media(max-width:768px) {
  .lb-chat-panel { max-height:36%; padding:0.7rem 0.85rem 0.85rem; }
  .lb-chat-msg, .lb-gift-card { font-size:1.1rem; }
}

/* ── Live text chat input bar — shared by broadcaster + viewer ── */
.live-chat-input-row {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; background:rgba(10,10,10,0.92);
  border-top:1px solid rgba(255,255,255,0.08);
  flex-shrink:0;
}
.live-chat-input {
  flex:1; padding:10px 16px; border-radius:50px;
  border:1.5px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.08); color:#fff;
  font-family:inherit; font-size:1.12rem; outline:none;
}
.live-chat-input::placeholder { color:rgba(255,255,255,0.5); }
.live-chat-send-btn {
  width:42px; height:42px; border-radius:50%; border:none; flex-shrink:0;
  background:linear-gradient(135deg,var(--saffron),var(--maroon)); color:#fff;
  font-size:1.23rem; display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.live-chat-send-btn:active { transform:scale(0.92); }
@media(max-width:768px) {
  .live-chat-input-row { padding:8px 10px; gap:8px; }
  .live-chat-input { font-size:1.06rem; padding:8px 14px; }
  .live-chat-send-btn { width:38px; height:38px; font-size:1.12rem; }
}

/* ============================================================
   VIEWER: WATCH LIVE OVERLAY
============================================================ */
.live-viewer-overlay {
  position:fixed; inset:0; z-index:950;
  background:#0a0a0a;
  display:flex; flex-direction:column;
}
.live-viewer-overlay.hidden { display:none; }

.lv-topbar {
  display:flex; align-items:center; gap:14px;
  padding:14px 22px; background:rgba(0,0,0,0.5);
}
.lv-badge {
  background:#C62828; color:#fff; font-weight:800; font-size:0.83rem;
  padding:3px 10px; border-radius:20px;
  animation:pulse-dot 1.5s ease-in-out infinite;
}
.lv-name { color:#fff; font-weight:700; flex:1; }
.lv-close-btn {
  background:rgba(255,255,255,0.12); border:none; color:#fff;
  width:34px; height:34px; border-radius:50%; font-size:1.34rem; cursor:pointer;
}
.lv-close-btn:hover { background:rgba(255,255,255,0.22); }

.lv-main { flex:1; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.lv-video { width:100%; height:100%; object-fit:cover; background:#111; }
.lv-video.hidden { display:none; }
.lv-placeholder {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:rgba(255,255,255,0.4); font-size:1.06rem; text-align:center;
}

/* Transparent chat/gift feed overlaid on the viewer's live stream —
   shares the .lb-chat-msg / .lb-gift-card look from the broadcaster side */
.lv-chat-panel {
  position:absolute; left:0; right:0; bottom:0;
  max-height:40%;
  overflow-y:auto;
  padding:0.9rem 1rem 1rem;
  display:flex; flex-direction:column; gap:0.5rem;
  background:transparent;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 22%);
  mask-image:linear-gradient(to bottom, transparent, #000 22%);
}
.lv-chat-panel > * { pointer-events:auto; }

.lv-controls {
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding:16px; background:rgba(0,0,0,0.5);
}
.lv-heart-btn {
  background:rgba(255,255,255,0.12); border:none; color:#fff;
  padding:10px 20px; border-radius:50px; font-size:1.12rem; font-weight:700;
  cursor:pointer; transition:transform .15s, background .2s;
  display:flex; align-items:center; gap:6px;
}
.lv-heart-btn:hover { background:rgba(255,255,255,0.2); }
.lv-heart-btn.liked { transform:scale(1.15); }

/* Floating heart animation (free reaction) */
.floating-heart {
  position:absolute; bottom:80px; font-size:1.79rem;
  animation:floatHeart 2.3s ease-out forwards;
  pointer-events:none;
}
@keyframes floatHeart {
  0%   { transform:translateY(0) translateX(0) scale(.6); opacity:1; }
  100% { transform:translateY(-260px) translateX(var(--drift,0px)) scale(1.3); opacity:0; }
}

/* ============================================================
   MOBILE-FIRST RESPONSIVE OVERHAUL
   All screens: nav, dashboard, video call, chat, buddy cards
============================================================ */

/* ── NAV: fix on all mobile widths ── */
@media (max-width:768px) {
  #navbar {
    padding:0 14px;
    height:56px;
    gap:8px;
  }
  .nav-logo { font-size:1.23rem; }
  .nav-logo .gem { font-size:1.23rem; }
  .btn-cta-nav, .btn-nav {
    padding:8px 14px;
    font-size:13px;
  }
  .lang-pill { transform:scale(0.9); }

  /* ── PAGE: full use of screen ── */
  .page { padding-top:0; }
  .section-inner { padding:0 14px; }
  .section { padding:2.5rem 0; }

  /* ── DASHBOARD ── */
  .dashboard { padding:64px 12px 2rem; }
  .stats-grid { grid-template-columns:repeat(2,1fr); gap:0.7rem; }
  .stat-card { padding:1rem; }
  .stat-value { font-size:1.79rem; }
  .wallet-balance-amount { font-size:2.69rem; }
  .wallet-balance-card { padding:1.4rem; }

  /* ── SIDEBAR → horizontal tabs ── */
  .sidebar { position:static !important; top:auto; }
  .sidebar > .card { padding:0.3rem !important; border-radius:14px !important; }
  .sidebar-menu {
    flex-direction:row !important;
    overflow-x:auto;
    gap:4px;
    padding:4px;
    scrollbar-width:none;
  }
  .sidebar-menu::-webkit-scrollbar { display:none; }
  .sidebar-item {
    flex:0 0 auto;
    padding:8px 14px !important;
    border-radius:50px !important;
    font-size:0.85rem !important;
    white-space:nowrap;
    border-left:none !important;
    min-width:0;
  }
  .sidebar-item.active {
    border-left:none !important;
  }
  .sidebar-item .icon { font-size:0.95rem; margin-right:3px; }

  /* ── MODEL GRID: 2 columns ── */
  .model-grid {
    grid-template-columns:repeat(2,1fr) !important;
    gap:10px !important;
  }
  .model-card-img { height:130px !important; font-size:2.24rem !important; }
  .model-card-info { padding:0.7rem !important; }
  .model-card-name { font-size:0.95rem !important; }
  .model-card-meta { font-size:0.76rem !important; gap:4px !important; }
  .model-card-actions { gap:4px !important; margin-top:0.5rem !important; }
  .model-card-actions .btn { padding:5px 10px !important; font-size:0.78rem !important; }

  /* ── BUDDY BROWSE IN DASHBOARD ── */
  #panel-browse .card { padding:1rem; }
  .filter-row { gap:6px; }
  .filter-chip { padding:5px 10px; font-size:0.83rem; }

  /* ── VIDEO CALL FULL SCREEN ── */
  .call-layout {
    grid-template-columns:1fr !important;
    grid-template-rows:1fr auto !important;
    height:100vh !important;
    height:100dvh !important; /* dynamic viewport on mobile */
  }
  .call-main { min-height:55vh; }
  .call-sidebar {
    max-height:45vh;
    border-left:none !important;
    border-top:1px solid rgba(255,255,255,0.1);
  }

  /* ── 1-ON-1 VIDEO CALL OVERLAY ── */
  .video-call-overlay {
    position:fixed; inset:0;
    z-index:950;
  }
  .vc-topbar { padding:10px 14px; }
  .vc-timer { font-size:1.12rem; }
  .vc-self-video {
    width:90px !important;
    height:120px !important;
    bottom:14px !important;
    right:14px !important;
  }
  .vc-controls { padding:12px; gap:14px; }
  .vc-btn { width:46px; height:46px; font-size:1.23rem; }

  /* ── GO LIVE OVERLAY ── */
  .lb-chat-panel { max-height:34%; }

  /* ── WATCH LIVE OVERLAY ── */
  .live-viewer-overlay { position:fixed; inset:0; }
  .lv-topbar { padding:10px 14px; }
  .lv-controls { padding:12px; gap:12px; }
  .lv-chat-panel { max-height:34%; }

  /* ── ADMIN MONITOR OVERLAY ── */
  .monitor-topbar { padding:10px 14px; flex-wrap:wrap; gap:8px; }
  .monitor-badge { font-size:12px; padding:5px 12px; }
  .monitor-controls { gap:8px; }
  .monitor-btn { padding:7px 14px; font-size:13px; }
  .monitor-statusbar { padding:8px 14px; font-size:12px; }
  #monitor-remote-container { padding:4px; gap:2px; }
  .monitor-video-wrapper { min-height:140px; }

  /* ── CHAT: full height on mobile ── */
  .chat-container {
    grid-template-columns:1fr !important;
    grid-template-rows:auto 1fr !important;
    height:calc(100vh - 56px) !important;
    height:calc(100dvh - 56px) !important;
    border-radius:0 !important;
    margin:0 !important;
  }
  .chat-list { max-height:180px !important; }
  .chat-messages { flex:1; }
  .chat-input-area { padding:0.6rem 0.8rem; }
  .chat-input { font-size:0.94rem; }

  /* ── MODAL: full-screen on mobile ── */
  .modal-overlay { align-items:flex-end !important; padding:0 !important; }
  .modal {
    border-radius:24px 24px 0 0 !important;
    max-width:100% !important;
    width:100% !important;
    max-height:90vh;
    overflow-y:auto;
    padding:1.4rem !important;
  }

  /* ── GIFT SHOP ── */
  #modal-gift-shop .modal { max-height:85vh; }
  .gift-row { gap:8px; }
  .gift-item { min-width:68px; padding:0.6rem 0.7rem; }
  .gift-emoji { font-size:1.68rem; }
  .gift-name { font-size:0.73rem; }
  .gift-price { font-size:0.69rem; }

  /* ── TOKEN GRID ── */
  .token-grid { grid-template-columns:1fr; gap:0.8rem; }

  /* ── PLAN GRID ── */
  .plan-grid { grid-template-columns:1fr 1fr; gap:0.7rem; }

  /* ── EVENT GRID ── */
  .event-grid { grid-template-columns:repeat(2,1fr); gap:0.8rem; }

  /* ── TABLE: horizontal scroll ── */
  .table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table { min-width:480px; }
  th, td { padding:0.6rem 0.7rem; font-size:0.87rem; }

  /* ── REFERRAL PANEL ── */
  .referral-hero-card { grid-template-columns:1fr; gap:1rem; }
  .referral-hero-right { flex-direction:row; gap:0.8rem; }
  .ref-stat { min-width:80px; }
  .referral-code-display { font-size:1.9rem; letter-spacing:4px; }

  /* ── AUTH BOX: full width ── */
  .auth-box { padding:1.5rem 1rem; border-radius:16px; }
  .auth-role-tabs { gap:0.2rem; }
  .auth-role-tab { font-size:0.95rem; padding:0.5rem; }

  /* ── ADMIN PANEL ── */
  .admin-main { padding:64px 12px 1.5rem; }
  .admin-sidebar { padding:64px 10px 1rem; }

  /* ── CTA ── */
  .cta-wrap { margin:0 8px 60px; padding:48px 16px; border-radius:20px; }
  .cta-h2 { font-size:1.68rem !important; }

  /* ── FOOTER ── */
  footer { padding:24px 14px; flex-direction:column; text-align:center; gap:10px; }

  /* ── HERO SPECIFIC ── */
  .ds-hero { padding:80px 16px 48px; }
  .ds-hero-inner { gap:24px; }
  .ds-h1 { font-size:clamp(32px,8vw,48px); letter-spacing:-0.5px; }
  .ds-sub { font-size:17px; }
  .ds-hero-btns { flex-direction:column; align-items:stretch; }
  .ds-btn-user, .ds-btn-buddy { justify-content:center; text-align:center; }
  .ds-quick-stats { gap:16px; }
  .ds-qs-val { font-size:1.46rem; }
  .ds-float { display:none; }  /* hide floating badges on mobile */
  #ds-diamond { height:280px; }

  /* ── PILL TRACK ── */
  .pill-track, .ds-pill-track { gap:8px; }
  .pill, .ds-pill { padding:10px 14px; font-size:15px; }
  .pill .pe, .ds-pill .pill-em, .ds-pill .pe { font-size:19px; }
}

/* ── DESKTOP VIDEO CALL: fix full-viewport ── */
@media (min-width:769px) {
  .call-layout {
    grid-template-columns:1fr 300px;
    height:100vh;
  }
  .call-main {
    position:relative;
    overflow:hidden;
  }
  .call-main video,
  #video-remote-stream {
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
  }
  .call-sidebar {
    height:100vh;
    overflow-y:auto;
  }

  /* page-call uses 100vh properly */
  #page-call { overflow:hidden; height:100vh; }

  /* 1-on-1 video call desktop */
  .vc-remote-video {
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
  }
  .vc-main { position:relative; flex:1; overflow:hidden; }
}

/* ── TABLET: 769px  -  1024px ── */
@media (min-width:769px) and (max-width:1024px) {
  .dashboard-grid { grid-template-columns:190px 1fr; gap:1rem; }
  .model-grid { grid-template-columns:repeat(3,1fr) !important; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .plan-grid { grid-template-columns:repeat(3,1fr); }
  .ds-hero { padding:100px 32px 64px; }
}

/* ── DESKTOP ENHANCEMENTS: 1200px+ ── */
@media (min-width:1200px) {
  .model-grid { grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); }
  .dashboard { padding:80px 2rem 3rem; }
}

/* ── SAFE AREA: iPhone notch ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .vc-controls,
  .lv-controls,
  .lb-topbar,
  .monitor-statusbar,
  .chat-input-area {
    padding-bottom:calc(env(safe-area-inset-bottom) + 10px);
  }
  #navbar {
    padding-top:env(safe-area-inset-top);
  }
}

/* ── SCROLLING SMOOTHNESS ── */
* { -webkit-overflow-scrolling:touch; }
.sidebar-menu, .model-grid, .pill-track, .ds-pill-track, .talent-scroll, .table-wrap {
  -webkit-overflow-scrolling:touch;
}

/* ── BROWSE PANEL IN DASHBOARD ── */
#panel-browse {
  display:none;
}
#panel-browse.active {
  display:block;
}

/* ── ALL BUDDIES PREVIEW GRID ── */
#u-all-buddies-preview {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:0.8rem;
}
@media(max-width:768px) {
  #u-all-buddies-preview {
    grid-template-columns:repeat(2,1fr) !important;
    gap:10px;
  }
}


/* ── OFFLINE DOT ── */
.offline-dot {
  width:7px; height:7px; background:#9E8880;
  border-radius:50%; display:inline-block;
  opacity:0.5;
}

/* ── MODEL-CARD-INFO alias (renderModelCard uses model-card-info) ── */
.model-card-info {
  padding:0.9rem;
}
.model-card-info .model-card-name {
  font-size:1.01rem; font-weight:800; margin-bottom:0.35rem;
  color:#1A0806; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.model-card-info .model-card-meta {
  display:flex; align-items:center; gap:5px; flex-wrap:wrap; font-size:0.81rem;
}
.model-card-info .model-card-actions {
  display:flex; gap:5px; margin-top:0.6rem;
}