.sgbjp-shell {
  --sgbjp-ink: #18324a;
  --sgbjp-muted: #617287;
  --sgbjp-blue: #2474a7;
  --sgbjp-blue-dark: #16567f;
  --sgbjp-gold: #e9aa3c;
  --sgbjp-paper: #ffffff;
  --sgbjp-cloud: #f3f8fb;
  color: var(--sgbjp-ink);
  margin: 0 auto;
  max-width: 1080px;
  padding: clamp(24px, 5vw, 64px) 16px;
}

.sgbjp-shell *,
.sgbjp-shell *::before,
.sgbjp-shell *::after { box-sizing: border-box; }

.sgbjp-header { margin: 0 auto 28px; max-width: 720px; text-align: center; }
.sgbjp-header h2 { color: var(--sgbjp-ink); font-size: clamp(32px, 6vw, 52px); letter-spacing: -.035em; line-height: 1.02; margin: 8px 0 14px; }
.sgbjp-header p { color: var(--sgbjp-muted); font-size: 17px; line-height: 1.65; margin: 0; }
.sgbjp-eyebrow,
.sgbjp-card__label { color: var(--sgbjp-blue); display: block; font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.sgbjp-grid { display: grid; gap: 24px; }
.sgbjp-card { background: var(--sgbjp-paper); border: 1px solid #dce8ef; border-radius: 24px; box-shadow: 0 16px 45px rgba(24, 50, 74, .09); overflow: hidden; padding: clamp(22px, 4vw, 38px); }
.sgbjp-card__top { align-items: flex-start; display: flex; gap: 18px; justify-content: space-between; }
.sgbjp-card__top h3 { color: var(--sgbjp-ink); font-size: clamp(24px, 4vw, 34px); line-height: 1.1; margin: 7px 0 0; }
.sgbjp-status { border-radius: 999px; flex: 0 0 auto; font-size: 12px; font-weight: 800; padding: 8px 12px; }
.sgbjp-status--ready { background: #e5f7ee; color: #12683d; }
.sgbjp-status--preparing { background: #fff4dc; color: #8a5a00; }
.sgbjp-order { color: var(--sgbjp-muted); font-size: 13px; margin: 10px 0 0; }
.sgbjp-message { background: var(--sgbjp-cloud); border-left: 4px solid var(--sgbjp-blue); border-radius: 0 14px 14px 0; color: #385269; margin: 24px 0; padding: 14px 18px; }
.sgbjp-message p { margin: 0; }
.sgbjp-review { background: #f8fbfd; border: 1px solid #d7e5ec; border-radius: 20px; margin-top: 26px; padding: clamp(20px, 4vw, 30px); }
.sgbjp-review__heading { align-items: flex-start; display: flex; gap: 18px; justify-content: space-between; }
.sgbjp-review__heading h4 { color: var(--sgbjp-ink); font-size: clamp(21px, 3vw, 27px); margin: 6px 0 0; }
.sgbjp-review__status { background: #e7f1f7; border-radius: 999px; color: #205f83; flex: 0 0 auto; font-size: 12px; font-weight: 800; padding: 8px 12px; }
.sgbjp-review--approved .sgbjp-review__status { background: #dcfce7; color: #166534; }
.sgbjp-review--changes_requested .sgbjp-review__status { background: #fff1d6; color: #8a5a00; }
.sgbjp-review__meta { color: var(--sgbjp-muted); font-size: 12px; margin: 8px 0 0; }
.sgbjp-review__intro { color: #385269; line-height: 1.55; margin: 22px 0 18px; }
.sgbjp-review-field { margin-top: 20px; }
.sgbjp-review-field label { display: block; margin-bottom: 8px; }
.sgbjp-review-field label strong { display: block; font-size: 16px; }
.sgbjp-review-field label span { color: var(--sgbjp-muted); display: block; font-size: 12px; line-height: 1.45; margin-top: 3px; }
.sgbjp-review-field textarea:not([hidden]) { background: #fff; border: 1px solid #b9ccd8; border-radius: 12px; color: var(--sgbjp-ink); display: block; font-family: inherit; font-size: 15px; line-height: 1.55; min-height: 138px; padding: 14px; resize: vertical; width: 100%; }
.sgbjp-review-field textarea:focus { border-color: var(--sgbjp-blue); box-shadow: 0 0 0 3px rgba(36, 116, 167, .14); outline: 0; }
.sgbjp-arrangement-builder { margin-top: 20px; }
.sgbjp-arrangement-toolbar { align-items: center; background: #edf5f9; border: 1px solid #d1e2eb; border-radius: 14px; display: flex; gap: 18px; justify-content: space-between; margin-bottom: 16px; padding: 14px 16px; }
.sgbjp-arrangement-toolbar p { color: #385269; line-height: 1.45; margin: 0; }
.sgbjp-button--small { flex: 0 0 auto; font-size: 13px; padding: 9px 14px; }
.sgbjp-arrangement-sections { display: grid; gap: 18px; }
.sgbjp-arrangement-section { background: #fff; border: 1px solid #cddde6; border-radius: 16px; box-shadow: 0 8px 22px rgba(24, 50, 74, .05); padding: 18px; }
.sgbjp-arrangement-section__top { align-items: center; border-bottom: 1px solid #e4edf2; display: flex; gap: 16px; justify-content: space-between; margin-bottom: 16px; padding-bottom: 12px; }
.sgbjp-arrangement-section__top > strong { color: var(--sgbjp-ink); font-size: 17px; }
.sgbjp-arrangement-section__controls,
.sgbjp-arrangement-line__controls { display: flex; flex-wrap: wrap; gap: 6px; }
.sgbjp-arrangement-control { background: #f2f6f8; border: 1px solid #c7d6df; border-radius: 8px; color: #294a61; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; padding: 6px 9px; }
.sgbjp-arrangement-control:hover { background: #e6f0f5; border-color: #8fb4c7; }
.sgbjp-arrangement-section__fields { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sgbjp-arrangement-section__fields label { display: block; }
.sgbjp-arrangement-section__fields label > span,
.sgbjp-arrangement-line label > span { color: #385269; display: block; font-size: 12px; font-weight: 800; margin-bottom: 5px; }
.sgbjp-arrangement-section select,
.sgbjp-arrangement-section input[type="text"],
.sgbjp-arrangement-line textarea { background: #fff; border: 1px solid #b9ccd8; border-radius: 10px; box-sizing: border-box; color: var(--sgbjp-ink); font: inherit; padding: 10px 11px; width: 100%; }
.sgbjp-custom-style-field { grid-column: 1 / -1; }
.sgbjp-arrangement-lines-editor { display: grid; gap: 10px; margin-top: 16px; }
.sgbjp-arrangement-line { align-items: end; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) auto; }
.sgbjp-arrangement-line textarea { line-height: 1.45; min-height: 58px; resize: vertical; }
.sgbjp-add-line { margin-top: 12px !important; }
.sgbjp-aggregate { background: #142f46 !important; border: 0 !important; border-radius: 16px !important; color: #fff; margin-top: 20px; padding: 20px !important; }
.sgbjp-aggregate__heading { align-items: flex-start; display: flex; gap: 18px; justify-content: space-between; }
.sgbjp-aggregate h5 { color: #fff !important; font-size: 19px !important; margin: 4px 0 0 !important; }
.sgbjp-aggregate > p { color: #c8d9e5; font-size: 12px; margin: 8px 0 14px; }
.sgbjp-aggregate pre { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 12px; color: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.65; margin: 14px 0 0; overflow-x: auto; padding: 15px; white-space: pre-wrap; }
.sgbjp-copy-prompt { flex: 0 0 auto; }
.sgbjp-arrangement-readonly > section:not(.sgbjp-aggregate) { background: #fff; border: 1px solid #dde8ee; border-radius: 13px; padding: 16px; }
.sgbjp-arrangement-label { align-items: baseline; display: flex; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 11px; }
.sgbjp-arrangement-label strong { color: var(--sgbjp-ink); font-size: 15px; text-transform: uppercase; }
.sgbjp-arrangement-label span { color: var(--sgbjp-blue); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.sgbjp-arrangement-lines p { line-height: 1.55; margin: 6px 0; }
.sgbjp-change-preview { background: #fff; border: 1px solid #d7e5ec; border-radius: 14px; margin-top: 22px; padding: 18px; }
.sgbjp-change-preview h5,
.sgbjp-submitted-changes h5 { color: var(--sgbjp-ink); font-size: 17px; margin: 0 0 5px; }
.sgbjp-change-preview > p { color: var(--sgbjp-muted); font-size: 12px; margin: 0 0 14px; }
.sgbjp-inline-diff + .sgbjp-inline-diff { border-top: 1px solid #e5edf2; margin-top: 14px; padding-top: 14px; }
.sgbjp-inline-diff > strong { display: block; font-size: 13px; margin-bottom: 7px; }
.sgbjp-inline-diff > div { line-height: 1.65; white-space: pre-wrap; }
.sgbjp-inline-diff ins,
.sgbjp-comparison ins { background: #dcfce7; color: #166534; text-decoration: none; }
.sgbjp-inline-diff del,
.sgbjp-comparison del { background: #fee2e2; color: #991b1b; }
.sgbjp-review__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.sgbjp-button--approve { background: #167044; color: #fff !important; }
.sgbjp-button--approve:hover { background: #105b36; }
.sgbjp-button--changes { background: var(--sgbjp-blue); color: #fff !important; }
.sgbjp-button--changes:disabled { background: #9fb1bd; cursor: not-allowed; opacity: .72; transform: none; }
.sgbjp-review__assurance { color: var(--sgbjp-muted); font-size: 12px; line-height: 1.5; margin: 14px 0 0; }
.sgbjp-review-confirmation { background: #fff7df; border-left: 4px solid #e9aa3c; border-radius: 0 12px 12px 0; margin-top: 22px; padding: 16px 18px; }
.sgbjp-review-confirmation--approved { background: #eaf9f1; border-left-color: #1f9d61; }
.sgbjp-review-confirmation strong,
.sgbjp-review-confirmation span { display: block; }
.sgbjp-review-confirmation span { color: var(--sgbjp-muted); font-size: 12px; margin-top: 3px; }
.sgbjp-review-confirmation p { margin: 8px 0 0; }
.sgbjp-review-readonly,
.sgbjp-submitted-changes { display: grid; gap: 14px; margin-top: 20px; }
.sgbjp-review-readonly section,
.sgbjp-submitted-changes > section { background: #fff; border: 1px solid #dde8ee; border-radius: 13px; padding: 16px; }
.sgbjp-review-readonly h5,
.sgbjp-submitted-changes h6 { color: var(--sgbjp-ink); font-size: 14px; margin: 0 0 9px; }
.sgbjp-review-readonly section > div { line-height: 1.65; white-space: normal; }
.sgbjp-comparison { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sgbjp-comparison > div > span { color: var(--sgbjp-muted); display: block; font-size: 11px; font-weight: 800; margin-bottom: 5px; text-transform: uppercase; }
.sgbjp-comparison del,
.sgbjp-comparison ins { border-radius: 8px; display: block; line-height: 1.55; padding: 11px; white-space: normal; }
.sgbjp-comparison pre { color: inherit; font: inherit; margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.sgbjp-files { border: 1px solid #dce8ef; border-radius: 18px; margin-top: 26px; overflow: hidden; }
.sgbjp-file { align-items: center; display: flex; gap: 20px; justify-content: space-between; padding: 16px 18px; }
.sgbjp-file + .sgbjp-file { border-top: 1px solid #e5edf2; }
.sgbjp-file strong { display: block; font-size: 16px; line-height: 1.35; }
.sgbjp-file span { color: var(--sgbjp-muted); display: block; font-size: 12px; margin-top: 4px; text-transform: uppercase; }
.sgbjp-button { align-items: center; border: 0; border-radius: 999px; cursor: pointer; display: inline-flex; font-size: 14px; font-weight: 800; justify-content: center; line-height: 1.2; min-height: 44px; padding: 12px 19px; text-decoration: none !important; transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.sgbjp-button:hover { transform: translateY(-1px); }
.sgbjp-button--primary,
.sgbjp-button--download { background: var(--sgbjp-blue); color: #fff !important; }
.sgbjp-button--primary:hover,
.sgbjp-button--download:hover { background: var(--sgbjp-blue-dark); box-shadow: 0 8px 20px rgba(36, 116, 167, .2); }
.sgbjp-pending { background: var(--sgbjp-cloud); border-radius: 16px; display: grid; gap: 5px; margin-top: 26px; padding: 18px; }
.sgbjp-pending span { color: var(--sgbjp-muted); }
.sgbjp-audio-addon { align-items: center; background: linear-gradient(135deg, #fff9e8 0%, #f5fbff 100%); border: 2px solid var(--sgbjp-gold); border-radius: 20px; display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr) auto; margin-top: 28px; padding: clamp(22px, 4vw, 34px); }
.sgbjp-audio-addon__content { min-width: 0; }
.sgbjp-audio-addon .sgbjp-card__label { color: #8a5b08; }
.sgbjp-audio-addon h4 { color: var(--sgbjp-ink); font-size: clamp(20px, 3vw, 27px); margin: 6px 0 8px; }
.sgbjp-audio-addon p { color: var(--sgbjp-muted); line-height: 1.55; margin: 8px 0 0; }
.sgbjp-audio-addon__source { background: #fff3c9; border-radius: 10px; color: #694500 !important; display: inline-block; padding: 8px 11px; }
.sgbjp-audio-addon ul { color: #385269; display: grid; gap: 6px; margin: 14px 0 0; padding-left: 20px; }
.sgbjp-audio-addon__scope { font-size: 12px; }
.sgbjp-audio-addon__action { margin: 0; }
.sgbjp-button--audio-addon { background: var(--sgbjp-blue); color: #fff !important; white-space: nowrap; }
.sgbjp-button--audio-addon:hover { background: var(--sgbjp-blue-dark); box-shadow: 0 8px 20px rgba(36, 116, 167, .2); }
.sgbjp-upgrade { align-items: center; background: linear-gradient(135deg, #17344e 0%, #245f83 100%); border-radius: 20px; color: #fff; display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr) auto; margin-top: 28px; padding: clamp(22px, 4vw, 34px); }
.sgbjp-upgrade__content { min-width: 0; }
.sgbjp-upgrade .sgbjp-card__label { color: #9fd6f4; }
.sgbjp-upgrade h4 { color: #fff; font-size: clamp(20px, 3vw, 27px); margin: 6px 0 5px; }
.sgbjp-upgrade p { color: #d7e8f1; margin: 0; }
.sgbjp-upgrade form { margin: 0; }
.sgbjp-upgrade__action { align-self: center; }
.sgbjp-button--upgrade { background: var(--sgbjp-gold); color: #1d2d38 !important; }
.sgbjp-button--upgrade:hover { background: #f2bc5c; box-shadow: 0 8px 20px rgba(0, 0, 0, .2); }
.sgbjp-packages { border-top: 1px solid #dce8ef; margin-top: 30px; padding-top: 28px; }
.sgbjp-packages__heading { max-width: 720px; }
.sgbjp-packages__heading h4 { color: var(--sgbjp-ink); font-size: clamp(20px, 3vw, 27px); margin: 6px 0 7px; }
.sgbjp-packages__heading p { color: var(--sgbjp-muted); line-height: 1.55; margin: 0; }
.sgbjp-package-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 18px; }
.sgbjp-package { background: #f8fbfd; border: 1px solid #dce8ef; border-radius: 16px; display: flex; flex-direction: column; padding: 18px; }
.sgbjp-package h5 { color: var(--sgbjp-ink); font-size: 18px; margin: 0 0 8px; }
.sgbjp-package__description { color: var(--sgbjp-muted); font-size: 14px; line-height: 1.5; }
.sgbjp-package__description p { margin: 0; }
.sgbjp-package__bottom { align-items: center; display: flex; gap: 12px; justify-content: space-between; margin-top: auto; padding-top: 18px; }
.sgbjp-package__bottom > strong { color: var(--sgbjp-ink); font-size: 18px; }
.sgbjp-package__bottom form { margin: 0; }
.sgbjp-button--package { background: var(--sgbjp-blue); color: #fff !important; }
.sgbjp-video-examples { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 170px)); margin-top: 20px; }
.sgbjp-video-example { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); border-radius: 13px; color: #fff !important; display: block; overflow: hidden; padding: 7px; text-decoration: none !important; transition: background-color .18s ease, transform .18s ease; }
.sgbjp-video-example:hover { background: rgba(255, 255, 255, .17); transform: translateY(-1px); }
.sgbjp-video-example:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.sgbjp-video-example__thumb { aspect-ratio: 16 / 9; background: #10283b; border-radius: 9px; display: block; overflow: hidden; position: relative; }
.sgbjp-video-example__thumb img { display: block; height: 100%; object-fit: cover; width: 100%; }
.sgbjp-video-example__thumb span { align-items: center; background: rgba(0, 0, 0, .72); border-radius: 999px; display: flex; font-size: 15px; height: 36px; justify-content: center; left: 50%; padding-left: 2px; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 36px; }
.sgbjp-video-example strong { display: block; font-size: 13px; line-height: 1.25; margin: 8px 4px 2px; }
.sgbjp-video-example small { color: #bfe2f5; display: block; font-size: 11px; margin: 0 4px 3px; }
.sgbjp-video-modal { background: transparent; border: 0; height: 100%; margin: 0; max-height: none; max-width: none; padding: 0; width: 100%; }
.sgbjp-video-modal::backdrop { background: rgba(8, 20, 31, .78); }
.sgbjp-video-modal__panel { background: #0f2232; border: 1px solid rgba(255, 255, 255, .22); border-radius: 18px; box-shadow: 0 22px 80px rgba(0, 0, 0, .5); left: 50%; max-width: 860px; padding: 48px 16px 16px; position: absolute; top: 50%; transform: translate(-50%, -50%); width: min(92vw, 860px); }
.sgbjp-video-modal__frame { aspect-ratio: 16 / 9; background: #000; border-radius: 10px; overflow: hidden; }
.sgbjp-video-modal__frame iframe { border: 0; display: block; height: 100%; width: 100%; }
.sgbjp-video-modal__close { align-items: center; background: #fff; border: 0; border-radius: 999px; color: #17344e; cursor: pointer; display: flex; font-size: 24px; font-weight: 700; height: 34px; justify-content: center; line-height: 1; position: absolute; right: 16px; top: 9px; width: 34px; }
.sgbjp-card__footer { margin-top: 22px; text-align: center; }
.sgbjp-support { background: transparent; border: 0; color: var(--sgbjp-blue); cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 700; margin: 0; padding: 0; text-decoration: underline; text-underline-offset: 2px; }
.sgbjp-support:hover { color: var(--sgbjp-blue-dark); }
.sgbjp-support:focus-visible { outline: 3px solid rgba(36, 116, 167, .32); outline-offset: 4px; }
.sgbjp-empty,
.sgbjp-notice { background: #fff; border: 1px solid #dce8ef; border-radius: 22px; box-shadow: 0 12px 38px rgba(24, 50, 74, .07); margin: 0 auto; max-width: 680px; padding: clamp(26px, 5vw, 48px); text-align: center; }
.sgbjp-empty h2,
.sgbjp-empty h3 { color: var(--sgbjp-ink); margin: 8px 0 12px; }
.sgbjp-empty p { color: var(--sgbjp-muted); line-height: 1.6; margin: 0 0 22px; }
.sgbjp-notice--error { border-color: #efc2c2; color: #8f2525; }
.sgbjp-notice--success { border-color: #a7dfbf; color: #166534; margin-bottom: 24px; padding: 16px 20px; }

/* Last-resort visual guard for the legacy consumer CTA; PHP removes it on portal requests. */
.sgbjp-shell div[style*="background:#FDF8F3"] { display: none !important; }

@media (max-width: 680px) {
  .sgbjp-card__top { align-items: stretch; flex-direction: column; }
	.sgbjp-review__heading { align-items: stretch; flex-direction: column; }
	.sgbjp-review__status { align-self: flex-start; }
	.sgbjp-comparison { grid-template-columns: 1fr; }
	.sgbjp-arrangement-toolbar,
	.sgbjp-arrangement-section__top,
	.sgbjp-aggregate__heading { align-items: stretch; flex-direction: column; }
	.sgbjp-arrangement-section__fields { grid-template-columns: 1fr; }
	.sgbjp-custom-style-field { grid-column: auto; }
	.sgbjp-arrangement-line { align-items: stretch; grid-template-columns: 1fr; }
  .sgbjp-upgrade { align-items: stretch; grid-template-columns: 1fr; }
  .sgbjp-audio-addon { align-items: stretch; grid-template-columns: 1fr; }
  .sgbjp-status { align-self: flex-start; }
  .sgbjp-file { align-items: stretch; flex-direction: column; }
  .sgbjp-button--download,
  .sgbjp-button--upgrade,
  .sgbjp-button--audio-addon { width: 100%; }
	.sgbjp-package__bottom { align-items: stretch; flex-direction: column; }
	.sgbjp-button--package { width: 100%; }
}

@media (max-width: 430px) {
  .sgbjp-video-examples { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .sgbjp-button { transition: none; }
  .sgbjp-button:hover { transform: none; }
}