.flyering-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.hero-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 12px;
  min-width: 260px;
}

.metric-card {
  padding: 14px 16px;
  border: 1px solid #e8d38a;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.8);
}

.metric-label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.metric-card strong {
  font-size: 1.8rem;
  line-height: 1;
}

.flyering-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.flyering-entry-form {
  display: grid;
  grid-template-columns: minmax(150px, 170px) minmax(180px, 1.2fr) minmax(160px, 1fr) minmax(190px, 230px) auto;
  gap: 14px;
  align-items: end;
}

.flyering-entry-form button {
  min-height: 46px;
  padding-inline: 20px;
}

.flyering-flyers-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.flyering-flyers-control input {
  margin-top: 7px;
}

.flyering-plus-btn {
  position: relative;
  min-width: 58px;
  min-height: 45px;
  margin-top: 7px;
  padding: 10px 12px;
  background: var(--brand-cyan);
}

.flyering-plus-emoji {
  position: fixed;
  z-index: 10000;
  left: var(--emoji-left);
  top: var(--emoji-top);
  font-size: var(--emoji-size);
  line-height: 1;
  pointer-events: none;
  animation: flyering-emoji-pop 780ms cubic-bezier(0.18, 0.82, 0.32, 1) forwards;
}

.flyering-entry-notes {
  grid-column: 1 / -2;
  margin-bottom: 0;
}

.flyering-entry-notes textarea {
  min-height: 84px;
}

.flyering-confetti {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
}

.flyering-confetti-piece {
  position: absolute;
  top: var(--confetti-top);
  left: var(--confetti-left);
  width: var(--confetti-width);
  height: var(--confetti-height);
  border-radius: 3px;
  background: var(--confetti-color);
  opacity: 0.96;
  transform: rotate(var(--confetti-rotate));
  animation: flyering-confetti-fall var(--confetti-duration) cubic-bezier(0.18, 0.68, 0.34, 1) var(--confetti-delay) forwards;
}

.flyering-confetti-piece.is-streamer {
  width: 5px;
  border-radius: 999px;
}

.flyering-confetti-badge {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 10000;
  padding: 16px 20px;
  border: 2px solid #ffffff;
  border-radius: 16px;
  background: var(--brand-purple);
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 18px 38px rgba(67, 49, 12, 0.26);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.84);
  animation: flyering-save-badge 1500ms ease forwards;
}

@keyframes flyering-emoji-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -20%) scale(0.45) rotate(-10deg);
  }

  18% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--emoji-drift)), -82px) scale(1.35) rotate(var(--emoji-rotate));
  }
}

@keyframes flyering-confetti-fall {
  35% {
    opacity: 1;
    transform: translate3d(var(--confetti-pop-x), var(--confetti-pop-y), 0) rotate(calc(var(--confetti-rotate) + 260deg));
  }

  100% {
    opacity: 0;
    transform: translate3d(var(--confetti-drift), var(--confetti-fall), 0) rotate(calc(var(--confetti-rotate) + 720deg));
  }
}

@keyframes flyering-save-badge {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.72) rotate(-2deg);
  }

  18%,
  72% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -62%) scale(1.04) rotate(1deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .flyering-confetti,
  .flyering-confetti-badge,
  .flyering-plus-emoji {
    display: none;
  }
}

.flyering-list-wrap {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.flyering-empty {
  padding: 18px;
  border: 1px dashed #d6bf69;
  border-radius: 16px;
  background: #fff9df;
  color: var(--muted);
  text-align: center;
}

.flyering-row {
  border: 1px solid #ebd892;
  border-radius: 18px;
  background: #fffdf2;
  padding: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.flyering-row.is-completed {
  border-color: #9fd0c9;
  background: linear-gradient(180deg, #f9fffd 0%, #eefaf6 100%);
}

.flyering-row.is-saving {
  border-color: #87bfdc;
}

.flyering-row.has-error {
  border-color: #d57777;
}

.flyering-row-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.flyering-road {
  margin: 0;
  font-size: 1.2rem;
}

.flyering-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.flyering-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff4c6;
  color: #5b4c16;
  font-size: 12px;
  font-weight: 700;
}

.flyering-pill.reason {
  background: #e6f8fc;
  color: #0f6070;
}

.flyering-pill.owner {
  background: #f3ebff;
  color: #5c2ca8;
}

.flyering-status {
  flex: 0 0 auto;
  min-width: 118px;
  padding: 8px 10px;
  border-radius: 12px;
  background: #f7ecd2;
  color: #6b5b2c;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.flyering-status.state-saving {
  background: #dff4fb;
  color: #135d75;
}

.flyering-status.state-saved {
  background: #e7f8ef;
  color: #24694d;
}

.flyering-status.state-error {
  background: #ffe4e4;
  color: #982e2e;
}

.flyering-links {
  margin-top: 12px;
}

.flyering-links a {
  color: #2a78a6;
  font-weight: 700;
}

.flyering-subtle-link {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.flyering-subtle-link a {
  color: inherit;
  text-decoration: none;
}

.flyering-subtle-link a:hover {
  text-decoration: underline;
}

.flyering-edit-grid {
  display: grid;
  grid-template-columns: minmax(150px, 170px) minmax(170px, 190px) minmax(0, 1fr);
  gap: 14px;
  margin-top: 16px;
}

.field-help {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

.flyering-row textarea {
  min-height: 104px;
}

@media (max-width: 900px) {
  .flyering-hero {
    flex-direction: column;
  }

  .hero-metrics {
    width: 100%;
    min-width: 0;
  }

  .flyering-toolbar,
  .flyering-entry-form,
  .flyering-edit-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .flyering-entry-notes {
    grid-column: auto;
  }

  .flyering-row-head {
    flex-direction: column;
  }

  .flyering-status {
    width: 100%;
  }
}