html,
body {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: linear-gradient(to bottom, #142f49 0, #142f49 128px, #eef3f7 128px, #eef3f7 100%) no-repeat !important;
}

html,
body,
button,
input,
select,
textarea {
  font-family: "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif !important;
}

.pt-control {
  --pt-navy: #173653;
  --pt-navy-2: #214b70;
  --pt-blue: #2f75b6;
  --pt-amber: #f2b33d;
  --pt-ink: #18314b;
  --pt-muted: #6c7f92;
  --pt-line: #d8e2ec;
  --pt-soft: #f4f7fa;
  display: block;
  height: 100%;
  color: var(--pt-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}

.pt-control * { box-sizing: border-box; }
.mawj-title {
  overflow: visible !important;
}
.mawj-title::before {
  content: none !important;
}
.mawj-title .label-caption {
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  line-height: 1.2 !important;
}
.mawj-title .label-caption::before {
  content: "MAWJ  /  EVENT SLIDESHOW";
  display: block;
  margin-bottom: 4px;
  color: #f0b33b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
}
.mawj-settings.mawj-settings-wide {
  left: 50% !important;
  margin-left: -520px !important;
  overflow: hidden !important;
}
.mawj-settings.mawj-settings-wide::before,
.mawj-settings.mawj-settings-wide::after {
  content: "";
  position: absolute;
  top: 58px;
  z-index: 0;
  height: 230px;
  border: 1px solid #d8e3ec;
  border-radius: 13px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 3px 10px rgba(20, 54, 83, .045);
}
.mawj-settings.mawj-settings-wide::before {
  left: 24px;
  width: 305px;
}
.mawj-settings.mawj-settings-wide::after {
  left: 344px;
  width: 670px;
}
.XojoLabel.mawj-settings-left,
.XojoTextField:has(.mawj-settings-left),
.XojoCheckbox:has(.mawj-settings-left),
.XojoPopupMenu:has(.mawj-settings-left),
.XojoButton:has(.mawj-settings-left),
.XojoProgressBar:has(.mawj-settings-left) {
  left: 50% !important;
  margin-left: -495px !important;
}
.XojoLabel.mawj-settings-photo,
.XojoTextField:has(.mawj-settings-photo),
.XojoPopupMenu:has(.mawj-settings-photo) {
  left: 50% !important;
  margin-left: -475px !important;
}
.XojoLabel.mawj-settings-middle,
.XojoTextField:has(.mawj-settings-middle),
.XojoCheckbox:has(.mawj-settings-middle),
.XojoPopupMenu:has(.mawj-settings-middle),
.XojoButton:has(.mawj-settings-middle) {
  left: 50% !important;
  margin-left: -155px !important;
}
.XojoLabel.mawj-settings-bgm-wide,
.XojoTextField:has(.mawj-settings-bgm-wide) {
  left: 50% !important;
  margin-left: -155px !important;
}
.XojoLabel.mawj-settings-right,
.XojoTextField:has(.mawj-settings-right),
.XojoCheckbox:has(.mawj-settings-right),
.XojoPopupMenu:has(.mawj-settings-right),
.XojoButton:has(.mawj-settings-right) {
  left: 50% !important;
  margin-left: 160px !important;
}
.XojoButton:has(.mawj-settings-action-right) {
  left: 50% !important;
  margin-left: 0 !important;
}

/* Keep the amber marker and the block-level Xojo label on one row. */
.mawj-section-title {
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
}
.mawj-section-title .label-caption {
  flex: 1 1 auto;
  min-width: 0;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  line-height: 1.25 !important;
}

/* Make settings controls read as interactive controls on the pale panel. */
.XojoPopupMenu .dropdown,
.XojoPopupMenu .btn-group {
  width: 100% !important;
}
.XojoPopupMenu > button.dropdown-toggle,
.XojoPopupMenu button.dropdown-toggle {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  border: 2px solid #91abc2 !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #173653 !important;
  font-weight: 750 !important;
  padding-right: 42px !important;
  overflow: hidden !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 7px rgba(20, 54, 83, .10) !important;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.XojoPopupMenu button.dropdown-toggle::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  right: 16px !important;
  border-top-color: #2e73ad !important;
  border-right-width: 6px !important;
  border-left-width: 6px !important;
  margin: -3px 0 0 !important;
}
.XojoPopupMenu button.dropdown-toggle:hover {
  border-color: #2e73ad !important;
  background: #f7fbff !important;
  box-shadow: 0 3px 10px rgba(30, 91, 139, .16) !important;
}
.XojoPopupMenu button.dropdown-toggle:focus-visible {
  border-color: #2e73ad !important;
}

/* Unlike the always-visible section headings, this title must still obey
   WebLabel.Visible when no completed movie exists. */
.mawj-preview-title {
  color: #142f49 !important;
  font-weight: 800 !important;
  letter-spacing: .01em;
  overflow: visible !important;
}
.mawj-preview-title .label-caption {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  margin: 0 !important;
  overflow: visible !important;
  line-height: 1.3 !important;
}
.mawj-preview-title .label-caption::before {
  content: "";
  flex: 0 0 6px;
  width: 6px;
  height: 19px;
  margin-right: 9px;
  border-radius: 6px;
  background: #f0b33b;
}
.mawj-ai-cost {
  color: #43627d !important;
  font-weight: 700 !important;
  overflow: visible !important;
}
.mawj-ai-cost .label-caption {
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  line-height: 1.35 !important;
}

/* Xojo attaches these classes to its inner button, not the wrapper. */
button.mawj-primary,
.btn.mawj-primary {
  border: 1px solid #1f608f !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #347fbd, #286ba3) !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow: 0 5px 13px rgba(35, 94, 143, .25) !important;
}
button.mawj-primary:hover:not(:disabled),
.btn.mawj-primary:hover:not(:disabled) {
  filter: brightness(1.06);
  box-shadow: 0 7px 16px rgba(35, 94, 143, .30) !important;
}
button.mawj-primary:disabled,
.btn.mawj-primary:disabled {
  border-color: #6c9abb !important;
  background: #82a8c4 !important;
  color: #f7fbff !important;
  opacity: .72 !important;
  box-shadow: none !important;
}
button.mawj-secondary,
.btn.mawj-secondary {
  border: 1px solid #9db8ce !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #244e78 !important;
  font-weight: 700 !important;
}
.mawj-preview-player,
.XojoMoviePlayer:has(.mawj-preview-player) {
  overflow: hidden !important;
  border: 1px solid #c8d7e4 !important;
  border-radius: 14px !important;
  background: #0b1722 !important;
  box-shadow: 0 10px 28px rgba(19, 48, 75, .18) !important;
}
.pt-shell,
.pt-editor { background: #fff; border: 1px solid var(--pt-line); border-radius: 14px; }
.pt-shell { padding: 17px 18px 13px; }
.pt-heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.pt-heading-row h3 { margin: 1px 0 0; color: var(--pt-navy); font-size: 18px; line-height: 1.25; letter-spacing: .02em; }
.pt-heading-row p { margin: 0; color: var(--pt-muted); font-size: 12px; }
.pt-kicker { display: block; color: #c07b00; font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.pt-track {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 164px;
  padding: 3px 3px 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-color: #9bb0c4 #e8eef4;
  scrollbar-width: thin;
}
.pt-track::-webkit-scrollbar { height: 9px; }
.pt-track::-webkit-scrollbar-track { background: #e8eef4; border-radius: 999px; }
.pt-track::-webkit-scrollbar-thumb { background: #9bb0c4; border-radius: 999px; }
.pt-connector { flex: 0 0 25px; align-self: center; height: 2px; margin-top: -24px; background: #bfd0df; position: relative; }
.pt-connector::after { content: ""; position: absolute; right: -1px; top: -3px; width: 7px; height: 7px; border-top: 2px solid #90a9be; border-right: 2px solid #90a9be; transform: rotate(45deg); }
.pt-card {
  position: relative;
  flex: 0 0 140px;
  width: 140px;
  min-height: 144px;
  padding: 10px;
  overflow: visible;
  border: 1px solid #cbd8e4;
  border-radius: 12px;
  background: #fff;
  color: var(--pt-ink);
  text-align: left;
  box-shadow: 0 3px 9px rgba(27, 57, 86, .07);
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.pt-card:hover { border-color: #82aace; box-shadow: 0 7px 16px rgba(27, 57, 86, .12); transform: translateY(-1px); }
.pt-card:focus-visible { outline: 3px solid rgba(47, 117, 182, .3); outline-offset: 2px; }
.pt-card.is-selected { border: 2px solid var(--pt-amber); box-shadow: 0 0 0 3px rgba(242, 179, 61, .16), 0 8px 18px rgba(27, 57, 86, .13); }
.pt-card.is-dragging { opacity: .42; transform: scale(.97); }
.pt-card.pt-drop-before::before,
.pt-card.pt-drop-after::after { content: ""; position: absolute; top: -4px; bottom: -4px; width: 4px; border-radius: 99px; background: var(--pt-blue); }
.pt-card.pt-drop-before::before { left: -17px; }
.pt-card.pt-drop-after::after { right: -17px; }
.pt-card-special { background: linear-gradient(155deg, var(--pt-navy), var(--pt-navy-2)); color: #fff; }
.pt-card-special strong { display: block; margin-top: 6px; font-size: 15px; }
.pt-type-badge { display: inline-block; color: #ffd373; font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.pt-special-icon { display: grid; width: 42px; height: 42px; margin-top: 10px; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, .12); color: #ffd16b; font-size: 20px; font-weight: 800; }
.pt-card-summary { display: -webkit-box; margin-top: 6px; overflow: hidden; color: #e9f1f8; font-size: 11px; line-height: 1.45; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pt-card-summary.is-empty { color: #afc1d0; }
.pt-order { position: absolute; top: 8px; left: 9px; z-index: 2; display: grid; width: 28px; height: 24px; place-items: center; border-radius: 7px; background: var(--pt-navy); color: #fff; font-size: 11px; font-weight: 800; }
.pt-drag-handle { position: absolute; top: 8px; right: 9px; z-index: 2; color: #678096; font-size: 17px; cursor: grab; }
.pt-thumb { display: grid; width: 100%; height: 76px; overflow: hidden; place-items: center; border-radius: 8px; background: #e8eef4; }
.pt-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pt-no-thumb { color: #8699aa; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.pt-photo-name { display: block; margin-top: 8px; overflow: hidden; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.pt-comment-state { display: block; margin-top: 4px; color: #8293a4; font-size: 10px; }
.pt-comment-state.has-comment { color: #27744c; font-weight: 700; }
.pt-track-help { display: flex; gap: 6px; align-items: center; margin-top: 7px; color: var(--pt-muted); font-size: 11px; }
.pt-track-help span { color: var(--pt-blue); font-size: 16px; font-weight: 800; }
.pt-editor { display: grid; grid-template-columns: minmax(150px, 210px) 1fr; gap: 18px; margin-top: 12px; padding: 15px 17px; background: var(--pt-soft); }
.pt-editor-copy { display: flex; flex-direction: column; justify-content: center; gap: 5px; }
.pt-editor-label { color: var(--pt-navy); font-size: 14px; font-weight: 800; }
.pt-editor-hint { color: var(--pt-muted); font-size: 10px; line-height: 1.55; }
.pt-editor-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: stretch; }
.pt-editor-input { min-width: 0; resize: none; border: 1px solid #bdccda; border-radius: 9px; background: #fff; color: var(--pt-ink); font: inherit; font-size: 13px; line-height: 1.5; padding: 10px 11px; }
.pt-editor-input:focus { border-color: var(--pt-blue); outline: 3px solid rgba(47, 117, 182, .13); }
.pt-editor-actions { display: flex; flex-direction: column; gap: 7px; min-width: 92px; }
.pt-editor-actions button { flex: 1; border-radius: 8px; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.pt-save { border: 1px solid var(--pt-blue); background: var(--pt-blue); color: #fff; }
.pt-remove { border: 1px solid #d2a2a0; background: #fff; color: #9a413d; }
.pt-shell.is-disabled { opacity: .72; }
.pt-shell.is-disabled .pt-card { cursor: default; }
.pt-control button:disabled,
.pt-control textarea:disabled { cursor: not-allowed; opacity: .58; }

@media (max-width: 760px) {
  .pt-heading-row { align-items: flex-start; flex-direction: column; gap: 4px; }
  .pt-editor { grid-template-columns: 1fr; }
  .pt-editor-row { grid-template-columns: 1fr; }
  .pt-editor-actions { flex-direction: row; min-height: 38px; }
}