* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}





/* =========================================
THEME VARIABLES
========================================= */

:root{

  --theme-color:transparent;

  --theme-contrast:#FFFFFF;

  --card-text-color:#FFFFFF;

}









body {
  font-family: system-ui;
  background: #000;   /* outside phone */
}









.phone {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  min-height: 100dvh;
  overflow-x: hidden;
  padding-bottom:90px;







 
 background: 
    radial-gradient(
      circle at 50% 30%,
      rgba(255,255,255,0.7) 0%,
      rgba(255,255,255,0.25) 35%,
      rgba(255,255,255,0) 95%
    ),
    linear-gradient(
      180deg,
      #F9F8F1 0%,
      #FEFDEF 50%,
      #F3F1DE 100%
    );
}
































































/* ================================
   HEADER
================================ */

header {
  padding: 10px 15px;
  display: flex;
  align-items: center;
  justify-content: flex-end;   /* button stays right */
  background: transparent;
  position: relative;
  color: #000;
  height: 60px;                /* stabilizes vertical layout */
}



/* =========================================
   LOGO SYSTEM – STABLE VERSION
========================================= */

.logo {
  position: absolute;      /* ALWAYS absolute */
  top: 50%;
  display: flex;
  align-items: center;
  transform: translateY(-50%);
  transition: all 0.3s ease;
}

/* LEFT MODE */
.logo.left {
  left: 15px;
}

/* CENTER MODE */
.logo.center {
  left: 50%;
  transform: translate(-50%, -50%);
}

/* IMAGE */
.logo-image {
  height: 32px;
  width: auto;
  object-fit: contain;
  display: none;
  transition: height 0.2s ease;
}

/* TEXT */
.logo-text {
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
}

.signin-btn {
  font-size: 13px;
  padding: 8px 14px;
  border: 1px solid #000;
  border-radius: 20px;
  text-decoration: none;
  color: #000;
}

























/* ================================
   SECTION POSITIONING ROOTS
   Required for absolute edit icons
================================ */

header,

.banner-section,
.rewards-section,
.rewardsTop,
.buzz-stack-area,
.profile{
  position: relative;
}













/* =========================================
APP BOTTOM NAV (FINAL WORKING – HARD RESET)
========================================= */

.app-bottom-nav {
  position: fixed;
bottom: 0;

  left: 50%;
  transform: translateX(-50%);



  height: 55px;
  padding: 0 10px;

  background: var(--theme-nav-color);

  display: flex;
  justify-content: space-between;
  align-items: center;

  border-radius: 30px 30px 0 0;

  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
  border: 0px solid #f0f0f0;

  z-index: 9988;
}

/* =========================================
CRITICAL RESET (THIS WAS MISSING)
========================================= */

.app-bottom-nav .nav-item {
  flex: 1;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 3px;

  /* 🔥 HARD RESET */
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;

  padding: 0;
  margin: 0;

  cursor: pointer;

  color: var(--theme-contrast);
  font-size: 10px;


/* REMOVE BLUE TAP FLASH */
  -webkit-tap-highlight-color: transparent;
}



/* =========================================
SVG ICON
========================================= */

.app-bottom-nav .icon {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;

  transition: all 0.2s ease;
}



/* =========================================
THEME ACTIVE NAV
========================================= */

.app-bottom-nav .nav-item.active {

  background: var(--theme-nav-color);

  color: var(--theme-contrast);

  font-weight: 600;

  border-radius: 50px;

  padding: 6px 0;
}

.app-bottom-nav .nav-item.active .icon {
  transform: translateY(-2px) scale(1.5);
}

/* =========================================
BODY SAFE SPACE
========================================= */

body {
  padding-bottom: 0px;
}





/* =========================================
RESPONSIVE WIDTH ONLY
========================================= */

.app-bottom-nav{

  width:clamp(
    220px,
    70vw,
    300px
  );

}



























/* =========================================
DISCOVER SECTION
========================================= */

.discover-section{

  position:relative;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;


  margin-top:25px;

  margin-bottom:26px;

  padding-top:8px;
}


/* HEADING */

.discover-heading{

  margin:0;

  text-align:center;
}

