:root{
  /* Your palette */
  --c1:#96DD99;
  --c2:#A5E1A6;
  --c3:#B3E5B3;
  --c4:#C2E9BF;
  --c5:#D7F5D3;

  /* Light pastel (NOT metallic) */
  --bg: var(--c5);
  --panel: rgba(255,255,255,.65);
  --panel2: rgba(255,255,255,.78);
  --text:#123322;
  --muted:#2f5b45;
  --line: rgba(18,51,34,.12);

  --radius: 18px;
  --max: 980px;
  --shadow: 0 14px 28px rgba(18,51,34,.10);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  background:
    linear-gradient(90deg,
      rgba(150,221,153,.30),
      rgba(165,225,166,.22),
      rgba(179,229,179,.18),
      rgba(194,233,191,.18),
      rgba(215,245,211,.45)
    ),
    var(--bg);
}

a{color:inherit; text-decoration:none}

/* Make the home page feel centered (less empty space) */
.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:22px 16px 64px;

  min-height: calc(100vh - 62px); /* 62px ≈ topbar height */
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:16px;
}

.topbar{
  position:sticky; top:0; z-index:20;
  backdrop-filter: blur(10px);
  background: rgba(215,245,211,.70);
  border-bottom:1px solid var(--line);
}
.topbar .inner{
  max-width:var(--max);
  margin:0 auto;
  padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.handle{
  display:flex; align-items:center; gap:10px;
  font-weight:900;
}
.smallmuted{color:var(--muted); font-weight:700}

.iconbtn{
  width:38px; height:38px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.55);
  display:grid; place-items:center;
  cursor:pointer;
}
.iconbtn:hover{background: rgba(255,255,255,.80)}

.card{
  border:1px solid var(--line);
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Bigger profile block */
.profile{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap:22px;
  padding:22px 0 14px;
}

.avatarWrap{
  width:140px; height:140px;
  border-radius:999px;
  background: linear-gradient(135deg, var(--c1), var(--c3));
  padding:5px;
}
.avatar{
  width:100%; height:100%;
  border-radius:999px;
  background: rgba(255,255,255,.60);
  border:1px solid rgba(18,51,34,.10);
  overflow:hidden;
  display:grid; place-items:center;
}
.avatar img{width:100%; height:100%; object-fit:cover; display:block;}
.avatar .ph{font-weight:900; color: rgba(18,51,34,.55);}

.nameRow{
  display:flex; flex-wrap:wrap;
  align-items:center; gap:10px;
}
.nameRow h1{
  margin:0;
  font-size:1.65rem;
  letter-spacing:.2px;
}
.pill{
  font-size:.82rem;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(150,221,153,.35);
  border:1px solid rgba(18,51,34,.12);
  font-weight:900;
}

.stats{
  display:flex; gap:22px; flex-wrap:wrap;
  margin:12px 0;
  font-size:1.05rem;
}
.stat b{font-size:1.05rem}
.stat span{color:var(--muted); margin-left:6px}

.bio{color:var(--muted); line-height:1.45; max-width:68ch;}
.bio strong{color:var(--text)}
.bio .link{color:#0f5f3c; font-weight:900; text-decoration:underline;}

.actions{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:12px;
}
.btn{
  padding:10px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.65);
  font-weight:900;
  cursor:pointer;
  min-width: 130px;
  display:inline-flex; align-items:center; justify-content:center;
}
.btn:hover{background: rgba(255,255,255,.88)}
.btn.primary{
  background: rgba(150,221,153,.45);
  border-color: rgba(18,51,34,.18);
}

/* Highlights (IG-style: outer green ring + thin white ring + white center) */
.highlights{
  display:flex; gap:18px;
  overflow:auto;
  padding:14px 14px 18px;
  scrollbar-width:none;
}
.highlights::-webkit-scrollbar{display:none}
.hl{
  min-width: 128px;
  text-align:center;
  color: rgba(18,51,34,.72);
  font-size:1rem;
}
.hl .circle{
  width:96px; height:96px;
  margin:0 auto 10px;
  border-radius:999px;
  padding:4px;

  background: linear-gradient(135deg,
    rgba(150,221,153,.85),
    rgba(165,225,166,.75),
    rgba(179,229,179,.70)
  );
  box-shadow: 0 10px 18px rgba(18,51,34,.10);
}
.hl .inner{
  width:100%; height:100%;
  border-radius:999px;

  border:3px solid rgba(255,255,255,.92);
  background: rgba(255,255,255,.98);

  display:grid; place-items:center;
  font-weight:900;
  color: rgba(18,51,34,.55);

  font-size:0; /* keep blank */
}

/* Breadcrumb + page blocks */
.pageHeader{ padding:16px; }
.pageHeader h2{margin:0 0 6px;}
.pageHeader p{margin:0; color:var(--muted);}
.section{
  padding:16px;
  border-top:1px solid var(--line);
  color:var(--muted);
}

.breadcrumb{
  display:flex; gap:10px; align-items:center;
  padding:12px 16px 0;
  color:var(--muted);
  font-weight:800;
}
.breadcrumb a{text-decoration:underline}

/* Click/hover zoom animation */
a, .btn, .iconbtn, .hl{ -webkit-tap-highlight-color: transparent; }
a, .btn, .iconbtn, .hl{
  transition: transform .14s ease, filter .14s ease, background .14s ease;
}
a:hover, .btn:hover, .iconbtn:hover, .hl:hover{
  transform: scale(1.03);
}
.is-pressed{
  transform: scale(1.08) !important;
  filter: brightness(1.03);
}
@media (prefers-reduced-motion: reduce){
  a, .btn, .iconbtn, .hl{ transition: none; }
  .is-pressed{ transform: none !important; filter:none; }
}

/* Hide inner-page topbar when loaded inside wrapper iframe (fixes double header) */
html.in-frame .topbar,
body.in-frame .topbar{
  display:none !important;
}

/* Mobile */
@media (max-width:640px){
  .wrap{
    min-height: calc(100vh - 58px);
    justify-content:flex-start;
    padding-top:18px;
  }

  .profile{grid-template-columns:110px 1fr;}
  .avatarWrap{width:110px; height:110px;}
  .btn{min-width: 120px;}

  .hl{min-width: 108px;}
  .hl .circle{width:86px; height:86px;}
}