.year-change-dialog {
  box-sizing: border-box;
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100dvh - 40px);
  margin: auto;
  padding: 28px;
  border: 1px solid #dfe8df;
  border-radius: 24px;
  background: #fbfcf8;
  color: #183b2a;
  box-shadow: 0 20px 70px #102e3440;
  text-align: center;
}
.year-change-dialog::backdrop {
  background: #10291fcc;
  backdrop-filter: blur(4px);
}
.year-change-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  border-radius: 17px;
  background: #e2efdf;
  color: #326646;
  font-size: 30px;
}
.year-change-dialog h2 {
  margin: 0 0 10px;
  font-size: 23px;
  line-height: 1.25;
  letter-spacing: -0.4px;
}
.year-change-dialog p {
  margin: 0;
  color: #65776b;
  font-size: 14px;
  line-height: 1.5;
}
.year-change-years {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 24px 0;
  font-size: 23px;
}
.year-change-years > span:first-child {
  color: #718075;
}
.year-change-years > span:nth-child(2) {
  color: #a0aea2;
}
.year-change-years strong {
  padding: 10px 15px;
  border-radius: 12px;
  background: #e7f0e3;
  color: #28573b;
}
.year-change-actions {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 10px;
}
.year-change-actions button {
  min-height: 48px;
  border: 0;
  border-radius: 13px;
  padding: 12px 10px;
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
}
.year-change-actions [data-cancel] {
  background: #ecf0e9;
  color: #35543d;
}
.year-change-actions [data-confirm] {
  background: #285b3b;
  color: white;
}
.year-change-actions button:focus-visible {
  outline: 3px solid #88b678;
  outline-offset: 3px;
}