/* MoahBoost Classic Panel Skin — v2 (cs1)
   Sandbox-only reskin layer for moah.moahboost.com.
   Loaded AFTER styles-DWYF33MU.css: redefines design tokens + converts the
   desktop sidebar into a classic fixed top navbar. Mobile layout untouched. */

/* ============ 1. CLASSIC PALETTE (slate + MoahBoost purple) ============ */
:root{
  --background:#0B1220;
  --foreground:#F2F4F8;
  --surface:#121A2B;
  --surface-2:#182236;
  --card:#121A2B;
  --card-foreground:#F2F4F8;
  --popover:#152238;
  --popover-foreground:#F2F4F8;
  --primary:#2563EB;
  --primary-text:#8FC2FF;
  --primary-foreground:#fff;
  --primary-glow:#38BDF8;
  --secondary:#1B2942;
  --secondary-foreground:#E2E5E8;
  --muted:#16223A;
  --muted-foreground:#97A0B0;
  --accent:#1E2A45;
  --accent-foreground:#F2F4F8;
  --border:#243350;
  --input:#243350;
  --ring:#38BDF8;
  --radius:.75rem;
}
.user-shell{ background:var(--background); }

/* ============ 2. DESKTOP: SIDEBAR -> CLASSIC TOP NAVBAR ============ */
@media (min-width:768px){
  aside[class*="w-64"]{
    position:fixed!important;
    left:0!important; right:0!important; top:0!important; bottom:auto!important;
    width:100%!important; height:auto!important;
    flex-direction:row!important; align-items:center!important;
    gap:.75rem!important;
    padding:.55rem 1.25rem!important;
    border-right:0!important;
    border-bottom:1px solid var(--border)!important;
    background:rgba(15,23,42,.94)!important;
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    transform:none!important;
    z-index:60!important;
    box-shadow:0 6px 24px -12px rgba(0,0,0,.55);
  }
  /* neutralize the old vertical block paddings/borders inside the bar */
  aside[class*="w-64"] > *{
    height:auto!important; margin:0!important;
    border-top:0!important; padding:0!important;
    flex-shrink:0;
  }
  /* header row (logo + wallet chip): compact */
  aside[class*="w-64"] > *:first-child{ display:flex; align-items:center; gap:.75rem; }
  /* wallet pill: natural width, no stretch */
  aside[class*="w-64"] [class*="border-primary/10"]{ width:auto!important; white-space:nowrap; }
  aside[class*="w-64"] [class*="w-full"]{ width:auto!important; }
  /* nav area: horizontal scroll rail, centered */
  aside[class*="w-64"] [class*="overflow-y-auto"]{
    flex:1 1 auto!important;
    display:flex; flex-direction:row!important; align-items:center!important;
    overflow-x:auto!important; overflow-y:hidden!important;
    gap:.25rem!important; padding:0!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  aside[class*="w-64"] [class*="overflow-y-auto"]::-webkit-scrollbar{ display:none; }
  /* group labels (MAIN / MONEY / ...): hidden in navbar mode */
  aside[class*="w-64"] [class*="tracking-widest"]{ display:none!important; }
  /* groups become inline rows */
  aside[class*="w-64"] [class*="flex-col"]{ flex-direction:row!important; align-items:center; gap:.25rem; }
  /* nav items: compact classic pills */
  aside[class*="w-64"] nav a,
  aside[class*="w-64"] nav button,
  aside[class*="w-64"] [class*="overflow-y-auto"] a,
  aside[class*="w-64"] [class*="overflow-y-auto"] button{
    width:auto!important; white-space:nowrap;
    padding:.5rem .8rem!important;
    border-radius:.55rem;
    font-size:.8rem;
  }
  /* Download App button: compact gradient pill at the right end */
  aside[class*="w-64"] [class*="gradient-primary"]{
    width:auto!important; margin:0!important;
    padding:.5rem 1.05rem!important;
  }
  /* content: drop the old 16rem left gutter, clear the fixed bar */
  .user-content{ margin-left:0!important; padding-top:5.25rem!important; }
  /* in-page sticky bars must clear the navbar too */
  [class*="sticky"][class*="top-0"]{ top:3.6rem; }
}

/* ============ 3. DASHBOARD CARDS — CLASSIC POLISH (cs2) ============ */
/* classic panels: flat bordered cards, crisp shadows, accent notices */
.user-content [class*="rounded-2xl"][class*="bg-surface"]{
  border-radius:.8rem;
  border-color:#2A3B58;
  box-shadow:0 10px 28px -18px rgba(0,0,0,.55);
}
/* pinned notice strips: purple accent edge, tamer radius */
.user-content [class*="snap-center"]{
  border-radius:1rem;
  border-left:3px solid var(--primary);
}
/* primary buttons: flat classic purple + soft glow (was glossy gradient) */
.user-content .gradient-primary{
  background:var(--primary)!important;
  box-shadow:0 8px 20px -10px rgba(37,99,235,.55);
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.user-content .gradient-primary:hover{
  background:var(--primary-glow)!important;
  box-shadow:0 10px 24px -10px rgba(37,99,235,.7);
}
/* secondary bordered tiles: crisper hover edge */
.user-content [class*="rounded-xl"][class*="border-border"]:hover{
  border-color:#3D527A;
}

/* ============ 4. ORDER FORM & SERVICE PICKERS — CLASSIC PRO INPUTS (cs3) ============ */
/* form fields: inset dark, purple focus glow */
.user-content input,
.user-content textarea,
.user-content select{
  background:#0E1526;
  border-color:#2A3B58;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.user-content input:focus,
.user-content textarea:focus,
.user-content select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(135,71,252,.16);
  outline:none;
}
/* platform & service tiles: professional hover lift + purple edge */
.user-content button[class*="rounded-2xl"]:hover,
.user-content a[class*="rounded-2xl"]:hover{
  border-color:rgba(135,71,252,.45);
  transform:translateY(-2px);
  transition:transform .15s ease, border-color .15s ease;
}

/* ============ 5. DASHBOARD ARRANGEMENT — CLASSIC TWO-COLUMN (cs4) ============ */
/* .mb-dash is added by mb-dash-arrange.js on /dashboard only. */
@media (min-width:1024px){
  .user-content.mb-dash{ max-width:1180px; }
  .mb-dash-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 350px;
    grid-template-areas:
      "wallet  actions"
      "quick   featured"
      "recent  pinned";
    gap:1.1rem 1.4rem;
    align-items:start;
  }
  .mb-dash .mb-sec-wallet{ grid-area:wallet; }
  .mb-dash .mb-sec-quick{ grid-area:quick; }
  .mb-dash .mb-recent{ grid-area:recent; }
  .mb-dash .mb-sec-actions{ grid-area:actions; }
  .mb-dash .mb-sec-featured{ grid-area:featured; }
  .mb-dash .mb-sec-pinned{ grid-area:pinned; }
  /* side-column tiles: compact 2-up grids */
  .mb-dash .mb-sec-actions [class*="grid-cols"],
  .mb-dash .mb-sec-featured [class*="grid-cols"]{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
/* pinned notices: slim single banner (first card only) */
/* slim single banner: first notice only */
.mb-dash .mb-sec-pinned .space-y-2 > div ~ div{ display:none!important; }
/* --- My Recent Orders card --- */
.mb-recent{
  border-radius:.8rem;
  border:1px solid #2A3244;
  background:var(--surface);
  box-shadow:0 10px 28px -18px rgba(0,0,0,.55);
  padding:1rem 1.1rem;
}
.mb-recent-head{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.35rem; }
.mb-recent-title{ font-size:.95rem; font-weight:700; color:var(--foreground); }
.mb-recent-viewall{ font-size:.75rem; font-weight:700; color:var(--primary-text); text-decoration:none; }
.mb-recent-viewall:hover{ text-decoration:underline; }
.mb-recent-row{
  display:flex; align-items:center; gap:.65rem;
  padding:.6rem 0; border-top:1px solid var(--border);
  text-decoration:none;
}
.mb-recent-row:hover .mb-recent-svc{ color:var(--primary-text); }
.mb-recent-status{
  flex:0 0 auto;
  font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  padding:.2rem .5rem; border-radius:999px; white-space:nowrap;
}
.mb-recent-info{ min-width:0; flex:1; display:flex; flex-direction:column; gap:.1rem; }
.mb-recent-svc{
  font-size:.78rem; font-weight:600; color:var(--foreground);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mb-recent-meta{ font-size:.66rem; color:var(--muted-foreground); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mb-recent-charge{ flex:0 0 auto; }
.mb-recent-amt{ font-size:.8rem; font-weight:700; color:var(--success); white-space:nowrap; }
.mb-recent-empty{ padding:1.4rem 0 .9rem; text-align:center; }
.mb-recent-emptytitle{ font-size:.9rem; font-weight:700; color:var(--foreground); }
.mb-recent-emptysub{ font-size:.74rem; color:var(--muted-foreground); margin-top:.25rem; }
.mb-recent-cta{
  display:inline-block; margin-top:.8rem; padding:.5rem 1.05rem; border-radius:.55rem;
  background:var(--primary); color:var(--primary-foreground);
  font-size:.8rem; font-weight:700; text-decoration:none;
  box-shadow:0 8px 20px -10px rgba(37,99,235,.55);
}
.mb-recent-cta:hover{ background:var(--primary-glow); }
/* status pills */
.mb-pill-pending{ background:rgba(242,166,24,.14); color:#f2a618; }
.mb-pill-processing{ background:rgba(96,165,250,.14); color:#60A5FA; }
.mb-pill-completed{ background:rgba(57,195,75,.14); color:#39c34b; }
.mb-pill-partial{ background:rgba(251,146,60,.15); color:#fb923c; }
.mb-pill-cancelled{ background:rgba(253,43,46,.13); color:#fd6a6c; }

/* ===== 5. MOBILE COMPACT (phones, dashboard) ===== */
@media (max-width:767px){
  .mb-dash .mb-sec-wallet{ padding:12px !important; }
  .mb-dash .mb-sec-wallet > .flex-wrap{ gap:8px !important; }
  .mb-dash .mb-sec-wallet .text-3xl{ font-size:clamp(1.45rem,8.5vw,1.7rem) !important; line-height:1.1 !important; margin-top:2px !important; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
  .mb-dash .mb-sec-wallet .h-11{ height:38px !important; width:38px !important; }
  .mb-dash .mb-sec-wallet .h-11 svg{ width:18px !important; height:18px !important; }
  .mb-dash .mb-sec-wallet .mt-4.flex-col{ flex-direction:row !important; gap:8px !important; margin-top:10px !important; }
  .mb-dash .mb-sec-wallet .mt-4.flex-col > a{ flex:1 1 0% !important; padding-top:9px !important; padding-bottom:9px !important; white-space:nowrap; }
  .mb-dash .mb-sec-wallet > button{ margin-top:8px !important; padding-top:8px !important; padding-bottom:8px !important; }
  .mb-dash-grid > .mb-4:first-child{ margin-bottom:10px !important; }
  .mb-dash-grid > .mb-4:first-child h1{ font-size:1.15rem !important; }
  .mb-dash .mb-sec-quick{ padding:12px !important; }
  .mb-dash .mb-sec-quick .grid{ gap:8px !important; }
  .mb-dash .mb-sec-quick .grid > a{ padding:8px 6px !important; }
  .mb-dash .mb-sec-quick .grid > a svg{ width:22px !important; height:22px !important; }
  .mb-dash .mb-sec-quick .mb-3, .mb-dash .mb-sec-quick .mb-4{ margin-bottom:8px !important; }
  .mb-recent{ padding:12px !important; }
  .mb-recent-head{ margin-bottom:.3rem !important; }
  .mb-recent-row{ padding:8px 10px !important; gap:.5rem !important; }
  .md\:hidden .flex.max-w-2xl{ padding-top:.4rem !important; padding-bottom:.4rem !important; }
  .md\:hidden ul.grid-cols-4 > li > a{ height:52px !important; }
  .mb-dash{ overflow-x:hidden; }
  .mb-dash{ padding-bottom:160px !important; }
}
/* debug sim: apply the same phone rules at desktop width for visual verification */
.mb-sim-mobile .mb-dash{ max-width:430px !important; margin-left:auto !important; margin-right:auto !important; }
.mb-sim-mobile .mb-dash .mb-sec-quick .grid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
.mb-sim-mobile .mb-dash .mb-sec-wallet{ padding:12px !important; }
.mb-sim-mobile .mb-dash .mb-sec-wallet > .flex-wrap{ gap:8px !important; }
.mb-sim-mobile .mb-dash .mb-sec-wallet .text-3xl{ font-size:clamp(1.45rem,8.5vw,1.7rem) !important; line-height:1.1 !important; margin-top:2px !important; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.mb-sim-mobile .mb-dash .mb-sec-wallet .h-11{ height:38px !important; width:38px !important; }
.mb-sim-mobile .mb-dash .mb-sec-wallet .h-11 svg{ width:18px !important; height:18px !important; }
.mb-sim-mobile .mb-dash .mb-sec-wallet .mt-4.flex-col{ flex-direction:row !important; gap:8px !important; margin-top:10px !important; }
.mb-sim-mobile .mb-dash .mb-sec-wallet .mt-4.flex-col > a{ flex:1 1 0% !important; padding-top:9px !important; padding-bottom:9px !important; white-space:nowrap; }
.mb-sim-mobile .mb-dash .mb-sec-wallet > button{ margin-top:8px !important; padding-top:8px !important; padding-bottom:8px !important; }
.mb-sim-mobile .mb-dash-grid > .mb-4:first-child{ margin-bottom:10px !important; }
.mb-sim-mobile .mb-dash-grid > .mb-4:first-child h1{ font-size:1.15rem !important; }
.mb-sim-mobile .mb-dash .mb-sec-quick{ padding:12px !important; }
.mb-sim-mobile .mb-dash .mb-sec-quick .grid{ gap:8px !important; }
.mb-sim-mobile .mb-dash .mb-sec-quick .grid > a{ padding:8px 6px !important; }
.mb-sim-mobile .mb-dash .mb-sec-quick .grid > a svg{ width:22px !important; height:22px !important; }
.mb-sim-mobile .mb-dash .mb-sec-quick .mb-3, .mb-dash .mb-sec-quick .mb-4{ margin-bottom:8px !important; }
.mb-sim-mobile .mb-recent{ padding:12px !important; }
.mb-sim-mobile .mb-recent-head{ margin-bottom:.3rem !important; }
.mb-sim-mobile .mb-recent-row{ padding:8px 10px !important; gap:.5rem !important; }
.mb-sim-mobile .md\:hidden .flex.max-w-2xl{ padding-top:.4rem !important; padding-bottom:.4rem !important; }
.mb-sim-mobile .md\:hidden ul.grid-cols-4 > li > a{ height:52px !important; }
.mb-sim-mobile .mb-dash{ overflow-x:hidden; }
.mb-sim-mobile .mb-dash{ padding-bottom:160px !important; }
.mb-sim-mobile .mb-dash .mb-4:first-child{ margin-bottom:10px !important; }
.mb-sim-mobile .mb-dash .mb-4:first-child h1{ font-size:1.15rem !important; }

/* ===== 6. ENTERPRISE SHINE (cs9) ===== */
/* primary CTAs: blue->sky gradient + glow + hover lift */
.user-content .gradient-primary{
  background:linear-gradient(135deg,#2563EB 0%,#3B82F6 55%,#38BDF8 100%)!important;
  box-shadow:0 8px 22px -8px rgba(37,99,235,.65), inset 0 1px 0 rgba(255,255,255,.18)!important;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
}
.user-content .gradient-primary:hover{
  background:linear-gradient(135deg,#1D4ED8 0%,#2563EB 55%,#38BDF8 100%)!important;
  box-shadow:0 12px 28px -8px rgba(37,99,235,.8), inset 0 1px 0 rgba(255,255,255,.2)!important;
  transform:translateY(-1px);
}
@media (min-width:768px){
  aside[class*="w-64"] .gradient-primary{
    background:linear-gradient(135deg,#2563EB 0%,#3B82F6 55%,#38BDF8 100%)!important;
    box-shadow:0 6px 18px -6px rgba(37,99,235,.6), inset 0 1px 0 rgba(255,255,255,.18)!important;
  }
  /* navbar: soft sky shine line under the bar */
  aside[class*="w-64"]{
    box-shadow:0 1px 0 rgba(56,189,248,.22), 0 8px 28px -14px rgba(2,8,23,.85)!important;
  }
}
/* wallet balance: soft emerald shine */
.user-content .mb-sec-wallet .text-success,
.user-content .text-3xl.text-success{
  text-shadow:0 0 18px rgba(52,211,153,.35);
}
/* main cards: hover lift + sky glow edge */
.user-content [class*="rounded-2xl"][class*="bg-surface"]:hover{
  border-color:#3D527A;
  box-shadow:0 14px 34px -18px rgba(0,0,0,.6), 0 0 0 1px rgba(56,189,248,.08);
  transform:translateY(-1px);
}
/* chat FAB: blue->sky gradient (was purple) */
[class*="from-[#7C3AED]"]{
  background-image:linear-gradient(to bottom right,#2563EB,#38BDF8)!important;
  box-shadow:0 10px 26px -10px rgba(56,189,248,.55)!important;
}
/* focus rings: sky glow */
.user-content input:focus,.user-content textarea:focus,.user-content select:focus{
  box-shadow:0 0 0 3px rgba(56,189,248,.22)!important;
}
/* inline-styled purple stragglers (announcement link fallback, airtime promo) */
[style*="#7c3aed"]{ background:linear-gradient(135deg,#2563EB,#38BDF8)!important; }
[class*="from-[#9333ea]"]{ background-image:linear-gradient(to bottom right,#2563EB,#1D4ED8,#38BDF8)!important; }

/* ===== SECTION 5 (cs11): SERVICES PAGE POLISH — scoped to /services layout wrapper only ===== */
/* --- service cards: classic lift + hover glow --- */
.mx-auto.max-w-4xl.px-4.py-6.pb-28.space-y-5 .flex.flex-col.rounded-2xl.border.border-border.bg-card.p-4{
  position:relative; overflow:hidden; border-radius:14px;
  background:linear-gradient(180deg,rgba(37,99,235,.05),rgba(37,99,235,0) 46%),#151921;
  box-shadow:0 1px 2px rgba(0,0,0,.25);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.mx-auto.max-w-4xl.px-4.py-6.pb-28.space-y-5 .flex.flex-col.rounded-2xl.border.border-border.bg-card.p-4:hover{
  transform:translateY(-2px);
  border-color:rgba(56,189,248,.45);
  box-shadow:0 10px 26px -10px rgba(37,99,235,.4),0 2px 6px rgba(0,0,0,.3);
}
.mx-auto.max-w-4xl.px-4.py-6.pb-28.space-y-5 .flex.flex-col.rounded-2xl.border.border-border.bg-card.p-4::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg,transparent,#38BDF8,transparent);
  opacity:0; transition:opacity .18s ease;
}
.mx-auto.max-w-4xl.px-4.py-6.pb-28.space-y-5 .flex.flex-col.rounded-2xl.border.border-border.bg-card.p-4:hover::before{opacity:1;}
/* --- platform icon box: blue tint --- */
.mx-auto.max-w-4xl.px-4.py-6.pb-28.space-y-5 .grid.h-9.w-9.shrink-0.place-items-center.rounded-lg.bg-muted{
  background:rgba(37,99,235,.14);
  box-shadow:inset 0 0 0 1px rgba(56,189,248,.18);
}
/* --- price: blue-sky gradient emphasis --- */
.mx-auto.max-w-4xl.px-4.py-6.pb-28.space-y-5 .mt-3.flex.items-baseline.gap-1 > span:first-child{
  background:linear-gradient(135deg,#38BDF8,#2563EB);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
/* --- status dot: emerald glow --- */
.mx-auto.max-w-4xl.px-4.py-6.pb-28.space-y-5 .h-1\.5.w-1\.5.rounded-full.bg-emerald-500{
  box-shadow:0 0 6px 1px rgba(16,185,129,.55);
}
/* --- order button: blue gradient + press feel --- */
.mx-auto.max-w-4xl.px-4.py-6.pb-28.space-y-5 button.mt-3.flex.w-full.items-center.justify-center.gap-2.rounded-xl.bg-primary{
  background:linear-gradient(135deg,#2563EB 0%,#1D4ED8 55%,#38BDF8 135%)!important;
  box-shadow:0 3px 12px -3px rgba(37,99,235,.5),inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
}
.mx-auto.max-w-4xl.px-4.py-6.pb-28.space-y-5 button.mt-3.flex.w-full.items-center.justify-center.gap-2.rounded-xl.bg-primary:hover{
  transform:translateY(-1px); filter:brightness(1.08);
  box-shadow:0 6px 18px -4px rgba(37,99,235,.6),inset 0 1px 0 rgba(255,255,255,.14);
}
.mx-auto.max-w-4xl.px-4.py-6.pb-28.space-y-5 button.mt-3.flex.w-full.items-center.justify-center.gap-2.rounded-xl.bg-primary:active{ transform:translateY(0); }
/* --- featured pill: sky gradient --- */
.mx-auto.max-w-4xl.px-4.py-6.pb-28.space-y-5 .rounded-lg.bg-primary.px-3.py-1\.5.text-xs.font-bold.text-primary-foreground{
  background:linear-gradient(135deg,#2563EB,#38BDF8)!important;
  box-shadow:0 2px 10px -2px rgba(37,99,235,.5);
}
/* --- platform chips + top tag chips: hover lift, active glow --- */
.mx-auto.max-w-4xl.px-4.py-6.pb-28.space-y-5 .-mx-4.px-4.overflow-x-auto button,
.mx-auto.max-w-4xl.px-4.py-6.pb-28.space-y-5 .flex.flex-wrap.items-center.gap-2 button{
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.mx-auto.max-w-4xl.px-4.py-6.pb-28.space-y-5 .-mx-4.px-4.overflow-x-auto button:hover,
.mx-auto.max-w-4xl.px-4.py-6.pb-28.space-y-5 .flex.flex-wrap.items-center.gap-2 button:hover{
  transform:translateY(-1px); border-color:rgba(56,189,248,.5);
}
.mx-auto.max-w-4xl.px-4.py-6.pb-28.space-y-5 .-mx-4.px-4.overflow-x-auto button.bg-primary{
  box-shadow:0 0 0 1px rgba(56,189,248,.4),0 4px 14px -4px rgba(37,99,235,.55);
}
/* --- load more: quiet blue hover --- */
.mx-auto.max-w-4xl.px-4.py-6.pb-28.space-y-5 button.w-full.items-center.justify-center.gap-2.rounded-xl.border.border-border.bg-card:hover{
  border-color:rgba(56,189,248,.45)!important; color:#7DD3FC;
}

/* ============ 5b. DASHBOARD PHONE ARRANGEMENT — cs15 (order + compact) ============ */
@media (max-width:1023px){
  .user-content.mb-dash .mb-dash-grid{
    display:flex; flex-direction:column; gap:.85rem;
  }
  .user-content.mb-dash .mb-dash-grid > *{ order:99 !important; margin-top:0 !important; margin-bottom:0 !important; }
  .user-content.mb-dash .mb-dash-grid > .mb-sec-welcome{ order:1 !important; padding:.8rem 1rem !important; }
  .user-content.mb-dash .mb-dash-grid > .mb-sec-welcome h1,
  .user-content.mb-dash .mb-dash-grid > .mb-sec-welcome h2{ font-size:1.05rem !important; }
  .user-content.mb-dash .mb-dash-grid > .mb-sec-wallet{ order:2 !important; }
  .user-content.mb-dash .mb-dash-grid > .mb-sec-quick{ order:3 !important; }
  .user-content.mb-dash .mb-dash-grid > .mb-recent{ order:4 !important; }
  .user-content.mb-dash .mb-dash-grid > .mb-sec-actions{ order:5 !important; }
  .user-content.mb-dash .mb-dash-grid > .mb-sec-featured{ order:6 !important; }
  .user-content.mb-dash .mb-dash-grid > .mb-sec-pinned{ order:7 !important; }
}

/* ============ 5c. DASHBOARD SHORTCUTS TOGGLE — cs16 (tiles behind toggle under Quick Order) ============ */
/* Collapsed by default: only the toggle pill shows inside the shortcuts section */
.mb-dash .mb-sec-actions:not(.mbopen) > *:not(#mbTilesToggle){ display:none !important; }
#mbTilesToggle{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; padding:12px 16px; border-radius:12px;
  border:1px solid rgba(56,189,248,.30); background:rgba(56,189,248,.08);
  color:#7DD3FC; font-size:13.5px; font-weight:600; letter-spacing:.02em;
  cursor:pointer; transition:all .15s ease; font-family:inherit;
}
#mbTilesToggle:hover{ background:rgba(56,189,248,.14); border-color:rgba(56,189,248,.5); color:#fff; }
#mbTilesToggle .mb-chev{ flex:0 0 auto; transition:transform .2s ease; }
#mbTilesToggle.mbopen .mb-chev{ transform:rotate(180deg); }
/* Desktop: shortcuts section moves into the LEFT column directly under Quick Order */
@media (min-width:1024px){
  .mb-dash .mb-dash-grid{
    grid-template-areas:
      "wallet  featured"
      "quick   pinned"
      "actions ."
      "recent  .";
  }
  .mb-dash .mb-sec-actions [class*="grid-cols"]{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
}
/* Phone: shortcuts section moves directly under Quick Order */
@media (max-width:1023px){
  .user-content.mb-dash .mb-dash-grid > .mb-sec-actions{ order:4 !important; }
  .user-content.mb-dash .mb-dash-grid > .mb-recent{ order:5 !important; }
}

/* ============ 6. NAVBAR DECLUTTER — cs17 (owner: "clear all we build") ============ */
/* Desktop/tablet >=768px: the navbar rail of inline links is cleared entirely —
   all navigation lives in the three-dash menu (assets/mb-dash-drawer.js).
   Logo + wallet chip + Download App + the dashes stay in the bar.
   Phone <768px unchanged (slide-in drawer has all links). */
@media (min-width:768px){
  aside[class*="w-64"] [class*="overflow-y-auto"]{ display:none !important; }
}

/* ============ 6b. HEADER SPREAD FIX — cs18 (owner: header clumping after cs17 clear) ============ */
/* The cleared navbar rail (cs17) was also the flex-1 spacer that pushed the
   Download App + dashes group to the right edge; hiding it made that group
   clump next to the wallet chip. Push the bar's footer group right again. */
@media (min-width:768px){
  aside[class*="w-64"] > div[class*="border-t"]:last-child{ margin-left:auto !important; }
}

/* ============ CLEAN-TICK DESKTOP: PERMANENT LEFT SIDEBAR (cs19, Oct 24) ============
   Owner: "make arrangements like this for desktop" (CleanTick screenshot: fixed left
   sidebar with profile/balance card, full vertical nav rail, Download App pinned at
   the bottom; content on the right with its own header). At >=1024px the aside goes
   back to being a fixed 256px left sidebar; the 768-1023px top-bar mode and the
   <768px mobile drawer stay untouched. Must appear LAST in this file so its
   !important overrides win over the 768px top-bar block (cs17 rail hide, cs18
   footer margin, .user-content gutter). */
@media (min-width:1024px){
  /* --- sidebar shell --- */
  aside[class*="w-64"]{
    left:0!important; right:auto!important; top:0!important; bottom:0!important;
    width:256px!important; max-width:256px!important;
    height:100vh!important; min-height:100vh!important;
    flex-direction:column!important; align-items:stretch!important;
    gap:.6rem!important;
    padding:1.05rem .8rem .9rem!important;
    border-right:1px solid var(--border)!important; border-bottom:0!important;
    transform:none!important;
    overflow:hidden!important;
    box-shadow:6px 0 24px -18px rgba(0,0,0,.55);
  }
  aside[class*="w-64"] > *{ flex-shrink:0; height:auto!important; margin:0!important; padding:0!important; border-top:0!important; }
  aside[class*="w-64"] > *:first-child{ display:inline-flex; align-items:center; }
  /* --- logo row --- */
  aside[class*="w-64"] > a:first-of-type, aside[class*="w-64"] > a[href="/create"]:has(img){ display:inline-flex; align-items:center; gap:.6rem; padding:.15rem .2rem!important; }
  /* --- wallet chip -> balance card (full width, pill on the right) --- */
  aside[class*="w-64"] [class*="border-primary/10"]{
    width:100%!important; max-width:100%!important;
    display:flex!important; align-items:center; justify-content:space-between;
    gap:.5rem; padding:.65rem .8rem!important;
    border-radius:.8rem!important; white-space:nowrap!important;
  }
  aside[class*="w-64"] [class*="w-full"]{ width:100%!important; }
  /* --- nav rail: vertical, scrollable, groups stacked --- */
  aside[class*="w-64"] [class*="overflow-y-auto"]{
    flex:1 1 auto!important; min-height:0!important;
    display:flex!important; flex-direction:column!important; align-items:stretch!important;
    overflow-x:hidden!important; overflow-y:auto!important;
    gap:.2rem!important; padding:.1rem .1rem .1rem 0!important;
    width:100%!important;
    scrollbar-width:thin;
  }
  aside[class*="w-64"] [class*="overflow-y-auto"]::-webkit-scrollbar{ width:4px; display:block; }
  /* group labels (MAIN / MONEY / ...) visible again */
  aside[class*="w-64"] [class*="tracking-widest"]{
    display:block!important; margin:.85rem 0 .25rem!important; padding:0 .7rem!important;
    font-size:.62rem; letter-spacing:.16em; opacity:.72;
  }
  /* groups stack vertically */
  aside[class*="w-64"] [class*="flex-col"]{ flex-direction:column!important; align-items:stretch!important; gap:.2rem!important; }
  /* nav items: full-width rows */
  aside[class*="w-64"] nav a,
  aside[class*="w-64"] nav button,
  aside[class*="w-64"] [class*="overflow-y-auto"] a,
  aside[class*="w-64"] [class*="overflow-y-auto"] button{
    width:100%!important; display:flex; align-items:center; gap:.6rem;
    white-space:nowrap; text-align:left;
    padding:.55rem .7rem!important; border-radius:.6rem;
    font-size:.82rem;
  }
  /* --- footer (Download App): pinned at the sidebar bottom --- */
  aside[class*="w-64"] > div[class*="border-t"]:last-child{
    margin-left:0!important; margin-top:auto!important;
    display:flex; flex-direction:column; align-items:stretch; gap:.55rem;
    padding-top:.8rem!important; border-top:1px solid var(--border)!important;
  }
  aside[class*="w-64"] [class*="gradient-primary"]{
    width:100%!important; justify-content:center;
    padding:.6rem .8rem!important; margin:0!important;
    white-space:nowrap;
  }
  /* --- three-dashes button + panel: not needed with a permanent rail --- */
  #mbddBtn, #mbddPanel{ display:none!important; }
  /* --- content: left gutter for the sidebar, top bar gone --- */
  .user-content{ margin-left:256px!important; padding-top:1.4rem!important; }
  [class*="sticky"][class*="top-0"]{ top:0!important; }
}

/* ============ CLEAN-TICK RECIPE, EXACT SPECS FROM THEIR SOURCE (cs20, Oct 24) ============
   Pulled from cleantickpanel.com /app/views/TechSMM/css/{modern-ui,enhance}.css:
   --mu-void #0d0f14 sidebar bg; items radius 10px; .menu_item.active =
   bg rgba(61,139,255,.1) + ::before 3px accent bar (#3d8bff, left:0, top:6,
   bottom:6, radius 3); .menu_icon = 28x28 chip radius 8 bg rgba(255,255,255,.04);
   .menu_name bold; hover bg transition .15s; shadow 0 4px 12px rgba(0,0,0,.18);
   FLAT list (their sidebar shows no group labels); balance card with blue->green
   gradient pill. Scoped >=1024px, appended AFTER cs19 so it wins. */
@media (min-width:1024px){
  /* sidebar surface: their "void" panel */
  aside[class*="w-64"]{
    background:#0d0f14 !important;
    backdrop-filter:none; -webkit-backdrop-filter:none;
    border-right:1px solid rgba(255,255,255,.08) !important;
    box-shadow:1px 0 2px rgba(0,0,0,.2), 4px 0 12px rgba(0,0,0,.18);
  }
  /* logo row: breathing room back after the > * reset */
  aside[class*="w-64"] > div[class*="justify-between"]{
    padding:.9rem .9rem .45rem !important;
  }
  aside[class*="w-64"] > div[class*="justify-between"] img{ max-height:34px; width:auto; }
  /* wallet chip -> CleanTick balance card (blue->green gradient pill feel) */
  aside[class*="w-64"] > div[class*="border-success/20"]{
    margin:0 .55rem .35rem !important;
    background:linear-gradient(135deg, rgba(61,139,255,.10), rgba(34,197,143,.14)) !important;
    border:1px solid rgba(255,255,255,.10) !important;
    border-radius:.7rem !important;
    padding:.6rem .75rem !important;
    box-shadow:0 1px 2px rgba(0,0,0,.2);
  }
  /* their sidebar is a FLAT list: no group labels */
  aside[class*="w-64"] [class*="tracking-widest"]{ display:none !important; margin:0 !important; }
  aside[class*="w-64"] [class*="overflow-y-auto"]{ gap:.15rem !important; }
  /* nav items: their .menu_item (radius 10, .15s bg transition, bold name) */
  aside[class*="w-64"] nav a,
  aside[class*="w-64"] [class*="overflow-y-auto"] a,
  aside[class*="w-64"] [class*="overflow-y-auto"] button{
    border-radius:.625rem !important;
    font-weight:600;
    transition:background .15s ease, color .15s ease;
    margin-top:.15rem !important;
  }
  aside[class*="w-64"] nav a:hover,
  aside[class*="w-64"] [class*="overflow-y-auto"] a:hover{
    background:rgba(255,255,255,.045) !important;
  }
  /* icon chips: their .menu_icon (28x28, radius 8, faint tile) */
  aside[class*="w-64"] nav a svg,
  aside[class*="w-64"] [class*="overflow-y-auto"] a svg{
    background:rgba(255,255,255,.045);
    padding:5px;
    border-radius:8px;
    flex-shrink:0;
  }
  /* active item: their .menu_item.active (blue tint + 3px left accent bar) */
  aside[class*="w-64"] nav a[class*="bg-primary/10"],
  aside[class*="w-64"] [class*="overflow-y-auto"] a[class*="bg-primary/10"]{
    background:rgba(61,139,255,.12) !important;
    position:relative;
  }
  aside[class*="w-64"] nav a[class*="bg-primary/10"]::before,
  aside[class*="w-64"] [class*="overflow-y-auto"] a[class*="bg-primary/10"]::before{
    content:"";
    position:absolute;
    left:0; top:6px; bottom:6px;
    width:3px;
    border-radius:3px;
    background:#3d8bff;
  }
  /* footer divider: hairline like theirs */
  aside[class*="w-64"] > div[class*="border-t"]{
    border-top:1px solid rgba(255,255,255,.08) !important;
  }
}

/* ============ TOOLS GROUP OFF THE DESKTOP SIDEBAR (cs21, Oct 24) ============
   Owner: "there vn in new order when refresh" — with the new permanent sidebar
   the TOOLS group (Virtual Numbers, Buy Airtime, Rent Panel, WhatsApp Channel,
   Watch & Learn, injected into the rail by mb-dash-drawer.js drawerTools) became
   permanently visible on desktop; it was built for the phone drawer + tablet menu.
   CleanTick's sidebar has no tools section, so hide them here. Phone (<768) drawer
   and tablet (768-1023) three-dash panel keep them (this block is >=1024 only). */
@media (min-width:1024px){
  /* Oct 28: Virtual Numbers + Own Your Panel are now permanent sidebar items
     (owner request) — only the promo/external tool links stay hidden. */
  aside[class*="w-64"] nav a[href*="/airtime"],
  aside[class*="w-64"] nav a[href*="whatsapp.com/channel"],
  aside[class*="w-64"] nav a[href*="youtube.com/shorts"]{
    display:none !important;
  }
}

/* ===== Oct 28: OLD React support chat (SupportChatWidget) OFF per owner =====
   Bottom-left purple gradient button on member SPA pages. The new purple
   Support Center (mb-support-center.js, right side) is the only support UI. */
button[class*="from-[#7C3AED]"][class*="left-4"]{ display:none !important; }

/* ===== Oct 28: "Join Advertising Program" box removed from Referral page (prod, per owner) ===== */
section[class*="from-[#0f1f17]"]{ display:none !important; }

/* ===== Oct 28: AppShell duplicate support FAB (purple "+" speed-dial, WhatsApp/Telegram)
   removed — the blue MoahBoost Support Center is the only support launcher ===== */
button[aria-label="Contact support"], button[aria-label="Close support options"],
div[class*="6.5rem+env(safe-area-inset-bottom)"]{ display:none !important; }