/* PropPulser optional Gradient Theme Layer
   Toggle via system setting: ui_theme = classic|gradient
*/
:root{
  --pp-bg0:#070B16;
  --pp-bg1:#07152A;
  --pp-bg2:#0A2140;
  --pp-card0:#0B1730;
  --pp-card1:#0B203F;
  --pp-border:rgba(255,255,255,.08);
  --pp-glow:rgba(52,120,246,.22);
}

body{
  background:
    radial-gradient(900px 500px at 22% 10%, rgba(40,120,255,.18), transparent 60%),
    radial-gradient(900px 520px at 78% 18%, rgba(0,180,255,.10), transparent 62%),
    linear-gradient(180deg, var(--pp-bg1), var(--pp-bg0) 60%);
  background-attachment: fixed;
}

/* Hero surfaces */
.pp-hero, .pp-surface{
  background:
    radial-gradient(700px 380px at 18% 18%, rgba(52,120,246,.18), transparent 60%),
    linear-gradient(180deg, rgba(14,35,74,.88), rgba(10,22,46,.88));
  border:1px solid var(--pp-border);
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}

/* Cards */
.card, .pp-card{
  background:
    radial-gradient(520px 300px at 15% 20%, rgba(52,120,246,.12), transparent 62%),
    linear-gradient(180deg, rgba(12,26,52,.92), rgba(10,18,38,.92));
  border:1px solid var(--pp-border);
  box-shadow: 0 10px 34px rgba(0,0,0,.28);
}

/* Tables */
.table, .table>:not(caption)>*>*{
  border-color: rgba(255,255,255,.08) !important;
}

/* Subtle nav depth */
.navbar{
  background:
    linear-gradient(180deg, rgba(9,16,32,.90), rgba(9,16,32,.75)) !important;
  border-bottom:1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
}

/* Buttons: keep your colors, just add depth */
.btn{
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
}

/* Focus ring */
:focus-visible{
  outline: 2px solid rgba(52,120,246,.55);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   Mock-style Offer UI + Public banners
   ------------------------------------------------------------ */

.pp-offers-shell{
  max-width: 920px;
}

.pp-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.pp-section-title{
  font-weight:700;
  letter-spacing:.2px;
}

.pp-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px 10px;
  border-radius:999px;
  font-size:.72rem;
  line-height:1.3;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.86);
}

/* Public / signup banners */
.pp-banner{
  overflow:hidden;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
}
.pp-banner__img{
  display:block;
  width:100%;
  height:auto;
}

/* Partner marketing banner renderer (pp_partner_banner_render) */
.pp-marketing-banner,
.pp-auth-banner{
  overflow:hidden;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
}
.pp-auth-banner{ border-radius:14px; }
.pp-marketing-banner a{ display:block; }

/* ------------------------------------------------------------
   Workspace switcher: mobile UX
   - Desktop keeps the dropdown in the navbar.
   - Mobile shows a non-clickable pill + switches inside hamburger.
   ------------------------------------------------------------ */

.pp-ws-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  border-radius:999px;
  font-size:.78rem;
  line-height:1;
  background: rgba(22,120,255,.16);
  border: 1px solid rgba(22,120,255,.35);
  color: rgba(235,242,255,.92);
}
.pp-ws-pill::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background: rgba(22,120,255,.95);
  box-shadow: 0 0 0 3px rgba(22,120,255,.18);
}

.pp-ws-mobile{
  border-radius:14px;
  padding:10px;
  background:
    radial-gradient(520px 260px at 18% 10%, rgba(52,120,246,.12), transparent 62%),
    linear-gradient(180deg, rgba(12,26,52,.90), rgba(10,18,38,.90));
  border: 1px solid rgba(255,255,255,.10);
}
.pp-ws-mobile__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 2px 4px 6px;
}
.pp-ws-mobile__label{
  font-size:.72rem;
  letter-spacing:.10em;
  text-transform:uppercase;
  color: rgba(190,210,240,.75);
}
.pp-ws-mobile__current{
  font-size:.78rem;
  color: rgba(235,242,255,.88);
  padding:2px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}

