/* ==========================================================================
   StarBoost — base.css
   Shared resets, design tokens, and common components for the redesign.
   Loaded on every page. Page-specific styles live in their own CSS file.
   ========================================================================== */

:root {
  /* Brand */
  --sb-primary: #5B5BF0;
  --sb-primary-dark: #4340D6;
  --sb-primary-darker: #34309E;
  --sb-primary-light: #EEF0FF;
  --sb-primary-soft: #E2E1FC;

  --sb-accent: #FBBF3F;
  --sb-accent-dark: #F2A413;
  --sb-accent-light: #FFF6E0;

  /* Neutrals */
  --sb-bg: #FFFFFF;
  --sb-bg-soft: #F7F8FD;
  --sb-bg-alt: #F1F1FB;
  --sb-border: #E7E8F5;
  --sb-text: #1A1B2E;
  --sb-text-muted: #6B7280;
  --sb-text-soft: #9295A6;

  /* Status */
  --sb-success: #1FAA59;
  --sb-success-light: #E7F8EE;
  --sb-danger: #E5484D;

  /* Elevation */
  --sb-shadow-sm: 0 2px 8px rgba(26, 27, 46, 0.06);
  --sb-shadow-md: 0 8px 24px rgba(26, 27, 46, 0.08);
  --sb-shadow-lg: 0 16px 48px rgba(91, 91, 240, 0.14);

  /* Radius */
  --sb-radius-sm: 10px;
  --sb-radius-md: 16px;
  --sb-radius-lg: 24px;
  --sb-radius-pill: 999px;

  /* Type — Poppins is the ONLY typeface used site-wide (confirmed
     2026-08-02); 'sans-serif' here is a generic system fallback for the
     rare case Poppins fails to load, not a second named typeface. */
  --sb-font: 'Poppins', sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sb-font);
  /* Body text is Regular (400) — the browser default weight for normal
     text, so this is never overridden by anything more specific than a
     component explicitly opting into a heavier weight (buttons, nav,
     labels, headings — see their own rules). */
  font-weight: 400;
  color: var(--sb-text);
  background: var(--sb-bg);
  -webkit-font-smoothing: antialiased;
}

/* Site-wide default for bare <label> elements — most form labels are
   Semibold (600). Pages with their own more specific .form-label-style
   selector still win via normal CSS specificity; this is just the floor. */
label { font-weight: 600; }

a { text-decoration: none; color: inherit; }

img { max-width: 100%; display: block; }

.container-sb {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* ---- Buttons ---- */
.btn-sb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.75rem 1.75rem;
  border-radius: var(--sb-radius-pill);
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.btn-sb:active { transform: translateY(1px); }

.btn-sb-primary {
  background: linear-gradient(135deg, var(--sb-primary), var(--sb-primary-dark));
  color: #fff;
  box-shadow: var(--sb-shadow-lg);
}
.btn-sb-primary:hover {
  color: #fff;
  box-shadow: 0 20px 40px rgba(91, 91, 240, 0.22);
  transform: translateY(-2px);
}

.btn-sb-accent {
  background: linear-gradient(135deg, var(--sb-accent), var(--sb-accent-dark));
  color: var(--sb-text);
  box-shadow: 0 12px 28px rgba(251, 191, 63, 0.35);
}
.btn-sb-accent:hover {
  color: var(--sb-text);
  transform: translateY(-2px);
}

.btn-sb-outline {
  background: transparent;
  color: var(--sb-primary);
  border: 1.5px solid var(--sb-primary);
}
.btn-sb-outline:hover {
  background: var(--sb-primary-light);
  color: var(--sb-primary-dark);
}

.btn-sb-ghost {
  background: transparent;
  color: var(--sb-text);
}
.btn-sb-ghost:hover { background: var(--sb-bg-alt); }

.btn-sb-lg { padding: 0.95rem 2.25rem; font-size: 1.05rem; }
.btn-sb-sm { padding: 0.5rem 1.15rem; font-size: 0.85rem; }

/* ---- Badges / pills ---- */
.pill-sb {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.35rem 0.9rem;
  border-radius: var(--sb-radius-pill);
  background: var(--sb-primary-light);
  color: var(--sb-primary-dark);
}
.pill-sb-accent { background: var(--sb-accent-light); color: #8A5A00; }
.pill-sb-success { background: var(--sb-success-light); color: var(--sb-success); }

/* ---- Cards ---- */
.card-sb {
  background: var(--sb-bg);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-md);
  box-shadow: var(--sb-shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card-sb:hover { box-shadow: var(--sb-shadow-md); transform: translateY(-3px); }

/* ---- Section helpers ---- */
.section-sb { padding: 4.5rem 0; }
@media (max-width: 767.98px) {
  .section-sb { padding: 3rem 0; }
}

.eyebrow-sb {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--sb-primary);
}

.text-muted-sb { color: var(--sb-text-muted); }
.text-soft-sb { color: var(--sb-text-soft); }

/* ---- Navbar (shared shell) ---- */
.navbar-sb {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--sb-border);
  position: sticky;
  top: 0;
  z-index: 1000;
}
.navbar-sb .logo-sb { display: flex; align-items: center; gap: 0.6rem; font-weight: 800; font-size: 1.25rem; }
.navbar-sb .logo-sb img { height: 32px; width: auto; }
.navbar-sb .nav-link-sb {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--sb-text-muted);
  padding: 0.5rem 0.9rem;
  border-radius: var(--sb-radius-pill);
}
.navbar-sb .nav-link-sb:hover,
.navbar-sb .nav-link-sb.active {
  color: var(--sb-primary-dark);
  background: var(--sb-primary-light);
}

