:root{
  --sd-primary:#ffd600;
  --sd-accent:#0b0b0f;
  --sd-text:#f5f5fa;
  --sd-muted:rgba(245,245,250,.72);
  --sd-border:rgba(255,255,255,.10);
}
.sd-shell, .sd-home{
  background: var(--sd-accent);
  color: var(--sd-text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.sd-shell *,.sd-home *{ box-sizing:border-box; }

/* Portal header */
.sd-shell{
  padding: 24px;
  border-radius: 24px;
  border: 1px solid var(--sd-border);
  background: radial-gradient(1200px 420px at 20% 0%, rgba(255,214,0,.10), rgba(0,0,0,0) 45%),
              rgba(0,0,0,.40);
  /* Keep header UI (chips + dropdown) above page content */
  position: relative;
  z-index: 5000;
}
.sd-shell.sd-fullbleed{
  border-radius: 0;
  padding: 22px 24px 0 24px;
}
.sd-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 16px;
}

/* Top-right cluster (wallet chip + user chip) */
.sd-topright{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 10px;
  flex-wrap:wrap;
  position: relative;
  z-index: 6000;
}

/* StreetCred wallet chip (matches portal pill vibe) */
.sd-walletchip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--sd-border);
  background: rgba(255,255,255,.06);
  color: rgba(245,245,250,.92);
  text-decoration:none;
  line-height: 1;
  font-weight: 800;
}
.sd-walletchip:hover{
  background: rgba(255,255,255,.09);
}
.sd-walletchip__icon{
  width: 16px;
  height: 16px;
  display:block;
  opacity: .95;
}
.sd-walletchip__label{
  opacity: .92;
}
.sd-walletchip__bal{
  padding-left: 8px;
  margin-left: 2px;
  border-left: 1px solid rgba(255,255,255,.14);
  color: rgba(255,214,0,.98);
  font-variant-numeric: tabular-nums;
}
.sd-walletchip--loggedout .sd-walletchip__bal{
  display:none;
}

