:root{
  --ig-bg:#FAFAFA;
  --ig-card:#FFFFFF;
  --ig-border:#DBDBDB;
  --ig-text:#262626;
  --ig-sub:#8E8E8E;
  --ig-blue:#0095F6;
  --ig-blue-dark:#1877F2;
  --ig-red:#ED4956;
  --ig-green:#00A400;
  --radius:12px;

  --badminton:#FFB020; --exercise:#2FD584; --tennis:#FF6B81;
  --jogging:#4DB6E8; --picnic:#FF9F55; --movie:#B57BF2;
  --shopping:#4FC3D9; --other:#A9A196;
  --hiking:#7CB342; --cycling:#FF7043; --karaoke:#EC5FA3;
  --boardgames:#8D6E63; --potluck:#F2A93B;
  --makan:#FF8A5C; --ngafe:#8D6748; --mainkartu:#5C6BC0;
  --staycation:#26A69A; --travelling:#42A5F5; --concert:#AB47BC;
  --show:#7E57C2; --nobar:#EF5350; --kelasbelajar:#5C9EAD;
  --ngeband:#D4527A; --silaturahmi:#66BB6A; --syukuran:#FFA726;
  --openhouse:#29B6F6; --kerjabakti:#789262; --santunan:#F06292;
  --ulangtahun:#FF6F91; --ronda:#546E7A; --arisan:#C0A030;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--ig-bg);
  font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ig-text);
  font-size:17px;
  line-height:1.45;
}

