/* =========================================================================
   ZKCAP-X · V2 · system.css
   Layer 5a. Runtime Lab chrome. Development-only surface.
   Deliberately un-styled from the product: monospaced, technical, dark,
   so it can never be mistaken for the ZKCAP interface.
   ========================================================================= */

.lab {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 400;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  line-height: 1.5;
  color: #B8F0D8;
}

.lab__toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  background: #04120C;
  color: #6EE7B7;
  border: 1px solid #10B981;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0 0 0 6px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 9px;
}
.lab__toggle:hover { background: #062018; }
.lab__toggle i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10B981;
  display: block;
  box-shadow: 0 0 6px #10B981;
}
.lab__panel {
  width: 328px;
  background: #04120C;
  border: 1px solid #10B981;
  border-right: 0;
  display: none;
  flex-direction: column;
  max-height: calc(100dvh - 30px);
}
.lab[data-open="true"] .lab__panel { display: flex; }
.lab__head {
  padding: 9px 12px;
  border-bottom: 1px solid #0E3A2A;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 9px;
  color: #10B981;
  font-weight: 600;
}
.lab__body { overflow-y: auto; padding: 10px 12px 14px; display: grid; gap: 12px; }
.lab__group { display: grid; gap: 6px; }
.lab__gt {
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #34D399;
  opacity: 0.75;
  display: flex;
  align-items: center;
  gap: 7px;
}
.lab__gt::after { content: ""; flex: 1; height: 1px; background: #0E3A2A; }
.lab__row { display: grid; gap: 3px; }
.lab__rk { font-size: 8.5px; color: #6EE7B7; opacity: 0.72; letter-spacing: 0.08em; text-transform: uppercase; }
.lab__opts { display: flex; flex-wrap: wrap; gap: 3px; }
.lab__opt {
  padding: 3px 7px;
  border: 1px solid #0E3A2A;
  background: transparent;
  color: #7FD8B4;
  border-radius: 2px;
  font-size: 9px;
  letter-spacing: 0.05em;
  font-family: inherit;
  cursor: pointer;
  transition: all 90ms linear;
}
.lab__opt:hover { border-color: #34D399; color: #A7F3D0; }
.lab__opt[aria-pressed="true"] { background: #10B981; border-color: #10B981; color: #04120C; font-weight: 700; }
.lab__list { display: grid; gap: 2px; max-height: 232px; overflow-y: auto; }
.lab__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px;
  align-items: center;
  padding: 4px 7px;
  border: 1px solid transparent;
  border-radius: 2px;
  color: #7FD8B4;
  font-size: 9.5px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.lab__item:hover { background: #062018; border-color: #0E3A2A; }
.lab__item[aria-current="true"] { background: #10B981; color: #04120C; font-weight: 700; }
.lab__id { opacity: 0.6; }
.lab__meta {
  padding: 8px 10px;
  border: 1px solid #0E3A2A;
  background: #04150E;
  border-radius: 2px;
  color: #8FE8C4;
  word-break: break-all;
  display: grid;
  gap: 3px;
  max-height: 168px;
  overflow-y: auto;
}
.lab__kv { display: flex; gap: 7px; }
.lab__kv b { color: #34D399; font-weight: 600; min-width: 54px; }
.lab__acts { display: flex; flex-wrap: wrap; gap: 3px; }
.lab__act {
  padding: 3px 8px;
  border: 1px solid #0E3A2A;
  background: #062018;
  color: #A7F3D0;
  border-radius: 2px;
  font-size: 9px;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: 0.05em;
}
.lab__act:hover { border-color: #34D399; }
.lab__act--danger { color: #FDA4AF; border-color: #4C1D24; background: #1A0A0E; }
.lab__act--danger:hover { border-color: #FB7185; }
.lab__note { font-size: 8.5px; color: #4ADE80; opacity: 0.6; line-height: 1.45; }
.lab__foot {
  border-top: 1px solid #0E3A2A;
  padding: 8px 12px;
  font-size: 8.5px;
  color: #34D399;
  opacity: 0.7;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

/* Viewport frame: the app is the simulator target.
   The width badge is development chrome and only appears while the Lab is
   open, so it can never appear in product evidence or overlap the masthead. */
.vpframe {
  width: 100%;
  margin-inline: auto;
  background: var(--paper-100);
  box-shadow: 0 0 0 1px rgba(8, 20, 38, 0.12);
  position: relative;
  overflow: hidden;
  min-height: 100dvh;
}
.vpframe::after {
  content: "";
  display: none;
}
.lab[data-open="true"] + .vpframe[data-vp]::after {
  content: attr(data-vp);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 350;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #6EE7B7;
  background: #04120C;
  border: 1px solid #10B981;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  padding: 2px 9px;
  pointer-events: none;
}

/* Runtime error banner (developer) */
.rtbanner {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 500;
  background: #1A0A0E;
  border-top: 2px solid #FB7185;
  color: #FECDD3;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  padding: 12px 16px;
  display: none;
  gap: var(--s-4);
  align-items: flex-start;
  max-height: 40dvh;
  overflow: auto;
}
.rtbanner[data-open="true"] { display: flex; }
.rtbanner b { color: #FB7185; display: block; margin-bottom: 4px; letter-spacing: 0.1em; text-transform: uppercase; font-size: 9px; }