.save-site-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 20px;
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid rgba(255, 250, 240, .5);
  border-radius: 8px;
  background: transparent;
  color: #fffaf0;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.save-site-button:hover { background: rgba(255, 250, 240, .1); }
.save-site-button svg { width: 20px; height: 20px; flex-shrink: 0; }
.save-site-button:focus-visible { outline: 3px solid #ffb08e; outline-offset: 4px; }
.save-site-button[hidden], .save-site-dialog [hidden] { display: none; }
html.save-site-open, html.save-site-open body { overflow: hidden; }

.save-site-dialog {
  box-sizing: border-box;
  width: min(460px, calc(100% - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e5dac8;
  border-radius: 18px;
  background: #fffaf0;
  color: #10231f;
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  line-height: 1.55;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .25);
}

.save-site-dialog::backdrop { background: rgba(7, 30, 25, .68); }
.save-site-dialog[open] { display: flex; flex-direction: column; }
.save-site-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-shrink: 0; padding: 18px 18px 10px 26px; }
.save-site-dialog .save-site-icon { width: 68px; height: 68px; border-radius: 14px; }
.save-site-content { min-height: 0; padding: 8px 26px 24px; overflow-y: auto; overscroll-behavior: contain; overflow-wrap: normal; }
.save-site-dialog h2 { margin: 0 0 10px; font-size: 25px; line-height: 1.2; letter-spacing: -.03em; }
.save-site-dialog p { margin: 0 0 18px; font-size: 15px; }
.save-site-dialog h3 { margin: 20px 0 8px; font-size: 15px; color: #123f35; }
.save-site-dialog ol { padding-left: 23px; margin: 0; font-size: 14px; }
.save-site-dialog li + li { margin-top: 9px; }
.save-site-dialog li::marker { color: #137b86; font-weight: 700; }
.save-site-dialog .save-site-note { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid #dfd8c9; color: #53655f; font-size: 12px; }

.save-site-close {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #123f35;
  font: inherit;
  font-size: 28px;
  cursor: pointer;
}

.save-site-close:hover { background: #f5ead6; }
.save-site-native {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 0;
  border-radius: 8px;
  background: #123f35;
  color: #fffaf0;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.save-site-dialog button:focus-visible { outline: 3px solid #137b86; outline-offset: 3px; }
@media (max-height: 500px) {
  .save-site-header { padding-top: 10px; padding-bottom: 4px; }
  .save-site-dialog .save-site-icon { width: 44px; height: 44px; }
}
@media (display-mode: standalone) { .save-site-button { display: none; } }