/* Notifications chip (bell + optional count) */
.sd-notifchip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--sd-border);
  background: rgba(255,255,255,.06);
  color: rgba(245,245,250,.92);
  text-decoration:none;
  line-height: 1;
  font-weight: 800;
}
.sd-notifchip:hover{
  background: rgba(255,255,255,.09);
}
.sd-notifchip__icon{
  width: 16px;
  height: 16px;
  display:block;
  opacity: .95;
}
.sd-notifchip__label{
  opacity: .92;
}
.sd-notifchip__count{
  padding-left: 8px;
  margin-left: 2px;
  border-left: 1px solid rgba(255,255,255,.14);
  color: rgba(255,214,0,.98);
  font-variant-numeric: tabular-nums;
}
.sd-brand{
  display:flex; gap: 14px; align-items:flex-start;
}
.sd-logo{
  width: 44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border:1px solid var(--sd-border);
  font-size: 20px;
}
.sd-brandname{
  font-weight: 900;
  letter-spacing: -0.01em;
  color: rgba(245,245,250,.92);
}
.sd-title{
  margin-top: 4px;
  font-size: 40px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.sd-subtitle{
  margin-top: 8px;
  color: var(--sd-muted);
  font-size: 16px;
  max-width: 820px;
}
.sd-userchip{
  padding: 10px 12px;
  border-radius: 999px;
  border:1px solid var(--sd-border);
  background: rgba(255,255,255,.06);
  font-weight: 800;
  color: rgba(245,245,250,.92);
  white-space: nowrap;
}
.sd-tabs{
  margin-top: 16px;
  display:flex; gap:10px; flex-wrap:wrap;
  padding: 12px;
  border-radius: 18px;
  border:1px solid var(--sd-border);
  background: rgba(0,0,0,.30);
}
.sd-shell.sd-fullbleed .sd-tabs{
  margin: 16px 0 0 0;
  border-radius: 18px 18px 0 0;
}
.sd-tab{
  text-decoration:none;
  display:inline-flex; align-items:center;
  padding: 10px 14px;
  border-radius: 14px;
  font-weight: 800;
  color: rgba(245,245,250,.86);
}
.sd-tab:hover{ background: rgba(255,255,255,.06); }
.sd-active{
  background: var(--sd-primary);
  color: #0b0b0f;
}
.sd-sticky .sd-tabs{
  position: sticky;
  top: 10px;
  z-index: 99999;
  backdrop-filter: blur(10px);
}

/* Homepage */
.sd-home{
  padding: 24px;
  border-radius: 24px;
  border: 1px solid var(--sd-border);
  background: radial-gradient(1200px 520px at 30% 0%, rgba(255,214,0,.12), rgba(0,0,0,0) 46%),
              rgba(0,0,0,.42);
}
.sd-hero{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: stretch;
}
@media(min-width: 980px){
  .sd-hero{ grid-template-columns: 1.1fr .9fr; }
}
.sd-kicker{
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--sd-border);
  background: rgba(255,255,255,.06);
  font-weight: 800;
  color: rgba(245,245,250,.90);
  margin-bottom: 12px;
}
.sd-h1{
  margin: 0;
  font-size: 46px;
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.sd-p{
  margin-top: 12px;
  color: var(--sd-muted);
  font-size: 16px;
  max-width: 760px;
}
.sd-cta{ display:flex; gap: 10px; flex-wrap:wrap; margin-top: 14px; }
.sd-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 14px;
  border-radius: 14px;
  border:1px solid var(--sd-border);
  background: rgba(255,255,255,.06);
  color: rgba(245,245,250,.92);
  text-decoration:none;
  font-weight: 900;
}
.sd-btn:hover{ background: rgba(255,255,255,.10); }
.sd-btn--primary{
  background: var(--sd-primary);
  border-color: rgba(0,0,0,.12);
  color: #0b0b0f;
}
.sd-metrics{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-top: 16px;
}
@media(max-width: 720px){
  .sd-metrics{ grid-template-columns: 1fr; }
}
.sd-metric{
  padding: 12px;
  border-radius: 18px;
  border:1px solid var(--sd-border);
  background: rgba(0,0,0,.30);
}
.sd-metric b{ display:block; color: rgba(245,245,250,.92); }
.sd-metric span{ display:block; margin-top: 4px; color: var(--sd-muted); font-weight: 700; }

.sd-card{
  position:relative;
  border-radius: 22px;
  border:1px solid var(--sd-border);
  background: rgba(0,0,0,.32);
  padding: 14px;
  text-decoration:none;
  color: var(--sd-text);
  overflow:hidden;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.sd-card:hover{ transform: translateY(-2px); background: rgba(0,0,0,.38); border-color: rgba(255,214,0,.30); }
.sd-card__strip{
  height: 92px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  position: relative;
  overflow:hidden;
}
.sd-roadline{
  position:absolute; left:20px; top:48px; width: 76%; height: 6px;
  border-radius: 999px;
  background: rgba(245,245,250,.95);
  transform: rotate(-6deg);
  box-shadow: 0 0 0 4px rgba(255,255,255,.06);
}
.sd-pin{
  position:absolute; right:24px; top:42px; width: 16px; height: 16px;
  border-radius: 999px;
  background: var(--sd-primary);
  box-shadow: 0 0 0 6px rgba(255,214,0,.18);
}
.sd-badge{
  position:absolute; top: 110px; right: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--sd-primary);
  color: #0b0b0f;
  font-weight: 900;
  font-size: 12px;
}
.sd-card__title{
  margin-top: 12px;
  font-size: 22px;
  font-weight: 900;
}
.sd-card__meta{
  margin-top: 6px;
  color: var(--sd-muted);
  font-size: 14px;
}
.sd-card__actions{ margin-top: 12px; }

.sd-section{ margin-top: 26px; }
.sd-h2{ margin: 0 0 12px 0; font-size: 26px; font-weight: 900; letter-spacing: -0.02em; }

