:root{
  --bg:#fff;
  --ring-width:2px;
  --seen-ring:#e6eef8;
  --unseen-gradient:conic-gradient(from 120deg,#25d366 0%,#00c1ff 60%,#8a4bff 100%);
  --dot-color:#25d366;
  --text:#12202b;
  --muted:#6b7785;
  --thumb-size:100px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);font-family:Inter,system-ui,'Segoe UI',
Roboto,Arial;color:var(--text);padding:0px; margin:0}

.wrap{max-width:100%;margin:0 auto}

/* Horizontal row of circles */
.status-row{
  display:flex;
  flex-wrap:nowrap;
  overflow-x:auto;
  gap:20px;
  padding-bottom:10px;
}

.status-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  min-width:110px;
  cursor:pointer;
}

.thumb{
  width:var(--thumb-size);
  height:var(--thumb-size);
  position:relative;
  display:grid;
  place-items:center;
}

.ring{
  width:100%;
  height:100%;
  border-radius:50%;
  display:grid;
  place-items:center;
  padding:var(--ring-width);
  background:var(--seen-ring);
}

.ring.unseen{background:var(--unseen-gradient)}
.inner{
  width:calc(100% - (var(--ring-width)*2));
  height:calc(100% - (var(--ring-width)*2));
  border-radius:50%;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:#f4f7fb;
}
.inner img{width:100%;height:100%;object-fit:cover;display:block}

.dot{
  position:absolute;
  right:4px;
  bottom:4px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--dot-color);
  border:2px solid #fff;
}

.name{
  font-size:14px;
  font-weight:600;
  color:var(--text);
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:150px;
}

/* Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.8);
  display:none;
  justify-content:center;
  align-items:center;
  z-index:1000;
  padding:20px;
}
.lightbox.active{display:flex}

.lightbox-content{
  background:#fff;
  border-radius:10px;
  max-width:1000px;
  width:100%;
  display:flex;
  flex-wrap:wrap;
  overflow:hidden;
}

.lightbox-left{
  flex:1 1 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
}
.lightbox-left img{
  max-width:100%;
  max-height:80vh;
  object-fit:contain;
  border-radius:4px;
}

.lightbox-right{
  flex:1 1 50%;
  padding:20px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.lightbox-right h2{
  margin-top:0;
  font-size:22px;
  color:var(--text);
}
.lightbox-right p{
  font-size:15px;
  color:var(--muted);
  line-height:1.6;
}

.close-btn{
  position:absolute;
  top:20px;
  right:30px;
  font-size:30px;
  color:#fff;
  cursor:pointer;
}

@media(max-width:768px){
  .lightbox-content{flex-direction:column;}
  .lightbox-left,.lightbox-right{flex:1 1 100%;}
}