/* ---- Footer (shared shell) ---- */
.footer-sb {
  background: var(--sb-text);
  color: #C7C8DA;
  padding: 3.5rem 0 2rem;
}
.footer-sb a { color: #C7C8DA; }
.footer-sb a:hover { color: #fff; }
.footer-sb h6 { color: #fff; font-weight: 700; margin-bottom: 1rem; }
.footer-sb .footer-bottom-sb {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  font-size: 0.85rem;
  color: #8F91A8;
}

/* ==========================================================================
   Shared app-shell retheme (logged-in area)
   header.php / bottom-nav.php are included on every logged-in page (feed,
   my-ads, create-ad, ad-detail, levels, points, winner, etc.), most of which
   still load the legacy css/style.css. Rather than rewrite every page,
   base.css is now linked from header.php itself (see header.php), and this
   block re-points style.css's legacy CSS variables + component classes at
   the StarBoost brand palette/tokens — every page picks up the same modern
   look for free. Page-specific content (e.g. feed.php) still gets its own
   dedicated stylesheet on top of this.
   ========================================================================== */
:root {
  --primary-color: var(--sb-primary);
  --primary-light: var(--sb-primary-light);
  --secondary-color: var(--sb-success);
  --accent-color: var(--sb-accent);
  --dark-color: var(--sb-text);
  --light-color: var(--sb-bg-soft);
  --gray-color: var(--sb-text-muted);
  --light-gray: var(--sb-border);
  --border-radius: var(--sb-radius-md);
  --box-shadow: var(--sb-shadow-md);
  --header-height: 64px;
  --nav-height: 78px;
}

body { font-family: var(--sb-font); }

/* ---- Site-wide heading standard (confirmed 2026-08-02) ----
   Every h1-h5 is Poppins Extra Bold (800) by default. A handful of
   non-heading elements (stat callouts, tier values, referral level
   numbers) intentionally reuse this same weight for visual emphasis via
   the .stat-emphasis utility class below, rather than duplicating the
   font-weight declaration ad hoc across page-specific CSS files. */
h1, h2, h3, h4, h5 { font-family: var(--sb-font); font-weight: 800; }
.stat-emphasis { font-family: var(--sb-font); font-weight: 800; }

/* ---- Top app bar ---- */
.app-header {
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--sb-border);
  box-shadow: none;
}
.app-logo a { color: var(--sb-primary) !important; }
.app-logo .logo-text { color: var(--sb-text); }

.nav-login-btn {
  border-color: var(--sb-primary) !important;
  color: var(--sb-primary);
  border-radius: var(--sb-radius-pill) !important;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.15s ease;
}
.nav-login-btn:hover { background: var(--sb-primary-light); }

.header-points-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0.4rem 0.8rem;
  border-radius: var(--sb-radius-pill);
  background: var(--sb-accent-light);
  color: #8A5A00;
  white-space: nowrap;
}
.header-points-pill i { color: var(--sb-accent-dark); }

.user-menu { display: flex; align-items: center; gap: 0.6rem; }
.user-avatar {
  background: linear-gradient(135deg, var(--sb-primary), var(--sb-primary-dark));
  overflow: hidden;
  flex-shrink: 0;
}
.user-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.user-dropdown {
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-md);
  box-shadow: var(--sb-shadow-lg);
}
.dropdown-item i { color: var(--sb-primary); }
.dropdown-item:hover { background: var(--sb-primary-light); color: var(--sb-primary-dark); }
.user-dropdown hr { border-color: var(--sb-border); margin: 0.4rem 0; opacity: 1; }

