* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Helvetica, Arial, 'Segoe UI', Roboto, sans-serif; background: #f0f2f5; color: #1c1e21; font-size: 15px; }
a { color: inherit; text-decoration: none; }

/* ===== TOP BAR ===== */
.topbar { position: sticky; top: 0; z-index: 100; background: #fff; height: 56px; box-shadow: 0 1px 2px rgba(0,0,0,.1); display: flex; align-items: center; justify-content: center; }
.topinner { width: 100%; max-width: 1330px; padding: 0 16px; display: flex; align-items: center; gap: 12px; }
.brand { color: #1877f2; font-size: 28px; font-weight: 800; font-family: 'Segoe UI', Helvetica, Arial, sans-serif; letter-spacing: -1px; }
.search { flex: 0 1 240px; background: #f0f2f5; border-radius: 24px; padding: 9px 14px; color: #65676b; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.topnav { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.tnavlink { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #e4e6eb; font-size: 18px; color: #1c1e21; }
.tnavlink.blue { background: #1877f2; color: #fff; }
.tprof { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg,#1877f2,#0d6efd); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.btnblue { background: #1877f2; color: #fff; border: 0; border-radius: 6px; padding: 8px 14px; font-weight: 600; font-size: 14px; cursor: pointer; }
.btnblue:hover { background: #166fe5; }

/* ===== LAYOUT ===== */
.layout { max-width: 1330px; margin: 20px auto; padding: 0 16px; display: grid; grid-template-columns: 280px 1fr 340px; gap: 24px; align-items: start; }

/* left shortcuts */
.left { position: sticky; top: 76px; }
.lcard { background: #fff; border-radius: 10px; padding: 12px 8px; box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.lhead { display: flex; align-items: center; justify-content: space-between; padding: 4px 12px 10px; }
.lhead b { font-size: 18px; }
.lhead a { font-size: 13px; color: #1877f2; font-weight: 600; }
.litem { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px; cursor: pointer; font-weight: 500; }
.litem:hover { background: #f2f2f2; }
.litem .ico { width: 36px; height: 36px; border-radius: 50%; background: #e4e6eb; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.litem.active .ico { background: #1877f2; color: #fff; }
.litem.more { color: #65676b; font-weight: 600; }

/* ===== CENTER FEED ===== */
.feed { display: flex; flex-direction: column; gap: 16px; }
.stories { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; background: #fff; border-radius: 10px; padding: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.1); overflow: hidden; }
.story { position: relative; height: 200px; border-radius: 8px; overflow: hidden; cursor: pointer; }
.story.create { background: #f0f2f5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.story.create .plus { width: 40px; height: 40px; border-radius: 50%; background: #1877f2; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 24px; border: 4px solid #fff; }
.story .bg { position: absolute; inset: 0; background: linear-gradient(180deg,#1877f2,#8b3df5); }
.story .ring { position: absolute; top: 8px; left: 8px; width: 40px; height: 40px; border-radius: 50%; border: 4px solid #1877f2; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; z-index: 2; }
.story .nm { position: absolute; bottom: 8px; left: 8px; right: 8px; color: #fff; font-size: 13px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.6); z-index: 2; }

.composer { background: #fff; border-radius: 10px; padding: 12px 16px 6px; box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.composer .row { display: flex; align-items: center; gap: 10px; }
.composer .av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg,#1877f2,#0d6efd); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.composer input { flex: 1; background: #f0f2f5; border: 0; border-radius: 24px; padding: 11px 15px; font-size: 17px; color: #1c1e21; }
.composer .acts { display: flex; border-top: 1px solid #ced0d4; margin-top: 10px; }
.act { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; margin: 4px 0; border-radius: 6px; color: #65676b; font-weight: 600; cursor: pointer; font-size: 14px; }
.act:hover { background: #f2f2f2; }
.act .ic { font-size: 18px; }
.act.v { color: #45bd62; } .act.ph { color: #f5533d; } .act.em { color: #f7b125; }

.post { background: #fff; border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.1); padding: 12px 16px 4px; }
.post .ph { display: flex; align-items: center; gap: 10px; }
.post .av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg,#1877f2,#8b3df5); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.post .nm { font-weight: 600; font-size: 15px; } .post .tm { font-size: 12px; color: #65676b; display: flex; align-items: center; gap: 4px; }
.post .more { margin-left: auto; color: #65676b; font-size: 20px; cursor: pointer; }
.post .body { padding: 10px 0; font-size: 15px; line-height: 1.5; }
.post .media { height: 280px; border-top: 1px solid #ced0d4; border-bottom: 1px solid #ced0d4; background: linear-gradient(135deg,#1877f2,#8b3df5); display: flex; align-items: center; justify-content: center; font-size: 60px; }
.post .stats { display: flex; align-items: center; padding: 8px 2px; color: #65676b; font-size: 13px; }
.post .stats .ic { width: 18px; height: 18px; border-radius: 50%; background: #1877f2; color: #fff; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; margin-right: 2px; }
.post .reacts { margin-left: auto; }
.post .bar { display: flex; border-top: 1px solid #ced0d4; }
.pact { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px; margin: 4px 0; border-radius: 4px; color: #65676b; font-weight: 600; cursor: pointer; }
.pact:hover { background: #f2f2f2; }
.pact .ic { font-size: 18px; } .pact.like .ic { color: #1877f2; }

/* ===== RIGHT RAIL ===== */
.right { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 16px; }
.sponsored { background: #fff; border-radius: 10px; padding: 12px 16px; box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.sponsored h4 { font-size: 13px; color: #65676b; font-weight: 600; margin-bottom: 10px; }
.srow { display: flex; gap: 10px; align-items: center; padding: 6px 0; }
.srow .sq { width: 110px; height: 110px; border-radius: 8px; background: linear-gradient(135deg,#1877f2,#8b3df5); flex-shrink: 0; }
.srow .st b { font-size: 14px; display: block; } .srow .st span { font-size: 12px; color: #65676b; }
.contacts { background: #fff; border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.1); padding: 12px 8px; }
.contacts .ch { padding: 4px 12px 8px; font-size: 18px; font-weight: 700; }
.crow { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; cursor: pointer; font-weight: 500; }
.crow:hover { background: #f2f2f2; }
.crow .cav { width: 36px; height: 36px; border-radius: 50%; background: #e4e6eb; display: flex; align-items: center; justify-content: center; font-size: 16px; position: relative; }
.crow .cav .on { position: absolute; bottom: -1px; right: -1px; width: 11px; height: 11px; border-radius: 50%; background: #31a24c; border: 2px solid #fff; }
.bday { background: #fff; border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.1); padding: 12px 16px; font-size: 14px; }
.bday .cake { color: #f5533d; font-size: 18px; margin-right: 6px; }

/* responsive */
@media (max-width: 1100px) { .layout { grid-template-columns: 1fr; } .left, .right { display: none; } }
@media (max-width: 700px) { .search { display: none; } .tnavlink { display: none; } .topinner { gap: 8px; } }

/* ===== MOBILE FACEBOOK STYLE (max-width: 700px) ===== */
@media (max-width: 700px){
  body{ background:#fff; }
  .topinner{ padding:0 12px; gap:8px; }
  .brand{ font-size:22px; }
  .search, .tnavlink{ display:none; }
  .topnav{ margin-left:auto; gap:6px; }
  .tprof{ width:32px; height:32px; font-size:12px; }
  .btnblue{ padding:6px 10px; font-size:13px; }
  .layout{ grid-template-columns:1fr; gap:0; margin:0; padding:0; }
  .left, .right{ display:none; }
  .feed{ gap:0; padding-bottom:60px; }
  /* stories become horizontal scroller */
  .stories{ display:flex; grid-auto-flow:column; grid-auto-columns:88px; gap:8px; border-radius:0; border-bottom:1px solid #ced0d4; padding:10px 12px; overflow-x:auto; }
  .story{ height:150px; }
  .story.create .plus{ width:34px; height:34px; font-size:20px; }
  .composer{ border-radius:0; border-bottom:8px solid #f0f2f5; box-shadow:none; }
  .composer input{ font-size:15px; padding:10px 12px; }
  .post{ border-radius:0; box-shadow:none; border-bottom:8px solid #f0f2f5; padding:10px 12px 4px; }
  .post .media{ height:240px; }
  .post .body{ font-size:14px; }
  /* mobile bottom nav */
  .mbnav{ position:fixed; bottom:0; left:0; right:0; height:54px; background:#fff; border-top:1px solid #ced0d4;
    display:flex; align-items:center; justify-content:space-around; z-index:200; box-shadow:0 -1px 4px rgba(0,0,0,.08); }
  .mbnav a{ display:flex; flex-direction:column; align-items:center; justify-content:center; color:#65676b; font-size:20px; flex:1; height:100%; position:relative; }
  .mbnav a .lbl{ font-size:9px; margin-top:1px; }
  .mbnav a.active{ color:#1877f2; }
  .mbnav a .badge{ position:absolute; top:6px; right:50%; margin-right:-22px; background:#fa3e3e; color:#fff; font-size:9px; font-weight:700; min-width:16px; height:16px; border-radius:8px; display:flex; align-items:center; justify-content:center; padding:0 4px; }
}
/* show bottom nav only on mobile */
.mbnav{ display:none; }
@media (max-width:700px){ .mbnav{ display:flex; } }

.ltv-strip{background:#fff;border-radius:8px;padding:12px 14px;margin-bottom:16px;box-shadow:0 1px 2px rgba(0,0,0,.1);}
.ltv-head{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:16px;color:#1c1e21;margin-bottom:10px;}
.ltv-head a{font-size:13px;color:#1877f2;font-weight:600;text-decoration:none;}
.ltv-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;}
.ltv-ch{flex:0 0 auto;width:84px;text-align:center;text-decoration:none;}
.ltv-ic{width:56px;height:56px;border-radius:50%;background:#e7f3ff;display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 5px;border:2px solid #1877f2;}
.ltv-nm{font-size:12px;color:#1c1e21;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}