/* TOP SCRIPT */

.discover-line-1{

  display:block;

  margin-bottom:8px;

  font-size:30px;
  
  letter-spacing:2px;


  line-height:1;

  color:#444;

  font-family:
  "Condiment",
  cursive;

  transform:rotate(-0deg);
}

/* BIG CONDENSED */

.discover-line-2{

  display:block;

  font-size:45px;

  line-height:0.92;

  letter-spacing:3px;

  text-transform:uppercase;

  color:#444;
  margin-bottom:10px;

 font-family:
  "Bebas Neue",
  sans-serif;



transform:rotate(-0deg);
}





  





/* =========================================
CSS ONLY LINE
========================================= */

.discover-line-2::after{

  content:"";

  display:block;

  width:20px;

  height:20px;

  margin:8px 0 -20px auto;

  border-top:3px solid #DCD6A8;
}






























/* =========================================
   BUZZ STACK AREA
========================================= */

.buzz-stack-area{

  position:relative;

  width:100%;

  display:flex;

  justify-content:center;
  align-items:center;

  padding-inline:35px;
}











/* ========================================= BUZZ EDIT ICON ========================================= */



.edit-icon[data-section="buzzSection"]{

  position:relative;

  top:-28px;

  margin-left:auto;

  margin-bottom:-28px;

  display:flex;

  align-items:center;

  justify-content:center;

  background:#222;

  color:#fff;

  border:none;

  border-radius:50%;

  width:28px;

  height:28px;

  font-size:14px;

  cursor:pointer;

  z-index:10;
}









/* =========================================
   BUZZ STACK WRAPPER
========================================= */

.buzz-stack-wrapper{

  position:relative;

  width:min(340px, calc(100vw - 56px));

  aspect-ratio:3 / 4.8;

  

  overflow:visible;
}

/* =========================================
   CARD BASE
========================================= */

.stack-card{

  position:absolute;

  inset:0;

will-change: transform;




  border-radius:34px;

border:1px solid rgba(255,255,255,0.75) !important;

  overflow:hidden;

  color:white;

  padding:24px;

  user-select:none;

  touch-action: pan-y;

  cursor:grab;



isolation:isolate;

 transition:
    transform 0.32s cubic-bezier(0.22,1,0.36,1);

  border:
    1px solid rgba(255,255,255,0.08);

  
}

.stack-card:active{
  cursor:grabbing;
}





/* =========================================
STACK GPU OPTIMIZATION
========================================= */

.stack-card{
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0,0,0);
  
}





/* =========================================
   BACKGROUNDS
========================================= */

.er-1,
.er-2,
.er-3,
.er-4{
  background: var(--card-color);
}

/* =========================================
   TYPOGRAPHY
========================================= */

.cafe-label{


  color:var(--card-text-color);


  font-size:10px;

  letter-spacing:4px;

  text-transform:uppercase;

  opacity:0.7;

  margin-bottom:23px;
}

.title{

  position:relative;

  z-index:3;






  width:100%;

  margin:0;

  margin-top:-54px;


 
  

  display:block;

  padding-top:0;

  font-size:47px;

font-family:'Fraunces', serif;

  
  color:var(--card-text-color);

  line-height:1.1;

  font-weight:800;

  letter-spacing:1px;

  white-space:pre-line;

  overflow-wrap:break-word;



}


























/* =========================================
BOTTOM PANEL
========================================= */

.bottom-panel{

  position:relative;

  margin-top:12px;

   padding:12px 12px 12px 6px;



  z-index:5;

  border-radius:12px;

  background:
    rgba(255,255,255,0.00);



  border:
    0px solid rgba(255,255,255,0.08);
}



.offer-text{
z-index:5 !important;

 padding-top:0px;

  font-size:20px;



  font-weight:600;

  margin-bottom:8px;
   color:var(--card-text-color);
 
margin-top:-35px !important;

 line-height:1.45;

  letter-spacing:0.4px;

  white-space:pre-line;

  word-break:break-word;

  overflow-wrap:break-word;


  

}




.time-text{

  display:flex;

  align-items:center;

  gap:10px;
}