.sd-steps{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media(min-width: 980px){ .sd-steps{ grid-template-columns: repeat(3,1fr);} }
.sd-step{
  padding: 14px;
  border-radius: 18px;
  border:1px solid var(--sd-border);
  background: rgba(0,0,0,.30);
}
.sd-step b{ display:block; font-weight: 900; }
.sd-step span{ display:block; margin-top: 6px; color: var(--sd-muted); font-weight: 700; }

.sd-drop{
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 22px;
  background: var(--sd-primary);
  color: #0b0b0f;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
  font-weight: 900;
}
.sd-drop .sd-btn{ background: rgba(0,0,0,.10); border-color: rgba(0,0,0,.18); color:#0b0b0f; }
.sd-drop .sd-btn:hover{ background: rgba(0,0,0,.14); }

.sd-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media(min-width: 720px){ .sd-grid{ grid-template-columns: repeat(2,1fr);} }
@media(min-width: 1100px){ .sd-grid{ grid-template-columns: repeat(3,1fr);} }

.sd-pricing__grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media(min-width: 980px){ .sd-pricing__grid{ grid-template-columns: repeat(3,1fr);} }
.sd-price{
  padding: 14px;
  border-radius: 18px;
  border:1px solid var(--sd-border);
  background: rgba(0,0,0,.30);
}
.sd-price b{ display:block; font-weight: 900; }
.sd-price__big{
  margin-top: 10px;
  font-size: 34px;
  font-weight: 950;
  color: var(--sd-primary);
}
.sd-price span{ display:block; margin-top: 6px; color: var(--sd-muted); font-weight: 700; }

.sd-cta--center{ justify-content:center; }


/* --- v0.1.1 fixes: solid dark base so it doesn't go grey inside Elementor containers --- */
.sd-shell{
  position: relative;
  background: var(--sd-accent) !important;
}
.sd-shell::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(1200px 420px at 20% 0%, rgba(255,214,0,.12), rgba(0,0,0,0) 46%),
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.35));
  opacity: 1;
}
.sd-shell > *{ position: relative; z-index: 1; }

.sd-home{
  position: relative;
  background: var(--sd-accent) !important;
}
.sd-home::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(1200px 520px at 30% 0%, rgba(255,214,0,.14), rgba(0,0,0,0) 48%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.30));
}
.sd-home > *{ position: relative; z-index: 1; }

/* Sticky tabs: respect admin bar if present */
.sd-sticky .sd-tabs{ top: calc(var(--sd-adminbar, 0px) + 10px); }


