.swin-popup-zone {
  width: min(1280px, calc(100vw - 40px));
  max-width: none;
  max-height: calc(100dvh - 40px);
  padding: 0;
  border: 1px solid #c8dce9;
  border-radius: 18px;
  color: #163c5e;
  background: #f3f8fb;
  box-shadow: 0 16px 60px #12345140;
  font-family: inherit;
}
.swin-popup-zone::backdrop { background: #102d48b8; }
.swin-popup-zone[open] { display: flex; flex-direction: column; overflow: hidden; }
.swin-popup-zone[data-popup-count="1"] { width: min(560px, calc(100vw - 40px)); }
.swin-popup-zone[data-popup-count="2"] { width: min(940px, calc(100vw - 40px)); }
html[data-popup-zone-open] { overflow: hidden; }
.swin-popup-zone__header {
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 28px;
  background: #fff;
  border-bottom: 1px solid #d8e6ef;
}
.swin-popup-zone__header h2 { margin: 0; font-size: 24px; line-height: 1.4; }
.swin-popup-zone__header p { margin: 5px 0 0; color: #536b7d; font-size: 14px; }
.swin-popup-zone__close, .swin-popup-zone__reopen {
  border: 1px solid #2d80b9;
  border-radius: 6px;
  padding: 10px 16px;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
}
.swin-popup-zone__close { flex-shrink: 0; color: #fff; background: #173e5f; border-color: #173e5f; }
.swin-popup-zone__reopen { color: #216d9d; background: #fff; }
.swin-popup-zone button:focus-visible, .swin-popup-zone a:focus-visible,
.swin-popup-zone__reopen:focus-visible { outline: 3px solid #2d80b9; outline-offset: 3px; }
.swin-popup-zone__cards {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 20px;
  padding: 28px;
  align-items: start;
}
.swin-popup-zone__card { min-width: 0; padding: 20px; border: 1px solid #d5e5ef; border-radius: 12px; background: #fff; }
.swin-popup-zone__card h3 { margin: 0 0 16px; font-size: 18px; line-height: 1.6; overflow-wrap: anywhere; }
.swin-popup-zone__content { color: #324d62; font-size: 15px; line-height: 1.8; overflow-wrap: anywhere; }
.swin-popup-zone__card > .swin-popup-zone__content { max-height: min(46dvh, 440px); overflow: auto; overscroll-behavior: contain; }
.swin-popup-zone__content[tabindex]:focus-visible { outline: 3px solid #2d80b9; outline-offset: -3px; }
.swin-popup-zone__content img { display: block; max-width: 100%; height: auto; margin-inline: auto; }
.swin-popup-zone__card > .swin-popup-zone__content img { max-height: min(42dvh, 380px); width: auto; object-fit: contain; }
.swin-popup-zone__content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.swin-popup-zone__content th, .swin-popup-zone__content td { padding: 8px; border: 1px solid #d8e6ef; }
.swin-popup-zone__content p { margin: 12px 0; }
.swin-popup-zone__content a, .swin-popup-zone__link { color: #216d9d; text-decoration: underline; text-underline-offset: 3px; }
.swin-popup-zone__link { display: inline-block; margin-top: 18px; font-size: 14px; }
.swin-popup-zone-preview { max-width: 1000px; margin: 80px auto; padding: 24px; }
.swin-popup-zone-preview h1 { font-size: 28px; }
@media (max-width: 640px) {
  .swin-popup-zone, .swin-popup-zone[data-popup-count] { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); border-radius: 12px; }
  .swin-popup-zone__header { gap: 12px; padding: 16px; }
  .swin-popup-zone__header h2 { font-size: 20px; }
  .swin-popup-zone__header p { font-size: 12px; }
  .swin-popup-zone__close { padding: 9px 12px; font-size: 13px; }
  .swin-popup-zone__cards { grid-template-columns: 1fr; gap: 14px; padding: 16px; }
  .swin-popup-zone__card { padding: 16px; }
}

.swin-popup-zone, .swin-popup-zone *, .swin-popup-window * { box-sizing: border-box; }
.swin-popup-zone__card[hidden] { display: none; }
.swin-popup-zone__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.swin-popup-zone__footer { display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; gap: 16px; padding: 16px 28px; border-top: 1px solid #d8e6ef; background: #fff; }
.swin-popup-zone__footer p { margin: 0; color: #536b7d; font-size: 13px; }
.swin-popup-zone__cards.is-positioned { display: block; position: relative; }
.swin-popup-zone__card.is-positioned { position: absolute; display: flex; flex-direction: column; }
.swin-popup-zone__card.is-positioned .swin-popup-zone__content { min-height: 0; overflow: auto; flex: 1; }
.swin-popup-zone__card.is-positioned h3 { flex-shrink: 0; margin-bottom: 10px; }
.swin-popup-zone__card.is-positioned .swin-popup-zone__actions { flex-shrink: 0; }
.swin-popup-window { margin: 0; padding: 16px; color: #163c5e; background: #f3f8fb; font: 15px/1.7 sans-serif; }
.swin-popup-window h1 { margin: 0 0 18px; font-size: 22px; overflow-wrap: anywhere; }
@media (max-width: 640px) { .swin-popup-zone__footer { padding: 16px; } }

.swin-popup-zone-preview__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.swin-popup-zone-preview__controls select { min-width: 90px; min-height: 44px; padding: 8px 36px 8px 12px; border: 1px solid #c8dce9; border-radius: 6px; background-color: #fff; color: #163c5e; font: inherit; }