.pp-ws-mobile__list .list-group-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background: transparent;
  border-color: rgba(255,255,255,.08);
  color: rgba(235,242,255,.88);
  padding: 10px 10px;
}
.pp-ws-mobile__list .list-group-item:hover{
  background: rgba(255,255,255,.05);
}
.pp-ws-mobile__list .list-group-item.active{
  background: rgba(22,120,255,.20);
  border-color: rgba(22,120,255,.28);
  color: #fff;
}

.pp-ws-mobile__item{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-width: 0;
}
.pp-ws-mobile__icon{
  opacity:.90;
}
.pp-ws-mobile__text{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pp-ws-mobile__badge{
  font-size:.70rem;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.12);
  color: rgba(235,242,255,.88);
}
.pp-marketing-banner img,
.pp-auth-banner img{
  display:block;
  width:100%;
  height:auto;
}
.pp-marketing-banner--public{
  max-width: 560px;
  margin-left:auto;
  margin-right:auto;
}

/* Public partner page: constrain wide logos so they don't look misaligned */
.pp-public-creator__logo{
  display:block;
  margin: 0 auto 10px;
  max-width: 340px;
  max-height: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 14px;
  background: rgba(0,0,0,0.18);
  padding: 10px;
  border:1px solid rgba(255,255,255,.10);
}

/* Public partner page: avatar style for square-ish logos + fallback initials */
.pp-public-creator__avatar{
  display:block;
  margin: 0 auto 12px;
  width: 120px;
  height: 120px;
  border-radius: 26px;
  object-fit: cover;
  background: rgba(0,0,0,0.20);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.pp-public-creator__avatar--fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size: 2.15rem;
  letter-spacing: -0.03em;
  color: rgba(235,242,255,.92);
  background: radial-gradient(120% 120% at 30% 20%, rgba(120,180,255,.35), rgba(0,0,0,.25));
}

/* Signup teaser */
.pp-signup-teaser{
  background:rgba(255,255,255,0.04) !important;
  border:1px solid rgba(255,255,255,0.08) !important;
}
.pp-signup-teaser__logo{
  width:44px;
  height:44px;
  border-radius:12px;
  object-fit:contain;
  background:rgba(0,0,0,0.18);
  padding:6px;
  border:1px solid rgba(255,255,255,.10);
}
.pp-signup-teaser__logo--fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
}

/* Offer cards (offer-focused — no partner branding) */
.pp-offer-card{
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}

/* Signup: compact trust strip under the subtitle */
.pp-auth-trust{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.pp-auth-trust__item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.86);
  font-size:.80rem;
}
.pp-auth-trust__item i{ opacity:.9; }

/* Signup: partner pill + sponsor card (matches the mock's hierarchy) */
.pp-partner-pill{
  font-size:.82rem;
  color:rgba(255,255,255,.78);
}
.pp-partner-pill__link{
  color:rgba(255,255,255,.92);
  text-decoration:none;
  border-bottom:1px dashed rgba(255,255,255,.35);
}
.pp-partner-pill__link:hover{ border-bottom-color: rgba(255,255,255,.55); }

.pp-signup-sponsor-card{
  border-radius:16px;
  padding:14px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: 0 18px 44px rgba(0,0,0,.28);
}
.pp-signup-sponsor-card__logo-wrap{
  width:48px;
  height:48px;
}
.pp-signup-sponsor-card__logo{
  width:48px;
  height:48px;
  border-radius:14px;
  object-fit:contain;
  background:rgba(0,0,0,0.18);
  padding:7px;
  border:1px solid rgba(255,255,255,.12);
}
.pp-signup-sponsor-card__logo--fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
}
.pp-signup-sponsor-card__title{
  font-weight:800;
  letter-spacing:-0.01em;
}
.pp-signup-sponsor-card__tier{
  display:inline-block;
  padding:.08rem .45rem;
  border-radius:999px;
  background:rgba(52,120,246,.18);
  border:1px solid rgba(52,120,246,.24);
  color:rgba(255,255,255,.92);
}
.pp-signup-sponsor-card__bullets{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:10px;
}
.pp-signup-sponsor-card__bullet{
  display:flex;
  align-items:flex-start;
  gap:8px;
  color:rgba(255,255,255,.82);
  font-size:.86rem;
}
.pp-signup-sponsor-card__bullet i{ margin-top:1px; opacity:.9; }

