@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
:root { --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; }
:root { --rail: 48px; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; font-family: var(--mono); }
/* plain black page with a very faint green glow around the edge */
.stage {
  position: fixed; inset: 0 0 0 var(--rail); box-sizing: border-box;
  box-shadow: inset 0 0 26px rgba(0, 255, 65, .075), inset 0 0 60px rgba(0, 255, 65, .03);
  pointer-events: none;
}

#app { position: fixed; inset: 0; }

/* left rail: slim black strip with a white menu button at the top */
.rail {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--rail);
  background: #000; z-index: 20;
  display: flex; flex-direction: column; align-items: center; padding-top: 14px;
}
.rail-btn {
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 3px;
  background: #fff; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
}
.rail-btn span { display: block; width: 14px; height: 2px; background: #000; }
.rail-btn:hover { background: #d8ffe0; }
.rail-btn:focus-visible { outline: 2px solid #00ff41; outline-offset: 2px; }

/* nav that opens out from the rail */
.nav-panel {
  position: fixed; top: 0; bottom: 0; left: var(--rail); width: 200px;
  background: #000; border-right: 1px solid #0a5c1e; z-index: 10;
  padding: 18px 20px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 14px;
  transform: translateX(-100%); visibility: hidden;
  transition: transform .25s ease, visibility 0s linear .25s;
}
.nav-panel.open { transform: none; visibility: visible; transition: transform .25s ease; }
.nav-panel a, .nav-item {
  color: #00ff41; font: 15px/1.2 var(--mono); text-decoration: none;
  background: none; border: 0; padding: 0; text-align: left; cursor: pointer;
}
.nav-version { margin-top: auto; color: #3fae5a; font: 11px/1.3 var(--mono); opacity: .8; }
.nav-panel a:hover, .nav-panel a.active, .nav-item:hover { color: #d8ffe0; }
.nav-item:focus-visible, .modal-close:focus-visible { outline: 1px solid #00ff41; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .nav-panel { transition: none; } }
/* near-full-screen modal, terminal style */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .7);
  display: flex; align-items: center; justify-content: center;
}
.modal {
  width: calc(100vw - 64px); height: calc(100vh - 64px); box-sizing: border-box;
  background: #000; border: 1px solid #00ff41; box-shadow: 0 0 24px rgba(0, 255, 65, .25);
  color: #00ff41; font: 16px/1.5 var(--mono);
  display: flex; flex-direction: column; outline: none;
}
.modal-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-bottom: 1px solid #0a5c1e;
}
.modal-bar h2 { margin: 0; font: inherit; font-size: 18px; }
.modal .cursor { animation: blink 1s steps(1) infinite; }
.modal-close { background: none; border: 0; padding: 0; color: #00ff41; font: inherit; cursor: pointer; }
.modal-close:hover { color: #d8ffe0; }
.modal-body { flex: 1; min-height: 0; display: flex; }
.modal .dim { margin: 0; color: #3fae5a; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .modal .cursor { animation: none; } }
@media (max-width: 600px) { .modal { width: calc(100vw - 16px); height: calc(100vh - 16px); } }
/* tools */
[hidden] { display: none !important; }
.tools { flex: 1; min-width: 0; display: flex; }
.tools-tabs { flex: 0 1 170px; min-width: 0; overflow-x: hidden; overflow-y: auto; display: flex; flex-direction: column; padding: 8px 0; }
.tools-tab {
  white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
  background: none; border: 0; border-left: 3px solid transparent; color: #3fae5a;
  font: inherit; text-align: left; padding: 8px 14px; cursor: pointer; display: block; text-decoration: none;
}
.tools-tab:hover { color: #d8ffe0; }
.tools-tab.active { color: #00ff41; border-left-color: #00ff41; background: rgba(0, 255, 65, .08); }
.tools-tab:focus-visible, .btn:focus-visible, .tool-input:focus-visible, .tool-text:focus-visible { outline: 1px solid #00ff41; outline-offset: 2px; }
.tools-pane { flex: 1; min-width: 0; padding: 16px; overflow: auto; display: flex; flex-direction: column; font: 14px/1.5 var(--mono); }

.splitter {
  flex: none; position: relative; box-sizing: border-box; width: 12px; cursor: col-resize; touch-action: none;
  background: linear-gradient(#0a5c1e, #0a5c1e) center / 1px 100% no-repeat;
}
.splitter:hover, .splitter.dragging, .splitter:focus-visible { background-image: linear-gradient(#00ff41, #00ff41); outline: none; }
.splitter:focus-visible { background-size: 3px 100%; }
.tabs-splitter { width: 8px; }
body.resizing { cursor: col-resize; user-select: none; -webkit-user-select: none; }
body.resizing.resizing-row { cursor: row-resize; }
body.resizing iframe { pointer-events: none; }

.tool-split { flex: 1; min-height: 0; display: flex; }
.tool-col { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.tool-stack { display: flex; flex-direction: column; gap: 14px; }
.tool-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tool-label { color: #3fae5a; font-size: 12px; text-transform: lowercase; }
.tool-label.inline { margin-left: 4px; }
.tool-text {
  flex: 1; min-height: 120px; resize: none; box-sizing: border-box; width: 100%;
  background: #000; color: #00ff41; border: 1px solid #0a5c1e; padding: 8px; font: inherit; tab-size: 2;
}
.tool-frame { flex: 1; min-height: 120px; width: 100%; border: 1px solid #0a5c1e; background: #fff; }
.tool-input, .btn {
  background: #000; color: #00ff41; border: 1px solid #0a5c1e; padding: 4px 10px; font: inherit; border-radius: 0;
}
.tool-input.invalid { border-color: #ff4141; }
.btn { cursor: pointer; }
.btn:hover:not(:disabled) { border-color: #00ff41; color: #d8ffe0; }
.btn:disabled { color: #0a5c1e; cursor: default; }
.tool-error { margin: 0; min-height: 1.5em; color: #ff6b6b; }
.tool-check { display: inline-flex; align-items: center; gap: 6px; }
.tool-file { color: #00ff41; font: inherit; }
.tool-file::file-selector-button { background: #000; color: #00ff41; border: 1px solid #0a5c1e; padding: 4px 10px; margin-right: 10px; font: inherit; cursor: pointer; }
.tool-file::file-selector-button:hover { border-color: #00ff41; }

.colour-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
.colour-input { width: 120px; height: 120px; padding: 0; border: 1px solid #0a5c1e; background: #000; cursor: pointer; }
.colour-swatch { width: 120px; height: 120px; border: 1px solid #0a5c1e; }
.colour-side { display: flex; flex-direction: column; gap: 6px; justify-content: flex-start; }
.colour-values { margin: 0; display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.colour-value { display: flex; align-items: center; gap: 12px; }
.colour-value dt { width: 40px; color: #3fae5a; }
.colour-value dd { margin: 0; flex: 1; }

.md-toolbar .btn { min-width: 2.2em; padding: 4px 8px; }
.md-preview { flex: 1; min-height: 120px; overflow: auto; border: 1px solid #0a5c1e; padding: 12px 16px; font: 14px/1.6 var(--mono); color: #c8f5d2; }
.md-preview > :first-child { margin-top: 0; }
.md-preview h1, .md-preview h2, .md-preview h3, .md-preview h4 { color: #00ff41; font-weight: 600; line-height: 1.25; margin: 1.2em 0 .5em; }
.md-preview h1 { font-size: 1.6em; border-bottom: 1px solid #0a5c1e; padding-bottom: .25em; }
.md-preview h2 { font-size: 1.3em; border-bottom: 1px solid #0a5c1e; padding-bottom: .2em; }
.md-preview h3 { font-size: 1.1em; }
.md-preview p, .md-preview ul, .md-preview ol, .md-preview blockquote, .md-preview pre, .md-preview table { margin: 0 0 1em; }
.md-preview a { color: #5ff58a; }
.md-preview a:hover { color: #d8ffe0; }
.md-preview code { font: .9em var(--mono); background: rgba(0, 255, 65, .1); padding: .1em .35em; border-radius: 3px; }
.md-preview pre { background: #050f08; border: 1px solid #0a5c1e; padding: 10px 12px; overflow: auto; }
.md-preview pre code { background: none; padding: 0; }
.md-preview blockquote { border-left: 3px solid #0a5c1e; padding: 0 1em; color: #7fcf95; }
.md-preview table { border-collapse: collapse; }
.md-preview th, .md-preview td { border: 1px solid #0a5c1e; padding: 4px 10px; }
.md-preview th { background: rgba(0, 255, 65, .08); }
.md-preview hr { border: 0; border-top: 1px solid #0a5c1e; margin: 1.2em 0; }
.md-preview img { max-width: 100%; }
.md-preview input[type=checkbox] { margin-right: .4em; }
.md-preview li.task-list-item { list-style: none; margin-left: -1.3em; }

.diff-options { flex: none; margin-bottom: 8px; }
.diff-scroll { overflow: auto; border: 1px solid #0a5c1e; }
.diff-table { border-collapse: collapse; width: 100%; font: 13px/1.45 var(--mono); }
.diff-table td, .diff-table th { padding: 0 8px; vertical-align: top; }
.diff-table th { text-align: left; font-weight: normal; font-size: 11px; color: #3fae5a; border-bottom: 1px solid #0a5c1e; position: sticky; top: 0; background: #000; }
.diff-table .no { width: 1%; min-width: 3.5em; text-align: right; color: #3fae5a; user-select: none; white-space: nowrap; }
.diff-table .sign { width: 1%; user-select: none; }
.diff-table .code { white-space: pre-wrap; word-break: break-all; }
.diff-table .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.diff-table .add, .diff-table tr.add td { background: rgba(0, 255, 65, .12); }
.diff-table .del, .diff-table tr.del td { background: rgba(255, 65, 65, .15); }
.diff-table tr.add .sign { color: #00ff41; }
.diff-table tr.del .sign { color: #ff6b6b; }
.diff-table td.empty { background: rgba(255, 255, 255, .03); }
.diff-table .gap td { color: #3fae5a; background: rgba(0, 255, 65, .05); padding-top: 2px; padding-bottom: 2px; font-size: 12px; }
.diff-table mark { color: inherit; padding: 0; }
.diff-table .add mark, .diff-table tr.add mark { background: rgba(0, 255, 65, .38); }
.diff-table .del mark, .diff-table tr.del mark { background: rgba(255, 65, 65, .4); }
.diff-table.side td.code { width: 50%; }

.barcode-view { align-self: flex-start; max-width: 100%; overflow: auto; background: #fff; padding: 8px; }
.barcode-view svg { display: block; max-width: 100%; height: auto; }

.tool-scroll { overflow: auto; }
.zpl-label { box-sizing: border-box; background: #fff; padding: 0; border: 1px solid #0a5c1e; flex: none; }
/* big labels shrink to fit the pane instead of overflowing it */
.zpl-label svg { display: block; width: 100%; height: 100%; }
.zpl-layout, .diff-layout { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.zpl-top, .diff-top { flex: 3 1 0; }
.zpl-commands, .diff-out { flex: 2 1 0; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.splitter-h { width: auto; height: 12px; cursor: row-resize; background-size: 100% 1px; margin: 4px 0; }
.splitter-h:focus-visible { background-size: 100% 3px; }
.zpl-table, .data-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.zpl-table th, .zpl-table td, .data-table th, .data-table td { text-align: left; vertical-align: top; padding: 4px 8px; border-bottom: 1px solid #0a5c1e; }
.zpl-table th, .data-table th { color: #3fae5a; font-weight: normal; font-size: 12px; }
.zpl-table code, .data-table code { font: inherit; color: #d8ffe0; word-break: break-all; }
.zpl-table .unsupported td { color: #3fae5a; }

.data-table td { word-break: break-all; }
.jwt-token { word-break: break-all; min-height: 140px; }
.jwt-json { margin: 0; padding: 8px; border: 1px solid #0a5c1e; overflow: auto; white-space: pre-wrap; word-break: break-all; font: 13px/1.5 var(--mono); }
.ok { color: #00ff41; }
.bad { color: #ff6b6b; }
.guid-count { width: 5em; }
.guid-out { min-height: 200px; }

.data-table th[scope=row] { color: #3fae5a; font-weight: normal; white-space: nowrap; width: 1%; }
.git-search { flex: 1; min-width: 12em; max-width: 36em; }
.git-ref { overflow: auto; }
.git-search::-webkit-search-cancel-button { filter: grayscale(1) brightness(1.6) sepia(1) hue-rotate(70deg) saturate(4); cursor: pointer; }
.git-heading { margin: 8px 0 6px; font: 600 13px/1.3 var(--mono); color: #00ff41; text-transform: lowercase; border-bottom: 1px solid #0a5c1e; padding-bottom: 4px; }
.git-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.git-list li { display: flex; align-items: baseline; gap: 14px; padding: 4px 0; border-bottom: 1px solid rgba(10, 92, 30, .45); }
.git-cmd { flex: 0 1 46%; min-width: 0; font: 13px/1.5 var(--mono); color: #d8ffe0; word-break: break-all; }
.git-desc { flex: 1; min-width: 0; color: #7fcf95; }
.git-list .btn { flex: none; padding: 2px 8px; font-size: 12px; }
@media (max-width: 800px) { .git-list li { flex-wrap: wrap; } .git-cmd { flex-basis: 100%; } }

.pdf-list { margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: 6px; }
.pdf-list li { padding-left: 4px; }
.pdf-list li::marker { color: #3fae5a; }
.pdf-name { display: inline-block; max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; margin-right: 10px; }
.tools .dim, .tools-pane .dim { margin: 0; color: #3fae5a; }

@media (max-width: 800px) {
  .tools { flex-direction: column; }
  .tools-tabs { flex: none; flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid #0a5c1e; padding: 0; }
  .tools-tab { border-left: 0; border-bottom: 3px solid transparent; }
  .tools-tab.active { border-bottom-color: #00ff41; }
  .tool-split { flex-direction: column; }
  .splitter { width: auto; height: 12px; cursor: row-resize; background-size: 100% 1px; }
  .splitter:focus-visible { background-size: 100% 3px; }
  .tabs-splitter { display: none; }
  body.resizing { cursor: row-resize; }
}
#blazor-error-ui { display: none; }