:root {
  --safe-area-top-legacy: constant(safe-area-inset-top);
  --safe-area-bottom-legacy: constant(safe-area-inset-bottom);
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
}

html, body {
  min-height: 100%;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.modal-lock {
  overflow: hidden;
  touch-action: none;
}

#appView > header > div {
  padding-top: calc(1rem + var(--safe-area-top-legacy));
  padding-top: calc(1rem + var(--safe-area-top));
}

#openCreateBtn {
  bottom: calc(1.5rem + var(--safe-area-bottom));
}

#authView {
  padding-top: var(--safe-area-top-legacy);
  padding-top: var(--safe-area-top);
}

#appView {
  padding-top: 0;
}

textarea,
input,
button {
  font: inherit;
}

input,
textarea,
select {
  font-size: 16px;
}

#playlistList .feed-item {
  animation: fadeIn 160ms ease;
  position: relative;
  overflow: hidden;
}

#playlistList .feed-item > * {
  position: relative;
  z-index: 2;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

#playlistTitle button {
  transition: opacity 160ms ease, transform 160ms ease;
}

#playlistTitle button:hover {
  opacity: 0.82;
}

#playlistTitle button:active {
  transform: translateY(1px);
}

#playlistSortSelect {
  min-width: 106px;
  height: 28px;
  line-height: 1;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 13px) 11px, calc(100% - 9px) 11px;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  padding-right: 22px !important;
}

.caption-preview-snippet {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.feed-item.is-removing {
  transition: opacity 280ms ease, transform 280ms ease, max-height 280ms ease, padding 280ms ease, margin 280ms ease;
  opacity: 0;
  transform: translateY(-8px) scale(0.985);
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-width: 0 !important;
}

.feed-item.is-gold-entering {
  animation: goldEnter 320ms ease;
}

.feed-item.is-sort-entering {
  animation: sortEnter 260ms ease both;
}

@keyframes sortEnter {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes goldEnter {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.metric-bump {
  animation: metricBump 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes metricBump {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-2px) scale(1.14); }
  100% { transform: translateY(0) scale(1); }
}

.metric-celebrate {
  animation: metricCelebrate 2s ease-in-out;
}

@keyframes metricCelebrate {
  0% { transform: translateY(0) scale(1); filter: none; }
  15% { transform: translateY(-2px) scale(1.12); filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
  30% { transform: translateY(0) scale(1.03); }
  45% { transform: translateY(-1px) scale(1.1); filter: drop-shadow(0 0 10px rgba(16,185,129,.45)); }
  70% { transform: translateY(0) scale(1.02); }
  100% { transform: translateY(0) scale(1); filter: none; }
}

.confetti-burst {
  position: fixed;
  pointer-events: none;
  width: 0;
  height: 0;
  z-index: 9999;
}

.confetti-piece {
  position: absolute;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  opacity: 0;
  transform: translate(0, 0) rotate(0deg) scale(0.9);
  animation: confettiThrow 1200ms ease-out forwards;
}

@keyframes confettiThrow {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.9); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, -40px)) rotate(var(--rot, 180deg)) scale(1); }
}