/* Tap-to-toggle on touch devices (hover-only otherwise). */
@media (hover: none) {
  .user-dropdown { opacity: 0; visibility: hidden; transform: translateY(10px); }
  .user-menu.open .user-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
}

/* ---- Bottom navigation dock ---- */
.app-nav {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(10px);
  border-top: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-lg) var(--sb-radius-lg) 0 0;
  box-shadow: 0 -8px 24px rgba(26, 27, 46, 0.08);
}
@media (min-width: 768px) {
  .app-nav { border-radius: var(--sb-radius-lg); bottom: 14px; }
}
.nav-item.active { color: var(--sb-primary); font-weight: 600; }
.nav-item:hover { color: var(--sb-primary); }
.nav-center-icon {
  background: linear-gradient(135deg, var(--sb-accent), var(--sb-accent-dark));
  color: var(--sb-text);
  box-shadow: 0 8px 20px rgba(251, 191, 63, 0.45);
}
.nav-center-label { color: var(--sb-text); font-weight: 600; }

/* ---- Toast / ticker ---- */
.ticker {
  border-radius: var(--sb-radius-md);
  box-shadow: var(--sb-shadow-lg);
  bottom: calc(var(--nav-height) + 16px);
}
.ticker.success { background-color: var(--sb-success); }
.ticker.error { background-color: var(--sb-danger); }

/* ==========================================================================
   NEW DESIGN SYSTEM (blue/gold, Poppins) — added 2026-07-30 per
   design-system-instructions.md. This is being migrated to page-by-page,
   starting with the auth pages (login/register/forgot/reset-password) and
   will eventually replace the --sb-* system above entirely. Until every
   page is migrated, BOTH token sets coexist here without conflict (distinct
   variable/class names) — do not delete the --sb-* block above until
   nothing references it anymore.

   New pages should use ONLY the tokens/classes below (--blue, --gold,
   .btn-gold, .form-group-icon, .card-base, .badge-soft, .dash-shell, etc.)
   per design-system-instructions.md. Do not mix --sb-* and the tokens below
   on the same page.
   ========================================================================== */

:root{
  /* ===== CORE UI COLORS (use these everywhere: nav, buttons, forms, dashboard) ===== */
  --blue:        #2F6FED;   /* primary links, secondary buttons, info accents */
  --blue-dark:   #2557C4;   /* hover state for blue */
  --blue-soft:   #EAF1FE;   /* light blue backgrounds, input focus rings */

  --gold:        #F5A623;   /* PRIMARY action color — all main CTA buttons */
  --gold-dark:   #DC8F14;   /* hover state for gold */
  --gold-soft:   #FFF7EA;   /* light gold backgrounds, badges */

  /* ===== MARKETING ACCENT COLORS (landing/marketing sections ONLY —
     do not use as primary buttons or dashboard UI colors) ===== */
  --purple:      #6C5CE7;   /* marketing section backgrounds (e.g. Benefits) */
  --purple-dark: #4E3FC7;
  --purple-light:#A29BFE;
  --green:       #00B894;   /* marketing section backgrounds (e.g. Referral) —
                                 NOTE: also reserved for "success" states app-wide.
                                 Do not use green as a primary dashboard button color. */
  --green-dark:  #04976F;
  --pink:        #FD79A8;   /* small accent pops, gradient text, badges only */

  /* ===== NEUTRALS ===== */
  --ink:         #1D2333;   /* primary text */
  --muted:       #65708A;   /* secondary/muted text */
  --line:        #E7E9F2;   /* borders, dividers */
  --bg-white:    #FFFFFF;
  --bg-soft:     #F6F8FC;   /* light section backgrounds, input backgrounds */

  /* ===== SEMANTIC (use ONLY for status — never as brand/button colors) ===== */
  --success:     #04976F;
  --error:       #E5484D;
  --warning:     #F5A623;   /* shares gold — intentional, warning = "pay attention" */

  /* ===== SYSTEM ===== */
  --radius:      14px;
  --radius-lg:   20px;
  --shadow:      0 12px 32px rgba(29,35,51,.08);
  --shadow-lg:   0 16px 40px rgba(29,35,51,.1);
  --font-body:   'Poppins', sans-serif;
}

/* ---------- TYPE SCALE ---------- */
.text-eyebrow{
  font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--blue); display:inline-block; margin-bottom:14px;
}
.text-muted-custom{ color:var(--muted); }

/* ---------- CONTAINERS & SECTIONS ---------- */
.container-app{ max-width:1240px; margin:0 auto; padding:0 20px; }
.section-pad{ padding:clamp(50px,8vw,100px) 0; }