.pp-offer-card.is-featured{
  border-color: rgba(52,120,246,.35);
  box-shadow: 0 14px 44px rgba(52,120,246,.08), 0 10px 34px rgba(0,0,0,.25);
}
.pp-offer-card.is-compact{
  padding:12px;
  border-radius:16px;
}
.pp-offer-card__row{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.pp-offer-card__icon{
  width:38px;
  height:38px;
  border-radius:12px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  background:rgba(52,120,246,.18);
  border:1px solid rgba(52,120,246,.22);
  color:rgba(255,255,255,.9);
}
.pp-offer-card__content{ flex:1; min-width:0; }
.pp-offer-card__firm{ font-weight:700; }
.pp-offer-card__sub{ margin-top:4px; font-size:.90rem; color:rgba(255,255,255,.75); }
.pp-offer-card__actions{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.pp-offer-card__coupon{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.pp-offer-card__coupon-code{
  font-weight:800;
  letter-spacing:.35px;
}


/* ------------------------------------------------------------
   Partner landing + Offers polish
   ------------------------------------------------------------ */

/* Offers page hero */
.pp-offers-hero{
  border-radius: 18px;
}

/* Accent pill */
.pp-pill--primary{
  background: rgba(52,120,246,.18);
  border-color: rgba(52,120,246,.28);
  color: rgba(255,255,255,.92);
}

/* Offer card logo inside the icon well */
.pp-offer-card__logo{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display:block;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.35));
}

/* Tighter footnote */
.pp-offer-foot{
  opacity:.92;
}

/* Public partner landing */
.pp-public-creator{
  border-radius: 22px;
  position: relative;
}
.pp-public-creator__name{
  font-weight: 800;
  letter-spacing: .2px;
  opacity: .92;
  margin-top: 4px;
}
.pp-public-creator__title{
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-top: 6px;
  margin-bottom: 10px;
}
.pp-public-creator__sub{
  max-width: 560px;
  margin-left:auto;
  margin-right:auto;
  line-height: 1.45;
}

.pp-public-checklist{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding: 14px 14px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.pp-public-checklist__item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color: rgba(255,255,255,.84);
  font-size: .95rem;
}
.pp-public-checklist__item i{
  color: rgba(52,120,246,.95);
  margin-top: 2px;
  filter: drop-shadow(0 10px 22px rgba(52,120,246,.18));
}

.pp-public-shot{
  border-radius: 18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: 0 18px 54px rgba(0,0,0,.35);
}
.pp-public-shot__img{
  display:block;
  width:100%;
  height:auto;
}

.pp-sponsor-card{
  border-radius: 18px;
  padding: 16px 16px;
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: 0 18px 52px rgba(0,0,0,.30);
}
.pp-sponsor-card__kicker{
  font-size: .80rem;
  color: rgba(255,255,255,.74);
  text-transform: uppercase;
  letter-spacing: .12em;
}
.pp-sponsor-card__headline{
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-top: 4px;
}
.pp-sponsor-card__sub{
  margin-top: 6px;
  color: rgba(255,255,255,.76);
  line-height: 1.45;
}
.pp-sponsor-card__coupon{
  margin-top: 10px;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.pp-sponsor-card__coupon-code{
  font-weight: 900;
  letter-spacing: .3px;
}

.pp-sponsor-card__perk{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(52,120,246,.22);
  background: rgba(52,120,246,.10);
  color: rgba(255,255,255,.88);
  line-height: 1.35;
}
.pp-sponsor-card__perk strong{ font-weight: 900; }

@media (max-width: 575.98px){
  .pp-public-creator{ padding: 18px !important; }
  .pp-public-creator__title{ font-size: 1.35rem; }
}