/* Scope everything to .ygdash */
.ygdash { --gap: 1rem; --card-radius: .75rem; }

.ygdash-desktop { display:block; }
.ygdash-mobile { display:none; }

@media (max-width: 768px){
  .ygdash-desktop { display:none; }
  .ygdash-mobile { display:block; }
}

/* Sections */
.ygdash-section { margin: 0 0 calc(var(--gap)*2); }
.ygdash-section__hd { margin-bottom: var(--gap); }
.ygdash-section__title { margin: 0 0 .25rem; font-size: 1.25rem; }
.ygdash-section__desc { margin: 0; opacity:.8; }

/* Cards (generic) */
.ygdash-cards { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: var(--gap); }
.ygdash-card { border:1px solid rgba(0,0,0,.07); border-radius: var(--card-radius); padding: 1rem; background: #fff; }
.ygdash-card__title { margin:0 0 .5rem; font-size:1rem; }
.ygdash-card__meta { font-size:.9rem; opacity:.8; }

/* TEAM: enforce exactly 5 per row on wide screens (without forcing container width) */
.ygdash .ygdash-cards.ygdash-cards--team { grid-template-columns: repeat(5, minmax(0,1fr)) !important; }
@media (max-width: 1280px){ .ygdash .ygdash-cards.ygdash-cards--team { grid-template-columns: repeat(4, minmax(0,1fr)) !important; } }
@media (max-width: 1024px){ .ygdash .ygdash-cards.ygdash-cards--team { grid-template-columns: repeat(3, minmax(0,1fr)) !important; } }
@media (max-width: 860px){  .ygdash .ygdash-cards.ygdash-cards--team { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
/* On mobile we convert to slider via JS, overriding grid entirely */

.ygdash-team-card__media img { width:100%; height:auto; display:block; border-radius: var(--card-radius); }
.ygdash-team-card__actions { display:flex; gap:.5rem; flex-wrap:wrap; }

/* Course-style buttons (match your .yg365-course-actions .yg3-btn), scoped */
.ygdash .yg3-btn,
.ygdash .ygdash-btn {
  background:#fff !important;
  color:#111827 !important;
  border:1px solid #e5e7eb !important;
  font-weight:700;
  border-radius:12px;
  padding:10px 14px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:none !important;
  cursor:pointer;
}
.ygdash .yg3-btn:hover,
.ygdash .ygdash-btn:hover,
.ygdash .yg3-btn:focus,
.ygdash .ygdash-btn:focus {
  background:#fff !important;
  color:#111827 !important;
  border-color:#e5e7eb !important;
}

/* Course-style title (match .yg365-course-title-text) */
.ygdash .yg365-course-title-text,
.ygdash .ygdash-card__title {
  margin:0;
  font-size:20px;
  line-height:1.25;
  font-weight:600 !important;
  color:#111827;
}

/* Mobile tabs */
.ygdash-tabs__list { display:flex; gap:.5rem; overflow:auto; padding:.5rem .25rem; position:sticky; top:0; background:inherit; }
.ygdash-tab { border:1px solid rgba(0,0,0,.1); background:#fff; border-radius:999px; padding:.4rem .75rem; white-space:nowrap; }
.ygdash-tab[aria-selected="true"] { border-color: currentColor; font-weight:600; }
.ygdash-tabs__panels { padding:.5rem .25rem; }

/* 1-col slider (CSS scroll snap) */
.ygdash-slider { display:flex !important; gap:.75rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.5rem; }
.ygdash-slider > * { min-width:85%; scroll-snap-align:start; }

/* --- Modal (white dialog, close X styled like your hub close) --- */
.ygdash-modal {
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.ygdash-modal__dialog {
  background:#fff; color:#111;
  width:min(900px, 100%); /* wider so video isn’t cramped */
  max-height:90vh; overflow:auto;
  border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.2);
  position:relative; padding:20px;
}
.ygdash-modal__close {
  display:flex; align-items:center; justify-content:center;
  width:16px; height:16px; min-width:16px;
  border-radius:9999px; border:1px solid rgba(17,24,39,.12);
  background:#fff; color:#111827; font-size:22px; font-weight:800;
  position:absolute; top:10px; right:10px; cursor:pointer;
}
.ygdash-modal__header {
  display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center; margin-bottom:12px;
}
.ygdash-avatar { width:48px; height:48px; border-radius:9999px; object-fit:cover; display:block; }
.ygdash-modal__title { margin:0; font-size:1.125rem; }
.ygdash-modal__content :is(p, ul, ol){ margin:.5rem 0; }

/* Responsive video wrapper: keeps 16:9 for iframes; videos scale */
.ygdash-video { position:relative; width:100%; }
.ygdash-video iframe,
.ygdash-video embed,
.ygdash-video object {
  position:absolute; inset:0; width:100%; height:100%;
}
.ygdash-video[data-ratio="16x9"] { padding-top:56.25%; }
.ygdash-video video { width:100%; height:auto; display:block; }

/* Override/strengthen close button styling (kill red borders/focus styles) */
.ygdash-modal__close {
  display:flex; align-items:center; justify-content:center;
  width:16px; height:16px; min-width:16px;
  border-radius:9999px;
  border:1px solid rgba(17,24,39,.12) !important;  /* kill theme red */
  background:#fff !important;
  color:#111827 !important;
  font-size:22px; font-weight:800; line-height:1;
  position:absolute; top:10px; right:10px; cursor:pointer;
  box-shadow:none !important; outline:none !important;
  z-index: 5; /* always above video */
}
.ygdash-modal__close:focus,
.ygdash-modal__close:hover {
  border-color: rgba(17,24,39,.12) !important;
  background:#fff !important;
  color:#111827 !important;
  box-shadow:none !important;
  outline:none !important;
}

/* Make sure nothing overlays the close button */
.ygdash-modal__dialog { position:relative; z-index: 1; }
.ygdash-modal__inner { position:relative; z-index: 1; }

/* Video stays beneath the close button */
.ygdash-video { position:relative; width:100%; z-index: 0; }
.ygdash-video[data-ratio="16x9"] { padding-top:56.25%; }
.ygdash-video iframe,
.ygdash-video embed,
.ygdash-video object {
  position:absolute; inset:0; width:100%; height:100%;
  z-index: 0; /* under the close button */
}
.ygdash-video video { width:100%; height:auto; display:block; z-index:0; }

/* Excerpt on the card */
.ygdash-team-card__excerpt { margin:.5rem 0 .75rem; color:#4b5563; font-size:.95rem; line-height:1.45; }

/* ---- Modal close button: bigger, centered, on top, no red borders ---- */
.ygdash .ygdash-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;

  /* size + shape */
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 9999px;

  /* look */
  background: #fff !important;
  color: #111827 !important;
  border: 1px solid rgba(17, 24, 39, .12) !important;
  box-shadow: none !important;

  /* center the “×” */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;   /* was 22px inside 16px box → looked clipped */
  line-height: 1;
  font-weight: 800;

  /* kill theme focus styles */
  outline: none !important;
}
.ygdash .ygdash-modal__close:hover,
.ygdash .ygdash-modal__close:focus {
  background: #fff !important;
  color: #111827 !important;
  border-color: rgba(17, 24, 39, .12) !important;
  box-shadow: none !important;
}

/* ensure close sits above any iframe/video layer */
.ygdash .ygdash-modal__dialog { position: relative; z-index: 1; }
.ygdash .ygdash-video,
.ygdash .ygdash-video iframe,
.ygdash .ygdash-video embed,
.ygdash .ygdash-video object,
.ygdash .ygdash-video video { z-index: 0; }

/* ---- Modal text color reset (theme was making it white) ---- */
.ygdash .ygdash-modal__dialog,
.ygdash .ygdash-modal__inner,
.ygdash .ygdash-modal__content {
  color: #111827 !important;
}
.ygdash .ygdash-modal__content a { color: inherit; }

/* === Mobile vertical tabs (hub-style accordion) === */
@media (max-width: 768px){
  .ygdash [data-ygdash-tabs] .ygdash-tabs__list,
  .ygdash [data-ygdash-tabs] .ygdash-tabs__panels { display: none !important; } /* hide the old horizontal UI */

  .ygdash .ygdash-accordion { 
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .ygdash .ygdash-vtabwrap { display:block !important; width:100% !important; }

  /* The tab button */
  .ygdash .ygdash-vtab {
    display:flex !important; align-items:center !important; justify-content:space-between !important;
    width:100% !important; text-align:left !important;
    border:1px solid #e5e7eb !important; border-radius:12px !important;
    padding:12px 14px !important; background:#fff !important; color:#111827 !important; font-weight:600 !important;
    cursor:pointer !important;
  }
  .ygdash .ygdash-vtab.is-open {
    background:#eff6ff !important; border-color:#93c5fd !important;
  }
  .ygdash .ygdash-vtab__label { flex:1 1 auto !important; min-width:0 !important; }
  .ygdash .ygdash-vtab__right { display:inline-flex !important; align-items:center !important; gap:8px !important; flex:0 0 auto !important; }
  .ygdash .ygdash-vtab__chev { transition: transform .2s ease; }
  .ygdash .ygdash-vtab.is-open .ygdash-vtab__chev { transform: rotate(180deg); }

  /* Pane (content) — closed by default, open when selected */
  .ygdash .ygdash-vpane { display:none !important; margin:12px 0 20px !important; }
  .ygdash .ygdash-vpane.is-open { display:block !important; }

  /* 1-col slider still applies inside the open pane */
  .ygdash .ygdash-vpane.is-open .ygdash-cards.ygdash-slider { display:flex !important; }
}

/* ---- Team card media: fixed 16:9, cover, centered ---- */
.ygdash .ygdash-team-card__media{ position:relative; width:100%; }
.ygdash .ygdash-team-card__media::before{ content:""; display:block; padding-top:56.25%; } /* 16:9 */
.ygdash .ygdash-team-card__media img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
}

/* ---- Mobile slider niceties: padding so last slide isn't cut off ---- */
@media (max-width: 768px){
  .ygdash .ygdash-slider{ padding:0 12px 8px; scroll-padding:0 12px; }
  .ygdash .ygdash-slider > *{ min-width: calc(100% - 24px); }
}

/* Disable the old ratio shim when using the new inner 16:9 wrapper */
.ygdash .ygdash-team-card__media::before{
  content: none !important;
  padding-top: 0 !important;
}

/* MOBILE: make each slide exactly the viewport width (minus gutter)
   so cards/images never overflow the screen */
@media (max-width: 768px){
  /* slider container padding (already set, keep it) */
  .ygdash .ygdash-slider{ padding:0 12px 8px; scroll-padding:0 12px; box-sizing:border-box; }

  /* each slide fits the viewport */
  .ygdash .ygdash-slider > *{
    flex: 0 0 calc(100% - 24px) !important; /* 12px left + 12px right */
    max-width: calc(100% - 24px) !important;
    box-sizing: border-box !important;
  }

  /* card + media wrappers never exceed the slide width */
  .ygdash .ygdash-team-card{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; }
  .ygdash .ygdash-team-card__media,
  .ygdash .ygdash-team-card__media > div{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  /* when a mobile accordion pane is open, keep content clipped to viewport */
  .ygdash .ygdash-vpane.is-open{
    max-width:100% !important;
    overflow-x:hidden !important;
  }
}

@media (max-width: 768px){
  .ygdash .ygdash-team-card{ padding:12px; }
  .ygdash .ygdash-team-card__excerpt{ font-size:.95rem; line-height:1.45; margin:.4rem 0 .6rem; }
  .ygdash .ygdash-team-card__actions{ gap:.5rem; }
}

@media (max-width: 768px){
  .ygdash .ygdash-vpane{ max-width:100% !important; overflow-x:hidden !important; }
  .ygdash .ygdash-vpane *{ max-width:100% !important; box-sizing:border-box !important; }
}

/* EMERGENCY MOBILE CLAMP: stack cards 1-col and kill horizontal scroll */
@media (max-width: 768px){
  /* Don't make sliders on mobile — just show as a single column */
  .ygdash .ygdash-slider{
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    gap: .75rem !important;
    overflow-x: hidden !important;
    padding: 0 !important;
    scroll-snap-type: none !important;
  }
  .ygdash .ygdash-slider > *{
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Keep any pane strictly within the viewport */
  .ygdash .ygdash-vpane{
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}

@media (max-width:768px){
  .ygdash .ygdash-vpane{ max-width:100% !important; overflow-x:hidden !important; }
}

/* Hide Widgets/Performance shortcode headings only inside the dashboard */
.ygdash .yg3w-section__header,
.ygdash .yg3p-section__header,
.ygdash .yg3w-title,
.ygdash .yg3p-title {
  display: none !important;
}

/* Tidy spacing after removing the built-in header */
.ygdash .yg3w-section,
.ygdash .yg3p-section {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Dashboard-only media polish for injected covers */
.ygdash .yg3-card__media { position: relative; }
.ygdash .yg3-card__media .yg3-card__cover { display:block; width:100%; height:100%; object-fit:cover; object-position:center; border-radius:inherit; }
.ygdash .ygdash-cover-spacer { width:100%; padding-top:56.25%; }

/* === YGDash-only widget overlay normalisation ============================== */
/* Ensure media is a positioned container */
.ygdash .yg3-card__media { position: relative !important; }

/* Official Handicap overlay (big central number) */
.ygdash .yg3w-hcp-overlay{
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  z-index: 2 !important;
  /* match lesson sizing exactly */
  font-weight: 800 !important;
  font-size: clamp(18px, 3vw, 28px) !important;
  line-height: 1 !important;
  color: #fff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.45) !important;
}

/* Rounds overlay stack — centre bottom, same sizes as lessons */
.ygdash .yg3w-rounds-stack{
  position: absolute !important;
  left: 50% !important;
  bottom: 14px !important;
  transform: translateX(-50%) !important;
  display: grid !important;
  gap: 6px !important;
  text-align: center !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
.ygdash .yg3w-rounds-stack .r-top{
  /* main number (H365) */
  font-weight: 900 !important;
  font-size: clamp(18px, 3vw, 28px) !important;
  line-height: 1 !important;
  color: #fff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.45) !important;
}
.ygdash .yg3w-rounds-stack .r-bot{
  /* trend + diff line */
  font-weight: 800 !important;
  font-size: clamp(14px, 2.6vw, 20px) !important;
  line-height: 1 !important;
  color: #fff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.45) !important;
}
.ygdash .yg3w-rounds-stack .r-trend,
.ygdash .yg3w-rounds-stack .r-diff{ vertical-align: middle !important; }

/* Safety: make sure overlays sit above the injected cover */
.ygdash .yg3-card__media .yg3-card__cover{ z-index: 1; }

/* ===== Desktop overlay sizing (dashboard-only) ===== */
@media (min-width: 769px){
  /* Bigger central number for Official Handicap */
  .ygdash .yg3w-hcp-overlay{
    font-size: clamp(28px, 2.2vw, 44px) !important;
    font-weight: 800 !important;
  }

  /* Rounds: bigger values (top & bottom lines) */
  .ygdash .yg3w-rounds-stack .r-top{
    font-size: clamp(28px, 2.2vw, 44px) !important;
    font-weight: 900 !important;
  }
  .ygdash .yg3w-rounds-stack .r-bot{
    font-size: clamp(18px, 1.6vw, 28px) !important;
    font-weight: 800 !important;
  }
}

/* ===== Rounds overlay centering & layering (all breakpoints) ===== */
/* Ensure the media box is the positioning context */
.ygdash .yg3-card__media{ position: relative !important; }

/* Put the cover below overlays */
.ygdash .yg3-card__media .yg3-card__cover{ z-index: 1; }

/* Center the rounds stack horizontally at the bottom edge */
.ygdash .yg3w-rounds-stack{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 14px !important;
  transform: none !important;            /* no translateX hacks */
  display: grid !important;
  justify-items: center !important;      /* center contents */
  text-align: center !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* Keep the text readable on all covers */
.ygdash .yg3w-rounds-stack .r-top,
.ygdash .yg3w-rounds-stack .r-bot,
.ygdash .yg3w-hcp-overlay{
  color: #fff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.45) !important;
  line-height: 1 !important;
}

/* YGDash-only: if widgets/perf modal is inside dashboard, force full-screen overlay & centered dialog */
.ygdash .yg3-modal,
.ygdash .yg3w-modal,
.ygdash .yg3p-modal{
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483646 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  max-width: none !important;
  overflow: hidden !important;
}
.ygdash .yg3-modal__overlay,
.ygdash .yg3w-modal__overlay,
.ygdash .yg3p-modal__overlay{
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.5) !important;
  z-index: 0 !important;
}
.ygdash .yg3-modal__dialog,
.ygdash .yg3w-modal__dialog,
.ygdash .yg3p-modal__dialog,
.ygdash [role="dialog"].yg3,
.ygdash [role="dialog"].yg3w,
.ygdash [role="dialog"].yg3p{
  position: relative !important;
  background: #fff !important;
  color: #111827 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.2) !important;
  max-width: min(900px, 100%) !important;
  width: min(900px, 100%) !important;
  max-height: 90vh !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 16px !important;
}

/* Prevent horizontal scroll while yg3x modal is open (dashboard only) */
.ygdash body[data-ygdash-modal="1"],
.ygdash [data-role="dashboard"]{
  overflow-x: hidden !important;
}

/* === YGDash mobile: force readable text for widgets/performance ================ */
/* Scope to dashboard mobile pane so lessons remain untouched */
.ygdash .ygdash-mobile [role="tabpanel"][data-key="hcp"] .yg3-card,
.ygdash .ygdash-mobile [role="tabpanel"][data-key="performance"] .yg3-card{
  color: #111827 !important;          /* default text inside the card */
}

/* Titles, descriptions, and pill labels */
.ygdash .ygdash-mobile [role="tabpanel"][data-key="hcp"]  .yg3-card__title,
.ygdash .ygdash-mobile [role="tabpanel"][data-key="hcp"]  .yg3-card__desc,
.ygdash .ygdash-mobile [role="tabpanel"][data-key="hcp"]  .yg3-card__pill,
.ygdash .ygdash-mobile [role="tabpanel"][data-key="performance"] .yg3-card__title,
.ygdash .ygdash-mobile [role="tabpanel"][data-key="performance"] .yg3-card__desc,
.ygdash .ygdash-mobile [role="tabpanel"][data-key="performance"] .yg3-card__pill{
  color: #111827 !important;
}

/* Keep the numeric overlays ON the cover in white (they’re meant to be white) */
.ygdash .ygdash-mobile [role="tabpanel"] .yg3w-hcp-overlay,
.ygdash .ygdash-mobile [role="tabpanel"] .yg3w-rounds-stack .r-top,
.ygdash .ygdash-mobile [role="tabpanel"] .yg3w-rounds-stack .r-bot{
  color: #fff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.45) !important;
}

/* Safety: ensure media has height so you don’t get “nothingness” on slow loads */
.ygdash .ygdash-mobile [role="tabpanel"] .yg3-card__media{
  position: relative !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
}
.ygdash .ygdash-mobile [role="tabpanel"] .yg3-card__media img.yg3-card__cover{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Nuclear option if some parent forces white text */
.ygdash .ygdash-mobile [role="tabpanel"][data-key="hcp"],
.ygdash .ygdash-mobile [role="tabpanel"][data-key="performance"]{
  color: #111827 !important;
}

/* === YGDash mobile: super-size + center widget overlays (HCP + Rounds) === */
@media (max-width: 768px){
  .ygdash .ygdash-mobile [role="tabpanel"] .yg3-card__media{
    position: relative !important;
    overflow: hidden !important;
  }

  /* HCP overlay (big number in the middle) */
  .ygdash .ygdash-mobile [role="tabpanel"] .yg3w-hcp-overlay{
    position: absolute !important; inset: 0 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    z-index: 2 !important; pointer-events: none !important; text-align: center !important;
    font-weight: 900 !important;
    font-size: clamp(48px, 14vw, 112px) !important; /* tweak middle 14vw to scale more/less */
    line-height: 1 !important; color: #fff !important;
    text-shadow: 0 3px 18px rgba(0,0,0,.5) !important;
  }

  /* Rounds overlay (big number + small line below) */
  .ygdash .ygdash-mobile [role="tabpanel"] .yg3w-rounds-stack{
    position: absolute !important; inset: 0 !important;
    display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important;
    gap: 10px !important; z-index: 2 !important; pointer-events: none !important; text-align: center !important;
  }
  .ygdash .ygdash-mobile [role="tabpanel"] .yg3w-rounds-stack .r-top{
    font-weight: 900 !important;
    font-size: clamp(44px, 12vw, 96px) !important;
    line-height: 1 !important; color: #fff !important;
    text-shadow: 0 3px 18px rgba(0,0,0,.5) !important;
  }
  .ygdash .ygdash-mobile [role="tabpanel"] .yg3w-rounds-stack .r-bot{
    font-weight: 800 !important;
    font-size: clamp(22px, 6.5vw, 44px) !important;
    line-height: 1.05 !important; color: #fff !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.45) !important;
  }

  /* Safety: covers shouldn't intercept taps */
  .ygdash .ygdash-mobile [role="tabpanel"] .yg3-card__media .yg3-card__cover{
    pointer-events: none !important;
  }
}

/* === YGDash Profile Avatar (round) === */
.ygdash-profile {
  display: flex; align-items: center; justify-content: flex-start;
  margin: 10px 0 18px;
}
.ygdash-avatar {
  position: relative;
  width: 96px; height: 96px;
  border-radius: 9999px; overflow: hidden;
  background: #f3f4f6; border: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.ygdash-avatar-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
.ygdash-avatar__plus {
  position: absolute; right: -4px; bottom: -4px; z-index: 2;
  width: 26px; height: 26px; min-width: 26px;
  border-radius: 9999px;
  border: 1px solid rgba(17,24,39,.12);
  background: #fff; color: #111827; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
@media (max-width: 560px){
  .ygdash-avatar { width: 72px; height: 72px; }
}

/* Avatar – ensure circle, sane background, and click area */
.ygdash .ygdash-profile { display:flex; align-items:center; gap:12px; margin:10px 0 18px; }
.ygdash .ygdash-avatar{
  position:relative; display:inline-block;
  width:96px; height:96px; border-radius:9999px; overflow:hidden;
  background:#f3f4f6; border:1px solid #e5e7eb; box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.ygdash .ygdash-avatar-img{
  width:100%; height:100%; object-fit:cover; object-position:center; display:block;
}

/* PLUS button – TOP RIGHT, above all */
.ygdash .ygdash-avatar__plus{
  position:absolute; top:-6px; right:-6px; z-index:3;
  width:26px; height:26px; min-width:26px;
  border-radius:9999px; border:1px solid rgba(17,24,39,.12);
  background:#fff; color:#111827; font-weight:800; font-size:18px; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,.1);
}

/* Make the whole avatar clickable as a fallback */
.ygdash .ygdash-avatar[role="button"]{ cursor:pointer; }

/* Mobile size */
@media (max-width:560px){
  .ygdash .ygdash-avatar{ width:72px; height:72px; }
}

/* Plain + in top-right of avatar (no theme styling) */
.ygdash .ygdash-avatar {
  position: relative; /* anchor for absolute + */
}

.ygdash .ygdash-avatar__plus{
  position: absolute; top: 6px; right: 6px; z-index: 3;

  /* kill any theme defaults */
  all: unset;
  display: inline-block;
  pointer-events: auto;

  /* the simple + */
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  font-weight: 800;
  color: #111827 !important;

  /* ensure zero chrome */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* keep it plain on hover/focus/active */
.ygdash .ygdash-avatar__plus:hover,
.ygdash .ygdash-avatar__plus:focus,
.ygdash .ygdash-avatar__plus:active{
  color: #111827 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Make the whole avatar the trigger */
.ygdash .ygdash-avatar{
  position: relative;            /* anchor for the + */
  cursor: pointer;               /* show it's clickable */
}

/* Visual-only + (no bg/border), always top-right */
.ygdash [data-ygdash-profile] button.ygdash-avatar__plus{
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  z-index: 5 !important;

  /* kill ALL theme styles */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  /* visual glyph only */
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #111827 !important;

  /* let clicks pass through to the avatar */
  pointer-events: none !important;
}

/* keep it plain on hover/focus (paranoid) */
.ygdash [data-ygdash-profile] button.ygdash-avatar__plus:hover,
.ygdash [data-ygdash-profile] button.ygdash-avatar__plus:focus{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Mobile: slightly smaller circle is fine; + stays pinned */
@media (max-width:560px){
  .ygdash .ygdash-avatar{ width:72px; height:72px; }
}

/* Avatar container is the positioning context for the + */
.ygdash .ygdash-avatar{
  position: relative !important;
  display: inline-block !important;
  width: 96px; height: 96px;           /* adjust if you use a different size */
  border-radius: 9999px;
  overflow: hidden;                     /* keep + visually inside the circle */
}

/* Image fits the circle */
.ygdash .ygdash-avatar-img{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Visual-only + pinned just inside the top-right corner */
.ygdash [data-ygdash-profile] .ygdash-avatar__plus{
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  transform: none !important;           /* ensure no stray transforms push it out */
  z-index: 5 !important;

  /* pure glyph, no background/border */
  display: inline-block !important;
  pointer-events: none !important;
  padding: 0 !important; margin: 0 !important;
  line-height: 1 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #111827 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Mobile size */
@media (max-width: 560px){
  .ygdash .ygdash-avatar{ width: 72px; height: 72px; }
}

/* Desktop: give each section a thin border + rounded corners */
@media (min-width: 769px) {
  .ygdash .ygdash-section {
    border: 1px solid rgba(17, 24, 39, 0.12); /* Tailwind-ish slate-900 @ 12% */
    border-radius: var(--card-radius);
    padding: calc(var(--gap) * 1);            /* match spacing rhythm */
    background: #fff;                         /* keeps it crisp on tinted backgrounds */
  }
}