@charset "UTF-8";
.xb-export-dialog {
  width: min(1080px, calc(100vw - 28px));
  max-width: none;
  max-height: calc(100dvh - 36px);
  margin: auto;
  padding: 0;
  border: 1px solid #8d68ac;
  border-radius: 22px;
  color: #f1e7fa;
  background: #17101f;
  box-shadow: 0 28px 100px #0009;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.xb-export-dialog::backdrop { background: #090611d9; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.xb-export-dialog [hidden] { display: none !important; }
.xb-export-shell { min-width: 0; }
.xb-export-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  border-bottom: 1px solid #644976;
  background: #23162ff5;
}
.xb-export-head h2 { margin: 0 0 7px; font: 400 25px/1.45 var(--companion-serif, var(--serif)); color: #f1e2fd; }
.xb-export-head p { margin: 0; font: 13px/1.8 var(--sans); color: #c9b5d7; }
.xb-export-close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid #836394; border-radius: 50%; background: #372342; color: #f6e6ff; font: 26px/1 var(--sans); }
.xb-export-tools { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding: 20px 26px; }
.xb-export-tools p { margin: 0; color: #d4bfdc; font: 14px/1.7 var(--sans); }
.xb-export-dialog .button { min-height: 44px; font: 14px/1.5 var(--sans); }
.xb-export-pages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 0 26px 28px; }
.xb-export-page { min-width: 0; margin: 0; }
.xb-export-page img { display: block; width: 100%; height: auto; border: 1px solid #664776; border-radius: 12px; background: #261832; }
.xb-export-page figcaption { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 12px; font: 13px/1.7 var(--sans); color: #d3bedf; }
.xb-export-dialog :focus-visible { outline: 2px solid #ddb3fa; outline-offset: 4px; }
@supports not (height: 100dvh) { .xb-export-dialog { max-height: calc(100vh - 36px); } }
@media (max-width: 650px) {
  .xb-export-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 17px; }
  .xb-export-head { gap: 12px; padding: 18px; padding-top: max(18px, env(safe-area-inset-top)); }
  .xb-export-head h2 { font-size: 23px; }
  .xb-export-tools { padding: 18px; }
  .xb-export-pages { grid-template-columns: 1fr; gap: 25px; padding: 0 18px 26px; padding-bottom: max(26px, env(safe-area-inset-bottom)); }
}
@media print { .xb-export-dialog { display: none !important; } }
.xb-export-pending { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; max-width: 380px; }
.xb-export-pending > small { flex-basis: 100%; color: var(--muted, #c9b5d7); font: 12px/1.65 var(--sans, sans-serif); }
.xb-export-pending > button { min-height: 44px; }
/* A GIF is an optional, explicit action per card; the original PNG remains available. */
.xb-export-gif-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; padding: 14px; border: 1px solid #654c76; border-radius: 14px; background: #281a35; }
.xb-export-gif-tools .button { flex: 1 1 auto; }
.xb-export-gif-status { flex-basis: 100%; color: #cdb9d9; font: 12px/1.7 var(--sans, sans-serif); overflow-wrap: anywhere; }
.xb-export-dialog button:disabled { cursor: default; opacity: .56; }
@media (max-width: 650px) { .xb-export-page figcaption { flex-wrap: wrap; } .xb-export-gif-tools { padding: 12px; } }

/* Per-card video creation is explicit; controls wrap within a phone viewport. */
.xb-export-page .xb-export-video { display:block; width:100%; height:auto; max-width:100%; border:1px solid #836099; border-radius:12px; background:#17101f; }
.xb-export-video-tools { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:12px; padding:14px; border:1px solid #9971b4; border-radius:14px; background:linear-gradient(135deg,#382345,#25182f); }
.xb-export-video-tools .button { flex:1 1 auto; min-width:0; max-width:100%; white-space:normal; overflow-wrap:anywhere; }
.xb-export-video-tools > .primary { flex-basis:100%; }
.xb-export-video-status { flex-basis:100%; color:#e1cce9; font:12px/1.7 var(--sans,sans-serif); overflow-wrap:anywhere; }
.xb-export-gif-tools .button,.xb-export-page figcaption .button { max-width:100%; min-width:0; white-space:normal; overflow-wrap:anywhere; }
@media (max-width:650px) { .xb-export-video-tools { padding:12px; } }
.xb-export-format-note { flex-basis:100%; color:#baa4c8; font:12px/1.7 var(--sans,sans-serif); overflow-wrap:anywhere; }