.time-text::before{

  content:"";

  width:15px;

  height:15px;

  border:
    1.5px solid currentColor;

  border-radius:50%;

  opacity:0.8;

  flex:none;

  box-sizing:border-box;

  background:
    linear-gradient(
      currentColor,
      currentColor
    ) center 32% / 1.5px 3px no-repeat,

    linear-gradient(
      currentColor,
      currentColor
    ) 62% 50% / 3px 1.5px no-repeat;
}













.time-text{

color:var(--card-text-color);


  padding-top:12px;

  border-top:
    1px solid rgba(255,255,255,0.08);

  font-size:15px;

  letter-spacing:3px;

  text-transform:uppercase;

  opacity:0.65;
}


















/* =========================================
RESPONSIVE SYSTEM
NON-CLASH + ALIGNED
========================================= */

/* =========================================
DEFAULT
========================================= */

.discover-section{

  margin-top:20px;

  margin-bottom:26px;

  padding-top:8px;
}



.discover-line-1{

  font-size:30px;

  letter-spacing:2px;

  margin-bottom:10px;
}

.discover-line-2{

  font-size:45px;

  line-height:0.82;

  letter-spacing:3px;

  margin-bottom:10px;
}

.buzz-stack-wrapper{

  width:min(340px, calc(100vw - 56px));
}

.stack-card{

  border-radius:34px;

  padding:24px;
}

.title{

  font-size:47px;
}

.buzz-calendar{

  padding-inline:20px;

  margin-top:10px;

  margin-bottom:14px;
}

.buzz-date{

  width:68px;

  height:82px;

  gap:4px;
}

.buzz-date:not(:last-child)::after{

  height:52px;
}

.date-name{

  font-size:11px;

  letter-spacing:2px;
}

.date-number{

  font-size:24px;
}

.buzz-date.active{

  border-radius:10px;
}

/* =========================================
MOBILE DEVICES
========================================= */

@media (max-width:480px){

  


.cafe-label{
  margin-bottom:26px;
}









/* DISCOVER */

  .discover-section{

    margin-top:20px;

    margin-bottom:8px;

    padding-top:4px;
  }

  

  .discover-line-1{

    font-size:30px;

    letter-spacing:2px;

    margin-bottom:10px;
  }

  .discover-line-2{

    font-size:45px;

    letter-spacing:3px;

    margin-bottom:8px;
  }

  /* STACK */

  .buzz-stack-wrapper{

    width:min(88vw, 320px);



  }

  .stack-card{

    border-radius:30px;

    padding:20px;


  }

  .title{

    font-size:clamp(34px, 10vw, 47px);
  }


.offer-text{

  font-size:20px;

  font-weight:600;

}



  /* CALENDAR */

  .buzz-calendar{

    padding-inline:12px;

    margin-top:10px;

    margin-bottom:12px;
  }

  .buzz-date{

    width:58px;

    height:72px;

    gap:3px;
  }

  .buzz-date:not(:last-child)::after{

    height:42px;
  }

  .date-name{

    font-size:9px;

    letter-spacing:1.4px;
  }

  .date-number{

    font-size:22px;
  }

  .buzz-date.active{

    border-radius:10px;
  }

}

/* =========================================
TALL MOBILE DEVICES
========================================= */

@media (max-width:480px) and (min-height:850px){

  .discover-section{

    margin-top:25px;

    margin-bottom:10px;
  }

  .buzz-stack-wrapper{

    width:min(90vw, 340px);
  }

  .stack-card{

    aspect-ratio:3 / 5.1;


  }


.offer-text{

  font-size:23px;

  font-weight:600;

}


  .buzz-calendar{

    margin-top:18px;

    margin-bottom:8px;
  }

  .buzz-date{

    width:74px;

    height:88px;
  }

  .date-number{

    font-size:28px;
  }

}

/* =========================================
320px DEVICES
========================================= */

