:root{
  --bg: #fff;
  --card: #fff;
  --text: #111;
  --muted: #888;
  --border: #e5e5e5;
}
*{box-sizing:border-box}
html, body{margin:0; padding:0; background:var(--bg); color:var(--text); font: 15px/1.4 -apple-system,system-ui,Segoe UI,Roboto,Helvetica,Arial}
.igbar{
  position: sticky; top:0; z-index:10; background:#fff;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:8px 12px;
}
.iglogo{font-weight:900; letter-spacing:.2px}
.gauges{ display:flex; gap:10px; align-items:center }
.g{ display:flex; gap:6px; align-items:center; white-space:nowrap }
.g span{font-size:.85rem; color:var(--muted)}
.bar{ width:80px; height:6px; border-radius:999px; background:#eee; border:1px solid #e6e6e6; overflow:hidden }
.bar i{ display:block; height:100%; width:0%; background: linear-gradient(90deg, #2e7de2, #59a5ff) }

.stage{ height: calc(100vh - 46px); overflow-y:auto; overscroll-behavior: contain; }
.feed{ max-width: 580px; margin: 0 auto; padding: 8px 0 24px; display:flex; flex-direction:column; gap:16px }

.post{ background:var(--card); border:1px solid var(--border); }
.meta{ display:flex; align-items:center; gap:10px; padding:8px 12px }
.avatar{ width:36px; height:36px; border-radius:50%; overflow:hidden }
.avatar img{ width:100%; height:100%; object-fit:cover }
.name{ font-weight:700 }
.time{ margin-left:auto; color:var(--muted); font-size:.9rem }
.media img, .media video{ width:100%; height:auto; display:block; }
.content{ padding:10px 12px; font-size:1.05rem }
.actions{ display:flex; gap:12px; padding:8px 12px; color:#333; font-weight:600; border-top:1px solid var(--border) }
.reactions, .comments{ padding:0 12px 10px 12px; color:#666 }
.comment{ display:flex; gap:8px; align-items:flex-start; margin-top:6px }
.comment .cbody{ background:#f6f7f8; padding:6px 8px; border-radius:10px }

/* Pull to refresh */
.ptr{ position: relative; height:0; }
.ptr-inner{ position:absolute; left:0; right:0; top:-60px; height:60px; display:flex; align-items:center; justify-content:center; gap:10px; color:var(--muted) }
.spinner{
  width:18px; height:18px; border:2px solid #ddd; border-top-color:#999; border-radius:50%; animation: spin 0.9s linear infinite; visibility:hidden;
}
.ptr.loading .spinner{ visibility:visible }
@keyframes spin{ to{ transform: rotate(360deg) }}

.hidden{ display:none }

/* FAB button */
.fab{
  position: fixed; right: 16px; top: 60px; z-index: 20;
  padding: 10px 14px; border-radius: 999px; border: 1px solid #ddd;
  background: #0b5cff; color:#fff; font-weight:800; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,.12);
}
.fab.hidden{ display:none }

/* Lock bar */
.lockbar{
  position: sticky; top:0; z-index:15; background:#fff3cd; color:#664d03;
  border-bottom:1px solid #ffe69c; padding:6px 12px; font-weight:700;
}