/* CORE-10.2 shared production flow templates. These are neutral shared templates, not a real PDF tool. */
.ept-production-flow {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ept-production-flow__intro {
  align-items: flex-start;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.ept-production-flow__intro p {
  margin-bottom: 0;
}

.ept-flow-preview-grid {
  display: grid;
  gap: 14px;
}

.ept-flow-template {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid var(--ept-border);
  border-radius: 24px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
  overflow: hidden;
}

.ept-flow-template__bar {
  align-items: center;
  border-bottom: 1px solid var(--ept-border);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 12px 14px;
}

.ept-flow-template__brand {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.ept-flow-template__icon {
  align-items: center;
  background: linear-gradient(135deg, #2f6df6 0%, #1f4ed8 100%);
  border-radius: 12px;
  color: #fff !important;
  display: inline-flex;
  flex: 0 0 34px;
  font-size: .78rem;
  font-weight: 900;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.ept-flow-template__name {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ept-flow-template__name strong {
  color: var(--ept-text) !important;
  font-size: .95rem;
  line-height: 1.15;
}

.ept-flow-template__name span {
  color: var(--ept-muted) !important;
  font-size: .76rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ept-flow-template__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.ept-flow-start {
  align-items: center;
  background:
    radial-gradient(circle at 50% 22%, rgba(47, 109, 246, .14), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(6, 182, 212, .10), transparent 42%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 340px;
  padding: 36px 24px;
  text-align: center;
}

.ept-flow-start__hero-icon {
  align-items: center;
  background: linear-gradient(135deg, #4385ff, #1d4ed8);
  border-radius: 22px;
  box-shadow: 0 26px 70px rgba(37, 99, 235, .24);
  color: #fff !important;
  display: inline-flex;
  font-size: 1.3rem;
  font-weight: 900;
  height: 82px;
  justify-content: center;
  margin-bottom: 18px;
  position: relative;
  width: 82px;
}

.ept-flow-start__hero-icon::after {
  background: #fff;
  border: 1px solid #dbeafe;
  border-radius: 999px;
  bottom: -8px;
  color: #1d4ed8;
  content: attr(data-ept-mini);
  font-size: .68rem;
  font-weight: 900;
  min-width: 32px;
  padding: 4px 7px;
  position: absolute;
  right: -9px;
}

.ept-flow-start h3 {
  color: var(--ept-text) !important;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  letter-spacing: -.04em;
  line-height: 1.05;
  margin: 10px 0 10px;
}

.ept-flow-start p {
  margin: 0 auto 22px;
  max-width: 640px;
}

.ept-flow-benefits {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 26px;
  max-width: 760px;
  width: 100%;
}

.ept-flow-benefit {
  align-items: center;
  background: rgba(255, 255, 255, .92);
  border: 1px solid #d9e6fb;
  border-radius: 16px;
  display: flex;
  gap: 10px;
  padding: 13px 14px;
  text-align: left;
}

.ept-flow-benefit b {
  color: var(--ept-text) !important;
  display: block;
  font-size: .86rem;
}

.ept-flow-benefit span {
  color: var(--ept-muted) !important;
  display: block;
  font-size: .74rem;
}

.ept-flow-benefit__dot {
  align-items: center;
  background: #eaf1ff;
  border-radius: 10px;
  color: #1d4ed8 !important;
  display: inline-flex;
  flex: 0 0 26px;
  font-size: .72rem;
  font-weight: 900;
  height: 26px;
  justify-content: center;
  width: 26px;
}

.ept-flow-workspace {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 310px);
  padding: 14px;
}

.ept-flow-workspace__main,
.ept-flow-workspace__panel,
.ept-flow-result__body {
  background: #f8fbff;
  border: 1px solid var(--ept-border);
  border-radius: 18px;
  padding: 14px;
}

.ept-flow-workspace__toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  margin-bottom: 12px;
}

.ept-flow-workspace__canvas {
  align-items: center;
  background: linear-gradient(180deg, #eef6ff, #f8fbff);
  border: 1px solid #d7e3f2;
  border-radius: 16px;
  display: flex;
  justify-content: center;
  min-height: 300px;
  padding: 22px;
}

.ept-flow-paper {
  background: #fff;
  border: 1px solid #dbe2ea;
  border-radius: 10px;
  box-shadow: 0 20px 40px rgba(15, 23, 42, .16);
  display: grid;
  gap: 12px;
  height: 260px;
  padding: 30px 24px;
  width: 190px;
}

.ept-flow-paper__line {
  background: #dbeafe;
  border-radius: 999px;
  height: 7px;
}

.ept-flow-paper__line:nth-child(2) { width: 78%; }
.ept-flow-paper__line:nth-child(3) { width: 92%; }
.ept-flow-paper__line:nth-child(4) { width: 66%; }
.ept-flow-paper__line:nth-child(5) { width: 86%; }

.ept-flow-paper__mark {
  align-self: end;
  color: var(--ept-muted) !important;
  font-size: .66rem;
  font-weight: 800;
  justify-self: center;
}

.ept-flow-page-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.ept-flow-page-dot {
  align-items: center;
  background: #fff;
  border: 1px solid #d6e3f5;
  border-radius: 999px;
  color: #1d4ed8 !important;
  display: inline-flex;
  font-size: .72rem;
  font-weight: 900;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.ept-flow-page-dot.is-active {
  background: #1d4ed8;
  color: #fff !important;
}

.ept-flow-workspace__panel h4,
.ept-flow-result__summary h4 {
  margin: 0 0 8px;
}

.ept-flow-control-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.ept-flow-control-list div {
  background: #fff;
  border: 1px solid var(--ept-border);
  border-radius: 12px;
  display: grid;
  gap: 4px;
  padding: 10px;
}

.ept-flow-control-list strong,
.ept-flow-result-stat strong {
  color: var(--ept-text) !important;
  font-size: .78rem;
}

.ept-flow-control-list span,
.ept-flow-result-stat span {
  color: var(--ept-muted) !important;
  font-size: .72rem;
}

.ept-flow-result {
  padding: 14px;
}

.ept-flow-result__body {
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.ept-flow-result__ready {
  align-items: flex-start;
  display: flex;
  gap: 14px;
  margin-bottom: 16px;
}

.ept-flow-result__check {
  align-items: center;
  background: #22c55e;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(34, 197, 94, .22);
  color: #fff !important;
  display: inline-flex;
  flex: 0 0 44px;
  font-size: 1.15rem;
  font-weight: 900;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.ept-flow-result__ready h3 {
  font-size: clamp(1.55rem, 2.5vw, 2.1rem);
  letter-spacing: -.04em;
  margin: 2px 0 4px;
}

.ept-flow-progress {
  background: #dbeafe;
  border-radius: 999px;
  height: 10px;
  margin: 8px 0 18px;
  overflow: hidden;
}

.ept-flow-progress span {
  background: linear-gradient(90deg, #2563eb, #22d3ee);
  display: block;
  height: 100%;
  width: 100%;
}

.ept-flow-result__summary {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ept-flow-result-stat {
  background: #fff;
  border: 1px solid #d7e3f2;
  border-radius: 12px;
  min-height: 72px;
  padding: 10px;
}

.ept-flow-result__download {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  margin-top: 16px;
}

.ept-flow-template-contract {
  background: #f8fbff;
  border: 1px dashed #bfd3ef;
  border-radius: 16px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 12px;
}

.ept-flow-template-contract div {
  background: #fff;
  border: 1px solid var(--ept-border);
  border-radius: 12px;
  padding: 10px;
}

.ept-flow-template-contract strong,
.ept-flow-template-contract span {
  display: block;
}

.ept-flow-template-contract span {
  color: var(--ept-muted) !important;
  font-size: .74rem;
  margin-top: 4px;
}

@media (max-width: 960px) {
  .ept-flow-workspace,
  .ept-flow-result__summary,
  .ept-flow-template-contract {
    grid-template-columns: 1fr;
  }

  .ept-flow-benefits {
    grid-template-columns: 1fr;
  }
}

/* CORE-10.2 active production surface state. */
.ept-production-file-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--ept-border);
  border-radius: 14px;
  background: var(--ept-surface);
  padding: 10px 12px;
  margin: 10px 0;
}

.ept-production-file-strip strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ept-production-file-strip span {
  color: var(--ept-muted) !important;
  font-size: 0.85rem;
  text-align: right;
}

.ept-production-flow[data-ept-real-surface] .ept-flow-template[hidden],
.ept-flow-template[hidden] {
  display: none !important;
}

@media (max-width: 720px) {
  .ept-production-file-strip {
    align-items: flex-start;
    flex-direction: column;
  }
  .ept-production-file-strip span {
    text-align: left;
  }
}

/* CORE-10.2 production surface real canvas preview. */
.ept-bench .ept-flow-workspace__canvas {
  min-height: 380px;
}

.ept-bench .ept-flow-paper.has-real-canvas,
.ept-bench .ept-flow-paper.is-rendering,
.ept-bench .ept-flow-paper.is-render-error {
  display: block;
  max-height: 100%;
  overflow: hidden;
  padding: 0;
}

.ept-bench .ept-flow-paper.has-real-canvas .ept-flow-paper__placeholder,
.ept-bench .ept-flow-paper__placeholder[hidden] {
  display: none !important;
}

.ept-bench .ept-flow-paper.is-rendering .ept-flow-paper__placeholder,
.ept-bench .ept-flow-paper.is-render-error .ept-flow-paper__placeholder {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  padding: 18px;
  text-align: center;
}

.ept-bench .ept-flow-paper.is-rendering .ept-flow-paper__placeholder::after,
.ept-bench .ept-flow-paper.is-render-error .ept-flow-paper__placeholder::after {
  color: var(--ept-muted) !important;
  content: attr(data-render-message);
  font-size: .82rem;
  font-weight: 800;
}

.ept-bench .ept-flow-page-dot[data-ept-production-page] {
  cursor: pointer;
}

.ept-bench .ept-flow-paper__placeholder {
  display: grid;
  gap: 12px;
  height: 100%;
}

/* DESIGN-2 — Shared Start Page final design lock.
 * Matches the first uploaded plugin's production Start page. The layout is
 * shared; future tools only replace content via the tool config contract.
 */
.ept-bench {
  --ept-design-stage: "DESIGN-2 shared-start-page-final-design";
}

.ept-flow-template--start.ept-start-final {
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

.ept-start-final .ept-flow-start {
  align-items: center;
  background: var(--ept-gradient-start);
  border: 1px solid var(--ept-border-blue);
  border-radius: var(--ept-radius-app);
  box-shadow: var(--ept-shadow-workspace);
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  min-height: var(--ept-start-min-height);
  overflow: hidden;
  padding: var(--ept-start-padding-y) var(--ept-start-padding-x);
  position: relative;
  text-align: center;
  width: min(100%, var(--ept-width-start));
}

.ept-start-final .ept-flow-start::before {
  background: radial-gradient(circle at 50% 0%, rgba(37, 99, 235, .10), transparent 58%);
  border: 1px solid rgba(191, 219, 254, .50);
  border-radius: 999px;
  content: "";
  height: 154px;
  left: 50%;
  position: absolute;
  top: 16px;
  transform: translateX(-50%);
  width: min(460px, 66%);
  z-index: 0;
}

.ept-flow-start__orbital {
  align-items: center;
  display: inline-flex;
  height: var(--ept-start-hero-orbit);
  justify-content: center;
  margin: 0 0 20px;
  position: relative;
  width: min(360px, 74vw);
  z-index: 1;
}

.ept-flow-start__sheet {
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(219,234,254,.80));
  border: 1px solid rgba(191,219,254,.58);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(37,99,235,.10);
  height: 58px;
  position: absolute;
  top: 50%;
  width: 92px;
}

.ept-flow-start__sheet::before,
.ept-flow-start__sheet::after {
  background: rgba(59,130,246,.18);
  border-radius: 999px;
  content: "";
  height: 6px;
  left: 18px;
  position: absolute;
  right: 18px;
  top: 18px;
}

.ept-flow-start__sheet::after {
  opacity: .66;
  top: 32px;
  right: 34px;
}

.ept-flow-start__sheet--left {
  transform: translate(-55px, -50%) rotate(-10deg);
}

.ept-flow-start__sheet--right {
  transform: translate(55px, -50%) rotate(10deg);
}

.ept-start-final .ept-flow-start__hero-icon {
  background: var(--ept-gradient-button);
  border-radius: var(--ept-start-hero-radius);
  box-shadow: var(--ept-shadow-button);
  color: #fff !important;
  display: inline-flex;
  font-size: 1.45rem;
  font-weight: 950;
  height: var(--ept-start-hero-icon);
  letter-spacing: -.035em;
  margin: 0;
  position: relative;
  width: var(--ept-start-hero-icon);
  z-index: 2;
}

.ept-start-final .ept-flow-start__hero-icon::after {
  background: #fff;
  border: 1px solid #dbeafe;
  border-radius: 16px;
  bottom: -9px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
  color: var(--ept-primary-dark) !important;
  content: attr(data-ept-mini);
  font-size: .72rem;
  font-weight: 950;
  min-width: 38px;
  padding: 7px 8px;
  position: absolute;
  right: -12px;
}

.ept-start-local-pill {
  align-items: center;
  background: rgba(239, 246, 255, .92);
  border: 1px solid rgba(191, 219, 254, .96);
  border-radius: var(--ept-radius-pill);
  color: var(--ept-primary-dark) !important;
  display: inline-flex;
  font-size: .76rem;
  font-weight: 950;
  gap: 7px;
  letter-spacing: .04em;
  line-height: 1;
  margin: 0 0 22px;
  padding: 12px 17px;
  position: relative;
  text-transform: uppercase;
  z-index: 1;
}

.ept-start-local-pill span {
  background: var(--ept-green);
  border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, .10);
  display: inline-flex;
  height: 8px;
  width: 8px;
}

.ept-start-final .ept-flow-start h3 {
  color: var(--ept-text) !important;
  font-size: var(--ept-start-title-size);
  font-weight: var(--ept-title-weight);
  letter-spacing: var(--ept-start-title-tracking);
  line-height: .98;
  margin: 0 0 14px;
  max-width: 920px;
  position: relative;
  z-index: 1;
}

.ept-start-final .ept-flow-start p {
  color: var(--ept-muted-strong) !important;
  font-size: var(--ept-start-copy-size);
  font-weight: 650;
  line-height: 1.55;
  margin: 0 auto;
  max-width: 760px;
  position: relative;
  z-index: 1;
}

.ept-start-category-pill {
  background: var(--ept-primary-dark);
  border-radius: var(--ept-radius-pill);
  box-shadow: 0 10px 26px rgba(37, 99, 235, .20);
  color: #fff !important;
  display: inline-flex;
  font-size: .85rem;
  font-weight: 850;
  line-height: 1;
  margin: 10px 0 22px;
  padding: 5px 13px 6px;
  position: relative;
  z-index: 1;
}

.ept-start-final .ept-start-cta,
.ept-start-final button.ept-start-cta {
  align-items: center;
  background: var(--ept-gradient-button) !important;
  border: 0 !important;
  border-radius: var(--ept-radius-button-lg) !important;
  box-shadow: var(--ept-shadow-button);
  color: #fff !important;
  gap: 9px;
  min-height: 62px;
  min-width: 190px;
  padding: 16px 28px !important;
  position: relative;
  z-index: 1;
}

.ept-start-final .ept-start-cta:hover {
  box-shadow: var(--ept-shadow-button-hover);
  transform: translateY(-1px);
}

.ept-start-final .ept-start-cta span {
  align-items: center;
  background: rgba(255,255,255,.18);
  border-radius: 999px;
  color: #fff !important;
  display: inline-flex;
  height: 22px;
  justify-content: center;
  width: 22px;
}

.ept-start-final .ept-flow-benefits {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 36px auto 0;
  max-width: var(--ept-start-trust-width);
  position: relative;
  width: 100%;
  z-index: 1;
}

.ept-start-final .ept-flow-benefit {
  align-items: center;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(191, 219, 254, .78);
  border-radius: var(--ept-radius);
  box-shadow: 0 14px 30px rgba(15, 23, 42, .035);
  display: flex;
  gap: 13px;
  min-height: var(--ept-start-trust-height);
  padding: 16px 18px;
  text-align: left;
}

.ept-start-final .ept-flow-benefit b {
  color: var(--ept-text) !important;
  display: block;
  font-size: .90rem;
  font-weight: 950;
  letter-spacing: -.02em;
  margin-bottom: 4px;
}

.ept-start-final .ept-flow-benefit span {
  color: var(--ept-muted) !important;
  display: block;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.28;
}

.ept-start-final .ept-flow-benefit__dot {
  align-items: center;
  background: var(--ept-blue-soft);
  border-radius: 12px;
  color: var(--ept-primary-dark) !important;
  display: inline-flex;
  flex: 0 0 32px;
  font-size: .82rem;
  font-weight: 950;
  height: 32px;
  justify-content: center;
  width: 32px;
}

@media (max-width: 900px) {
  .ept-start-final .ept-flow-benefits {
    grid-template-columns: 1fr;
    max-width: 520px;
  }
  .ept-start-final .ept-flow-start {
    min-height: 520px;
  }
}

@media (max-width: 560px) {
  .ept-start-final .ept-flow-start {
    border-radius: 24px;
    padding: 34px 18px;
  }
  .ept-flow-start__orbital {
    height: 112px;
  }
  .ept-flow-start__sheet {
    transform-origin: center;
    width: 76px;
  }
  .ept-flow-start__sheet--left {
    transform: translate(-42px, -50%) rotate(-10deg);
  }
  .ept-flow-start__sheet--right {
    transform: translate(42px, -50%) rotate(10deg);
  }
  .ept-start-final .ept-flow-start__hero-icon {
    height: 72px;
    width: 72px;
  }
}


/* DESIGN-3 — Shared Workspace final design lock.
 * The Workspace frame mirrors the first uploaded Add Page Numbers plugin:
 * compact header actions, large real PDF canvas on the left, page navigation
 * and cards under the preview, and a stable right-side Tool Panel Slot.
 * The layout is shared; future tools only replace the right-panel content,
 * overlay renderer, export handler, and tool-specific summary values.
 */
.ept-bench {
  --ept-design-stage: "DESIGN-3 shared-workspace-final-design";
}

.ept-flow-template--workspace.ept-workspace-final {
  background: var(--ept-surface-solid);
  border: 1px solid var(--ept-border-blue);
  border-radius: var(--ept-radius-workspace);
  box-shadow: var(--ept-shadow-workspace);
  overflow: hidden;
}

.ept-workspace-final .ept-flow-template__bar {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border-bottom: 1px solid var(--ept-border-blue);
  gap: 14px;
  min-height: 72px;
  padding: 14px 18px;
}

.ept-workspace-final .ept-flow-template__icon {
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(37, 99, 235, .18);
  height: 42px;
  width: 42px;
}

.ept-workspace-final .ept-flow-template__name strong {
  color: var(--ept-text) !important;
  font-size: 1.05rem;
  font-weight: var(--ept-label-weight);
  letter-spacing: -.025em;
}

.ept-workspace-final .ept-flow-template__name span {
  font-size: .8rem;
  font-weight: 650;
}

.ept-workspace-final .ept-flow-template__actions .ept-button {
  min-height: 42px;
  padding-inline: 18px;
}

.ept-workspace-final .ept-flow-workspace {
  background: linear-gradient(180deg, rgba(248,251,255,.72), rgba(241,245,249,.88));
  display: grid;
  gap: var(--ept-workspace-gap);
  grid-template-columns: minmax(0, 1fr) minmax(330px, 390px);
  padding: var(--ept-workspace-padding);
}

.ept-workspace-final .ept-flow-workspace__main,
.ept-workspace-final .ept-flow-workspace__panel {
  background: rgba(255,255,255,.96);
  border: 1px solid var(--ept-border-blue);
  border-radius: var(--ept-radius-panel);
  box-shadow: var(--ept-shadow-card);
}

.ept-workspace-final .ept-flow-workspace__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px;
}

.ept-workspace-final .ept-flow-workspace__toolbar {
  align-items: center;
  background: rgba(248,251,255,.86);
  border: 1px solid var(--ept-border);
  border-radius: 18px;
  display: grid;
  gap: 10px;
  grid-template-columns: auto 1fr auto;
  margin: 0 0 12px;
  padding: 10px;
}

.ept-workspace-final .ept-flow-workspace__toolbar .ept-chip {
  justify-content: center;
  min-height: 32px;
  white-space: nowrap;
}

.ept-workspace-final .ept-production-file-strip {
  background: #fff;
  border: 1px solid var(--ept-border);
  border-radius: 16px;
  box-shadow: none;
  margin: 0 0 12px;
  min-height: 58px;
  padding: 12px 14px;
}

.ept-workspace-final .ept-production-file-strip strong {
  color: var(--ept-text) !important;
  font-size: .94rem;
  font-weight: 900;
}

.ept-workspace-final .ept-production-file-strip span {
  color: var(--ept-muted) !important;
  font-size: .82rem;
  font-weight: 700;
}

.ept-workspace-final .ept-flow-workspace__canvas {
  background: var(--ept-gradient-preview);
  border: 1px solid #d7e3f2;
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
  min-height: var(--ept-workspace-preview-min-height);
  overflow: auto;
  padding: clamp(18px, 3vw, 30px);
  position: relative;
}

.ept-workspace-final .ept-flow-workspace__canvas::before {
  background: linear-gradient(90deg, rgba(37,99,235,.10), rgba(103,232,249,.12));
  border-radius: 999px;
  content: "";
  height: 9px;
  left: 22px;
  opacity: .45;
  position: absolute;
  right: 22px;
  top: 16px;
}

.ept-workspace-final .ept-flow-paper {
  border-radius: 14px;
  box-shadow: var(--ept-shadow-pdf);
  max-height: calc(var(--ept-workspace-preview-min-height) - 78px);
}

.ept-workspace-final .ept-flow-paper.has-real-canvas {
  background: #fff;
  border: 1px solid rgba(148,163,184,.35);
}

.ept-workspace-final .ept-flow-page-row {
  align-items: center;
  border-top: 1px solid var(--ept-border);
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
}

.ept-workspace-final .ept-flow-page-row::before {
  color: var(--ept-muted) !important;
  content: "Pages";
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .04em;
  margin-right: 2px;
  text-transform: uppercase;
}

.ept-workspace-final .ept-flow-page-dot {
  border-color: var(--ept-border-blue);
  height: var(--ept-page-chip-size);
  transition: background .12s ease, border-color .12s ease, color .12s ease, transform .12s ease;
  width: var(--ept-page-chip-size);
}

.ept-workspace-final .ept-flow-page-dot:hover {
  border-color: var(--ept-primary);
  transform: translateY(-1px);
}

.ept-workspace-final .ept-flow-page-dot.is-active {
  background: var(--ept-primary);
  border-color: var(--ept-primary);
  box-shadow: 0 10px 22px rgba(37,99,235,.20);
}

.ept-workspace-final .ept-flow-workspace__panel {
  align-self: stretch;
  padding: 20px;
}

.ept-workspace-final .ept-flow-workspace__panel .ept-slot-label {
  margin-bottom: 14px;
}

.ept-workspace-final .ept-flow-workspace__panel h4 {
  color: var(--ept-text) !important;
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  font-weight: var(--ept-title-weight);
  letter-spacing: -.05em;
  line-height: 1.06;
  margin: 0 0 10px;
}

.ept-workspace-final .ept-flow-workspace__panel p {
  border-bottom: 1px solid var(--ept-border);
  color: var(--ept-muted) !important;
  font-size: .9rem;
  line-height: 1.55;
  margin: 0 0 14px;
  padding-bottom: 16px;
}

.ept-workspace-final .ept-flow-control-list {
  gap: 12px;
}

.ept-workspace-final .ept-flow-control-list div {
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
  border: 1px solid var(--ept-border);
  border-radius: 15px;
  min-height: 70px;
  padding: 12px 14px;
}

.ept-workspace-final .ept-flow-control-list strong {
  font-size: .82rem;
  font-weight: 950;
}

.ept-workspace-final .ept-flow-control-list span {
  font-size: .76rem;
  line-height: 1.35;
}

@media (max-width: 1120px) {
  .ept-workspace-final .ept-flow-workspace {
    grid-template-columns: 1fr;
  }
  .ept-workspace-final .ept-flow-workspace__panel {
    order: 2;
  }
}

@media (max-width: 720px) {
  .ept-workspace-final .ept-flow-template__bar,
  .ept-workspace-final .ept-flow-workspace__toolbar {
    align-items: stretch;
    display: flex;
    flex-direction: column;
  }
  .ept-workspace-final .ept-flow-template__actions,
  .ept-workspace-final .ept-flow-template__actions .ept-button {
    width: 100%;
  }
  .ept-workspace-final .ept-flow-workspace {
    padding: 12px;
  }
  .ept-workspace-final .ept-flow-workspace__canvas {
    min-height: 380px;
  }
}

/* DESIGN-4 — Shared Export / Result final design lock.
 * The shared result surface now follows the first plugin export panel:
 * success icon, ready title, progress at 100%, summary cards, download row,
 * edit settings, and start over. Tool modules only replace copy, summary values,
 * output filename, and PDF blob.
 */
.ept-bench {
  --ept-design-result-panel-radius: 22px;
  --ept-design-result-panel-shadow: 0 20px 70px rgba(15, 23, 42, .08);
  --ept-design-result-card-bg: rgba(248, 250, 252, .86);
  --ept-design-result-card-border: rgba(191, 219, 254, .72);
  --ept-design-result-progress-bg: rgba(148, 163, 184, .22);
  --ept-design-result-success: #16a34a;
  --ept-design-result-success-soft: #dcfce7;
  --ept-design-result-success-border: #bbf7d0;
  --ept-design-stage: "DESIGN-4 shared-export-result-final-design";
}

.ept-bench .ept-flow-template--result {
  max-width: min(100%, 1120px);
  margin-inline: auto;
}

.ept-bench .ept-flow-template--result .ept-flow-template__bar {
  margin-bottom: 12px;
}

.ept-bench .ept-flow-result {
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 28px;
  box-shadow: 0 24px 80px rgba(15, 23, 42, .075);
  padding: clamp(14px, 2vw, 22px);
}

.ept-bench .ept-flow-result__body {
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: var(--ept-design-result-panel-radius);
  box-shadow: var(--ept-design-result-panel-shadow);
  padding: clamp(18px, 3vw, 28px);
}

.ept-bench .ept-flow-result__ready {
  align-items: flex-start;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.ept-bench .ept-flow-result__check {
  align-items: center;
  background: linear-gradient(135deg, #16a34a, #86efac);
  border-radius: 18px;
  box-shadow: 0 16px 36px rgba(22, 163, 74, .22);
  color: #fff !important;
  display: inline-flex;
  font-size: 1.15rem;
  font-weight: 950;
  height: 54px;
  justify-content: center;
  width: 54px;
}

.ept-bench .ept-flow-result__ready h3 {
  color: var(--ept-text) !important;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 950;
  letter-spacing: -.055em;
  line-height: 1.05;
  margin: 8px 0 6px;
}

.ept-bench .ept-flow-result__ready p {
  color: var(--ept-muted) !important;
  font-size: 13px;
  line-height: 1.55;
  max-width: 700px;
}

.ept-bench .ept-flow-progress-wrap {
  display: grid;
  gap: 9px;
  margin: 0 0 18px;
}

.ept-bench .ept-flow-progress-top {
  align-items: center;
  color: #334155 !important;
  display: flex;
  font-size: 13px;
  font-weight: 850;
  gap: 12px;
  justify-content: space-between;
}

.ept-bench .ept-flow-progress {
  background: var(--ept-design-result-progress-bg);
  border-radius: 999px;
  height: 10px;
  margin: 0;
  overflow: hidden;
}

.ept-bench .ept-flow-progress span {
  background: linear-gradient(90deg, var(--ept-primary), #67e8f9);
  border-radius: inherit;
  display: block;
  height: 100%;
  width: 100%;
}

.ept-bench .ept-flow-result-heading {
  display: grid;
  gap: 3px;
  margin: 0 0 12px;
}

.ept-bench .ept-flow-result-heading strong {
  color: var(--ept-text) !important;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: -.02em;
}

.ept-bench .ept-flow-result-heading span {
  color: var(--ept-muted) !important;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.45;
}

.ept-bench .ept-flow-result__summary {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 18px;
}

.ept-bench .ept-flow-result-stat {
  align-content: center;
  background: var(--ept-design-result-card-bg);
  border: 1px solid var(--ept-design-result-card-border);
  border-radius: 18px;
  display: grid;
  gap: 4px;
  min-height: 68px;
  padding: 12px;
}

.ept-bench .ept-flow-result-stat strong {
  color: var(--ept-text) !important;
  display: block;
  font-size: 15px;
  font-weight: 950;
  letter-spacing: -.025em;
  line-height: 1.18;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

.ept-bench .ept-flow-result-stat span {
  color: var(--ept-muted) !important;
  display: block;
  font-size: 11.5px;
  font-weight: 750;
  line-height: 1.35;
}

.ept-bench .ept-flow-result-stat--wide {
  grid-column: span 2;
}

.ept-bench .ept-flow-result__download {
  align-items: center;
  background: #fff;
  border: 1px solid rgba(191, 219, 254, .72);
  border-radius: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-top: 0;
  padding: 12px;
}

.ept-bench .ept-flow-result__download strong {
  color: var(--ept-text) !important;
  display: block;
  font-size: 14px;
  font-weight: 950;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.ept-bench .ept-flow-result__download::before {
  color: var(--ept-muted) !important;
  content: "Saved as filename";
  display: block;
  flex: 0 0 100%;
  font-size: 11.5px;
  font-weight: 750;
  margin-bottom: -4px;
}

@media (max-width: 980px) {
  .ept-bench .ept-flow-result__summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .ept-bench .ept-flow-result__ready {
    grid-template-columns: 1fr;
  }

  .ept-bench .ept-flow-result__summary {
    grid-template-columns: 1fr;
  }

  .ept-bench .ept-flow-result-stat--wide {
    grid-column: auto;
  }

  .ept-bench .ept-flow-result__download,
  .ept-bench .ept-flow-result__download .ept-button {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }
}

/* DESIGN-8 — Shared Start exact family design parity.
 * This is the shared Start template lock. It is not scoped to Add Page Numbers;
 * any production tool using the shared Start surface inherits this layout, while
 * tool modules only provide icon, title, subtitle, CTA and optional trust copy.
 */
.ept-bench.ept-mode-production {
  --ept-width-start: 1120px;
  --ept-start-min-height: clamp(410px, 41vw, 560px);
  --ept-start-padding-y: clamp(42px, 5.4vw, 74px);
  --ept-start-padding-x: clamp(22px, 4.5vw, 58px);
  --ept-start-title-size: clamp(28px, 3vw, 42px);
  --ept-start-copy-size: clamp(15px, 1.3vw, 18px);
  --ept-start-trust-width: 760px;
  --ept-start-trust-height: 66px;
}

.ept-bench.ept-mode-production .ept-shell {
  width: min(var(--ept-width-start), calc(100% - 28px)) !important;
  max-width: min(100%, var(--ept-width-start)) !important;
  margin: var(--ept-shell-margin-y) auto !important;
  padding: clamp(22px, 3.2vw, 42px) !important;
  border: 1px solid rgba(191, 219, 254, 0.92) !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 50% -5%, rgba(37, 99, 235, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,251,255,.98) 100%) !important;
  box-shadow: 0 28px 90px rgba(15, 23, 42, 0.07) !important;
}

.ept-bench.ept-mode-production .ept-production-flow,
.ept-bench.ept-mode-production .ept-flow-template--start.ept-start-final {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.ept-bench.ept-mode-production .ept-flow-preview-grid {
  display: block !important;
  gap: 0 !important;
}

.ept-bench.ept-mode-production .ept-start-final .ept-flow-start {
  min-height: var(--ept-start-min-height) !important;
  padding: var(--ept-start-padding-y) var(--ept-start-padding-x) !important;
  border: 1px solid rgba(191, 219, 254, 0.72) !important;
  border-style: solid !important;
  border-radius: 32px !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(37, 99, 235, 0.12), transparent 30%),
    radial-gradient(circle at 50% 74%, rgba(34, 197, 94, 0.055), transparent 38%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
  box-shadow:
    0 28px 90px rgba(37, 99, 235, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
  overflow: hidden !important;
  position: relative !important;
}

.ept-bench.ept-mode-production .ept-start-final .ept-flow-start::before {
  width: min(460px, 66%) !important;
  height: 154px !important;
  left: 50% !important;
  top: 16px !important;
  transform: translateX(-50%) !important;
  border: 1px solid rgba(191, 219, 254, 0.50) !important;
  border-radius: 999px !important;
  background: radial-gradient(circle at 50% 0%, rgba(37, 99, 235, .10), transparent 58%) !important;
  filter: none !important;
}

.ept-bench.ept-mode-production .ept-flow-start__orbital {
  width: 156px !important;
  height: 118px !important;
  margin: 0 0 20px !important;
}

.ept-bench.ept-mode-production .ept-flow-start__sheet {
  width: 92px !important;
  height: 58px !important;
  top: 50% !important;
  border-radius: 18px !important;
  border: 1px solid rgba(191,219,254,.58) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(219,234,254,.80)) !important;
  box-shadow: 0 20px 60px rgba(37,99,235,.10) !important;
}

.ept-bench.ept-mode-production .ept-flow-start__sheet--left {
  left: auto !important;
  transform: translate(-55px, -50%) rotate(-10deg) !important;
}

.ept-bench.ept-mode-production .ept-flow-start__sheet--right {
  right: auto !important;
  top: 50% !important;
  width: 92px !important;
  height: 58px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(219,234,254,.80)) !important;
  opacity: 1 !important;
  box-shadow: 0 20px 60px rgba(37,99,235,.10) !important;
  transform: translate(55px, -50%) rotate(10deg) !important;
}

.ept-bench.ept-mode-production .ept-flow-start__sheet::before,
.ept-bench.ept-mode-production .ept-flow-start__sheet::after {
  left: 18px !important;
  right: 18px !important;
  top: 18px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: rgba(59,130,246,.18) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

.ept-bench.ept-mode-production .ept-flow-start__sheet::after {
  top: 32px !important;
  right: 34px !important;
  opacity: .66 !important;
}

.ept-bench.ept-mode-production .ept-start-final .ept-flow-start__hero-icon {
  width: 82px !important;
  height: 82px !important;
  border-radius: 24px !important;
  background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%) !important;
  color: #fff !important;
  font-size: 26px !important;
  font-weight: 950 !important;
  letter-spacing: -0.03em !important;
  box-shadow: 0 24px 58px rgba(37, 99, 235, 0.30) !important;
}

.ept-bench.ept-mode-production .ept-start-final .ept-flow-start__hero-icon::after {
  right: -9px !important;
  bottom: -8px !important;
  min-width: 34px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 8px !important;
  border-radius: 13px !important;
  background: #ffffff !important;
  border: 1px solid #dbeafe !important;
  color: #2563eb !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14) !important;
}

.ept-bench.ept-mode-production .ept-start-local-pill {
  margin: 0 0 22px !important;
  padding: 7px 12px !important;
  border: 1px solid rgba(191, 219, 254, 0.86) !important;
  border-radius: 999px !important;
  background: rgba(239, 246, 255, 0.88) !important;
  color: #1d4ed8 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
}

.ept-bench.ept-mode-production .ept-start-local-pill span {
  width: 7px !important;
  height: 7px !important;
}

.ept-bench.ept-mode-production .ept-start-final .ept-flow-start h3 {
  max-width: 760px !important;
  margin-top: 6px !important;
  margin-bottom: 10px !important;
  color: #0f172a !important;
  font-size: clamp(28px, 3vw, 42px) !important;
  font-weight: 950 !important;
  letter-spacing: -0.045em !important;
  word-spacing: 0.045em !important;
  line-height: 1.06 !important;
}

.ept-bench.ept-mode-production .ept-start-final .ept-flow-start p {
  max-width: 680px !important;
  margin-bottom: 22px !important;
  color: #64748b !important;
  font-size: clamp(15px, 1.3vw, 18px) !important;
  line-height: 1.58 !important;
  font-weight: 650 !important;
}

.ept-bench.ept-mode-production .ept-start-category-pill {
  display: none !important;
}

.ept-bench.ept-mode-production .ept-start-final .ept-start-cta,
.ept-bench.ept-mode-production .ept-start-final button.ept-start-cta {
  min-width: 202px !important;
  min-height: 60px !important;
  padding: 16px 28px !important;
  border-radius: 18px !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  box-shadow: 0 18px 42px rgba(37,99,235,.30) !important;
}

.ept-bench.ept-mode-production .ept-start-final .ept-flow-benefits {
  width: min(100%, 760px) !important;
  margin-top: 22px !important;
  gap: 12px !important;
}

.ept-bench.ept-mode-production .ept-start-final .ept-flow-benefit {
  min-height: 66px !important;
  grid-template-columns: 26px minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 10px !important;
  padding: 12px 14px !important;
  border-color: rgba(191, 219, 254, 0.66) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.05) !important;
  display: grid !important;
}

.ept-bench.ept-mode-production .ept-start-final .ept-flow-benefit__dot {
  width: 26px !important;
  height: 26px !important;
  border-radius: 10px !important;
  background: rgba(239, 246, 255, 0.92) !important;
  color: #1d4ed8 !important;
}

.ept-bench.ept-mode-production .ept-start-final .ept-flow-benefit b {
  font-size: 12.8px !important;
  font-weight: 950 !important;
  margin: 0 0 2px !important;
  letter-spacing: 0 !important;
}

.ept-bench.ept-mode-production .ept-start-final .ept-flow-benefit span {
  font-size: 11.6px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

@media (max-width: 760px) {
  .ept-bench.ept-mode-production .ept-start-final .ept-flow-start {
    min-height: 350px !important;
    padding: 32px 18px !important;
    border-radius: 26px !important;
  }
  .ept-bench.ept-mode-production .ept-start-final .ept-flow-benefits {
    grid-template-columns: 1fr !important;
    max-width: 430px !important;
  }
}

/* DESIGN-9 — Shared Workspace exact family design parity.
 * Mirrors the first uploaded plugin workspace: wider active shell, compact
 * topbar, large real PDF preview frame, page rail, file details card, and
 * right-side editor panel shell. This belongs to shared workspace, not APN.
 */
.ept-bench {
  --ept-design-stage: "DESIGN-9 shared-workspace-exact-family-design-parity";
}

.ept-bench[data-ept-context-type="tool"][data-ept-production-state="workspace"] .ept-shell,
.ept-bench[data-ept-context-type="tool"][data-ept-production-state="result"] .ept-shell {
  width: min(1500px, calc(100vw - 48px)) !important;
  max-width: min(1500px, calc(100vw - 48px)) !important;
  margin-top: 24px !important;
  padding: 24px !important;
  border-radius: 28px !important;
}

.ept-bench[data-ept-context-type="tool"][data-ept-production-state="workspace"] .ept-production-flow,
.ept-bench[data-ept-context-type="tool"][data-ept-production-state="result"] .ept-production-flow {
  padding: 0 !important;
  border-radius: 28px !important;
}

.ept-bench.ept-mode-production .ept-workspace-final.ept-flow-template {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.ept-bench.ept-mode-production .ept-workspace-topbar-family {
  align-items: center !important;
  display: flex !important;
  justify-content: space-between !important;
  gap: 18px !important;
  min-height: 72px !important;
  margin: 0 0 16px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(191, 219, 254, .72) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, .82) !important;
  box-shadow: 0 16px 50px rgba(15, 23, 42, .055) !important;
}

.ept-bench.ept-mode-production .ept-workspace-brand-family {
  min-width: 0 !important;
  gap: 12px !important;
}

.ept-bench.ept-mode-production .ept-workspace-topbar-family .ept-flow-template__icon {
  flex: 0 0 48px !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%) !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  box-shadow: 0 16px 36px rgba(37, 99, 235, .28) !important;
}

.ept-bench.ept-mode-production .ept-workspace-topbar-family .ept-flow-template__name {
  gap: 3px !important;
}

.ept-bench.ept-mode-production .ept-workspace-topbar-family .ept-flow-template__name strong {
  color: #0f172a !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.15 !important;
}

.ept-bench.ept-mode-production .ept-workspace-topbar-family .ept-flow-template__name span,
.ept-bench.ept-mode-production .ept-workspace-topbar-family .ept-flow-template__name em {
  color: #64748b !important;
  display: block !important;
  font-size: 12.5px !important;
  font-style: normal !important;
  font-weight: 680 !important;
  line-height: 1.35 !important;
  white-space: normal !important;
}

.ept-bench.ept-mode-production .ept-workspace-topbar-family .ept-flow-template__name em {
  color: #0f172a !important;
  font-size: 11.6px !important;
  font-weight: 850 !important;
}

.ept-bench.ept-mode-production .ept-workspace-actions-family {
  flex: 0 0 auto !important;
  gap: 9px !important;
}

.ept-bench.ept-mode-production .ept-workspace-actions-family .ept-button {
  min-height: 42px !important;
  border-radius: 14px !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  padding: 0 14px !important;
}

.ept-bench.ept-mode-production .ept-workspace-actions-family .ept-button--primary {
  min-width: 138px !important;
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important;
  box-shadow: 0 16px 36px rgba(37, 99, 235, .25) !important;
}

.ept-bench.ept-mode-production .ept-flow-workspace {
  display: grid !important;
  grid-template-columns: minmax(620px, 1.28fr) minmax(430px, .72fr) !important;
  gap: 18px !important;
  padding: 16px !important;
  border: 1px solid rgba(191, 219, 254, .72) !important;
  border-radius: 28px !important;
  background: rgba(255, 255, 255, .78) !important;
  box-shadow: 0 18px 58px rgba(15, 23, 42, .055) !important;
}

.ept-bench.ept-mode-production .ept-flow-workspace__main,
.ept-bench.ept-mode-production .ept-flow-workspace__panel {
  min-width: 0 !important;
  display: grid !important;
  align-content: start !important;
  gap: 12px !important;
  padding: 16px !important;
  border: 1px solid rgba(148, 163, 184, .16) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, .86) !important;
  box-shadow: none !important;
}

.ept-bench.ept-mode-production .ept-preview-toolbar-family {
  display: grid !important;
  grid-template-columns: minmax(145px, 1fr) 34px minmax(176px, max-content) minmax(138px, max-content) 34px auto !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 54px !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(147, 197, 253, .62) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 251, 255, .92)) !important;
  box-shadow: 0 12px 30px rgba(37, 99, 235, .045), inset 0 1px 0 rgba(255, 255, 255, .95) !important;
}

.ept-preview-toolbar-family__title {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
  padding-left: 2px !important;
}

.ept-preview-toolbar-family__title strong {
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.1 !important;
}

.ept-preview-toolbar-family__title span {
  color: #64748b !important;
  font-size: 10.8px !important;
  font-weight: 750 !important;
  line-height: 1.15 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.ept-preview-nav-family {
  align-items: center !important;
  appearance: none !important;
  background: #fff !important;
  border: 1px solid rgba(147, 197, 253, .62) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, .05) !important;
  color: #1d4ed8 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  height: 34px !important;
  justify-content: center !important;
  line-height: 1 !important;
  min-width: 34px !important;
  padding: 0 !important;
  width: 34px !important;
}

.ept-preview-jump-family,
.ept-preview-zoom-family {
  align-items: center !important;
  background: rgba(255, 255, 255, .96) !important;
  border: 1px solid rgba(191, 219, 254, .86) !important;
  border-radius: 13px !important;
  display: inline-flex !important;
  gap: 7px !important;
  min-height: 34px !important;
  padding: 4px 10px !important;
}

.ept-preview-jump-family span,
.ept-preview-zoom-family span {
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

.ept-preview-jump-family strong {
  color: #0f172a !important;
  font-size: 11.5px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

.ept-preview-zoom-family select {
  min-height: 24px !important;
  max-width: 96px !important;
  padding: 0 22px 0 8px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background-color: transparent !important;
  color: #0f172a !important;
  font-size: 11.3px !important;
  font-weight: 900 !important;
}

.ept-preview-badge-family {
  justify-self: end !important;
  min-height: 34px !important;
  align-items: center !important;
  display: inline-flex !important;
  padding: 0 12px !important;
  border: 1px solid rgba(34, 197, 94, .22) !important;
  border-radius: 999px !important;
  background: rgba(240, 253, 244, .86) !important;
  color: #15803d !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.ept-bench.ept-mode-production .ept-flow-workspace__canvas {
  align-items: center !important;
  justify-content: center !important;
  min-height: clamp(520px, 48vw, 690px) !important;
  padding: 18px 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(191, 219, 254, .66) !important;
  border-radius: 20px !important;
  background: radial-gradient(circle at 50% 12%, rgba(37, 99, 235, .10), transparent 34%), radial-gradient(circle at 10% 92%, rgba(14, 165, 233, .08), transparent 30%), linear-gradient(135deg, #f8fbff 0%, #ffffff 46%, #f1f5f9 100%) !important;
}

.ept-bench.ept-mode-production .ept-flow-paper {
  border-radius: 14px !important;
  box-shadow: 0 24px 64px rgba(15, 23, 42, .12) !important;
}

.ept-bench.ept-mode-production .ept-flow-paper.has-real-canvas {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.ept-bench.ept-mode-production .ept-flow-paper.has-real-canvas canvas {
  border-radius: 8px !important;
  box-shadow: 0 20px 54px rgba(15, 23, 42, .16) !important;
}

.ept-flow-page-section {
  align-items: center !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: space-between !important;
  padding: 2px 2px 0 !important;
}

.ept-flow-page-section > div:first-child {
  display: grid !important;
  gap: 1px !important;
}

.ept-flow-page-section strong {
  color: #0f172a !important;
  font-size: 12.5px !important;
  font-weight: 950 !important;
}

.ept-flow-page-section span,
.ept-flow-page-section em {
  color: #64748b !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 750 !important;
}

.ept-bench.ept-mode-production .ept-flow-page-row {
  gap: 8px !important;
  margin: 0 !important;
}

.ept-bench.ept-mode-production .ept-flow-page-dot {
  height: 30px !important;
  width: 30px !important;
  border-color: rgba(147, 197, 253, .70) !important;
  background: #fff !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, .045) !important;
  color: #1d4ed8 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

.ept-bench.ept-mode-production .ept-flow-page-dot.is-active {
  background: #2563eb !important;
  color: #fff !important;
}

.ept-production-file-details-family {
  display: grid !important;
  gap: 10px !important;
  margin-top: 2px !important;
}

.ept-production-file-details-family__head {
  align-items: center !important;
  display: flex !important;
  justify-content: space-between !important;
}

.ept-production-file-details-family__head strong {
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

.ept-production-file-details-family__head span {
  color: #1d4ed8 !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

.ept-production-file-details-family__grid {
  display: grid !important;
  gap: 10px !important;
  grid-template-columns: minmax(0, 1.3fr) minmax(130px, .7fr) minmax(120px, .6fr) !important;
}

.ept-production-file-details-family__grid div {
  min-height: 56px !important;
  display: grid !important;
  align-content: center !important;
  gap: 3px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(148, 163, 184, .16) !important;
  border-radius: 16px !important;
  background: rgba(248, 250, 252, .82) !important;
}

.ept-production-file-details-family__grid span {
  color: #64748b !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
}

.ept-production-file-details-family__grid strong {
  color: #0f172a !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  overflow-wrap: anywhere !important;
}

.ept-bench.ept-mode-production .ept-flow-workspace__panel {
  padding: 20px 20px 18px !important;
  border-color: rgba(147, 197, 253, .42) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(248, 251, 255, .92) 100%) !important;
  box-shadow: 0 18px 52px rgba(15, 23, 42, .045), inset 0 1px 0 rgba(255, 255, 255, .96) !important;
}

.ept-panel-head-family {
  margin-bottom: 12px !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid rgba(148, 163, 184, .16) !important;
}

.ept-panel-head-family small {
  width: fit-content !important;
  min-height: 24px !important;
  align-items: center !important;
  display: inline-flex !important;
  margin-bottom: 8px !important;
  padding: 0 9px !important;
  border: 1px solid rgba(147, 197, 253, .64) !important;
  border-radius: 999px !important;
  background: rgba(239, 246, 255, .82) !important;
  color: #1d4ed8 !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.ept-panel-head-family strong {
  display: block !important;
  margin: 0 0 4px !important;
  color: #0f172a !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  letter-spacing: -.035em !important;
  line-height: 1.1 !important;
}

.ept-panel-head-family span {
  color: #64748b !important;
  font-size: 12.4px !important;
  font-weight: 680 !important;
  line-height: 1.35 !important;
}

.ept-bench.ept-mode-production .ept-flow-workspace__panel .ept-apn-panel__header {
  display: none !important;
}

.ept-bench.ept-mode-production .ept-flow-workspace__panel .ept-apn-panel {
  gap: 0 !important;
}

.ept-bench.ept-mode-production .ept-flow-workspace__panel .ept-apn-grid {
  gap: 10px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.ept-bench.ept-mode-production .ept-flow-workspace__panel .ept-apn-field {
  gap: 6px !important;
}

.ept-bench.ept-mode-production .ept-flow-workspace__panel .ept-apn-field label {
  color: #334155 !important;
  font-size: 11.2px !important;
  font-weight: 900 !important;
  letter-spacing: -.006em !important;
  line-height: 1.15 !important;
}

.ept-bench.ept-mode-production .ept-flow-workspace__panel .ept-apn-field input,
.ept-bench.ept-mode-production .ept-flow-workspace__panel .ept-apn-field select,
.ept-bench.ept-mode-production .ept-flow-workspace__panel .ept-apn-color input[type="color"] {
  min-height: 42px !important;
  padding: 0 13px !important;
  border: 1px solid rgba(148, 163, 184, .22) !important;
  border-radius: 15px !important;
  background: linear-gradient(180deg, #fff 0%, #fbfdff 100%) !important;
  color: #0f172a !important;
  font-size: 12.7px !important;
  font-weight: 780 !important;
  box-shadow: 0 7px 18px rgba(15, 23, 42, .025), inset 0 1px 0 rgba(255, 255, 255, .94) !important;
}

.ept-bench.ept-mode-production .ept-flow-workspace__panel .ept-apn-color {
  grid-template-columns: 54px minmax(0, 1fr) !important;
}
.ept-bench.ept-mode-production .ept-flow-workspace__panel .ept-apn-color label {
  grid-column: 1 / -1 !important;
}
.ept-bench.ept-mode-production .ept-flow-workspace__panel .ept-apn-color input[type="color"] {
  grid-column: 1 !important;
  padding: 4px !important;
  width: 54px !important;
}
.ept-bench.ept-mode-production .ept-flow-workspace__panel .ept-apn-color [data-ept-apn-color-text] {
  grid-column: 2 !important;
  min-width: 0 !important;
  width: 100% !important;
}

.ept-bench.ept-mode-production .ept-flow-workspace__panel .ept-apn-summary > div,
.ept-bench.ept-mode-production .ept-flow-workspace__panel .ept-apn-help,
.ept-bench.ept-mode-production .ept-flow-control-list div {
  border-color: rgba(148, 163, 184, .16) !important;
  border-radius: 16px !important;
  background: rgba(248, 250, 252, .82) !important;
}

@media (max-width: 1180px) {
  .ept-bench.ept-mode-production .ept-flow-workspace {
    grid-template-columns: 1fr !important;
  }
  .ept-bench.ept-mode-production .ept-preview-toolbar-family {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
  }
  .ept-bench.ept-mode-production .ept-preview-zoom-family,
  .ept-bench.ept-mode-production .ept-preview-badge-family {
    justify-self: start !important;
  }
}

@media (max-width: 760px) {
  .ept-bench[data-ept-context-type="tool"][data-ept-production-state="workspace"] .ept-shell,
  .ept-bench[data-ept-context-type="tool"][data-ept-production-state="result"] .ept-shell {
    width: min(100% - 18px, 1500px) !important;
    max-width: calc(100% - 18px) !important;
    padding: 14px !important;
  }
  .ept-bench.ept-mode-production .ept-workspace-topbar-family,
  .ept-bench.ept-mode-production .ept-workspace-actions-family {
    align-items: stretch !important;
    flex-direction: column !important;
  }
  .ept-bench.ept-mode-production .ept-flow-workspace {
    padding: 10px !important;
    border-radius: 22px !important;
  }
  .ept-bench.ept-mode-production .ept-preview-toolbar-family,
  .ept-production-file-details-family__grid {
    grid-template-columns: 1fr !important;
  }
  .ept-bench.ept-mode-production .ept-flow-workspace__canvas {
    min-height: 390px !important;
  }
  .ept-bench.ept-mode-production .ept-flow-workspace__panel .ept-apn-grid,
  .ept-bench.ept-mode-production .ept-flow-workspace__panel .ept-apn-color {
    grid-template-columns: 1fr !important;
  }
}


/* DESIGN-9.1 preview toolbar alignment fix.
   Keeps the View / Fit page control and next navigation button on one clean
   baseline, matching the first-plugin compact preview toolbar. */
.ept-bench.ept-mode-production .ept-preview-toolbar-family {
  grid-template-columns: minmax(145px, 1fr) 34px minmax(150px, max-content) minmax(128px, max-content) 34px auto !important;
  align-items: center !important;
}

.ept-bench.ept-mode-production .ept-preview-toolbar-family > * {
  min-width: 0 !important;
  align-self: center !important;
}

.ept-bench.ept-mode-production .ept-preview-nav-family {
  height: 36px !important;
  min-height: 36px !important;
  width: 36px !important;
  min-width: 36px !important;
  line-height: 1 !important;
  transform: none !important;
}

.ept-bench.ept-mode-production .ept-preview-jump-family,
.ept-bench.ept-mode-production .ept-preview-zoom-family {
  height: 36px !important;
  min-height: 36px !important;
  align-items: center !important;
  align-self: center !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

.ept-bench.ept-mode-production .ept-preview-zoom-family {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 0 8px 0 11px !important;
  min-width: 128px !important;
  max-width: 140px !important;
  white-space: nowrap !important;
}

.ept-bench.ept-mode-production .ept-preview-zoom-family span,
.ept-bench.ept-mode-production .ept-preview-zoom-family select,
.ept-bench.ept-mode-production .ept-preview-jump-family span,
.ept-bench.ept-mode-production .ept-preview-jump-family strong {
  display: inline-flex !important;
  align-items: center !important;
  height: 100% !important;
  min-height: 0 !important;
  line-height: 1 !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

.ept-bench.ept-mode-production .ept-preview-zoom-family select {
  display: block !important;
  width: 82px !important;
  max-width: 82px !important;
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  line-height: 26px !important;
  padding: 0 18px 0 6px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  align-self: center !important;
  white-space: nowrap !important;
}

.ept-bench.ept-mode-production .ept-preview-badge-family {
  height: 36px !important;
  min-height: 36px !important;
  align-self: center !important;
}

@media (max-width: 920px) {
  .ept-bench.ept-mode-production .ept-preview-toolbar-family {
    grid-template-columns: 1fr 36px minmax(142px, max-content) minmax(126px, max-content) 36px !important;
  }

  .ept-bench.ept-mode-production .ept-preview-toolbar-family__title,
  .ept-bench.ept-mode-production .ept-preview-badge-family {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
  }
}

@media (max-width: 620px) {
  .ept-bench.ept-mode-production .ept-preview-toolbar-family {
    grid-template-columns: 1fr !important;
    justify-items: stretch !important;
  }

  .ept-bench.ept-mode-production .ept-preview-zoom-family,
  .ept-bench.ept-mode-production .ept-preview-jump-family,
  .ept-bench.ept-mode-production .ept-preview-nav-family,
  .ept-bench.ept-mode-production .ept-preview-badge-family {
    justify-self: stretch !important;
  }

  .ept-bench.ept-mode-production .ept-preview-nav-family {
    width: 100% !important;
  }

  .ept-bench.ept-mode-production .ept-preview-zoom-family {
    max-width: none !important;
    width: 100% !important;
  }
}


/* DESIGN-9.2 — Shared Workspace responsive toolbar stabilizer.
   Fixes the DESIGN-9.1 cascade order so tablet widths keep the preview
   controls aligned without overriding mobile stacking. Shared workspace only. */
.ept-bench {
  --ept-design-stage: "DESIGN-9.2 shared-workspace-responsive-toolbar-stabilizer";
}

.ept-bench.ept-mode-production .ept-preview-toolbar-family {
  box-sizing: border-box !important;
}

.ept-bench.ept-mode-production .ept-preview-jump-family,
.ept-bench.ept-mode-production .ept-preview-zoom-family,
.ept-bench.ept-mode-production .ept-preview-badge-family {
  box-sizing: border-box !important;
}

@media (max-width: 1180px) and (min-width: 921px) {
  .ept-bench.ept-mode-production .ept-preview-toolbar-family {
    grid-template-columns: minmax(0, 1fr) 36px minmax(142px, max-content) minmax(128px, max-content) 36px !important;
  }

  .ept-bench.ept-mode-production .ept-preview-toolbar-family__title {
    grid-column: auto !important;
    justify-self: stretch !important;
  }

  .ept-bench.ept-mode-production .ept-preview-badge-family {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    width: 100% !important;
  }
}

@media (max-width: 920px) and (min-width: 761px) {
  .ept-bench.ept-mode-production .ept-preview-toolbar-family {
    grid-template-columns: 36px minmax(0, 1fr) minmax(128px, max-content) 36px !important;
  }

  .ept-bench.ept-mode-production .ept-preview-toolbar-family__title,
  .ept-bench.ept-mode-production .ept-preview-badge-family {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    width: 100% !important;
  }
}

@media (max-width: 760px) and (min-width: 621px) {
  .ept-bench.ept-mode-production .ept-preview-toolbar-family {
    grid-template-columns: 36px minmax(0, 1fr) 36px !important;
    gap: 8px !important;
  }

  .ept-bench.ept-mode-production .ept-preview-toolbar-family__title,
  .ept-bench.ept-mode-production .ept-preview-jump-family,
  .ept-bench.ept-mode-production .ept-preview-zoom-family,
  .ept-bench.ept-mode-production .ept-preview-badge-family {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
  }

  .ept-bench.ept-mode-production .ept-preview-jump-family,
  .ept-bench.ept-mode-production .ept-preview-zoom-family {
    justify-content: space-between !important;
  }
}

@media (max-width: 620px) {
  .ept-bench.ept-mode-production .ept-preview-toolbar-family {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .ept-bench.ept-mode-production .ept-preview-toolbar-family > * {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
  }

  .ept-bench.ept-mode-production .ept-preview-nav-family {
    width: 100% !important;
    min-width: 100% !important;
  }
}

/* DESIGN-9.3 — Shared Workspace preview zoom text restore.
   Keeps the fix in shared workspace: the production toolbar now uses the same
   zoom value set as the shared workspace state, so saved 75% / 125% values no
   longer make the select render blank. */
.ept-bench {
  --ept-design-stage: "DESIGN-9.3 shared-workspace-preview-zoom-text-restore";
}

.ept-bench.ept-mode-production .ept-preview-zoom-family {
  min-width: 154px !important;
  max-width: 174px !important;
  flex: 0 0 auto !important;
}

.ept-bench.ept-mode-production .ept-preview-zoom-family select {
  width: 100px !important;
  max-width: 100px !important;
  min-width: 100px !important;
  overflow: visible !important;
  opacity: 1 !important;
  text-indent: 0 !important;
  text-align: left !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

.ept-bench.ept-mode-production .ept-preview-zoom-family select option {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  background: #fff !important;
}

@media (max-width: 1180px) and (min-width: 921px) {
  .ept-bench.ept-mode-production .ept-preview-toolbar-family {
    grid-template-columns: minmax(0, 1fr) 36px minmax(142px, max-content) minmax(154px, max-content) 36px !important;
  }
}

@media (max-width: 920px) and (min-width: 761px) {
  .ept-bench.ept-mode-production .ept-preview-toolbar-family {
    grid-template-columns: 36px minmax(0, 1fr) minmax(154px, max-content) 36px !important;
  }
}

@media (max-width: 760px) {
  .ept-bench.ept-mode-production .ept-preview-zoom-family,
  .ept-bench.ept-mode-production .ept-preview-zoom-family select {
    width: 100% !important;
    max-width: none !important;
  }
}

/* DESIGN-10 shared editor panel slot + tabs foundation.
   Shared owns the right-panel chrome. Tools only mount controls inside the
   body slot and optionally declare tab metadata. */
.ept-bench.ept-mode-production [data-ept-editor-panel-shell] {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

.ept-bench.ept-mode-production .ept-editor-tabs-family {
  align-items: center !important;
  background: rgba(239, 246, 255, .56) !important;
  border: 1px solid rgba(147, 197, 253, .42) !important;
  border-radius: 16px !important;
  display: flex !important;
  gap: 6px !important;
  margin: -2px 0 12px !important;
  overflow-x: auto !important;
  padding: 5px !important;
  scrollbar-width: none !important;
}

.ept-bench.ept-mode-production .ept-editor-tabs-family[hidden] {
  display: none !important;
}

.ept-bench.ept-mode-production .ept-editor-tabs-family::-webkit-scrollbar {
  display: none !important;
}

.ept-bench.ept-mode-production .ept-editor-tab-family {
  align-items: center !important;
  appearance: none !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  color: #475569 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  justify-content: center !important;
  letter-spacing: -.006em !important;
  min-height: 30px !important;
  padding: 0 11px !important;
  white-space: nowrap !important;
}

.ept-bench.ept-mode-production .ept-editor-tab-family:hover,
.ept-bench.ept-mode-production .ept-editor-tab-family:focus-visible {
  border-color: rgba(37, 99, 235, .24) !important;
  color: #1d4ed8 !important;
  outline: none !important;
}

.ept-bench.ept-mode-production .ept-editor-tab-family.is-active {
  background: #fff !important;
  border-color: rgba(147, 197, 253, .58) !important;
  box-shadow: 0 8px 22px rgba(37, 99, 235, .08), inset 0 1px 0 rgba(255,255,255,.96) !important;
  color: #1d4ed8 !important;
}

.ept-bench.ept-mode-production .ept-editor-panel-body-family {
  min-height: 0 !important;
}

.ept-bench.ept-mode-production [data-ept-tool-panel-mount] {
  min-height: 0 !important;
}

.ept-bench.ept-mode-production [data-ept-panel-tab-content][hidden] {
  display: none !important;
}

.ept-bench.ept-mode-production .ept-editor-panel-empty-family {
  background: rgba(248, 250, 252, .82) !important;
  border: 1px dashed rgba(148, 163, 184, .30) !important;
  border-radius: 16px !important;
  display: grid !important;
  gap: 5px !important;
  padding: 14px !important;
}

.ept-bench.ept-mode-production .ept-editor-panel-empty-family strong {
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 920 !important;
}

.ept-bench.ept-mode-production .ept-editor-panel-empty-family span {
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 680 !important;
  line-height: 1.35 !important;
}

@media (max-width: 760px) {
  .ept-bench.ept-mode-production .ept-editor-tabs-family {
    margin-top: 0 !important;
  }
}


/* DESIGN-10.1 — Shared Workspace Panel QA Polish.
   Keeps fixes in the shared workspace layer: zoom label display, editor panel
   internal scroll, tab polish, and empty-state tab fallback readiness. */
.ept-bench {
  --ept-design-stage: "DESIGN-10.1 shared-workspace-panel-qa-polish";
}

.ept-bench.ept-mode-production .ept-preview-zoom-family {
  position: relative !important;
  overflow: hidden !important;
}

.ept-bench.ept-mode-production .ept-preview-zoom-family::after {
  content: attr(data-ept-zoom-label) !important;
  color: #0f172a !important;
  font-size: 11.3px !important;
  font-weight: 920 !important;
  left: 47px !important;
  line-height: 1 !important;
  max-width: calc(100% - 70px) !important;
  overflow: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  right: 22px !important;
  text-overflow: ellipsis !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  white-space: nowrap !important;
  z-index: 2 !important;
}

.ept-bench.ept-mode-production .ept-preview-zoom-family select {
  background: transparent !important;
  color: transparent !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 3 !important;
  -webkit-text-fill-color: transparent !important;
}

.ept-bench.ept-mode-production .ept-preview-zoom-family select:focus-visible {
  outline: 2px solid rgba(37, 99, 235, .30) !important;
  outline-offset: 2px !important;
}

.ept-bench.ept-mode-production .ept-preview-zoom-family select option {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

.ept-bench.ept-mode-production [data-ept-editor-panel-shell].ept-flow-workspace__panel {
  align-content: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  max-height: min(720px, calc(100vh - 170px)) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.ept-bench.ept-mode-production [data-ept-tool-panel-head] {
  flex: 0 0 auto !important;
}

.ept-bench.ept-mode-production .ept-editor-tabs-family {
  flex: 0 0 auto !important;
  margin: 0 0 14px !important;
  min-height: 39px !important;
  padding: 5px !important;
}

.ept-bench.ept-mode-production .ept-editor-tab-family {
  min-height: 29px !important;
  padding: 0 12px !important;
}

.ept-bench.ept-mode-production .ept-editor-tab-family.is-active {
  transform: translateY(0) !important;
}

.ept-bench.ept-mode-production .ept-editor-panel-body-family {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  padding-right: 2px !important;
  scrollbar-gutter: stable !important;
}

.ept-bench.ept-mode-production [data-ept-tool-panel-mount] {
  min-height: 0 !important;
}

.ept-bench.ept-mode-production [data-ept-panel-tab-content] {
  min-height: 0 !important;
}

.ept-bench.ept-mode-production [data-ept-panel-tab-content].is-active {
  display: block !important;
}

.ept-bench.ept-mode-production .ept-editor-panel-empty-family--tab {
  margin-top: 2px !important;
}

@media (max-width: 1180px) and (min-width: 921px) {
  .ept-bench.ept-mode-production [data-ept-editor-panel-shell].ept-flow-workspace__panel {
    max-height: min(700px, calc(100vh - 150px)) !important;
  }
}

@media (max-width: 920px) {
  .ept-bench.ept-mode-production [data-ept-editor-panel-shell].ept-flow-workspace__panel {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .ept-bench.ept-mode-production .ept-editor-panel-body-family {
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 760px) {
  .ept-bench.ept-mode-production .ept-preview-zoom-family::after {
    left: 48px !important;
    max-width: calc(100% - 72px) !important;
  }

  .ept-bench.ept-mode-production .ept-editor-tabs-family {
    flex-wrap: nowrap !important;
  }
}

/* DESIGN-10.2 — Shared Preview Toolbar Zoom Select Final Fix.
   Keep the fix in the shared workspace toolbar. The View control now relies on
   the native select's visible selected-option text instead of a fragile overlay,
   so Fit page / Page width / percentage values cannot render as a blank pill. */
.ept-bench {
  --ept-design-stage: "DESIGN-10.2 shared-preview-toolbar-zoom-select-final-fix";
}

.ept-bench.ept-mode-production .ept-preview-zoom-family {
  min-width: 154px !important;
  max-width: 178px !important;
  overflow: visible !important;
  position: relative !important;
}

.ept-bench.ept-mode-production .ept-preview-zoom-family::after {
  content: none !important;
  display: none !important;
}

.ept-bench.ept-mode-production .ept-preview-zoom-family select {
  appearance: auto !important;
  -webkit-appearance: menulist !important;
  background-color: transparent !important;
  border: 0 !important;
  color: #0f172a !important;
  cursor: pointer !important;
  font-size: 11.3px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  max-width: 106px !important;
  min-width: 106px !important;
  opacity: 1 !important;
  overflow: visible !important;
  padding: 0 4px !important;
  position: static !important;
  text-align: left !important;
  text-indent: 0 !important;
  width: 106px !important;
  z-index: auto !important;
  -webkit-text-fill-color: #0f172a !important;
}

.ept-bench.ept-mode-production .ept-preview-zoom-family select option {
  background: #fff !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

.ept-bench.ept-mode-production .ept-preview-zoom-family select:focus-visible {
  outline: 2px solid rgba(37, 99, 235, .28) !important;
  outline-offset: 2px !important;
}

@media (max-width: 760px) {
  .ept-bench.ept-mode-production .ept-preview-zoom-family,
  .ept-bench.ept-mode-production .ept-preview-zoom-family select {
    max-width: none !important;
    width: 100% !important;
  }
}

/* DESIGN-10.3 — Shared Preview Toolbar Zoom Select Width Polish.
   Keeps the fix in the shared workspace toolbar only. DESIGN-10.2 restored the
   native select text, but Windows/Chromium reserves extra menulist arrow space
   and can truncate “Fit page”. This uses visible native select text with a
   lightweight shared arrow so Fit page / Page width never look cut. */
.ept-bench {
  --ept-design-stage: "DESIGN-10.3 shared-preview-toolbar-zoom-select-width-polish";
}

.ept-bench.ept-mode-production .ept-preview-zoom-family {
  align-items: center !important;
  gap: 7px !important;
  justify-content: flex-start !important;
  min-width: 154px !important;
  max-width: 178px !important;
  overflow: visible !important;
  padding: 0 9px 0 11px !important;
}

.ept-bench.ept-mode-production .ept-preview-zoom-family span {
  flex: 0 0 auto !important;
}

.ept-bench.ept-mode-production .ept-preview-zoom-family select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 20 20'%3E%3Cpath fill='%230f172a' d='M5.4 7.2a1 1 0 0 1 1.4 0L10 10.4l3.2-3.2a1 1 0 1 1 1.4 1.4l-3.9 3.9a1 1 0 0 1-1.4 0L5.4 8.6a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E") !important;
  background-position: right 7px center !important;
  background-repeat: no-repeat !important;
  background-size: 10px 10px !important;
  box-sizing: border-box !important;
  color: #0f172a !important;
  cursor: pointer !important;
  flex: 0 0 96px !important;
  font-size: 11.3px !important;
  font-weight: 900 !important;
  height: 28px !important;
  line-height: normal !important;
  max-width: 96px !important;
  min-height: 28px !important;
  min-width: 96px !important;
  opacity: 1 !important;
  overflow: visible !important;
  padding: 0 22px 0 6px !important;
  text-align: left !important;
  text-indent: 0 !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  width: 96px !important;
  -webkit-text-fill-color: #0f172a !important;
}

.ept-bench.ept-mode-production .ept-preview-zoom-family select::-ms-expand {
  display: none !important;
}

@media (max-width: 760px) {
  .ept-bench.ept-mode-production .ept-preview-zoom-family {
    max-width: none !important;
    width: 100% !important;
  }

  .ept-bench.ept-mode-production .ept-preview-zoom-family select {
    background-position: right 12px center !important;
    flex: 1 1 auto !important;
    max-width: none !important;
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* DESIGN-10.4 — Shared Preview Toolbar Zoom Select Expanded Width.
   DESIGN-10.3 made the native text visible, but the Fit page label could still
   clip on narrow Chromium/Windows select rendering. Keep this scoped to the
   shared workspace preview toolbar and give the View menu enough real width. */
.ept-bench {
  --ept-design-stage: "DESIGN-10.4 shared-preview-toolbar-zoom-select-expanded-width";
}

.ept-bench.ept-mode-production .ept-preview-toolbar-family {
  gap: 8px !important;
  grid-template-columns: minmax(120px, 1fr) 36px minmax(126px, max-content) minmax(196px, max-content) 36px auto !important;
}

.ept-bench.ept-mode-production .ept-preview-zoom-family {
  flex: 0 0 auto !important;
  gap: 8px !important;
  min-width: 196px !important;
  max-width: 224px !important;
  padding: 0 10px 0 12px !important;
  width: 196px !important;
}

.ept-bench.ept-mode-production .ept-preview-zoom-family span {
  flex: 0 0 auto !important;
}

.ept-bench.ept-mode-production .ept-preview-zoom-family select {
  background-position: right 9px center !important;
  flex: 0 0 132px !important;
  font-size: 11.3px !important;
  height: 28px !important;
  line-height: 28px !important;
  max-width: 132px !important;
  min-height: 28px !important;
  min-width: 132px !important;
  padding: 0 28px 0 8px !important;
  width: 132px !important;
}

@media (max-width: 1180px) {
  .ept-bench.ept-mode-production .ept-preview-toolbar-family {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
  }
}

@media (max-width: 760px) {
  .ept-bench.ept-mode-production .ept-preview-zoom-family {
    max-width: none !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .ept-bench.ept-mode-production .ept-preview-zoom-family select {
    flex: 1 1 auto !important;
    max-width: none !important;
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* DESIGN-10.5 — Shared Preview Zoom Control CSS Debt Cleanup.
   Finalizes the shared workspace View control by using one stable model:
   a native select remains available for click/keyboard interaction, while the
   visible selected label is rendered by the shared toolbar shell. This neutralizes
   the previous mixed native/pseudo/custom-arrow cascade that caused blank or
   clipped Fit page labels in Chromium/Windows. */
.ept-bench {
  --ept-design-stage: "DESIGN-10.5 shared-preview-zoom-control-css-debt-cleanup";
}

.ept-bench.ept-mode-production .ept-preview-toolbar-family {
  align-items: center !important;
  gap: 8px !important;
  grid-template-columns: minmax(118px, 1fr) 36px minmax(126px, max-content) minmax(168px, max-content) 36px auto !important;
}

.ept-bench.ept-mode-production .ept-preview-zoom-family {
  align-items: center !important;
  background: rgba(255, 255, 255, .96) !important;
  border: 1px solid rgba(191, 219, 254, .86) !important;
  border-radius: 13px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  height: 36px !important;
  justify-content: flex-start !important;
  line-height: 1 !important;
  max-width: 190px !important;
  min-height: 36px !important;
  min-width: 168px !important;
  overflow: hidden !important;
  padding: 0 34px 0 11px !important;
  position: relative !important;
  white-space: nowrap !important;
  width: 168px !important;
}

.ept-bench.ept-mode-production .ept-preview-zoom-family:focus-within {
  border-color: rgba(37, 99, 235, .44) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .11) !important;
}

.ept-bench.ept-mode-production .ept-preview-zoom-family > span {
  color: #64748b !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  height: auto !important;
  line-height: 1 !important;
  margin: 0 !important;
  min-height: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

.ept-bench.ept-mode-production .ept-preview-zoom-family::after {
  color: #0f172a !important;
  content: attr(data-ept-zoom-label) !important;
  display: block !important;
  font-size: 11.3px !important;
  font-weight: 920 !important;
  left: 48px !important;
  line-height: 1 !important;
  max-width: calc(100% - 78px) !important;
  overflow: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  right: 30px !important;
  text-overflow: clip !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  white-space: nowrap !important;
  z-index: 1 !important;
}

.ept-bench.ept-mode-production .ept-preview-zoom-family::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 20 20'%3E%3Cpath fill='%230f172a' d='M5.4 7.2a1 1 0 0 1 1.4 0L10 10.4l3.2-3.2a1 1 0 1 1 1.4 1.4l-3.9 3.9a1 1 0 0 1-1.4 0L5.4 8.6a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 10px 10px !important;
  content: "" !important;
  display: block !important;
  height: 10px !important;
  pointer-events: none !important;
  position: absolute !important;
  right: 13px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 10px !important;
  z-index: 1 !important;
}

.ept-bench.ept-mode-production .ept-preview-zoom-family select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 13px !important;
  box-shadow: none !important;
  color: transparent !important;
  cursor: pointer !important;
  display: block !important;
  flex: none !important;
  font-size: 16px !important;
  height: 100% !important;
  inset: 0 !important;
  line-height: 36px !important;
  margin: 0 !important;
  max-height: none !important;
  max-width: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  opacity: 1 !important;
  outline: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  text-indent: 0 !important;
  width: 100% !important;
  z-index: 3 !important;
  -webkit-text-fill-color: transparent !important;
}

.ept-bench.ept-mode-production .ept-preview-zoom-family select::-ms-expand {
  display: none !important;
}

.ept-bench.ept-mode-production .ept-preview-zoom-family select option {
  background: #fff !important;
  color: #0f172a !important;
  font-size: 13px !important;
  text-indent: 0 !important;
  -webkit-text-fill-color: #0f172a !important;
}

@media (max-width: 1180px) {
  .ept-bench.ept-mode-production .ept-preview-toolbar-family {
    grid-template-columns: minmax(110px, 1fr) 34px minmax(116px, max-content) minmax(164px, max-content) 34px auto !important;
  }

  .ept-bench.ept-mode-production .ept-preview-zoom-family {
    min-width: 164px !important;
    width: 164px !important;
  }
}

@media (max-width: 920px) {
  .ept-bench.ept-mode-production .ept-preview-toolbar-family {
    grid-template-columns: minmax(0, 1fr) 34px minmax(116px, max-content) minmax(164px, max-content) 34px !important;
  }

  .ept-bench.ept-mode-production .ept-preview-badge-family {
    grid-column: 1 / -1 !important;
    justify-self: start !important;
  }
}

@media (max-width: 620px) {
  .ept-bench.ept-mode-production .ept-preview-toolbar-family {
    grid-template-columns: 1fr !important;
    justify-items: stretch !important;
  }

  .ept-bench.ept-mode-production .ept-preview-zoom-family {
    max-width: none !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .ept-bench.ept-mode-production .ept-preview-zoom-family::after {
    max-width: calc(100% - 82px) !important;
  }
}


/* DESIGN-10.6 — Shared Preview Zoom Control Overlay Layer Fix.
   The native select stays as the click/keyboard interaction layer, but it is
   fully visually transparent. The visible View label, selected zoom text, and
   arrow are rendered above that layer by shared workspace elements so browser
   native select painting cannot hide the text again. */
.ept-bench {
  --ept-design-stage: "DESIGN-10.6 shared-preview-zoom-control-overlay-layer-fix";
}

.ept-bench.ept-mode-production .ept-preview-toolbar-family {
  align-items: center !important;
  gap: 8px !important;
  grid-template-columns: minmax(118px, 1fr) 36px minmax(126px, max-content) minmax(176px, max-content) 36px auto !important;
}

.ept-bench.ept-mode-production .ept-preview-zoom-family {
  align-items: center !important;
  background: rgba(255, 255, 255, .96) !important;
  border: 1px solid rgba(191, 219, 254, .86) !important;
  border-radius: 13px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  gap: 8px !important;
  height: 36px !important;
  isolation: isolate !important;
  justify-content: flex-start !important;
  max-width: 198px !important;
  min-height: 36px !important;
  min-width: 176px !important;
  overflow: hidden !important;
  padding: 0 34px 0 11px !important;
  position: relative !important;
  width: 176px !important;
}

.ept-bench.ept-mode-production .ept-preview-zoom-family:focus-within {
  border-color: rgba(37, 99, 235, .44) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .11) !important;
}

.ept-bench.ept-mode-production .ept-preview-zoom-family > span:not(.ept-preview-zoom-display-family) {
  color: #64748b !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  pointer-events: none !important;
  position: relative !important;
  white-space: nowrap !important;
  z-index: 5 !important;
}

.ept-bench.ept-mode-production .ept-preview-zoom-display-family {
  color: #0f172a !important;
  display: block !important;
  font-size: 11.3px !important;
  font-weight: 920 !important;
  left: 48px !important;
  line-height: 1 !important;
  max-width: calc(100% - 82px) !important;
  overflow: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  right: 32px !important;
  text-overflow: clip !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  white-space: nowrap !important;
  z-index: 5 !important;
}

.ept-bench.ept-mode-production .ept-preview-zoom-family::after {
  content: none !important;
  display: none !important;
}

.ept-bench.ept-mode-production .ept-preview-zoom-family::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 20 20'%3E%3Cpath fill='%230f172a' d='M5.4 7.2a1 1 0 0 1 1.4 0L10 10.4l3.2-3.2a1 1 0 1 1 1.4 1.4l-3.9 3.9a1 1 0 0 1-1.4 0L5.4 8.6a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 10px 10px !important;
  content: "" !important;
  display: block !important;
  height: 10px !important;
  pointer-events: none !important;
  position: absolute !important;
  right: 13px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 10px !important;
  z-index: 5 !important;
}

.ept-bench.ept-mode-production .ept-preview-zoom-family select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 13px !important;
  box-shadow: none !important;
  color: transparent !important;
  cursor: pointer !important;
  display: block !important;
  font-size: 16px !important;
  height: 100% !important;
  inset: 0 !important;
  line-height: 36px !important;
  margin: 0 !important;
  max-height: none !important;
  max-width: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  opacity: 0 !important;
  outline: 0 !important;
  padding: 0 !important;
  position: absolute !important;
  text-indent: 0 !important;
  width: 100% !important;
  z-index: 3 !important;
  -webkit-text-fill-color: transparent !important;
}

.ept-bench.ept-mode-production .ept-preview-zoom-family select::-ms-expand {
  display: none !important;
}

.ept-bench.ept-mode-production .ept-preview-zoom-family select option {
  background: #fff !important;
  color: #0f172a !important;
  font-size: 13px !important;
  -webkit-text-fill-color: #0f172a !important;
}

@media (max-width: 1180px) {
  .ept-bench.ept-mode-production .ept-preview-toolbar-family {
    grid-template-columns: minmax(110px, 1fr) 34px minmax(116px, max-content) minmax(172px, max-content) 34px auto !important;
  }

  .ept-bench.ept-mode-production .ept-preview-zoom-family {
    min-width: 172px !important;
    width: 172px !important;
  }
}

@media (max-width: 920px) {
  .ept-bench.ept-mode-production .ept-preview-toolbar-family {
    grid-template-columns: minmax(0, 1fr) 34px minmax(116px, max-content) minmax(172px, max-content) 34px !important;
  }

  .ept-bench.ept-mode-production .ept-preview-badge-family {
    grid-column: 1 / -1 !important;
    justify-self: start !important;
  }
}

@media (max-width: 620px) {
  .ept-bench.ept-mode-production .ept-preview-toolbar-family {
    grid-template-columns: 1fr !important;
    justify-items: stretch !important;
  }

  .ept-bench.ept-mode-production .ept-preview-zoom-family {
    max-width: none !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .ept-bench.ept-mode-production .ept-preview-zoom-display-family {
    max-width: calc(100% - 82px) !important;
  }
}

/* DESIGN-10.7 — Shared Preview Zoom Overlay Position Final Polish.
   Keep the stable invisible native select interaction layer from DESIGN-10.6,
   but make the visible selected zoom text an in-flow flex item instead of an
   absolutely positioned overlay. This keeps View, Fit page, and the arrow on
   one vertical baseline inside the shared workspace preview toolbar. */
.ept-bench {
  --ept-design-stage: "DESIGN-10.7 shared-preview-zoom-overlay-position-final-polish";
}

.ept-bench.ept-mode-production .ept-preview-toolbar-family {
  align-items: center !important;
  gap: 8px !important;
  grid-template-columns: minmax(118px, 1fr) 36px minmax(126px, max-content) minmax(164px, max-content) 36px auto !important;
}

.ept-bench.ept-mode-production .ept-preview-zoom-family {
  align-items: center !important;
  align-self: center !important;
  background: rgba(255, 255, 255, .96) !important;
  border: 1px solid rgba(191, 219, 254, .86) !important;
  border-radius: 13px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
  gap: 7px !important;
  height: 36px !important;
  justify-content: flex-start !important;
  line-height: 1 !important;
  max-height: 36px !important;
  max-width: 178px !important;
  min-height: 36px !important;
  min-width: 164px !important;
  overflow: hidden !important;
  padding: 0 32px 0 11px !important;
  position: relative !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  width: 164px !important;
}

.ept-bench.ept-mode-production .ept-preview-zoom-family:focus-within {
  border-color: rgba(37, 99, 235, .44) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .11) !important;
}

.ept-bench.ept-mode-production .ept-preview-zoom-family > span:not(.ept-preview-zoom-display-family) {
  align-items: center !important;
  align-self: stretch !important;
  color: #64748b !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  height: 100% !important;
  line-height: 1 !important;
  margin: 0 !important;
  min-height: 0 !important;
  pointer-events: none !important;
  position: relative !important;
  transform: none !important;
  white-space: nowrap !important;
  z-index: 2 !important;
}

.ept-bench.ept-mode-production .ept-preview-zoom-display-family {
  align-items: center !important;
  align-self: stretch !important;
  color: #0f172a !important;
  display: inline-flex !important;
  flex: 1 1 auto !important;
  font-size: 11.3px !important;
  font-weight: 920 !important;
  height: 100% !important;
  left: auto !important;
  line-height: 1 !important;
  margin: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  position: relative !important;
  right: auto !important;
  text-overflow: ellipsis !important;
  top: auto !important;
  transform: none !important;
  white-space: nowrap !important;
  z-index: 2 !important;
}

.ept-bench.ept-mode-production .ept-preview-zoom-family::after {
  content: none !important;
  display: none !important;
}

.ept-bench.ept-mode-production .ept-preview-zoom-family::before {
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 10px 10px !important;
  content: "" !important;
  display: block !important;
  height: 10px !important;
  margin: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  right: 13px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 10px !important;
  z-index: 2 !important;
}

.ept-bench.ept-mode-production .ept-preview-zoom-family select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 13px !important;
  box-shadow: none !important;
  color: transparent !important;
  cursor: pointer !important;
  display: block !important;
  height: 100% !important;
  inset: 0 !important;
  line-height: 36px !important;
  margin: 0 !important;
  max-height: none !important;
  max-width: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  opacity: 0 !important;
  outline: 0 !important;
  padding: 0 !important;
  position: absolute !important;
  text-indent: 0 !important;
  width: 100% !important;
  z-index: 10 !important;
  -webkit-text-fill-color: transparent !important;
}

.ept-bench.ept-mode-production .ept-preview-zoom-family select option {
  background: #fff !important;
  color: #0f172a !important;
  font-size: 13px !important;
  -webkit-text-fill-color: #0f172a !important;
}

@media (max-width: 1180px) {
  .ept-bench.ept-mode-production .ept-preview-toolbar-family {
    grid-template-columns: minmax(110px, 1fr) 34px minmax(116px, max-content) minmax(164px, max-content) 34px auto !important;
  }

  .ept-bench.ept-mode-production .ept-preview-zoom-family {
    min-width: 164px !important;
    width: 164px !important;
  }
}

@media (max-width: 920px) {
  .ept-bench.ept-mode-production .ept-preview-toolbar-family {
    grid-template-columns: minmax(0, 1fr) 34px minmax(116px, max-content) minmax(164px, max-content) 34px !important;
  }

  .ept-bench.ept-mode-production .ept-preview-badge-family {
    grid-column: 1 / -1 !important;
    justify-self: start !important;
  }
}

@media (max-width: 620px) {
  .ept-bench.ept-mode-production .ept-preview-toolbar-family {
    grid-template-columns: 1fr !important;
    justify-items: stretch !important;
  }

  .ept-bench.ept-mode-production .ept-preview-zoom-family {
    max-width: none !important;
    min-width: 0 !important;
    width: 100% !important;
  }
}


/* START-1 — shared production start upload surface hardening */
.ept-bench.ept-mode-production .ept-start-final .ept-flow-start[data-ept-dropzone] {
  cursor: pointer !important;
  outline: none !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease !important;
}

.ept-bench.ept-mode-production .ept-start-final .ept-flow-start[data-ept-dropzone]:focus-visible {
  border-color: rgba(37, 99, 235, 0.66) !important;
  box-shadow:
    0 0 0 4px rgba(37, 99, 235, 0.14),
    0 28px 90px rgba(37, 99, 235, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
}

.ept-bench.ept-mode-production .ept-start-final .ept-flow-start[data-ept-dropzone].is-dragover {
  border-color: rgba(37, 99, 235, 0.84) !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(37, 99, 235, 0.18), transparent 30%),
    radial-gradient(circle at 50% 74%, rgba(34, 197, 94, 0.09), transparent 38%),
    linear-gradient(180deg, #ffffff 0%, #eff6ff 100%) !important;
  box-shadow:
    0 0 0 5px rgba(37, 99, 235, 0.12),
    0 32px 92px rgba(37, 99, 235, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
  transform: translateY(-1px) !important;
}

.ept-bench.ept-mode-production .ept-start-final .ept-flow-start[data-ept-dropzone].is-validating {
  border-color: rgba(37, 99, 235, 0.72) !important;
  box-shadow:
    0 0 0 4px rgba(37, 99, 235, 0.10),
    0 28px 90px rgba(37, 99, 235, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
}

.ept-bench.ept-mode-production .ept-start-final .ept-flow-start[data-ept-dropzone].is-invalid {
  border-color: rgba(248, 113, 113, 0.76) !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(248, 113, 113, 0.12), transparent 30%),
    linear-gradient(180deg, #fff 0%, #fff7f7 100%) !important;
}

.ept-bench.ept-mode-production .ept-start-final .ept-flow-start[data-ept-dropzone].is-ready {
  border-color: rgba(34, 197, 94, 0.72) !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(34, 197, 94, 0.12), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%) !important;
}

.ept-bench.ept-mode-production .ept-start-upload-feedback {
  width: min(100%, 680px) !important;
  margin: 16px auto 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

.ept-bench.ept-mode-production .ept-start-upload-feedback .ept-start-state {
  margin: 0 0 4px !important;
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  letter-spacing: 0.01em !important;
}

.ept-bench.ept-mode-production .ept-start-upload-feedback .ept-start-detail {
  max-width: 640px !important;
  margin: 0 auto 0 !important;
  color: #64748b !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
}

.ept-bench.ept-mode-production .ept-start-upload-feedback .ept-start-file-summary {
  margin: 10px auto 0 !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(191, 219, 254, 0.72) !important;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.06) !important;
}

.ept-bench.ept-mode-production .ept-start-upload-feedback .ept-validation-list {
  max-width: 560px !important;
  margin: 12px auto 0 !important;
}

.ept-bench.ept-mode-production .ept-start-upload-feedback .ept-validation-item {
  background: rgba(255, 255, 255, 0.86) !important;
}

@media (max-width: 760px) {
  .ept-bench.ept-mode-production .ept-start-upload-feedback .ept-validation-list {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 480px) {
  .ept-bench.ept-mode-production .ept-start-upload-feedback .ept-validation-list {
    grid-template-columns: 1fr !important;
  }
}


/* START-2.1 — Shared Start Minimal Surface Cleanup.
 * Removes the idle visual dropzone/card and helper copy from the production
 * shared start page while keeping the whole start surface clickable,
 * keyboard accessible, and drag/drop capable for every tool consumer.
 */
.ept-bench.ept-mode-production .ept-flow-template--start.ept-start-final {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.ept-bench.ept-mode-production .ept-start-final .ept-flow-start {
  border: 0 !important;
  box-shadow: none !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(37, 99, 235, 0.10), transparent 31%),
    radial-gradient(circle at 50% 72%, rgba(34, 197, 94, 0.045), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,251,255,0.96) 100%) !important;
}

.ept-bench.ept-mode-production .ept-start-final .ept-flow-start[data-ept-dropzone]:focus-visible {
  border-color: transparent !important;
  box-shadow:
    0 0 0 4px rgba(37, 99, 235, 0.13),
    inset 0 0 0 1px rgba(147, 197, 253, 0.78) !important;
}

.ept-bench.ept-mode-production .ept-start-final .ept-flow-start[data-ept-dropzone].is-dragover,
.ept-bench.ept-mode-production .ept-start-final .ept-flow-start[data-ept-dropzone].is-validating,
.ept-bench.ept-mode-production .ept-start-final .ept-flow-start[data-ept-dropzone].is-invalid,
.ept-bench.ept-mode-production .ept-start-final .ept-flow-start[data-ept-dropzone].is-ready,
.ept-bench.ept-mode-production .ept-start-final .ept-flow-start[data-ept-dropzone].is-warning {
  border-color: transparent !important;
  box-shadow:
    0 0 0 1px rgba(191, 219, 254, 0.54),
    0 22px 60px rgba(37, 99, 235, 0.08) !important;
}

.ept-bench.ept-mode-production .ept-start-final .ept-start-upload-feedback {
  display: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.ept-bench.ept-mode-production .ept-start-final .ept-flow-start.is-dragover .ept-start-upload-feedback,
.ept-bench.ept-mode-production .ept-start-final .ept-flow-start.is-validating .ept-start-upload-feedback,
.ept-bench.ept-mode-production .ept-start-final .ept-flow-start.is-invalid .ept-start-upload-feedback,
.ept-bench.ept-mode-production .ept-start-final .ept-flow-start.is-ready .ept-start-upload-feedback,
.ept-bench.ept-mode-production .ept-start-final .ept-flow-start.is-warning .ept-start-upload-feedback {
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 18px auto 0 !important;
  max-width: 620px !important;
  padding: 0 !important;
  width: min(100%, 620px) !important;
}

.ept-bench.ept-mode-production .ept-start-final .ept-start-upload-feedback::before {
  display: none !important;
  content: none !important;
}

.ept-bench.ept-mode-production .ept-start-final .ept-start-upload-feedback .ept-start-state:empty,
.ept-bench.ept-mode-production .ept-start-final .ept-start-upload-feedback .ept-start-detail:empty {
  display: none !important;
}

.ept-bench.ept-mode-production .ept-start-final .ept-start-upload-feedback .ept-start-state {
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}

.ept-bench.ept-mode-production .ept-start-final .ept-start-upload-feedback .ept-start-detail {
  color: #64748b !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  max-width: 580px !important;
}

.ept-bench.ept-mode-production .ept-start-final .ept-start-upload-feedback .ept-start-file-summary {
  margin: 8px auto 0 !important;
}

.ept-bench.ept-mode-production .ept-start-final .ept-start-upload-feedback .ept-validation-list {
  margin: 10px auto 0 !important;
}

@media (max-width: 760px) {
  .ept-bench.ept-mode-production .ept-start-final .ept-flow-start {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* START-3 — Shared Start Upload Edge Case + Accessibility QA.
 * Keeps the minimal START-2.1 visual while hardening focus, busy,
 * drag/drop, and validation feedback for production shared start.
 */
.ept-bench.ept-mode-production .ept-start-final .ept-flow-start[data-ept-dropzone] {
  outline: none !important;
  touch-action: manipulation !important;
}

.ept-bench.ept-mode-production .ept-start-final .ept-flow-start[data-ept-dropzone][aria-busy="true"] .ept-start-cta,
.ept-bench.ept-mode-production .ept-start-final .ept-start-cta.is-busy {
  cursor: progress !important;
  opacity: .86 !important;
}

.ept-bench.ept-mode-production .ept-start-final .ept-flow-start[data-ept-dropzone][aria-invalid="true"] {
  box-shadow:
    0 0 0 1px rgba(248, 113, 113, 0.34),
    0 20px 58px rgba(239, 68, 68, 0.08) !important;
}

.ept-bench.ept-mode-production .ept-start-final .ept-flow-start[data-ept-dropzone].is-dragover {
  cursor: copy !important;
}

.ept-bench.ept-mode-production .ept-start-final .ept-start-upload-feedback[role="status"] {
  text-align: center !important;
}

.ept-bench.ept-mode-production .ept-start-final .ept-start-upload-feedback .ept-validation-item.is-pending .ept-validation-item__status {
  color: #2563eb !important;
}

.ept-bench.ept-mode-production .ept-start-final .ept-start-upload-feedback .ept-validation-item.is-pending {
  background: rgba(239, 246, 255, 0.88) !important;
  border-color: rgba(191, 219, 254, 0.92) !important;
}

/* WORKSPACE-1 — Fit Page Lock
   Keep the shared preview view control stable while workspace navigation is hardened. */
.ept-bench .ept-preview-zoom-family select[data-ept-zoom-locked="fit"],
.ept-bench select[data-ept-workspace-zoom][data-ept-zoom-locked="fit"] {
  cursor: default;
  opacity: 1;
}

.ept-bench .ept-preview-zoom-family select[data-ept-zoom-locked="fit"]:disabled,
.ept-bench select[data-ept-workspace-zoom][data-ept-zoom-locked="fit"]:disabled {
  -webkit-text-fill-color: currentColor;
}

/* WORKSPACE-1.1 — Shared Workspace navigation click hit-area guard.
   Navigation belongs to Shared Workspace. Keep toolbar arrows and page chips
   above preview/canvas layers so clicks always reach the workspace state handler. */
.ept-bench.ept-mode-production .ept-preview-toolbar-family,
.ept-bench.ept-mode-production .ept-flow-page-section,
.ept-bench.ept-mode-production .ept-flow-page-row {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 20 !important;
}

.ept-bench.ept-mode-production .ept-preview-nav-family,
.ept-bench.ept-mode-production .ept-flow-page-dot,
.ept-bench.ept-mode-production [data-ept-workspace-page-nav],
.ept-bench.ept-mode-production [data-ept-workspace-page-jump],
.ept-bench.ept-mode-production [data-ept-production-page] {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 21 !important;
}

.ept-bench.ept-mode-production .ept-preview-nav-family[disabled],
.ept-bench.ept-mode-production [data-ept-workspace-page-nav][disabled] {
  cursor: not-allowed !important;
  opacity: .52 !important;
}


/* WORKSPACE-2 — Shared Workspace Fit Page Layout + Canvas Size Stabilization.
   Shared workspace only: keeps Fit page as the single view mode while making
   the preview frame use a stable, viewport-aware size so rendered PDF pages do
   not feel too small or shift between navigation renders. */
.ept-bench {
  --ept-design-stage: "WORKSPACE-2 shared-workspace-fit-page-layout-canvas-size-stabilization";
  --ept-workspace-2-stage-min: 560px;
  --ept-workspace-2-stage-ideal: calc(100vh - 300px);
  --ept-workspace-2-stage-max: 820px;
}

.ept-bench[data-ept-context-type="tool"][data-ept-production-state="workspace"] .ept-shell {
  width: min(1420px, calc(100vw - 48px)) !important;
  max-width: min(1420px, calc(100vw - 48px)) !important;
}

.ept-bench.ept-mode-production .ept-flow-workspace {
  grid-template-columns: minmax(560px, 1fr) minmax(390px, 430px) !important;
  gap: 16px !important;
}

.ept-bench.ept-mode-production .ept-flow-workspace__main {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.ept-bench.ept-mode-production .ept-flow-workspace__canvas[data-ept-production-canvas-stage] {
  align-items: center !important;
  display: flex !important;
  height: clamp(var(--ept-workspace-2-stage-min), var(--ept-workspace-2-stage-ideal), var(--ept-workspace-2-stage-max)) !important;
  justify-content: center !important;
  min-height: clamp(var(--ept-workspace-2-stage-min), var(--ept-workspace-2-stage-ideal), var(--ept-workspace-2-stage-max)) !important;
  overflow: hidden !important;
  padding: 22px !important;
}

.ept-bench.ept-mode-production [data-ept-production-canvas-target] {
  flex: 0 0 auto !important;
  max-height: 100% !important;
  max-width: 100% !important;
  transform: translateZ(0) !important;
}

.ept-bench.ept-mode-production [data-ept-production-canvas-target] .ept-pdf-canvas {
  display: block !important;
  max-height: 100% !important;
  max-width: 100% !important;
}

.ept-bench.ept-mode-production .ept-flow-paper.is-soft-rendering::after {
  background: rgba(255, 255, 255, .72) !important;
  border: 1px solid rgba(191, 219, 254, .76) !important;
  border-radius: 999px !important;
  color: #1d4ed8 !important;
  content: "Updating preview…" !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  left: 50% !important;
  opacity: .92 !important;
  padding: 6px 10px !important;
  pointer-events: none !important;
  position: absolute !important;
  top: 12px !important;
  transform: translateX(-50%) !important;
  white-space: nowrap !important;
  z-index: 24 !important;
}

.ept-bench.ept-mode-production .ept-flow-workspace__panel {
  align-self: start !important;
  max-height: none !important;
  overflow: visible !important;
}

.ept-bench.ept-mode-production .ept-editor-panel-body-family,
.ept-bench.ept-mode-production [data-ept-tool-panel-mount] {
  min-height: 0 !important;
  overflow: visible !important;
}

@media (min-width: 1280px) and (min-height: 860px) {
  .ept-bench {
    --ept-workspace-2-stage-min: 620px;
    --ept-workspace-2-stage-ideal: calc(100vh - 280px);
    --ept-workspace-2-stage-max: 860px;
  }
}

@media (max-width: 1180px) {
  .ept-bench.ept-mode-production .ept-flow-workspace {
    grid-template-columns: 1fr !important;
  }

  .ept-bench.ept-mode-production .ept-flow-workspace__canvas[data-ept-production-canvas-stage] {
    height: clamp(520px, calc(100vh - 310px), 720px) !important;
    min-height: clamp(520px, calc(100vh - 310px), 720px) !important;
  }
}

@media (max-width: 760px) {
  .ept-bench[data-ept-context-type="tool"][data-ept-production-state="workspace"] .ept-shell {
    width: min(100% - 18px, 1420px) !important;
    max-width: calc(100% - 18px) !important;
  }

  .ept-bench.ept-mode-production .ept-flow-workspace__canvas[data-ept-production-canvas-stage] {
    height: clamp(390px, 68vh, 560px) !important;
    min-height: clamp(390px, 68vh, 560px) !important;
    padding: 14px !important;
  }
}

@media (max-width: 480px) {
  .ept-bench.ept-mode-production .ept-flow-workspace__canvas[data-ept-production-canvas-stage] {
    height: clamp(340px, 62vh, 500px) !important;
    min-height: clamp(340px, 62vh, 500px) !important;
    padding: 12px !important;
  }
}


/* WORKSPACE-2.1 — Shared Workspace Dual Fit View Mode.
   Shared workspace only: keep the stable Fit Page mode and add Large View as
   the practical editing view. Large View uses width-fit rendering and lets the
   preview stage scroll vertically instead of shrinking the PDF too much. */
.ept-bench {
  --ept-design-stage: "WORKSPACE-2.1 shared-workspace-dual-fit-view-mode";
}

.ept-bench.ept-mode-production .ept-preview-zoom-family select[data-ept-zoom-mode-control="dual-fit"],
.ept-bench select[data-ept-workspace-zoom][data-ept-zoom-mode-control="dual-fit"] {
  cursor: pointer !important;
  opacity: 0 !important;
}

.ept-bench.ept-mode-production[data-ept-workspace-zoom-mode="large"] .ept-flow-workspace__canvas[data-ept-production-canvas-stage] {
  align-items: flex-start !important;
  justify-content: center !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding-bottom: 28px !important;
}

.ept-bench.ept-mode-production[data-ept-workspace-zoom-mode="fit"] .ept-flow-workspace__canvas[data-ept-production-canvas-stage] {
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.ept-bench.ept-mode-production[data-ept-workspace-zoom-mode="large"] [data-ept-production-canvas-target],
.ept-bench.ept-mode-production[data-ept-workspace-zoom-mode="large"] [data-ept-production-canvas-target] .ept-pdf-canvas {
  max-height: none !important;
}

.ept-bench.ept-mode-production[data-ept-workspace-zoom-mode="fit"] [data-ept-production-canvas-target],
.ept-bench.ept-mode-production[data-ept-workspace-zoom-mode="fit"] [data-ept-production-canvas-target] .ept-pdf-canvas {
  max-height: 100% !important;
  max-width: 100% !important;
}

.ept-bench.ept-mode-production[data-ept-workspace-zoom-mode="large"] .ept-preview-zoom-family {
  min-width: 158px !important;
}

.ept-bench.ept-mode-production[data-ept-workspace-zoom-mode="fit"] .ept-preview-zoom-family {
  min-width: 144px !important;
}

@media (max-width: 760px) {
  .ept-bench.ept-mode-production[data-ept-workspace-zoom-mode="large"] .ept-flow-workspace__canvas[data-ept-production-canvas-stage] {
    max-height: 70vh !important;
  }
}


/* WORKSPACE-2.2 — Shared Workspace Default Fit Page + View Label Guard.
   Start in Fit page so the full PDF page is visible first. Keep the native
   select invisible but clickable, because the visible label is rendered by the
   shared display span; this prevents a blank white select from covering the
   View / Fit page text. */
.ept-bench {
  --ept-design-stage: "WORKSPACE-2.2 shared-workspace-default-fit-page-view-label-guard";
}

.ept-bench.ept-mode-production .ept-preview-zoom-family select[data-ept-zoom-mode-control="dual-fit"],
.ept-bench select[data-ept-workspace-zoom][data-ept-zoom-mode-control="dual-fit"] {
  opacity: 0 !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

.ept-bench.ept-mode-production .ept-preview-zoom-display-family {
  display: inline-flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* WORKSPACE-3 — Shared Preview Overlay Coordinate Parity.
   Overlay surfaces now follow the rendered PDF canvas, not the outer preview
   frame. This keeps tool previews aligned across Fit page and Large view. */
.ept-bench {
  --ept-design-stage: "WORKSPACE-3 shared-preview-overlay-coordinate-parity";
}

.ept-bench [data-ept-overlay-page] {
  overflow: hidden !important;
  position: relative !important;
}

.ept-bench.ept-mode-production [data-ept-production-canvas-target] [data-ept-overlay-layer] {
  bottom: 0 !important;
  left: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  z-index: 19 !important;
}

.ept-bench.ept-mode-production [data-ept-production-canvas-target] .ept-pdf-canvas {
  position: relative !important;
  z-index: 1 !important;
}

.ept-bench.ept-mode-production [data-ept-production-canvas-target] .ept-flow-paper__placeholder {
  position: relative !important;
  z-index: 0 !important;
}

.ept-bench .ept-apn-preview-number[data-ept-apn-preview-source="shared-overlay-coordinate"] {
  transform: var(--ept-apn-preview-transform, translateZ(0)) !important;
  will-change: left, top, font-size, transform, opacity !important;
}

/* WORKSPACE-3.2 — Shared Preview Overlay Font Scale Parity.
   Tool preview text stays plain like exported PDF text, while this patch
   improves the resolved preview font size in Fit page and Large view. */
.ept-bench {
  --ept-design-stage: "WORKSPACE-3.2 shared-preview-overlay-font-scale-parity";
}

.ept-bench .ept-apn-preview-number[data-ept-apn-preview-visual="plain-text-export-parity"],
.ept-bench .ept-apn-preview-number[data-ept-apn-preview-visual="plain-text-font-scale-parity"] {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ept-apn-preview-color, #111827) !important;
  display: inline-block !important;
  font-family: var(--ept-apn-preview-font-family, Helvetica, Arial, sans-serif) !important;
  font-style: var(--ept-apn-preview-font-style, normal) !important;
  font-weight: var(--ept-apn-preview-font-weight, 400) !important;
  letter-spacing: normal !important;
  line-height: 1 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  opacity: var(--ept-apn-preview-opacity, 1) !important;
  padding: 0 !important;
  text-decoration: var(--ept-apn-preview-text-decoration, none) !important;
  text-shadow: none !important;
  white-space: nowrap !important;
}

.ept-bench .ept-apn-preview-number[data-ept-apn-preview-visual="plain-text-font-scale-parity"] {
  font-synthesis: none !important;
  text-rendering: geometricPrecision !important;
  transform: var(--ept-apn-preview-transform, translateZ(0)) !important;
}


/* WORKSPACE-4 — Shared Draggable Overlay Position Contract.
   Tool previews can opt into shared drag behavior while staying visually plain;
   final positions are saved in PDF-space coordinates for export parity. */
.ept-bench {
  --ept-design-stage: "WORKSPACE-4 shared-draggable-overlay-position-contract";
}

.ept-bench [data-ept-overlay-layer] [data-ept-draggable-overlay] {
  cursor: grab !important;
  pointer-events: auto !important;
  touch-action: none !important;
  user-select: none !important;
  z-index: 22 !important;
}

.ept-bench [data-ept-overlay-layer] [data-ept-draggable-overlay]:hover,
.ept-bench [data-ept-overlay-layer] [data-ept-draggable-overlay]:focus-visible,
.ept-bench [data-ept-overlay-layer] [data-ept-draggable-overlay].is-dragging {
  outline: 1px dashed rgba(37, 99, 235, .58) !important;
  outline-offset: 3px !important;
}

.ept-bench [data-ept-overlay-layer] [data-ept-draggable-overlay].is-dragging {
  cursor: grabbing !important;
}

.ept-bench .ept-apn-preview-number[data-ept-apn-position-mode="custom"] {
  cursor: grab !important;
}

/* WORKSPACE-4.1 — Draggable Overlay UX + Reset Custom Position Guard.
   Shared draggable overlays now distinguish select vs drag; clicks select the
   preview item, while real drags save PDF-space custom coordinates. */
.ept-bench {
  --ept-design-stage: "WORKSPACE-4.1 draggable-overlay-ux-reset-custom-position-guard";
}

.ept-bench [data-ept-overlay-layer] [data-ept-draggable-overlay].is-selected,
.ept-bench [data-ept-overlay-layer] [data-ept-draggable-overlay][data-ept-overlay-selected="true"] {
  outline: 1px dashed rgba(37, 99, 235, .72) !important;
  outline-offset: 4px !important;
}

.ept-bench [data-ept-overlay-layer] [data-ept-draggable-overlay][data-ept-apn-drag-state="selected"] {
  cursor: grab !important;
}

.ept-bench [data-ept-overlay-layer] [data-ept-draggable-overlay][data-ept-apn-drag-state="dragging"] {
  cursor: grabbing !important;
  outline-color: rgba(14, 165, 233, .95) !important;
}

/* WORKSPACE-4.2 — Draggable Overlay Keyboard Nudge Guard.
   Selected shared overlays can be moved with arrow keys; the movement is
   still resolved back to PDF-space coordinates for export parity. */
.ept-bench {
  --ept-design-stage: "WORKSPACE-4.2 draggable-overlay-keyboard-nudge-guard";
}

.ept-bench [data-ept-overlay-layer] [data-ept-draggable-overlay][data-ept-overlay-selected="true"] {
  cursor: grab !important;
}

/* WORKSPACE-4.3 — Draggable Overlay Keyboard Y-Axis Parity.
   Arrow Up/Down now follows the final PDF-space movement direction observed
   by users, while drag and export custom coordinates stay unchanged. */
.ept-bench {
  --ept-design-stage: "WORKSPACE-4.3 draggable-overlay-keyboard-y-axis-parity";
}

/* WORKSPACE-4.5 — Draggable Overlay Keyboard Focus Ownership Guard.
   Selected overlay items remain the keyboard target even when browser focus is
   not exactly on the preview text; inputs/selects are excluded. */
.ept-bench {
  --ept-design-stage: "WORKSPACE-4.5 draggable-overlay-keyboard-focus-ownership-guard";
}

.ept-bench [data-ept-overlay-layer] [data-ept-draggable-overlay].is-keyboard-nudging,
.ept-bench [data-ept-overlay-layer] [data-ept-draggable-overlay][data-ept-overlay-keyboard-nudge="true"] {
  outline-color: rgba(79, 70, 229, .92) !important;
  outline-style: dashed !important;
  outline-width: 1px !important;
}

.ept-bench [data-ept-overlay-layer] [data-ept-draggable-overlay][data-ept-overlay-keyboard-owner="true"] {
  outline-offset: 5px !important;
}


/* WORKSPACE-4.6 — Draggable Overlay Keyboard Delta Parity Guard.
   Keyboard nudges now expose explicit PDF deltas so consumers do not re-save
   stale DOM box y positions when moving left/right or when moving vertically. */
.ept-bench {
  --ept-design-stage: "WORKSPACE-4.6 draggable-overlay-keyboard-delta-parity-guard";
}

.ept-bench [data-ept-overlay-layer] [data-ept-draggable-overlay][data-ept-overlay-keyboard-nudge="true"] {
  outline-offset: 5px !important;
}

/* WORKSPACE-7 — Shared Overlay Multi Object Selection Guard.
   Only one shared overlay object should appear selected inside the workspace;
   selected objects sit above non-selected overlays and own keyboard nudges. */
.ept-bench {
  --ept-design-stage: "WORKSPACE-7 shared-overlay-multi-object-selection-guard";
}

.ept-bench [data-ept-overlay-layer] [data-ept-draggable-overlay][data-ept-overlay-selected="true"] {
  z-index: 34 !important;
}

.ept-bench [data-ept-overlay-layer] [data-ept-draggable-overlay]:not([data-ept-overlay-selected="true"]) {
  z-index: 22 !important;
}

/* WORKSPACE-8 — Shared Overlay Resize / Rotate Foundation
   Transform handles are opt-in through data-ept-overlay-transformable="true".
   Page-number keeps canResize/canRotate false, so this foundation does not
   change the current Add Page Numbers interaction surface. */
.ept-bench [data-ept-overlay-layer] [data-ept-draggable-overlay][data-ept-overlay-transformable="true"] {
  --ept-design-stage: "WORKSPACE-8 shared-overlay-resize-rotate-foundation";
}

.ept-bench [data-ept-overlay-layer] [data-ept-draggable-overlay][data-ept-overlay-transformable="true"] .ept-overlay-transform-handle {
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(37, 99, 235, 0.85);
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
  opacity: 0;
  pointer-events: none;
  z-index: 8;
}

.ept-bench [data-ept-overlay-layer] [data-ept-draggable-overlay][data-ept-overlay-transformable="true"][data-ept-overlay-selected="true"] .ept-overlay-transform-handle,
.ept-bench [data-ept-overlay-layer] [data-ept-draggable-overlay][data-ept-overlay-transformable="true"].is-selected .ept-overlay-transform-handle {
  opacity: 1;
  pointer-events: auto;
}

.ept-bench [data-ept-overlay-layer] [data-ept-overlay-resize-handle="nw"] {
  left: -6px;
  top: -6px;
  cursor: nwse-resize;
}

.ept-bench [data-ept-overlay-layer] [data-ept-overlay-resize-handle="ne"] {
  right: -6px;
  top: -6px;
  cursor: nesw-resize;
}

.ept-bench [data-ept-overlay-layer] [data-ept-overlay-resize-handle="sw"] {
  left: -6px;
  bottom: -6px;
  cursor: nesw-resize;
}

.ept-bench [data-ept-overlay-layer] [data-ept-overlay-resize-handle="se"] {
  right: -6px;
  bottom: -6px;
  cursor: nwse-resize;
}

.ept-bench [data-ept-overlay-layer] [data-ept-overlay-rotate-handle] {
  left: 50%;
  top: -26px;
  transform: translateX(-50%);
  cursor: grab;
}

.ept-bench [data-ept-overlay-layer] [data-ept-draggable-overlay].is-resizing,
.ept-bench [data-ept-overlay-layer] [data-ept-draggable-overlay][data-ept-overlay-transforming="resize"] {
  cursor: nwse-resize;
  outline-color: rgba(37, 99, 235, 0.85);
}

.ept-bench [data-ept-overlay-layer] [data-ept-draggable-overlay].is-rotating,
.ept-bench [data-ept-overlay-layer] [data-ept-draggable-overlay][data-ept-overlay-transforming="rotate"] {
  cursor: grabbing;
  outline-color: rgba(124, 58, 237, 0.85);
}

/* WORKSPACE-9 — Shared Workspace Mobile / Touch Guard.
   Mobile and tablet interaction is intentionally two-step: first tap selects an
   overlay, second touch-drag moves it. This keeps page/canvas scrolling usable
   and prevents accidental overlay movement on touch devices. */
.ept-bench {
  --ept-design-stage: "WORKSPACE-9 shared-workspace-mobile-touch-guard";
}

@media (pointer: coarse), (max-width: 760px) {
  .ept-bench.ept-mode-production .ept-flow-workspace {
    gap: 12px !important;
  }

  .ept-bench.ept-mode-production .ept-preview-toolbar-family,
  .ept-bench.ept-mode-production .ept-flow-page-row {
    flex-wrap: wrap !important;
  }

  .ept-bench.ept-mode-production .ept-flow-workspace__canvas[data-ept-production-canvas-stage] {
    max-height: min(72dvh, 640px) !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .ept-bench.ept-mode-production[data-ept-workspace-zoom-mode="large"] .ept-flow-workspace__canvas[data-ept-production-canvas-stage] {
    overflow: auto !important;
    touch-action: pan-x pan-y pinch-zoom !important;
  }

  .ept-bench.ept-mode-production[data-ept-workspace-zoom-mode="fit"] .ept-flow-workspace__canvas[data-ept-production-canvas-stage] {
    touch-action: pan-y pinch-zoom !important;
  }

  .ept-bench [data-ept-overlay-layer] [data-ept-draggable-overlay] {
    touch-action: pan-y pinch-zoom !important;
  }

  .ept-bench [data-ept-overlay-layer] [data-ept-draggable-overlay]::after {
    border-radius: 10px;
    content: "";
    inset: -14px;
    pointer-events: auto;
    position: absolute;
  }

  .ept-bench [data-ept-overlay-layer] [data-ept-draggable-overlay][data-ept-overlay-selected="true"],
  .ept-bench [data-ept-overlay-layer] [data-ept-draggable-overlay].is-dragging,
  .ept-bench [data-ept-overlay-layer] [data-ept-draggable-overlay][data-ept-overlay-dragging="true"],
  .ept-bench [data-ept-overlay-layer] [data-ept-draggable-overlay][data-ept-overlay-touch-state="dragging"] {
    touch-action: none !important;
  }

  .ept-bench [data-ept-overlay-layer] [data-ept-draggable-overlay][data-ept-overlay-touch-state="selected"] {
    outline-offset: 7px !important;
  }

  .ept-bench [data-ept-overlay-layer] [data-ept-draggable-overlay][data-ept-overlay-transformable="true"] .ept-overlay-transform-handle {
    height: 18px !important;
    min-height: 18px !important;
    min-width: 18px !important;
    width: 18px !important;
  }

  .ept-bench [data-ept-overlay-layer] [data-ept-overlay-resize-handle="nw"] {
    left: -13px !important;
    top: -13px !important;
  }

  .ept-bench [data-ept-overlay-layer] [data-ept-overlay-resize-handle="ne"] {
    right: -13px !important;
    top: -13px !important;
  }

  .ept-bench [data-ept-overlay-layer] [data-ept-overlay-resize-handle="sw"] {
    bottom: -13px !important;
    left: -13px !important;
  }

  .ept-bench [data-ept-overlay-layer] [data-ept-overlay-resize-handle="se"] {
    bottom: -13px !important;
    right: -13px !important;
  }

  .ept-bench [data-ept-overlay-layer] [data-ept-overlay-rotate-handle] {
    top: -38px !important;
  }
}

@media (max-width: 480px) {
  .ept-bench.ept-mode-production .ept-flow-workspace__canvas[data-ept-production-canvas-stage] {
    height: clamp(320px, 58dvh, 520px) !important;
    min-height: clamp(320px, 58dvh, 520px) !important;
    padding: 10px !important;
  }
}

/* WORKSPACE-11 — Shared Workspace Error / Recovery Guard */
.ept-workspace-recovery {
  align-items: flex-start;
  background: linear-gradient(180deg, #fff7ed, #ffffff);
  border: 1px solid rgba(251, 146, 60, .38);
  border-radius: 18px;
  box-shadow: 0 18px 42px rgba(124, 45, 18, .10);
  display: flex;
  gap: 12px;
  margin-top: 12px;
  padding: 14px;
}

.ept-workspace-recovery[hidden] {
  display: none !important;
}

.ept-workspace-recovery__icon {
  align-items: center;
  background: #fed7aa;
  border: 1px solid rgba(251, 146, 60, .54);
  border-radius: 14px;
  color: #9a3412 !important;
  display: inline-flex;
  flex: 0 0 34px;
  font-weight: 950;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.ept-workspace-recovery__body {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.ept-workspace-recovery__body strong {
  color: #7c2d12 !important;
  font-size: .94rem;
  line-height: 1.25;
}

.ept-workspace-recovery__body p,
.ept-workspace-recovery__body small,
.ept-workspace-recovery__body em {
  color: #9a3412 !important;
  font-size: .78rem;
  line-height: 1.4;
  margin: 0;
}

.ept-workspace-recovery__body small {
  font-weight: 850;
  letter-spacing: .02em;
}

.ept-workspace-recovery__body em {
  color: #64748b !important;
  font-style: normal;
}

.ept-workspace-recovery__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 7px;
}

.ept-workspace-recovery.is-render-error {
  background: linear-gradient(180deg, #eff6ff, #ffffff);
  border-color: rgba(37, 99, 235, .26);
}

.ept-workspace-recovery.is-render-error .ept-workspace-recovery__icon {
  background: #dbeafe;
  border-color: rgba(37, 99, 235, .34);
  color: #1d4ed8 !important;
}

.ept-workspace-recovery.is-render-error .ept-workspace-recovery__body strong,
.ept-workspace-recovery.is-render-error .ept-workspace-recovery__body p,
.ept-workspace-recovery.is-render-error .ept-workspace-recovery__body small {
  color: #1e3a8a !important;
}

@media (max-width: 720px) {
  .ept-workspace-recovery {
    border-radius: 16px;
    padding: 12px;
  }

  .ept-workspace-recovery__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .ept-workspace-recovery__actions .ept-button {
    justify-content: center;
    width: 100%;
  }
}

/* WORKSPACE-12 — Shared Workspace Accessibility Guard.
   Keep keyboard focus visible and provide stronger selected-overlay affordance
   without changing placement, export, drag, touch, or resize/rotate contracts. */
.ept-bench {
  --ept-design-stage: "WORKSPACE-12 shared-workspace-accessibility-guard";
}

.ept-bench.ept-mode-production :where(button, [role="button"], select, input, textarea, a):focus-visible {
  outline: 2px solid rgba(37, 99, 235, .85) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .18) !important;
}

.ept-bench.ept-mode-production [data-ept-production-pages][role="navigation"] {
  scroll-margin-block: 16px;
}

.ept-bench.ept-mode-production .ept-flow-page-dot:focus-visible,
.ept-bench.ept-mode-production .ept-preview-nav-family:focus-visible {
  border-color: rgba(37, 99, 235, .85) !important;
  transform: translateY(-1px);
}

.ept-bench [data-ept-overlay-layer] [data-ept-draggable-overlay][role="button"]:focus-visible,
.ept-bench [data-ept-overlay-layer] [data-ept-draggable-overlay][aria-pressed="true"] {
  outline: 2px dashed rgba(37, 99, 235, .92) !important;
  outline-offset: 6px !important;
}

.ept-bench [data-ept-overlay-layer] [data-ept-draggable-overlay][aria-pressed="true"]::before {
  border-radius: 8px;
  content: "";
  inset: -7px;
  pointer-events: none;
  position: absolute;
}


/* SHARED-WORKSPACE-FIX-1 — Right Panel Scroll / Overflow Guard.
   Shared workspace layer only: restores a viewport-safe scroll owner for the
   right editor panel after later workspace canvas sizing rules made the panel
   overflow visible. Applies to every tool that uses the shared right panel. */
.ept-bench {
  --ept-design-stage: "SHARED-WORKSPACE-FIX-1 right-panel-scroll-overflow-guard";
  --ept-shared-right-panel-max-height: min(760px, calc(100vh - 128px));
  --ept-shared-right-panel-body-max-height: calc(100vh - 250px);
}

.ept-bench.ept-mode-production [data-ept-editor-panel-shell].ept-flow-workspace__panel {
  align-content: stretch !important;
  align-self: start !important;
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  max-height: var(--ept-shared-right-panel-max-height) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.ept-bench.ept-mode-production [data-ept-tool-panel-head],
.ept-bench.ept-mode-production .ept-editor-tabs-family {
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

.ept-bench.ept-mode-production .ept-editor-panel-body-family {
  flex: 1 1 auto !important;
  max-height: var(--ept-shared-right-panel-body-max-height) !important;
  min-height: 0 !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding-bottom: 18px !important;
  padding-right: 4px !important;
  scrollbar-gutter: stable !important;
  scrollbar-width: thin !important;
}

.ept-bench.ept-mode-production [data-ept-tool-panel-mount],
.ept-bench.ept-mode-production [data-ept-tool-panel-mount] > *,
.ept-bench.ept-mode-production [data-ept-panel-tab-content] {
  max-width: 100% !important;
  min-height: 0 !important;
  min-width: 0 !important;
}

.ept-bench.ept-mode-production [data-ept-panel-tab-content].is-active {
  display: block !important;
}

@media (max-width: 1180px) and (min-width: 921px) {
  .ept-bench {
    --ept-shared-right-panel-max-height: min(720px, calc(100vh - 112px));
    --ept-shared-right-panel-body-max-height: calc(100vh - 224px);
  }
}

@media (max-width: 920px) {
  .ept-bench.ept-mode-production [data-ept-editor-panel-shell].ept-flow-workspace__panel {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .ept-bench.ept-mode-production .ept-editor-panel-body-family {
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
    padding-right: 0 !important;
  }
}


/* SHARED-WORKSPACE-FIX-2 — Right Panel Natural Height / No Inner Scroll Layout.
   Shared workspace layer only: removes the desktop nested scrollbar introduced by
   SHARED-WORKSPACE-FIX-1 and lets the right editor panel grow naturally. The
   page/workspace becomes the scroll owner while tabs continue to keep each tool
   panel compact and discoverable. */
.ept-bench {
  --ept-design-stage: "SHARED-WORKSPACE-FIX-2 right-panel-natural-height-no-inner-scroll";
  --ept-shared-right-panel-max-height: none;
  --ept-shared-right-panel-body-max-height: none;
}

.ept-bench.ept-mode-production .ept-flow-workspace {
  align-items: start !important;
}

.ept-bench.ept-mode-production [data-ept-editor-panel-shell].ept-flow-workspace__panel {
  align-content: start !important;
  align-self: start !important;
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.ept-bench.ept-mode-production [data-ept-tool-panel-head],
.ept-bench.ept-mode-production .ept-editor-tabs-family {
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

.ept-bench.ept-mode-production .ept-editor-tabs-family {
  overflow-x: auto !important;
  overflow-y: visible !important;
}

.ept-bench.ept-mode-production .ept-editor-panel-body-family {
  flex: 0 0 auto !important;
  max-height: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  overflow: visible !important;
  overscroll-behavior: auto !important;
  padding-bottom: 0 !important;
  padding-right: 0 !important;
  scrollbar-gutter: auto !important;
  scrollbar-width: auto !important;
}

.ept-bench.ept-mode-production [data-ept-tool-panel-mount],
.ept-bench.ept-mode-production [data-ept-tool-panel-mount] > *,
.ept-bench.ept-mode-production [data-ept-panel-tab-content] {
  max-width: 100% !important;
  min-height: 0 !important;
  min-width: 0 !important;
  overflow: visible !important;
}

.ept-bench.ept-mode-production [data-ept-panel-tab-content].is-active {
  display: block !important;
}

@media (max-width: 920px) {
  .ept-bench.ept-mode-production [data-ept-editor-panel-shell].ept-flow-workspace__panel,
  .ept-bench.ept-mode-production .ept-editor-panel-body-family {
    max-height: none !important;
    overflow: visible !important;
  }
}


/* SHARED-WORKSPACE-FIX-3 — Compact Right Panel Header / Remove Large Intro Cards.
   Shared workspace layer only: the right panel now keeps a compact identity
   row and lets the active tab controls start immediately. Tool-owned intro
   cards are hidden inside the shared panel so Add Header/Footer, Add Page
   Numbers, and future tools do not duplicate the same large heading. */
.ept-bench {
  --ept-design-stage: "SHARED-WORKSPACE-FIX-3 compact-right-panel-header";
}

.ept-bench.ept-mode-production [data-ept-editor-panel-shell].ept-flow-workspace__panel {
  gap: 10px !important;
  padding-top: 14px !important;
}

.ept-bench.ept-mode-production .ept-panel-head-family {
  align-items: center !important;
  border-bottom: 0 !important;
  display: flex !important;
  gap: 10px !important;
  justify-content: space-between !important;
  margin: 0 0 4px !important;
  min-height: 30px !important;
  padding: 0 !important;
}

.ept-bench.ept-mode-production .ept-panel-head-family small {
  flex: 0 0 auto !important;
  margin: 0 !important;
  min-height: 24px !important;
  padding: 0 9px !important;
  white-space: nowrap !important;
}

.ept-bench.ept-mode-production .ept-panel-head-family strong {
  color: #0f172a !important;
  flex: 1 1 auto !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  letter-spacing: -.02em !important;
  line-height: 1.15 !important;
  margin: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-align: right !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.ept-bench.ept-mode-production .ept-panel-head-family span {
  display: none !important;
}

.ept-bench.ept-mode-production .ept-editor-tabs-family {
  margin-top: 0 !important;
}

.ept-bench.ept-mode-production [data-ept-tool-panel-mount] > [data-ept-tool-owned-panel] > [class*="panel__header"],
.ept-bench.ept-mode-production [data-ept-tool-panel-mount] .ept-apn-panel__header,
.ept-bench.ept-mode-production [data-ept-tool-panel-mount] .ept-ahf-panel__header {
  display: none !important;
}

.ept-bench.ept-mode-production [data-ept-tool-panel-mount] .ept-apn-panel,
.ept-bench.ept-mode-production [data-ept-tool-panel-mount] .ept-add-header-footer-tool {
  gap: 10px !important;
}

@media (max-width: 560px) {
  .ept-bench.ept-mode-production .ept-panel-head-family {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  .ept-bench.ept-mode-production .ept-panel-head-family strong {
    text-align: left !important;
    width: 100% !important;
  }
}

/* SHARED-TABS-1 — Responsive Right Panel Tabs Foundation.
   Shared workspace layer: every production tool using the shared right-panel
   tab row gets count-aware grid/compact-grid/scroll behavior, ellipsis-safe
   labels, and full-label tooltip/ARIA support from ToolIntegration JS. */
.ept-bench {
  --ept-design-stage: "SHARED-TABS-1 responsive-right-panel-tabs";
  --ept-editor-tab-count: 4;
  --ept-editor-tab-visible-count: 4;
  --ept-shared-tab-gap: 4px;
}

.ept-bench.ept-mode-production .ept-editor-tabs-family[data-ept-shared-tabs-stage="SHARED-TABS-1"] {
  box-sizing: border-box !important;
  gap: var(--ept-shared-tab-gap) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  width: 100% !important;
}

.ept-bench.ept-mode-production .ept-editor-tabs-family[data-ept-shared-tabs-stage="SHARED-TABS-1"][data-ept-editor-tab-mode="grid"],
.ept-bench.ept-mode-production .ept-editor-tabs-family[data-ept-shared-tabs-stage="SHARED-TABS-1"][data-ept-editor-tab-mode="compact-grid"] {
  display: grid !important;
  grid-template-columns: repeat(var(--ept-editor-tab-visible-count, var(--ept-editor-tab-count, 4)), minmax(0, 1fr)) !important;
  overflow: hidden !important;
  overflow-x: hidden !important;
}

.ept-bench.ept-mode-production .ept-editor-tabs-family[data-ept-shared-tabs-stage="SHARED-TABS-1"][data-ept-editor-tab-mode="scroll"] {
  display: flex !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scroll-snap-type: x proximity !important;
  -webkit-overflow-scrolling: touch !important;
}

.ept-bench.ept-mode-production .ept-editor-tabs-family[data-ept-shared-tabs-stage="SHARED-TABS-1"] .ept-editor-tab-family {
  box-sizing: border-box !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.ept-bench.ept-mode-production .ept-editor-tabs-family[data-ept-shared-tabs-stage="SHARED-TABS-1"][data-ept-editor-tab-mode="grid"] .ept-editor-tab-family,
.ept-bench.ept-mode-production .ept-editor-tabs-family[data-ept-shared-tabs-stage="SHARED-TABS-1"][data-ept-editor-tab-mode="compact-grid"] .ept-editor-tab-family {
  flex: 1 1 0 !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  width: 100% !important;
}

.ept-bench.ept-mode-production .ept-editor-tabs-family[data-ept-shared-tabs-stage="SHARED-TABS-1"][data-ept-editor-tab-mode="compact-grid"] .ept-editor-tab-family {
  font-size: 10.5px !important;
  letter-spacing: -.018em !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
}

.ept-bench.ept-mode-production .ept-editor-tabs-family[data-ept-shared-tabs-stage="SHARED-TABS-1"][data-ept-editor-tab-mode="scroll"] .ept-editor-tab-family {
  flex: 0 0 auto !important;
  min-width: max-content !important;
  scroll-snap-align: start !important;
}

.ept-bench.ept-mode-production .ept-editor-tab-label-family {
  display: block !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 560px) {
  .ept-bench.ept-mode-production .ept-editor-tabs-family[data-ept-shared-tabs-stage="SHARED-TABS-1"] {
    --ept-shared-tab-gap: 3px;
    padding: 4px !important;
  }

  .ept-bench.ept-mode-production .ept-editor-tabs-family[data-ept-shared-tabs-stage="SHARED-TABS-1"][data-ept-editor-tab-mode="compact-grid"] .ept-editor-tab-family {
    font-size: 10px !important;
    min-height: 28px !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
  }
}


/* SHARED-PREVIEW-1 — Adaptive Large View Preview Height.
   In Large view, the shared preview stage follows the rendered PDF page height
   so users scroll the workspace/page naturally instead of a small internal
   preview viewport. Fit page keeps the existing contained behavior. */
.ept-bench {
  --ept-design-stage: "SHARED-PREVIEW-1 adaptive-large-view-preview-height";
  --ept-large-preview-stage-height-px: auto;
  --ept-large-preview-page-height-px: auto;
}

.ept-bench.ept-mode-production[data-ept-workspace-zoom-mode="large"] .ept-flow-workspace__canvas[data-ept-production-canvas-stage][data-ept-shared-preview-adaptive-large="1"] {
  height: var(--ept-large-preview-stage-height-px) !important;
  max-height: none !important;
  min-height: var(--ept-large-preview-stage-height-px) !important;
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  overscroll-behavior: auto !important;
}

.ept-bench.ept-mode-production[data-ept-workspace-zoom-mode="large"] .ept-flow-workspace__canvas[data-ept-production-canvas-stage][data-ept-shared-preview-adaptive-large="1"] [data-ept-production-canvas-target] {
  max-height: none !important;
}

.ept-bench.ept-mode-production[data-ept-workspace-zoom-mode="fit"] .ept-flow-workspace__canvas[data-ept-production-canvas-stage] {
  max-height: clamp(390px, calc(100vh - 310px), 720px);
}

@media (max-width: 760px) {
  .ept-bench.ept-mode-production[data-ept-workspace-zoom-mode="large"] .ept-flow-workspace__canvas[data-ept-production-canvas-stage][data-ept-shared-preview-adaptive-large="1"] {
    max-height: none !important;
    overflow: visible !important;
  }
}