:root{
  --bg:#FAFAFA;
  --card:#FFFFFF;
  --text:#000000;
  --muted:#737373;
  --border:#DBDBDB;
  --nav:#FFFFFF;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
}

/* Top nav (similar feeling to Instagram web) */
.ig-nav{
  position:sticky; top:0; z-index:30;
  background:var(--nav);
  border-bottom:1px solid var(--border);
}
.ig-nav-inner{
  max-width:975px; margin:0 auto;
  height:60px; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:0 20px;
}
.ig-logo{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px}
.logo-icon{width:28px;height:28px;border-radius:6px;background:#000;display:inline-block}
.logo-text{font-size:20px}
.ig-search{display:flex; align-items:center; gap:8px; padding:8px 12px; background:#EFEFEF; border-radius:8px; width:260px}
.ig-search svg{width:18px;height:18px;stroke:#777;fill:none;stroke-width:2}
.ig-search input{border:0; outline:none; background:transparent; width:100%}
.ig-search button{all:unset; cursor:pointer; font-size:18px; padding:0 4px; color:#666}
.ig-icon-btn{all:unset; cursor:pointer; padding:8px; border-radius:8px}
.ig-icon-btn:hover{background:#F2F2F2}
.ig-avatar{width:28px;height:28px;border-radius:50%;background:#ddd;display:inline-block;border:1px solid var(--border)}

/* App container */
.app{max-width:975px; margin:0 auto; padding:24px 16px}

/* Grid like Instagram */
.ig-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
@media(min-width:768px){ .ig-grid{ grid-template-columns: repeat(4, 1fr);} }
@media(min-width:1024px){ .ig-grid{ grid-template-columns: repeat(5, 1fr);} }
@media(min-width:1440px){ .ig-grid{ grid-template-columns: repeat(6, 1fr);} }

.ig-card{ position:relative; overflow:hidden; background:var(--card) }
.ig-card-inner{ all:unset; display:block; width:100%; cursor:pointer; position:relative }
.ig-card img{ width:100%; height:100%; aspect-ratio:1/1; object-fit:cover; display:block; background:#f0f0f0 }

.ig-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:16px;
  background:rgba(0,0,0,.25); color:#fff; opacity:0; transition:opacity .2s ease;
  font-weight:700; letter-spacing:.3px
}
.ig-card-inner:hover .ig-overlay{ opacity:1 }
.metric{ display:inline-flex; align-items:center; gap:6px }

/* Sentinel for infinite scroll */
.sentinel{ height: 1px }

/* Viewer (modal) */
.viewer[aria-hidden="true"]{ display:none }
.viewer{
  position:fixed; inset:0; z-index:50; display:grid; place-items:center;
}
.viewer-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.82) }
.viewer-inner{
  position:relative; z-index:2; width:min(92vw, 1200px); height:min(88vh, 900px); margin:auto; display:grid;
  grid-template-rows: 1fr auto;
  background:#000; border-radius:12px; box-shadow:var(--shadow);
}
.viewer img{ width:100%; height:100%; object-fit:contain; background:#000 }
.viewer-cap{
  color:#fff; font-size:14px; padding:10px 14px; border-top:1px solid rgba(255,255,255,.15); background:rgba(0,0,0,.25)
}
.viewer-close{
  position:absolute; top:8px; right:8px; z-index:3; width:36px;height:36px;border-radius:50%; border:0; background:#fff; cursor:pointer;
  font-size:20px; line-height:1;
}
.viewer-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px;height:42px;border-radius:50%; border:0; background:#fff; cursor:pointer; z-index:3; font-size:22px;
}
.viewer-arrow.prev{ left:10px }
.viewer-arrow.next{ right:10px }