/* ---------- Top bar ---------- */
.topbar{
  background:var(--ig-card);
  border-bottom:1px solid var(--ig-border);
  position:sticky;
  top:0;
  z-index:20;
}
.topbar-inner{
  max-width:600px;
  margin:0 auto;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo{
  font-size:22px;
  font-weight:700;
  color:var(--ig-text);
}
.icon-btn{
  width:44px;height:44px;
  border-radius:50%;
  border:none;
  background:var(--ig-blue);
  color:#fff;
  font-size:26px;
  line-height:0;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(0,149,246,0.4);
}
.topbar-actions{display:flex;gap:8px;align-items:center;}
.icon-btn.secondary{
  background:#F0F0F0;
  color:var(--ig-text);
  font-size:19px;
  box-shadow:none;
}

/* ---------- Feed ---------- */
.feed{
  max-width:600px;
  margin:0 auto;
  padding:16px 12px 60px;
}
.state-box{
  background:var(--ig-card);
  border:1px solid var(--ig-border);
  border-radius:var(--radius);
  text-align:center;
  padding:44px 16px;
  color:var(--ig-sub);
  font-size:17px;
}

/* ---------- Post card ---------- */
.post{
  background:var(--ig-card);
  border:1px solid var(--ig-border);
  border-radius:var(--radius);
  margin-bottom:22px;
  overflow:hidden;
}
.post-header{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
}
.avatar{
  width:44px;height:44px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
  flex-shrink:0;
  color:#fff;
}
.post-header .who{flex:1;min-width:0;}
.post-header .creator{font-weight:700;font-size:16px;}
.post-header .typelabel{font-size:13px;color:var(--ig-sub);}
.post-header .card-menu{display:flex;gap:4px;flex-shrink:0;}
.post-header .card-menu button{
  background:none;border:none;font-size:18px;cursor:pointer;
  width:34px;height:34px;border-radius:50%;color:var(--ig-sub);
}
.post-header .card-menu button:hover{background:#F0F0F0;}

.post.highlight{
  box-shadow:0 0 0 3px var(--ig-blue);
}

.post-banner{
  padding:38px 20px;
  text-align:center;
  color:#fff;
}
.post-banner img{
  width:100%;
  max-height:420px;
  object-fit:cover;
  display:block;
}
.post-banner .emoji{font-size:44px;display:block;margin-bottom:6px;}
.post-banner .title{font-size:21px;font-weight:800;text-shadow:0 1px 3px rgba(0,0,0,0.15);}
.post-banner.has-photo{padding:0;}
.photo-title-bar{
  padding:10px 14px;
  font-weight:800;
  font-size:18px;
  color:var(--ig-text);
}

.post-meta{
  padding:12px 14px 0;
  font-size:15px;
  color:var(--ig-text);
}
.post-meta div{margin-bottom:4px;}
.post-meta b{color:var(--ig-sub);font-weight:600;}

.post-actions{
  display:flex;
  gap:8px;
  padding:12px 14px 4px;
}
.action-btn{
  flex:1;
  min-height:46px;
  border:none;
  border-radius:10px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  background:#F0F0F0;
  color:var(--ig-text);
}
.action-btn.join{background:var(--ig-blue);color:#fff;}
.action-btn.share{background:#F0F0F0;}

.going-count{
  padding:8px 14px 0;
  font-weight:700;
  font-size:15px;
}

.caption{
  padding:6px 14px 4px;
  font-size:15px;
  white-space:pre-wrap;
}
.caption b{margin-right:6px;}

.comments{
  padding:6px 14px 14px;
}
.comment-line{
  font-size:15px;
  padding:4px 0;
  line-height:1.4;
}
.comment-line .mark{margin-right:4px;}
.comment-line b{margin-right:6px;}
.comment-line .c-time{
  font-size:12px;
  color:var(--ig-sub);
  margin-top:1px;
}
.view-all-btn{
  background:none;border:none;
  color:var(--ig-sub);
  font-size:14px;
  padding:4px 0;
  cursor:pointer;
  font-weight:600;
}
.no-comments{font-size:14px;color:var(--ig-sub);font-style:italic;padding:4px 0;}

/* ---------- Inline join form ---------- */
.join-form{
  border-top:1px solid var(--ig-border);
  padding:12px 14px;
  display:none;
}
.join-form.open{display:block;}
.join-form input[type=text],
.join-form textarea{
  width:100%;
  font-size:15px;
  padding:10px 12px;
  border-radius:10px;
  border:1.5px solid var(--ig-border);
  margin-bottom:8px;
  font-family:inherit;
}
.choice-row{display:flex;gap:8px;margin-bottom:8px;}
.choice-row label{
  flex:1;
  text-align:center;
  border:1.5px solid var(--ig-border);
  border-radius:10px;
  padding:10px 6px;
  font-weight:700;
  font-size:15px;
  cursor:pointer;
}
.choice-row input{display:none;}
.choice-row label.yes-opt.selected{background:var(--ig-green);color:#fff;border-color:var(--ig-green);}
.choice-row label.no-opt.selected{background:var(--ig-red);color:#fff;border-color:var(--ig-red);}
.join-form .submit-row{display:flex;gap:8px;}
.join-form .submit-row button{
  flex:1;
  min-height:44px;
  border:none;
  border-radius:10px;
  font-weight:700;
  font-size:15px;
  cursor:pointer;
}
.join-form .btn-do-cancel{background:#F0F0F0;color:var(--ig-text);}
.join-form .btn-do-submit{background:var(--ig-blue);color:#fff;}

/* ---------- Footer ---------- */
footer{text-align:center;padding:24px 12px 40px;}
.footer-inner{
  max-width:600px;margin:0 auto;
  font-size:12px;color:#999;line-height:1.6;
}
.footer-inner a{color:#999;text-decoration:underline;}

/* ---------- Modal ---------- */
.overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,0.55);
  display:none;
  align-items:flex-start;justify-content:center;
  padding:24px 12px;overflow-y:auto;z-index:50;
}
.overlay.show{display:flex;}
.modal{
  background:#fff;
  border-radius:16px;
  max-width:440px;width:100%;
  padding:22px 20px;
  box-shadow:0 20px 40px rgba(0,0,0,0.35);
}
.modal h2{margin:0 0 14px;font-size:20px;}
.modal label{display:block;font-weight:700;font-size:14px;margin:12px 0 5px;color:var(--ig-sub);}
.modal input[type=text],.modal input[type=date],.modal input[type=time],
.modal input[type=password],.modal select,.modal textarea{
  width:100%;font-size:16px;padding:11px 12px;border-radius:10px;
  border:1.5px solid var(--ig-border);background:#fff;font-family:inherit;
}
.modal textarea{resize:vertical;min-height:70px;}
.modal-actions{display:flex;gap:10px;margin-top:16px;}
.modal-actions button{flex:1;min-height:48px;border-radius:10px;font-size:15px;font-weight:700;border:none;cursor:pointer;}
.btn-cancel{background:#F0F0F0;color:var(--ig-text);}
.btn-primary{background:var(--ig-blue);color:#fff;}
.btn-whatsapp{background:#25D366;color:#fff;flex:1;min-height:48px;border-radius:10px;border:none;font-weight:700;font-size:15px;cursor:pointer;}
.error-msg{color:var(--ig-red);font-weight:700;font-size:13px;margin-top:8px;display:none;}
.share-box{width:100%;min-height:130px;font-family:monospace;font-size:13px;border-radius:10px;border:1.5px solid var(--ig-border);padding:10px;}
.link-row{display:flex;gap:8px;}
.link-row input{flex:1;font-size:14px;padding:10px 12px;border-radius:10px;border:1.5px solid var(--ig-border);}
.btn-small{
  background:var(--ig-blue);color:#fff;border:none;border-radius:10px;
  padding:0 16px;font-weight:700;font-size:14px;cursor:pointer;
}
#evPhotoPreview{
  width:100%;max-height:220px;object-fit:cover;border-radius:10px;margin-top:8px;
}
.helper{font-size:13px;color:var(--ig-sub);margin-top:4px;}

@media (max-width:480px){
  .logo{font-size:19px;}
  .post-banner .title{font-size:19px;}
}