/* ---------- BUTTONS ----------
   .btn-gold      = PRIMARY action, every page (Join, Save, Submit, Withdraw, etc.)
   .btn-blue-outline = SECONDARY action
   .btn-blue      = tertiary solid action, used sparingly (e.g. inside dashboard widgets)
   .btn-white     = for use on colored/gradient backgrounds only
   ------------------------------------------------------------- */
.btn-gold{
  background:var(--gold); border:none; color:#fff !important; font-weight:600;
  padding:13px 30px; border-radius:var(--radius); transition:.25s;
  box-shadow:0 10px 24px rgba(245,166,35,.28); display:inline-flex; align-items:center; gap:8px;
}
.btn-gold:hover{ background:var(--gold-dark); transform:translateY(-2px); color:#fff; }

.btn-blue-outline{
  border:1.5px solid var(--blue); color:var(--blue) !important; font-weight:600;
  padding:12px 28px; border-radius:var(--radius); background:transparent; transition:.25s;
  display:inline-flex; align-items:center; gap:8px;
}
.btn-blue-outline:hover{ background:var(--blue); color:#fff !important; transform:translateY(-2px); }

.btn-blue{
  background:var(--blue); border:none; color:#fff !important; font-weight:600;
  padding:13px 30px; border-radius:var(--radius); transition:.25s;
}
.btn-blue:hover{ background:var(--blue-dark); color:#fff; transform:translateY(-2px); }

.btn-white{
  background:#fff; color:var(--purple) !important; font-weight:600;
  padding:14px 32px; border-radius:var(--radius); border:none; transition:.25s;
}
.btn-white:hover{ transform:translateY(-3px); box-shadow:0 14px 26px rgba(0,0,0,.18); }

/* Compact size modifier for .btn-gold/.btn-blue/.btn-blue-outline (dashboard
   cards, inline actions — the base padding is sized for marketing CTAs). */
.btn-gold.btn-sm, .btn-blue.btn-sm, .btn-blue-outline.btn-sm{
  padding:7px 16px; font-size:.85rem; border-radius:10px;
}

/* ---------- FORM INPUTS (icon-left style, used on all forms) ---------- */
.form-group-icon{ position:relative; margin-bottom:18px; }
.form-group-icon i{
  position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:.95rem;
}
.form-group-icon input, .form-group-icon select, .form-group-icon textarea{
  width:100%; padding:14px 16px 14px 44px; border:1.5px solid var(--line); border-radius:var(--radius);
  font-family:var(--font-body); font-size:.95rem; transition:.2s; background:var(--bg-soft);
}
.form-group-icon input:focus, .form-group-icon select:focus, .form-group-icon textarea:focus{
  outline:none; border-color:var(--blue); background:#fff; box-shadow:0 0 0 4px var(--blue-soft);
}
.toggle-pw{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  color:var(--muted); cursor:pointer; background:none; border:none;
  /* Browser default <button> chrome (padding, line-height, font baseline)
     otherwise leaves the eye icon off-center inside this box even though
     the box itself is correctly positioned by top/transform above. */
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; padding:0; line-height:1; font-size:.95rem;
}

/* ---------- CITY PICKER (js/city-picker.js) ----------
   Shared custom dropdown for the Country -> City field, used on
   register.php, settings.php, and influencer-profile.php — a real styled
   list instead of the browser's native <datalist> popup (which can't be
   styled at all in most browsers, which is why this field used to look
   inconsistent from page to page). Anchors to the input's parent, which
   the JS makes position:relative if it isn't already. */
.city-suggest-list{
  position:absolute; top:100%; left:0; right:0; margin-top:6px; background:#fff;
  border:1.5px solid var(--line); border-radius:12px; box-shadow:var(--shadow);
  max-height:220px; overflow-y:auto; z-index:60; display:none;
}
.city-suggest-list.open{display:block;}
.city-suggest-item{padding:10px 16px; font-size:.88rem; color:var(--ink); cursor:pointer; transition:background-color .1s ease;}
.city-suggest-item:hover, .city-suggest-item.active{background:var(--blue-soft); color:var(--blue-dark);}

/* ---------- CARDS ---------- */
.card-base{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:26px;
}
.card-hover{ transition:.25s; }
.card-hover:hover{ transform:translateY(-6px); }

/* ---------- BADGES ---------- */
.badge-soft{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--gold-soft); color:var(--gold-dark);
  border:1px solid #FBE2B5; font-weight:600; font-size:.85rem;
  padding:8px 18px; border-radius:999px;
}
.badge-pulse{ animation:pulseBadge 2.2s ease-in-out infinite; }
@keyframes pulseBadge{ 0%{transform:scale(1);} 50%{transform:scale(1.045);} 100%{transform:scale(1);} }

/* ---------- SITE NAVBAR (marketing/public pages) ---------- */
.navbar-app{ padding:16px 0; background:#fff; box-shadow:0 2px 18px rgba(29,35,51,.06); }
.navbar-brand-app{ font-weight:700; font-size:1.4rem; color:var(--ink) !important; display:flex; align-items:center; }
.navbar-brand-app i{ color:var(--gold); margin-right:8px; }
.nav-link-app{ color:var(--ink) !important; font-weight:500; margin:0 14px; opacity:.8; transition:opacity .2s; }
.nav-link-app:hover{ opacity:1; color:var(--blue) !important; }

/* ---------- BACK BUTTON (auth pages, sub-pages) ---------- */
.back-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--bg-soft); border:1px solid var(--line); color:var(--ink) !important;
  font-size:.88rem; font-weight:600; padding:9px 18px; border-radius:999px; transition:.2s;
}
.back-btn:hover{ background:var(--blue-soft); color:var(--blue) !important; }


/* ============================================================
   DASHBOARD SHELL (logged-in area — sidebar + topbar)
   Use this on every page inside the user dashboard/admin panel.
   Layout: fixed left sidebar (desktop) + topbar + main content area.
   On mobile: sidebar becomes a full-height off-canvas drawer,
   topbar stays fixed with a menu-toggle button.
   Not wired up to any page yet — reserved for the dashboard-shell
   rebuild (header.php/bottom-nav.php replacement), a separate task from
   the auth-page restyle.
   ============================================================ */

.dash-shell{ display:flex; min-height:100vh; background:var(--bg-soft); }

/* --- Sidebar --- */
.dash-sidebar{
  width:264px; flex-shrink:0; background:#fff; border-right:1px solid var(--line);
  display:flex; flex-direction:column; position:fixed; top:0; left:0; bottom:0; z-index:200;
  transition:transform .3s ease;
}
.dash-sidebar-logo{
  padding:22px 24px; font-weight:700; font-size:1.25rem; color:var(--ink);
  display:flex; align-items:center; border-bottom:1px solid var(--line);
}
.dash-sidebar-logo i{ color:var(--gold); margin-right:8px; }

/* User summary card at top of sidebar */
.dash-user-card{
  margin:18px 16px; padding:16px; background:var(--bg-soft); border-radius:var(--radius);
  display:flex; align-items:center; gap:12px;
}
.dash-user-avatar{
  width:42px; height:42px; border-radius:50%; background:var(--blue-soft); color:var(--blue);
  display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0;
}
.dash-user-name{ font-weight:700; font-size:.9rem; margin-bottom:2px; }
.dash-user-tier{
  font-size:.72rem; font-weight:700; color:var(--gold-dark); background:var(--gold-soft);
  padding:2px 9px; border-radius:999px; display:inline-block;
}

/* Nav groups + links */
.dash-nav{ flex:1; overflow-y:auto; padding:8px 12px 20px; }
.dash-nav-group-label{
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); padding:18px 12px 8px;
}
.dash-nav-link{
  display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:10px;
  color:var(--ink); font-weight:500; font-size:.9rem; margin-bottom:2px; transition:.2s;
  position:relative;
}
.dash-nav-link i{ width:18px; text-align:center; color:var(--muted); transition:.2s; }
.dash-nav-link:hover{ background:var(--bg-soft); color:var(--ink); }
.dash-nav-link.active{
  background:var(--blue-soft); color:var(--blue); font-weight:700;
}
.dash-nav-link.active i{ color:var(--blue); }
.dash-nav-link.active::before{
  content:''; position:absolute; left:-12px; top:50%; transform:translateY(-50%);
  width:4px; height:22px; background:var(--gold); border-radius:0 4px 4px 0;
}
.dash-nav-badge{
  margin-left:auto; background:var(--gold); color:#fff; font-size:.68rem; font-weight:700;
  padding:2px 8px; border-radius:999px;
}

