.plasmid-studio-root {
  --ps-ink: #132238;
  --ps-muted: #5d6b7c;
  --ps-line: #d9e2ec;
  --ps-panel: #fff;
  --ps-soft: #f4f8fb;
  --ps-blue: #1266d6;
  --ps-teal: #087f8c;
  --ps-navy: #12345b;
  --ps-good: #18864b;
  --ps-warn: #b86600;
  --ps-danger: #bd2c3a;
  color: var(--ps-ink);
  background: var(--ps-soft);
  font: 13px/1.4 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  min-width: 0;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.plasmid-studio-root.ps-document-scroll {
  overflow-x: hidden;
  overflow-y: auto;
  overflow-anchor: none;
}

.plasmid-studio-root * { box-sizing: border-box; }
.plasmid-studio-root button,
.plasmid-studio-root input,
.plasmid-studio-root select,
.plasmid-studio-root textarea { font: inherit; }

.ps-app {
  --ps-tool-color: #1677c8;
  display: grid;
  grid-template-rows: 94px 34px minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 620px;
  overflow: hidden;
  background: var(--ps-soft);
}

.ps-document-bar {
  position: relative;
  z-index: 72;
  display: flex;
  align-items: end;
  gap: 4px;
  min-width: 0;
  padding: 3px 8px 0;
  overflow: hidden;
  border-bottom: 1px solid #bccbd8;
  background: linear-gradient(#eef4f8, #e3ebf2);
}
.ps-document-tabs {
  display: flex;
  align-self: stretch;
  align-items: end;
  gap: 3px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.ps-document-tab {
  display: inline-flex;
  align-items: center;
  flex: 0 1 210px;
  min-width: 116px;
  max-width: 220px;
  height: 29px;
  overflow: hidden;
  border: 1px solid #c7d3dd;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  background: rgb(244 248 251 / .84);
}
.ps-document-tab.active {
  border-color: color-mix(in srgb, var(--ps-document-color) 48%, #c7d3dd);
  background: #fff;
  box-shadow: inset 0 3px var(--ps-document-color);
}
.ps-document-switch {
  display: grid;
  grid-template-columns: 7px minmax(40px, 1fr) auto;
  align-items: center;
  gap: 5px;
  min-width: 0;
  height: 100%;
  padding: 3px 4px 3px 8px;
  overflow: hidden;
  border: 0;
  color: #526476;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.ps-document-tab.active .ps-document-switch { color: #1c3348; font-weight: 700; }
.ps-document-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ps-document-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ps-document-color) 15%, white);
}
.ps-document-name {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ps-document-switch small {
  color: #7a8996;
  font-size: 8px;
  font-weight: 500;
  white-space: nowrap;
}
.ps-document-close {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-right: 3px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  color: #758493;
  background: transparent;
  cursor: pointer;
  line-height: 1;
}
.ps-document-close:hover { color: #9e2540; background: #fae8ec; }
.ps-document-new {
  flex: 0 0 26px;
  height: 25px;
  margin-bottom: 2px;
  padding: 0;
  border: 1px solid #bdcad5;
  border-radius: 6px;
  color: #1769a8;
  background: #fff;
  cursor: pointer;
  font-size: 16px;
}
.ps-document-new:hover { border-color: #4f91c4; background: #eef8ff; }
.ps-document-count {
  margin: 0 2px 7px auto;
  color: #738291;
  font-size: 8px;
  white-space: nowrap;
}

.ps-menubar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 8px;
  background: #f8fafc;
  border-bottom: 1px solid var(--ps-line);
  color: #273a51;
}

.ps-menu { position: relative; }
.ps-menu > summary {
  padding: 5px 8px;
  border-radius: 4px;
  cursor: default;
  list-style: none;
}
.ps-menu > summary::-webkit-details-marker { display: none; }
.ps-menu[open] > summary, .ps-menu > summary:hover { background: #e7eef6; }
.ps-menu-drop {
  position: absolute;
  z-index: 40;
  top: 27px;
  left: 0;
  min-width: 210px;
  padding: 5px;
  border: 1px solid #cbd7e3;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 32px #18344f2b;
}
.ps-menu-drop button {
  display: block;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: 5px;
  text-align: left;
  color: var(--ps-ink);
  background: transparent;
}
.ps-menu-drop button:hover { background: #eaf2fc; }
/* Mounted on document.body (so it can float above everything), so tokens are
   redeclared locally rather than relying on .plasmid-studio-root scoping. */
.ps-context-menu {
  position: fixed;
  z-index: 900;
  min-width: 224px;
  padding: 6px;
  border: 1px solid #c7d2dc;
  border-radius: 10px;
  background: rgb(255 255 255 / .98);
  color: #132238;
  box-shadow: 0 16px 42px #18344f38, 0 2px 8px #18344f1f;
  backdrop-filter: blur(12px);
  animation: ps-context-in 90ms ease-out;
}
.ps-context-menu button {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  min-height: 30px;
  padding: 6px 10px;
  border: 0;
  border-radius: 6px;
  text-align: left;
  color: inherit;
  background: transparent;
  font-size: 12px;
  cursor: pointer;
}
.ps-context-menu button:hover,
.ps-context-menu button:focus-visible { color: #083f76; background: #e8f2fc; outline: none; }
.ps-context-menu button[disabled] { opacity: .42; cursor: default; }
.ps-context-menu button[disabled]:hover { color: inherit; background: transparent; }
.ps-context-label { flex: 1; white-space: nowrap; }
.ps-context-shortcut { color: #6a7a8c; font-size: 11px; font-variant-numeric: tabular-nums; }
.ps-context-menu button:hover .ps-context-shortcut { color: #2f6ea8; }
.ps-context-arrow { margin-right: -2px; color: #6a7a8c; font-size: 13px; }
.ps-context-menu button.checked .ps-context-label::before { content: "✓  "; }
.ps-context-menu button:not(.checked) .ps-context-label { padding-left: 0; }
.ps-context-separator { margin: 5px 6px; border-top: 1px solid #d9e3ed; }
/* Submenus are appended inside their parent level, which is positioned, so
   they anchor to the hovered row via inline top/left. */
.ps-context-submenu {
  position: absolute;
  z-index: 1;
  min-width: 210px;
  animation: ps-context-in 80ms ease-out;
}
.ps-context-menu button.has-submenu[aria-expanded="true"] { color: #083f76; background: #e8f2fc; }
@keyframes ps-context-in {
  from { opacity: 0; transform: translateY(-3px) scale(.985); }
}
@media (prefers-color-scheme: dark) {
  .ps-context-menu { background: #1d2a38; color: #e4edf6; border-color: #34475b; }
  .ps-context-menu button:hover { background: #24344470; }
}
:root[data-theme="dark"] .ps-context-menu { background: #1d2a38; color: #e4edf6; border-color: #34475b; }
:root[data-theme="dark"] .ps-context-menu button:hover { background: #24344470; }
:root[data-theme="light"] .ps-context-menu { background: #fff; color: #132238; border-color: #cbd7e3; }
@media (prefers-color-scheme: dark) {
  .ps-context-separator { border-top-color: #34475b; }
  .ps-context-shortcut, .ps-context-arrow { color: #93a6ba; }
}
:root[data-theme="dark"] .ps-context-separator { border-top-color: #34475b; }
:root[data-theme="dark"] .ps-context-shortcut,
:root[data-theme="dark"] .ps-context-arrow { color: #93a6ba; }
.ps-menu-spacer, .ps-ribbon-grow { flex: 1; }
.ps-save-state { color: var(--ps-muted); font-size: 12px; }

/* Feature editor dialog — mounted on document.body like the context menu,
   so it also redeclares its own tokens instead of relying on root scoping. */
.ps-modal-overlay {
  position: fixed;
  z-index: 950;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: #0f1e30a3;
  animation: ps-modal-fade .12s ease;
}
@keyframes ps-modal-fade { from { opacity: 0; } to { opacity: 1; } }
.ps-modal {
  width: min(420px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  border: 1px solid #cbd7e3;
  border-radius: 12px;
  color: #132238;
  background: #fff;
  box-shadow: 0 24px 60px #0f1e304d;
  animation: ps-modal-pop .14s ease;
}
.ps-modal-wide { width: min(760px, calc(100vw - 40px)); }
.ps-modal-wide .ps-split { grid-template-columns: 1fr 1fr; }
.ps-modal-wide .ps-sequence-enzyme-picker { max-height: 320px; overflow: auto; border: 1px solid #cbd7e3; border-radius: 8px; padding: 6px; }
.ps-primer-editor-modal {
  width: min(1080px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
}
.ps-primer-editor-modal .ps-modal-form { gap: 9px; padding: 12px 14px; }
.ps-primer-editor-modal .ps-modal-grid { grid-template-columns: 230px 1fr; }
.ps-primer-editor-modal .ps-modal-grid .ps-field:first-child { grid-column: auto; }
.ps-primer-sequence-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 7px;
  padding: 3px 0;
  color: #34495c;
  font-weight: 700;
}
.ps-primer-sequence-input {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 4px 8px;
  border: 1px solid #b9c7d3;
  border-radius: 4px;
  color: #202a33;
  background: #fff;
  font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ps-primer-sequence-input:focus { outline: 2px solid #177ec4; outline-offset: 1px; }
.ps-primer-sequence-row .ps-btn { white-space: nowrap; }
.ps-primer-editor-summary {
  display: grid;
  grid-template-columns: 190px 1fr;
  align-items: center;
  gap: 12px;
  min-height: 29px;
}
.ps-primer-editor-summary > label { color: #2b3e50; font-size: 12px; }
.ps-primer-editor-summary .ps-hint { margin: 0; font-variant-numeric: tabular-nums; }
.ps-primer-binding-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 33px;
  padding: 5px 8px;
  border-block: 1px solid #d5dee6;
  color: #3a4e60;
  font-size: 11px;
}
.ps-primer-binding-nav strong { display: inline-block; min-width: 126px; color: #263c4d; }
.ps-primer-binding-nav span { color: #637486; font-variant-numeric: tabular-nums; }
.ps-primer-binding-nav button {
  width: 27px;
  height: 25px;
  margin-left: 3px;
  padding: 0;
  border: 1px solid #b8c6d2;
  border-radius: 4px;
  color: #446075;
  background: linear-gradient(#fff, #eef3f7);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.ps-primer-binding-nav button:hover { color: #0e6daa; border-color: #73a7cb; background: #eaf5fd; }
.ps-primer-editor-modal > .ps-modal-form > .ps-hint { margin: 0; min-height: 17px; }
.ps-primer-live-map {
  height: 260px;
  overflow: hidden;
  border: 1px solid #bfcbd5;
  border-radius: 4px;
  background: #fff;
}
.ps-primer-live-map.ps-snapgene-sequence .psc-toolbar,
.ps-primer-live-map.ps-snapgene-sequence .psc-selection-bar,
.ps-primer-live-map.ps-snapgene-sequence .psc-selection-tools { display: none; }
.ps-primer-live-map.ps-snapgene-sequence .psc-body { height: 100%; }
.ps-primer-live-map.ps-snapgene-sequence .psc-wrapped-detail {
  padding: 18px 12px 28px;
  overflow: auto;
}
.ps-primer-live-map.ps-snapgene-sequence .psc-sequence-line { margin-inline: 0; }
.ps-primer-live-map.ps-snapgene-sequence .psc-line-annotations { display: block; }
.ps-primer-live-map.ps-snapgene-sequence .psc-line-translations { display: grid; }
.ps-primer-editor-empty {
  display: grid;
  height: 100%;
  place-items: center;
  margin: 0;
  padding: 18px;
  color: #728291;
  text-align: center;
}
@media (max-width: 720px) {
  .ps-primer-editor-modal .ps-modal-grid,
  .ps-primer-editor-summary { grid-template-columns: 1fr; }
  .ps-primer-sequence-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ps-primer-sequence-row .ps-btn { grid-column: 1 / -1; }
  .ps-primer-live-map { height: 220px; }
}
@keyframes ps-modal-pop {
  from { opacity: 0; transform: translateY(6px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.ps-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid #e1e8ef;
}
.ps-modal-head h3 { margin: 0; font-size: 15px; }
.ps-modal-close {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  color: #5d6b7c;
  background: transparent;
  font-size: 16px;
  cursor: pointer;
}
.ps-modal-close:hover { background: #eef3f8; color: #132238; }
.ps-modal-form { display: grid; gap: 12px; padding: 14px; }
.ps-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
}
.ps-modal-grid .ps-field:first-child { grid-column: 1 / -1; }
.ps-feature-type-row { display: flex; align-items: center; gap: 7px; }
.ps-feature-type-row select { flex: 1; }
.ps-feature-swatch {
  width: 15px;
  height: 15px;
  flex: none;
  border: 1px solid #0002;
  border-radius: 50%;
  display: inline-block;
}
.ps-feature-swatch.square { border-radius: 3px; }
.ps-direction-flag {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.ps-direction-flag.forward { border-left: 7px solid #40556c; }
.ps-direction-flag.reverse { border-right: 7px solid #40556c; }
.ps-color-input {
  width: 100%;
  height: 30px;
  padding: 2px;
  border: 1px solid #c7d4df;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}
.ps-modal-error { margin: 0; color: #bd2c3a; font-size: 12px; }
.ps-modal-error[hidden] { display: none; }
.ps-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid #e1e8ef;
}
@media (prefers-color-scheme: dark) {
  .ps-modal { background: #1d2a38; color: #e4edf6; border-color: #34475b; }
  .ps-modal-head { border-color: #34475b; }
  .ps-modal-actions { border-color: #34475b; }
  .ps-modal-close:hover { background: #24344470; color: #e4edf6; }
  .ps-color-input { background: #1d2a38; border-color: #34475b; }
}
:root[data-theme="dark"] .ps-modal { background: #1d2a38; color: #e4edf6; border-color: #34475b; }
:root[data-theme="dark"] .ps-modal-head { border-color: #34475b; }
:root[data-theme="dark"] .ps-modal-actions { border-color: #34475b; }
:root[data-theme="dark"] .ps-modal-close:hover { background: #24344470; color: #e4edf6; }
:root[data-theme="dark"] .ps-color-input { background: #1d2a38; border-color: #34475b; }
:root[data-theme="light"] .ps-modal { background: #fff; color: #132238; border-color: #cbd7e3; }

.ps-ribbon {
  min-width: 0;
  overflow: hidden;
  color: var(--ps-ink);
  background: #fff;
  box-shadow: 0 2px 7px #14324d29;
  z-index: 8;
}
.ps-ribbon-strip {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 8px;
  gap: 8px;
  color: #fff;
  background: linear-gradient(180deg, #1769b0, #124f86);
}
.ps-ribbon-tabs {
  display: flex;
  align-self: stretch;
  flex: 1;
  align-items: stretch;
  gap: 1px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.ps-ribbon-tabs::-webkit-scrollbar { display: none; }
.ps-ribbon-tab {
  flex: 0 0 auto;
  padding: 0 11px;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #ffffffd6;
  background: transparent;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 650;
  line-height: 24px;
}
.ps-ribbon-tab:hover { color: #fff; background: #ffffff1f; }
.ps-ribbon-tab.active { color: #fff; border-bottom-color: #fff; background: #ffffff2b; }
.ps-ribbon-strip-state {
  padding: 2px 7px;
  border: 1px solid #ffffff42;
  border-radius: 4px;
  color: #eaf5ff;
  font-size: 10px;
  font-weight: 650;
  white-space: nowrap;
}
.ps-mode-toggle {
  display: inline-flex;
  align-items: stretch;
  margin-left: auto;
  border: 1px solid #ffffff55;
  border-radius: 999px;
  overflow: hidden;
  background: #0d3d66;
  flex: 0 0 auto;
}
.ps-mode-toggle-btn {
  border: 0;
  margin: 0;
  padding: 0 10px;
  height: 18px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #d7e8f7;
  background: transparent;
  cursor: pointer;
  line-height: 18px;
}
.ps-mode-toggle-btn:hover { background: #ffffff22; color: #fff; }
.ps-mode-toggle-btn.active {
  background: #ffffff;
  color: #124f86;
}
.ps-mode-toggle-btn.active.advanced {
  background: #f59e0b;
  color: #1f1300;
}

/* ── Advanced mode shell ─────────────────────────────────────────── */
.ps-adv-shell {
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
  gap: 0;
  min-height: 420px;
  border: 1px solid #c9d8e6;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(180deg, #f4f8fc 0%, #eef4fa 100%);
}
.ps-adv-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px;
  background: linear-gradient(180deg, #1a4f7a 0%, #123a5c 100%);
  color: #d7e8f6;
  overflow: auto;
}
.ps-adv-nav-item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 6px;
  width: 100%;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 7px 8px;
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.ps-adv-nav-item > span:first-child {
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.02em;
  opacity: 0.85;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.ps-adv-nav-item:hover { background: #ffffff18; color: #fff; }
.ps-adv-nav-item.active {
  background: #fff;
  color: #123a5c;
  box-shadow: 0 1px 2px #00000022;
}
.ps-adv-nav-item .ps-adv-chip {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 999px;
  background: #ffffff22;
  color: inherit;
}
.ps-adv-nav-item.active .ps-adv-chip {
  background: #e8f2fb;
  color: #1a5f96;
}
.ps-adv-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
}
.ps-adv-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #e5ebf1;
  background: linear-gradient(180deg, #fbfcfe, #f3f7fb);
}
.ps-adv-toolbar h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 750;
  color: #14324d;
}
.ps-adv-toolbar p,
.ps-adv-toolbar .ps-muted {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--ps-muted, #5d6b7c);
}
.ps-adv-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.ps-adv-content {
  padding: 10px 12px 14px;
  overflow: auto;
  min-height: 0;
  flex: 1;
}
.ps-adv-hero {
  display: grid;
  gap: 12px;
}
.ps-adv-hero > header h2 {
  margin: 0 0 4px;
  font-size: 18px;
  color: #123a5c;
}
.ps-adv-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 8px;
}
.ps-adv-tile-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #e8f2fb;
  color: #1a5f96;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.02em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.ps-adv-tile {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 5px;
  padding: 10px;
  border: 1px solid #d5e2ee;
  border-radius: 9px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.ps-adv-tile:hover {
  border-color: #6fa3d0;
  box-shadow: 0 4px 14px #14324d12;
}
.ps-adv-tile strong {
  font-size: 12.5px;
  font-weight: 750;
}
.ps-adv-tile span {
  font-size: 11px;
  color: var(--ps-muted, #5d6b7c);
  line-height: 1.35;
}
.ps-adv-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background: #eef3f8;
  color: #3d556c;
}
.ps-adv-chip.ready,
.ps-adv-chip.green { background: #e5f6ec; color: #1d7a45; }
.ps-adv-chip.warn,
.ps-adv-chip.yellow { background: #fff4d8; color: #8a6500; }
.ps-adv-chip.danger,
.ps-adv-chip.red { background: #fde8e8; color: #a33333; }
.ps-adv-empty {
  display: grid;
  gap: 6px;
  place-items: start;
  padding: 18px 14px;
  border: 1px dashed #c9d7e5;
  border-radius: 10px;
  background: #f8fafc;
  color: var(--ps-muted, #5d6b7c);
  font-size: 12.5px;
}
.ps-adv-empty strong { color: #17364f; font-size: 13px; }
.ps-adv-result {
  margin-top: 8px;
  padding: 10px;
  border: 1px solid #d9e4ef;
  border-radius: 9px;
  background: #f9fbfd;
}
.ps-adv-mono,
.ps-adv-content .ps-code-block,
.ps-adv-content pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  white-space: pre-wrap;
  word-break: break-word;
}
.ps-adv-stat {
  display: inline-flex;
  flex-direction: column;
  min-width: 72px;
  padding: 6px 8px;
  border: 1px solid #dce6ef;
  border-radius: 8px;
  background: #fff;
}
.ps-adv-stat strong { font-size: 14px; color: #123a5c; }
.ps-adv-stat span { font-size: 10px; color: var(--ps-muted); }
.ps-adv-split {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.8fr);
  gap: 10px;
}
.ps-adv-aside {
  display: grid;
  gap: 8px;
  align-content: start;
}
.ps-adv-content .ps-card {
  box-shadow: none;
}
.ps-adv-content .ps-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
.ps-chromatogram,
.ps-svg-slot {
  overflow: auto;
  max-width: 100%;
  border: 1px solid var(--ps-line, #dce4ec);
  border-radius: 8px;
  background: #fff;
  padding: 6px;
}
.ps-chromatogram svg,
.ps-svg-slot svg { max-width: 100%; height: auto; display: block; }
.ps-cli-out {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  white-space: pre-wrap;
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 8px;
  padding: 10px;
  min-height: 120px;
}

@media (max-width: 900px) {
  .ps-adv-shell { grid-template-columns: 1fr; }
  .ps-adv-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .ps-adv-nav-item { flex: 0 0 auto; white-space: nowrap; }
  .ps-adv-split { grid-template-columns: 1fr; }
}

:root[data-theme="dark"] .ps-adv-shell { background: #152433; border-color: #2b3d4f; }
:root[data-theme="dark"] .ps-adv-main { background: #182635; }
:root[data-theme="dark"] .ps-adv-toolbar { background: #1b2b3b; border-color: #2b3d4f; }
:root[data-theme="dark"] .ps-adv-toolbar h2 { color: #e8f1f8; }
:root[data-theme="dark"] .ps-adv-tile {
  background: #1c2c3c;
  border-color: #31485c;
  color: #e4edf6;
}
:root[data-theme="dark"] .ps-adv-tile span { color: #9db0c2; }
:root[data-theme="dark"] .ps-adv-tile-icon { background: #24384a; color: #8ec5ea; }
:root[data-theme="dark"] .ps-adv-result,
:root[data-theme="dark"] .ps-adv-empty { background: #1a2a3a; border-color: #31485c; color: #9db0c2; }
:root[data-theme="dark"] .ps-adv-content { color: #e4edf6; }

/* Advanced display prefs applied via shell dataset */
.ps-app[data-italic-enzymes="true"] .ps-enzyme-name,
.ps-app[data-italic-enzymes="true"] .ps-map-enzyme-label,
.ps-app[data-italic-enzymes="true"] .psc-enzyme-label,
.ps-app[data-italic-enzymes="true"] .psc-line-enzyme {
  font-style: italic;
}
.ps-app[data-blunt-green="true"] .ps-enzyme-blunt,
.ps-app[data-blunt-green="true"] [data-cutter="blunt"],
.ps-app[data-blunt-green="true"] .psc-enzyme-label.blunt-cutter,
.ps-app[data-blunt-green="true"] .psc-line-enzyme.blunt-cutter {
  color: #1f9d55;
  fill: #1f9d55;
}
.ps-app[data-bold-unique="true"] .psc-enzyme-label.unique,
.ps-app[data-bold-unique="true"] .psc-line-enzyme.unique,
.ps-app[data-bold-unique="true"] .psc-enzyme-marker.unique {
  font-weight: 800;
}
.ps-app[data-studio-mode="advanced"] .ps-ribbon-tab[aria-current="page"] {
  box-shadow: inset 0 -2px 0 #f59e0b;
}
.ps-ribbon-body {
  display: flex;
  align-items: stretch;
  gap: 5px;
  height: 68px;
  padding: 2px 5px 1px;
  overflow-x: auto;
  overflow-y: hidden;
  background: #fffffffa;
  color: var(--ps-ink);
  border-bottom: 1px solid var(--ps-line);
}
.ps-ribbon-group {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 13px;
  flex: none;
  min-width: max-content;
  padding: 0 7px;
  border-right: 1px solid #dce4ec;
}
.ps-ribbon-group-actions {
  display: flex;
  align-items: stretch;
  gap: 1px;
}
.ps-ribbon-small-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  min-width: 0;
  padding: 0 1px;
}
.ps-ribbon-small-action {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  max-width: 128px;
  min-height: 16px;
  padding: 1px 5px 1px 3px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #29465f;
  background: transparent;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}
.ps-ribbon-small-action:hover {
  border-color: #c7d4df;
  background: color-mix(in srgb, var(--ps-command-color, #1266d6) 8%, white);
}
.ps-ribbon-small-action span {
  display: inline-grid;
  flex: 0 0 auto;
  width: 12px;
  place-items: center;
  color: var(--ps-command-color, var(--ps-blue));
  font-size: 12px;
  font-weight: 750;
}
.ps-ribbon-small-action small {
  overflow: hidden;
  font-size: 10px;
  line-height: 12px;
  text-overflow: ellipsis;
}
.ps-ribbon-small-action[data-tone="blue"] { --ps-command-color: #1976d2; }
.ps-ribbon-small-action[data-tone="violet"] { --ps-command-color: #7655d6; }
.ps-ribbon-small-action[data-tone="teal"] { --ps-command-color: #07858d; }
.ps-ribbon-small-action[data-tone="orange"] { --ps-command-color: #d66a12; }
.ps-ribbon-small-action[data-tone="magenta"] { --ps-command-color: #bd3e82; }
.ps-ribbon-small-action[data-tone="green"] { --ps-command-color: #218653; }
.ps-ribbon-group-label {
  overflow: hidden;
  color: #6a7888;
  font-size: 9px;
  line-height: 12px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ps-ribbon-action {
  display: grid;
  place-items: center;
  align-content: center;
  min-width: 44px;
  max-width: 72px;
  padding: 2px 5px;
  gap: 1px;
  border: 0;
  border-radius: 6px;
  color: #27445f;
  background: transparent;
}
.ps-ribbon-action:hover { background: color-mix(in srgb, var(--ps-command-color, #1266d6) 10%, white); }
.ps-ribbon-action span {
  display: grid;
  place-items: center;
  min-width: 22px;
  min-height: 22px;
  padding: 2px;
  border-radius: 6px;
  color: var(--ps-command-color, var(--ps-blue));
  background: color-mix(in srgb, var(--ps-command-color, #1266d6) 12%, white);
  font-size: 17px;
  font-weight: 750;
  line-height: 1;
}
.ps-ribbon-action[data-tone="blue"] { --ps-command-color: #1976d2; }
.ps-ribbon-action[data-tone="violet"] { --ps-command-color: #7655d6; }
.ps-ribbon-action[data-tone="teal"] { --ps-command-color: #07858d; }
.ps-ribbon-action[data-tone="orange"] { --ps-command-color: #d66a12; }
.ps-ribbon-action[data-tone="magenta"] { --ps-command-color: #bd3e82; }
.ps-ribbon-action[data-tone="green"] { --ps-command-color: #218653; }
.ps-ribbon-action small {
  max-width: 66px;
  overflow: hidden;
  font-size: 9px;
  line-height: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ps-work {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.ps-app.ps-context-panel-open .ps-work {
  grid-template-columns: 64px minmax(300px, 350px) minmax(0, 1fr);
}
.ps-vertical-tabs {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 6px 4px;
  overflow-x: hidden;
  overflow-y: auto;
  border-right: 1px solid #ccd9e4;
  background: linear-gradient(180deg, #f8fbfe, #edf3f8);
}
.ps-vertical-tab {
  --ps-tab-color: #1677c8;
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: 46px;
  padding: 4px 2px;
  border: 0;
  border-radius: 8px;
  color: #506174;
  background: transparent;
}
.ps-vertical-tab:hover {
  color: var(--ps-tab-color);
  background: color-mix(in srgb, var(--ps-tab-color) 9%, white);
}
.ps-vertical-tab.active {
  color: var(--ps-tab-color);
  background: color-mix(in srgb, var(--ps-tab-color) 13%, white);
  font-weight: 700;
  box-shadow: inset 3px 0 var(--ps-tab-color);
}
.ps-vertical-tab > span { font-size: 17px; line-height: 1; }
.ps-vertical-tab > small { font-size: 8px; line-height: 9px; }
.ps-app[data-active-tool="annotate"] { --ps-tool-color: #248653; }
.ps-app[data-active-tool="tutorials"] { --ps-tool-color: #7a58d1; }
.ps-app[data-active-tool="primers"] { --ps-tool-color: #9a46b7; }
.ps-app[data-active-tool="assemble"],
.ps-app[data-active-tool="mutate"] { --ps-tool-color: #d06a19; }
.ps-app[data-active-tool="digest"],
.ps-app[data-active-tool="crispr"] { --ps-tool-color: #147f8b; }
.ps-app[data-active-tool="verify"] { --ps-tool-color: #2d6fca; }
.ps-app[data-active-tool="share"],
.ps-app[data-active-tool="history"] { --ps-tool-color: #b44272; }
.ps-tool-sidebar {
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  border-right: 1px solid #c8d5e1;
  background: #f5f8fb;
  box-shadow: 4px 0 14px #18344f14;
}
.ps-tool-sidebar[hidden] { display: none !important; }
.ps-tool-sidebar-head {
  position: sticky;
  z-index: 12;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  padding: 5px 8px 5px 10px;
  border-bottom: 1px solid #d3dee8;
  border-top: 3px solid var(--ps-tool-color);
  background: #fff;
}
.ps-tool-sidebar-head strong { color: color-mix(in srgb, var(--ps-tool-color) 76%, #20364a); font-size: 11px; }
.ps-context-close {
  width: 23px;
  height: 23px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  color: #526378;
  background: transparent;
  font-size: 17px;
  line-height: 1;
}
.ps-context-close:hover { color: #12385f; background: #e8f1fa; }
.ps-context-canvas,
.ps-context-inspector {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 6px;
}
.ps-context-inspector:empty { display: none; }
.ps-context-canvas .ps-card,
.ps-context-inspector .ps-card {
  min-width: 0;
  margin-bottom: 0;
  border-radius: 6px;
  border-left: 2px solid color-mix(in srgb, var(--ps-tool-color) 68%, #d9e2ec);
  box-shadow: none;
}
.ps-context-canvas .ps-card-head,
.ps-context-inspector .ps-card-head { padding: 5px 7px; }
.ps-context-canvas .ps-card-head h3,
.ps-context-inspector .ps-card-head h3 { font-size: 10.5px; }
.ps-context-canvas .ps-card-body,
.ps-context-inspector .ps-card-body { min-width: 0; padding: 6px 7px; }
.ps-context-canvas .ps-card-body > :first-child { margin-top: 0; }
.ps-context-canvas .ps-card-body > :last-child { margin-bottom: 0; }
.ps-context-canvas *,
.ps-context-inspector * { min-width: 0; }
/* Prose may rewrap; sequences and identifiers must not. Breaking "anywhere"
   inside a monospace run in a ~130px sidebar column is what rendered DNA and
   primer sequences one letter per line across the tool tabs. */
.ps-context-canvas p,
.ps-context-inspector p {
  overflow-wrap: break-word;
  word-break: normal;
}
.ps-context-canvas code,
.ps-context-canvas pre,
.ps-context-canvas samp,
.ps-context-inspector code,
.ps-context-inspector pre,
.ps-context-inspector samp {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overflow-wrap: normal;
  white-space: pre;
  word-break: normal;
  overscroll-behavior-x: contain;
}
.ps-context-canvas td,
.ps-context-canvas th,
.ps-context-inspector td,
.ps-context-inspector th {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}
.ps-context-canvas .ps-redundant-preview,
.ps-context-canvas .psc-root[data-presentation="compact"] { display: none; }
.ps-context-canvas .ps-form-grid,
.ps-context-canvas .ps-split,
.ps-context-canvas .ps-primer-layout,
.ps-context-canvas .ps-assembly-grid,
.ps-context-canvas .ps-blast-grid {
  grid-template-columns: minmax(0, 1fr);
}
.ps-context-canvas .ps-enzyme-grid {
  grid-template-columns: repeat(2, minmax(100px, 1fr));
}
.ps-context-canvas .ps-field { gap: 2px; font-size: 9.5px; }
.ps-context-canvas .ps-input { min-height: 25px; padding: 3px 5px; font-size: 10px; }
.ps-context-canvas input.ps-input[type="number"] { width: min(100%, 104px); }
.ps-context-canvas textarea {
  field-sizing: content;
  width: 100%;
  min-height: 42px;
  max-height: none;
  padding: 5px;
  overflow: hidden;
  resize: none;
  font-size: 9.5px;
  line-height: 1.35;
}
.ps-context-canvas .ps-row {
  align-items: center;
  gap: 4px;
  margin: 4px 0;
}
.ps-context-canvas .ps-row > .ps-btn { flex: 0 1 auto; }
.ps-context-canvas .ps-btn {
  min-height: 24px;
  padding: 3px 6px;
  border-radius: 5px;
  font-size: 9.5px;
}
.ps-context-canvas .ps-btn.primary {
  color: #fff;
  border-color: var(--ps-tool-color);
  background: var(--ps-tool-color);
}
.ps-context-canvas .ps-btn.primary:hover {
  border-color: color-mix(in srgb, var(--ps-tool-color) 80%, black);
  background: color-mix(in srgb, var(--ps-tool-color) 88%, black);
}
.ps-context-canvas .ps-empty { padding: 11px; font-size: 10.5px; }
.ps-context-canvas .ps-primer-designer-head { gap: 7px; }
.ps-context-canvas .ps-primer-designer-head .ps-field { width: 100%; min-width: 0; }
.ps-context-canvas .ps-primer-targets,
.ps-context-canvas .ps-primer-amplicons { gap: 5px; margin-top: 6px; }
.ps-context-canvas .ps-primer-target-chip { max-width: 100%; font-size: 10px; }

.ps-annotation-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid #cae0d4;
  border-left: 3px solid #248653;
  border-radius: 6px;
  background: #f5fbf7;
}
.ps-annotation-summary > div {
  display: grid;
  min-width: 0;
  margin-right: auto;
}
.ps-annotation-summary strong {
  overflow: hidden;
  color: #205d3e;
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ps-annotation-summary span { color: #60766a; font-size: 8.5px; }
.ps-annotation-count {
  padding: 2px 6px;
  border-radius: 9px;
  color: #1f6c46 !important;
  background: #dcefe4;
  font-weight: 700;
  white-space: nowrap;
}
.ps-annotation-primary-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}
.ps-annotation-primary-actions .ps-btn { width: 100%; }
.ps-annotation-secondary-actions {
  display: flex;
  gap: 10px;
  margin-top: 3px;
}
.ps-annotation-filter { margin-bottom: 6px; }
.ps-annotation-list { display: grid; gap: 4px; }
.ps-annotation-item {
  position: relative;
  display: grid;
  grid-template-columns: 5px minmax(0, 1fr) auto;
  gap: 5px 7px;
  align-items: center;
  padding: 5px 6px 4px 5px;
  overflow: hidden;
  border: 1px solid #d8e2e9;
  border-radius: 6px;
  background: #fff;
}
.ps-annotation-item[hidden] { display: none; }
.ps-annotation-item:hover {
  border-color: color-mix(in srgb, var(--ps-feature-color) 45%, #d8e2e9);
  background: color-mix(in srgb, var(--ps-feature-color) 4%, white);
}
.ps-annotation-swatch {
  grid-row: 1 / span 2;
  align-self: stretch;
  width: 5px;
  min-height: 27px;
  border-radius: 4px;
  background: var(--ps-feature-color);
}
.ps-annotation-main {
  display: grid;
  min-width: 0;
}
.ps-annotation-main strong {
  overflow: hidden;
  color: #263b4e;
  font-size: 10px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ps-annotation-main small,
.ps-annotation-meta small { color: #72808c; font-size: 8px; }
.ps-annotation-meta {
  display: grid;
  justify-items: end;
  max-width: 100px;
}
.ps-annotation-meta span {
  max-width: 100%;
  overflow: hidden;
  padding: 1px 5px;
  border-radius: 8px;
  color: color-mix(in srgb, var(--ps-feature-color) 80%, #263b4e);
  background: color-mix(in srgb, var(--ps-feature-color) 12%, white);
  font-size: 8px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ps-annotation-meta small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ps-annotation-actions {
  grid-column: 2 / -1;
  display: flex;
  gap: 7px;
}
.ps-annotation-actions .ps-btn.link {
  min-height: 16px;
  padding: 0;
  font-size: 8px;
  text-decoration: none;
}
.ps-annotation-actions .ps-btn.link:last-child { color: #a33047; }

/* Sidebar tables become compact record grids instead of nested scroll boxes. */
.ps-context-canvas .ps-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow: visible;
  border: 0;
  border-radius: 0;
}
.ps-context-canvas .ps-table {
  width: 100%;
  table-layout: fixed;
  background: transparent;
}
.ps-context-canvas .ps-table th,
.ps-context-canvas .ps-table td {
  max-width: 100%;
  padding: 4px 5px;
  white-space: normal;
  font-size: 9.5px;
}
/* Giving `tr` display:grid takes it out of the table layout, so the table's
   row-group wraps each card in an anonymous table-cell — and with
   `table-layout: fixed` that cell is one fifth of the width, which pinned every
   card into a ~62px column with four fifths of the sidebar left blank. The
   table and its row group have to become block boxes too. The header row goes
   with them: in card mode each cell already prints its own label from
   `data-label`, so a separate header would just repeat it. */
.ps-context-canvas .ps-table:has(tbody tr > td[data-label]),
.ps-context-canvas .ps-table:has(tbody tr > td[data-label]) > tbody {
  display: block;
  width: 100%;
}
.ps-context-canvas .ps-table:has(tbody tr > td[data-label]) > thead { display: none; }
.ps-context-canvas .ps-table tbody tr:has(> td[data-label]) {
  display: grid;
  /* auto-fit rather than a hard 2-up: a narrow sidebar collapses to one column
     instead of squeezing two unreadably thin ones. */
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 4px 8px;
  margin-bottom: 6px;
  padding: 7px;
  border: 1px solid #d9e2ea;
  border-radius: 6px;
  background: #fff;
}
.ps-context-canvas .ps-table tbody tr:has(> td[data-label]):last-child { margin-bottom: 0; }
.ps-context-canvas .ps-table tbody tr:has(> td[data-label]) > td {
  display: grid;
  gap: 1px;
  padding: 0;
  border: 0;
}
.ps-context-canvas .ps-table tbody tr:has(> td[data-label]) > td::before {
  content: attr(data-label);
  color: #718093;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.2;
  text-transform: uppercase;
}
/* Case-insensitive, and covering every label that carries a long value. The
   previous list matched "Sequence" but not "Forward primer", so oligo columns
   stayed in a half-width cell and wrapped to a vertical column of letters. */
.ps-context-canvas .ps-table tbody tr:has(> td[data-label]) > td[data-label=""],
.ps-context-canvas .ps-table tbody tr:has(> td[data-label]) > td[data-label*="sequence" i],
.ps-context-canvas .ps-table tbody tr:has(> td[data-label]) > td[data-label*="primer" i],
.ps-context-canvas .ps-table tbody tr:has(> td[data-label]) > td[data-label*="forward" i],
.ps-context-canvas .ps-table tbody tr:has(> td[data-label]) > td[data-label*="reverse" i],
.ps-context-canvas .ps-table tbody tr:has(> td[data-label]) > td[data-label*="oligo" i],
.ps-context-canvas .ps-table tbody tr:has(> td[data-label]) > td[data-label*="probe" i],
.ps-context-canvas .ps-table tbody tr:has(> td[data-label]) > td[data-label*="guide" i],
.ps-context-canvas .ps-table tbody tr:has(> td[data-label]) > td[data-label*="target" i],
.ps-context-canvas .ps-table tbody tr:has(> td[data-label]) > td[data-label*="name" i],
.ps-context-canvas .ps-table tbody tr:has(> td[data-label]) > td[data-label*="note" i],
.ps-context-canvas .ps-table tbody tr:has(> td[data-label]) > td[data-label*="message" i],
.ps-context-canvas .ps-table tbody tr:has(> td[data-label]) > td[data-label*="effect" i],
.ps-context-canvas .ps-table tbody tr:has(> td[data-label]) > td[data-label*="method" i],
.ps-context-canvas .ps-table tbody tr:has(> td[data-label]) > td[data-label*="verdict" i],
.ps-context-canvas .ps-table tbody tr:has(> td[data-label]) > td[data-label*="complementarity" i],
.ps-context-canvas .ps-table tbody tr:has(> td[data-label]) > td[data-label*="warning" i] {
  grid-column: 1 / -1;
}
/* Any full-width cell holding a long monospace value scrolls sideways rather
   than wrapping — the value stays readable as one continuous run. */
.ps-context-canvas .ps-table td[data-label] {
  min-width: 0;
  overflow-x: auto;
}
.ps-context-canvas .ps-table td[data-label] > code,
.ps-context-canvas .ps-table td[data-label] > .ps-primer-oligo code {
  font-size: 9.5px;
  letter-spacing: .02em;
}
.ps-context-canvas .ps-table tbody tr:has(> td[data-label]) > td[data-label=""]::before { display: none; }
.ps-context-canvas .ps-table tbody tr:has(> td[data-label]) .ps-btn { width: 100%; }

/* Diagram-like tool results wrap in-place and never create a second scroller. */
.ps-context-canvas .ps-assembly-flow {
  flex-wrap: wrap;
  min-height: 0;
  padding: 8px;
  overflow: visible;
}
.ps-context-canvas .ps-assembly-flow div {
  flex: 1 1 145px;
  min-width: 0;
  padding: 8px;
}
.ps-context-canvas .ps-method-strip { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ps-context-canvas .ps-clone-paste-row { grid-template-columns: 1fr; }
.ps-context-canvas .ps-gel {
  min-height: 0;
  padding: 5px;
  overflow: visible;
}
.ps-context-canvas .ps-json {
  max-height: none;
  margin: 0;
  padding: 7px;
  overflow: visible;
  white-space: pre-wrap;
  font-size: 9px;
}
.ps-navigator, .ps-inspector {
  min-width: 0;
  overflow: auto;
  background: #f9fbfd;
}
.ps-navigator { border-right: 1px solid var(--ps-line); padding: 10px 7px; }
.ps-inspector { border-left: 1px solid var(--ps-line); padding: 10px; }
.ps-navigator button {
  display: flex;
  width: 100%;
  align-items: center;
  padding: 7px 9px;
  border: 0;
  border-radius: 5px;
  color: #35485e;
  background: transparent;
  text-align: left;
}
.ps-navigator button:hover { background: #e8f1fa; }
.ps-navigator button.active {
  color: #075cac;
  background: #dceeff;
  font-weight: 650;
  box-shadow: inset 3px 0 #1684d8;
}
.ps-center {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
}
.ps-canvas {
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 14px;
  overflow: auto;
  background:
    radial-gradient(circle at 12% 0%, #e9f5ff 0, transparent 25%),
    var(--ps-soft);
}
.ps-status {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 27px;
  margin: -5px 0 10px;
  color: var(--ps-muted);
}
.ps-demo, .ps-readonly-badge, .ps-approval {
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .045em;
}
.ps-demo { color: #6b4300; background: #ffedb5; border: 1px solid #f0cf6e; }
.ps-readonly-badge { color: #075b65; background: #d8f3f0; }
.ps-approval { color: #8f262d; background: #ffe1e4; }
.ps-primer-target-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 8px 12px;
  border: 1px solid #a9d4c9;
  border-radius: 8px;
  color: #0d5c4a;
  background: #e3f6f0;
  font-size: 12px;
}
.ps-primer-target-banner .ps-btn { margin-left: auto; }

/* AI primer designer: target chips, candidate rows, multiplex verdicts. */
.ps-primer-designer-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  justify-content: space-between;
}
.ps-primer-designer-head .ps-field { min-width: 200px; }
.ps-primer-targets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.ps-primer-target-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 6px 5px 10px;
  border: 1px solid var(--ps-border, #cbd7e3);
  border-radius: 999px;
  background: var(--ps-surface-2, #f2f7fc);
  font-size: 12px;
}
.ps-primer-target-chip small { color: var(--ps-muted, #62748a); }
.ps-primer-target-chip button {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: inherit;
  background: transparent;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.ps-primer-target-chip button:hover { color: #b4243b; background: #fbe3e7; }
.ps-primer-status, .ps-primer-summary, .ps-primer-rationale {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
}
.ps-primer-status { color: #8a5a12; }
.ps-primer-rationale { color: var(--ps-muted, #62748a); }
.ps-primer-oligo { display: grid; gap: 1px; }
.ps-primer-oligo code { font-size: 11.5px; letter-spacing: .02em; }
.ps-primer-oligo small { color: var(--ps-muted, #62748a); font-size: 11px; }
.ps-primer-badge {
  padding: 1px 6px;
  border-radius: 999px;
  color: #fff;
  background: #6a3ec8;
  font-size: 10.5px;
  font-weight: 650;
}
.ps-primer-warn { color: #8a5a12; font-size: 11.5px; cursor: help; }
.ps-primer-ok { color: #17795e; font-size: 11.5px; }
.ps-primer-verdict {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  font-size: 12px;
}
.ps-primer-pill {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
}
.ps-primer-pill.compatible { color: #0f5d46; background: #d8f3e8; }
.ps-primer-pill.caution { color: #7d5410; background: #fbeed0; }
.ps-primer-pill.incompatible { color: #8c1f30; background: #fbdde2; }
.ps-primer-pill.unknown { color: #46586d; background: #e8eef5; }
.ps-primer-amplicons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  color: var(--ps-muted, #62748a);
  font-size: 12px;
}
.ps-primer-warnings { margin: 10px 0 0; padding-left: 18px; font-size: 12px; line-height: 1.55; }

.ps-hero {
  display: grid;
  grid-template-columns: 1fr 180px;
  align-items: center;
  min-height: 190px;
  padding: 28px 34px;
  margin-bottom: 14px;
  overflow: hidden;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(125deg, #102e58, #126ac0 63%, #00919a);
  box-shadow: 0 10px 28px #173c6126;
}
.ps-hero small { letter-spacing: .13em; opacity: .82; }
.ps-hero h1 { max-width: 730px; margin: 8px 0; font-size: clamp(25px, 2.6vw, 37px); line-height: 1.08; }
.ps-hero p { max-width: 730px; color: #d9ebfa; font-size: 14px; }
.ps-hero .ps-btn { color: #123b64; background: #fff; border-color: #fff; }
.ps-hero .ps-btn.primary { color: #fff; background: #0097a4; border-color: #37cad3; }
.ps-hero-orbit {
  display: grid;
  place-items: center;
  justify-self: center;
  width: 132px;
  height: 132px;
  white-space: pre-line;
  border: 2px solid #74e5e7;
  border-radius: 50%;
  box-shadow: inset 0 0 0 13px #ffffff0e, 0 0 42px #4ee2e342;
  color: #b9ffff;
  font: 750 21px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: center;
}

.ps-card {
  margin: 0 0 12px;
  overflow: hidden;
  border: 1px solid var(--ps-line);
  border-radius: 10px;
  background: var(--ps-panel);
  box-shadow: 0 2px 8px #1d38540b;
}
.ps-card-head { padding: 10px 13px; border-bottom: 1px solid #e5ebf1; background: #fbfcfe; }
.ps-card-head h3 { margin: 0; font-size: 13px; }
.ps-card-body { padding: 13px; }
.ps-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.ps-btn {
  min-height: 30px;
  padding: 5px 11px;
  border: 1px solid #c4d1dd;
  border-radius: 6px;
  color: #29435d;
  background: #fff;
  cursor: pointer;
}
.ps-btn:hover { border-color: #74a4d1; background: #edf6ff; }
.ps-btn.link {
  border: 0;
  color: var(--ps-blue);
  background: transparent;
  text-decoration: underline;
  padding-left: 0;
  padding-right: 0;
}
.ps-btn.link:hover { background: transparent; color: #075bbf; }
.ps-btn:focus-visible, .ps-input:focus-visible, .ps-navigator button:focus-visible {
  outline: 3px solid #2b99e8;
  outline-offset: 1px;
}

.ps-form-grid, .ps-split, .ps-dual-map {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.ps-field { display: grid; gap: 5px; color: #45566a; font-size: 12px; }
.ps-input, .ps-sequence-input, .ps-small-sequence, .ps-ai-body textarea {
  width: 100%;
  border: 1px solid #bdcbd8;
  border-radius: 6px;
  color: var(--ps-ink);
  background: #fff;
}
.ps-input { min-height: 33px; padding: 6px 8px; }
.ps-sequence-input, .ps-small-sequence {
  min-height: 145px;
  padding: 10px;
  resize: vertical;
  font: 12px/1.65 ui-monospace, SFMono-Regular, Consolas, monospace;
  overflow-wrap: anywhere;
}
.ps-small-sequence { min-height: 96px; }
.ps-readonly { min-height: 33px; padding: 7px 9px; border: 1px solid #d4dee7; border-radius: 6px; background: #f3f6f9; }
.ps-empty { padding: 22px; border: 1px dashed #bdcbd8; border-radius: 8px; color: var(--ps-muted); text-align: center; background: #fafcfe; }
.ps-engine-label { color: var(--ps-muted); font-size: 11px; }

.ps-tile-grid, .ps-demo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 9px;
}
.ps-tile, .ps-demo-card {
  display: grid;
  align-content: start;
  gap: 5px;
  min-height: 92px;
  padding: 12px;
  border: 1px solid #d5e0e9;
  border-radius: 8px;
  color: var(--ps-ink);
  background: #fff;
  text-align: left;
}
.ps-tile:hover, .ps-demo-card:hover { border-color: #7fb5df; box-shadow: 0 4px 14px #17436f14; }
.ps-tile span, .ps-demo-card span { color: var(--ps-muted); font-size: 12px; }
.ps-tile small { margin-top: auto; color: var(--ps-blue); }
.ps-demo-card.real-data { border-left: 4px solid #087f8c; }
.ps-demo-card.real-data small { color: #08717b; }
.ps-demo-provenance {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  padding: 9px;
  overflow-wrap: anywhere;
  border: 1px solid #a8d9d5;
  border-radius: 7px;
  color: #28545c;
  background: #e8f8f6;
}
.ps-demo-provenance a { color: #076a84; }
.ps-demo-provenance small { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 9px; }

.ps-map-host, .ps-linear-panel {
  min-height: 350px;
  border: 1px solid var(--ps-line);
  border-radius: 9px;
  background: #fff;
  overflow: hidden;
}
.ps-linear-panel { position: relative; padding: 22px 12px; overflow: auto; }
.ps-linear-track {
  position: relative;
  min-width: 480px;
  height: 145px;
  margin-top: 25px;
  border-top: 5px solid #6b7b8e;
}
.ps-linear-feature {
  position: absolute;
  top: -15px;
  min-width: 3px;
  height: 28px;
  overflow: hidden;
  border: 0;
  border-radius: 4px;
  color: #fff;
  background: var(--ps-teal);
  font-size: 10px;
}
.ps-minimap { padding: 7px; color: #8190a0; background: #eef3f7; font: 8px/1.15 monospace; overflow-wrap: anywhere; }
.ps-metric-row, .ps-readiness {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid #e8edf2;
}
.ps-readiness .ready { color: var(--ps-good); }
.ps-readiness .degraded { color: var(--ps-warn); }
.ps-selection { display: grid; gap: 3px; margin-top: 10px; padding: 9px; border-radius: 7px; background: #e7f5ff; }
.ps-inspector-actions, .ps-feature-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.ps-feature-actions > strong { width: 100%; }
.ps-inspector-actions .ps-btn, .ps-feature-actions .ps-btn { min-height: 25px; padding: 3px 7px; font-size: 10px; }
.ps-comment-list { display: grid; gap: 6px; margin-top: 8px; }
.ps-comment-list article { padding: 7px; border-left: 3px solid #087f8c; background: #edf8f7; }
.ps-comment-list p { margin: 3px 0; }
.ps-history-checksum { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.ps-dna-ends { width: 100%; margin-top: 8px; padding: 8px; border: 1px solid #d6e1e9; border-radius: 7px; background: #f5f8fb; }
.ps-selected-cuts { display: grid; gap: 3px; width: 100%; margin-top: 7px; padding: 7px; border-radius: 6px; color: #7a2830; background: #fff0f1; }

.ps-table-wrap { max-width: 100%; overflow: auto; border: 1px solid var(--ps-line); border-radius: 7px; }
.ps-table { width: 100%; border-collapse: collapse; background: #fff; font-variant-numeric: tabular-nums; }
.ps-table th, .ps-table td { padding: 7px 9px; border-bottom: 1px solid #e5ebf0; text-align: left; white-space: nowrap; }
.ps-table th { position: sticky; top: 0; background: #eef4f8; color: #40556c; font-size: 11px; }
.ps-table th.ps-sortable { cursor: pointer; user-select: none; }
.ps-table th.ps-sortable:hover { color: #168bd2; }
.ps-table th.ps-sortable.active { color: #0c355e; background: #dceefb; }
.ps-sort-caret { margin-left: 3px; font-size: 9px; color: #168bd2; }
.ps-table td.ps-direction-cell { text-align: center; font-weight: 700; color: #40556c; }
.ps-feature-detail-row td { padding: 3px 9px 10px 34px; white-space: normal; background: #f7fafc; border-bottom: 1px solid #e5ebf0; }
.ps-feature-detail { display: grid; gap: 2px; font-size: 12px; color: #40556c; }
.ps-feature-detail strong { color: #0c355e; font-weight: 600; }
.ps-feature-detail-meta { color: var(--ps-muted); font-style: italic; }
.ps-inline-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #40556c; white-space: nowrap; }
.ps-features-find { max-width: 180px; }
.ps-enzyme-grid { display: grid; grid-template-columns: repeat(4, minmax(95px, 1fr)); gap: 6px; }
.ps-enzyme-grid label { white-space: nowrap; }
.ps-gel {
  min-height: 230px;
  padding: 6px;
  overflow: hidden;
  color: #fff;
  background: #071827;
  border: 1px solid #214b5e;
  border-radius: 9px;
  box-shadow: inset 0 0 32px rgb(20 104 131 / .18);
}
.ps-gel svg { display: block; width: 100%; max-width: 100%; height: auto; }
.ps-gel-expanded { width: min(920px, calc(100vw - 80px)); padding: 10px; }
.ps-digest-selector-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  gap: 6px;
}
.ps-digest-selection-summary {
  display: grid;
  gap: 1px;
  margin: 6px 0;
  padding: 5px 7px;
  border-left: 3px solid #147f8b;
  border-radius: 4px;
  color: #3d6170;
  background: #edf8f8;
}
.ps-digest-selection-summary strong { font-size: 9.5px; }
.ps-digest-selection-summary span {
  overflow: hidden;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ps-digest-enzyme-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
}
.ps-digest-enzyme {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  min-height: 27px;
  padding: 3px 5px;
  overflow: hidden;
  border: 1px solid #d7e2e8;
  border-radius: 5px;
  background: #fff;
}
.ps-digest-enzyme[hidden] { display: none; }
.ps-digest-enzyme:has(input:checked) {
  border-color: #78b7bd;
  background: #effafa;
  box-shadow: inset 2px 0 #147f8b;
}
.ps-digest-enzyme > span {
  display: grid;
  min-width: 0;
}
.ps-digest-enzyme strong {
  overflow: hidden;
  color: #294152;
  font-size: 9px;
  text-overflow: ellipsis;
}
.ps-digest-enzyme small {
  overflow: hidden;
  color: #71818d;
  font: 7px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-overflow: ellipsis;
}
.ps-digest-enzyme em {
  min-width: 20px;
  padding: 1px 4px;
  border-radius: 7px;
  color: #7a8790;
  background: #edf1f4;
  font-size: 7px;
  font-style: normal;
  text-align: center;
}
.ps-digest-enzyme em.unique { color: #17683e; background: #dff3e7; }
.ps-digest-enzyme em.multiple { color: #8b5108; background: #fff0d4; }
.ps-gel-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 7px;
  margin-bottom: 7px;
}
.ps-gel-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 6px 0;
  color: #586b79;
  font-size: 8.5px;
}
.ps-gel-summary strong { color: #23475a; }
.ps-assembly-flow { display: flex; align-items: center; justify-content: center; gap: 15px; padding: 24px; }
.ps-assembly-flow div { display: grid; gap: 3px; min-width: 120px; padding: 14px; border: 1px solid #bcd3e5; border-radius: 8px; text-align: center; background: #eff8ff; }
.ps-assembly-flow small { color: var(--ps-muted); }
.ps-steps { padding-left: 22px; }
.ps-hint { color: var(--ps-muted); font-size: 12px; font-style: italic; }
.ps-new-sequence-preview { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ps-muted); }
.ps-primer-row-hidden { opacity: 0.45; }
.ps-primer-row-hidden td { text-decoration: line-through; }
.ps-protein { font: 12px/1.6 ui-monospace, monospace; overflow-wrap: anywhere; }
.ps-json { max-height: 300px; padding: 10px; overflow: auto; border-radius: 7px; color: #d8f2ff; background: #172534; font: 11px/1.5 ui-monospace, monospace; }
.ps-timeline { border-left: 2px solid #b8d4e8; margin-left: 9px; padding-left: 17px; }
.ps-timeline article { position: relative; margin: 0 0 13px; }
.ps-timeline article::before { content: ""; position: absolute; left: -23px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--ps-blue); }

/* Graphical history timeline (SnapGene-style construct lineage) ---------- */
.ps-history-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ps-history-filters .ps-btn { min-height: 24px; padding: 3px 9px; font-size: 10.5px; border-radius: 999px; }
.ps-history-filters .ps-btn.active { color: #fff; background: var(--ps-blue); border-color: var(--ps-blue); }
.ps-history-timeline {
  position: relative;
  display: grid;
  gap: 2px;
  margin-left: 17px;
  padding-left: 22px;
  border-left: 2px solid var(--ps-line);
}
.ps-history-node {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 9px 10px;
  margin: 0 0 4px;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
.ps-history-node:hover { background: var(--ps-soft); }
.ps-history-node.selected { border-color: var(--ps-history-kind-color, var(--ps-blue)); background: var(--ps-soft); }
.ps-history-node::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 16px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ps-history-kind-color, var(--ps-blue));
  box-shadow: 0 0 0 3px var(--ps-panel);
}
.ps-history-node.ps-history-current {
  cursor: default;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--ps-line);
}
.ps-history-node.ps-history-current::before { background: var(--ps-good); }
.ps-history-node.kind-cloning::before,
.ps-history-node.kind-digest::before { box-shadow: 0 0 0 3px var(--ps-panel), 0 0 0 5px color-mix(in srgb, var(--ps-history-kind-color) 30%, transparent); }
.ps-history-glyph { color: var(--ps-muted); }
.ps-history-glyph.empty { display: flex; align-items: center; justify-content: center; border: 1px dashed var(--ps-line); border-radius: 50%; }
.ps-history-glyph svg { display: block; }
.ps-history-node-body { display: grid; gap: 3px; min-width: 0; }
.ps-history-node-head { display: flex; align-items: baseline; gap: 6px; }
.ps-history-node-head strong { overflow: hidden; color: var(--ps-ink); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.ps-history-kind-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  flex: none;
  border-radius: 5px;
  background: color-mix(in srgb, var(--ps-history-kind-color, var(--ps-muted)) 16%, transparent);
  font-size: 10px;
  line-height: 1;
}
.ps-history-node-meta { display: flex; flex-wrap: wrap; gap: 8px; color: var(--ps-muted); font-size: 10.5px; }
.ps-history-delta { font-variant-numeric: tabular-nums; }
.ps-history-branch-chip {
  justify-self: start;
  padding: 2px 8px;
  border: 1px dashed var(--ps-danger);
  border-radius: 999px;
  color: var(--ps-danger);
  background: transparent;
  font-size: 10px;
  cursor: pointer;
}

/* Semantic plasmid schematic -------------------------------------------- */
.psc-root {
  --psc-base-size: 23px;
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(370px, 1fr) auto;
  min-height: 560px;
  overflow: hidden;
  border: 1px solid var(--ps-line);
  border-radius: 12px;
  background: var(--ps-panel);
  box-shadow: 0 1px 2px #10233c0d, 0 10px 28px -14px #10233c26;
}
.psc-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
  min-height: 42px;
  padding: 6px 9px;
  border-bottom: 1px solid var(--ps-line);
  background: linear-gradient(180deg, #fcfdff, #eef3f8);
}
.psc-tool-group {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
}
.psc-tool-divider {
  width: 1px;
  align-self: stretch;
  min-height: 20px;
  margin: 0 5px;
  background: linear-gradient(180deg, transparent, #c4d3e0, transparent);
}
.psc-tool {
  min-width: 34px;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid #c7d4df;
  border-radius: 7px;
  color: #29465f;
  background: #fff;
  font-size: 11px;
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease, transform .08s ease;
}
.psc-tool:hover { border-color: #6fa8d5; background: #e9f4fd; box-shadow: 0 1px 4px #12385f1f; }
.psc-tool:active { transform: translateY(1px); }
.psc-tool:focus-visible,
.psc-base:focus-visible,
.psc-detail-feature:focus-visible,
.psc-enzyme-marker:focus-visible {
  outline: 3px solid #2698e5;
  outline-offset: 1px;
}
.psc-zoom-slider-wrap {
  display: flex;
  align-items: center;
  padding: 0 3px;
}
.psc-zoom-slider {
  width: 84px;
  height: 28px;
  margin: 0;
  accent-color: var(--ps-blue, #1266d6);
  cursor: pointer;
  background: transparent;
}
.psc-zoom-slider::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: #c7d4df; }
.psc-zoom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--ps-blue, #1266d6);
  box-shadow: 0 1px 3px #12385f4d;
}
.psc-zoom-slider::-moz-range-track { height: 4px; border-radius: 2px; background: #c7d4df; }
.psc-zoom-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--ps-blue, #1266d6);
  box-shadow: 0 1px 3px #12385f4d;
}
.psc-zoom-status {
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 999px;
  color: #3a5068;
  background: #e4edf5;
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  white-space: nowrap;
}
.psc-body {
  display: grid;
  grid-template-columns: minmax(285px, 36%) minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.psc-root:has(> .psc-map-legend:not([hidden])) .psc-body {
  box-sizing: border-box;
  padding-right: 202px;
}
.psc-body[data-layout="circular"] { grid-template-columns: minmax(340px, 44%) minmax(0, 1fr); }
.psc-body[data-layout="circular"]:not([data-presentation="compact"]) .psc-overview {
  box-sizing: border-box;
  padding-bottom: 154px;
}
.psc-body[data-layout="linear"] { grid-template-columns: 1fr; grid-template-rows: minmax(105px, 25%) minmax(0, 1fr); }
.psc-overview {
  display: grid;
  place-items: center;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--ps-line);
  background: #ffffff;
}
.psc-body[data-layout="linear"] .psc-overview { border-right: 0; border-bottom: 1px solid var(--ps-line); }
.psc-overview-svg {
  width: min(100%, 860px);
  max-height: 100%;
  overflow: visible;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
}
.psc-linear-overview-svg { width: calc(100% - 18px); height: 100%; min-height: 105px; }
.psc-backbone { fill: none; stroke: #111111; stroke-width: 1.1; }
.psc-backbone-inner { fill: none; stroke: #111111; stroke-width: 1.1; }
.psc-ring-base-track {
  fill: none;
  stroke: #f7fbff;
  stroke-linecap: butt;
  opacity: .96;
  pointer-events: none;
}
.psc-ring-comp-track {
  fill: none;
  stroke: #eef3f8;
  stroke-linecap: butt;
  opacity: .9;
  pointer-events: none;
}
.psc-ring-base,
.psc-ring-comp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  letter-spacing: 0;
  cursor: pointer;
  paint-order: stroke fill;
  stroke: #ffffffd9;
  stroke-width: 2.4px;
  stroke-linejoin: round;
}
.psc-ring-base { fill: #152536; }
.psc-ring-comp { fill: #5d6f82; font-weight: 650; }
.psc-ring-base.base-A, .psc-ring-comp.base-A { fill: #1d7a45; }
.psc-ring-base.base-C, .psc-ring-comp.base-C { fill: #1b67c9; }
.psc-ring-base.base-G, .psc-ring-comp.base-G { fill: #c97808; }
.psc-ring-base.base-T, .psc-ring-comp.base-T { fill: #c82f3d; }
.psc-ring-base.selected,
.psc-ring-comp.selected {
  fill: #0b6ebd;
  stroke: #d9efff;
  stroke-width: 3px;
}
.psc-ring-focus-caption {
  fill: #4d6276;
  font-size: 9px;
  font-weight: 650;
  pointer-events: none;
}
.psc-overview-svg.psc-bases-on-ring { cursor: crosshair; }
.psc-overview:has(.psc-overview-svg.psc-bases-on-ring) { cursor: crosshair; }
.psc-overview.psc-is-panning,
.psc-overview.psc-is-panning .psc-overview-svg,
.psc-overview.psc-is-panning .psc-ring-base,
.psc-overview.psc-is-panning .psc-feature-arc { cursor: grabbing !important; }
.psc-overview-svg.psc-circular-magnified {
  transition: none;
}

/* Full-plasmid LOD: restrained typography and bands keep the overview crisp.
   Mid/detail zoom progressively restores emphasis as more room becomes available. */
.psc-overview-svg.psc-lod-overview .psc-overview-title { font-size: 11px; }
.psc-overview-svg.psc-lod-overview .psc-overview-sub { font-size: 8.5px; }
.psc-overview-svg.psc-lod-overview .psc-arc-label { font-size: 7.6px; }
.psc-overview-svg.psc-lod-overview .psc-overview-label { font-size: 8.2px; }
.psc-overview-svg.psc-lod-overview .psc-enzyme-label { font-size: 8.2px; }
.psc-overview-svg.psc-lod-overview .psc-primer-label { font-size: 8px; }
.psc-overview-svg.psc-lod-overview .psc-coordinate-label { font-size: 6.4px; }
.psc-overview-svg.psc-lod-overview .psc-primer-arc { stroke-width: 2.5; }
.psc-overview-svg.psc-lod-overview .psc-amplicon-arc { stroke-width: 6; filter: none; }
.psc-overview-svg.psc-lod-overview .psc-amplicon-arc.preview { stroke-width: 7; filter: none; }
.psc-overview-svg.psc-lod-overview .psc-focus-arc { stroke-width: 7; opacity: .28; }
.psc-overview-svg.psc-lod-overview .psc-selection-arc { stroke-width: 2.5; }
.psc-overview-svg.psc-lod-mid .psc-overview-title { font-size: 10px; }
.psc-overview-svg.psc-lod-mid .psc-overview-sub { font-size: 7px; }
.psc-overview-svg.psc-lod-mid .psc-arc-label { font-size: 6.6px; }

.psc-map-legend {
  position: absolute;
  z-index: 24;
  top: 52px;
  right: 10px;
  display: grid;
  align-content: start;
  gap: 2px;
  width: 182px;
  max-height: calc(100% - 108px);
  padding: 8px;
  overflow: auto;
  border: 1px solid #c5d2dd;
  border-radius: 9px;
  color: #31485d;
  background: #fffffff2;
  box-shadow: 0 5px 18px #17384f20;
  backdrop-filter: blur(8px);
}
.psc-map-legend[hidden] { display: none; }
.psc-map-legend-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 5px;
  padding: 1px 3px 6px;
  border-bottom: 1px solid #dce5ec;
}
.psc-map-legend-head strong { color: #173d5b; font-size: 11px; }
.psc-map-legend-head small { color: #738495; font-size: 7.5px; }
.psc-map-legend-item {
  display: grid;
  grid-template-columns: 15px 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  min-height: 25px;
  padding: 2px 4px;
  border-radius: 5px;
  cursor: help;
  transition: background .12s ease;
}
.psc-map-legend-item:hover { background: #eaf3fa; }
.psc-map-legend-item input { width: 13px; height: 13px; margin: 0; accent-color: #167fc0; cursor: pointer; }
.psc-map-legend-label { overflow: hidden; font-size: 9.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.psc-map-legend-item > small { color: #7a8a98; font-size: 8px; font-variant-numeric: tabular-nums; }
.psc-map-legend-swatch {
  display: block;
  box-sizing: border-box;
  width: 17px;
  height: 7px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--legend-color) 0 50%, var(--legend-secondary, var(--legend-color)) 50%);
}
.psc-map-legend-swatch.dashed { height: 5px; border: 1.5px dashed var(--legend-color); background: transparent; }
.psc-map-legend-swatch.tick { width: 3px; height: 14px; margin-left: 7px; border-radius: 1px; }
.psc-map-legend-swatch.line { height: 2px; border-radius: 1px; }
.psc-legend-hovering .psc-overview-svg :is(
  .psc-feature-arc, .psc-feature-tick, .psc-arc-label, .psc-overview-label,
  .psc-primer-arc, .psc-primer-arrow, .psc-primer-label, .psc-enzyme-tick,
  .psc-enzyme-label, .psc-orf-arc, .psc-gc-arc, .psc-skew-arc,
  .psc-methylation-tick, .psc-amplicon-arc, .psc-coordinate-tick,
  .psc-coordinate-label, .psc-verification-ring, .psc-verification-tick
) { opacity: .28; }
.psc-legend-hovering .psc-overview-svg .psc-legend-match {
  opacity: 1;
  animation: psc-legend-soft-flash 1.15s ease-in-out infinite;
  filter: brightness(1.12) drop-shadow(0 0 2px #ffffff);
}
@keyframes psc-legend-soft-flash {
  0%, 100% { opacity: 1; }
  50% { opacity: .58; }
}
@media (prefers-reduced-motion: reduce) {
  .psc-legend-hovering .psc-overview-svg .psc-legend-match { animation: none; }
}
.psc-coordinate-tick { stroke: #111111; stroke-width: .8; }
.psc-coordinate-label {
  fill: #2b2b2b;
  font: 6.5px/1 "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
.psc-gc-arc, .psc-skew-arc, .psc-orf-arc {
  fill: none;
  stroke-linecap: butt;
}
.psc-gc-arc { stroke-width: 6; }
.psc-gc-arc.high { stroke: #1ca37f; }
.psc-gc-arc.low { stroke: #a8d8ca; }
.psc-skew-arc { stroke-width: 4; }
.psc-skew-arc.positive { stroke: #267ac4; }
.psc-skew-arc.negative { stroke: #e38b36; }
.psc-orf-arc { stroke-width: 2.5; cursor: pointer; }
.psc-orf-arc.forward { stroke: #3e8f5d; }
.psc-orf-arc.reverse { stroke: #8b5ab7; }
.psc-methylation-tick { stroke: #8b52b5; stroke-width: 2; cursor: pointer; }
.psc-selection-arc {
  fill: none;
  stroke: #12a6df;
  stroke-width: 4;
  stroke-linecap: round;
  animation: psc-selection-pulse 1.6s ease-in-out infinite;
  pointer-events: stroke;
  cursor: grab;
}
.psc-selection-arc:active { cursor: grabbing; }
@keyframes psc-selection-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  .psc-selection-arc { animation: none; }
}
.psc-overview-drag-selection {
  stroke: #087fce;
  stroke-width: 2;
  pointer-events: none;
}

.psc-circular-hover-lens {
  pointer-events: none;
}
.psc-lens-heading {
  fill: #124f7d;
  font: 700 8px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  paint-order: stroke fill;
  stroke: #f4f8fc;
  stroke-width: 3.5px;
}
.psc-lens-track-halo {
  fill: none;
  stroke: #f8fbfeee;
  stroke-width: 24px;
  stroke-linecap: round;
  filter: drop-shadow(0 1px 3px #173c5d3d);
}
.psc-lens-track { fill: none; stroke: #7895aa; stroke-width: 1.4px; }
.psc-lens-guide { stroke: #168bd2; stroke-width: 1.2px; stroke-dasharray: 2.5 2; }
.psc-lens-base {
  font: 750 8.6px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  paint-order: stroke fill;
  stroke: #fff;
  stroke-width: 2.2px;
  stroke-linejoin: round;
}
.psc-lens-base.base-A { fill: #1d7a45; }
.psc-lens-base.base-C { fill: #1b67c9; }
.psc-lens-base.base-G { fill: #c97808; }
.psc-lens-base.base-T { fill: #c82f3d; }
.psc-lens-base.center { font-size: 12px; fill: #075f9e; stroke: #d8efff; stroke-width: 4px; }
.psc-lens-coordinate {
  fill: #70869a;
  font: 600 5.8px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  paint-order: stroke fill;
  stroke: #f8fbfe;
  stroke-width: 2.4px;
}
rect.psc-overview-drag-selection { fill: #148bd226; stroke-dasharray: 4 2; }
path.psc-overview-drag-selection { fill: none; stroke-width: 10; stroke-linecap: round; opacity: .72; }
.psc-feature-arc {
  stroke-width: 1.2;
  stroke-linejoin: round;
  cursor: pointer;
  transition: filter .12s ease;
}
.psc-feature-arc:hover { filter: brightness(1.06); }
.psc-feature-arc.selected {
  cursor: grab;
  stroke-width: 1.6;
}
.psc-feature-arc.selected:active { cursor: grabbing; }
.psc-feature-tick { stroke-width: 3; cursor: pointer; }
.psc-arc-label {
  font: 600 8.4px/1 "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
  pointer-events: none;
}
.psc-feature-handle-svg {
  fill: #ffffff;
  stroke: #148bd2;
  stroke-width: 2.5;
  cursor: grab;
  filter: drop-shadow(0 1px 3px #0c355e55);
  transition: r .1s ease, stroke-width .1s ease;
}
.psc-feature-handle-svg:hover { r: 8; stroke-width: 3.5; }
.psc-feature-handle-svg:active { cursor: grabbing; }
.psc-feature-handle-svg:focus-visible {
  outline: none;
  stroke: #0c355e;
  filter: drop-shadow(0 0 0 3px #148bd255);
}
.psc-primer-arc { fill: none; stroke: #009da8; stroke-width: 4; stroke-dasharray: 6 3; cursor: pointer; }
.psc-primer-arc.reverse { stroke: #8d51cc; }
.psc-primer-arrow.forward { fill: #009da8; }
.psc-primer-arrow.reverse { fill: #8d51cc; }
/* Enzyme label rules by cut frequency: unique = red box, 2 sites = red text,
   3+ = black. Modifiers mark rare, blunt and Type IIS (offset) cutters. */
.psc-enzyme-tick { stroke: #111111; stroke-width: .9; }
.psc-enzyme-tick.unique { stroke: #111111; stroke-width: 1.1; }
.psc-enzyme-tick.dual { stroke: #111111; stroke-width: 1; }
.psc-enzyme-tick.multi { stroke: #111111; stroke-width: .8; opacity: .6; }
.psc-focus-arc { fill: none; stroke: #168bd2; stroke-width: 13; stroke-linecap: round; opacity: .38; pointer-events: none; }
.psc-focus-boundary { stroke: #168bd2; stroke-width: 1.5; stroke-dasharray: 3 2; pointer-events: none; }
.psc-label-leader { fill: none; stroke: #9a9a9a; stroke-width: .55; opacity: .9; }
.psc-enzyme-label-leader { stroke: #9a9a9a; stroke-width: .55; }
.psc-feature-label-leader { stroke: #9a9a9a; stroke-width: .55; }
.psc-primer-label-leader { stroke: #b39ad0; }
.psc-overview-label {
  font-family: "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif;
  font-size: 8.6px;
  font-weight: 700;
  cursor: pointer;
}
.psc-feature-label { fill: #111111; font-weight: 600; }
/* Printed-map typography: bold enzyme names with the cut coordinate set
   lighter beside them, so a dense ring of labels still scans name-first. */
.psc-enzyme-label {
  font-size: 8.6px;
  font-weight: 700;
  font-family: "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif;
  fill: #1d232a;
  cursor: pointer;
}
.psc-enzyme-label-position { font-weight: 400; fill: #4a4a4a; }
.psc-enzyme-label.unique { fill: #111111; font-weight: 700; }
.psc-enzyme-label.dual { fill: #111111; font-weight: 600; }
.psc-enzyme-label.multi { fill: #3d3d3d; font-weight: 500; }
.psc-enzyme-label.rare-cutter { font-weight: 800; }
.psc-enzyme-label.offset-cutter { font-style: italic; }
.psc-primer-label { fill: #8b3fd1; font-size: 8.2px; font-weight: 500; cursor: pointer; }
.psc-primer-label-range { font-weight: 400; fill: #a06bd8; }
.psc-overview-title {
  fill: #111111;
  font-family: "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
}
.psc-overview-sub {
  fill: #111111;
  font-family: "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 400;
}
.psc-linear-backbone { stroke: #63778b; stroke-width: 7; stroke-linecap: round; }
.psc-linear-overview-feature { opacity: .78; cursor: pointer; }
.psc-linear-overview-feature:hover { opacity: 1; filter: drop-shadow(0 1px 2px #193b5a66); }
.psc-linear-overview-label { fill: var(--ps-ink); font-size: 8px; }
.psc-linear-primer { fill: #009da8; opacity: .85; cursor: pointer; }
.psc-linear-primer.reverse { fill: #8d51cc; }
.psc-linear-orf.forward { fill: #3e8f5d; }
.psc-linear-orf.reverse { fill: #8b5ab7; }
.psc-linear-methylation { fill: #8b52b5; stroke: #fff; stroke-width: .7; cursor: pointer; }
.psc-linear-gc-profile,
.psc-linear-skew-profile { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.psc-linear-gc-profile { stroke: #159674; stroke-width: 2; }
.psc-linear-skew-profile { stroke: #dd7d27; stroke-width: 1.2; }
.psc-linear-chart-label { fill: #617588; font-size: 7px; }
.psc-linear-selection { fill: #12a6df35; stroke: #078ecc; stroke-width: 1.3; }
.psc-linear-end-label { fill: #52687d; font-size: 8px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.psc-linear-focus-window { fill: #1594db1f; stroke: #168bd2; stroke-width: 2; stroke-dasharray: 5 3; }
.psc-focus-host { min-width: 0; min-height: 0; overflow: hidden; background: #fff; }
.psc-detail {
  position: relative;
  height: 100%;
  min-height: 360px;
  padding: 10px 12px 25px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #b6c6d6 transparent;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  background:
    linear-gradient(90deg, transparent 49.8%, #dbe5ed55 50%, transparent 50.2%),
    #fff;
}
.psc-detail::-webkit-scrollbar { width: 9px; height: 9px; }
.psc-detail::-webkit-scrollbar-thumb { border-radius: 5px; background: #b6c6d6; }
.psc-detail::-webkit-scrollbar-thumb:hover { background: #93a8ba; }
.psc-detail::-webkit-scrollbar-track { background: transparent; }
.psc-wrapped-detail {
  --psc-base-size: 12px;
  display: block;
  padding: 12px 18px 28px;
  background: #fff;
}
.psc-insertion-label {
  margin: 0 0 10px 24px;
  color: #168bd2;
  font: 700 11px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.psc-insertion-caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin: 0 1px 0 0;
  vertical-align: text-bottom;
  background: #168bd2;
  pointer-events: none;
}
.psc-insertion-caret-blink {
  animation: psc-caret-blink 1s steps(1, end) infinite;
}
@keyframes psc-caret-blink {
  0%, 45% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .psc-insertion-caret-blink { animation: none; }
}
.psc-base.enzyme-hover-site,
.psc-comp-base.enzyme-hover-site {
  background: #d7d7d7;
}
/* The two fragments a cut produces are tinted differently; on a sticky end the
   staggered overhang therefore reads as opposite colours on the two strands. */
.psc-base.enzyme-hover-left { box-shadow: inset 0 -3px 0 #1668b8; }
.psc-base.enzyme-hover-right { box-shadow: inset 0 -3px 0 #d97706; }
.psc-comp-base.enzyme-hover-left { box-shadow: inset 0 3px 0 #1668b8; }
.psc-comp-base.enzyme-hover-right { box-shadow: inset 0 3px 0 #d97706; }
.psc-base.enzyme-hover-left:not(.enzyme-hover-site),
.psc-comp-base.enzyme-hover-left:not(.enzyme-hover-site) { background: #e6f0fa; }
.psc-base.enzyme-hover-right:not(.enzyme-hover-site),
.psc-comp-base.enzyme-hover-right:not(.enzyme-hover-site) { background: #fdf1e0; }
/* Exact cut column on each strand — drawn as an overlay so it never changes
   base widths (which would shift the whole sequence). */
.psc-base.enzyme-hover-cut-top::before,
.psc-comp-base.enzyme-hover-cut-bottom::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 2px;
  background: #e11d2e;
  pointer-events: none;
}
.psc-comp-base { position: relative; }
.psc-cut-connector {
  position: absolute;
  z-index: 6;
  top: 0;
  left: 0;
  overflow: visible;
  pointer-events: none;
}
.psc-cut-connector-path {
  fill: none;
  stroke: #e11d2e;
  stroke-width: 2;
  stroke-linejoin: miter;
}
.psc-cut-connector-arrow { fill: #e11d2e; }
.psc-base {
  position: relative;
}
/* Deleted bases leave the strands immediately — the edit is not a suggestion
   waiting for approval, it is applied, and the review panel is where the
   removed bases can still be read. Both strands collapse together so the
   forward and complement rows stay column-aligned. */
.psc-base.pending-delete,
.psc-comp-base.pending-delete,
.psc-base.pending-replace,
.psc-comp-base.pending-replace {
  display: none !important;
}
/* Applied changes, shown while the review panel is open: inserted bases in
   blue, and a red tick standing where bases were removed. */
.psc-base.change-inserted,
.psc-comp-base.change-inserted {
  color: #10488f !important;
  background: #dbe9fb !important;
  box-shadow: inset 0 0 0 1px #93bdf0;
}
.psc-base.change-removed-before,
.psc-comp-base.change-removed-before { position: relative; }
.psc-base.change-removed-before::after,
.psc-comp-base.change-removed-before::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -1px;
  width: 2px;
  background: #d81f36;
  pointer-events: none;
}
.psc-pending-insert,
.psc-pending-replace-insert {
  display: inline-flex;
  align-items: stretch;
  margin: 0;
  vertical-align: baseline;
}
.psc-pending-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--psc-base-size, 12px);
  padding: 0 1px;
  /* Inserted bases are blue everywhere in the studio — inline while they are
     being typed, and in the review panel afterwards. */
  color: #10488f;
  background: #dbe9fb;
  box-shadow: inset 0 0 0 1px #93bdf0;
  font: 700 12px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.psc-sequence-line {
  width: max-content;
  min-width: 100%;
  padding: 8px 0 18px;
  border-bottom: 1px solid #dce5ec;
  /* A long plasmid is thousands of base cells in one flow, so an edit inside
     one line would otherwise relayout every other line. Containment keeps a
     keystroke's layout cost proportional to the line being typed into. */
  contain: layout;
}
.psc-sequence-line + .psc-sequence-line { padding-top: 20px; }
.psc-line-annotations {
  position: relative;
  width: calc(var(--base-columns, 60) * var(--psc-base-size));
  min-width: 360px;
  margin-left: 24px;
  border-bottom: 1px solid #aebbc7;
}
.psc-line-enzyme {
  position: absolute;
  z-index: 4;
  top: 0;
  min-width: 1px;
  padding: 0 3px 8px;
  border: 0;
  border-left: 1px solid #566879;
  color: #25384b;
  background: transparent;
  transform: translateX(-1px);
  font-size: 8px;
  font-weight: 700;
  white-space: nowrap;
}
.psc-line-enzyme.unique { border-left: 2px solid #bd2c3a; color: #a51f2b; }
.psc-line-enzyme.rotated {
  transform: translateX(-1px) rotate(-45deg);
  transform-origin: left bottom;
}
.psc-enzyme-recognition {
  position: absolute;
  z-index: 2;
  top: 12px;
  height: 4px;
  border-radius: 2px;
  background: #94a3b866;
  pointer-events: none;
}
.psc-enzyme-recognition.unique { background: #bd2c3a55; }
.psc-enzyme-cut,
.psc-strand-cut {
  position: absolute;
  z-index: 5;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 2px solid #be2835;
  pointer-events: none;
  transform: translateX(-1px);
}
.psc-enzyme-cut::before,
.psc-strand-cut::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -4px;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 5px solid #be2835;
}
.psc-strand-cut {
  top: -2px;
  bottom: -2px;
  border-left-style: solid;
}
.psc-strand-cut.sticky::after {
  content: "";
  position: absolute;
  left: calc(var(--bottom-cut-offset, 0) * var(--psc-base-size, 12px) - 4px);
  bottom: -2px;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 5px solid #be2835;
}
.psc-strand-cut.blunt::after {
  content: "";
  position: absolute;
  left: -4px;
  bottom: -2px;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 5px solid #be2835;
}
.psc-cut-overlay {
  position: relative;
  width: calc(var(--base-columns, 60) * var(--psc-base-size));
  min-width: 360px;
  height: 10px;
  margin: 0 0 0 24px;
  pointer-events: none;
}
.psc-snap-cut-lane {
  display: grid;
  grid-template-columns: 24px 1fr 48px;
  align-items: center;
  min-height: 10px;
}
.psc-line-feature,
.psc-line-primer {
  --feature-color: #d97706;
  position: absolute;
  height: 15px;
  min-width: 4px;
  padding: 1px 5px;
  overflow: hidden;
  border: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8px;
  cursor: pointer;
}
.psc-line-feature {
  color: #fff;
  background: var(--feature-color);
  font-weight: 600;
  text-shadow: 0 1px 1px #0005;
}
.psc-line-feature.forward { clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%); }
.psc-line-feature.reverse { clip-path: polygon(9px 0, 100% 0, 100% 100%, 9px 100%, 0 50%); }
.psc-line-primer {
  height: 13px;
  border: 1px solid #36a69f;
  color: #075b62;
  background: #a7eee7;
}
.psc-line-primer.reverse { border-color: #8d51cc; color: #572989; background: #dfc8f4; }
.psc-line-strands {
  position: relative;
  display: grid;
  grid-template-columns: 24px max-content 56px 24px;
  align-items: center;
}
.psc-selection-frame {
  position: absolute;
  z-index: 8;
  left: calc(24px + var(--selection-offset) * var(--psc-base-size));
  top: -2px;
  width: calc(var(--selection-length) * var(--psc-base-size));
  height: 42px;
  border: 2px solid #087fce;
  border-radius: 4px;
  background: #148bd216;
  box-shadow: 0 1px 5px #0a659b2b;
  pointer-events: none;
}
.psc-line-coordinate-grid {
  min-width: 0;
  width: max-content;
  margin-left: 24px;
  padding-top: 3px;
  border-top: 1px solid #738596;
}
.psc-line-ruler { margin-bottom: 6px; }
.psc-line-coordinate-grid span {
  position: relative;
  overflow: visible;
}
.psc-line-coordinate-grid span:nth-child(10n + 1)::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  height: 4px;
  border-left: 1px solid #738596;
}
.psc-line-bases { justify-content: start; min-width: 0; }
.psc-wrapped-detail .psc-base,
.psc-wrapped-detail .psc-comp-base,
.psc-wrapped-detail .psc-translation-row > span {
  width: var(--psc-base-size);
  font-size: 9px;
}
.psc-wrapped-detail .psc-base { height: 20px; }
.psc-wrapped-detail .psc-comp-base { height: 18px; }
.psc-strand-end,
.psc-line-coordinate {
  color: #4f6172;
  font: 700 9px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-align: center;
}
.psc-line-coordinate { padding-left: 9px; text-align: left; font-variant-numeric: tabular-nums; }
.psc-line-translations {
  display: grid;
  gap: 1px;
  width: max-content;
  margin: 4px 0 0 24px;
}
.psc-wrapped-detail .psc-translation-row { justify-content: start; min-width: 0; }
.psc-wrapped-detail .psc-translation-row::before { left: -21px; }

/* Visualization > Sequence: dense, wrapped double-strand presentation. */
.ps-viz-panel-sequence {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  background: #fff;
}
.ps-sequence-toolbar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 31px;
  padding: 3px 7px;
  border: 1px solid #c9d1d8;
  border-bottom: 0;
  background: linear-gradient(#fbfbfc, #eceff2);
  box-shadow: 0 1px 3px #17283a14;
}
.ps-sequence-view-title {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  margin-right: auto;
}
.ps-sequence-view-title strong { font-size: 11px; }
.ps-sequence-view-title span { color: #687684; font-size: 8px; }
.ps-sequence-layer-controls {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid #bfc8d0;
  border-radius: 5px;
  background: #fff;
}
.ps-sequence-tool {
  min-height: 28px;
  padding: 4px 10px;
  border: 0;
  border-right: 1px solid #cbd3da;
  color: #405264;
  background: #fff;
  font-size: 11px;
  cursor: pointer;
}
.ps-sequence-tool:last-child { border-right: 0; }
.ps-sequence-tool:hover { background: #edf4fa; }
.ps-sequence-tool.active {
  color: #174f7d;
  background: #dcebf7;
  box-shadow: inset 0 -2px #1684c5;
  font-weight: 650;
}
.ps-line-width-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #5d6b78;
  font-size: 10px;
}
.ps-line-width-select {
  height: 28px;
  padding: 3px 24px 3px 7px;
  border: 1px solid #bfc8d0;
  border-radius: 5px;
  color: #263b50;
  background: #fff;
  font-size: 11px;
}
.ps-snapgene-sequence {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #c9d1d8;
  background: #fff;
}
.ps-sequence-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  align-items: start;
  overflow: visible;
  background: #fff;
}
.ps-sequence-content { min-width: 0; }
.ps-sequence-rail {
  position: sticky;
  top: 82px;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 6px 9px;
  border-bottom: 1px solid #d5dee7;
  background: rgb(249 251 253 / .98);
  box-shadow: 0 2px 8px rgb(34 53 71 / .08);
  backdrop-filter: blur(12px);
}
.ps-sequence-rail-item {
  --sequence-tool-color: #2774b8;
  position: relative;
  display: inline-grid;
  grid-template-columns: minmax(48px, auto) 18px;
  min-height: 39px;
  border: 1px solid #d3dde6;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(28 48 67 / .06);
}
.ps-sequence-rail-item[data-sequence-tool="features"] { --sequence-tool-color: #268451; }
.ps-sequence-rail-item[data-sequence-tool="primers"] { --sequence-tool-color: #a245b5; }
.ps-sequence-rail-item[data-sequence-tool="translations"] { --sequence-tool-color: #6f55c7; }
.ps-sequence-rail-item[data-sequence-tool="colors"] { --sequence-tool-color: #d24262; }
.ps-sequence-rail-item[data-sequence-tool="alignments"] { --sequence-tool-color: #157a87; }
.ps-sequence-rail-item[data-sequence-tool="width"] { --sequence-tool-color: #596b7c; }
.ps-sequence-rail-item[data-sequence-tool="amino"] { --sequence-tool-color: #176ac1; }
.ps-sequence-rail-item[data-sequence-tool="wrap"] { --sequence-tool-color: #5d6b78; }
.ps-sequence-rail-item[data-sequence-tool="format"] { --sequence-tool-color: #8c5c39; }
.ps-sequence-rail-item:hover {
  border-color: color-mix(in srgb, var(--sequence-tool-color) 45%, #d3dde6);
  box-shadow: 0 3px 9px rgb(28 48 67 / .11);
}
.ps-sequence-rail-main,
.ps-sequence-rail-arrow {
  border: 0;
  color: #405367;
  background: transparent;
  cursor: pointer;
}
.ps-sequence-rail-main {
  display: inline-grid;
  grid-template-columns: 24px auto;
  place-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 37px;
  padding: 4px 7px;
  border-radius: 7px 0 0 7px;
}
.ps-sequence-rail-main small {
  color: inherit;
  font-size: 9px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
}
.ps-sequence-rail-main:hover,
.ps-sequence-rail-main:focus-visible,
.ps-sequence-rail-arrow:hover,
.ps-sequence-rail-arrow:focus-visible {
  color: var(--sequence-tool-color);
  background: color-mix(in srgb, var(--sequence-tool-color) 9%, white);
  outline: 2px solid color-mix(in srgb, var(--sequence-tool-color) 65%, white);
  outline-offset: -2px;
}
.ps-sequence-rail-main.active {
  color: var(--sequence-tool-color);
  background: color-mix(in srgb, var(--sequence-tool-color) 11%, white);
  box-shadow: inset 0 -2px var(--sequence-tool-color);
}
.ps-sequence-rail-arrow {
  min-width: 0;
  padding: 0;
  border-left: 1px solid #e0e6eb;
  border-radius: 0 7px 7px 0;
  color: #718092;
  font-size: 10px;
}
.ps-sequence-rail-divider {
  width: 1px;
  height: 27px;
  margin: 0 2px;
  background: #d2dce5;
}
.ps-rail-icon {
  display: block;
  width: 22px;
  height: 22px;
  color: var(--sequence-tool-color);
  pointer-events: none;
}
.ps-rail-icon svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ps-rail-icon svg > :not(text):not(.solid):not(.color-blue):not(.color-red) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ps-rail-icon .solid { fill: currentColor; stroke: none; opacity: .84; }
.ps-rail-icon .color-blue { fill: #0b91ba; stroke: none; opacity: .9; }
.ps-rail-icon .color-red { fill: #d52e54; stroke: none; opacity: .86; }
.ps-rail-icon .icon-text,
.ps-rail-icon .icon-number {
  fill: currentColor;
  font: 750 9px/1 Inter, ui-sans-serif, system-ui, sans-serif;
}
.ps-rail-icon .icon-number { font-size: 7px; }
.ps-sequence-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 80;
  width: max-content;
  min-width: 305px;
  max-width: min(440px, calc(100vw - 170px));
  max-height: min(620px, calc(100vh - 105px));
  padding: 6px 0;
  overflow-y: auto;
  border: 1px solid #c6d2dc;
  border-radius: 10px;
  background: rgb(255 255 255 / .98);
  box-shadow: 0 14px 34px rgb(25 42 58 / .2), 0 2px 7px rgb(25 42 58 / .1);
  backdrop-filter: blur(16px);
}
.ps-sequence-rail-item[data-sequence-tool="width"] .ps-sequence-popover,
.ps-sequence-rail-item[data-sequence-tool="amino"] .ps-sequence-popover,
.ps-sequence-rail-item[data-sequence-tool="wrap"] .ps-sequence-popover,
.ps-sequence-rail-item[data-sequence-tool="format"] .ps-sequence-popover {
  right: 0;
  left: auto;
}
.ps-sequence-menu-item {
  display: grid;
  grid-template-columns: 25px 1fr;
  width: 100%;
  min-height: 30px;
  padding: 5px 14px 5px 4px;
  border: 0;
  color: #202124;
  background: transparent;
  cursor: pointer;
  font: 12px/1.2 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: left;
  white-space: nowrap;
}
.ps-sequence-menu-item:hover,
.ps-sequence-menu-item:focus-visible {
  color: #124f80;
  background: #e8f3fb;
  outline: none;
}
.ps-sequence-menu-check { font-weight: 800; text-align: center; }
.ps-sequence-menu-separator {
  height: 1px;
  margin: 5px 0;
  background: #d0d0d0;
}
.ps-sequence-panel-head {
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  min-height: 36px;
  padding: 0 10px 5px 5px;
  border-bottom: 1px solid #d6d8da;
  color: #252a2f;
  font: 13px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.ps-sequence-back {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}
.ps-sequence-back:hover { background: #e0e5e9; }
.ps-sequence-panel-actions {
  display: flex;
  gap: 5px;
  justify-content: flex-end;
  padding: 6px 9px 3px;
}
.ps-sequence-enzyme-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px 8px;
  max-height: 310px;
  padding: 5px 9px 9px;
  overflow: auto;
}
.ps-sequence-enzyme-picker label {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  min-height: 27px;
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 12px;
}
.ps-sequence-enzyme-picker label:hover { background: #e5edf4; }
.ps-sequence-enzyme-picker small { color: #69737b; }
.ps-sequence-inline-field {
  display: grid;
  grid-template-columns: 1fr 75px;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  color: #31383e;
  font-size: 12px;
}
.ps-sequence-inline-field input {
  width: 100%;
  height: 28px;
  border: 1px solid #b9c1c8;
  border-radius: 5px;
  background: #fff;
  text-align: right;
}
.ps-sequence-alignment-input {
  display: block;
  width: calc(100% - 20px);
  margin: 9px 10px 7px;
  padding: 7px;
  resize: vertical;
  border: 1px solid #b8c0c7;
  border-radius: 5px;
  font: 11px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.ps-sequence-apply {
  float: right;
  margin: 0 10px 8px;
  padding: 6px 11px;
  border: 1px solid #0878bd;
  border-radius: 5px;
  color: #fff;
  background: #0b85cd;
  cursor: pointer;
}
/* Sequence change review: the ✓ toggle in the sequence toolbar and the panel
   it opens. Removed bases read red, inserted bases blue, everywhere. */
.ps-sequence-changes-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  min-height: 23px;
  padding: 2px 8px;
  border: 1px solid #b8c2cc;
  border-radius: 5px;
  color: #30475d;
  background: #fff;
  cursor: pointer;
  font-size: 9px;
  font-weight: 600;
}
.ps-sequence-changes-toggle + .ps-sequence-complement-toggle { margin-left: 0; }
.ps-sequence-changes-toggle:hover { border-color: #7d8f9f; background: #f4f8fc; }
.ps-sequence-changes-toggle.has-changes { border-color: #1668b8; color: #10488f; }
.ps-sequence-changes-toggle.active {
  color: #fff;
  background: #1668b8;
  border-color: #1668b8;
}
.ps-sequence-changes-check { font-size: 11px; line-height: 1; }
.ps-sequence-changes-count {
  min-width: 15px;
  padding: 0 4px;
  border-radius: 999px;
  color: #fff;
  background: #1668b8;
  font-size: 8px;
  line-height: 14px;
  text-align: center;
}
.ps-sequence-changes-toggle.active .ps-sequence-changes-count { color: #10488f; background: #fff; }
.ps-sequence-changes-panel {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 7px 10px;
  border-bottom: 1px solid #dce5ec;
  background: #f8fafc;
}
.ps-sequence-changes-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 10px;
}
.ps-sequence-changes-hint {
  overflow: hidden;
  color: #6b7780;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ps-sequence-change-key {
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}
.ps-sequence-change-key.removed { color: #9f1239; background: #ffe4e6; }
.ps-sequence-change-key.inserted { color: #10488f; background: #dbe9fb; }
.ps-sequence-changes-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.ps-sequence-changes-close {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 5px;
  color: #596873;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.ps-sequence-changes-close:hover { background: #e5ecf3; }
/* Deleted bases, put back into the strand in red for review. */
.psc-change-removed-chip {
  display: inline-flex;
  align-items: stretch;
  margin: 0;
  vertical-align: baseline;
}
.psc-change-removed-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--psc-base-size, 12px);
  color: #9f1239;
  background: #ffe4e6;
  box-shadow: inset 0 0 0 1px #f2a9b4;
  font: 700 12px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: #be123c;
}
.psc-change-removed-complement .psc-change-removed-base { color: #7d0f2c; background: #ffd7dd; }
.psc-wrapped-detail .psc-line-bases.pending-reflow .psc-change-removed-chip { display: contents; }
.psc-wrapped-detail .psc-change-removed-base { width: var(--psc-base-size); min-width: 0; padding: 0; }
.ps-sequence-complement-toggle {
  margin-left: auto;
  min-height: 23px;
  padding: 2px 7px;
  border: 1px solid #b8c2cc;
  border-radius: 5px;
  color: #30475d;
  background: #fff;
  cursor: pointer;
  font-size: 9px;
}
.ps-sequence-preset {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #596873;
  font-size: 8px;
}
.ps-sequence-preset-select {
  height: 23px;
  min-width: 106px;
  padding: 2px 20px 2px 6px;
  border: 1px solid #b9c3cb;
  border-radius: 5px;
  color: #2e4355;
  background: #fff;
  font-size: 9px;
}
.ps-sequence-stage { isolation: isolate; }
.ps-sequence-footer {
  position: sticky;
  z-index: 42;
  top: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "head head"
    "track track"
    "status actions";
  align-items: center;
  gap: 4px 10px;
  min-height: 82px;
  padding: 5px 9px 6px;
  border: 1px solid #aeb8c0;
  border-bottom-color: #929ea8;
  background: rgb(246 248 249 / .96);
  box-shadow: 0 4px 15px rgb(33 45 55 / .13);
  backdrop-filter: blur(12px);
}
.ps-sequence-overview-head {
  grid-area: head;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.ps-sequence-overview-title {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
  margin-right: auto;
}
.ps-sequence-overview-title strong {
  color: #243b50;
  font-size: 10px;
  letter-spacing: .02em;
}
.ps-sequence-overview-title span {
  overflow: hidden;
  color: #667582;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ps-sequence-overview-legend {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #687783;
  font-size: 8px;
  white-space: nowrap;
}
.ps-sequence-overview-legend span::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 5px;
  margin-right: 3px;
  border-radius: 2px;
  vertical-align: 1px;
  background: #8795a1;
}
.ps-sequence-overview-legend .visible::before { border: 1px solid #087ec4; background: #d8f0ff; }
.ps-sequence-overview-legend .selection::before { background: #f0a629; }
.ps-sequence-overview-legend .cursor::before { width: 2px; background: #d22f52; }
.ps-sequence-overview-legend .feature::before { background: #3b9b68; }
.ps-sequence-footer-actions {
  grid-area: actions;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ps-sequence-status-items {
  grid-area: status;
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  color: #566570;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
}
.ps-sequence-status-items > span {
  padding: 0 8px;
  border-right: 1px solid #ccd2d6;
}
.ps-sequence-status-items > span:first-child { padding-left: 2px; color: #263f54; font-weight: 700; }
.ps-sequence-hidden-warning {
  margin-left: 6px;
  padding: 3px 6px;
  border: 1px solid #d2a74d;
  border-radius: 9px;
  color: #74510e;
  background: #fff3cf;
  cursor: pointer;
  font-size: 9px;
}
.ps-sequence-hidden-warning[hidden] { display: none; }
.ps-sequence-minimap-track {
  grid-area: track;
  position: relative;
  height: 28px;
  overflow: visible;
  border: 1px solid #9ca7af;
  border-radius: 5px;
  background:
    repeating-linear-gradient(to right, transparent 0, transparent calc(10% - 1px), rgb(81 99 114 / .16) calc(10% - 1px), rgb(81 99 114 / .16) 10%),
    linear-gradient(to bottom, transparent 12px, #66727a 12px 15px, transparent 15px),
    #edf0f2;
  cursor: crosshair;
  touch-action: none;
}
.ps-sequence-minimap-track:focus-visible { outline: 2px solid #1386c4; outline-offset: 2px; }
.ps-sequence-minimap-feature {
  position: absolute;
  z-index: 1;
  top: 5px;
  height: 18px;
  min-width: 2px;
  border: 1px solid rgb(50 57 63 / .35);
  border-radius: 2px;
  opacity: .72;
}
.ps-sequence-minimap-coordinate {
  position: absolute;
  z-index: 6;
  top: 7px;
  padding: 0 3px;
  border-radius: 3px;
  color: #3f5263;
  background: rgb(246 248 249 / .86);
  font: 700 8px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
  pointer-events: none;
}
.ps-sequence-minimap-coordinate.start { left: 3px; }
.ps-sequence-minimap-coordinate.end { right: 3px; }
.ps-sequence-minimap-selection {
  position: absolute;
  z-index: 3;
  top: 2px;
  bottom: 2px;
  min-width: 3px;
  border: 1px solid #d48808;
  border-radius: 3px;
  background: rgb(255 184 53 / .5);
  pointer-events: none;
}
.ps-sequence-minimap-selection[hidden] { display: none; }
.ps-sequence-minimap-viewport {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  min-width: 5px;
  border: 2px solid #087ec4;
  border-radius: 3px;
  background: rgb(255 255 255 / .5);
  box-shadow: 0 0 0 9999px rgb(63 72 80 / .14);
  pointer-events: none;
}
.ps-sequence-minimap-cursor {
  position: absolute;
  z-index: 7;
  top: -3px;
  bottom: -3px;
  width: 2px;
  margin-left: -1px;
  background: #d22f52;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .8);
  pointer-events: none;
}
.ps-sequence-minimap-cursor::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -3px;
  border-width: 4px 4px 0;
  border-style: solid;
  border-color: #d22f52 transparent transparent;
}
.ps-sequence-minimap-cursor > span {
  position: absolute;
  right: 5px;
  bottom: calc(100% + 1px);
  padding: 1px 4px;
  border-radius: 4px;
  color: #fff;
  background: #b52243;
  font: 700 8px/1.35 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: nowrap;
}
.ps-sequence-footer-action {
  min-width: 48px;
  height: 25px;
  padding: 3px 7px;
  border: 1px solid #b9c2c9;
  border-radius: 5px;
  color: #354d60;
  background: #fff;
  cursor: pointer;
  font-size: 10px;
}
.ps-sequence-footer-action:hover { border-color: #2584bd; background: #f1f9fd; }
@media (max-width: 1100px) {
  .ps-sequence-overview-legend { display: none; }
}
@media (max-width: 760px) {
  .ps-sequence-overview-title span,
  .ps-sequence-status-selection { display: none; }
}
.ps-sequence-hover-card {
  position: absolute;
  z-index: 55;
  width: 290px;
  padding: 10px;
  border: 1px solid #aeb8bf;
  border-radius: 9px;
  color: #26333d;
  background: rgb(255 255 255 / .98);
  box-shadow: 0 12px 32px rgb(25 35 43 / .24), 0 2px 8px rgb(25 35 43 / .12);
  backdrop-filter: blur(14px);
}
.ps-sequence-hover-card[hidden] { display: none; }
.ps-sequence-hover-card header {
  display: grid;
  grid-template-columns: 10px 1fr;
  align-items: center;
  gap: 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid #e0e4e7;
}
.ps-sequence-hover-card header div { display: grid; }
.ps-sequence-hover-card header small { color: #6b7780; font-size: 10px; }
.ps-sequence-hover-swatch { width: 8px; height: 30px; border-radius: 4px; }
.ps-sequence-hover-enzyme-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-left: -6px;
  border-radius: 6px;
  color: #a22131;
  background: #fde8eb;
  font-size: 12px;
}
.ps-sequence-hover-card dl { display: grid; gap: 4px; margin: 8px 0; font-size: 10px; }
.ps-sequence-hover-card dl div { display: grid; grid-template-columns: 58px 1fr; }
.ps-sequence-hover-card dt { color: #71808a; }
.ps-sequence-hover-card dd { margin: 0; font-variant-numeric: tabular-nums; }
.ps-sequence-hover-card p { margin: 7px 0; color: #52616c; font-size: 10px; line-height: 1.35; }
.ps-sequence-hover-actions { display: flex; justify-content: flex-end; gap: 3px; }
/* SnapGene-style enzyme hover card: identity on the left, an aligned
   two-strand schematic on the right, then a handling note. */
.ps-enzyme-hover-top {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
}
.ps-enzyme-hover-identity { display: grid; gap: 1px; }
.ps-enzyme-hover-name {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.ps-enzyme-hover-identity strong { font-size: 12px; }
.ps-enzyme-hover-identity .ps-enzyme-hover-position {
  color: #3b4650;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.ps-enzyme-hover-identity small { color: #6b7780; font-size: 10px; }
.ps-enzyme-cut-schematic {
  display: grid;
  gap: 3px;
  justify-self: end;
  font: 700 11px/1.15 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.ps-enzyme-cut-strand {
  display: flex;
  align-items: center;
  gap: 0;
}
.ps-enzyme-cut-strand span {
  position: relative;
  min-width: 1em;
  text-align: center;
}
.ps-enzyme-cut-mark {
  min-width: 0 !important;
  color: #15191d;
  font-size: 8px;
  line-height: 1;
}
.ps-enzyme-hover-note {
  margin: 8px 0 6px !important;
  padding-top: 7px;
  border-top: 1px solid #d5dade;
  color: #2c353c !important;
  font-size: 10px;
}
.ps-pending-edits {
  display: grid;
  gap: 6px;
  margin: 0 12px 8px;
  padding: 8px 10px;
  border: 1px solid #f0c36d;
  border-radius: 8px;
  background: #fff8e8;
}
.ps-pending-edits-head,
.ps-pending-edits-item-actions,
.ps-pending-edits-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ps-pending-edits-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ps-pending-edits-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 5px;
  background: #fff;
  font-size: 11px;
}
.ps-sequence-find-panel {
  position: fixed;
  z-index: 90;
  bottom: 54px;
  left: max(78px, calc((100vw - min(1440px, 100vw)) / 2 + 78px));
  display: grid;
  grid-template-columns: auto minmax(190px, 310px) auto repeat(3, 28px);
  align-items: center;
  gap: 5px;
  padding: 7px;
  border: 1px solid #aeb8c0;
  border-radius: 9px;
  background: rgb(255 255 255 / .98);
  box-shadow: 0 12px 30px rgb(25 35 43 / .24);
}
.ps-sequence-find-panel[hidden] { display: none; }
.ps-sequence-find-icon { color: #147db7; font-size: 20px; }
.ps-sequence-find-panel input {
  height: 30px;
  padding: 4px 7px;
  border: 1px solid #b9c2ca;
  border-radius: 5px;
  font-size: 12px;
}
.ps-sequence-find-count { min-width: 70px; color: #687680; font-size: 10px; text-align: right; }
.ps-sequence-find-panel button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 5px;
  color: #405462;
  background: #edf1f3;
  cursor: pointer;
}
.ps-sequence-command-overlay {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: grid;
  place-items: start center;
  padding-top: min(16vh, 150px);
  background: rgb(18 26 33 / .28);
  backdrop-filter: blur(3px);
}
.ps-sequence-command-overlay[hidden] { display: none; }
.ps-sequence-command-palette {
  width: min(600px, calc(100vw - 40px));
  overflow: hidden;
  border: 1px solid #9faab2;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 24px 70px rgb(15 24 31 / .34);
}
.ps-sequence-command-palette header {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border-bottom: 1px solid #d7dde1;
}
.ps-sequence-command-palette input {
  height: 34px;
  border: 0;
  outline: 0;
  font-size: 15px;
}
.ps-sequence-command-palette kbd,
.ps-sequence-command-list kbd {
  padding: 2px 5px;
  border: 1px solid #cbd2d7;
  border-radius: 4px;
  color: #62717c;
  background: #f2f4f5;
  font: 9px ui-monospace, monospace;
}
.ps-sequence-command-list { max-height: 390px; padding: 5px; overflow: auto; }
.ps-sequence-command-list button {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  width: 100%;
  min-height: 35px;
  padding: 5px 9px;
  border: 0;
  border-radius: 6px;
  color: #2f3e49;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.ps-sequence-command-list button:hover,
.ps-sequence-command-list button:focus-visible { color: #fff; background: #157dba; outline: none; }
.ps-sequence-command-list button:hover kbd,
.ps-sequence-command-list button:focus-visible kbd { color: #234; background: #fff; }
.ps-sequence-command-palette footer {
  padding: 7px 12px;
  border-top: 1px solid #e0e4e7;
  color: #6a7780;
  background: #f6f7f8;
  font-size: 9px;
}
.ps-snapgene-sequence .psc-root {
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.ps-snapgene-sequence.psc-root {
  display: block;
  height: auto;
  min-height: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.ps-snapgene-sequence .psc-toolbar,
.ps-snapgene-sequence .psc-layer-menu { display: none; }
.ps-snapgene-sequence .psc-body {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr) 76px;
  height: calc(100% - 32px);
  min-height: 0;
}
.ps-snapgene-sequence .psc-overview {
  display: none !important;
  grid-row: 2;
  min-height: 0;
  border-right: 0;
  border-top: 1px solid #aeb7c0;
  border-bottom: 0;
  background: #f1f3f5;
}
.ps-snapgene-sequence .psc-linear-overview-svg { min-height: 64px; }
.ps-snapgene-sequence .psc-focus-host {
  grid-row: 1;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.ps-snapgene-sequence .psc-wrapped-detail {
  /* SnapGene metrics: ~10px per base column with an 11px monospace glyph, so
     the letters sit in an evenly spaced comb with the strands close together. */
  --psc-base-size: calc(10px * var(--psc-sequence-scale, 1));
  --psc-strand-height: calc(14px * var(--psc-sequence-scale, 1));
  --psc-strand-gap: calc(3px * var(--psc-sequence-scale, 1));
  --psc-sequence-font-size: calc(11px * var(--psc-sequence-scale, 1));
  height: 100%;
  padding: 14px 20px 56px;
  overflow-x: auto;
  overflow-y: scroll;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  touch-action: pan-x pan-y;
  background: #fff;
}
.ps-snapgene-sequence .psc-sequence-line {
  min-width: max-content;
  margin-inline: auto;
  padding: 6px 0 12px;
  border-bottom: 0;
}
.ps-snapgene-sequence .psc-sequence-line + .psc-sequence-line { padding-top: 12px; }
.ps-snapgene-sequence .psc-snap-strand {
  display: grid;
  grid-template-columns: 52px max-content 52px;
  align-items: center;
  width: max-content;
  min-height: var(--psc-strand-height);
  margin-left: 0;
}
.ps-snapgene-sequence .psc-snap-forward { margin-bottom: var(--psc-strand-gap); }
.ps-snapgene-sequence .psc-snap-complement { margin-top: var(--psc-strand-gap); }
.ps-snapgene-sequence .psc-forward-row,
.ps-snapgene-sequence .psc-complement-row {
  font: 500 11px/1.15 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0;
}
.ps-snapgene-sequence .psc-base,
.ps-snapgene-sequence .psc-comp-base {
  width: var(--psc-base-size);
  height: var(--psc-strand-height);
  border: 0;
  color: #111;
  background: transparent;
  font-size: var(--psc-sequence-font-size);
  line-height: 1;
  font-weight: 500;
  user-select: none;
  -webkit-user-select: none;
}
.ps-snapgene-sequence .psc-comp-base { color: #111; }
.ps-snapgene-sequence .psc-pending-base { font-size: 10px; }
.ps-snapgene-sequence .psc-forward-row .psc-base,
.ps-snapgene-sequence .psc-complement-row .psc-comp-base { color: #111; }
/* The ruler sits between the two strands as a hairline crossed by a tick every
   tenth base, exactly where SnapGene draws its "+---+---+" separator. */
.ps-snapgene-sequence .psc-line-coordinate-grid {
  width: calc(var(--base-columns, 60) * var(--psc-base-size));
  min-height: 0;
  height: calc(5px * var(--psc-sequence-scale, 1));
  margin: var(--psc-strand-gap) 0 var(--psc-strand-gap) 52px;
  padding: 0;
  border-top: 0;
  border-bottom: 1px solid #58606a;
}
.ps-snapgene-sequence .psc-line-coordinate-grid span {
  min-height: calc(5px * var(--psc-sequence-scale, 1));
  font-size: 0;
}
.ps-snapgene-sequence .psc-line-coordinate-grid span:nth-child(10n + 1)::before {
  top: auto;
  bottom: -3px;
  height: 7px;
  border-left: 1px solid #58606a;
}
.ps-snapgene-sequence .psc-line-coordinate-grid span:nth-child(5n + 1):not(:nth-child(10n + 1))::before {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  height: 5px;
  border-left: 1px solid #777;
}
.ps-snapgene-sequence .psc-line-coordinate {
  padding: 0;
  color: #3c464f;
  font: 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-align: center;
}
.ps-snapgene-sequence .psc-line-start-coordinate { text-align: right; padding-right: 8px; }
.ps-snapgene-sequence .psc-line-end-coordinate { text-align: left; padding-left: 8px; }
.ps-snapgene-sequence .psc-line-annotations {
  width: calc(var(--base-columns, 60) * var(--psc-base-size));
  min-width: 0;
  margin: 2px 0 0 52px;
  border-bottom: 0;
}
.ps-snapgene-sequence .psc-enzyme-label-lane {
  position: relative;
  width: calc(var(--base-columns, 60) * var(--psc-base-size));
  height: 19px;
  margin-left: 52px;
  overflow: visible;
}
.ps-snapgene-sequence .psc-enzyme-label-lane:has(.track-1) { height: 35px; }
.ps-snapgene-sequence .psc-enzyme-label-lane.above { margin-bottom: 1px; }
.ps-snapgene-sequence .psc-enzyme-label-lane.below { margin-top: 1px; }
.ps-snapgene-sequence .psc-line-feature,
.ps-snapgene-sequence .psc-line-primer {
  height: 11px;
  min-width: 2px;
  padding: 0 5px;
  border: 1px solid color-mix(in srgb, var(--feature-color) 52%, #69737d);
  border-radius: 2px;
  color: #22272b;
  background: color-mix(in srgb, var(--feature-color) 34%, #fff);
  text-shadow: none;
  font: 600 8px/1.1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .005em;
  clip-path: none;
  transition: filter 100ms ease, box-shadow 100ms ease;
}
.ps-snapgene-sequence .psc-line-feature.arrow-end {
  padding-right: 8px;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 0 100%);
}
.ps-snapgene-sequence .psc-line-feature.arrow-start {
  padding-left: 8px;
  clip-path: polygon(6px 0, 100% 0, 100% 100%, 6px 100%, 0 50%);
}
.ps-snapgene-sequence .psc-line-feature.continues-left { border-left-color: transparent; }
.ps-snapgene-sequence .psc-line-feature.continues-right { border-right-color: transparent; }
.ps-snapgene-sequence .psc-line-feature:hover,
.ps-snapgene-sequence .psc-line-feature:focus-visible {
  z-index: 3;
  filter: saturate(1.08) brightness(.98);
  box-shadow: 0 0 0 2px rgb(25 118 178 / .22);
  outline: none;
}
.ps-snapgene-sequence .psc-line-primer {
  height: 11px;
  padding-block: 0;
  border-color: #56968e;
  color: #185f59;
  background: #d8f2ee;
  font-size: 8px;
}
.ps-snapgene-sequence .psc-line-primer.reverse {
  border-color: #8f72a9;
  color: #684180;
  background: #eee4f5;
}
.ps-snapgene-sequence .psc-line-enzyme {
  top: auto;
  bottom: auto;
  height: 14px;
  min-width: max-content;
  padding: 0 2px;
  border: 0;
  border-radius: 4px;
  color: #15191d;
  background: #fff;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 700;
  line-height: 13px;
  cursor: help;
}
/* Hovering an enzyme label must read as interactive on its own, before the
   detail card and the strand highlight appear. */
.psc-line-enzyme:hover,
.psc-line-enzyme:focus-visible {
  z-index: 6;
  background: #fff5f5;
  box-shadow: 0 0 0 1px #ed102b66, 0 2px 6px #1d232a26;
  outline: none;
}
.ps-snapgene-sequence .psc-line-enzyme:hover,
.ps-snapgene-sequence .psc-line-enzyme:focus-visible { background: #fff5f5; }
.ps-snapgene-sequence .psc-enzyme-label-lane.above .psc-line-enzyme.track-0 { bottom: 4px; }
.ps-snapgene-sequence .psc-enzyme-label-lane.above .psc-line-enzyme.track-1 { bottom: 19px; }
.ps-snapgene-sequence .psc-enzyme-label-lane.below .psc-line-enzyme.track-0 { top: 4px; }
.ps-snapgene-sequence .psc-enzyme-label-lane.below .psc-line-enzyme.track-1 { top: 19px; }
.ps-snapgene-sequence .psc-enzyme-label-lane.above .psc-line-enzyme::after,
.ps-snapgene-sequence .psc-enzyme-label-lane.below .psc-line-enzyme::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  height: 6px;
  background: #4e555b;
  transform: translateX(-50%);
}
.ps-snapgene-sequence .psc-enzyme-label-lane.above .psc-line-enzyme::after { top: 100%; }
.ps-snapgene-sequence .psc-enzyme-label-lane.below .psc-line-enzyme::after { bottom: 100%; }
.ps-snapgene-sequence .psc-line-enzyme.unique {
  border: 1.5px solid #ef132e;
  color: #ed102b;
  line-height: 10px;
}
.ps-snapgene-sequence .psc-line-enzyme.dual { color: #ed102b; }
.ps-snapgene-sequence .psc-line-enzyme.multi { color: #15191d; }
.ps-snapgene-sequence .psc-line-enzyme.rare-cutter { font-weight: 800; }
.ps-snapgene-sequence .psc-line-enzyme.offset-cutter { font-style: italic; }
.ps-snapgene-sequence .psc-line-enzyme.blunt-cutter { text-decoration: underline dotted 1px; }
.ps-snapgene-sequence .psc-enzyme-label-lane .psc-line-enzyme.dual::after { background: #ed102b; }
.ps-snapgene-sequence .psc-enzyme-label-lane.above .psc-line-enzyme.unique::after {
  top: calc(100% + 2px);
  width: 0;
  height: 0;
  border-top: 9px solid #ef132e;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  background: transparent;
}
.ps-snapgene-sequence .psc-enzyme-label-lane.below .psc-line-enzyme.unique::after {
  bottom: calc(100% + 2px);
  width: 0;
  height: 0;
  border-right: 6px solid transparent;
  border-bottom: 9px solid #ef132e;
  border-left: 6px solid transparent;
  background: transparent;
}
.ps-snapgene-sequence .psc-selection-bar { display: none; }
.ps-snapgene-sequence .psc-selection-tools {
  position: fixed;
  z-index: 75;
  top: auto;
  bottom: 48px;
}
.ps-snapgene-sequence .psc-base.dna-color-custom.base-A { color: #16833d; }
.ps-snapgene-sequence .psc-base.dna-color-custom.base-C { color: #1b67c9; }
.ps-snapgene-sequence .psc-base.dna-color-custom.base-G { color: #d17800; }
.ps-snapgene-sequence .psc-base.dna-color-custom.base-T { color: #c82f3d; }
.ps-snapgene-sequence .psc-base.dna-color-gc.base-G,
.ps-snapgene-sequence .psc-base.dna-color-gc.base-C {
  color: #095b75;
  background: #d8f1f4;
}
.ps-snapgene-sequence .psc-base.dna-color-gc.base-A,
.ps-snapgene-sequence .psc-base.dna-color-gc.base-T {
  color: #765300;
  background: #fff0c7;
}
.ps-snapgene-sequence .psc-base.dna-color-history:not(.history-change) { color: #7b838a; }
.ps-snapgene-sequence .psc-base.dna-color-history.history-change {
  color: #fff;
  background: #d04452;
}
.ps-snapgene-sequence .psc-format-blocks10 {
  --psc-block-gap: 7px;
}
.ps-snapgene-sequence .psc-format-blocks10 .psc-line-coordinate-grid {
  display: flex;
}
.ps-snapgene-sequence .psc-format-blocks10 .psc-line-coordinate-grid span {
  flex: 0 0 var(--psc-base-size);
}
.ps-snapgene-sequence .psc-format-blocks10 .psc-block-end,
.ps-snapgene-sequence .psc-format-compact .psc-block-end {
  /*
   * Match the reference's discrete 10-base groups. This is a real layout
   * gutter—not a box-shadow—so bases stay readable and the bottom strand,
   * ruler, and selection all share the same group boundary.
   */
  margin-right: var(--psc-block-gap, 5px);
}
.ps-snapgene-sequence .psc-format-blocks3 .psc-base:nth-child(3n),
.ps-snapgene-sequence .psc-format-blocks3 .psc-comp-base:nth-child(3n) {
  box-shadow: 4px 0 0 #fff;
}
/* Compact Format matches the dense reference view: grouped bases, narrow
   strand spacing, and no heavy ruler chrome while retaining both strands,
   feature labels, and reading frames. */
.ps-snapgene-sequence .psc-format-compact {
  --psc-base-size: calc(9px * var(--psc-sequence-scale, 1));
  --psc-block-gap: 5px;
}
.ps-snapgene-sequence .psc-format-compact .psc-sequence-line {
  padding-block: 3px 8px;
}
.ps-snapgene-sequence .psc-format-compact .psc-sequence-line + .psc-sequence-line {
  padding-top: 8px;
}
.ps-snapgene-sequence .psc-format-compact .psc-snap-strand {
  grid-template-columns: 42px max-content 42px;
}
.ps-snapgene-sequence .psc-format-compact .psc-line-coordinate-grid {
  display: flex;
  height: 3px;
  margin-left: 42px;
  border-bottom-color: #6d747c;
}
.ps-snapgene-sequence .psc-format-compact .psc-line-coordinate-grid span {
  flex: 0 0 var(--psc-base-size);
  min-height: 3px;
}
.ps-snapgene-sequence .psc-format-compact .psc-base,
.ps-snapgene-sequence .psc-format-compact .psc-comp-base {
  height: 11px;
  font-size: 10px;
}
.ps-snapgene-sequence .psc-format-compact .psc-line-annotations {
  margin-top: 1px;
}
.ps-snapgene-sequence .psc-format-compact .psc-line-translations {
  margin-top: 0;
}
.ps-snapgene-sequence .psc-format-compact .psc-translation-band,
.ps-snapgene-sequence .psc-format-compact .psc-translation-row {
  height: 10px;
}
/* Translations, SnapGene style: a band per annotated coding feature, painted in
   the feature's own colour, with every amino acid letter centred over the three
   bases of its codon. */
.ps-snapgene-sequence .psc-line-translations {
  display: grid;
  gap: 1px;
  width: calc(var(--base-columns, 60) * var(--psc-base-size));
  margin: 1px 0 0 52px;
}
.ps-snapgene-sequence .psc-translation-band {
  position: relative;
  display: flex;
  align-items: stretch;
  height: 12px;
  border: 1px solid color-mix(in srgb, var(--feature-color) 52%, #69737d);
  border-radius: 2px;
  background: color-mix(in srgb, var(--feature-color) 34%, #fff);
  cursor: pointer;
}
.ps-snapgene-sequence .psc-translation-band.arrow-end {
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 0 100%);
}
.ps-snapgene-sequence .psc-translation-band.arrow-start {
  clip-path: polygon(6px 0, 100% 0, 100% 100%, 6px 100%, 0 50%);
}
/* Chevrons in the coordinate gutters mark a translation that runs on to the
   previous or next line, the way SnapGene flags a continuing feature. */
.ps-snapgene-sequence .psc-translation-band.continues-left { border-left-color: transparent; }
.ps-snapgene-sequence .psc-translation-band.continues-right { border-right-color: transparent; }
.ps-snapgene-sequence .psc-translation-band.continues-left::before,
.ps-snapgene-sequence .psc-translation-band.continues-right::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transform: translateY(-50%);
}
.ps-snapgene-sequence .psc-translation-band.continues-left::before {
  left: -13px;
  border-right: 6px solid color-mix(in srgb, var(--feature-color) 70%, #52606c);
}
.ps-snapgene-sequence .psc-translation-band.continues-right::after {
  right: -13px;
  border-left: 6px solid color-mix(in srgb, var(--feature-color) 70%, #52606c);
}
.ps-snapgene-sequence .psc-translation-band:hover { filter: saturate(1.1) brightness(.98); }
.ps-snapgene-sequence .psc-translation-band > .psc-aa,
.ps-snapgene-sequence .psc-translation-row > .psc-aa {
  height: auto;
  border: 0;
  color: #1c2226;
  background: transparent;
  font: 600 8px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0;
}
.ps-snapgene-sequence .psc-translation-band > .psc-aa.stop,
.ps-snapgene-sequence .psc-translation-row > .psc-aa.stop {
  color: #a3121f;
  background: transparent;
  font-weight: 800;
}
.ps-snapgene-sequence .psc-translation-band > .psc-aa.start,
.ps-snapgene-sequence .psc-translation-row > .psc-aa.start {
  color: #0f6b37;
  background: transparent;
  font-weight: 800;
}
.ps-snapgene-sequence .psc-translation-row {
  height: 12px;
  border: 1px solid #cfd8de;
  border-radius: 2px;
  background: #f4f7f9;
}
.ps-snapgene-sequence .psc-translation-row.reverse {
  border-color: #ddd2e6;
  background: #f7f3fa;
}
.ps-snapgene-sequence .psc-translation-row::before {
  left: -32px;
  top: 2px;
  color: #4c5a66;
  font-size: 8px;
}
.ps-snapgene-sequence .psc-translation-band > .psc-aa.three-letter,
.ps-snapgene-sequence .psc-translation-row > .psc-aa.three-letter {
  z-index: 2;
  overflow: visible;
  font-size: 7px;
  letter-spacing: -.04em;
}
.psc-ruler {
  display: flex;
  justify-content: space-between;
  height: 23px;
  color: #64778b;
  border-bottom: 1px solid #abbccc;
  font: 10px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.psc-track-host { position: relative; min-width: 100%; margin: 7px 0 3px; border-bottom: 1px solid #d8e2ea; }
.psc-detail-feature {
  --feature-color: #d97706;
  position: absolute;
  min-width: 5px;
  height: 21px;
  padding: 2px 6px;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--feature-color), #1d2d3d 20%);
  border-radius: 4px;
  color: #fff;
  background: var(--feature-color);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  cursor: pointer;
}
.psc-detail-feature::after {
  content: "";
  position: absolute;
  right: -7px;
  top: 4px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 7px solid var(--feature-color);
}
.psc-detail-feature.reverse::after {
  left: -7px;
  right: auto;
  border-right: 7px solid var(--feature-color);
  border-left: 0;
}
.psc-detail-feature.selected { z-index: 4; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #168bd2; }
.psc-feature-handle {
  position: absolute;
  z-index: 5;
  top: -5px;
  width: 8px;
  height: 29px;
  border: 2px solid #fff;
  border-radius: 4px;
  background: #1266d6;
  box-shadow: 0 0 0 1px #17476f;
  cursor: ew-resize;
}
.psc-feature-handle.start { left: -5px; }
.psc-feature-handle.end { right: -5px; }
.psc-feature-handle.move {
  left: calc(50% - 7px);
  top: -4px;
  width: 14px;
  height: 8px;
  border-radius: 999px;
  cursor: grab;
}
.psc-primer {
  position: absolute;
  height: 18px;
  min-width: 5px;
  overflow: hidden;
  border: 0;
  color: #075b62;
  background: #80ddd8a8;
  border-bottom: 3px solid #008d94;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8px;
}
.psc-primer.reverse { border-bottom-color: #8d51cc; background: #d6b9f3a6; color: #572989; }
.psc-orf-marker {
  position: absolute;
  z-index: 2;
  height: 3px;
  min-width: 3px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: #3e8f5d;
}
.psc-orf-marker.reverse { background: #8b5ab7; }
.psc-methylation-marker {
  position: absolute;
  z-index: 6;
  top: 0;
  padding: 0;
  border: 0;
  color: #8b52b5;
  background: transparent;
  transform: translateX(-50%);
  font-size: 8px;
}
.psc-enzyme-marker {
  position: absolute;
  z-index: 3;
  top: 0;
  height: 100%;
  min-width: 1px;
  padding: 0 2px;
  border: 0;
  border-left: 1px solid #4f6274;
  color: #485a6c;
  background: transparent;
  font-size: 8px;
}
.psc-enzyme-marker.unique { border-left: 2px solid #ed102b; color: #ed102b; font-weight: 750; }
.psc-enzyme-marker.dual { border-left: 1.5px solid #ed102b; color: #ed102b; }
.psc-enzyme-marker.multi { border-left: 1px solid #1d232a; color: #1d232a; }
.psc-enzyme-marker.labeled {
  padding-top: 2px;
  text-align: start;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 7px;
}
.psc-junction-marker,
.psc-comment-marker {
  position: absolute;
  z-index: 5;
  top: 0;
  padding: 0;
  border: 0;
  color: #6952b9;
  background: transparent;
  transform: translateX(-50%);
}
.psc-comment-marker { top: 20px; color: #087f8c; font-size: 9px; }
.psc-warning-region {
  position: absolute;
  z-index: 1;
  bottom: 0;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: repeating-linear-gradient(135deg, #ed9b20, #ed9b20 3px, #ffd987 3px, #ffd987 6px);
}
.psc-warning-region.severity-error { background: repeating-linear-gradient(135deg, #c93340, #c93340 3px, #ff9ba4 3px, #ff9ba4 6px); }
.psc-gc-track {
  display: flex;
  align-items: end;
  height: 32px;
  gap: 1px;
  padding: 2px 0;
  border-bottom: 1px solid #dce5ec;
}
.psc-gc-track span { flex: 1; min-width: 1px; max-height: 28px; background: linear-gradient(#15a37d, #58c7ab); }
.psc-skew-track {
  display: flex;
  align-items: center;
  height: 30px;
  gap: 1px;
  border-bottom: 1px solid #dce5ec;
  background: linear-gradient(transparent 49%, #b9c7d2 49% 52%, transparent 52%);
}
.psc-skew-track span { flex: 1; min-width: 1px; max-height: 14px; align-self: center; }
.psc-skew-track .positive { background: #267ac4; transform: translateY(-50%); }
.psc-skew-track .negative { background: #e38b36; transform: translateY(50%); }
.psc-region-message {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 170px;
  gap: 7px;
  padding: 20px;
  color: var(--ps-muted);
  text-align: center;
}
.psc-region-message strong { color: var(--ps-ink); font-size: 17px; }
.psc-base-grid, .psc-coordinate-grid {
  display: grid;
  grid-template-columns: repeat(var(--base-columns), var(--psc-base-size));
  width: max-content;
  min-width: 100%;
  justify-content: center;
}
.psc-wrapped-detail .psc-line-bases.psc-forward-row,
.psc-wrapped-detail .psc-line-bases.psc-complement-row,
.ps-snapgene-sequence .psc-forward-row.psc-line-bases,
.ps-snapgene-sequence .psc-complement-row.psc-line-bases {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  width: max-content;
  min-width: calc(var(--base-columns, 60) * var(--psc-base-size));
  gap: 0;
}
/* A pending insertion stays inside the line's own width and pushes the bases
   after it onto the next visual row, rather than stretching the line off to
   the right. The complement row carries a mirror chip of the same length, so
   both strands break at exactly the same column. */
.psc-wrapped-detail .psc-line-bases.pending-reflow {
  flex-wrap: wrap;
  width: calc(var(--base-columns, 60) * var(--psc-base-size));
  min-width: calc(var(--base-columns, 60) * var(--psc-base-size));
  max-width: calc(var(--base-columns, 60) * var(--psc-base-size));
}
/* `display: contents` lets the individual pending bases take part in the row's
   wrapping instead of moving as one indivisible block. */
.psc-wrapped-detail .psc-line-bases.pending-reflow .psc-pending-insert,
.psc-wrapped-detail .psc-line-bases.pending-reflow .psc-pending-replace-insert {
  display: contents;
}
.psc-wrapped-detail .psc-pending-base {
  width: var(--psc-base-size);
  min-width: 0;
  padding: 0;
}
.psc-wrapped-detail .psc-pending-complement-base {
  color: #0d3c78;
  background: #cfe1f8;
}
/* The caret sits between two cells without consuming a column of its own. */
.psc-wrapped-detail .psc-line-bases .psc-insertion-caret { margin: 0 -1px; }
.psc-coordinate-grid {
  min-height: 20px;
  padding-top: 6px;
  color: #6c7e90;
  font: 8px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.psc-coordinate-grid span { overflow: visible; text-align: center; }
.psc-base, .psc-comp-base, .psc-translation-row > span {
  display: grid;
  place-items: center;
  width: var(--psc-base-size);
  height: 27px;
  padding: 0;
  border: 0;
  color: #183248;
  background: #f4f8fb;
  font: 650 13px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.psc-base { border-top: 1px solid #d9e3eb; border-bottom: 1px solid #d9e3eb; cursor: text; }
.psc-base:hover { position: relative; z-index: 2; background: #d9efff; box-shadow: inset 0 0 0 1px #1489d1; }
.psc-base.selected {
  color: #173b58;
  background: #dcefff;
  border-top: 2px solid #087fce;
  border-bottom: 2px solid #087fce;
}
.psc-base.selected.selection-start { border-left: 2px solid #087fce; border-radius: 3px 0 0 3px; }
.psc-base.selected.selection-end { border-right: 2px solid #087fce; border-radius: 0 3px 3px 0; }
.psc-comp-base.selected {
  color: #173b58;
  background: #dcefff;
  border-top: 2px solid #087fce;
  border-bottom: 2px solid #087fce;
}
.psc-comp-base.selected.selection-start { border-left: 2px solid #087fce; border-radius: 3px 0 0 3px; }
.psc-comp-base.selected.selection-end { border-right: 2px solid #087fce; border-radius: 0 3px 3px 0; }
.psc-base.history-change { box-shadow: inset 0 -4px #f19a2a; }
.psc-base.verification-change { color: #fff; background: #c1323e; }
.psc-comp-base { height: 22px; color: #52677b; background: #eaf0f4; font-size: 11px; }
.psc-translation-row > span { height: 21px; color: #1e566d; background: #eef8f8; font-size: 10px; }
.psc-translation-row {
  position: relative;
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  width: max-content;
}
.psc-translation-row > .psc-aa {
  display: grid;
  place-items: center;
  overflow: hidden;
}
.psc-translation-row::before {
  content: attr(data-frame);
  position: absolute;
  left: 3px;
  top: 5px;
  z-index: 2;
  color: #587185;
  font: 700 8px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.psc-translation-row.reverse > span { color: #633e83; background: #f5effa; }
.psc-translation-row > .psc-aa { border-left: 1px solid #9fc9ca; font-weight: 750; }
.psc-translation-row > .psc-aa.stop { color: #fff; background: #c83b48; }
.psc-translation-row > .psc-aa.start { color: #fff; background: #218c55; }
.psc-forward-row .base-A, .psc-comp-base.base-A { color: #228448; }
.psc-forward-row .base-C, .psc-comp-base.base-C { color: #176ec1; }
.psc-forward-row .base-G, .psc-comp-base.base-G { color: #aa6200; }
.psc-forward-row .base-T, .psc-comp-base.base-T { color: #bd3341; }
.psc-forward-row .verification-change { color: #fff; }
.psc-base { touch-action: none; user-select: none; -webkit-user-select: none; }
.psc-evidence-track { position: relative; height: 26px; border-top: 1px solid #e2e8ee; }
.psc-variant-marker {
  position: absolute;
  border: 0;
  color: #c12634;
  background: transparent;
  transform: translateX(-50%);
  font-size: 14px;
}
.psc-selection-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-height: 34px;
  gap: 13px;
  padding: 6px 10px;
  border-top: 1px solid var(--ps-line);
  color: #4f6478;
  background: #eff4f8;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.psc-selection-bar strong { color: #174b76; }
.psc-selection-actions { display: flex; flex-wrap: wrap; gap: 3px; margin-left: auto; }
.psc-selection-actions .psc-tool { min-height: 23px; padding: 2px 6px; font-size: 10px; }
.psc-selection-tools {
  position: absolute;
  z-index: 24;
  top: 46px;
  left: 50%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  max-width: calc(100% - 28px);
  gap: 4px;
  padding: 6px;
  border: 1px solid #8eb5d3;
  border-radius: 8px;
  color: var(--ps-ink);
  background: color-mix(in srgb, var(--ps-panel), transparent 5%);
  box-shadow: 0 8px 26px #153c5c38;
  transform: translateX(-50%);
  backdrop-filter: blur(8px);
}
.psc-selection-tools[hidden] { display: none; }
.psc-selection-tools-summary {
  display: grid;
  min-width: 92px;
  padding: 0 7px 0 3px;
  color: #174b76;
  border-right: 1px solid #cbd9e4;
  font-variant-numeric: tabular-nums;
}
.psc-selection-tools-summary small { color: #64778b; font-size: 9px; }
.psc-pending-tools-summary {
  display: grid;
  padding: 0 7px 0 3px;
  border-right: 1px solid #bbdfc5;
  color: #166534;
  white-space: nowrap;
}
.psc-pending-tools-summary small { color: #4d7c5b; font-size: 9px; }
.psc-selection-tools .psc-tool { min-height: 25px; padding: 3px 7px; font-size: 10px; }
.psc-selection-more-hint { padding: 0 3px; color: #72808b; font-size: 9px; white-space: nowrap; }
.psc-selection-tools .psc-selection-close { min-width: 25px; margin-left: 2px; color: #8b2b34; }
.psc-layer-menu {
  position: absolute;
  z-index: 26;
  top: 36px;
  right: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  gap: 6px 12px;
  min-width: 310px;
  padding: 11px;
  border: 1px solid #b9c9d7;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 32px #163d5c32;
}
.psc-layer-menu[hidden] { display: none; }
.psc-layer-menu strong { grid-column: 1 / -1; }
.psc-layer-menu label { display: flex; align-items: center; gap: 6px; color: #43586d; font-size: 11px; }
.psc-verification-ring { fill: none; stroke-width: 5; opacity: .82; pointer-events: none; }
.psc-verification-tick { stroke: #c12d3a; stroke-width: 2.2; pointer-events: none; }
.psc-history-diff-tick { stroke: #8b52b5; stroke-width: 2.2; pointer-events: none; }
.psc-linear-variant { fill: #c12d3a; stroke: #fff; stroke-width: .7; }

@media (max-width: 1180px) {
  .psc-body { grid-template-columns: 260px minmax(0, 1fr); }
  .psc-overview-label { display: none; }
}
@media (max-width: 850px) {
  .psc-body { grid-template-columns: 1fr; grid-template-rows: 235px minmax(0, 1fr); }
  .psc-overview { border-right: 0; border-bottom: 1px solid var(--ps-line); }
}

/* Visualization workspace (Addgene-style analyzer tabs) --------------- */
.ps-app.ps-visualization-mode .ps-center {
  grid-template-rows: auto;
}
.ps-app.ps-visualization-mode .ps-canvas {
  overflow: visible;
}
.ps-app.ps-visualization-mode .ps-work {
  grid-template-columns: 64px minmax(0, 1fr);
}
.ps-app.ps-visualization-mode.ps-context-panel-open .ps-work {
  grid-template-columns: 64px minmax(300px, 350px) minmax(0, 1fr);
}
.ps-app.ps-context-panel-open .ps-center,
.ps-app.ps-context-panel-open .ps-canvas {
  min-height: 0;
  overflow: auto;
}
.ps-app.ps-context-panel-open .ps-center {
  grid-template-rows: minmax(0, 1fr);
}
.ps-visualization {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: calc(100% - 36px);
  margin-bottom: 12px;
  overflow: hidden;
  border: 1px solid var(--ps-line);
  border-radius: 12px;
  background: var(--ps-panel);
  box-shadow: 0 2px 10px #1d38540d;
}
.ps-viz-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid #e5ebf1;
  background: linear-gradient(#fcfeff, #f4f8fb);
}
.ps-viz-header h2 { margin: 0 0 4px; font-size: 18px; }
.ps-viz-header p { margin: 0; color: var(--ps-muted); font-size: 12px; }
.ps-viz-source {
  display: inline-block;
  margin-top: 2px;
  color: #08717b;
  font-size: 10px;
  text-decoration: none;
}
.ps-viz-source:hover { text-decoration: underline; }
.ps-canvas:has(.ps-visualization.sequence-active) { padding-top: 7px; }
.ps-canvas:has(.ps-visualization.sequence-active) .ps-status {
  min-height: 20px;
  margin: -2px 0 4px;
  gap: 6px;
  font-size: 10px;
}
.ps-canvas:has(.ps-visualization.sequence-active) .ps-demo {
  padding: 1px 6px;
  font-size: 8px;
}
.ps-visualization.sequence-active .ps-viz-header {
  align-items: center;
  min-height: 36px;
  padding: 5px 9px;
}
.ps-visualization.sequence-active .ps-viz-header > div:first-child {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}
.ps-visualization.sequence-active .ps-viz-header h2 {
  overflow: hidden;
  margin: 0;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ps-visualization.sequence-active .ps-viz-header p { font-size: 9px; white-space: nowrap; }
.ps-visualization.sequence-active .ps-viz-source { margin: 0; font-size: 8px; white-space: nowrap; }
.ps-visualization.sequence-active .ps-viz-actions { flex-wrap: nowrap; gap: 5px; }
.ps-visualization.sequence-active .ps-viz-download { gap: 4px; font-size: 9px; white-space: nowrap; }
.ps-visualization.sequence-active .ps-viz-actions .ps-btn {
  min-height: 24px;
  padding: 3px 7px;
  font-size: 9px;
}
.ps-viz-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.ps-viz-download {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--ps-muted);
  font-size: 12px;
}
.ps-viz-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 6px 8px 0;
  border-bottom: 1px solid #d7e1ea;
  background: #edf2f6;
}
.ps-viz-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 34px;
  padding: 0;
  border-top: 1px solid #d7e1ea;
  background: #edf2f6;
  position: sticky;
  left: 0;
  bottom: 0;
  inset-block-end: 0;
  z-index: 70;
  width: 100%;
  margin-top: auto;
  box-shadow: 0 -3px 12px rgb(28 48 68 / .12);
}
.ps-viz-tabs-bottom {
  flex: 1 1 auto;
  flex-wrap: nowrap;
  gap: 1px;
  padding: 3px 6px 3px 8px;
  overflow-x: auto;
  border-bottom: 0;
  background: transparent;
  scrollbar-width: thin;
}
.ps-viz-tabs-bottom .ps-viz-tab {
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 5px;
  border: 1px solid transparent;
  color: #1d6fb4;
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.ps-viz-tabs-bottom .ps-viz-tab:hover { background: #ffffffcc; }
.ps-viz-tabs-bottom .ps-viz-tab.active {
  color: #12283f;
  background: #fff;
  border-color: #c9d6e2;
  box-shadow: 0 1px 2px #183b5c14;
}
.ps-viz-tab {
  min-height: 32px;
  padding: 6px 14px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  color: #1d6fb4;
  background: transparent;
  font-size: 13px;
  cursor: pointer;
}
.ps-viz-tab:hover { background: #ffffffaa; }
.ps-viz-tab:focus-visible {
  outline: 3px solid #2698e5;
  outline-offset: 1px;
}
.ps-viz-tab.active {
  color: #12283f;
  background: #fff;
  border-color: #c9d6e2;
  font-weight: 700;
  box-shadow: 0 1px 0 #fff;
}
.ps-viz-panel {
  min-height: 0;
  padding: 12px 14px 16px;
  overflow: auto;
  background: #fff;
}
.ps-viz-panel .ps-card { margin-bottom: 0; }
.ps-viz-panel.ps-viz-panel-map {
  padding: 0;
  overflow: hidden;
}
.ps-map-workspace {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #fff;
}
.ps-map-workspace .ps-semantic-map,
.ps-map-workspace .psc-root {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.ps-map-workspace .psc-root[data-presentation="overview"] {
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.ps-map-workspace .psc-body[data-presentation="overview"] .psc-overview {
  position: relative;
  min-height: 0;
}
.ps-map-workspace .psc-overview-svg {
  position: absolute;
  inset: 2%;
  width: 96%;
  height: 96%;
  max-width: 96%;
  max-height: 96%;
}
.ps-map-legend-float {
  position: absolute;
  z-index: 7;
  left: 12px;
  bottom: 43px;
  max-width: calc(100% - 320px);
}
.ps-map-workspace:has(.psc-map-legend:not([hidden])) > .ps-map-legend-float { display: none; }
.ps-map-cloning-hint {
  position: absolute;
  z-index: 7;
  top: 12px;
  left: 12px;
  right: 12px;
  margin: 0;
  padding: 6px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--ps-blue) 10%, white);
  color: #14395d;
  font-size: 12px;
  box-shadow: 0 2px 8px #163b5514;
}
@media (prefers-color-scheme: dark) {
  .ps-map-cloning-hint { background: color-mix(in srgb, var(--ps-blue) 22%, #101a24); color: #cddae6; }
}
/* Anchored below the canvas toolbar: the map workspace is taller than the
   viewport, so a bottom-anchored control would sit below the fold. */
.ps-map-enzyme-filter {
  position: absolute;
  z-index: 8;
  left: 12px;
  top: 50px;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid #bfcbd5;
  border-radius: 7px;
  background: #fffffff2;
  box-shadow: 0 3px 12px #142d431f;
  backdrop-filter: blur(8px);
}
.ps-map-enzyme-choice {
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #35485a;
  background: transparent;
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.ps-map-enzyme-choice:hover { background: #eef4f9; }
.ps-map-enzyme-choice.active {
  border-color: #c9d6e2;
  color: #12283f;
  background: #fff;
  box-shadow: 0 1px 2px #183b5c14;
}
.ps-map-legend-float .ps-legend {
  padding: 6px 9px;
  border-color: #bfcbd5;
  background: #fffffff2;
  box-shadow: 0 3px 12px #142d431f;
  backdrop-filter: blur(8px);
}
.ps-map-info {
  position: absolute;
  z-index: 8;
  right: 12px;
  bottom: 43px;
  width: min(460px, calc(100% - 24px));
  border: 1px solid #cbd5de;
  border-radius: 6px;
  color: #415365;
  background: #f4f6f8f5;
  box-shadow: 0 4px 18px #142d4324;
  backdrop-filter: blur(10px);
}
.ps-map-info > summary {
  padding: 7px 10px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 650;
}
.ps-map-info-body {
  max-height: min(470px, calc(100vh - 300px));
  padding: 0 8px 8px;
  overflow: auto;
}
.ps-map-info-body .ps-card { box-shadow: none; }
.ps-viz-panel .ps-semantic-map,
.ps-viz-panel .psc-root {
  min-height: 560px;
}
.ps-viz-panel.ps-viz-panel-sequence {
  overflow: hidden;
  background: #fff;
}
.ps-viz-panel-sequence,
.ps-viz-panel-sequence .ps-sequence-stage,
.ps-viz-panel-sequence .ps-sequence-content,
.ps-viz-panel-sequence .ps-snapgene-sequence,
.ps-viz-panel-sequence .ps-snapgene-sequence.psc-root,
.ps-viz-panel-sequence .ps-snapgene-sequence .psc-body,
.ps-viz-panel-sequence .ps-snapgene-sequence .psc-focus-host,
.ps-viz-panel-sequence .ps-snapgene-sequence .psc-wrapped-detail,
.ps-viz-panel-sequence .psc-sequence-line {
  background-color: var(--ps-panel, #fff) !important;
  background-image: none !important;
}
.ps-viz-panel-sequence .ps-snapgene-sequence,
.ps-viz-panel-sequence .ps-snapgene-sequence .psc-root {
  min-height: 0;
}
.ps-document-scroll .ps-app.ps-visualization-mode {
  height: auto;
  min-height: 100%;
  overflow: visible;
  grid-template-rows: 94px 34px auto;
}
.ps-document-scroll .ps-app.ps-visualization-mode .ps-work,
.ps-document-scroll .ps-app.ps-visualization-mode .ps-center,
.ps-document-scroll .ps-app.ps-visualization-mode .ps-canvas {
  min-height: 0;
  overflow: visible;
}
.ps-document-scroll .ps-visualization {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: calc(100vh - 142px);
  min-height: calc(100dvh - 142px);
  margin-bottom: 0;
  overflow: visible;
}
.ps-document-scroll .ps-viz-footer {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  inset-block-end: 0;
  align-self: stretch;
  min-height: 34px;
  height: auto;
  transform: translateZ(0);
}
.ps-document-scroll .ps-viz-panel,
.ps-document-scroll .ps-viz-panel.ps-viz-panel-map,
.ps-document-scroll .ps-viz-panel.ps-viz-panel-sequence {
  flex: 1 1 auto;
  overflow: visible;
}
.ps-document-scroll .ps-viz-panel.ps-viz-panel-sequence {
  display: block;
}
.ps-document-scroll .ps-snapgene-sequence,
.ps-document-scroll .ps-snapgene-sequence .psc-root {
  height: auto;
  min-height: 0;
  overflow: visible;
}
.ps-document-scroll .ps-sequence-stage,
.ps-document-scroll .ps-sequence-content { overflow: visible; }
.ps-document-scroll .ps-snapgene-sequence .psc-root {
  display: block;
}
.ps-document-scroll .ps-snapgene-sequence.psc-root { display: block; }
.ps-document-scroll .ps-snapgene-sequence .psc-body {
  display: flex;
  flex-direction: column;
  height: auto;
  overflow: visible;
}
.ps-document-scroll .ps-snapgene-sequence .psc-focus-host {
  order: 1;
  height: auto;
  overflow: visible;
}
.ps-document-scroll .ps-snapgene-sequence .psc-wrapped-detail {
  height: auto;
  overflow: visible;
  scrollbar-gutter: auto;
}
.ps-document-scroll .ps-snapgene-sequence .psc-overview {
  order: 2;
  flex: 0 0 76px;
}
.ps-document-scroll .ps-map-workspace {
  height: max(760px, calc(100vh - 250px));
  overflow: visible;
}
.ps-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 8px 12px;
  border: 1px solid var(--ps-line);
  border-radius: 8px;
  background: var(--ps-soft, #f7fafc);
  font-size: 11px;
  color: var(--ps-muted);
}
.ps-legend-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ps-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--legend-color, #999);
  flex: 0 0 auto;
}
.ps-legend-dot.dashed {
  border-radius: 2px;
  background: none;
  border: 1.5px dashed var(--legend-color, #999);
  height: 6px;
}
.ps-legend-dot.tick {
  border-radius: 1px;
  width: 2px;
  height: 11px;
  background: var(--legend-color, #999);
}
.ps-viz-data { display: grid; gap: 12px; }
.ps-viz-data-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.ps-viz-data-head h3 { margin: 0 0 4px; font-size: 16px; }
.ps-viz-data-head p { margin: 0; color: var(--ps-muted); font-size: 12px; }
.ps-viz-data-head.features-head {
  padding: 8px 12px;
  background: #eaf6ec;
  border: 1px solid #cfe8d2;
  border-radius: 7px;
}
.ps-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: #eef2ff;
  border: 1px solid #d6dcfb;
  font-size: 12px;
  color: #3a3f75;
  white-space: nowrap;
}
.theme-dark .plasmid-studio-root .ps-pill,
[data-theme="dark"] .plasmid-studio-root .ps-pill {
  background: #23264a;
  border-color: #33366a;
  color: #cfd3ff;
}
.ps-translation-block {
  white-space: pre-wrap;
  word-break: break-all;
  font-family: "SFMono-Regular", Consolas, Menlo, monospace;
  font-size: 13px;
  line-height: 1.6;
  background: var(--ps-surface-2, #f6f7fb);
  border: 1px solid var(--ps-border, #dfe3ee);
  border-radius: 8px;
  padding: 12px;
  margin: 0 0 8px;
  max-height: 420px;
  overflow: auto;
}
.ps-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.ps-summary-stat {
  border: 1px solid var(--ps-border, #dfe3ee);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--ps-surface-2, #f6f7fb);
}
.ps-summary-stat span { display: block; font-size: 11px; color: var(--ps-muted); text-transform: uppercase; letter-spacing: .04em; }
.ps-summary-stat strong { display: block; font-size: 18px; margin-top: 2px; }
.ps-summary-links { display: flex; flex-wrap: wrap; gap: 8px; }
.ps-table-row-interactive { cursor: pointer; }
.ps-table-row-interactive:hover { background: #eef6ff; }
.ps-table-row-interactive:focus-visible {
  outline: 2px solid #2698e5;
  outline-offset: -2px;
}
.ps-empty-cell {
  color: var(--ps-muted);
  text-align: center;
  padding: 18px 10px !important;
}
.ps-blast-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px;
}
.ps-blast-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid #d5e0ea;
  border-radius: 10px;
  background: #f8fbfe;
}
.ps-blast-card h4 { margin: 0; font-size: 14px; }
.ps-blast-card p { margin: 0; color: var(--ps-muted); font-size: 12px; }
.ps-blast-align { grid-column: 1 / -1; }
.ps-blast-align .ps-sequence-input { min-height: 110px; }
.ps-viz-guide {
  display: grid;
  gap: 8px;
  max-width: 820px;
}
.ps-viz-guide h3 { margin: 0 0 6px; }
.ps-viz-guide dl { margin: 0; display: grid; gap: 10px; }
.ps-viz-guide dt { font-weight: 700; color: #145d9d; }
.ps-viz-guide dd { margin: 2px 0 0; color: var(--ps-muted); font-size: 13px; line-height: 1.45; }

.psc-segmented {
  display: inline-flex;
  gap: 0;
  margin-inline: 4px;
  border: 1px solid #c7d4df;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
.psc-segmented .psc-segment {
  min-width: 64px;
  border: 0;
  border-radius: 0;
  border-right: 1px solid #c7d4df;
}
.psc-segmented .psc-segment:last-child { border-right: 0; }
.psc-segmented .psc-segment.active {
  color: #12385f;
  background: #dceeff;
  font-weight: 700;
}
.psc-segmented .psc-segment:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.psc-body[data-presentation="overview"],
.psc-body[data-presentation="focus"] {
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr);
}
.psc-body[data-layout="circular"][data-detail="overview"] {
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr);
}
.psc-body[data-layout="linear"][data-detail="sequence"] {
  grid-template-columns: 1fr;
  grid-template-rows: minmax(140px, 34%) minmax(300px, 1fr);
}
.psc-body[data-layout="linear"][data-detail="sequence"] .psc-focus-host {
  min-height: 300px;
}
.psc-body[data-layout="linear"][data-selection-detail="true"] .psc-overview {
  min-height: 140px;
  background: linear-gradient(180deg, #f8fbfd, #eef4f8);
}
.psc-linear-detail-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #fff;
}
.psc-linear-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 47px;
  padding: 7px 14px;
  border-bottom: 1px solid #d7e1ea;
  background: linear-gradient(180deg, #fff, #f5f8fb);
}
.psc-linear-detail-header > div:first-child {
  display: grid;
  gap: 2px;
}
.psc-linear-detail-header strong {
  color: #173d60;
  font-size: 12px;
}
.psc-linear-detail-header > div:first-child span {
  color: #6a7c8d;
  font-size: 9.5px;
}
.psc-linear-detail-metrics {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
  color: #284a69;
  font-variant-numeric: tabular-nums;
  font-size: 10px;
}
.psc-linear-detail-metrics span {
  padding: 3px 7px;
  border: 1px solid #d4e1ec;
  border-radius: 999px;
  background: #edf5fb;
  white-space: nowrap;
}
.psc-linear-detail-shell > .psc-detail {
  height: auto;
  min-height: 0;
  padding-top: 18px;
  background: #fff;
}
.psc-body[data-presentation="overview"] .psc-overview,
.psc-body[data-layout="circular"][data-detail="overview"] .psc-overview {
  border-right: 0;
  min-height: 520px;
}
.psc-body[data-bases-on-ring="true"] .psc-overview {
  background:
    radial-gradient(circle at center, #ffffff 0 36%, #f4f8fc 72%, #e8f0f6);
}
.ps-map-workspace .psc-toolbar {
  gap: 4px;
  min-height: 40px;
  padding: 5px 8px;
  border-bottom: 1px solid #d5dee7;
  background: linear-gradient(180deg, #ffffff, #f3f7fb);
  box-shadow: 0 1px 0 #ffffffaa inset;
}
.ps-map-workspace .psc-tool {
  min-height: 26px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 600;
}
.ps-map-workspace .psc-segmented {
  border-radius: 7px;
  box-shadow: 0 1px 2px #183b5c12;
}
.ps-map-workspace .psc-zoom-status {
  background: #e8f1f9;
  border: 1px solid #d3e0eb;
  color: #2f4860;
  font-weight: 650;
}
.ps-map-workspace .psc-selection-bar {
  border-top: 1px solid #d7e1ea;
  background: #f7fafc;
}
/* Compact mode — a small, chrome-free preview embedded inside non-Visualization
   tabs (Primers, Digests, CRISPR, …) so users see the effect of their
   selection on a map without leaving the tab. */
.psc-root[data-presentation="compact"] {
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
  border-radius: 8px;
  box-shadow: none;
}
.psc-root[data-presentation="compact"] .psc-toolbar,
.psc-root[data-presentation="compact"] .psc-selection-bar,
.psc-root[data-presentation="compact"] .psc-selection-tools,
.psc-root[data-presentation="compact"] .psc-layer-menu {
  display: none;
}
.psc-root[data-presentation="compact"] .psc-body {
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr);
}
.psc-root[data-presentation="compact"] .psc-overview {
  border-right: 0;
  min-height: 200px;
  max-height: 260px;
}
.psc-root[data-presentation="compact"] .psc-overview-svg { cursor: pointer; }
.psc-body[data-presentation="focus"] .psc-focus-host {
  min-height: 480px;
}
.psc-root[data-presentation="overview"] {
  grid-template-rows: auto minmax(520px, 1fr) auto;
}
.psc-tool.active {
  color: #12385f;
  background: #dceeff;
  border-color: #8eb7d8;
  font-weight: 650;
}

.ps-ai-fab {
  position: absolute;
  z-index: 30;
  right: 24px;
  bottom: 22px;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 2px solid #9af0ed;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #1267d4, #07888d);
  box-shadow: 0 9px 27px #0c447263;
  font-size: 22px;
}
.ps-ai-panel {
  position: absolute;
  z-index: 29;
  right: 22px;
  bottom: 82px;
  display: none;
  width: min(440px, calc(100% - 44px));
  max-height: min(650px, calc(100% - 165px));
  resize: both;
  overflow: auto;
  border: 1px solid #9eb7ca;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 55px #102d4952;
}
.ps-ai-panel.open { display: block; }
.ps-ai-panel > header { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; color: #fff; background: linear-gradient(110deg, #123f77, #087f8c); }
.ps-ai-panel header div { display: grid; }
.ps-ai-panel header small { color: #caedee; }
.ps-ai-panel header button { border: 0; color: #fff; background: transparent; font-size: 20px; }
.ps-ai-disclaimer { padding: 8px 12px; color: #694700; background: #fff3ca; font-size: 11px; }
.ps-ai-body { display: grid; gap: 10px; padding: 12px; }
.ps-ai-body textarea { min-height: 90px; padding: 9px; resize: vertical; }
.ps-ai-suggestions { display: flex; flex-wrap: wrap; gap: 5px; }
.ps-ai-suggestions button { padding: 4px 7px; border: 1px solid #c4d7e6; border-radius: 999px; color: #32607f; background: #f1f8fd; font-size: 11px; }
.ps-ai-plan { display: grid; gap: 8px; }
.ps-ai-plan article { padding: 9px; border: 1px solid #dce5ec; border-radius: 7px; }
.ps-ai-plan article > div { display: flex; justify-content: space-between; gap: 8px; }
.ps-ai-plan p { margin: 5px 0 0; color: var(--ps-muted); font-size: 12px; }
.ps-ai-error { padding: 8px; border-radius: 6px; color: #952832; background: #ffe8ea; }
.ps-explain { display: grid; gap: 8px; margin-top: 10px; }
.ps-explain-text { padding: 10px 12px; border: 1px solid #c4d7e6; border-radius: 7px; background: #f1f8fd; display: grid; gap: 6px; }
.ps-explain-text small { color: #32607f; text-transform: uppercase; letter-spacing: 0.03em; font-size: 10px; }
.ps-explain-text p { margin: 0; font-size: 13px; color: var(--ps-ink); }
.theme-dark .plasmid-studio-root .ps-explain-text,
[data-theme="dark"] .plasmid-studio-root .ps-explain-text { color: var(--ps-ink); background: var(--ps-panel); }

@media (max-width: 1200px) {
  .ps-app.ps-context-panel-open .ps-work,
  .ps-app.ps-visualization-mode.ps-context-panel-open .ps-work {
    grid-template-columns: 62px minmax(285px, 330px) minmax(0, 1fr);
  }
  .ps-work,
  .ps-app.ps-visualization-mode .ps-work { grid-template-columns: 62px minmax(0, 1fr); }
  .ps-tile-grid, .ps-demo-grid { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
  .ps-ribbon-action { min-width: 55px; padding-inline: 5px; }
}
@media (max-width: 900px) {
  .ps-app.ps-context-panel-open .ps-work,
  .ps-app.ps-visualization-mode.ps-context-panel-open .ps-work {
    grid-template-columns: 62px minmax(270px, 42vw) minmax(0, 1fr);
  }
  .ps-work,
  .ps-app.ps-visualization-mode .ps-work { grid-template-columns: 62px minmax(0, 1fr); }
  .ps-vertical-tabs { padding-inline: 4px; }
  .ps-vertical-tab { min-height: 44px; }
  .ps-vertical-tab > small { font-size: 8px; }
  .ps-inspector { display: none; }
  .ps-hero { grid-template-columns: 1fr; }
  .ps-hero-orbit { display: none; }
  .ps-blast-grid { grid-template-columns: 1fr; }
  .ps-viz-header { flex-direction: column; }
  .ps-viz-actions { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .plasmid-studio-root *, .plasmid-studio-root *::before, .plasmid-studio-root *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

.theme-dark .plasmid-studio-root,
[data-theme="dark"] .plasmid-studio-root {
  --ps-ink: #e4edf6;
  --ps-muted: #a6b5c4;
  --ps-line: #34475b;
  --ps-panel: #1d2a38;
  --ps-soft: #14202c;
  background: #14202c;
}
.theme-dark .plasmid-studio-root .ps-menubar,
.theme-dark .plasmid-studio-root .ps-navigator,
.theme-dark .plasmid-studio-root .ps-inspector,
.theme-dark .plasmid-studio-root .ps-ribbon-body,
.theme-dark .plasmid-studio-root .ps-input,
.theme-dark .plasmid-studio-root textarea,
.theme-dark .plasmid-studio-root .ps-table,
.theme-dark .plasmid-studio-root .ps-map-host,
.theme-dark .plasmid-studio-root .ps-linear-panel,
.theme-dark .plasmid-studio-root .ps-visualization,
.theme-dark .plasmid-studio-root .ps-viz-panel,
.theme-dark .plasmid-studio-root .ps-blast-card,
[data-theme="dark"] .plasmid-studio-root .ps-menubar,
[data-theme="dark"] .plasmid-studio-root .ps-navigator,
[data-theme="dark"] .plasmid-studio-root .ps-inspector,
[data-theme="dark"] .plasmid-studio-root .ps-ribbon-body,
[data-theme="dark"] .plasmid-studio-root .ps-input,
[data-theme="dark"] .plasmid-studio-root textarea,
[data-theme="dark"] .plasmid-studio-root .ps-table,
[data-theme="dark"] .plasmid-studio-root .ps-map-host,
[data-theme="dark"] .plasmid-studio-root .ps-linear-panel,
[data-theme="dark"] .plasmid-studio-root .ps-visualization,
[data-theme="dark"] .plasmid-studio-root .ps-viz-panel,
[data-theme="dark"] .plasmid-studio-root .ps-blast-card { color: var(--ps-ink); background: var(--ps-panel); }
.theme-dark .plasmid-studio-root .ps-viz-header,
.theme-dark .plasmid-studio-root .ps-viz-tabs,
.theme-dark .plasmid-studio-root .ps-viz-footer,
[data-theme="dark"] .plasmid-studio-root .ps-viz-header,
[data-theme="dark"] .plasmid-studio-root .ps-viz-tabs,
[data-theme="dark"] .plasmid-studio-root .ps-viz-footer {
  background: #182533;
  border-color: var(--ps-line);
}
.theme-dark .plasmid-studio-root .ps-viz-tab,
[data-theme="dark"] .plasmid-studio-root .ps-viz-tab { color: #7eb7e8; }
.theme-dark .plasmid-studio-root .ps-viz-tab.active,
[data-theme="dark"] .plasmid-studio-root .ps-viz-tab.active {
  color: var(--ps-ink);
  background: var(--ps-panel);
  border-color: var(--ps-line);
}
.theme-dark .psc-ring-base-track { stroke: #1b2836; }
.theme-dark .psc-ring-comp-track { stroke: #152230; }
.theme-dark .psc-ring-base { fill: #d7e4f0; stroke: #0f1a24cc; }
.theme-dark .psc-ring-comp { fill: #8ea3b8; stroke: #0f1a24cc; }
.theme-dark .psc-ring-base.base-A, .theme-dark .psc-ring-comp.base-A { fill: #4ecf84; }
.theme-dark .psc-ring-base.base-C, .theme-dark .psc-ring-comp.base-C { fill: #6db0ff; }
.theme-dark .psc-ring-base.base-G, .theme-dark .psc-ring-comp.base-G { fill: #ffb14a; }
.theme-dark .psc-ring-base.base-T, .theme-dark .psc-ring-comp.base-T { fill: #ff7a86; }
.theme-dark .psc-body[data-bases-on-ring="true"] .psc-overview {
  background: radial-gradient(circle at center, #152230 0 36%, #101a24 75%, #0c141c);
}
.theme-dark .plasmid-studio-root .ps-pending-edits,
[data-theme="dark"] .plasmid-studio-root .ps-pending-edits {
  background: #3a2f16;
  border-color: #8a6a28;
}
.theme-dark .plasmid-studio-root .ps-pending-edits-list li,
[data-theme="dark"] .plasmid-studio-root .ps-pending-edits-list li {
  background: #243140;
}
.theme-dark .plasmid-studio-root .ps-table-row-interactive:hover,
[data-theme="dark"] .plasmid-studio-root .ps-table-row-interactive:hover {
  background: #243547;
}
.theme-dark .plasmid-studio-root .ps-table th.ps-sortable.active,
[data-theme="dark"] .plasmid-studio-root .ps-table th.ps-sortable.active {
  background: #1d3854;
  color: #bfe0fb;
}
.theme-dark .plasmid-studio-root .ps-feature-detail-row td,
[data-theme="dark"] .plasmid-studio-root .ps-feature-detail-row td {
  background: #182533;
  border-color: var(--ps-line);
}
.theme-dark .plasmid-studio-root .ps-feature-detail,
[data-theme="dark"] .plasmid-studio-root .ps-feature-detail { color: #9fb6cc; }
.theme-dark .plasmid-studio-root .ps-feature-detail strong,
[data-theme="dark"] .plasmid-studio-root .ps-feature-detail strong { color: #bfe0fb; }
.theme-dark .plasmid-studio-root .ps-inline-check,
[data-theme="dark"] .plasmid-studio-root .ps-inline-check { color: #9fb6cc; }
.theme-dark .plasmid-studio-root .ps-viz-data-head.features-head,
[data-theme="dark"] .plasmid-studio-root .ps-viz-data-head.features-head {
  background: #17301e;
  border-color: #2b4a34;
}
.theme-dark .plasmid-studio-root .ps-direction-flag.forward,
[data-theme="dark"] .plasmid-studio-root .ps-direction-flag.forward,
.theme-dark .plasmid-studio-root .ps-direction-flag.reverse,
[data-theme="dark"] .plasmid-studio-root .ps-direction-flag.reverse { border-left-color: #9fb6cc; border-right-color: #9fb6cc; }

.ps-msa-scroll { overflow-x: auto; border: 1px solid var(--ps-line); border-radius: 8px; background: var(--ps-soft); }
.ps-msa-track { display: inline-flex; flex-direction: column; min-width: 100%; padding: 6px 0; }
.ps-msa-row { display: flex; align-items: center; }
.ps-msa-name {
  flex: none; position: sticky; left: 0; z-index: 1;
  padding: 1px 10px 1px 8px;
  background: var(--ps-soft);
  font: 700 11px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
  color: var(--ps-muted);
  white-space: pre;
}
.ps-msa-seq { display: flex; }
.ps-msa-base {
  flex: none; width: 12px; text-align: center;
  font: 11px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
  color: var(--ps-ink);
}
.ps-msa-base.ps-msa-match { background: transparent; }
.ps-msa-base.ps-msa-mismatch { background: color-mix(in srgb, var(--ps-warn) 22%, transparent); color: var(--ps-warn); font-weight: 700; }
.ps-msa-base.ps-msa-gap { color: var(--ps-muted); background: color-mix(in srgb, var(--ps-danger) 10%, transparent); }
.theme-dark .plasmid-studio-root .ps-msa-scroll,
[data-theme="dark"] .plasmid-studio-root .ps-msa-scroll { background: #17232f; border-color: #34475b; }
.theme-dark .plasmid-studio-root .ps-msa-name,
[data-theme="dark"] .plasmid-studio-root .ps-msa-name { background: #17232f; }

.ps-annotation-compact-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.ps-annotation-compact-actions .ps-btn { min-width: 0; padding: 6px 8px; font-size: 12px; }
.ps-feature-type-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.ps-feature-type-chips button {
  display: inline-flex; align-items: center; gap: 5px; min-width: 0;
  border: 1px solid #d7e0e8; border-radius: 999px;
  background: #f7f9fb; color: #334155; padding: 3px 7px 3px 5px;
  font: 600 10px/1.2 inherit; cursor: pointer;
}
.ps-feature-type-chips button.hidden { opacity: .5; text-decoration: line-through; }
.ps-feature-type-chips button span { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.ps-codon-strip {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 4px;
  max-height: min(46vh, 360px); overflow-y: auto; padding: 2px;
}
.ps-codon-strip span {
  display: grid; place-items: center; gap: 2px;
  border: 1px solid #dce5ed; border-radius: 6px; background: #f8fafc; padding: 5px 3px;
}
.ps-codon-strip small { color: #286eb4; font-weight: 700; }
.ps-library-list { display: grid; gap: 5px; }
.ps-library-item {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center; gap: 8px; border-bottom: 1px solid #e6ebf0; padding: 6px 0;
}
.ps-library-item div { display: grid; min-width: 0; }
.ps-library-item small { color: #68788a; }
.ps-annotation-item { grid-template-columns: 14px 5px minmax(0, 1fr) auto; }
.ps-annotation-item > input[type="checkbox"] { width: 12px; height: 12px; margin: 0; }
.ps-annotation-item .ps-annotation-swatch { grid-column: 2; }
.ps-annotation-item .ps-annotation-main { grid-column: 3; }
.ps-annotation-item .ps-annotation-meta { grid-column: 4; }
.ps-annotation-item .ps-annotation-actions { grid-column: 3 / -1; }
.ps-annotation-secondary-actions { flex-wrap: wrap; }
.ps-primer-method-summary { display: grid; gap: 6px; }
.ps-primer-method-summary > div {
  display: grid; gap: 1px; border-left: 3px solid #9a46b7;
  border-radius: 0 5px 5px 0; background: #faf6fc; padding: 6px 8px;
}
.ps-primer-method-summary small { color: #657284; font-size: 10px; line-height: 1.35; }
.ps-primer-condition-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 7px 0; }
.ps-primer-condition-chips span {
  border-radius: 999px; background: #f0e6f5; color: #71368a;
  padding: 3px 7px; font-size: 9px; font-weight: 700;
}
.ps-science-guide { margin-top: 7px; border-top: 1px solid #e5e9ee; padding-top: 6px; }
.ps-science-guide summary { color: #425b72; cursor: pointer; font-size: 11px; font-weight: 700; }
.ps-workflow-launchers {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px;
}
.ps-workflow-launchers .ps-btn {
  min-width: 0; max-width: 100%; justify-content: flex-start; overflow-wrap: anywhere;
  padding: 6px 7px; color: #8a4d12; background: #fff9f2;
  border-color: #eadac8; font-size: 10px; line-height: 1.2; white-space: normal;
}
.ps-assembly-enzyme-list { margin-top: 6px; }
.ps-base-composition { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.ps-base-composition > div {
  display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0 4px;
  min-width: 0; border: 1px solid #dae4eb; border-radius: 6px; padding: 5px 6px;
  background: #f8fafc;
}
.ps-base-composition strong { grid-row: 1 / span 2; font-size: 14px; }
.ps-base-composition span { overflow: hidden; font-size: 10px; font-weight: 700; text-overflow: ellipsis; }
.ps-base-composition small { color: #68788a; font-size: 8px; }
.ps-base-composition .base-a strong { color: #2a78c5; }
.ps-base-composition .base-c strong { color: #d64a52; }
.ps-base-composition .base-g strong { color: #d08a13; }
.ps-base-composition .base-t strong { color: #248c62; }
.ps-sequence-metrics { display: flex; gap: 6px; margin: 6px 0; }
.ps-sequence-metrics > span {
  display: flex; flex: 1 1 0; justify-content: space-between; gap: 6px;
  border-radius: 5px; background: #eef4f8; padding: 4px 7px;
}
.ps-sequence-metrics small { color: #6a7886; }
.ps-analysis-launchers {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px;
}
.ps-analysis-launchers .ps-btn {
  min-width: 0; justify-content: flex-start; padding: 6px 8px;
  border-color: #cfe2e5; background: #f2fafb; color: #176c76;
  font-size: 10px; white-space: normal;
}
.ps-genetic-code-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); gap: 6px;
}
.ps-genetic-code-grid article {
  display: grid; grid-template-columns: 24px 32px minmax(0, 1fr); align-items: baseline;
  border: 1px solid #dce5ec; border-radius: 7px; background: #f8fafc; padding: 6px 7px;
}
.ps-genetic-code-grid article.stop { border-color: #efc8ce; background: #fff5f6; }
.ps-genetic-code-grid article > strong { color: #246fac; font-size: 15px; }
.ps-genetic-code-grid article.stop > strong { color: #b4374c; }
.ps-genetic-code-grid article > span { font-size: 10px; font-weight: 700; }
.ps-genetic-code-grid article > small { color: #667789; font-size: 9px; }
.ps-genetic-code-grid code { grid-column: 1 / -1; margin-top: 3px; color: #34495b; font-size: 9px; white-space: normal; }
.ps-contig-status {
  border-left: 3px solid #d58a18; border-radius: 0 5px 5px 0;
  background: #fff8e9; color: #76500f; padding: 6px 8px; font-weight: 700;
}
.ps-contig-status.assembled { border-color: #2c9a64; background: #edf9f2; color: #246e4c; }

/* ============================================================
   Sequence-view rework: primer candidate cards, region tints,
   context-menu swatches, extracted parts, comparison track.
   ============================================================ */

/* --- Primer candidates -------------------------------------------------- */
/* Cards, not an eight-column table: the designer is usually docked in a narrow
   sidebar where a table forced every oligo to wrap one letter per line. */
.ps-primer-candidates { display: grid; gap: 6px; }
.ps-primer-candidate {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid #d8e2ea;
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
}
.ps-primer-candidate:hover { border-color: #a8c6e2; background: #fbfdff; }
.ps-primer-candidate.chosen {
  border-color: #2a7ac0;
  background: #f2f8fe;
  box-shadow: inset 2px 0 #2a7ac0;
}
.ps-primer-candidate-head {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  min-width: 0;
}
.ps-primer-candidate-head input[type="radio"] { margin: 0; flex: none; }
.ps-primer-rank {
  padding: 1px 6px;
  border-radius: 9px;
  background: #eaf1f7;
  color: #3c5670;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.ps-primer-candidate-stats {
  margin-right: auto;
  color: var(--ps-muted, #62748a);
  font-size: 10.5px;
  white-space: nowrap;
}
.ps-primer-candidate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
/* The oligo itself always stays on one line and scrolls if it must. */
.ps-primer-candidate .ps-primer-oligo {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 0 6px;
  align-items: baseline;
  min-width: 0;
}
.ps-primer-oligo-role {
  color: #7d8b9a;
  font-size: 9.5px;
  font-weight: 800;
}
.ps-primer-candidate .ps-primer-oligo code {
  min-width: 0;
  overflow-x: auto;
  overflow-wrap: normal;
  white-space: pre;
  word-break: normal;
  overscroll-behavior-x: contain;
  font-size: 11px;
  letter-spacing: .03em;
}
.ps-primer-candidate .ps-primer-oligo small {
  grid-column: 2;
  color: var(--ps-muted, #62748a);
  font-size: 9.5px;
}

/* --- Queued multiplex regions ------------------------------------------- */
.ps-primer-regions-head { display: grid; gap: 1px; margin: 7px 0 5px; }
.ps-primer-regions-head strong { font-size: 11px; }
.ps-primer-regions-head small { color: var(--ps-muted, #62748a); font-size: 9.5px; }
.ps-primer-regions { display: grid; gap: 4px; }
.ps-primer-region {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 2px 7px;
  align-items: center;
  padding: 5px 6px;
  border: 1px solid #dae3ea;
  border-radius: 6px;
  background: #fff;
}
.ps-primer-region-index {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e8f0f7;
  color: #3c5670;
  font-size: 9.5px;
  font-weight: 800;
}
.ps-primer-region-main { display: grid; gap: 1px; min-width: 0; }
.ps-primer-region-name {
  width: 100%;
  padding: 1px 3px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: 700 10.5px/1.3 inherit;
}
.ps-primer-region-name:hover { border-color: #dbe4ec; }
.ps-primer-region-name:focus { border-color: #2a7ac0; background: #fff; outline: none; }
.ps-primer-region-main small { color: var(--ps-muted, #62748a); font-size: 9px; }
.ps-primer-region-actions {
  display: flex;
  gap: 7px;
  grid-column: 2;
}

/* --- Extracted parts ----------------------------------------------------- */
.ps-part-list { display: grid; gap: 4px; }
.ps-part-item {
  display: grid;
  gap: 3px;
  padding: 6px 7px;
  border: 1px solid #dae3ea;
  border-left: 3px solid #6a8fb5;
  border-radius: 6px;
  background: #fff;
}
.ps-part-main { display: grid; gap: 1px; min-width: 0; }
.ps-part-main strong {
  overflow: hidden;
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ps-part-main small { color: var(--ps-muted, #62748a); font-size: 9px; }
.ps-part-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- Right-click colour swatches ----------------------------------------- */
/* One compact row: caption, then small colour dots. The selectors are scoped to
   .ps-context-menu so they outrank `.ps-context-menu button { width: 100%;
   min-height: 30px }`, which would otherwise stretch each dot into a full-width
   menu row and make the swatches take a whole screen of vertical space. */
.ps-context-menu .ps-context-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  min-height: 30px;
  padding: 2px 10px;
}
.ps-context-menu .ps-context-swatches-label {
  margin-right: auto;
  color: inherit;
  font-size: 12px;
  white-space: nowrap;
}
.ps-context-menu .ps-context-swatches .ps-context-swatch,
.ps-context-menu .ps-context-swatches .ps-context-swatch-custom {
  flex: 0 0 auto;
  width: 13px;
  min-width: 13px;
  height: 13px;
  min-height: 13px;
  padding: 0;
  border: 1px solid #00000030;
  border-radius: 50%;
  background: var(--swatch, #fff);
  cursor: pointer;
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
}
.ps-context-menu .ps-context-swatches .ps-context-swatch:hover,
.ps-context-menu .ps-context-swatches .ps-context-swatch:focus-visible,
.ps-context-menu .ps-context-swatches .ps-context-swatch-custom:hover {
  background: var(--swatch, #fff);
  outline: 2px solid #2a7ac0;
  outline-offset: 1px;
}
.ps-context-menu .ps-context-swatches .ps-context-swatch.selected {
  outline: 2px solid #16324e;
  outline-offset: 1px;
}
/* "No colour" reads as an empty dot with a diagonal strike. */
.ps-context-menu .ps-context-swatches .ps-context-swatch.none {
  background:
    linear-gradient(to top left, transparent calc(50% - 1px), #b0424f calc(50% - 1px), #b0424f calc(50% + 1px), transparent calc(50% + 1px)),
    #fff;
}
/* The native colour input paints its own swatch; strip the chrome so it reads
   as one more dot rather than a bevelled box. */
.ps-context-menu .ps-context-swatches .ps-context-swatch-custom {
  background: conic-gradient(#e2504f, #e5a03a, #d8cf4a, #57b45f, #4aa6d8, #7a5fc4, #e2504f);
}
.ps-context-menu .ps-context-swatches .ps-context-swatch-custom::-webkit-color-swatch-wrapper { padding: 0; }
.ps-context-menu .ps-context-swatches .ps-context-swatch-custom::-webkit-color-swatch { border: 0; border-radius: 50%; opacity: 0; }
.ps-context-menu .ps-context-swatches .ps-context-swatch-custom::-moz-color-swatch { border: 0; border-radius: 50%; opacity: 0; }

/* --- Rail menus ---------------------------------------------------------- */
.ps-sequence-menu-heading {
  padding: 7px 14px 3px;
  color: #6d7f92;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.ps-sequence-menu-item.with-hint { align-items: start; padding-top: 6px; padding-bottom: 6px; }
.ps-sequence-menu-item.with-hint > span:last-child { display: grid; gap: 1px; white-space: normal; }
.ps-sequence-menu-item.with-hint small {
  color: var(--ps-muted, #6d7f92);
  font-size: 9.5px;
  line-height: 1.35;
}
.ps-sequence-menu-item.region-row {
  grid-template-columns: 25px minmax(0, 1fr) 20px;
  align-items: center;
}
.ps-sequence-menu-item.region-row > span:nth-child(2) { display: grid; gap: 1px; }
.ps-sequence-menu-item.region-row small { color: var(--ps-muted, #6d7f92); font-size: 9px; }
.ps-sequence-menu-swatch {
  justify-self: center;
  width: 13px;
  height: 13px;
  border: 1px solid #00000024;
  border-radius: 4px;
}
.ps-sequence-menu-remove {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  color: #7d8b9a;
  font-size: 13px;
}
.ps-sequence-menu-remove:hover { color: #b4243b; background: #fbe3e7; }
.ps-sequence-menu-note {
  margin: 0;
  padding: 2px 14px 8px;
  color: var(--ps-muted, #6d7f92);
  font-size: 10px;
  line-height: 1.45;
}
.ps-sequence-menu-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 14px 7px;
}
.ps-sequence-menu-chips button {
  min-width: 34px;
  padding: 4px 7px;
  border: 1px solid #d3dde6;
  border-radius: 6px;
  background: #fff;
  color: #3c5670;
  cursor: pointer;
  font: 700 10.5px/1 inherit;
  font-variant-numeric: tabular-nums;
}
.ps-sequence-menu-chips button:hover { border-color: #a8c6e2; background: #f2f8fe; }
.ps-sequence-menu-chips button.selected {
  border-color: #2a7ac0;
  background: #2a7ac0;
  color: #fff;
}

/* --- Region tints and the comparison track ------------------------------- */
.psc-base.region-tinted,
.psc-comp-base.region-tinted {
  background: var(--psc-region-tint);
  border-radius: 0;
}
/* A selection must still read as selected on top of a tint. */
.psc-base.region-tinted.selected,
.psc-comp-base.region-tinted.selected {
  background: color-mix(in srgb, var(--psc-region-tint) 45%, #b7d8f7);
}
.psc-aa.selectable { cursor: pointer; }
.psc-aa.selectable:hover { outline: 1px solid #2a7ac0; outline-offset: -1px; }
.psc-snap-comparison { align-items: center; }
.psc-comparison-row {
  color: #7b8794;
  font-variant-numeric: tabular-nums;
}
.psc-comparison-base { text-align: center; }
.psc-comparison-base.same { color: #b3bcc5; }
.psc-comparison-base.different {
  color: #a3232f;
  background: #fde8ea;
  font-weight: 800;
}
.psc-comparison-base.missing { color: #ccd3da; }

@media (prefers-color-scheme: dark) {
  .ps-primer-candidate,
  .ps-primer-region,
  .ps-part-item { border-color: #34475b; background: #17222e; }
  .ps-primer-candidate.chosen { border-color: #4a9fe0; background: #16283a; box-shadow: inset 2px 0 #4a9fe0; }
  .ps-sequence-menu-chips button { border-color: #34475b; background: #17222e; color: #cddae6; }
  .ps-sequence-menu-heading { color: #8fa2b5; }
}

/* --- Cloning designer ----------------------------------------------------- */
/* Goal-first layout: ① parts, ② target, ③ ranked methods, ④ construction. */

.ps-clone-part-list { display: grid; gap: 6px; }
.ps-clone-part {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #cfdce8;
  border-left-width: 0;
  border-radius: 8px;
  background: #f8fbfe;
}
.ps-clone-part-swatch { flex: 0 0 5px; align-self: stretch; min-height: 30px; border-radius: 3px; }
.ps-clone-part-main { display: grid; gap: 1px; min-width: 0; flex: 1 1 auto; }
.ps-clone-part-main strong { font-size: 13px; color: #14395d; }
.ps-clone-part-main small { color: var(--ps-muted); font-size: 10.5px; }
.ps-clone-part[data-orientation="-"] .ps-clone-part-main strong::after {
  content: " ◀";
  color: #b86600;
  font-size: 10px;
}
.ps-clone-part-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.ps-clone-add-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.ps-clone-add-row .ps-input { max-width: 260px; }
.ps-clone-paste-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  margin-top: 8px;
}
.ps-clone-paste {
  width: 100%;
  min-height: 60px;
  padding: 8px;
  border: 1px solid var(--ps-line);
  border-radius: 7px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 1.5;
  resize: vertical;
}
.ps-clone-paste-actions { display: grid; gap: 6px; align-content: start; }

.ps-clone-stepper {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  padding: 4px;
  border-radius: 10px;
  background: var(--ps-soft);
}
.ps-clone-step {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 6px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.ps-clone-step:disabled { cursor: not-allowed; opacity: 0.45; }
.ps-clone-step:not(:disabled):hover { background: #ffffffa0; }
.ps-clone-step.active { background: #fff; box-shadow: 0 1px 3px #163b5522; }
.ps-clone-step-num {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #dbe6f0;
  color: #45607a;
  font-size: 11px;
  font-weight: 800;
}
.ps-clone-step.active .ps-clone-step-num { background: var(--ps-blue); color: #fff; }
.ps-clone-step.done .ps-clone-step-num { background: var(--ps-good); color: #fff; }
.ps-clone-step-text { min-width: 0; display: grid; }
.ps-clone-step-text strong { font-size: 12px; color: #14395d; }
.ps-clone-step-text small { color: var(--ps-muted); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-clone-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.ps-clone-nav .ps-btn.primary:disabled { opacity: 0.4; cursor: not-allowed; }
@media (prefers-color-scheme: dark) {
  .ps-clone-stepper { background: #101a24; }
  .ps-clone-step:not(:disabled):hover { background: #17222e; }
  .ps-clone-step.active { background: #1c2732; }
  .ps-clone-step-num { background: #2b3d4f; color: #9db0c2; }
  .ps-clone-step-text strong { color: #cddae6; }
}

.ps-clone-modes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ps-clone-mode {
  display: grid;
  gap: 2px;
  flex: 1 1 170px;
  padding: 9px 12px;
  border: 1px solid var(--ps-line);
  border-radius: 9px;
  background: var(--ps-panel);
  text-align: left;
  cursor: pointer;
}
.ps-clone-mode strong { font-size: 13px; color: #14395d; }
.ps-clone-mode small { color: var(--ps-muted); font-size: 10.5px; }
.ps-clone-mode:hover { border-color: #9dc3e6; }
.ps-clone-mode[data-active="true"] {
  border-color: var(--ps-blue);
  background: color-mix(in srgb, var(--ps-blue) 8%, white);
  box-shadow: inset 0 0 0 1px var(--ps-blue);
}
.ps-clone-mode[data-active="true"] strong { color: var(--ps-blue); }
.ps-clone-target-row { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.ps-clone-target-row .ps-field { flex: 0 1 200px; }
.ps-clone-constraints { display: grid; gap: 5px; margin: 12px 0 4px; font-size: 12px; color: #3d5570; }
.ps-clone-constraints label { display: flex; align-items: center; gap: 7px; }

.ps-clone-impact {
  display: grid;
  gap: 4px;
  padding: 9px 11px;
  border-radius: 8px;
  background: var(--ps-soft);
  font-size: 12px;
}
.ps-clone-impact p { margin: 0; }
.ps-clone-target-summary strong { color: #14395d; }
.ps-clone-ok { color: var(--ps-good); }
.ps-clone-warn { color: var(--ps-warn); }
.ps-clone-warnings { margin: 8px 0; padding-left: 20px; color: var(--ps-warn); font-size: 12px; }
.ps-clone-warnings li { margin-bottom: 3px; }

.ps-method-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
  margin: 10px 0;
}
.ps-method-card {
  display: grid;
  gap: 5px;
  align-content: start;
  padding: 10px;
  border: 1px solid var(--ps-line);
  border-radius: 9px;
  background: var(--ps-panel);
  text-align: left;
  cursor: pointer;
}
.ps-method-card:hover { border-color: #9dc3e6; box-shadow: 0 2px 8px #163b5514; }
.ps-method-card[data-active="true"] {
  border-color: var(--ps-blue);
  box-shadow: inset 0 0 0 1px var(--ps-blue);
  background: color-mix(in srgb, var(--ps-blue) 6%, white);
}
.ps-method-card-head { display: flex; align-items: baseline; gap: 6px; }
.ps-method-card-head strong { font-size: 13px; color: #14395d; }
.ps-method-rank { flex: none; color: #96a7b8; font-size: 10px; font-weight: 800; }
.ps-method-card[data-rank="1"] .ps-method-rank { color: #d8a11a; font-size: 12px; }
.ps-method-blurb { color: var(--ps-muted); font-size: 10.5px; }
.ps-method-reasons { margin: 0; padding-left: 15px; color: #43596f; font-size: 10.5px; line-height: 1.5; }
.ps-method-meter {
  position: relative;
  height: 5px;
  margin-top: 3px;
  border-radius: 3px;
  background: #e3ebf2;
}
.ps-method-meter span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #4f9ee0, #1266d6);
}
.ps-method-meter em {
  position: absolute;
  top: -14px;
  right: 0;
  color: var(--ps-muted);
  font-size: 9.5px;
  font-style: normal;
  font-weight: 700;
}
.ps-ruled-out { margin-top: 8px; font-size: 12px; }
.ps-ruled-out summary { color: var(--ps-muted); cursor: pointer; }
.ps-ruled-out ul { margin: 8px 0 0; padding-left: 20px; color: #4d6072; }
.ps-ruled-out li { margin-bottom: 4px; color: #4d6072; }
.ps-ruled-out strong { color: #14395d; }
.ps-clone-detail { margin: 10px 0; }
.ps-clone-detail summary { font-size: 12px; font-weight: 700; color: #14395d; cursor: pointer; }

/* --- Construction illustration -------------------------------------------- */
.ps-clone-illustration {
  padding: 4px 0 0;
  overflow-x: auto;
  border-radius: 9px;
  background: var(--ps-panel);
}
.pci-root { display: block; min-width: 470px; color: #43596f; }
/* In the narrow tool sidebar the diagram scrolls inside its own box rather
   than shrinking to unreadable type — the page itself never scrolls sideways. */
.ps-clone-illustration { scrollbar-width: thin; overscroll-behavior-x: contain; }
.pci-row-title { font-size: 11px; font-weight: 800; fill: #6d7f92; letter-spacing: .03em; text-transform: uppercase; }
.pci-seg { stroke-width: 1; }
.pci-seg-backbone { fill: #dbe6f0; stroke: #b3c6d8; }
.pci-seg-removed { fill: #f7d7db; stroke: #d78d97; }
.pci-seg-point,
.pci-seg-seam { fill: #c8d6e3; stroke: #9db3c7; }
.pci-seg-insert { fill: #1266d6; stroke: #1266d6; }
.pci-seg-text { font-size: 11px; font-weight: 600; fill: #3c5570; }
.pci-seg-text-on-color { fill: #fff; }
.pci-label { font-size: 10px; fill: #6d7f92; }
.pci-label-strong { font-size: 10.5px; font-weight: 700; fill: #3c5570; }
.pci-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; fill: #3c5570; }
.pci-muted { fill: #96a7b8; }
.pci-danger { fill: #bd2c3a; }
.pci-method-label { font-size: 12px; font-weight: 700; fill: #1266d6; }
.pci-arrow { stroke: #b3c6d8; stroke-width: 1.5; fill: none; }
.pci-arrow-head { fill: #b3c6d8; }
.pci-bracket { color: #7e93a8; }
.pci-cut-line { stroke: #bd2c3a; stroke-width: 1.4; }
.pci-glyph { font-size: 13px; fill: #bd2c3a; }
.pci-tab { fill: #7655d6; stroke: #7655d6; }
.pci-tab-text { fill: #fff; font-weight: 700; }
.pci-att { fill: #087f8c; }
.pci-callout { font-weight: 600; fill: #3c5570; }
.pci-callout-leader { stroke: #b3c6d8; stroke-width: 1; stroke-dasharray: 2 2; }
.pci-primer-body { fill: #218653; opacity: .85; }
.pci-primer-reverse .pci-primer-body { fill: #c2620f; }

@media (prefers-color-scheme: dark) {
  .ps-clone-part,
  .ps-clone-mode,
  .ps-method-card { border-color: #34475b; background: #17222e; }
  .ps-clone-part-main strong,
  .ps-clone-mode strong,
  .ps-method-card-head strong,
  .ps-ruled-out strong,
  .ps-clone-target-summary strong,
  .ps-clone-detail summary { color: #cddae6; }
  .ps-clone-paste { border-color: #34475b; background: #101a24; color: #cddae6; }
  .ps-clone-impact { background: #101a24; }
  .ps-clone-constraints,
  .ps-method-reasons,
  .ps-ruled-out li { color: #9db0c2; }
  .ps-method-meter { background: #26333f; }
  .ps-clone-illustration { background: #17222e; }
  .pci-root { color: #9db0c2; }
  .pci-row-title { fill: #8fa2b5; }
  .pci-seg-backbone { fill: #2b3d4f; stroke: #3f556b; }
  .pci-seg-removed { fill: #4a2a30; stroke: #8b4b56; }
  .pci-seg-point,
  .pci-seg-seam { fill: #34475b; stroke: #48607a; }
  .pci-seg-text { fill: #cddae6; }
  .pci-label { fill: #8fa2b5; }
  .pci-label-strong,
  .pci-mono { fill: #cddae6; }
  .pci-muted { fill: #6d8296; }
  .pci-danger { fill: #e8737f; }
  .pci-method-label { fill: #6cb0f5; }
  .pci-callout { fill: #cddae6; }
  .pci-callout-leader { stroke: #48607a; }
  .pci-arrow { stroke: #48607a; }
  .pci-arrow-head { fill: #48607a; }
  .pci-cut-line { stroke: #e8737f; }
  .pci-glyph { fill: #e8737f; }
}

/* Integrated primer workflow ------------------------------------------- */
.ps-modal { overflow-x: hidden; }
.ps-modal-head {
  position: sticky;
  z-index: 2;
  top: 0;
  background: inherit;
}
.ps-modal-actions {
  position: sticky;
  z-index: 2;
  bottom: -14px;
  margin: 0 -14px -14px;
  padding: 12px 14px;
  background: inherit;
}
.ps-advanced-options {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--ps-line, #d7e1ea);
  border-radius: 8px;
}
.ps-advanced-options > summary {
  color: var(--ps-ink, #17324d);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.ps-advanced-options[open] > summary { margin-bottom: 10px; }
.ps-advanced-options > .ps-modal-grid,
.ps-advanced-options > .ps-form-grid { min-width: 0; }
.ps-primer-show-toggle { display: flex; align-items: center; gap: 7px; }

.ps-primer-preview-banner,
.ps-pcr-result-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  border-block: 1px solid #a8cde8;
  color: #143b59;
  background: #eaf6ff;
}
.ps-primer-preview-banner > div:first-child,
.ps-pcr-result-banner > div:first-child { display: grid; gap: 2px; }
.ps-primer-preview-banner span,
.ps-pcr-result-banner span { font-size: 11px; }
.ps-pcr-result-banner.valid { border-color: #8dccb6; background: #e7f7f0; }
.ps-pcr-result-banner.invalid { border-color: #e3b6a8; background: #fff0ea; }

.ps-primer-toolbar,
.ps-primer-context-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}
.ps-primer-toolbar { margin-bottom: 9px; }
.ps-primer-search { flex: 1 1 160px; min-width: 120px; }
.ps-primer-context-toolbar {
  margin-bottom: 8px;
  padding: 7px;
  border: 1px solid #b8d5ea;
  border-radius: 7px;
  background: #edf7ff;
}
.ps-primer-context-toolbar strong { margin-right: 3px; font-size: 11px; }
.ps-overflow-menu,
.ps-row-menu { position: relative; }
.ps-overflow-menu > summary,
.ps-row-menu > summary {
  padding: 4px 8px;
  border: 1px solid var(--ps-line, #cad6e0);
  border-radius: 6px;
  list-style: none;
  cursor: pointer;
}
.ps-overflow-menu > summary::-webkit-details-marker,
.ps-row-menu > summary::-webkit-details-marker { display: none; }
.ps-overflow-menu > div,
.ps-row-menu > div {
  position: absolute;
  z-index: 30;
  right: 0;
  display: grid;
  min-width: 170px;
  padding: 5px;
  border: 1px solid var(--ps-line, #cad6e0);
  border-radius: 7px;
  background: var(--ps-panel, #fff);
  box-shadow: 0 8px 24px #16334d2b;
}
.ps-overflow-menu > div .ps-btn,
.ps-row-menu > div .ps-btn { justify-content: flex-start; width: 100%; text-align: left; }
.ps-table tbody tr.selected { outline: 2px solid #2588c7; outline-offset: -2px; background: #e8f5ff; }
.ps-primer-row-hidden { opacity: .48; }
.ps-primer-row-hidden td { text-decoration: none; }
.ps-primer-empty { display: grid; justify-items: center; gap: 10px; }
.ps-inline-progress { display: flex; align-items: center; gap: 7px; margin-top: 8px; color: var(--ps-muted); font-size: 11px; }
.ps-inline-progress > span {
  width: 13px;
  height: 13px;
  border: 2px solid #9fc8df;
  border-top-color: #1677b8;
  border-radius: 50%;
  animation: ps-primer-spin .7s linear infinite;
}
@keyframes ps-primer-spin { to { transform: rotate(360deg); } }
.ps-primer-candidate-actions .ps-btn.primary { padding: 4px 8px; }
.ps-primer-candidate-details { font-size: 10px; color: var(--ps-muted); }
.ps-primer-candidate-details summary { cursor: pointer; }
.ps-primer-candidate-details > div { display: grid; gap: 3px; padding-top: 5px; }
.ps-primer-candidate-details ul { margin: 2px 0 0; padding-left: 16px; }

.ps-primer-focus-card {
  position: sticky;
  z-index: 12;
  top: 0;
  display: grid;
  gap: 7px;
  margin: 0 0 8px;
  padding: 10px;
  border: 1px solid #5fa4d5;
  border-left: 4px solid #1678ba;
  border-radius: 9px;
  background: linear-gradient(145deg, #f7fcff, #e8f5ff);
  box-shadow: 0 5px 18px #143d5d1c;
}
.ps-primer-focus-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ps-primer-focus-head > div { display: grid; gap: 1px; min-width: 0; }
.ps-primer-focus-head strong { color: #153b59; font-size: 12px; }
.ps-primer-focus-kicker { color: #1678ba; font-size: 8px; font-weight: 900; letter-spacing: .09em; }
.ps-primer-product-badge {
  flex: none;
  padding: 3px 7px;
  border-radius: 999px;
  color: #6f4000;
  background: #ffd98b;
  font-size: 9.5px;
  font-weight: 800;
}
/* Still used by the single-primer focus card. */
.ps-primer-arrow-chip { padding: 2px 6px; border-radius: 5px; font-size: 9px; font-weight: 900; white-space: nowrap; }
.ps-primer-arrow-chip.forward { color: #07558d; background: #ccecff; }
.ps-primer-arrow-chip.reverse { color: #8b235f; background: #f8d4e8; }
/* Holds the to-scale SVG pair schematic (pcr-visuals.js). The SVG inside
   switches to light strokes in dark mode, so a hardcoded white ground here
   would put light text on white. */
.ps-primer-product-schematic {
  padding: 2px 4px;
  border-radius: 7px;
  background: var(--ps-panel);
}
@media (prefers-color-scheme: dark) {
  .ps-primer-product-schematic { background: #16202b; }
  .ps-pcr-template-note { background: #b866002e; }
}
:root[data-theme="dark"] .ps-primer-product-schematic { background: #16202b; }
:root[data-theme="dark"] .ps-pcr-template-note { background: #b866002e; }
:root[data-theme="light"] .ps-primer-product-schematic { background: #fff; }
.ps-primer-focus-oligo { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 5px; }
.ps-primer-focus-oligo span, .ps-primer-focus-oligo small { color: var(--ps-muted); font-size: 8.5px; }
.ps-primer-focus-oligo code, .ps-primer-focus-sequence { overflow-x: auto; white-space: nowrap; font-size: 9.5px; }
.ps-primer-focus-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.ps-primer-focus-meta span { padding: 2px 5px; border-radius: 4px; color: #4c6277; background: #fff; font-size: 8.5px; }
.ps-primer-focus-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; align-items: end; }
.ps-primer-focus-settings .ps-field { min-width: 0; }
.ps-primer-visible-control { display: flex; align-items: center; gap: 5px; min-height: 31px; font-size: 9.5px; font-weight: 700; }

/* Automated cloning plan: physical fragments and oligos are molecular
   schematics, deliberately unlike filled feature annotations. */
.ps-clone-backbone-picker {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
  padding: 9px;
  border: 1px solid #9bc4df;
  border-radius: 9px;
  background: linear-gradient(145deg, #f7fcff, #edf7fd);
}
.ps-clone-backbone-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ps-clone-backbone-head > div { display: grid; gap: 2px; }
.ps-clone-backbone-head small { color: var(--ps-muted); font-size: 9px; line-height: 1.35; }
.ps-clone-auto-badge, .ps-clone-auto-kicker {
  color: #0b6f69;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .09em;
}
.ps-clone-auto-badge { flex: none; padding: 3px 6px; border-radius: 999px; background: #d9f4ee; }
.ps-clone-backbone-paste { font-size: 10px; }
.ps-clone-backbone-paste > summary { cursor: pointer; font-weight: 700; }
.ps-clone-backbone-paste[open] { display: grid; gap: 6px; }
.ps-clone-automation {
  display: grid;
  gap: 9px;
  margin: 10px 0;
  padding: 11px;
  border: 1px solid #70b3aa;
  border-left: 4px solid #168b7d;
  border-radius: 10px;
  background: linear-gradient(145deg, #f8fffd, #e9f8f4);
  box-shadow: 0 5px 18px #144a4417;
}
.ps-clone-automation-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ps-clone-automation-head > div { display: grid; gap: 2px; }
.ps-clone-automation-head strong { color: #164e49; font-size: 12px; }
.ps-clone-score { padding: 4px 7px; border-radius: 999px; color: #fff; background: #168b7d; font-size: 9px; font-weight: 900; }
.ps-clone-route-summary { display: flex; flex-wrap: wrap; gap: 4px; }
.ps-clone-route-summary span { padding: 3px 6px; border-radius: 5px; color: #365d59; background: #fff; font-size: 8.5px; }
.ps-clone-fragment-schematic { display: flex; gap: 3px; align-items: stretch; min-height: 42px; padding: 5px; border-radius: 7px; background: #fff; }
.ps-clone-fragment-piece {
  position: relative;
  display: grid;
  place-content: center;
  min-width: 38px;
  padding: 6px 4px;
  border: 1px solid color-mix(in srgb, var(--fragment-color) 70%, #18344b);
  border-radius: 5px;
  color: #17324b;
  background: color-mix(in srgb, var(--fragment-color) 20%, white);
  text-align: center;
}
.ps-clone-fragment-piece:not(:last-child)::after { content: "≋"; position: absolute; z-index: 2; right: -8px; top: 11px; color: #a76409; font-weight: 900; }
.ps-clone-fragment-piece { overflow: hidden; }
.ps-clone-fragment-piece strong,
.ps-clone-fragment-piece small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-clone-fragment-piece strong { font-size: 8.5px; }
.ps-clone-fragment-piece small { font-size: 7.5px; }
.ps-clone-route-reasons { margin: 0; padding-left: 18px; color: #395650; font-size: 9px; line-height: 1.45; }
.ps-clone-primer-plan { display: grid; gap: 8px; padding-top: 7px; }
.ps-clone-primer-geometry {
  display: grid;
  gap: 4px;
  padding: 7px;
  border: 1px solid #c9d7e0;
  border-radius: 7px;
  background: #fff;
}
.ps-clone-primer-name { display: flex; justify-content: space-between; gap: 7px; font-size: 9px; }
.ps-clone-primer-name span { color: var(--ps-muted); }
.ps-clone-primer-molecule { display: flex; align-items: flex-end; min-width: 0; padding-top: 10px; }
.ps-clone-primer-tail {
  position: relative;
  display: grid;
  align-self: flex-start;
  min-width: 34px;
  max-width: 42%;
  margin-top: -9px;
  padding: 3px 5px;
  border: 1px dashed #ce7b13;
  border-radius: 5px 5px 2px 5px;
  color: #7c4703;
  background: #fff3d7;
  transform: rotate(-3deg);
}
.ps-clone-primer-tail em { font-size: 7px; font-style: normal; font-weight: 800; }
.ps-clone-primer-tail code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; }
.ps-clone-primer-hinge { width: 9px; height: 14px; border-bottom: 2px solid #ce7b13; border-left: 2px solid #ce7b13; border-radius: 0 0 0 8px; }
.ps-clone-primer-binding {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 4px 6px;
  border-bottom: 3px solid #087abb;
  color: #075282;
  background: #e4f4fd;
}
.ps-clone-primer-geometry.reverse .ps-clone-primer-molecule { flex-direction: row-reverse; }
.ps-clone-primer-geometry.reverse .ps-clone-primer-tail { transform: rotate(3deg); }
.ps-clone-primer-geometry.reverse .ps-clone-primer-hinge { border-right: 2px solid #bd397e; border-left: 0; border-radius: 0 0 8px; }
.ps-clone-primer-geometry.reverse .ps-clone-primer-binding { flex-direction: row-reverse; border-color: #bd397e; color: #812151; background: #fae8f2; }
.ps-clone-primer-binding code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8.5px; }
.ps-clone-primer-binding b { flex: none; font-size: 8px; }
.ps-clone-primer-no-tail { color: var(--ps-muted); font-size: 8px; }
.ps-clone-primer-readout { display: flex; flex-wrap: wrap; gap: 3px; }
.ps-clone-primer-readout span { padding: 2px 4px; border-radius: 4px; color: #506779; background: #eef3f6; font-size: 7.5px; }
.ps-clone-primer-warnings { margin: 0; padding-left: 16px; color: #8c5210; font-size: 8px; }
.ps-clone-fragment-list { display: grid; gap: 5px; padding-top: 7px; }
/* colour swatch | name+size | per-fragment action. The middle column needs
   min-width: 0 or its long name pushes the whole row out of the ~330px
   sidebar instead of ellipsing. */
.ps-clone-fragment-list article {
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}
.ps-clone-fragment-list article > span { border-radius: 3px; align-self: stretch; }
.ps-clone-fragment-list article > div { display: grid; min-width: 0; }
.ps-clone-fragment-list article > div > strong,
.ps-clone-fragment-list article > div > small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-clone-fragment-list article > .ps-btn { white-space: nowrap; font-size: 9.5px; padding: 2px 4px; }
.ps-clone-fragment-list small { color: var(--ps-muted); font-size: 8px; }

/* Primer overlays are thin directional molecules, never feature-like bands. */
.psc-primer-arc { stroke-linecap: round; stroke-dasharray: none; }
.psc-linear-primer { stroke: #075d84; stroke-width: 1.5; opacity: 1; }
.psc-line-primer, .psc-primer { min-height: 10px; border-width: 0 0 3px; border-radius: 2px; background: #e5f6fc; font-weight: 800; }
.psc-line-primer.reverse, .psc-primer.reverse { background: #fae6f1; }
.psc-primer-overhang-svg, .psc-linear-primer-overhang { fill: none; stroke: #d37a0c; stroke-width: 2.5; stroke-dasharray: 3 2; pointer-events: none; }
.psc-primer-overhang-svg.reverse, .psc-linear-primer-overhang.reverse { stroke: #bd397e; }
.psc-primer-overhang-end { fill: #fff3d7; stroke: #d37a0c; stroke-width: 1.5; }
.psc-primer-overhang-end.reverse { fill: #fae3ef; stroke: #bd397e; }
.psc-line-primer-tail, .psc-primer-tail {
  position: absolute;
  z-index: 9;
  overflow: hidden;
  padding: 1px 3px;
  border: 1px dashed #d37a0c;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  color: #744307;
  background: #fff3d7;
  transform: rotate(-5deg);
  transform-origin: right bottom;
  white-space: nowrap;
  font-size: 7px;
  font-weight: 800;
  pointer-events: none;
}
.psc-line-primer-tail.reverse, .psc-primer-tail.reverse { border-color: #bd397e; color: #79234e; background: #fae3ef; transform: rotate(5deg); transform-origin: left bottom; }

.psc-amplicon-arc {
  fill: none;
  stroke: #e48a16;
  stroke-width: 11;
  stroke-linecap: round;
  opacity: .36;
  pointer-events: none;
}
.psc-amplicon-arc.preview { stroke: #f2a114; stroke-width: 14; stroke-dasharray: 7 3; opacity: .62; filter: drop-shadow(0 0 3px #f2a11480); }
.psc-linear-amplicon {
  fill: #f3a62c;
  stroke: #cf7610;
  stroke-width: 1;
  opacity: .2;
  pointer-events: none;
}
.psc-linear-amplicon.preview { fill: #ffc54c; stroke: #c76c00; stroke-width: 2; stroke-dasharray: 5 2; opacity: .42; filter: drop-shadow(0 0 2px #f0a11e88); }
.psc-primer-arc.selected,
.psc-linear-primer.selected,
.psc-line-primer.selected,
.psc-primer.selected { filter: drop-shadow(0 0 3px #1478c8); stroke-width: 7; outline: 2px solid #1478c8; z-index: 8; }
.psc-primer-arc.preview,
.psc-linear-primer.preview,
.psc-line-primer.preview,
.psc-primer.preview { opacity: 1; stroke-width: 5; stroke-dasharray: none; filter: drop-shadow(0 0 4px #126fa077); }
.psc-primer-arc.preview.forward,
.psc-linear-primer.preview.forward,
.psc-line-primer.preview.forward,
.psc-primer.preview.forward { stroke: #087cc1; fill: #bde7ff; background: #bde7ff; }
.psc-primer-arc.preview.reverse,
.psc-linear-primer.preview.reverse,
.psc-line-primer.preview.reverse,
.psc-primer.preview.reverse { stroke: #bd2f7d; fill: #f5b9da; background: #f5b9da; }
.psc-primer-arc.active-pcr,
.psc-linear-primer.active-pcr,
.psc-line-primer.active-pcr,
.psc-primer.active-pcr { filter: drop-shadow(0 0 4px #ef9a19); }
.psc-line-primer.forward,
.psc-primer.forward {
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 0 100%);
}
.psc-line-primer.reverse,
.psc-primer.reverse {
  clip-path: polygon(7px 0, 100% 0, 100% 100%, 7px 100%, 0 50%);
}
.psc-line-primer[style*="--primer-color"],
.psc-primer[style*="--primer-color"] {
  border-color: var(--primer-color);
  background: color-mix(in srgb, var(--primer-color) 32%, white);
}
.psc-base.pcr-amplicon,
.psc-comp-base.pcr-amplicon { box-shadow: inset 0 -4px #f2a3217a; }
.psc-base.pcr-amplicon.preview,
.psc-comp-base.pcr-amplicon.preview { background: #fff1bd; box-shadow: inset 0 -4px #ed9715; }
.psc-base.amplicon-start,
.psc-comp-base.amplicon-start { border-left: 2px solid #d47a0c; }
.psc-base.amplicon-end,
.psc-comp-base.amplicon-end { border-right: 2px solid #d47a0c; }

@media (max-width: 620px) {
  .ps-modal-overlay { align-items: end; padding: 8px; }
  .ps-modal { width: 100%; max-height: calc(100vh - 16px); }
  .ps-modal-grid { grid-template-columns: minmax(0, 1fr); }
  .ps-modal-grid .ps-field:first-child { grid-column: auto; }
  .ps-modal-actions { flex-wrap: wrap; }
  .ps-primer-preview-banner,
  .ps-pcr-result-banner { align-items: flex-start; flex-direction: column; }
}

/* Guided tutorials — spotlight overlay, animated cursor, step note, playback bar.
   Mounted on document.body (outside .plasmid-studio-root), so tokens are inlined
   rather than read from the app's scoped custom properties. */
.ps-tour-layer {
  position: fixed;
  inset: 0;
  z-index: 970;
  pointer-events: none;
  --ps-tour-speed: .28s;
}
.ps-tour-scrim-part {
  position: fixed;
  background: #0a1626a3;
  pointer-events: none;
  transition: left var(--ps-tour-speed) ease, top var(--ps-tour-speed) ease, width var(--ps-tour-speed) ease, height var(--ps-tour-speed) ease;
}
.ps-tour-layer[data-phase="result"] .ps-tour-scrim-part { background: #0a16262e; }
.ps-tour-layer[data-phase="result"] .ps-tour-spotlight {
  box-shadow: 0 0 0 3px #239266, 0 0 26px 5px #23926655;
}
.ps-tour-layer[data-phase="result"] .ps-tour-spotlight-pulse {
  border-color: #239266;
  animation: none;
}
.ps-tour-spotlight {
  position: fixed;
  border-radius: 10px;
  box-shadow: 0 0 0 3px #1266d6, 0 0 22px 4px #1266d666;
  transition: left var(--ps-tour-speed) ease, top var(--ps-tour-speed) ease, width var(--ps-tour-speed) ease, height var(--ps-tour-speed) ease;
  pointer-events: none;
  z-index: 1;
}
/* A second ring that continuously pulses outward — this is the "circle it"
   affordance telling the viewer where to act, independent of the steady
   highlight ring underneath. */
.ps-tour-spotlight-pulse {
  position: fixed;
  border-radius: 10px;
  border: 2px solid #1266d6;
  pointer-events: none;
  z-index: 1;
  transition: left var(--ps-tour-speed) ease, top var(--ps-tour-speed) ease, width var(--ps-tour-speed) ease, height var(--ps-tour-speed) ease;
  animation: ps-tour-pulse-ring 1.6s ease-out infinite;
}
.ps-tour-cursor {
  position: fixed;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
  filter: drop-shadow(0 3px 5px #08192f66);
  pointer-events: none;
  transform: translate(-5px, -5px);
  transition: left calc(var(--ps-tour-speed) * 2.4) cubic-bezier(.22, .8, .3, 1), top calc(var(--ps-tour-speed) * 2.4) cubic-bezier(.22, .8, .3, 1);
}
.ps-tour-cursor[hidden] { display: none; }
.ps-tour-cursor-pointer {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: #fff;
  font: 900 28px/1 system-ui, sans-serif;
  -webkit-text-stroke: 2px #163c73;
  transform: rotate(-8deg);
}
.ps-tour-cursor-label {
  padding: 4px 7px;
  border: 1px solid #ffffff80;
  border-radius: 999px;
  color: #fff;
  background: #163c73;
  box-shadow: 0 3px 10px #08192f42;
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}
.ps-tour-cursor.clicking .ps-tour-cursor-pointer { animation: ps-tour-human-click .42s ease-out; }
@keyframes ps-tour-human-click {
  0%, 100% { transform: rotate(-8deg) scale(1); }
  45% { transform: rotate(-8deg) scale(.72); }
}
@keyframes ps-tour-pulse-ring {
  0% { box-shadow: 0 0 0 0 #1266d666; }
  70% { box-shadow: 0 0 0 10px #1266d600; }
  100% { box-shadow: 0 0 0 0 #1266d600; }
}
.ps-tour-spotlight.ps-tour-spotlight-done {
  animation: ps-tour-spotlight-done .55s ease-out;
}
@keyframes ps-tour-spotlight-done {
  0% { box-shadow: 0 0 0 3px #18864b, 0 0 26px 6px #18864b99; }
  100% { box-shadow: 0 0 0 3px #1266d6, 0 0 22px 4px #1266d666; }
}
.ps-tour-note {
  position: fixed;
  width: 300px;
  max-width: calc(100vw - 32px);
  background: #fff;
  color: #132238;
  border: 1px solid #d9e2ec;
  border-radius: 10px;
  box-shadow: 0 16px 42px #18344f38;
  padding: 12px 14px;
  pointer-events: auto;
  transition: left var(--ps-tour-speed) ease, top var(--ps-tour-speed) ease;
}
.ps-tour-layer[data-mode="demo"] .ps-tour-note::before,
.ps-tour-layer[data-mode="practice"] .ps-tour-note::before {
  display: inline-block;
  margin-bottom: 7px;
  padding: 3px 7px;
  border-radius: 999px;
  color: #fff;
  background: #6548b7;
  content: "● LIVE DEMO";
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .08em;
}
.ps-tour-layer[data-mode="practice"] .ps-tour-note::before { background: #167b61; content: "HANDS-ON PRACTICE"; }
.ps-tour-note header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.ps-tour-note-title { font-size: 13px; }
.ps-tour-step-counter { font-size: 11px; color: #5d6b7c; white-space: nowrap; }
.ps-tour-note-body { margin: 0; font-size: 12.5px; line-height: 1.5; color: #132238; }
.ps-tour-note-detail,
.ps-tour-note-expected {
  margin: 8px 0 0;
  padding-left: 9px;
  border-left: 2px solid #d8e4ef;
  color: #516274;
  font-size: 11.5px;
  line-height: 1.45;
}
.ps-tour-note-expected.confirmed {
  padding: 7px 8px;
  border: 1px solid #a8dec6;
  border-left: 3px solid #2a9366;
  border-radius: 6px;
  color: #176747;
  background: #e8f7f0;
  font-weight: 650;
}
.ps-tour-note-expected.missing {
  padding: 7px 8px;
  border: 1px solid #e5c37e;
  border-left: 3px solid #c78617;
  border-radius: 6px;
  color: #7b5411;
  background: #fff6df;
  font-weight: 650;
}
.ps-tour-note-expected {
  border-left-color: #45a276;
  color: #226448;
}
.ps-tour-note-cta {
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: #5d6b7c;
}
.ps-tour-note-cta.ps-tour-note-cta-action {
  padding: 6px 8px;
  border-radius: 6px;
  background: #e8f2fc;
  color: #0d55b8;
}
.ps-tour-key {
  display: inline-grid;
  min-width: 48px;
  min-height: 24px;
  place-items: center;
  margin: 0 3px;
  padding: 2px 9px;
  border: 1px solid #8ca0b5;
  border-bottom-width: 3px;
  border-radius: 6px;
  color: #143a66;
  background: #fff;
  box-shadow: 0 1px 2px #13223824;
  font: 750 10px/1 system-ui, sans-serif;
}
.ps-tour-layer[data-phase="result"] .ps-tour-note-cta {
  color: #195c43;
  background: #e8f7f0;
}
.ps-tour-layer[data-phase="result"] .ps-tour-controls {
  border-color: #8fcdb3;
  box-shadow: 0 10px 30px #163d5c2e, 0 0 0 3px #dff3ea;
}
.ps-tour-layer[data-phase="result"] .ps-tour-controls::before {
  margin-left: 6px;
  color: #247252;
  content: "Result ready";
  font-size: 10px;
  font-weight: 750;
}
.ps-tour-progress {
  height: 4px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #dce7f0;
}
.ps-tour-progress-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1266d6, #159b91);
  transition: width var(--ps-tour-speed) ease;
}
.ps-tour-paused-banner {
  margin-top: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  background: #fff3e0;
  color: #b86600;
  font-size: 11.5px;
}
.ps-tour-controls {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #d9e2ec;
  border-radius: 999px;
  box-shadow: 0 10px 28px #18344f38;
  padding: 6px;
  pointer-events: auto;
}
.ps-tour-btn {
  border: none;
  background: transparent;
  color: #132238;
  font: inherit;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.ps-tour-btn:hover,
.ps-tour-btn:focus-visible { background: #e8f2fc; outline: none; }
.ps-tour-btn.primary { background: #1266d6; color: #fff; }
.ps-tour-btn.primary:hover { background: #0d55b8; }
.ps-tour-btn.danger { color: #bd2c3a; }
.ps-tour-btn.danger:hover { background: #fdeceb; }
:root[data-theme="dark"] .ps-tour-note,
:root[data-theme="dark"] .ps-tour-controls { background: #1d2a38; color: #e4edf6; border-color: #34475b; }
:root[data-theme="dark"] .ps-tour-note-body { color: #e4edf6; }
:root[data-theme="dark"] .ps-tour-note-detail { color: #bdcad7; border-color: #52677b; }
:root[data-theme="dark"] .ps-tour-note-expected { color: #8fd6b2; border-color: #45a276; }
:root[data-theme="dark"] .ps-tour-note-cta-action { background: #163050; color: #8ec0f2; }
:root[data-theme="dark"] .ps-tour-step-counter { color: #93a6ba; }
:root[data-theme="dark"] .ps-tour-btn { color: #e4edf6; }
:root[data-theme="dark"] .ps-tour-btn:hover,
:root[data-theme="dark"] .ps-tour-btn:focus-visible { background: #24344470; }
:root[data-theme="light"] .ps-tour-note,
:root[data-theme="light"] .ps-tour-controls { background: #fff; color: #132238; border-color: #cbd7e3; }

/* Tutorials learning center */
.ps-learning-center { display: grid; gap: 8px; }
.ps-learning-hero {
  padding: 15px;
  overflow: hidden;
  border-radius: 10px;
  color: #fff;
  background:
    radial-gradient(circle at 92% 12%, #65d5c05c 0 36px, transparent 37px),
    linear-gradient(135deg, #173868, #6448b8 72%, #168d88);
  box-shadow: 0 8px 20px #233e6824;
}
.ps-learning-eyebrow {
  display: block;
  color: #c9f7ee;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .12em;
}
.ps-learning-hero h2 { margin: 6px 0 5px; font-size: 18px; line-height: 1.12; }
.ps-context-canvas .ps-learning-hero p { margin: 0; color: #e8ecff; font-size: 11px; line-height: 1.45; }
.ps-learning-promise {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-top: 12px;
}
.ps-learning-promise > span {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border: 1px solid #ffffff29;
  border-radius: 6px;
  background: #ffffff12;
  font-size: 10px;
  font-weight: 800;
}
.ps-learning-promise small { color: #eef2ff; font-size: 8px; font-weight: 600; line-height: 1.1; }
.ps-tutorial-filters {
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--ps-line);
  border-radius: 8px;
  background: var(--ps-panel);
}
.ps-tutorial-filters button {
  flex: 1;
  min-height: 25px;
  padding: 3px 5px;
  border: 0;
  border-radius: 5px;
  color: var(--ps-muted);
  background: transparent;
  font-size: 9.5px;
  cursor: pointer;
}
.ps-tutorial-filters button.active { color: #fff; background: #6548b7; font-weight: 700; }
.ps-tutorial-catalog {
  display: grid;
  gap: 4px;
  max-height: 225px;
  overflow: auto;
  padding-right: 2px;
}
.ps-tutorial-course {
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr) 12px;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 7px;
  border: 1px solid var(--ps-line);
  border-radius: 7px;
  color: var(--ps-ink);
  background: var(--ps-panel);
  text-align: left;
  cursor: pointer;
}
.ps-tutorial-course:hover { border-color: #a895dc; background: color-mix(in srgb, #6548b7 5%, var(--ps-panel)); }
.ps-tutorial-course.active { border-color: #8065c9; box-shadow: inset 3px 0 #6548b7; }
.ps-tutorial-course-icon {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 7px;
  color: #5b3eae;
  background: #eee9fb;
  font-size: 9px;
  font-weight: 800;
}
.ps-tutorial-course-copy { display: grid; gap: 2px; }
.ps-tutorial-course-copy strong { font-size: 10.5px; line-height: 1.22; }
.ps-tutorial-course-copy small { color: var(--ps-muted); font-size: 8.5px; }
.ps-tutorial-course-arrow { color: #876fc6; font-size: 18px; }
.ps-tutorial-plan {
  padding: 11px;
  border: 1px solid var(--ps-line);
  border-top: 3px solid #6548b7;
  border-radius: 8px;
  background: var(--ps-panel);
}
.ps-tutorial-plan-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ps-tutorial-kicker { color: #6548b7; font-size: 8.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ps-tutorial-plan h3 { margin: 3px 0 0; font-size: 13px; line-height: 1.25; }
.ps-context-canvas .ps-tutorial-plan > p { margin: 7px 0; color: var(--ps-muted); font-size: 10.5px; line-height: 1.45; }
.ps-tutorial-complete {
  flex: none;
  padding: 2px 6px;
  border-radius: 999px;
  color: #176747;
  background: #d9f3e7;
  font-size: 8px;
  font-weight: 750;
}
.ps-tutorial-facts { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.ps-tutorial-facts span {
  padding: 3px 6px;
  border-radius: 999px;
  color: #53677b;
  background: #edf3f7;
  font-size: 8.5px;
}
.ps-tutorial-outcome {
  margin: 8px 0;
  padding: 8px;
  border-radius: 7px;
  color: #244e43;
  background: #e9f6f1;
}
.ps-tutorial-outcome strong { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; }
.ps-context-canvas .ps-tutorial-outcome p { margin: 3px 0 0; font-size: 9.5px; line-height: 1.35; }
.ps-tutorial-launch-actions { display: grid; grid-template-columns: 1fr auto; gap: 5px; }
.ps-tutorial-launch-actions .ps-btn { min-height: 32px; font-size: 9.5px; }
.ps-tutorial-launch-actions .ps-btn.primary { background: #6548b7; border-color: #6548b7; }
.ps-context-canvas .ps-tutorial-safety { margin: 6px 0 10px; color: var(--ps-muted); font-size: 8.5px; text-align: center; }
.ps-tutorial-steps {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ps-line);
}
.ps-tutorial-steps li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 7px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ps-line);
}
.ps-tutorial-step-number {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid #cfc4ed;
  border-radius: 50%;
  color: #6548b7;
  font-size: 8px;
  font-weight: 800;
}
.ps-tutorial-steps strong { display: block; font-size: 9.5px; line-height: 1.3; }
.ps-tutorial-step-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 5px; }
.ps-tutorial-step-action {
  flex: none;
  padding: 2px 5px;
  border-radius: 999px;
  color: #5b3eae;
  background: #eee9fb;
  font-size: 7.5px;
  font-weight: 750;
  white-space: nowrap;
}
.ps-tutorial-step-action.observe { color: #176747; background: #e3f4eb; }
.ps-context-canvas .ps-tutorial-steps p { margin: 2px 0; color: var(--ps-muted); font-size: 9px; line-height: 1.35; }
.ps-tutorial-steps small { display: block; color: #28715b; font-size: 8.5px; line-height: 1.3; }

/* ---------------------------------------------------------------------------
   Graphical in-silico PCR (pcr-visuals.js + the Simulate PCR card)
   The diagram is the primary output, so it gets the panel background and a
   sideways scroll of its own rather than being squeezed to unreadable type in
   the ~350px tool sidebar.
--------------------------------------------------------------------------- */
.ps-pcr-diagram,
.ps-pcr-cycler {
  overflow-x: auto;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
  background: var(--ps-panel);
  border: 1px solid var(--ps-line);
  border-radius: 9px;
  padding: 6px 4px;
  margin: 8px 0;
}
.ps-pcrviz { display: block; min-width: 470px; width: 100%; }
.ps-pcrviz-cycler { display: block; min-width: 400px; width: 100%; }

.ps-pcrviz-caption { font-size: 10.5px; fill: #6d7f92; }
.ps-pcrviz-context-track { fill: #dbe6f0; }
.ps-pcrviz-context-window { fill: #1266d6; }
.ps-pcrviz-tick { stroke: #b3c6d8; stroke-width: 1; }
.ps-pcrviz-tick-label { font-size: 9.5px; fill: #8ea0b2; }
.ps-pcrviz-strand { stroke: #7c93a9; stroke-width: 2; }
.ps-pcrviz-strand-label { font-size: 9.5px; fill: #96a7b8; }
.ps-pcrviz-amplicon-band { fill: #1266d612; stroke: #1266d640; }
.ps-pcrviz-origin { stroke: #b86600; stroke-width: 1.4; stroke-dasharray: 3 3; }
.ps-pcrviz-origin-label { font-size: 9.5px; fill: #b86600; font-weight: 700; }

.ps-pcrviz-primer-body { stroke: none; }
/* The tail is drawn lifted off the template because it genuinely does not pair
   there in the first cycles — a dashed hinge, not a solid extension of the arrow. */
.ps-pcrviz-tail { stroke-width: 2; fill: none; stroke-dasharray: 4 2.5; }
.ps-pcrviz-tail-label { font-size: 9px; fill: #6d7f92; }
.ps-pcrviz-primer-label { font-size: 10px; font-weight: 600; fill: #3c5570; }
.ps-pcrviz-mismatch { fill: #bd2c3a; stroke: #fff; stroke-width: 1.2; }
.ps-pcrviz-product { fill: #087f8c; }
.ps-pcrviz-product-tail { fill: #087f8c66; }
.ps-pcrviz-product-label { font-size: 10.5px; font-weight: 700; fill: #fff; }
.ps-pcrviz-empty { font-size: 12px; fill: #bd2c3a; font-weight: 600; }

.ps-pcrviz-cycler-grid { stroke: #dbe6f0; stroke-width: 1; }
.ps-pcrviz-cycler-trace { fill: none; stroke: #1266d6; stroke-width: 2.2; stroke-linejoin: round; }
.ps-pcrviz-cycler-temp { font-size: 10px; font-weight: 700; fill: #3c5570; }
.ps-pcrviz-cycler-time { font-size: 9px; fill: #6d7f92; }
.ps-pcrviz-cycler-name { font-size: 9px; fill: #8ea0b2; }
.ps-pcrviz-cycler-bracket { fill: none; stroke: #087f8c; stroke-width: 1.4; }
.ps-pcrviz-cycler-repeat { font-size: 10px; font-weight: 700; fill: #087f8c; }

.ps-pcrviz-pair { display: block; width: 100%; height: auto; }
.ps-pcrviz-pair-bracket { fill: none; stroke: #087f8c; stroke-width: 1.2; }
.ps-pcrviz-pair-target { fill: #1266d61f; stroke: #1266d655; }
.ps-pcrviz-pair-forward { fill: #1266d6; }
.ps-pcrviz-pair-reverse { fill: #c2620f; }
.ps-pcrviz-pair-label { font-size: 9.5px; fill: #6d7f92; }

/* --- the Simulate PCR card ------------------------------------------------ */
.ps-pcr-pickers { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ps-pcr-picker {
  border: 1px solid var(--ps-line);
  border-left: 3px solid #1266d6;
  border-radius: 8px;
  padding: 7px 8px;
  background: var(--ps-panel);
  display: grid;
  gap: 5px;
}
.ps-pcr-picker.reverse { border-left-color: #c2620f; }
.ps-pcr-picker-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ps-pcr-picker-role { font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.ps-pcr-picker-meta { font-size: 10px; color: var(--ps-muted); }
/* Long oligos scroll on one line instead of breaking into a column of letters. */
.ps-pcr-picker-seq {
  display: block;
  font-size: 11px;
  white-space: pre;
  overflow-x: auto;
  padding: 3px 5px;
  border-radius: 5px;
  background: var(--ps-soft);
}

.ps-pcr-readout { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.ps-pcr-chip {
  border: 1px solid var(--ps-line);
  border-radius: 7px;
  padding: 4px 9px;
  background: var(--ps-panel);
  display: grid;
  gap: 1px;
  min-width: 78px;
}
.ps-pcr-chip strong { font-size: 13px; line-height: 1.15; }
.ps-pcr-chip span { font-size: 9.5px; color: var(--ps-muted); text-transform: uppercase; letter-spacing: .04em; }
.ps-pcr-chip.good { border-color: #18864b55; }
.ps-pcr-chip.good strong { color: var(--ps-good); }
.ps-pcr-chip.bad { border-color: #bd2c3a55; }
.ps-pcr-chip.bad strong { color: var(--ps-danger); }
.ps-pcr-chip.note { border-color: #b8660055; }
.ps-pcr-chip.note strong { color: var(--ps-warn); }

.ps-pcr-primer-rows { display: grid; gap: 5px; }
.ps-pcr-primer-row {
  display: grid;
  gap: 2px;
  padding: 5px 8px;
  border-radius: 7px;
  background: var(--ps-soft);
  font-size: 11px;
}
.ps-pcr-primer-role { font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--ps-muted); }
.ps-pcr-primer-mol { display: block; white-space: pre; overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.ps-pcr-primer-tail { font-style: normal; color: var(--ps-warn); background: #b8660018; padding: 1px 2px; border-radius: 3px; }
.ps-pcr-primer-anneal { color: var(--ps-ink); }
.ps-pcr-primer-stats { font-size: 10px; color: var(--ps-muted); }
.ps-pcr-primer-row.unbound { border-left: 3px solid var(--ps-danger); }
.ps-pcr-primer-unbound { color: var(--ps-danger); font-weight: 600; }
.ps-pcr-detail > summary { cursor: pointer; font-size: 11.5px; font-weight: 600; padding: 4px 0; }

@media (prefers-color-scheme: dark) {
  .ps-pcr-diagram,
  .ps-pcr-cycler { background: #17222e; border-color: #34475b; }
  .ps-pcrviz-caption,
  .ps-pcrviz-tail-label,
  .ps-pcrviz-cycler-time { fill: #93a6ba; }
  .ps-pcrviz-context-track { fill: #2b3d4f; }
  .ps-pcrviz-tick { stroke: #3f556b; }
  .ps-pcrviz-tick-label,
  .ps-pcrviz-strand-label,
  .ps-pcrviz-cycler-name { fill: #7c93a9; }
  .ps-pcrviz-strand { stroke: #8fa2b5; }
  .ps-pcrviz-primer-label,
  .ps-pcrviz-cycler-temp { fill: #d3dfea; }
  .ps-pcrviz-cycler-grid { stroke: #2b3d4f; }
  .ps-pcrviz-mismatch { stroke: #17222e; }
  .ps-pcr-picker { background: #1d2a38; border-color: #34475b; }
  .ps-pcr-picker-seq,
  .ps-pcr-primer-row { background: #16202b; }
  .ps-pcr-chip { background: #1d2a38; border-color: #34475b; }
}
:root[data-theme="dark"] .ps-pcr-diagram,
:root[data-theme="dark"] .ps-pcr-cycler { background: #17222e; border-color: #34475b; }
:root[data-theme="dark"] .ps-pcr-picker,
:root[data-theme="dark"] .ps-pcr-chip { background: #1d2a38; border-color: #34475b; }
:root[data-theme="dark"] .ps-pcr-picker-seq,
:root[data-theme="dark"] .ps-pcr-primer-row { background: #16202b; }
:root[data-theme="dark"] .ps-pcrviz-context-track { fill: #2b3d4f; }
:root[data-theme="dark"] .ps-pcrviz-strand { stroke: #8fa2b5; }
:root[data-theme="dark"] .ps-pcrviz-primer-label,
:root[data-theme="dark"] .ps-pcrviz-cycler-temp { fill: #d3dfea; }
:root[data-theme="dark"] .ps-pcrviz-cycler-grid { stroke: #2b3d4f; }
/* The full-width PCR view has room for the diagram at its native size; the
   sidebar copy of the same box still scrolls. */
.ps-pcr-view { display: grid; gap: 10px; }
.ps-pcr-diagram.wide { padding: 10px; }
.ps-pcr-diagram.wide .ps-pcrviz { min-width: 560px; }
.ps-primer-schematic {
  background: var(--ps-soft);
  border-radius: 6px;
  padding: 2px 4px;
  margin: 4px 0;
}
:root[data-theme="dark"] .ps-primer-schematic { background: #16202b; }
@media (prefers-color-scheme: dark) { .ps-primer-schematic { background: #16202b; } }

/* Method-family thumbnails on the cloning method cards. */
.ps-method-glyph { margin: 3px 0 1px; }
.pci-glyph { display: block; width: 100%; max-width: 96px; height: auto; }
.pci-glyph-vector { fill: #b3c6d8; }
.pci-glyph-insert { fill: #1266d6; }
.pci-glyph-overlap { fill: #f4aa2d; }
.pci-glyph-bracket { fill: none; stroke: #b86600; stroke-width: 1.1; }
.pci-glyph-cut { stroke: #bd2c3a; stroke-width: 1.4; }
.pci-glyph-att { fill: #7655d6; }
.pci-glyph-text { font-size: 7px; fill: #6d7f92; }
@media (prefers-color-scheme: dark) {
  .pci-glyph-vector { fill: #3f556b; }
  .pci-glyph-text { fill: #93a6ba; }
}
:root[data-theme="dark"] .pci-glyph-vector { fill: #3f556b; }
:root[data-theme="dark"] .pci-glyph-text { fill: #93a6ba; }
.ps-pcr-gel { overflow-x: auto; scrollbar-width: thin; }
.ps-pcr-gel svg { display: block; max-width: 100%; height: auto; }
.ps-pcr-template-note {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
  font-size: 11px; padding: 5px 8px; border-radius: 6px;
  background: #b8660014; border-left: 3px solid var(--ps-warn);
}

/* The mutagenesis edit, drawn base by base: template above, result below,
   with the changed stretch highlighted in both. */
.ps-mut-diagram { display: grid; gap: 4px; margin-bottom: 8px; }
.ps-mut-row { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 6px; align-items: center; }
.ps-mut-row-label {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ps-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ps-mut-seq {
  display: block; white-space: pre; overflow-x: auto; scrollbar-width: thin;
  padding: 4px 6px; border-radius: 5px; background: var(--ps-soft); font-size: 11px;
}
.ps-mut-flank { color: var(--ps-muted); }
.ps-mut-row.before .ps-mut-change { color: var(--ps-danger); background: #bd2c3a1a; padding: 1px 2px; border-radius: 3px; }
.ps-mut-row.after .ps-mut-change { color: var(--ps-good); background: #18864b1a; padding: 1px 2px; border-radius: 3px; font-weight: 700; }
.ps-mut-gap { color: var(--ps-muted); padding: 0 3px; }
@media (prefers-color-scheme: dark) { .ps-mut-seq { background: #16202b; } }
:root[data-theme="dark"] .ps-mut-seq { background: #16202b; }
/* Facts that separate methods sharing a family thumbnail. */
.ps-method-facts { display: flex; flex-wrap: wrap; gap: 3px; margin: 3px 0; }
.ps-method-facts span {
  padding: 1px 5px; border-radius: 4px; font-size: 8.5px;
  color: var(--ps-muted); background: var(--ps-soft); white-space: nowrap;
}
@media (prefers-color-scheme: dark) { .ps-method-facts span { background: #16202b; } }
:root[data-theme="dark"] .ps-method-facts span { background: #16202b; }