@media (max-width:320px){

  body{
    padding:0;
  }

  /* DISCOVER */

  .discover-section{

    margin-top:20px;
    margin-bottom:10px;
  }



  .discover-line-1{

    font-size:30px;




    letter-spacing:1px;

    margin-bottom:10px;
  }

  .discover-line-2{

    font-size:40px;

    line-height:0.86;

    letter-spacing:3px;

    margin-bottom:6px;
  }

  /* STACK */

  .buzz-stack-wrapper{

    width:min(
      280px,
      calc(100vw - 32px)
    );
  }

  .buzz-illustration{

    width:110px;
  }

  .stack-card{

    border-radius:24px;

    padding:16px;




  }

  .cafe-label{

    font-size:8px;

    margin-bottom:18px;
  }

  .title{

    font-size:35px;

    line-height:0.84;

    margin-top:-38px;
  }

  .stack-card .description{

    margin-top:-10px;

    font-size:12px;

    max-width:45%;
  }

  .bottom-panel{

   
    padding:10px;

    border-radius:16px;
  }

  .offer-text{

    font-size:15px;

    line-height:1.3;

    margin-top:-14px !important;

    margin-bottom:8px;
  }

  .time-text{

    padding-top:8px;

    font-size:8px;

    letter-spacing:2px;
  }

  /* CALENDAR */

  .buzz-calendar{

    padding-inline:4px;

    margin-top:6px;

    margin-bottom:8px;
  }

  .buzz-date{

    width:48px;

    height:60px;

    gap:2px;
  }

  .buzz-date:not(:last-child)::after{

    height:34px;
  }

  .date-name{

    font-size:7px;

    letter-spacing:1px;
  }

  .date-number{

    font-size:18px;
  }

  .buzz-date.active{

    border-radius:10px;
  }

}



  /* =========================================
BUZZ ILLUSTRATION
========================================= */



.buzz-illustration{

  display:block;

  margin-left:auto;

  margin-top:10px;

  width:min(72%, 260px);

  height:auto;

  object-fit:contain;

  pointer-events:none;

  user-select:none;

  z-index:1;

  


  
  filter:
    saturate(0.7)
    contrast(0.94)
    hue-rotate(-2deg);

}














    




























/* =========================================
EDITORIAL DATE STRIP
========================================= */

.buzz-calendar{

  width:100%;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:0;

  margin-top:10px;

  margin-bottom:4px;

 

  padding-inline:20px;
}

/* =========================================
DATE ITEM
========================================= */

.buzz-date{

  position:relative;

  width:68px;

  height:82px;

  border:none;

  background:transparent;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  gap:4px;

  cursor:pointer;

  flex-shrink:0;
}

/* SEPARATOR */

.buzz-date:not(:last-child)::after{

  content:"";

  position:absolute;

  right:0;

  top:50%;

  transform:translateY(-50%);

  width:1px;

  height:52px;

  background:
    rgba(190,180,150,0.28);
}

/* =========================================
DATE NAME
========================================= */

.date-name{

  font-size:11px;

  letter-spacing:2px;

  color:#8C8478;

  font-weight:500;
}

/* =========================================
DATE NUMBER
========================================= */

.date-number{

  font-size:24px;

  font-weight:700;

  color:#5F544C;

  line-height:1;
}




/* =========================================
ACTIVE
========================================= */

.buzz-date{

  position:relative;
}

.buzz-date.active{

  z-index:2;
}

.buzz-date.active::before{

  content:"";

  position:absolute;

  inset:6px;

  background:var(--theme-color);

  border-radius:10px;

  box-shadow:
    0 2px 2px rgba(0,0,0,0.2),
    0 2px 4px rgba(0,0,0,0.02);

  z-index:0;
}

.buzz-date.active .date-name,
.buzz-date.active .date-number{

  position:relative;

  z-index:1;

  color:var(--theme-contrast);
}



/* =========================================
ACTIVE BORDER ONLY
========================================= */

.buzz-date.active{

  border:0.5px solid #BAB082;

  border-radius:10px;
}

/* =========================================
MOBILE
========================================= */

@media (max-width:480px){

  .buzz-calendar{

    padding-inline:12px;

    margin-top:8px;

    margin-bottom:8px;
  }

  .buzz-date{

    width:58px;

    height:72px;

    gap:3px;
  }

  .buzz-date:not(:last-child)::after{

    height:42px;
  }

  .date-name{

    font-size:9px;

    letter-spacing:1.4px;
  }

  .date-number{

    font-size:22px;
  }

  .buzz-date.active{

    border-radius:10px;
  }

}

