.moments-panel {
  background:
    radial-gradient(circle at 12% 0, rgba(99,230,184,.14), transparent 32%),
    radial-gradient(circle at 92% 6%, rgba(255,78,120,.12), transparent 30%),
    linear-gradient(145deg, rgba(8,23,39,.94), rgba(31,24,45,.88));
}
.moment-composer {
  display: grid; gap: 10px; padding: 12px; border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px; background: rgba(255,255,255,.06);
}
.moment-drop {
  position: relative; display: block; min-height: 170px; overflow: hidden; border-radius: 8px;
  border: 1px dashed rgba(255,255,255,.2); cursor: pointer; background: #07111f;
}
.moment-drop img {
  width: 100%; height: 190px; display: block; object-fit: cover; filter: saturate(1.06) contrast(.96);
}
.moment-drop span {
  position: absolute; right: 12px; bottom: 12px; padding: 8px 11px; border-radius: 999px;
  color: #102033; background: rgba(255,255,255,.9); font-family: var(--font-cute); font-size: 12px;
}
#moment-file { display: none; }
.moment-composer textarea {
  min-height: 78px; padding: 12px; font-size: 14px;
}
.moment-tags {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px;
}
.moment-tags button {
  min-height: 34px; border-radius: 999px; color: #d8e8f7;
  background: rgba(255,255,255,.08); font-family: var(--font-cute);
}
.moment-tags .active {
  color: #102033; background: linear-gradient(180deg, #fff7df, #e6fbff);
}
.moment-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; align-items: start;
}
.moment-card {
  position: relative; min-height: 180px; overflow: hidden; border-radius: 8px; margin: 0;
  background: #fffaf0; box-shadow: 0 16px 34px rgba(0,0,0,.18);
}
.moment-card:nth-child(odd) { transform: rotate(-1.4deg); }
.moment-card:nth-child(even) { transform: rotate(1.2deg); }
.moment-card:first-child {
  grid-column: 1 / -1; min-height: 236px; transform: rotate(-.6deg);
}
.moment-card img {
  width: 100%; height: 108px; display: block; object-fit: cover;
}
.moment-card:first-child img {
  height: 168px;
}
.moment-card figcaption {
  padding: 9px 10px 10px; color: #172331; font-family: var(--font-soft); font-size: 12px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.moment-card:first-child figcaption {
  -webkit-line-clamp: 2;
}
.moment-card b {
  display: block; margin-bottom: 3px; color: #16735e; font-family: var(--font-cute); font-weight: 400;
}
.moment-card i {
  position: absolute; right: 8px; top: 8px; padding: 5px 7px; border-radius: 999px;
  color: #102033; background: rgba(255,255,255,.88); font-family: var(--font-cute); font-style: normal; font-size: 11px;
}
@media (max-width: 370px) {
  .moment-grid { grid-template-columns: 1fr; }
}