.frame-primary-section {
  margin-top: 24px;
  padding: 28px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 24px;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.055), transparent 38%),
    rgba(7,9,12,.78);
  background-size: 28px 28px, 28px 28px, auto, auto;
  overflow: hidden;
  position: relative;
}

.frame-primary-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 15%, rgba(255,255,255,.025) 50%, transparent 85%);
  opacity: .55;
}

.frame-primary-heading {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: flex-end;
  margin-bottom: 18px;
}

.frame-primary-heading h2 { margin: 3px 0 0; }
.frame-primary-heading-copy {
  max-width: 520px;
  margin: 0;
  color: rgba(255,255,255,.52);
  font-size: 13px;
  line-height: 1.55;
}

.frame-gate-stage {
  height: 540px;
  position: relative;
  z-index: 1;
}

.frame-gate-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.frame-gate-lines line {
  stroke: rgba(255,151,61,.42);
  stroke-width: .16;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 3 5;
  filter: drop-shadow(0 0 5px rgba(255,151,61,.26));
  animation: frameGatePulse 5.2s ease-in-out infinite;
}

@keyframes frameGatePulse {
  0%, 100% { opacity: .5; }
  50% { opacity: .95; }
}

.frame-gate-hub {
  position: absolute;
  left: 50%;
  top: 49%;
  transform: translate(-50%, -50%);
  width: 112px;
  height: 112px;
  border-radius: 999px;
  display: grid;
  place-content: center;
  text-align: center;
  border: 1px solid rgba(255,166,77,.78);
  background: radial-gradient(circle, rgba(255,145,54,.18), rgba(10,12,16,.96) 66%);
  box-shadow: 0 0 0 9px rgba(255,147,57,.035), 0 0 42px rgba(255,142,43,.2);
  z-index: 3;
}
.frame-gate-hub span { font-size: 10px; letter-spacing: .18em; color: rgba(255,255,255,.68); }
.frame-gate-hub strong { font-size: 30px; font-weight: 500; line-height: 1.1; margin-top: 5px; }

.frame-gate-nodes { position: absolute; inset: 0; }
.frame-gate-node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  width: min(230px, 24vw);
  min-width: 174px;
  max-height: 145px;
  overflow: auto;
  padding: 14px 15px 13px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 14px;
  background: rgba(11,14,18,.94);
  box-shadow: 0 14px 34px rgba(0,0,0,.2);
  z-index: 2;
}
.frame-gate-node.is-critical,
.frame-gate-node.is-decision { border-color: rgba(255,143,51,.55); box-shadow: 0 0 28px rgba(255,132,38,.08); }
.frame-gate-node h3,
.frame-finish-node h3,
.frame-gate-empty h3 { margin: 3px 0 6px; font-size: 14px; line-height: 1.3; }
.frame-gate-node p,
.frame-finish-node p,
.frame-gate-empty p { margin: 0; color: rgba(255,255,255,.55); font-size: 11px; line-height: 1.45; }
.frame-node-kicker { color: rgba(255,176,96,.82) !important; font-size: 9px !important; text-transform: uppercase; letter-spacing: .15em; }
.frame-node-source { margin-top: 7px !important; color: rgba(255,255,255,.36) !important; font-size: 9px !important; }
.frame-gate-action {
  margin-top: 9px;
  border: 1px solid rgba(255,163,76,.45);
  border-radius: 999px;
  background: rgba(255,146,49,.08);
  color: rgba(255,225,199,.92);
  padding: 6px 10px;
  font: inherit;
  font-size: 9px;
  letter-spacing: .12em;
  cursor: pointer;
}
.frame-gate-action:hover { background: rgba(255,146,49,.15); }
.frame-gate-action:disabled { opacity: .5; cursor: wait; }

.frame-gate-empty {
  min-height: 250px;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  max-width: 680px;
  margin: 0 auto;
}
.frame-gate-empty .frame-gate-hub { position: relative; left: auto; top: auto; transform: none; }

