:root {
  --bg: #ece8dc;
  --text: #1e2530;
  --card: #ffffff;
  --accent: #ff8c42;
  --accent-dark: #dd6d24;
  --border: #ded8c8;
  --danger: #d84b45;
  --cloud-a: rgba(255, 255, 255, 0.88);
  --cloud-b: rgba(241, 248, 255, 0.86);
}

* {
  box-sizing: border-box;
}

body {
  position: relative;
  margin: 0;
  font-family: "Nunito", "Segoe UI", sans-serif;
  color: var(--text);
  background: radial-gradient(circle at top left, #f5edcf, var(--bg));
  overflow-x: hidden;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-repeat: no-repeat;
}

body::before {
  background-image:
    radial-gradient(92px 24px at 9% 8%, var(--cloud-a) 0 98%, transparent 100%),
    radial-gradient(32px 24px at 5.7% 6.9%, var(--cloud-a) 0 98%, transparent 100%),
    radial-gradient(42px 28px at 10.3% 5.6%, var(--cloud-a) 0 98%, transparent 100%),
    radial-gradient(28px 20px at 13.8% 7.2%, var(--cloud-a) 0 98%, transparent 100%),
    radial-gradient(40px 30px at 23% 18%, var(--cloud-b) 0 98%, transparent 100%),
    radial-gradient(58px 32px at 27.8% 19.4%, var(--cloud-b) 0 98%, transparent 100%),
    radial-gradient(26px 18px at 31.7% 17.3%, var(--cloud-b) 0 98%, transparent 100%),
    radial-gradient(72px 22px at 44% 9%, var(--cloud-a) 0 98%, transparent 100%),
    radial-gradient(30px 23px at 40.6% 7.5%, var(--cloud-a) 0 98%, transparent 100%),
    radial-gradient(24px 18px at 47.8% 7.9%, var(--cloud-a) 0 98%, transparent 100%),
    radial-gradient(48px 34px at 60% 15%, var(--cloud-b) 0 98%, transparent 100%),
    radial-gradient(34px 26px at 56.6% 13.5%, var(--cloud-b) 0 98%, transparent 100%),
    radial-gradient(64px 24px at 67.2% 14.8%, var(--cloud-b) 0 98%, transparent 100%),
    radial-gradient(34px 20px at 80% 9%, var(--cloud-a) 0 98%, transparent 100%),
    radial-gradient(52px 26px at 84.8% 10.6%, var(--cloud-a) 0 98%, transparent 100%),
    radial-gradient(26px 18px at 89.1% 8.8%, var(--cloud-a) 0 98%, transparent 100%),
    radial-gradient(84px 26px at 14% 34%, var(--cloud-b) 0 98%, transparent 100%),
    radial-gradient(28px 21px at 10.2% 32.6%, var(--cloud-b) 0 98%, transparent 100%),
    radial-gradient(38px 26px at 16.9% 31.3%, var(--cloud-b) 0 98%, transparent 100%),
    radial-gradient(34px 25px at 35% 44%, var(--cloud-a) 0 98%, transparent 100%),
    radial-gradient(58px 31px at 40.3% 45.7%, var(--cloud-a) 0 98%, transparent 100%),
    radial-gradient(86px 24px at 58% 31%, var(--cloud-b) 0 98%, transparent 100%),
    radial-gradient(35px 24px at 53.2% 29.8%, var(--cloud-b) 0 98%, transparent 100%),
    radial-gradient(26px 17px at 63.8% 30.1%, var(--cloud-b) 0 98%, transparent 100%),
    radial-gradient(42px 30px at 73% 43%, var(--cloud-a) 0 98%, transparent 100%),
    radial-gradient(70px 26px at 78.5% 45.1%, var(--cloud-a) 0 98%, transparent 100%);
  opacity: 0.92;
}

body::after {
  background-image:
    radial-gradient(34px 24px at 8% 57%, var(--cloud-b) 0 98%, transparent 100%),
    radial-gradient(68px 28px at 12.9% 58.9%, var(--cloud-b) 0 98%, transparent 100%),
    radial-gradient(24px 18px at 17.5% 56.8%, var(--cloud-b) 0 98%, transparent 100%),
    radial-gradient(92px 24px at 29% 67%, var(--cloud-a) 0 98%, transparent 100%),
    radial-gradient(30px 22px at 24.7% 65.6%, var(--cloud-a) 0 98%, transparent 100%),
    radial-gradient(40px 27px at 31.2% 65.3%, var(--cloud-a) 0 98%, transparent 100%),
    radial-gradient(38px 27px at 43% 57%, var(--cloud-b) 0 98%, transparent 100%),
    radial-gradient(54px 31px at 48% 58.4%, var(--cloud-b) 0 98%, transparent 100%),
    radial-gradient(26px 18px at 52.2% 56.6%, var(--cloud-b) 0 98%, transparent 100%),
    radial-gradient(44px 30px at 64% 71%, var(--cloud-a) 0 98%, transparent 100%),
    radial-gradient(62px 26px at 69% 72.5%, var(--cloud-a) 0 98%, transparent 100%),
    radial-gradient(30px 19px at 73.3% 70.5%, var(--cloud-a) 0 98%, transparent 100%),
    radial-gradient(78px 25px at 84% 61%, var(--cloud-b) 0 98%, transparent 100%),
    radial-gradient(32px 23px at 79.9% 59.4%, var(--cloud-b) 0 98%, transparent 100%),
    radial-gradient(38px 28px at 87.8% 58.6%, var(--cloud-b) 0 98%, transparent 100%),
    radial-gradient(32px 24px at 14% 84%, var(--cloud-a) 0 98%, transparent 100%),
    radial-gradient(56px 30px at 19.2% 85.5%, var(--cloud-a) 0 98%, transparent 100%),
    radial-gradient(24px 17px at 23.1% 83.8%, var(--cloud-a) 0 98%, transparent 100%),
    radial-gradient(88px 24px at 39% 93%, var(--cloud-b) 0 98%, transparent 100%),
    radial-gradient(30px 21px at 34.6% 91.9%, var(--cloud-b) 0 98%, transparent 100%),
    radial-gradient(42px 27px at 42.9% 91.1%, var(--cloud-b) 0 98%, transparent 100%),
    radial-gradient(42px 31px at 60% 88%, var(--cloud-a) 0 98%, transparent 100%),
    radial-gradient(64px 28px at 66.3% 89.4%, var(--cloud-a) 0 98%, transparent 100%),
    radial-gradient(80px 25px at 83% 95%, var(--cloud-b) 0 98%, transparent 100%),
    radial-gradient(32px 22px at 78.6% 93.6%, var(--cloud-b) 0 98%, transparent 100%),
    radial-gradient(26px 18px at 87.5% 93.4%, var(--cloud-b) 0 98%, transparent 100%);
  opacity: 0.87;
  animation: clouds-drift 45s linear infinite;
}

.birds-decor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

body > *:not(.birds-decor) {
  position: relative;
  z-index: 1;
}

.bird {
  position: absolute;
  width: 46px;
  height: 18px;
  --bird-scale: 1;
  transform: scale(var(--bird-scale));
  color: rgba(36, 46, 62, 0.95);
  animation: birds-float 9s ease-in-out infinite;
}

.bird::before,
.bird::after {
  content: "";
  position: absolute;
  top: 0;
  width: 24px;
  height: 14px;
  border-top: 3.5px solid currentColor;
  border-radius: 50%;
}

.bird::before {
  left: 0;
  transform: rotate(-10deg);
}

.bird::after {
  left: 21px;
  transform: rotate(10deg);
}

.bird-1 {
  top: 10%;
  left: 15%;
}

.bird-2 {
  top: 16%;
  left: 28%;
  --bird-scale: 0.85;
  animation-delay: 1.2s;
}

.bird-3 {
  top: 8%;
  left: 52%;
  --bird-scale: 1.05;
  animation-delay: 2.4s;
}

.bird-4 {
  top: 17%;
  left: 68%;
  --bird-scale: 0.9;
  animation-delay: 0.7s;
}

.bird-5 {
  top: 12%;
  left: 81%;
  --bird-scale: 1.1;
  animation-delay: 1.8s;
}

.bird-6 {
  top: 22%;
  left: 42%;
  --bird-scale: 0.75;
  animation-delay: 3s;
}

.bird-7 {
  top: 36%;
  left: 12%;
  --bird-scale: 0.9;
  animation-delay: 0.4s;
}

.bird-8 {
  top: 41%;
  left: 34%;
  --bird-scale: 1.05;
  animation-delay: 1.7s;
}

.bird-9 {
  top: 48%;
  left: 58%;
  --bird-scale: 0.8;
  animation-delay: 2.8s;
}

.bird-10 {
  top: 54%;
  left: 80%;
  --bird-scale: 1;
  animation-delay: 1s;
}

.bird-11 {
  top: 63%;
  left: 24%;
  --bird-scale: 0.85;
  animation-delay: 2.1s;
}

.bird-12 {
  top: 72%;
  left: 50%;
  --bird-scale: 1.1;
  animation-delay: 0.6s;
}

.bird-13 {
  top: 82%;
  left: 74%;
  --bird-scale: 0.9;
  animation-delay: 2.5s;
}

.bird-14 {
  top: 90%;
  left: 16%;
  --bird-scale: 0.78;
  animation-delay: 1.4s;
}

.bird-15 {
  top: 26%;
  left: 3%;
  --bird-scale: 0.88;
  animation-delay: 0.9s;
}

.bird-16 {
  top: 44%;
  left: 95%;
  --bird-scale: 0.92;
  animation-delay: 1.9s;
}

.bird-17 {
  top: 68%;
  left: 2%;
  --bird-scale: 0.84;
  animation-delay: 2.7s;
}

.bird-18 {
  top: 84%;
  left: 94%;
  --bird-scale: 0.9;
  animation-delay: 0.3s;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1.1rem;
  background: rgba(248, 245, 233, 0.86);
  backdrop-filter: blur(2px);
  border-bottom: 1px solid var(--border);
}

.header h1 {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.2;
}

.header a {
  color: inherit;
  text-decoration: none;
  margin-left: 0.75rem;
}

.story-header {
  position: relative;
  justify-content: center;
  flex-wrap: nowrap;
  padding-left: 4.8rem;
  padding-right: 4.8rem;
}

.story-header .back-link {
  position: absolute;
  left: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0;
}

.story-header h1 {
  text-align: center;
}

.filters,
.grid,
.story-page,
.admin-layout,
.login-box {
  width: min(1100px, 94vw);
  margin: 1.25rem auto;
}

.filters form,
.panel form {
  display: grid;
  gap: 0.5rem;
}

input,
select,
button {
  padding: 0.65rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  font-size: 1rem;
}

button,
.button {
  display: inline-block;
  border: none;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  font-weight: 700;
}

button:hover,
.button:hover {
  background: var(--accent-dark);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

.card,
.panel,
.login-box,
.story-page {
  background: var(--card);
  border-radius: 16px;
  border: 1px solid var(--border);
  padding: 1rem;
}

.card img,
.admin-story img,
.story-image {
  width: 100%;
  border-radius: 12px;
  object-fit: cover;
}

.card-content h2,
.admin-story h3 {
  margin-bottom: 0.5rem;
}

.meta {
  color: #5f6875;
  font-size: 0.9rem;
}

.story-content {
  white-space: pre-line;
  line-height: 1.6;
}

.admin-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.admin-story {
  border-top: 1px solid var(--border);
  margin-top: 1rem;
  padding-top: 1rem;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 0.9rem;
}

.admin-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.danger {
  background: var(--danger);
}

.error {
  color: #9b1d1d;
  font-weight: 700;
}

.success {
  color: #1a7f37;
  font-weight: 700;
}

.loading-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(30, 37, 48, 0.55);
  z-index: 9999;
}

.loading-overlay.visible {
  display: flex;
}

.loading-box {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  display: grid;
  place-items: center;
  gap: 0.65rem;
}

.loading-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
  width: 100%;
}

.loading-steps li {
  color: #6b7380;
  font-size: 0.95rem;
}

.loading-steps li.active {
  color: #1f2a37;
  font-weight: 700;
}

.loading-steps li.done {
  color: #1a7f37;
}

.spinner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 4px solid #f2e8cc;
  border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes clouds-drift {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-28px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes birds-float {
  0%, 100% {
    transform: translate(0, 0) scale(var(--bird-scale));
  }
  50% {
    transform: translate(5px, -4px) scale(var(--bird-scale));
  }
}

@media (max-width: 760px) {
  .admin-story {
    grid-template-columns: 1fr;
  }

  .header {
    flex-wrap: wrap;
  }

  .bird {
    width: 34px;
    height: 14px;
  }

}