/* --- Topbar --- */
.dash-topbar{
  height:72px; background:#fff; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; padding:0 28px;
  position:sticky; top:0; z-index:100;
}
.dash-topbar-title{ font-size:1.1rem; font-weight:700; }
.dash-topbar-right{ display:flex; align-items:center; gap:16px; }
.dash-points-chip{
  display:flex; align-items:center; gap:8px; background:var(--gold-soft); color:var(--gold-dark);
  font-weight:700; font-size:.85rem; padding:8px 16px; border-radius:999px;
}
.dash-icon-btn{
  width:40px; height:40px; border-radius:50%; background:var(--bg-soft); border:none;
  display:flex; align-items:center; justify-content:center; color:var(--muted); position:relative;
}
.dash-menu-toggle{ display:none; background:none; border:none; font-size:1.3rem; color:var(--ink); }

/* --- Guest topbar (feed.php's guest view — no sidebar, just logo + Login) --- */
.guest-topbar{ justify-content:space-between; }
.guest-topbar-brand{
  display:flex; align-items:center; font-weight:800; font-size:1.1rem; color:var(--ink);
}
.guest-topbar-login{
  display:flex; align-items:center; gap:8px; background:var(--gold); color:#fff; font-weight:700;
  font-size:.88rem; padding:9px 20px; border-radius:999px;
}
.guest-topbar-login:hover{ background:var(--gold-dark); color:#fff; }

/* --- Main content area --- */
.dash-main{ margin-left:264px; flex:1; min-width:0; }
.dash-main.no-sidebar{ margin-left:0; }
.dash-content{ padding:28px; }

/* --- Mobile behavior --- */
@media(max-width:991px){
  .dash-sidebar{ transform:translateX(-100%); box-shadow:0 0 40px rgba(0,0,0,.15); }
  .dash-sidebar.open{ transform:translateX(0); }
  .dash-main{ margin-left:0; }
  .dash-menu-toggle{ display:flex; align-items:center; justify-content:center; }
  .dash-topbar{ padding:0 16px; }
  /* Room for the fixed bottom-nav.php dock (see dash-footer.php) so page
     content never sits underneath it on mobile. */
  
  .dash-content{ padding:18px 0.7rem; padding-bottom: 1.25rem}
  .dash-content{ padding-bottom:calc(var(--nav-height, 78px) + 10px)!important; }
  .dash-sidebar-backdrop{
    display:none; position:fixed; inset:0; background:rgba(29,35,51,.4); z-index:190;
  }
  .dash-sidebar-backdrop.show{ display:block; }
}

/* --- Sidebar backdrop (also needs a base, non-mobile-only, definition so
   JS can toggle .show safely regardless of viewport) --- */
.dash-sidebar-backdrop{ display:none; }

/* --- Nav badge variant used inline next to a link label (KYC warning) --- */
.dash-nav-link .dash-nav-badge{ margin-left:auto; }

/* --- Topbar avatar (opens the account dropdown) --- */
.dash-topbar-avatar{
  width:40px; height:40px; border-radius:50%; background:var(--blue-soft); color:var(--blue);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem;
  cursor:pointer; overflow:hidden; border:none; flex-shrink:0; position:relative;
}
.dash-topbar-avatar img{ width:100%; height:100%; object-fit:cover; }

.dash-user-menu{ position:relative; }
.dash-account-dropdown{
  position:absolute; top:calc(100% + 10px); right:0; min-width:190px; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg);
  padding:8px; opacity:0; visibility:hidden; transform:translateY(8px); transition:.15s ease; z-index:150;
}
.dash-user-menu.open .dash-account-dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dash-account-dropdown a{
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px;
  color:var(--ink); font-size:.88rem; font-weight:500;
}
.dash-account-dropdown a i{ width:16px; color:var(--muted); }
.dash-account-dropdown a:hover{ background:var(--bg-soft); color:var(--ink); }
.dash-account-dropdown hr{ margin:6px 4px; border-color:var(--line); opacity:1; }

