:root {
  --bg-main:#FBFCFD;
  --bg-white:#FFF;
  --border-light:#E9ECF1;
  --border-main:#DBE0E8;
  --text-black:#000;
  --text-gray:#5E6673;
  --text-muted:#717171;
  --primary:#2D7A8C;
  --primary-dark:#256A7A;
  --avatar-green:#E9F8EB;
}
* {
  box-sizing:border-box;
  margin:0;
  padding:0;
}
html {
  -webkit-font-smoothing:antialiased;
  height:100%;
  background:#FBFCFD;
}
body {
  background:var(--bg-main);
  color:var(--text-black);
  line-height:1.25;
  font-size:16px;
  min-height:100%;
  overflow-x:hidden;
}
a {
  color:inherit;
  text-decoration:none;
}
button {
  background:none;
  border:none;
  cursor:pointer;
  font-family:inherit;
}
img {
  max-width:100%;
  height:auto;
}
.app-container {
  min-height:100vh;
  display:flex;
  justify-content:center;
  background:var(--bg-main);
  max-width:100%;
}
.main-layout {
  display:flex;
  max-width:1100px;
  width:100%;
  min-width:0;
  margin:0 auto;
}
.left-sidebar {
  width:80px;
  min-width:80px;
  padding:24px 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  position:sticky;
  top:0;
  height:100vh;
  align-self:flex-start;
  background:var(--bg-main);
  z-index:100;
  box-sizing:border-box;
}
.content-area {
  flex:1;
  min-width:0;
  padding:12px 0 0 0;
  max-width:620px;
  overflow:hidden;
}
.right-sidebar {
  width:316px;
  padding:0 0 24px 0;
  margin-left:24px;
  position:sticky;
  top:0;
  max-height:100vh;
  overflow-y:auto;
  align-self:flex-start;
  scrollbar-width:none;
}
.trending-box {
  background:var(--bg-white);
  border:1px solid var(--border-main);
  border-radius:24px;
  overflow:hidden;
  margin-bottom:24px;
  min-height:600px;
  contain:style;
}
.feed-card {
  background:var(--bg-white);
  border:1px solid var(--border-main);
  border-bottom:none;
  border-radius:24px 24px 0 0;
  min-height:calc(100vh - 76px);
  contain:style;
}
.feed-card-inner {
  padding:0 24px;
  min-width:0;
  overflow:hidden;
}
.post-card {
  padding:16px 0;
  border-bottom:1px solid var(--border-light);
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  position:relative;
  content-visibility:auto;
  contain-intrinsic-size:auto 150px;
}
.mood-post-card {
  padding:16px 0;
  border-bottom:1px solid var(--border-light);
  display:flex;
  gap:12px;
  content-visibility:auto;
  contain-intrinsic-size:auto 180px;
  contain:style;
}
.topic-card {
  padding:16px 0;
  border-bottom:1px solid var(--border-light);
  display:flex;
  gap:12px;
  content-visibility:auto;
  contain-intrinsic-size:auto 160px;
  contain:style;
}
@keyframes skeleton-shimmer {
  0% {
    background-position:-200px 0;
  }
  to {
    background-position:calc(200px + 100%) 0;
  }
}
.skeleton-box {
  background:linear-gradient(90deg,#f0f0f0 0%,#e0e0e0 50%,#f0f0f0 100%);
  background-size:200px 100%;
  animation:skeleton-shimmer 1.5s ease-in-out infinite;
}
.skeleton-circle,.skeleton-text {
  background:linear-gradient(90deg,#f0f0f0 0%,#e0e0e0 50%,#f0f0f0 100%);
  background-size:200px 100%;
  animation:skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius:4px;
}
.skeleton-circle {
  border-radius:50%;
}
.content-tabs {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  height:68px;
  padding:0 8px;
  position:relative;
  background:rgba(251,252,253,0.8);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  margin-bottom:0;
}
@media(max-width:1024px) {
  .left-sidebar,.right-sidebar {
    display:none;
  }
  .content-area {
    padding:0 16px;
    max-width:100%;
  }
  .feed-card {
    border-radius:16px 16px 0 0;
  }
}