:root{
  --muted: #6c757d;
  --accent: #e1306c;
}

body{
  margin:0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background:#fafafa;
  color:#111;
}

.sidebar{
  position:fixed;
  left:0;
  top:0;
  width:240px;
  height:100vh;
  padding:20px;
  background:#fff;
  border-right:1px solid #e9ecef;
  z-index:1400;
  transition: transform .26s ease;
}
.sidebar h4{
  margin-bottom:16px;
  font-weight:700;
}
.sidebar a{
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px;
  border-radius:8px;
  color:#111;
  text-decoration:none;
  margin-bottom:6px;
  font-weight:500;
}

.feed-area{
  margin-left:260px;
  margin-right:340px;
  padding:22px 20px;
  max-width:900px;
  box-sizing:border-box;
}

.right-panel{
  position:fixed;
  right:0;
  top:0;
  height:100vh;
  width:320px;
  padding:20px;
  box-sizing:border-box;
  background:#fff;
  border-left:1px solid #e9ecef;
  overflow-y:auto;
  z-index:1400;
  transition: transform .26s ease;
}

.event-card{
  background:#fff;
  border:1px solid #eee;
  border-radius:10px;
  padding:10px;
  display:flex;
  gap:10px;
  margin-bottom:12px;
  align-items:flex-start;
}
.event-card img{
  width:64px;
  height:64px;
  object-fit:cover;
  border-radius:8px;
}

.badge-free{
  background:#28a745;
  color:#fff;
  padding:4px 8px;
  border-radius:6px;
  font-size:12px;
}
.badge-paid{
  background:#dc3545;
  color:#fff;
  padding:4px 8px;
  border-radius:6px;
  font-size:12px;
}

.story-ring{
  width:74px;
  height:74px;
  border-radius:50%;
  padding:3px;
  background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex-shrink:0;
}
.story-ring img{
  width:68px;
  height:68px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid #fff;
}
.create-story{
  width:74px;
  height:74px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#e9ecef;
  border:2px dashed #ccc;
  cursor:pointer;
}
.create-story i{
  font-size:20px;
  color:var(--muted);
}

.small-muted{ color:var(--muted); font-size:13px; }
.post .card-body img{ max-height:400px; object-fit:cover; }

/* MOBILE STYLING */
@media (max-width:991px){
  .sidebar{ transform:translateX(-110%); }
  .sidebar.open{ transform:translateX(0); box-shadow:6px 0 20px rgba(0,0,0,0.08); }
  .right-panel{ transform:translateX(110%); width:100%; max-width:360px; }
  .right-panel.open{ transform:translateX(0); box-shadow:-6px 0 20px rgba(0,0,0,0.08); }
  .feed-area{ margin-left:0; margin-right:0; padding-top:72px; padding-left:16px; padding-right:16px; }
  .right-panel .event-card img{ display:none; }
  .topbar{ display:flex; justify-content:space-between; align-items:center; position:fixed; top:0; left:0; right:0; height:56px; background:#fff; border-bottom:1px solid #e9ecef; padding:0 12px; z-index:1500; }
  .right-panel h6, .right-panel a.small{text-align:left; position:sticky; top:0; background:#fff; z-index:1500; padding-top:12px; padding-bottom:12px; }
}

/* STORIES OVERLAY */
.story-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.85);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2000;
}
.story-wrap{ width:100%; max-width:720px; position:relative; }
.story-top{ display:flex; justify-content:space-between; align-items:center; color:#fff; padding:12px; }
.ov-avatar{ width:40px; height:40px; border-radius:999px; object-fit:cover; border:2px solid rgba(255,255,255,0.7); }
.story-progress{ height:4px; background:rgba(255,255,255,0.12); margin:0 12px; border-radius:4px; overflow:hidden; }
.story-progress > div{ height:100%; width:0%; background:linear-gradient(90deg,var(--accent),#f59); transition:width 0.2s linear; }
.story-media-wrap{ position:relative; display:flex; align-items:center; justify-content:center; padding:12px; }
.story-media{ width:100%; max-height:70vh; object-fit:cover; border-radius:8px; }
.story-nav{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,0.35); border:none; color:#fff; width:44px; height:44px; border-radius:999px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.story-nav.left{ left:8px; } 
.story-nav.right{ right:8px; }
.story-caption{ color:#ddd; padding:10px 12px; }
.header-fixed{ background:#fff; }