/* --- Notification icon button badge dot (reserved for when a real
   notifications system exists — currently always hidden, no fake counts) --- */
.dash-icon-btn .dot{
  position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:50%;
  background:var(--gold); border:2px solid #fff;
}





/* ============================================================
   BASE.CSS — StarBoost shared design system
   Design tokens (--sb-*) + reset + the dash-shell layout
   (sidebar, topbar, content area) used on every logged-in page.
   Page-specific files (create-ad.css, points.css, etc.) load
   AFTER this and reference these same --sb-* variables.
   ============================================================ */

:root{
  --sb-primary:#2F6FED; --sb-primary-dark:#2557C4; --sb-primary-light:#EAF1FE;
  --sb-gold:#F5A623; --sb-gold-dark:#DC8F14; --sb-gold-light:#FFF7EA;
  --sb-purple:#6C5CE7; --sb-purple-dark:#4E3FC7; --sb-purple-light:#F0EDFC;
  --sb-green:#00B894; --sb-green-light:#E7FBF5;
  --sb-red:#E5484D; --sb-red-light:#FDECEC;
  --sb-ink:#1D2333; --sb-muted:#65708A; --sb-line:#E7E9F2;
  --sb-bg-soft:#F6F8FC;
  --sb-radius-sm:8px; --sb-radius-md:14px; --sb-radius-lg:20px;
  --sb-shadow:0 10px 28px rgba(29,35,51,.07);
}