/* --- v0.1.2: FORCE true full-width even inside Elementor containers ---
   This "breaks out" of any max-width wrapper (common in Elementor/Hello).
*/
.sd-shell.sd-fullbleed,
.sd-home{
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* If the theme adds body padding, this keeps edges flush without horizontal scroll */
@supports(padding: env(safe-area-inset-left)){
  .sd-shell.sd-fullbleed,
  .sd-home{
    padding-left: calc(24px + env(safe-area-inset-left));
    padding-right: calc(24px + env(safe-area-inset-right));
  }
}


/* --- v0.1.3: cancel common Elementor body/container padding (24px) to remove white gutters --- */
.sd-shell.sd-fullbleed,
.sd-home{
  margin-left: calc(50% - 50vw - 24px);
  margin-right: calc(50% - 50vw - 24px);
}


/* --- v0.1.4: Elementor wrapper padding killer (scoped via :has) --- */
/* This removes the last "white gutters" caused by section/container padding. */
@supports(selector(:has(*))){
  /* If a container/section has our portal header inside it, remove its left/right padding & max-width */
  .elementor .e-con:has(.sd-shell), 
  .elementor .elementor-section:has(.sd-shell),
  .elementor .e-con:has(.sd-home),
  .elementor .elementor-section:has(.sd-home){
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
  }
  .elementor .elementor-container:has(.sd-shell),
  .elementor .elementor-container:has(.sd-home){
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .elementor .elementor-widget:has(.sd-shell),
  .elementor .elementor-widget:has(.sd-home){
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Ensure no horizontal scroll even if themes add weird padding */
body.sd-portal-page{ overflow-x: hidden; }


/* --- v0.1.5: Center true-full-bleed using left/transform (fix iPad Safari 100vw offset) --- */
.sd-shell.sd-fullbleed,
.sd-home{
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 100vw;
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* --- v0.1.6: Tabs polish (more breathing room + embedded feel + slightly narrower) --- */
.sd-tabs{
  margin-top: 26px; /* push down a touch */
  max-width: 1280px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
  position: relative;
}
.sd-tabs:before{
  content:"";
  position:absolute;
  left:12px; right:12px; top:0;
  height:1px;
  background: linear-gradient(90deg, rgba(255,214,0,0), rgba(255,214,0,.35), rgba(255,214,0,0));
  opacity: .9;
  pointer-events:none;
}
/* keep the overlap/embedded edge on fullbleed */
.sd-shell.sd-fullbleed .sd-tabs{
  margin-top: 26px;
  border-radius: 18px 18px 0 0;
}


/* --- Home (Insane variant) --- */
.sd-home--insane .sd-hero--insane{
  display:grid;
  grid-template-columns: minmax(0,1.15fr) minmax(0,0.85fr);
  gap: 28px;
  align-items: center;
  padding-top: 10px;
}
@media (max-width: 900px){
  .sd-home--insane .sd-hero--insane{ grid-template-columns: 1fr; }
}
.sd-hero__ctas{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 18px 0 14px;
}
.sd-btn--ghost{
  background: transparent;
  border: 1px solid rgba(255,255,255,.22);
}
.sd-btn--chip{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
}
.sd-metrics--insane{
  margin-top: 14px;
}
.sd-ticker{
  margin-top: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 999px;
  overflow:hidden;
  position: relative;
}
.sd-ticker__track{
  display:flex;
  gap: 14px;
  padding: 10px 14px;
  white-space: nowrap;
  width: max-content;
  animation: sdTicker 22s linear infinite;
}
.sd-ticker:hover .sd-ticker__track{ animation-play-state: paused; }
@keyframes sdTicker{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

.sd-hero__art{
  position: relative;
  min-height: 420px;
}
.sd-art-card{
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  padding: 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.sd-art-card__top{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.sd-badge--muted{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.10);
}
.sd-art-title{
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.sd-art-sub{
  color: var(--sd-muted);
  margin-top: 4px;
  font-size: 14px;
}
.sd-art-map{
  margin-top: 14px;
  height: 210px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: radial-gradient(1100px 420px at 40% 20%, rgba(255,214,0,.16), rgba(11,11,15,0));
  position: relative;
  overflow:hidden;
}
.sd-art-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: .45;
}
.sd-pin--two{
  top: 62%;
  left: 66%;
  transform: translate(-50%,-50%) scale(.9);
  opacity: .8;
}
.sd-art-row{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.sd-art-pill{
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
}

.sd-roadline--a, .sd-roadline--b{
  position:absolute;
  right: -16px;
  top: -20px;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  border: 1px dashed rgba(255,214,0,.28);
  filter: blur(.0px);
  opacity: .85;
}
.sd-roadline--b{
  right: 24px;
  top: 210px;
  width: 220px;
  height: 220px;
  border-color: rgba(255,255,255,.14);
  opacity: .6;
}
.sd-grid--drops{
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 900px){
  .sd-grid--drops{ grid-template-columns: 1fr; }
  .sd-hero__art{ min-height: auto; }
}
.sd-steps--insane{
  grid-template-columns: repeat(4, minmax(0,1fr));
}
@media (max-width: 900px){
  .sd-steps--insane{ grid-template-columns: 1fr; }
}

/* Safety: if Elementor styles leak, force portal buttons to look on-brand inside the Home block */
.sd-home a.elementor-button,
.sd-home .elementor-button{
  border-radius: 999px !important;
  background: var(--sd-primary) !important;
  border-color: var(--sd-primary) !important;
  color: #111 !important;
}
.sd-home a.elementor-button:hover,
.sd-home .elementor-button:hover{
  filter: brightness(1.02);
}

/* --------------------------------------------------------------------------
   0.1.11 Active-pill harden
   Some themes override link/button backgrounds; force the active tab pill to stay yellow.
---------------------------------------------------------------------------- */
.sd-tab.sd-active,
.sd-tab.sd-active:hover,
.sd-tab.sd-active:focus,
.sd-tab.sd-active:focus-visible{
  background: var(--sd-primary) !important;
  background-color: var(--sd-primary) !important;
  color: #0b0b0f !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.10) !important;
  outline: none !important;
}


/* Account / Auth (Portal Header Kit) */
.sd-auth{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.sd-btn--sm{
  padding: 9px 12px;
  border-radius: 999px;
  font-size: 13px;
}

.sd-account{
  position:relative;
  display:inline-flex;
  align-items:center;
}
.sd-accountbtn{
  appearance:none;
  border:1px solid var(--sd-border);
  background: rgba(255,255,255,.06);
  color: rgba(245,245,250,.92);
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 900;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space: nowrap;
}
.sd-accountbtn:hover{ background: rgba(255,255,255,.10); }
.sd-accountbtn__chev{ opacity:.8; font-size: 12px; margin-top: 1px; }
.sd-accountbtn__icon{ display:none; opacity:.95; }
.sd-accountbtn__icon svg{ width:16px; height:16px; display:block; }

.sd-accountmenu{
  position: fixed;
  left: 0;
  top: 0;
  min-width: 210px;
  border-radius: 16px;
  border:1px solid var(--sd-border);
  background: rgba(10,10,14,.92);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  padding: 8px;
  display:none;
  z-index: 10000000;
  backdrop-filter: blur(10px);
}
.sd-account.is-open .sd-accountmenu{ display:block; }

.sd-accountmenu a{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 10px;
  border-radius: 12px;
  text-decoration:none;
  color: rgba(245,245,250,.92);
  font-weight: 850;
}
.sd-accountmenu a:hover{ background: rgba(255,255,255,.08); }
.sd-accountmenu__sep{
  height:1px;
  margin: 6px 6px;
  background: rgba(255,255,255,.10);
}
.sd-accountmenu__logout{
  color: rgba(255,255,255,.92);
}

/* ================================
   Mobile diet (portal header)
   Keeps chips + dropdown usable and prevents off-screen overflow.
   Only affects small screens.
   ================================ */
@media (max-width: 560px){
  .sd-shell{
    padding: 16px;
    border-radius: 18px;
  }

  /* Mobile layout: float actions (wallet + inbox + account) top-right so the header stays shallow */
  .sd-top{ position: relative; }
  .sd-topright{
    position: absolute;
    top: 12px;
    right: 12px;
    width: auto;
    justify-content: flex-end;
    gap: 8px;
    z-index: 10000001;
  }

  /* Make the chips icon-first on mobile */
  .sd-walletchip,
  .sd-notifchip,
  .sd-accountbtn{
    padding: 9px 12px;
    gap: 8px;
  }
  .sd-walletchip__label,
  .sd-notifchip__label,
  .sd-accountbtn__hi,
  .sd-accountbtn__chev{ display:none !important; }
  .sd-accountbtn__icon{ display:inline-flex; }
  .sd-walletchip__balance,
  .sd-notifchip__count{ font-size: 16px; }

  /* Dropdown should feel "in front" on mobile */
  .sd-accountmenu{
    background: rgba(10,10,14,.98);
    border-color: rgba(255,255,255,.18);
  }

  .sd-title{
    font-size: 42px;
    letter-spacing: -0.02em;
  }
  .sd-subtitle{
    font-size: 16px;
    max-width: 30ch;
  }
}