.frame-finish-stage { position: relative; z-index: 2; }
.frame-finish-meta {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 2px 20px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.frame-finish-meta strong { display: block; margin-top: 3px; font-size: 17px; font-weight: 500; }
.frame-finish-meta-right { display: flex; align-items: flex-end; flex-direction: column; gap: 4px; color: rgba(255,255,255,.55); font-size: 11px; }
.frame-finish-path {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  padding: 42px 0 24px;
}
.frame-finish-line {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 77px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,164,78,.58), rgba(255,255,255,.12));
  box-shadow: 0 0 10px rgba(255,144,45,.15);
}
.frame-finish-node {
  min-height: 188px;
  position: relative;
  padding: 52px 18px 18px;
  border: 1px solid rgba(255,255,255,.105);
  border-radius: 16px;
  background: rgba(11,14,18,.92);
  z-index: 2;
}
.frame-finish-node::before {
  content: '';
  position: absolute;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
  background: #131820;
  border: 1px solid rgba(255,255,255,.32);
  box-shadow: 0 0 0 7px rgba(255,255,255,.025);
}
.frame-finish-node.is-progress { border-color: rgba(255,159,69,.42); }
.frame-finish-node.is-progress::before { background: rgba(255,149,53,.82); border-color: rgba(255,190,127,.9); box-shadow: 0 0 18px rgba(255,145,49,.42); }
.frame-finish-node.is-blocked { border-color: rgba(255,94,82,.42); }
.frame-finish-node.is-blocked::before { background: rgba(255,89,74,.75); border-color: rgba(255,147,137,.8); }
.frame-finish-node.is-done { opacity: .56; }
.frame-finish-node.is-done::before { background: rgba(132,224,176,.72); border-color: rgba(177,239,206,.84); }
.frame-finish-node-index {
  position: absolute;
  top: 14px;
  left: 16px;
  font-size: 9px;
  letter-spacing: .14em;
  color: rgba(255,255,255,.31);
}
.frame-finish-guidance {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding-top: 8px;
}
.frame-finish-guidance article {
  padding: 14px 15px;
  border-radius: 13px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.07);
}
.frame-finish-guidance p { margin: 0; color: rgba(255,255,255,.57); font-size: 11px; line-height: 1.5; }

.frame-change-chip { position: relative; margin-left: auto; }
.frame-change-chip summary {
  cursor: pointer;
  list-style: none;
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  color: rgba(255,255,255,.62);
  font-size: 9px;
  letter-spacing: .09em;
  text-transform: uppercase;
  background: rgba(255,255,255,.025);
}
.frame-change-chip summary::-webkit-details-marker { display: none; }
.frame-change-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(420px, 80vw);
  max-height: 390px;
  overflow: auto;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(10,12,16,.98);
  box-shadow: 0 18px 45px rgba(0,0,0,.38);
  z-index: 20;
}
.frame-change-panel article { padding: 10px; border-bottom: 1px solid rgba(255,255,255,.06); }
.frame-change-panel article:last-child { border-bottom: 0; }
.frame-change-panel h4 { margin: 3px 0 4px; font-size: 12px; }
.frame-change-panel p { margin: 0; color: rgba(255,255,255,.5); font-size: 10px; line-height: 1.45; }

.frame-system-details {
  margin-top: 24px;
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 20px;
  background: rgba(255,255,255,.015);
  overflow: hidden;
}
.frame-system-details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 20px 24px;
}
.frame-system-details > summary::-webkit-details-marker { display: none; }
.frame-system-details > summary::after { content: '+'; color: rgba(255,255,255,.4); font-size: 18px; margin-left: auto; }
.frame-system-details[open] > summary::after { content: '−'; }
.frame-system-details > summary h2 { margin: 2px 0 0; font-size: 18px; }
.frame-system-details > summary > span { color: rgba(255,255,255,.38); font-size: 11px; }
.frame-system-details-body { padding: 0 18px 18px; }
.frame-secondary-block { border-top: 1px solid rgba(255,255,255,.065); }
.frame-secondary-block > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 6px;
  color: rgba(255,255,255,.75);
  font-size: 12px;
}
.frame-secondary-block > summary::-webkit-details-marker { display: none; }
.frame-secondary-block > summary::after { content: '+'; color: rgba(255,255,255,.35); }
.frame-secondary-block[open] > summary::after { content: '−'; }
.frame-secondary-block > section { margin-top: 0; padding-top: 8px; }
.frame-legacy-support { display: none !important; }
.frame-manual-actions-duplicate { display: none !important; }