/* ===== SHARED EMPTY STATE — one consistent "nothing here yet" look across
   the whole dashboard (team members, transactions, tickets, lists, etc.)
   instead of every page inventing its own. Pages that already have
   `<div class="dash-empty-state"><i class="..."></i><h5>...</h5><p>...</p></div>`
   get this styling for free; wrapping the icon in
   `<span class="dash-empty-icon">` additionally gives it the colored badge
   treatment used elsewhere in the app (stat tiles, info cards). ===== */
.dash-empty-state{
  text-align:center; padding:40px 24px; border-radius:var(--sb-radius-lg);
  background:#fff; border:1px solid var(--sb-border); box-shadow:var(--sb-shadow);
}
.dash-empty-state .dash-empty-icon{
  width:56px; height:56px; border-radius:50%; background:var(--sb-primary-light); color:var(--sb-primary);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin:0 auto 16px;
}
.dash-empty-state > i{
  display:block; width:56px; height:56px; line-height:56px; border-radius:50%;
  background:var(--sb-primary-light); color:var(--sb-primary); font-size:1.3rem; margin:0 auto 16px;
}
.dash-empty-state h5{font-weight:800; font-size:1rem; color:var(--sb-ink); margin-bottom:6px;}
.dash-empty-state p{color:var(--sb-text-muted); margin-bottom:0; font-size:.85rem; line-height:1.55; max-width:340px; margin-left:auto; margin-right:auto;}
.dash-empty-state .dash-empty-cta{
  display:inline-flex; align-items:center; gap:6px; margin-top:16px; background:var(--sb-primary); color:#fff;
  font-weight:700; font-size:.84rem; padding:10px 20px; border-radius:999px; text-decoration:none; transition:.2s;
}
.dash-empty-state .dash-empty-cta:hover{background:var(--sb-primary-dark); color:#fff;}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  font-family:'Poppins',sans-serif; color:var(--sb-ink); background:var(--sb-bg-soft); margin:0;
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none; color:inherit;}
h1,h2,h3,h4,h5,h6{font-weight:700; margin:0;}
img{max-width:100%;}

/* ===== DASH SHELL (mobile-first: sidebar off-canvas by default) ===== */
.dash-shell{display:block; min-height:100vh;}

.dash-sidebar-backdrop{
  display:none; position:fixed; inset:0; background:rgba(29,35,51,.45); z-index:190;
}
.dash-sidebar-backdrop.show{display:block;}

.dash-sidebar{
  width:264px; background:#fff; border-right:1px solid var(--sb-line);
  display:flex; flex-direction:column; position:fixed; top:0; left:0; bottom:0; z-index:200;
  transform:translateX(-100%); transition:transform .3s ease; overflow-y:auto;
}
.dash-sidebar.open{transform:translateX(0); box-shadow:0 0 40px rgba(0,0,0,.18);}

.dash-sidebar-logo{
  padding:22px 24px; font-weight:800; font-size:1.15rem; display:flex; align-items:center; gap:8px;
  border-bottom:1px solid var(--sb-line); color:var(--sb-ink);
}
.dash-sidebar-logo i{color:var(--sb-gold);}

.dash-user-card{
  margin:18px 16px; padding:14px; background:var(--sb-bg-soft); border-radius:var(--sb-radius-md);
  display:flex; align-items:center; gap:12px;
}
.dash-user-avatar{
  width:40px; height:40px; border-radius:50%; background:var(--sb-primary-light); color:var(--sb-primary);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.82rem; flex-shrink:0;
}
.dash-user-name{font-weight:700; font-size:.88rem; margin-bottom:2px; color:var(--sb-ink);}
.dash-user-tier{
  font-size:.7rem; font-weight:700; color:var(--sb-gold-dark); background:var(--sb-gold-light);
  padding:2px 9px; border-radius:999px; display:inline-block;
}

.dash-nav{padding:8px 12px 90px;}
.dash-nav-group-label{
  font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--sb-muted); padding:16px 12px 8px;
}
.dash-nav-link{
  display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:10px; color:var(--sb-ink);
  font-weight:500; font-size:.87rem; margin-bottom:2px; transition:.2s; position:relative;
}
.dash-nav-link i{width:16px; text-align:center; color:var(--sb-muted); flex-shrink:0;}
.dash-nav-link span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.dash-nav-link:hover{background:var(--sb-bg-soft); color:var(--sb-ink);}
.dash-nav-link.active{background:var(--sb-primary-light); color:var(--sb-primary); font-weight:700;}
.dash-nav-link.active i{color:var(--sb-primary);}
.dash-nav-badge{
  margin-left:auto; background:var(--sb-red); color:#fff; font-size:.62rem; font-weight:700;
  padding:2px 7px; border-radius:999px; flex-shrink:0;
}

