:root { --lime: #e34259; }

body {
  background:
    radial-gradient(ellipse 58% 42% at 7% 10%, #e342591c 0%, transparent 70%),
    radial-gradient(ellipse 48% 40% at 95% 28%, #c72f4617 0%, transparent 72%),
    radial-gradient(ellipse 52% 38% at 54% 100%, #9e243819 0%, transparent 74%),
    var(--paper);
  background-attachment: fixed;
}

main { position: relative; }

.rose-decor {
  position: absolute;
  top: 26px;
  bottom: 26px;
  width: 218px;
  height: auto;
  opacity: .46;
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 0 11px #b0223838);
}

.rose-decor--left { left: -209px; }
.rose-decor--right { right: -209px; transform: scaleX(-1); }

.rose-decor img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  overflow: visible;
  transform-origin: 50% 100%;
  animation: rose-sway 16s ease-in-out infinite;
  filter: url("#rose-transparent");
}

.rose-filter-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.rose-decor--right img { animation-delay: -5s; }

@keyframes rose-sway {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}

main > section { position: relative; z-index: 1; }

@media (max-width: 1400px) {
  .rose-decor { opacity: .36; width: 150px; }
  .rose-decor--left { left: -140px; }
  .rose-decor--right { right: -140px; }
}

@media (max-width: 1000px) {
  .rose-decor { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rose-decor img { animation: none; }
}

.brand img {
  border-color: #e34259;
  box-shadow: 0 0 10px #e3425988, 0 0 26px #e3425940;
}

.topbar-actions { display: flex; align-items: center; gap: 10px; }

.sync-button {
  border: 1px solid #4c4d48;
  border-radius: 12px;
  background: #20211e;
  color: #c4c4bc;
  padding: 9px 12px;
  font-size: 12px;
}

.sync-button.is-online {
  border-color: #b84b5b;
  color: #f17a89;
  box-shadow: 0 0 13px #e3425930;
}

.sync-description, .sync-status { color: #b5b5ad; font-size: 13px; line-height: 1.5; }
.sync-code-label { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; color: #d0d0c8; font-size: 12px; font-weight: 700; }
.sync-code-label input { height: 44px; border: 1px solid #44453f; border-radius: 11px; padding: 0 12px; background: var(--field); color: var(--ink); outline-color: var(--lime); }
.sync-status { margin: 14px 0 0; color: #e17a86; }

@media (max-width: 700px) {
  .sync-button { padding: 8px; font-size: 0; }
  .sync-button::first-letter { font-size: 15px; }
}

.primary {
  box-shadow: 0 0 0 1px #ff8b9955, 0 0 18px #e342594d;
}

.primary:hover {
  background: #f05b70;
  box-shadow: 0 0 0 1px #ff9eaa88, 0 0 27px #e3425973;
}

.stats .profit,
.insights article:first-child {
  box-shadow: inset 0 0 22px #ff9aa02b, 0 0 20px #e3425933;
}

.net-profit,
.calculation strong {
  color: #f26a7d;
  text-shadow: 0 0 12px #e3425970;
}

.search span,
.empty div {
  color: #ef596c;
  text-shadow: 0 0 14px #e3425966;
}