: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; }
@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; } }
.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; }
.story-nav.left{ left:8px; } .story-nav.right{ right:8px; }
.story-caption{ color:#ddd; padding:10px 12px; }
.header-fixed{ background:#fff; }