/* =========================================
320px DEVICES
========================================= */

@media (max-width:320px){

  .buzz-calendar{

    padding-inline:4px;

    margin-top:4px;

    margin-bottom:8px;
  }

  .buzz-date{

    width:48px;

    height:60px;

    gap:2px;
  }

  .buzz-date:not(:last-child)::after{

    height:34px;
  }

  .date-name{

    font-size:7px;

    letter-spacing:1px;
  }

  .date-number{

    font-size:18px;
  }

  .buzz-date.active{

    border-radius:10px;
  }

}























/* =========================================
UPLOAD SPINNER PROFILE CUS
========================================= */



.profile-wrap{
  position:relative;
}

.profile-spinner{

  position:absolute;

  top:50%;
  left:50%;

  width:22px;
  height:22px;

  margin-left:-11px;
  margin-top:-11px;

  border:2px solid #000;
  border-top-color:transparent;

  border-radius:50%;

  animation:
    profileSpin 0.7s linear infinite;

  display:none;

  z-index:5;
}

.profile-wrap.uploading
.profile-spinner{
  display:block;
}

@keyframes profileSpin{
  to{
    transform:rotate(360deg);
  }
}




































/* =========================================
UPLOAD SPINNER OVERLAY
========================================= */

.thumb {
  position: relative;
}

.thumb.uploading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(2px);
}

.thumb.uploading::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
































































































/* =========================================
MAIN PROFILE LAYOUT
========================================= */



.container {
  max-width: 430px;
  margin: auto;
  padding: 20px;
}






/* =========================================
PROFILE WRAP (SCOPED – EDIT SAFE)
========================================= */
.profile-header .profile-wrap {
  position: relative;
  width: 100%;              /* 🔥 THIS is the key fix */
  display: flex;
  justify-content: center;
}




/* =========================================
EDIT ICON (STABLE + RESPONSIVE)
========================================= */
.profile-header .edit-icon {
  position: absolute;

top: -25px;   /* 🔥 adjust to image level */
  right: 0px;


  background: #000;
  border: none;
  font-size: 16px;
  cursor: pointer;
}









/* =========================================
PROFILE + TITLE (FINAL ALIGNMENT)
========================================= */

.profile-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

/* =========================================
PROFILE IMAGE (CENTERED + SCALABLE)
========================================= */

.profile-wrap {
  display: flex;
  align-items: center;
  justify-content: center;

  margin-top: 15px;

  /* 🔥 IMPORTANT: remove fixed size */
  width: auto;
  height: auto;
}

.profile-img {
  width: 90px;   /* default size */
  height: 90px;

   object-fit: contain;   /* 🔥 full image */
  border-radius: 0;
  object-position: center;


  display: block;
}

/* =========================================
TITLE
========================================= */

.title-block {
  text-align: center;
}

.title-block h1 {
  font-size: 23px;
  font-weight: 600;
  margin: 0;
  color: #222;
}



.underline {
  width: 40px;
  height: 3px;
  background: #ddd;
  margin-top: 2px;
}





/* =========================================
VERIFIED PILL (SVG - CLEAN ALIGNMENT)
========================================= */

.title-block h1 {
  display: inline-flex; /* 👈 keeps it centered with text-align */
  align-items: center;
  gap: 6px;
}

.verified-pill svg {
  width: 18px;
  height: 18px;
  transform: translateY(1px); /* 👈 optical alignment fix */
}

/* circle */
.verified-pill circle {
  fill: #532306;
}

/* check */
.verified-pill path {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}




/* =========================================
PROFILE LINE BREAK FIX (PREVIEW)
========================================= */

.description,
.info-item p {
  white-space: pre-wrap;   /* 🔥 key change */
  word-break: break-word;  /* prevents overflow */
}




/* =========================================
DESCRIPTION
========================================= */

.description {
  margin-top: 15px;
  line-height: 1.5;
  font-size: 16px;
  color: #555;
}

/* =========================================
INFO SECTION
========================================= */