body.frame-preview-mode #realitySurface > .frame-primary-section { display: block !important; }
body.frame-preview-mode #realitySurface > .frame-system-details { display: none !important; }
body.frame-preview-mode .frame-change-chip { display: none !important; }
body.frame-preview-mode #frameNeedsSection .frame-primary-heading-copy,
body.frame-preview-mode #frameFinishSection .frame-primary-heading-copy { display: none; }

@media (max-width: 900px) {
  .frame-primary-section { padding: 22px 18px; border-radius: 18px; }
  .frame-primary-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .frame-gate-stage { height: auto; min-height: 0; padding: 18px 0 0; }
  .frame-gate-lines { display: none; }
  .frame-gate-hub { position: relative; left: auto; top: auto; transform: none; width: 92px; height: 92px; margin: 0 auto 20px; }
  .frame-gate-nodes { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .frame-gate-node { position: relative; left: auto; top: auto; transform: none; width: auto; min-width: 0; max-height: none; }
  .frame-finish-path { grid-template-columns: 1fr; gap: 10px; padding-top: 22px; }
  .frame-finish-line { left: 28px; right: auto; top: 22px; bottom: 22px; width: 1px; height: auto; background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,164,78,.58), rgba(255,255,255,.12)); }
  .frame-finish-node { min-height: 0; padding: 16px 16px 16px 52px; }
  .frame-finish-node::before { left: 21px; top: 21px; transform: none; }
  .frame-finish-node-index { display: none; }
  .frame-finish-guidance { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .frame-gate-nodes { grid-template-columns: 1fr; }
  .frame-finish-meta { flex-direction: column; gap: 10px; }
  .frame-finish-meta-right { align-items: flex-start; }
  .frame-gate-empty { grid-template-columns: 1fr; text-align: center; }
  .frame-gate-empty .frame-gate-hub { margin: 0 auto; }
  .frame-system-details > summary { padding: 17px 18px; }
  .frame-system-details > summary > span { display: none; }
}

/* Loop continuity belongs to ZIELLINIE as evidence, never as a second task board. */
.frame-loop-continuity {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 15px;
  background: rgba(255,255,255,.018);
}
.frame-loop-continuity-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.frame-loop-continuity-head strong { font-size: 13px; font-weight: 500; }
.frame-loop-continuity-head > span { font-size: 10px; color: rgba(255,255,255,.42); }
.frame-loop-continuity-list { display: grid; gap: 0; }
.frame-loop-continuity-item { display: grid; grid-template-columns: minmax(180px,.8fr) minmax(0,1.2fr); gap: 20px; padding: 13px 2px; border-bottom: 1px solid rgba(255,255,255,.055); }
.frame-loop-continuity-item:last-child { border-bottom: 0; }
.frame-loop-continuity-item.is-reentry { border-left: 2px solid rgba(255,155,62,.66); padding-left: 12px; }
.frame-loop-continuity-item h4 { margin: 3px 0 0; font-size: 12px; line-height: 1.4; font-weight: 500; }
.frame-loop-continuity-fields { display: grid; gap: 5px; }
.frame-loop-continuity-fields p { margin: 0; font-size: 10px; line-height: 1.45; color: rgba(255,255,255,.58); }
.frame-loop-continuity-fields p span { display: inline-block; min-width: 92px; margin-right: 8px; color: rgba(255,255,255,.32); letter-spacing: .09em; font-size: 8px; }
.frame-loop-continuity-fields .is-unclarified { color: rgba(255,255,255,.36); }
.frame-loop-continuity-more { margin: 10px 0 0; font-size: 9px; color: rgba(255,255,255,.34); letter-spacing: .04em; }
.frame-loop-continuity.is-unknown strong, .frame-loop-continuity.is-preview strong { font-size: 12px; font-weight: 500; }
.frame-loop-continuity.is-unknown p { margin: 5px 0 0; color: rgba(255,255,255,.42); font-size: 10px; }

@media (max-width: 700px) {
  .frame-loop-continuity-head, .frame-loop-continuity-item { grid-template-columns: 1fr; display: grid; }
  .frame-loop-continuity-head { align-items: start; }
  .frame-loop-continuity-item { gap: 9px; }
}