/* Step 72: automatic update banner */
#nik72-auto-update-banner,
#nik72-auto-update-banner * {
  box-sizing: border-box;
}

#nik72-auto-update-banner {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9400;
  display: none;
  width: min(560px, calc(100vw - 32px));
  color: #0f172a;
}

#nik72-auto-update-banner.is-visible {
  display: block;
  animation: nik72UpdateIn .18s ease both;
}

.nik72-update-inner {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(125, 180, 255, .34);
  border-radius: 24px;
  background:
    radial-gradient(circle at 10% 10%, rgba(186,230,253,.48), transparent 34%),
    rgba(255,255,255,.92);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 24px 80px rgba(15,23,42,.20), inset 0 1px 0 rgba(255,255,255,.78);
  padding: 14px;
}

.nik72-update-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg,#2563eb,#0ea5e9);
  color: #fff;
  font-size: 24px;
  font-weight: 900;
}

.nik72-update-text {
  min-width: 0;
}

.nik72-update-text b,
.nik72-update-text span {
  display: block;
}

.nik72-update-text b {
  color: #0f172a;
  font-size: 15px;
}

.nik72-update-text span {
  margin-top: 4px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.45;
}

.nik72-update-actions {
  display: flex;
  gap: 8px;
}

.nik72-update-actions button {
  min-height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(125,180,255,.28);
  background: rgba(255,255,255,.72);
  color: #0f172a;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.nik72-update-actions button:hover {
  transform: translateY(-1px);
  border-color: rgba(14,165,233,.42);
  background: rgba(224,242,254,.88);
}

.nik72-update-actions button[data-action="reload-now"] {
  border-color: transparent;
  background: linear-gradient(135deg,#2563eb,#0ea5e9);
  color: #fff;
}

@keyframes nik72UpdateIn {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 680px) {
  #nik72-auto-update-banner {
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: auto;
  }

  .nik72-update-inner {
    grid-template-columns: auto minmax(0,1fr);
  }

  .nik72-update-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .nik72-update-actions button {
    flex: 1;
  }
}