.info {
  margin-top: 20px;
  border-top: 1px solid #eee;
  padding-top: 20px;
  font-size: 14px;
}

.info-item {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}

.info-item small {
  font-size: 10px;
  color: #888;
}

.info-item p {
  margin: 2px 0 0;
  font-weight: 400;
}

/* =========================================
SOCIAL
========================================= */

.social {
  margin-top: 30px;
  display: flex;
  gap: 20px;
  font-size: 12px;
}




/* =========================================
INFO ICON (SCOPED)
Only affects icons inside .info
========================================= */

.info .icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f2f2f2;
  border-radius: 50%;
  color: #79591d;
}

/* Ensure SVG inside info stays controlled */
.info .icon svg {
  width: 18px;
  height: 18px;
}










/* =========================================
BRAND STRIP (FINAL - STABLE CLEAN VERSION)
========================================= */

.brand-strip {
  margin-top: 24px;
  padding: 18px;
  border-top: 1px solid #eee;
  border-radius: 0px;
   



  display: flex;
  justify-content: center;
  align-items: flex-end; /* key for alignment */
  gap: 40px;
 
  background: #F7F6EC;
   
}





/* SUPPORT + TERMS */
.brand-links {
  display: flex;
  gap: 38px;
}

.brand-links a {
  font-size: 11px;
  text-decoration: none;
  color: #79591d;
  
}

/* POWERED BY BLOCK */
.powered-by {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

/* LOGO */
.powered-by img {
  height: 30px;
  width: 90px;
  object-fit: contain;
  margin-bottom: 3px;
}

/* TEXT */
.powered-by span {
  font-size: 10px;
  letter-spacing: 1px;
  opacity: 0.6;
  white-space: nowrap;
}






.brand-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

/* vertical divider */
.brand-links::after {
  content: "";
  width: 1px;
  height: 14px;
  background: rgba(0,0,0,0.2);
  margin-left: 10px;
}





































/* =========================================
BASE UI (SHARED – SAFE FOR PUBLIC)
========================================= */

/* textarea fixes */
#offerTitleInput,
#offerDescInput {
  resize: none;
  overflow: hidden;
}

#profileLocation {
  resize: none;
}

/* =========================================
GENERIC INPUT / FORM STYLES
========================================= */

input,
textarea,
select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  box-sizing: border-box;
  outline: none;
}

/* =========================================
BUTTON BASE
========================================= */

button {
  cursor: pointer;
  border-radius: 8px;
}

/* =========================================
TEXT OVERFLOW FIX
========================================= */

.info-item p {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* =========================================
LINK STYLE
========================================= */

.info-item a {
  color: #222;
  text-decoration: none;
  font-weight: 500;
}

.info-item a:hover {
  text-decoration: underline;
}

/* =========================================
LAYOUT HELPERS
========================================= */

.banner-layout {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}

.banner-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.banner-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.thumb {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================
REWARD TEXT WRAP
========================================= */

.reward-name {
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  word-break: break-word;
}

/* =========================================
UPLOAD UI (SAFE DISPLAY PART ONLY)
========================================= */

.upload-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.upload-text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 12px;
  color: #333;
}

.upload-placeholder {
  font-size: 22px;
  line-height: 1;
  color: #999;
}

/* =========================================
TOGGLE SWITCH (SAFE UI)
========================================= */

.toggle-switch {
  position: relative;
  width: 42px;
  height: 22px;
}

.slider {
  position: absolute;
  inset: 0;
  background: #ddd;
  border-radius: 999px;
  transition: 0.3s;
}

.slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 2px;
  top: 2px;
  background: #000;
  border-radius: 50%;
  transition: 0.3s;
}

/* =========================================
PAGE SYSTEM
========================================= */

.app-page {
  display: none;
}

.app-page.active {
  display: block;
}





















/* =========================================
GLOBAL PLATFORM CARD
========================================= */

.stack-card.global-card{

  background:linear-gradient(
    180deg,
    #7F1D16 0%,
  #4A1713 100%
  );

}

.stack-card.global-card
.buzz-illustration{

  width:280px;

  right:-50px;

  bottom:-16px;

}