:root{
  --bg:#fff;
  --card:#ffffff;
  --text:#111827;
  --muted:#6B7280;
  --shadow:0 8px 24px rgba(17,24,39,.08);
  --shadow2:0 2px 10px rgba(17,24,39,.08);
  --radius:18px;
  --radius-sm:14px;
  --scrollpad:0px;
}

@media (hover:hover) and (pointer:fine){
  :root{--scrollpad:12px;}
}

*{box-sizing:border-box;}

html,body{height:100%;}
/* Prevent overlay scrollbars from covering UI on some desktops */
@supports (scrollbar-gutter: stable){
  html,body{scrollbar-gutter:stable;}
}
body{
  margin:0;
  background:var(--bg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  overflow-x:hidden;
}

/* Prevent any accidental horizontal scroll from wide chips/cards */
.app{overflow-x:hidden;}
/* Reset to avoid theme/browser defaults bleeding */
a{color:inherit;text-decoration:none;}
a:visited{color:inherit;}
button,input,select,textarea{font:inherit;color:inherit;}
h1,h2,h3,h4,h5,h6,p{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
img{max-width:100%;display:block;}


/* App  */
.app{
  max-width:420px;
  margin:0 auto;
  /* Use dynamic viewport height so bottom-nav doesn't jump/hide on mobile browsers */
  min-height: calc(var(--app-vh, 1vh) * 100);
  padding:12px 14px calc(86px + env(safe-area-inset-bottom));
}

.lwsvg{width:20px;height:20px;display:inline-block;}

/* Topbar */
.topbar{display:flex;align-items:center;gap:10px;padding:0 0 10px;}

.search{
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--card);
  border-radius:999px;
  padding:10px 12px;
  box-shadow: var(--shadow2);
}
.search__ico{color:#9CA3AF;display:flex;}
.search__input{
  border:0;
  outline:0;
  background:transparent;
  width:100%;
  font-size:14px;
  color:var(--text);
}
.search__input::placeholder{color:#9CA3AF;}

.avatar{
  width:40px;
  height:40px;
  border-radius:999px;
  border:0;
  background:var(--card);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: var(--shadow2);
  color:var(--lw-primary);
  position:relative;
}.avatar__ico{width:18px;height:18px;opacity:.95;}

/* GoPay panel */
.gopay{
  display:flex;
  align-items:stretch;
  gap:12px;
  padding:12px;
  border-radius: 20px;
  background: linear-gradient(135deg, #2C748A 0%, #3E92A1 100%);
  box-shadow: var(--shadow);
}
.gopay__left{
  width: 155px;
  background: rgba(255,255,255,.92);
  border-radius: 16px;
  padding:10px 10px;
}
.gopay__brand{display:flex;align-items:center;gap:6px;font-weight:700;font-size:13px;}
.gopay__logo{width:10px;height:10px;border-radius:4px;background:#00AEEF;display:inline-block;}
.gopay__text{letter-spacing:.2px;}
.gopay__bal{margin-top:6px;font-weight:800;font-size:18px;}
.gopay__hint{margin-top:2px;font-size:12px;color:#16A34A;font-weight:600;}

.gopay__actions{flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.gact{
  flex:1;
  border:0;
  background:transparent;
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:4px 0;
}
.gact__ico{
  width:34px;height:34px;border-radius:12px;
  background: rgba(255,255,255,.20);
  display:flex;align-items:center;justify-content:center;
  color:#fff;
}
.gact__ico .lwsvg{width:18px;height:18px;}
.gact__lbl{font-size:12px;font-weight:600;opacity:.95;}

/* Services */
.services{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px 6px;
}
.svc{
  border:0;
  background:transparent;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:0;
  color:var(--text);
}
.svc__ico{
  width:58px;
  height:58px;
  border-radius:16px;
  background: var(--svc-bg, #EAEAEA);
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--svc-fg, #374151);
}
.svc__ico .lwsvg{width:30px;height:30px;}
.svc__lbl{font-size:12px;color:#374151;font-weight:600;}

/* XP card */
.xp{
  margin-top:14px;
  background: var(--card);
  border-radius: 18px;
  padding:14px;
  box-shadow: var(--shadow2);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.xp__left{display:flex;align-items:center;gap:12px;flex:1;}
.xp__badge{
  width:54px;height:54px;border-radius:18px;
  background: #E6F5FF;
  display:flex;align-items:center;justify-content:center;
  color:#0EA5E9;
}
.xp__badge .lwsvg{width:26px;height:26px;}
.xp__title{font-size:14px;line-height:1.2;margin-bottom:4px;}
.xp__sub{font-size:12px;color:var(--muted);margin-bottom:8px;}
.xp__bar{height:6px;border-radius:999px;background:#E5E7EB;overflow:hidden;}
.xp__bar span{display:block;height:100%;background:var(--lw-primary);border-radius:999px;}
.xp__chev{color:#9CA3AF;}
.xp__chev .lwsvg{width:18px;height:18px;}

/* Chips */
.chips{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.chip{
  border:0;
  background: var(--card);
  border-radius: 16px;
  padding:12px;
  box-shadow: var(--shadow2);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.chip__txt{font-size:13px;font-weight:700;color:#374151;}
.chip__ico .lwsvg{width:20px;height:20px;}

/* Feed cards */
.feed{margin-top:14px;display:flex;flex-direction:column;gap:14px;}
.card{background:var(--card);border-radius:18px;box-shadow:var(--shadow2);overflow:hidden;}
.card__media{position:relative;height:154px;display:flex;align-items:center;justify-content:center;}
.card__media img{width:100%;height:100%;object-fit:contain;padding:12px;}
.card__media--blue{background: radial-gradient(circle at 30% 30%, #00C2FF 0%, #1D87C8 35%, #0B5A86 100%);}
.card__media--green{background: radial-gradient(circle at 70% 30%, #C5FF9F 0%, #43D37B 35%, #0B8E4A 100%);}
.card__media--teal{background: radial-gradient(circle at 30% 30%, #7FE8FF 0%, #3BB6D6 35%, #1282A6 100%);}
.ribbon{
  position:absolute;left:12px;top:12px;
  background:#FFD100;
  color:#111;
  font-weight:900;
  font-size:12px;
  padding:6px 10px;
  border-radius: 10px;
  transform: rotate(-14deg);
}
.card__body{padding:14px 14px 16px;}
.tag{color:#16A34A;font-weight:800;font-size:12px;margin-bottom:8px;}
.tag .emoji{margin-left:2px;}
.h{font-size:16px;font-weight:900;line-height:1.2;margin-bottom:8px;}
.p{font-size:13px;color:var(--muted);line-height:1.35;}

/* Bottom nav */
.bottomnav{
  position:fixed;
  left:0;right:0;
  bottom:0;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 -10px 30px rgba(17,24,39,.08);
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.btab{
  flex:1;
  border:0;
  background:transparent;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  color:#9CA3AF;
  padding:4px 0;
  position:relative;
}
.btab__ico{width:22px;height:22px;}
.btab__ico svg{width:22px;height:22px;display:block;}
.btab__lbl{font-size:11px;font-weight:700;}
.btab.is-active{color:var(--lw-primary);}
.btab__dot{
  position:absolute;
  top:4px;
  right:34%;
  width:8px;
  height:8px;
  background:#EF4444;
  border-radius:999px;
}

/* Reduce to 1 column chips on narrow */
@media (max-width:360px){
  .chips{grid-template-columns:1fr;}
}

/* Toast */
.lwtoast{
  position:fixed;
  left:50%;
  bottom:92px;
  transform:translateX(-50%) translateY(12px);
  background:rgba(17,24,39,.92);
  color:#fff;
  padding:10px 14px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  opacity:0;
  transition:opacity .2s ease, transform .2s ease;
  z-index:999;
  pointer-events:none;
}
.lwtoast.is-show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ------------------------------------------------------------
   Multi-view (Home / Promo / Orders / Chat / Profile)
------------------------------------------------------------ */
.views{width:100%;}
.view{display:none;}
.view.is-active{display:block;}

/* Icon swap (filled/unfilled) */
.btab .ico-filled{display:none;}
.btab .ico-unfilled{display:inline-flex;}
.btab.is-active .ico-filled{display:inline-flex;}
.btab.is-active .ico-unfilled{display:none;}

/* Active indicator like the app */
.btab.is-active::before{
  content:"";
  position:absolute;
  top:-10px;
  left:50%;
  transform:translateX(-50%);
  width:56px;
  height:4px;
  border-radius:999px;
  background:var(--lw-primary);
}

/* Title bars */
.titlebar{
  padding:18px calc(14px + var(--scrollpad)) 16px 14px;
}
.titlebar h1{
  margin:0;
  font-size:30px;
  font-weight:800;
  letter-spacing:-0.02em;
}
.titlebar--row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px calc(14px + var(--scrollpad)) 12px 14px;
  gap:12px;
  flex-wrap:nowrap;
}

/* Keep title + action on one line (prevents action icon dropping below title on tight widths) */
.titlebar--row h1{
  flex:1;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.titlebar--row .iconbtn{flex:0 0 auto;}
.titlebar__left{display:flex;align-items:center;gap:10px;}
.iconbtn{
  width:40px;height:40px;
  border-radius:999px;
  border:1px solid #E5E7EB;
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#6B7280;
}
.iconbtn svg{width:20px;height:20px;}

/* Page padding */
.pagepad{padding:14px calc(14px + var(--scrollpad)) 14px 14px;}


/* PROMOS */
.sectionh{margin-top:18px;font-size:20px;font-weight:700;letter-spacing:-0.02em;color:#111827;}
.sectionh--sm{margin-top:16px;font-size:22px;}

.pdots{display:flex;gap:8px;justify-content:center;margin:8px 0 2px;}
.pdot{width:8px;height:8px;border-radius:999px;background:#D1D5DB;}
.pdot.is-active{background:var(--lw-primary);}

.gosec{margin-top:16px;padding:0 2px 22px;}
.gosec__h{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:900;}
.gosec__ico{width:28px;height:28px;border-radius:999px;background:#E0F2FE;color:#0284C7;display:flex;align-items:center;justify-content:center;}
.gosec__ico svg{width:18px;height:18px;}
.gosec__t{margin-top:10px;font-size:18px;font-weight:900;letter-spacing:-0.02em;}
.gosec__p{margin-top:6px;font-size:13px;line-height:1.35;color:#6B7280;}

.pxp{
  display:flex;
  align-items:center;
  gap:12px;
  background:#fff;
  border:1px solid #E5E7EB;
  border-radius:18px;
  padding:14px 14px;
  box-shadow:0 20px 45px rgba(17,24,39,.08);
}
.pxp__ico{
  width:56px;height:56px;
  border-radius:999px;
  background:#E0F2FE;
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
}
.pxp__ico svg{width:28px;height:28px;}

.pxp__meta{flex:1;min-width:0;}
.pxp__title{font-size:14px;font-weight:800;color:#111827;margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pxp__bar{height:8px;background:#E5E7EB;border-radius:999px;overflow:hidden;}
.pxp__bar span{display:block;height:100%;background:var(--lw-primary);border-radius:999px;}
.pxp__chev{color:#9CA3AF;}
.pxp__chev svg{width:18px;height:18px;}

.pstats{margin-top:12px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.pstat{
  background:#fff;
  border:1px solid #E5E7EB;
  border-radius:16px;
  padding:12px 12px 10px;
  box-shadow:0 20px 45px rgba(17,24,39,.06);
  color:inherit;
  text-decoration:none;
}
.pstat__top{display:flex;align-items:center;justify-content:space-between;}
.pstat__n{font-size:22px;font-weight:900;color:#111827;line-height:1;}
.pstat__chev{color:#9CA3AF;}
.pstat__chev svg{width:16px;height:16px;}
.pstat__t{font-size:12px;font-weight:800;color:#111827;margin-top:6px;}
.pstat__s{font-size:11px;color:#6B7280;margin-top:2px;}
.pstat__line{height:4px;border-radius:999px;margin-top:10px;}
.pstat__line--orange{background:#F97316;}
.pstat__line--purple{background:#7C3AED;}
.pstat__line--teal{background:#14B8A6;}

.pcode{
  margin-top:12px;
  background:#fff;
  border:1px solid #E5E7EB;
  border-radius:18px;
  padding:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  box-shadow:0 20px 45px rgba(17,24,39,.06);
}
.pcode__left{display:flex;align-items:center;gap:12px;min-width:0;}
.pcode__ico{width:44px;height:44px;border-radius:14px;background:#ECFDF5;color:var(--lw-primary);display:flex;align-items:center;justify-content:center;}
.pcode__ico svg{width:22px;height:22px;}
.pcode__txt{font-size:14px;font-weight:800;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pcode__chev{color:#9CA3AF;}

.phead{display:flex;align-items:flex-end;justify-content:space-between;margin-top:14px;}
.phead__t{font-size:16px;font-weight:900;color:#111827;}
.phead__r{font-size:12px;color:#6B7280;}

.filters{display:flex;gap:10px;overflow:auto;scrollbar-width:none;margin-top:12px;padding-bottom:4px;}
.filters::-webkit-scrollbar{display:none;}
.fchip{border:0;background:#F3F4F6;color:#6B7280;font-weight:800;font-size:12px;border-radius:999px;padding:10px 14px;white-space:nowrap;}
.fchip.is-active{background:var(--lw-primary);color:#fff;}

.pcarousel{margin-top:12px;display:flex;gap:12px;overflow:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px;}
.pcarousel::-webkit-scrollbar{display:none;}
.pcard{
  flex:0 0 82%;
  scroll-snap-align:start;
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 20px 45px rgba(17,24,39,.08);
}
.pcard__media{height:150px;background:linear-gradient(135deg,#0EA5E9,#22C55E);position:relative;}
.pcard__media--red{background:linear-gradient(135deg,#EF4444,#F59E0B);}
.pcard__media img{width:100%;height:100%;object-fit:cover;display:block;}
.pcard__badge{position:absolute;left:14px;top:14px;background:#FACC15;color:#111827;font-weight:900;font-size:12px;padding:8px 10px;border-radius:999px;transform:rotate(-10deg);}
.pcard__body{padding:14px;}
.pcard__tag{color:var(--lw-primary);font-weight:900;font-size:12px;margin-bottom:6px;}
.pcard__h{font-weight:900;color:#111827;font-size:16px;line-height:1.25;}
.pcard__p{margin-top:6px;color:#6B7280;font-size:13px;line-height:1.35;}

/* ORDERS */
.view-orders{background:#fff;overflow-x:hidden;}
.view-orders .titlebar{padding:18px 14px 12px;border-bottom:1px solid #E5E7EB;background:#fff;}
.view-orders .titlebar h1{font-size:28px;font-weight:700;}
.view-orders .iconbtn{border:1px solid #E5E7EB;border-radius:999px;width:36px;height:36px;background:#fff;}
.view-orders .iconbtn svg{width:18px;height:18px;}

.otabs{
  display:flex;
  gap:20px;
  border-bottom:1px solid #E5E7EB;
  margin:0 0 12px;
  padding:0;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.otabs::-webkit-scrollbar{display:none;}
.otab{background:transparent;border:0;padding:12px 0 12px;font-weight:600;color:#6B7280;font-size:14px;position:relative;}
.otab.is-active{color:#111827;}
.otab.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--lw-primary);border-radius:999px;}

.ofilters{display:flex;gap:10px;margin:10px 0 12px;}
.opill{display:inline-flex;align-items:center;gap:8px;border:1px solid #E5E7EB;border-radius:999px;padding:8px 14px;background:#F9FAFB;color:#111827;font-weight:600;font-size:14px;}
.opill.is-active{background:#fff;border-color:var(--lw-primary);color:var(--lw-primary);font-weight:700;}
.opill__chev svg{width:14px;height:14px;opacity:.7;}

.otrans{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border:1px solid #E5E7EB;border-radius:16px;background:#fff;text-decoration:none;color:#111827;}
.otrans__t{display:flex;align-items:center;gap:10px;font-weight:600;}
.otrans__t svg{width:20px;height:20px;}
.otrans__chev svg{width:18px;height:18px;opacity:.55;}

.olist{margin-top:12px;display:grid;gap:12px;}
.ocard{background:#fff;border:1px solid #E5E7EB;border-radius:18px;padding:14px;box-shadow:0 1px 2px rgba(16,24,40,.06);width:100%;max-width:100%;}
.ocard__top{display:flex;gap:12px;align-items:flex-start;min-width:0;}
.ocard__ico{width:44px;height:44px;border-radius:16px;background:#FEE2E2;color:#D32F2F;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.ocard__ico svg{width:26px;height:26px;}
.ocard__meta{flex:1 1 0%;min-width:0;}
.ocard__ttl{font-weight:700;color:#111827;font-size:15px;line-height:1.2;white-space:normal;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;}
.ocard__sub{margin-top:4px;color:#6B7280;font-size:13px;white-space:normal;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;}
.ocard__price{font-weight:700;color:#111827;font-size:14px;margin-left:8px;white-space:nowrap;flex:0 0 auto;text-align:right;}
.ocard__mid{margin:8px 0 10px 56px;color:#6B7280;font-size:13px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;}
.ocard__bot{display:flex;align-items:center;justify-content:flex-start;gap:12px;margin-left:56px;min-width:0;flex-wrap:wrap;}
.ocard__bot .ocard__btnwrap{margin-left:auto;flex:0 0 auto;}
.ocard .btn{max-width:100%;}

@media (max-width:360px){
  .ocard__top{flex-wrap:wrap;}
  .ocard__price{width:100%;margin-left:0;text-align:left;}
}
.ocard__bot > div{min-width:0;flex:1 1 auto;}
.ocard__bot > a{flex:0 0 auto;}
.ocard__status{font-weight:600;color:#111827;font-size:13px;}
.ocard__date{margin-top:2px;color:#6B7280;font-size:12px;}

.btn-outline{border:2px solid var(--lw-primary);background:#fff;color:var(--lw-primary);font-weight:700;font-size:13px;padding:10px 14px;border-radius:999px;white-space:nowrap;}
.btn-outline:active{transform:scale(.98);}

/* CHAT */
.chatbar{padding:14px 2px 10px;border-bottom:1px solid #E5E7EB;margin:0 -14px 12px;padding-left:14px;padding-right:14px;background:#fff;position:sticky;top:0;z-index:5;}
.chatbar h1{margin:0;font-size:22px;font-weight:900;color:#111827;}
.csec{margin-top:10px;}
.csec__t{font-size:13px;font-weight:900;color:#111827;margin:10px 0 10px;}
.cfeats{display:flex;gap:28px;}
.cfeat{display:flex;flex-direction:column;align-items:center;gap:8px;border:0;background:transparent;color:#111827;font-weight:900;font-size:12px;position:relative;}
.cfeat__ico{width:52px;height:52px;border-radius:999px;background:#F3F4F6;display:flex;align-items:center;justify-content:center;color:#F97316;}
.cfeat__ico--help{color:var(--lw-primary);}
.cfeat__ico svg{width:24px;height:24px;}
.cfeat__dot{position:absolute;top:2px;right:12px;width:10px;height:10px;border-radius:999px;background:#EF4444;box-shadow:0 0 0 2px #fff;}

.clist{margin-top:8px;border-top:1px solid #E5E7EB;}
.crow{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid #E5E7EB;text-decoration:none;color:inherit;}
.crow__ava{width:44px;height:44px;border-radius:999px;background:#D1FAE5;display:flex;align-items:center;justify-content:center;color:#111827;font-weight:900;position:relative;flex:0 0 44px;}
.crow__ava--blue{background:#DBEAFE;}
.crow__ava--green{background:#D1FAE5;}
.crow__ava--solid{background:var(--lw-primary);color:#fff;}
.crow__check{position:absolute;left:-2px;bottom:-2px;width:18px;height:18px;border-radius:999px;background:var(--lw-primary);border:2px solid #fff;display:flex;align-items:center;justify-content:center;}
.crow__check:before{content:"";width:8px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);margin-top:-1px;}
.crow__meta{flex:1;min-width:0;}
.crow__name{font-weight:900;color:#111827;font-size:14px;}
.crow__msg{color:#6B7280;font-size:12px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.crow__right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:8px;}
.crow__date{color:#9CA3AF;font-size:12px;font-weight:800;}
.crow__badge{min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:#EF4444;color:#fff;font-weight:900;font-size:12px;display:inline-flex;align-items:center;justify-content:center;}

.cfab{position:fixed;right:18px;bottom:92px;width:54px;height:54px;border-radius:999px;border:0;background:var(--lw-primary);box-shadow:0 18px 45px rgba(16,185,129,.35);display:flex;align-items:center;justify-content:center;color:#fff;z-index:20;}
.cfab:before,.cfab:after{content:"";position:absolute;background:#fff;border-radius:999px;}
.cfab:before{width:20px;height:3px;}
.cfab:after{width:3px;height:20px;}

/* PROFILE */
.app.is-profile{
  padding:0;
  background:#fff;
}
.app.is-profile .bottomnav{display:none;}

/* Profile top bar (match Figma: title left, no boxed buttons) */
.view-profile .phead{display:flex;align-items:center;gap:10px;padding:12px 14px 10px;border-bottom:1px solid #E5E7EB;position:sticky;top:0;background:#fff;z-index:10;margin:0;}
.view-profile .phead h1{margin:0;font-size:18px;font-weight:900;color:#111827;letter-spacing:.2px;}
.view-profile .pback{
  border:0;
  background:transparent;
  padding:6px;
  color:#111827;
  display:flex;
  align-items:center;
  justify-content:center;
}
.view-profile .pback .lwsvg{width:22px;height:22px;}

/* User header */
.view-profile .puser{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px 6px;}
.view-profile .puser__left{display:flex;align-items:center;gap:12px;min-width:0;}
.view-profile .puser__ava{width:52px;height:52px;border-radius:999px;background:var(--lw-primary);color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 52px;}
.view-profile .puser__ava .lwsvg{width:24px;height:24px;}
.view-profile .puser__meta{min-width:0;}
.view-profile .puser__name{font-size:22px;font-weight:900;color:#111827;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px;}
.view-profile .puser__phone{margin-top:4px;color:#6B7280;font-weight:700;font-size:14px;}
.view-profile .pedit{
  border:0;
  background:transparent;
  padding:6px;
  color:#111827;
  display:flex;
  align-items:center;
  justify-content:center;
}
.view-profile .pedit .lwsvg{width:20px;height:20px;}

/* Badge "Warga" */
.view-profile .pbadge{margin:4px 14px 10px;display:inline-flex;align-items:center;gap:8px;background:#111827;color:#fff;font-weight:900;font-size:12px;padding:8px 12px;border-radius:999px;}
.view-profile .pbadge__ico{width:20px;height:20px;border-radius:999px;background:var(--lw-primary);display:flex;align-items:center;justify-content:center;color:#fff;}
.view-profile .pbadge__ico .lwsvg{width:14px;height:14px;}

/* Section label */
.view-profile .psection{text-align:center;font-weight:800;color:#111827;font-size:14px;margin:6px 0 10px;}

/* Profile list */
.view-profile .plist{margin:0;border-top:1px solid #E5E7EB;}
.view-profile .prow{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 14px;
  border-bottom:1px solid #E5E7EB;
  text-decoration:none;
  color:inherit;
  background:#fff;
}
.view-profile .prow__ico{width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:#111827;opacity:.95;}
.view-profile .prow__ico .lwsvg{width:22px;height:22px;}
.view-profile .prow__txt{flex:1;font-weight:800;color:#111827;font-size:15px;}
.view-profile .prow__sub,
.view-profile .prow__meta{font-size:12px;color:#6B7280;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;}
.view-profile .prow__pill{background:var(--lw-primary);color:#fff;font-size:12px;font-weight:900;padding:5px 10px;border-radius:999px;}
.view-profile .prow__chev{color:#9CA3AF;display:flex;}
.view-profile .prow__chev .lwsvg{width:18px;height:18px;}

/* Small screens: keep cards readable */
@media (max-width:360px){
  .pstats{grid-template-columns:1fr;}
  .pcard{flex-basis:92%;}
}

/* ===== v0.3.6 Promo/Promos 1:1 refinements (strong overrides) ===== */
.view-promos .titlebar{padding-top:6px;}
.view-promos .titlebar h1{font-size:28px; font-weight:700; letter-spacing:-0.4px;}
.view-promos .sectionh{font-weight:700;}
.view-promos .sectionh--sm{font-size:20px; font-weight:700;}
.view-promos .phead__t{font-weight:800;}
.view-promos .phead__sub{font-weight:600;}


.view-promos .pxp{padding:14px 14px 14px 12px;}
.view-promos .pxp__meta{gap:10px;}
.view-promos .pxp__title{font-size:18px; font-weight:800; letter-spacing:-0.2px;}
.view-promos .pxp__ico{width:64px; height:64px; border-radius:16px; background:#FFF3EA; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; color:#F97316;}
.view-promos .pxp__ico:before{content:''; position:absolute; inset:0; background-image:radial-gradient(circle at 8px 8px, rgba(249,115,22,.18) 0 2px, transparent 3px); background-size:16px 16px;}
.view-promos .pxp__ico svg{width:36px; height:36px; position:relative; z-index:1;}
.view-promos .pxp__bar{height:5px; background:#D7DDE3;}
.view-promos .pxp__bar span{background:#25A244;}
.view-promos .pxp__chev{width:34px; height:34px; border-radius:999px; background:#F0F2F5;}
.view-promos .pxp__chev svg{width:18px; height:18px; color:#6B7280;}

.view-promos .pstats{gap:10px;}
.view-promos .pstat{position:relative; padding:14px;}
.view-promos .pstat__chev{position:absolute; top:12px; right:12px; opacity:.55;}
.view-promos .pstat__chev svg{width:16px; height:16px; color:#9AA3AF;}
.view-promos .pstat__number{font-size:28px; font-weight:800; letter-spacing:-0.4px;}
.view-promos .pstat__label{font-size:14px; font-weight:800;}
.view-promos .pstat__sub{font-size:12px; color:#6B7280;}
.view-promos .pstat__bar{height:4px; width:100%; border-radius:999px; margin-top:10px; background:currentColor;}

.view-promos .pcode{padding:14px;}
.view-promos .pcode__ico{width:44px; height:44px; border-radius:14px; background:#FFE9DC; color:#F97316; display:flex; align-items:center; justify-content:center;}
.view-promos .pcode__ico svg{width:22px; height:22px;}
.view-promos .pcode__txt{font-weight:800;}

.view-promos .pfilters{gap:10px; padding-bottom:4px;}
.view-promos .pfilters__chip{height:34px; padding:0 14px; font-weight:800;}
.view-promos .pfilters__chip.is-active{background:var(--g-green); color:#fff; border-color:transparent;}
.view-promos .pfilters__chip:not(.is-active){color:#6B7280; border-color:#D7DDE3;}

.view-promos .gosec__ico{width:30px; height:30px;}
.view-promos .gosec__ico svg{width:26px; height:26px;}
.view-promos .psec__ico{color:#1F6FEB;}

/* make sure no theme CSS leaks even if host injects styles */
html body .app, html body .app *{letter-spacing:normal; text-transform:none;}