/* ===== MAIN / TOPBAR ===== */
.dash-main{margin-left:0;}
.dash-topbar{
  height:64px; background:#fff; border-bottom:1px solid var(--sb-line); display:flex; align-items:center;
  justify-content:space-between; padding:0 14px; position:sticky; top:0; z-index:100;
}
.dash-topbar-title{font-size:1rem; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:55vw; min-width:0;}
.dash-menu-toggle{
  background:none; border:none; font-size:1.2rem; color:var(--sb-ink); display:flex; align-items:center;
  justify-content:center; width:34px; height:34px; flex-shrink:0;
}
.dash-topbar-right{display:flex; align-items:center; gap:12px;}

.dash-points-chip{
  display:flex; align-items:center; gap:6px; background:var(--sb-gold-light); color:var(--sb-gold-dark);
  font-weight:700; font-size:.78rem; padding:7px 12px; border-radius:999px; white-space:nowrap;
}
.dash-icon-btn{
  width:36px; height:36px; border-radius:50%; background:var(--sb-bg-soft); border:none; display:flex;
  align-items:center; justify-content:center; color:var(--sb-muted); flex-shrink:0;
}

.dash-user-menu{position:relative;}
.dash-topbar-avatar{
  width:36px; height:36px; border-radius:50%; background:var(--sb-primary-light); color:var(--sb-primary);
  border:none; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.78rem;
}
.dash-account-dropdown{
  display:none; position:absolute; top:calc(100% + 10px); right:0; background:#fff; border:1px solid var(--sb-line);
  border-radius:14px; box-shadow:0 16px 40px rgba(29,35,51,.16); padding:8px; min-width:180px; z-index:250;
}
.dash-user-menu.open .dash-account-dropdown{display:block;}
.dash-account-dropdown a{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:9px; font-size:.85rem; font-weight:600; color:var(--sb-ink);
}
.dash-account-dropdown a:hover{background:var(--sb-bg-soft);}
.dash-account-dropdown a i{width:16px; color:var(--sb-muted);}
.dash-account-dropdown hr{margin:6px 4px; border-color:var(--sb-line);}

/*.dash-content{padding:16px; padding-bottom:90px;}*/

/* ===== SHARED FORM ELEMENTS (Bootstrap overrides) ===== */
.form-label{font-size:.85rem; font-weight:600; color:var(--sb-ink); margin-bottom:8px; display:block;}
.form-control, .form-select{
  border:1.5px solid var(--sb-line); border-radius:var(--sb-radius-md); padding:11px 14px;
  font-family:'Poppins',sans-serif; font-size:.88rem; background:var(--sb-bg-soft); transition:.2s;
}
.form-control:focus, .form-select:focus{
  outline:none; border-color:var(--sb-primary); background:#fff; box-shadow:0 0 0 4px var(--sb-primary-light);
}

/* ===== RESPONSIVE: sidebar becomes permanent at desktop widths ===== */
@media(min-width:992px){
  .dash-sidebar{transform:translateX(0); position:fixed;}
  .dash-sidebar-backdrop{display:none !important;}
  .dash-main{margin-left:264px;}
  .dash-menu-toggle{display:none;}
  .dash-topbar{padding:0 28px; height:72px;}
  /* Bottom dock (bottom-nav.php) now stays visible at desktop widths too
     (see css/style.css's own @media(min-width:992px) block, which is what
     actually wins via !important since it loads after this file) — kept
     in sync here so this isn't left contradicting that decision. */
  .dash-content{padding:28px; padding-bottom:calc(var(--nav-height, 78px) + 24px);}
}

/* Canonical shared back button. Several pages (team-transaction.css,
   points-history.css, buy-points.css, token-history.css,
   team-member-details.css) duplicate the flex/gap/color part of this
   rule locally — those local copies are harmless (same values, so the
   cascade is a no-op) but any page relying on base.css alone (e.g.
   edit-ad.php via ads-dashboard.css, view-ad.php via ad-view.css) was
   previously missing display/gap/color/text-decoration entirely, so it
   rendered as a plain underlined inline link instead of the real pill
   button. Now the full component lives here once, so every page gets
   it correctly whether or not it also defines a local copy. */
.back-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  color: var(--sb-muted, #65708A);
  text-decoration: none;
  background: #fff;
  padding: 5px 15px;
  border-radius: 20px;
  margin-bottom: 18px!important;
  font-weight: 500 !important;
}
.back-link:hover{
  color: var(--sb-primary, #2F6FED);
}