:root{
  --bg:#071017;
  --bg2:#0b1621;
  --panel:rgba(13,27,39,.88);
  --panel2:#101f2c;
  --panel3:#0a141e;
  --text:#eef7ff;
  --muted:#8fa7ba;
  --line:#294254;
  --line2:#3b5f77;
  --cyan:#35d7ff;
  --cyan2:#0fa8cf;
  --violet:#9c7bff;
  --green:#64e5a7;
  --amber:#ffc86b;
  --red:#ff6d85;
  --shadow:0 20px 55px rgba(0,0,0,.28);
  --radius:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:
    radial-gradient(circle at 12% 0%,rgba(53,215,255,.12),transparent 28rem),
    radial-gradient(circle at 88% 5%,rgba(156,123,255,.12),transparent 30rem),
    linear-gradient(180deg,#071017,#09131d 42%,#071017);
}
body:before{
  content:"";
  position:fixed;inset:0;pointer-events:none;opacity:.16;
  background-image:
    linear-gradient(rgba(92,160,198,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(92,160,198,.16) 1px,transparent 1px);
  background-size:28px 28px;
  mask-image:linear-gradient(to bottom,#000,transparent 80%);
}
button,input,select,textarea{font:inherit}
button,input,select,textarea{
  color:var(--text);background:#0a151f;border:1px solid #2f4b5f;border-radius:10px;
  outline:none;transition:.15s ease;
}
input,select,textarea{padding:9px 10px;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(53,215,255,.11)}
button{
  padding:9px 12px;cursor:pointer;font-weight:700;letter-spacing:.01em
}
button:hover{border-color:#6ea1bf;transform:translateY(-1px)}
button.primary{
  border-color:#218fba;
  background:linear-gradient(180deg,#153f56,#0d3043);
  box-shadow:0 8px 22px rgba(27,151,194,.13)
}
button.ghost{background:#0b1721}
button.danger{border-color:#6f3441;color:#ffc2cd;background:#221018}
button.mini{padding:5px 8px;border-radius:7px;font-size:12px}
button.icon{width:30px;height:30px;padding:0;display:inline-grid;place-items:center}
.topbar{
  position:sticky;top:0;z-index:50;
  min-height:68px;padding:10px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;
  background:rgba(6,15,22,.9);backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(71,112,139,.38);
}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.logoWrap{
  display:flex;align-items:center;
  width:390px;min-width:390px;max-width:390px;
  padding:6px 12px;
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(226,236,244,.90));
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 8px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.9);
}
.brandLogo{
  display:block;width:100%;height:auto;max-height:48px;object-fit:contain;object-position:left center;
  filter:drop-shadow(0 6px 14px rgba(0,60,110,.12));
}
.brandMeta{display:flex;flex-direction:column;justify-content:center;min-width:0}
.brandTitle{font-size:13px;font-weight:850;letter-spacing:.08em;white-space:nowrap}
.brandSub{font-size:10px;color:var(--muted);margin-top:2px;white-space:nowrap}
.toolbar{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.app{display:grid;grid-template-columns:390px minmax(0,1fr);gap:15px;padding:15px;position:relative}
.sidebar{display:flex;flex-direction:column;gap:12px}
.card{
  background:linear-gradient(180deg,rgba(15,31,44,.92),rgba(10,23,34,.92));
  border:1px solid rgba(61,96,119,.52);
  border-radius:var(--radius);box-shadow:var(--shadow);
}
.cardPad{padding:14px}
.cardTitle{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-weight:850;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:#dff6ff;margin-bottom:10px
}
.badge{
  display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 8px;
  border:1px solid #31566c;background:#0b1924;color:#a9c9dc;font-size:11px;font-weight:700
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
.form2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.form3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
label{display:block;font-size:11px;color:#95aabd;margin:8px 0 4px}
.sep{height:1px;background:linear-gradient(90deg,transparent,#28455a,transparent);margin:13px 0}
.stackPreview{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.stackChip{
  font-size:11px;border:1px solid #355a70;border-radius:8px;padding:5px 7px;background:#0b1a25;color:#cce8f6
}
.note{font-size:11px;color:var(--muted);line-height:1.45}
.checkrow{display:flex;align-items:center;gap:8px;margin-top:9px;color:#b8ccda;font-size:12px}
.checkrow input{width:auto}
.quickButtons{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.rangeBox{
  margin-top:10px;padding:10px;border-radius:12px;border:1px dashed #3c6279;
  background:linear-gradient(180deg,rgba(12,31,43,.75),rgba(7,20,30,.75))
}
.customForm{
  display:grid;grid-template-columns:1.4fr .65fr .75fr;gap:7px;align-items:end
}
.customForm .full{grid-column:1/-1}
.customList{display:flex;flex-direction:column;gap:8px;margin-top:11px;max-height:430px;overflow:auto;padding-right:2px}
.customItem{
  border:1px solid #2e4c60;border-radius:12px;background:#0b1823;padding:9px;
  box-shadow:inset 3px 0 0 var(--item-color,#35d7ff)
}
.customTop{display:flex;align-items:center;gap:6px}
.customName{font-weight:800;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.customMeta{font-size:11px;color:#8da7b9;margin-top:4px;display:flex;gap:10px;flex-wrap:wrap}
.customActions{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap}
.main{min-width:0;display:flex;flex-direction:column;gap:12px}
.hero{padding:18px 18px 15px;position:relative;overflow:hidden}
.hero:after{
  content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-90px;top:-130px;
  background:radial-gradient(circle,rgba(53,215,255,.18),transparent 68%);pointer-events:none
}
.heroTitle{font-size:25px;font-weight:900;letter-spacing:-.025em}
.heroTitle span{color:var(--cyan)}
.heroText{color:#9db3c4;margin-top:5px;max-width:850px;font-size:13px}
.summary{
  display:grid;grid-template-columns:repeat(6,minmax(110px,1fr));gap:8px;margin-top:14px
}
.metric{
  padding:10px;border-radius:12px;background:#0a1822;border:1px solid #28495d;min-height:70px
}
.metricLabel{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#7896aa}
.metricValue{font-size:21px;font-weight:900;margin-top:5px}
.metricUnit{font-size:10px;color:#7991a3;margin-left:3px}
.metric small{display:block;font-size:10px;color:#7891a3;margin-top:2px}
.diagramCard{overflow:hidden}
.diagramHead{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:12px 14px;border-bottom:1px solid #294456;background:#0b1924
}
.diagramTitle{font-weight:850}
.legend{display:flex;gap:6px;flex-wrap:wrap}
.legendItem{display:flex;align-items:center;gap:5px;font-size:10px;color:#9cb4c5}
.legendSwatch{width:9px;height:9px;border-radius:2px}
.diagramScroll{overflow:auto;padding:14px;background:rgba(5,13,19,.45)}
.diagram{min-width:1040px}
.byteRow{margin-bottom:13px}
.byteRow:last-child{margin-bottom:0}
.offsetLabel{
  display:flex;align-items:center;justify-content:space-between;margin:0 0 4px;
  color:#7e9aab;font-size:10px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace
}
.ruler{
  display:grid;grid-template-columns:repeat(32,1fr);height:32px;
  background:#09151e;border:1px solid #365467;border-bottom:none;border-radius:9px 9px 0 0;overflow:hidden
}
.byteTitle{
  grid-column:span 8;position:relative;display:flex;align-items:flex-start;justify-content:center;
  padding-top:3px;border-right:2px solid #53758a;color:#a9c1d1;font-size:9px;font-weight:800;
}
.byteTitle:last-child{border-right:none}
.bitNums{
  position:absolute;left:0;right:0;bottom:2px;display:grid;grid-template-columns:repeat(8,1fr);
  color:#526e82;font-size:8px;font-weight:600
}
.bitNums span{text-align:center}
.bitGrid{
  position:relative;display:grid;grid-template-columns:repeat(32,1fr);
  min-height:68px;border-left:1px solid #466477;border-top:1px solid #466477;
  background:#0c1923;border-radius:0 0 9px 9px;overflow:hidden
}
.bit{
  min-height:68px;border-right:1px solid rgba(111,149,172,.24);border-bottom:1px solid #466477;
}
.bit:nth-child(8n){border-right:2px solid #7390a2}
.fieldSeg{
    pointer-events:auto;
    cursor:pointer;
  position:absolute;top:0;height:68px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:4px 5px;border:1px solid rgba(255,255,255,.66);
  color:#061016;overflow:hidden;cursor:pointer;
  text-shadow:0 1px 0 rgba(255,255,255,.3);
  z-index:3;
}
.fieldSeg:hover{filter:brightness(1.12);z-index:5}
.fieldSeg.selected{outline:3px solid #fff;outline-offset:-4px;z-index:6}
.fieldSeg .fn{font-size:11px;font-weight:900;line-height:1.06;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.fieldSeg .fm{font-size:8px;font-weight:800;opacity:.72;margin-top:3px;white-space:nowrap}
.empty{
  padding:55px 20px;text-align:center;color:#718b9d;border:1px dashed #355468;border-radius:12px
}
.statusbar{
  padding:9px 13px;border-top:1px solid #294456;background:#091721;
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:10px;color:#7290a4
}
.statusGood{color:#86e9b8}.statusWarn{color:#ffd183}
.layerBreak{
  height:4px;position:absolute;top:0;bottom:0;z-index:4;pointer-events:none;box-shadow:0 0 12px currentColor
}
.modal{
  display:none;position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.68);backdrop-filter:blur(7px);
  align-items:center;justify-content:center;padding:20px
}
.modal.show{display:flex}
.modalBox{width:min(760px,100%);max-height:90vh;overflow:auto;padding:18px}
.modal h2{margin:0 0 10px}
textarea.json{min-height:340px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}
.modalActions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px;flex-wrap:wrap}
.toast{
  position:fixed;right:18px;bottom:18px;z-index:200;
  padding:10px 13px;border-radius:10px;background:#112a38;border:1px solid #3d718b;
  color:#dff7ff;box-shadow:var(--shadow);opacity:0;transform:translateY(12px);pointer-events:none;transition:.2s
}
.toast.show{opacity:1;transform:translateY(0)}
.helpGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.helpBox{padding:11px;border:1px solid #2c4a5e;border-radius:11px;background:#0a1822}
.helpBox b{color:#dff7ff}
a{color:#71dcff}
@media(max-width:1180px){
  .logoWrap{width:340px;min-width:340px;max-width:340px}
  .app{grid-template-columns:340px minmax(0,1fr)}
  .summary{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:880px){
  .app{grid-template-columns:1fr}
  .sidebar{order:1}.main{order:0}
  .summary{grid-template-columns:repeat(2,1fr)}
  .topbar{position:relative}
}
@media(max-width:520px){
  .logoWrap{width:100%;min-width:190px;max-width:300px}
  .brandMeta{display:none}
  .summary{grid-template-columns:1fr 1fr}
  .form2,.form3,.customForm,.helpGrid{grid-template-columns:1fr}
  .customForm .full{grid-column:auto}
}
@media print{
  :root{--text:#000;--muted:#444}
  body{background:#fff;color:#000}
  body:before,.topbar,.sidebar,.legend,.statusbar,#screenOnly{display:none!important}
  .app{display:block;padding:0}
  .main{display:block}
  .card,.hero,.diagramCard{background:#fff!important;border:none!important;box-shadow:none!important}
  .hero{padding:0 0 8mm}
  .heroTitle{color:#000}.heroTitle span{color:#000}.heroText{color:#444}
  .summary{grid-template-columns:repeat(6,1fr);gap:3mm}
  .metric{background:#fff;border:1px solid #777;color:#000}
  .metricLabel,.metric small{color:#555}
  .diagramHead{background:#fff;border:0;padding:0 0 3mm}
  .diagramScroll{overflow:visible;padding:0;background:#fff}
  .diagram{min-width:0;width:100%}
  .ruler,.bitGrid{background:#fff}
  .ruler{border-color:#666}
  .byteTitle{color:#000;border-color:#555}
  .bitNums{color:#666}
  .bit{border-color:#aaa!important}
  .fieldSeg{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .offsetLabel{color:#333}
  @page{size:A4 landscape;margin:9mm}
}
.seoFooter{
  margin:0 15px 15px;
  padding:10px 14px;
  border:1px solid rgba(61,96,119,.34);
  border-radius:12px;
  background:rgba(7,16,23,.62);
  color:#7893a7;
  font-size:10px;
  text-align:center;
}
.seoFooter strong{color:#9db4c5}
@media print{.seoFooter{display:none!important}}
.aboutLead{
  color:#d8e8f3;
  font-size:13px;
  line-height:1.55;
}
.aboutTool{
  border-color:rgba(53,215,255,.28);
}
.bit{
  position:relative;
  cursor:crosshair;
  transition:background .12s ease, box-shadow .12s ease;
}
.bit:hover{
  background:rgba(53,215,255,.16);
  box-shadow:inset 0 0 0 1px rgba(53,215,255,.65);
}
.bit.bitDefined::after{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:3px;
  background:var(--bit-color,#55e0ab);
  opacity:.92;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
}
.bit.bitDefined::before{
  content:attr(data-bit-label);
  position:absolute;
  z-index:2;
  inset:0;
  display:grid;
  place-items:center;
  color:#071017;
  font-size:8px;
  font-weight:950;
  line-height:1;
  overflow:hidden;
}

.bitEditActive .bit{cursor:pointer}
.bitEditActive .bit:hover{
  background:rgba(53,215,255,.24);
  box-shadow:inset 0 0 0 2px #b8f2ff;
}
.bitModeBtn.active{
  border-color:#63e6ff;
  color:#dffbff;
  background:linear-gradient(180deg,#16465c,#0d3043);
  box-shadow:0 0 0 3px rgba(53,215,255,.10);
}
.bitEditorGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}
.bitLocation{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:10px 0 12px;
  padding:10px 12px;
  border:1px solid #34566b;
  border-radius:11px;
  background:#0a1822;
}
.bitLocation strong{font-size:16px}
.bitLocation code{
  color:#8fe8ff;
  background:#07131b;
  border:1px solid #29475a;
  border-radius:7px;
  padding:4px 7px;
}
.bitContext{
  margin-top:9px;
  padding:9px 10px;
  border-radius:9px;
  background:#091620;
  border:1px solid #28475a;
  color:#8faabd;
  font-size:11px;
}
@media(max-width:520px){
  .bitEditorGrid{grid-template-columns:1fr}
}
@media print{
  .bit.bitDefined::after{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* Direct editing: always available by double-click */
.bit{cursor:default}
.bitGrid{cursor:crosshair}
.bitGrid:hover .bit{background:rgba(53,215,255,.025)}
.fieldSeg{cursor:default}
.directEditHint{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:10px;
  color:#89a6b9;
}
.directEditHint::before{
  content:"×2";
  display:inline-grid;
  place-items:center;
  min-width:24px;
  height:20px;
  padding:0 5px;
  border-radius:6px;
  border:1px solid #35586d;
  background:#0a1822;
  color:#9eeaff;
  font-weight:900;
}
.byteBits{
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  gap:5px;
  margin:12px 0;
}
.byteBit{
  min-height:58px;
  padding:6px 3px;
  border:1px solid #3a5c70;
  border-radius:8px;
  background:#091720;
  color:#d8edf8;
  text-align:center;
}
.byteBit .bn{font-size:10px;color:#78a0b6}
.byteBit .bv{font-size:16px;font-weight:950;margin-top:5px}
.byteBit.defined{
  border-color:#6bcde8;
  background:#102936;
}
.byteSummary{
  padding:10px 12px;
  border:1px solid #34566b;
  border-radius:11px;
  background:#0a1822;
}
.byteSummary strong{font-size:17px}
.byteSummary .note{margin-top:3px}
.byteEditorGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}
.byteFieldContext{
  margin-top:8px;
  padding:9px 10px;
  border:1px solid #29495c;
  border-radius:9px;
  background:#08151e;
  color:#8ea9bb;
  font-size:11px;
}
@media(max-width:520px){
  .byteEditorGrid{grid-template-columns:1fr}
  .byteBits{gap:3px}
  .byteBit{min-height:50px;padding:4px 2px}
}
.fieldInspectorHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.lockBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:78px;
  padding:6px 9px;
  border-radius:999px;
  border:1px solid #7c4b57;
  background:#241219;
  color:#ffb5c3;
  font-size:10px;
  font-weight:950;
  letter-spacing:.1em;
}
.lockBadge.editable{
  border-color:#36745b;
  background:#10261d;
  color:#8fe2b7;
}
.fieldFacts{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
  margin:12px 0;
}
.fieldFacts>div{
  padding:9px;
  border:1px solid #2d4e61;
  border-radius:9px;
  background:#091720;
}
.fieldFacts span{
  display:block;
  color:#7593a7;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.07em;
}
.fieldFacts strong{
  display:block;
  margin-top:3px;
  color:#d8edf8;
  font-size:12px;
}
.lockedNotice{
  margin-bottom:11px;
  padding:10px 12px;
  border:1px solid #65404a;
  border-radius:10px;
  background:#1b1015;
  color:#e6b7c1;
  font-size:11px;
  line-height:1.45;
}
.fieldInspectorGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}
.fieldDescription{
  margin-top:11px;
  padding:11px 12px;
  border:1px solid #2b4b5e;
  border-radius:10px;
  background:#08151e;
  color:#9cb2c1;
  font-size:11px;
  line-height:1.5;
}
.fieldInspectorGrid input:disabled,
.fieldInspectorGrid select:disabled{
  opacity:.72;
  cursor:not-allowed;
  background:#101820;
  color:#91a1ad;
}
@media(max-width:620px){
  .fieldFacts{grid-template-columns:1fr 1fr}
  .fieldInspectorGrid{grid-template-columns:1fr}
}
.fieldSeg:hover{
  filter:brightness(1.09);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.72);
  z-index:8;
}
.fieldSeg[data-standard="1"]{
  cursor:pointer;
}
.fieldSeg[data-standard="1"]:hover{
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.82),0 0 0 1px rgba(0,0,0,.35);
}
.customItem.selectedCustom{
  border-color:#6bdcff;
  box-shadow:inset 3px 0 0 var(--item-color,#35d7ff),0 0 0 1px rgba(53,215,255,.14);
}
.customName{font-weight:850;color:#e7f5ff;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.customActions .editCustom{border-color:#3c7793;color:#dff8ff}
.customActions button:disabled{opacity:.35;cursor:not-allowed;transform:none}
.workspaceRow .offsetLabel::after{
  content:"free workspace";
  margin-left:auto;
  color:#557488;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.bit.dragSelected{
  background:rgba(53,215,255,.34)!important;
  box-shadow:inset 0 0 0 1px rgba(196,248,255,.96);
}
.bitGrid.dragSelecting{
  cursor:crosshair;
}
@media print{
  .workspaceRow{display:none!important}
}
.createModePanel{
  margin-bottom:10px;
  padding:10px;
  border:1px solid #315269;
  border-radius:11px;
  background:#091822;
}
/* --- Multi-view Protocol Forge --- */
.forgeTabs{
  position:sticky;top:68px;z-index:45;
  display:flex;gap:6px;align-items:center;flex-wrap:wrap;
  padding:9px 15px;
  background:rgba(6,15,22,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(71,112,139,.32);
}
.forgeTab{
  border-radius:9px;
  padding:8px 12px;
  color:#95adbe;
  background:#09141d;
  border:1px solid #2b4659;
}
.forgeTab.active{
  color:#e8f9ff;
  border-color:#3193ba;
  background:linear-gradient(180deg,#15384c,#0c2939);
}
.forgeView{display:none}
.forgeView.active{display:block}
#packetView.forgeView.active{display:grid}
.smLayout{
  display:grid;
  grid-template-columns:310px minmax(0,1fr);
  gap:15px;
  padding:15px;
}
.smSidebar{display:flex;flex-direction:column;gap:12px}
.smMain{min-width:0;display:flex;flex-direction:column;gap:12px}
.smToolbar{
  display:flex;gap:7px;align-items:center;flex-wrap:wrap;
  padding:11px 13px;
}
.smToolbar .spacer{flex:1}
.smCanvasWrap{
  overflow:auto;
  padding:12px;
  min-height:650px;
  background:
    linear-gradient(rgba(72,121,149,.10) 1px, transparent 1px),
    linear-gradient(90deg,rgba(72,121,149,.10) 1px, transparent 1px),
    #07121a;
  background-size:24px 24px;
}
#smCanvas{
  display:block;
  width:1200px;
  height:700px;
  min-width:1200px;
  background:rgba(5,13,19,.42);
  border:1px solid #28475a;
  border-radius:12px;
}
.smStateNode{cursor:grab}
.smStateNode:active{cursor:grabbing}
.smNodeRect{
  fill:#102431;
  stroke:#548198;
  stroke-width:2;
}
.smStateNode.initial .smNodeRect{stroke:#64e5a7;stroke-width:3}
.smStateNode.error .smNodeRect{stroke:#ff8093}
.smStateNode.final .smNodeRect{stroke:#b791ff}
.smStateNode.activeSim .smNodeRect{
  stroke:#fff;
  stroke-width:4;
  filter:drop-shadow(0 0 10px rgba(53,215,255,.8));
}
.smNodeName{
  fill:#eaf7ff;
  font-size:8px;
  font-weight:800;
  text-anchor:middle;
  pointer-events:none;
}
.smNodeType{
  fill:#7fa0b4;
  font-size:7px;
  font-weight:700;
  text-anchor:middle;
  pointer-events:none;
}
.smEdge{
  fill:none;
  stroke:#6c8799;
  stroke-width:2;
  marker-end:url(#smArrow);
}
.smEdge.hit{
  stroke:transparent;
  stroke-width:16;
  pointer-events:stroke;
  cursor:pointer;
}
.smEdgeGroup:hover .smEdge:not(.hit){stroke:#82ddff;stroke-width:3}
.smEdgeLabel{
  fill:#b9d0de;
  font-size:6px;
  text-anchor:middle;
  paint-order:stroke;
  stroke:#07121a;
  stroke-width:3px;
  stroke-linejoin:round;
  cursor:pointer;
}
.smEdgeGuard{
  fill:#7896aa;
  font-size:5px;
  text-anchor:middle;
  paint-order:stroke;
  stroke:#07121a;
  stroke-width:2px;
}
.smList{
  display:flex;flex-direction:column;gap:6px;
  max-height:330px;overflow:auto
}
.smListItem{
  display:grid;grid-template-columns:1fr auto;gap:7px;align-items:center;
  padding:8px 9px;border:1px solid #2b485b;border-radius:9px;background:#0a1822
}
.smListItem strong{font-size:9px;line-height:1.15}
.smListItem small{display:block;color:#7895a8;margin-top:2px;font-size:8px;line-height:1.2}
.smListItem .mini{font-size:9px;padding:4px 6px}
.smTransitionItem{
  padding:8px 9px;border:1px solid #2b485b;border-radius:9px;background:#0a1822;cursor:pointer
}
.smTransitionItem:hover{border-color:#5684a0}
.smTransitionRoute{font-weight:800;font-size:11px}
.smTransitionMeta{color:#7897aa;font-size:10px;margin-top:3px}
.smEmpty{padding:15px;text-align:center;color:#6e8a9d;border:1px dashed #315064;border-radius:10px}
.formFull{grid-column:1/-1}
.smModalGrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.smInfo{
  padding:9px 10px;border:1px solid #2c4b5e;border-radius:9px;background:#08151e;
  color:#8faabc;font-size:11px;line-height:1.45
}
.protocolRefBox{
  margin-top:10px;padding:10px;border:1px solid #31556b;border-radius:10px;background:#091923
}
.simLayout{
  display:grid;grid-template-columns:340px minmax(0,1fr);gap:15px;padding:15px
}
.simTrace{
  display:flex;flex-direction:column;gap:6px;max-height:520px;overflow:auto
}
.traceItem{
  padding:8px 9px;border-left:3px solid #47748d;border-radius:6px;background:#0a1822;font-size:11px
}
.traceItem strong{color:#d9eef8}
.traceItem small{display:block;color:#7796a9;margin-top:3px}
.simCurrent{
  font-size:26px;font-weight:900;color:#dff7ff
}
.specWrap{padding:15px}
.specSheet{
  max-width:1200px;margin:0 auto;padding:22px;
  background:#0b1822;border:1px solid #2e4d61;border-radius:14px
}
.specSheet h1{margin:0 0 6px;font-size:26px}
.specSheet h2{margin:25px 0 9px;font-size:17px}
.specSheet table{width:100%;border-collapse:collapse;font-size:11px}
.specSheet th,.specSheet td{border:1px solid #355164;padding:6px 8px;text-align:left;vertical-align:top}
.specSheet th{background:#102430;color:#d9edf7}
.specCode{
  white-space:pre-wrap;font:11px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  padding:11px;border:1px solid #29485b;border-radius:9px;background:#07141d;color:#bdd2df
}
.viewOnlyPrint{display:none}
@media(max-width:980px){
  .smLayout,.simLayout{grid-template-columns:1fr}
  .smCanvasWrap{min-height:520px}
}
@media print{
  .forgeTabs,.smSidebar,.smToolbar,.simLayout>.card:first-child{display:none!important}
  .forgeView{display:none!important}
  .forgeView.active{display:block!important}
  #packetView.forgeView.active{display:block!important}
  .smLayout,.simLayout{display:block;padding:0}
  .smCanvasWrap{overflow:visible;padding:0;background:#fff;min-height:0}
  #smCanvas{width:100%;height:auto;min-width:0;background:#fff;border:none}
  #smCanvas .smNodeRect{fill:#fff}
  #smCanvas .smNodeName{fill:#000}
  #smCanvas .smNodeType{fill:#444}
  #smCanvas .smEdge{stroke:#333;stroke-width:1px}
  #smCanvas .smEdge.hit{display:none!important;stroke:transparent!important}
  #smCanvas .smEdge.special{stroke-width:1px;stroke-dasharray:4 3}
  #smCanvas .smEdge.special.error{stroke:#900}
  #smCanvas .smEdge.special.timeout{stroke:#986600}
  #smCanvas .smEdgeLabel,#smCanvas .smEdgeGuard{fill:#000;stroke:#fff}
#smCanvas marker path{fill:#333}
  .specSheet{background:#fff;color:#000;border:none;padding:0}
  .specSheet th{background:#eee;color:#000}
  .specSheet th,.specSheet td{border-color:#777}
  .specCode{background:#fff;color:#000}
}
.smStateNode.parserRead .smNodeRect{
  fill:#102934;
  stroke:#5b9ab8;
}
.smStateNode.parserWait .smNodeRect{
  fill:#14261f;
  stroke:#64e5a7;
  stroke-width:3;
}
.smStateNode.parserReady .smNodeRect{
  fill:#241d35;
  stroke:#b791ff;
  stroke-width:3;
}
.smParserField{
  fill:#9bc3d5;
  font-size:7px;
  font-weight:700;
  text-anchor:middle;
  pointer-events:none;
}
.smEdge.special{
  stroke-width:1.5;
  stroke-dasharray:5 4;
  pointer-events:none;
}
.smEdge.special.error{stroke:#ff8093}
.smEdge.special.timeout{stroke:#ffc86b}
.smEdgeLabel.special{font-weight:800;pointer-events:none}
.smEdgeLabel.special.error{fill:#ff9caf}
.smEdgeLabel.special.timeout{fill:#ffd78b}
.smScopeGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin-top:8px;
}
.smScopeOption{
  display:flex;
  align-items:center;
  gap:7px;
  margin:0;
  padding:7px 8px;
  border:1px solid #2d4a5d;
  border-radius:8px;
  background:#091721;
  color:#a9c0cf;
  font-size:10px;
}
.smScopeOption input{width:auto;margin:0}
.smHeaderTag{
  fill:#6e90a3;
  font-size:5px;
  text-anchor:middle;
  pointer-events:none;
  letter-spacing:.05em;
}
.viewHelpBtn{
  position:absolute;
  top:14px;
  right:14px;
  width:32px;
  height:32px;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid #3b6278;
  background:#0b1b27;
  color:#aeeeff;
  font-size:14px;
  font-weight:900;
  z-index:4;
}
.viewHelpBtn:hover{
  border-color:#69c9ec;
  color:#e7fbff;
  background:#103044;
}
.viewHelpBtn.compact{
  position:static;
  width:28px;
  height:28px;
  flex:none;
  font-size:12px;
}
.hero{position:relative}

.helpModalBox{
  width:min(880px,100%);
  max-height:90vh;
  overflow:auto;
}
.helpModalHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:8px;
}
.helpModalHead h2{
  margin:2px 0 0;
  font-size:22px;
}
.helpIntro{
  margin:10px 0 14px;
  padding:12px 14px;
  border:1px solid #31546a;
  border-radius:11px;
  background:#0a1924;
  color:#c9dde9;
  font-size:12px;
  line-height:1.55;
}
.helpContent{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.helpSection{
  border:1px solid #2c4c60;
  border-radius:11px;
  background:#091721;
  padding:12px 14px;
}
.helpSection h3{
  margin:0 0 7px;
  font-size:13px;
  color:#e0f4ff;
}
.helpSection p{
  margin:6px 0;
  color:#9db5c5;
  font-size:11px;
  line-height:1.5;
}
.helpSection ul,
.helpSection ol{
  margin:7px 0 0 18px;
  padding:0;
  color:#9db5c5;
  font-size:11px;
  line-height:1.55;
}
.helpSection li{margin:4px 0}
.helpKey{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:2px 7px;
  border:1px solid #35566b;
  border-radius:6px;
  background:#07131b;
  color:#bdeeff;
  font:700 10px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  white-space:nowrap;
}
.helpFlow{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  margin-top:8px;
}
.helpFlow>div{
  padding:9px;
  border:1px solid #2e5064;
  border-radius:9px;
  background:#0b1b26;
  color:#a9c0cf;
  font-size:10px;
  line-height:1.4;
}
.helpFlow strong{
  display:block;
  color:#e0f4ff;
  font-size:10px;
  margin-bottom:3px;
}
.helpFooterNote{
  margin-top:14px;
  color:#6f8da1;
  font-size:10px;
  line-height:1.45;
  text-align:center;
}
@media(max-width:620px){
  .helpFlow{grid-template-columns:1fr}
}
@media print{
  .viewHelpBtn,#helpModal{display:none!important}
}
/* --- Professional paged print layout --- */
.printPageChrome{display:none}

@media print{
  /* Browser page box. The generous top margin reserves space for our own repeated header. */
  @page{
    size:A4 landscape;
    margin:18mm 14mm 14mm 14mm;
  }

  html,body{
    background:#fff!important;
    color:#111!important;
    width:auto!important;
    min-width:0!important;
    overflow:visible!important;
  }

  body{
    margin:0!important;
    padding:0!important;
  }

  /* Repeated on every printed page in modern paged-media engines. */
  .printPageChrome{
    display:block!important;
    position:static;
  }
  .printCreated{
    display:block!important;
    position:fixed;
    top:-11.5mm;
    left:-8.5mm;
    z-index:9999;
    color:#303840!important;
    font:600 8pt/1.2 Arial,Helvetica,sans-serif;
    letter-spacing:.02em;
    white-space:nowrap;
    padding-left:3mm;
    border-left:.7mm solid #425b6b;
  }
  .printCreated strong{
    font-weight:800;
    color:#111!important;
  }
  .printFrame{
    display:block!important;
    position:fixed;
    z-index:9998;
    pointer-events:none;
    top:-14mm;
    left:-10mm;
    right:-10mm;
    bottom:-10mm;
    border:.35mm solid #697985;
    border-radius:2.2mm;
  }

  /* Never print website chrome. */
  .topbar,
  .forgeTabs,
  .sidebar,
  .smSidebar,
  .smToolbar,
  .toolbar,
  .legend,
  .statusbar,
  .seoFooter,
  #screenOnly,
  .viewHelpBtn,
  #helpModal,
  .modal,
  .workspaceRow{
    display:none!important;
  }

  /* Only the selected view prints. */
  .forgeView{display:none!important}
  .forgeView.active{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    margin:0 auto!important;
    padding:0!important;
    overflow:visible!important;
  }
  #packetView.forgeView.active{display:block!important}

  /* General centering and page-safe geometry. */
  .main,
  .smMain,
  .specWrap,
  .specSheet{
    width:100%!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
  }
  .app,
  .smLayout,
  .simLayout,
  .specWrap{
    display:block!important;
    padding:0!important;
    margin:0!important;
    width:100%!important;
    max-width:100%!important;
  }

  .card,
  .hero,
  .diagramCard,
  .specSheet{
    background:#fff!important;
    color:#111!important;
    box-shadow:none!important;
  }

  /* A restrained inner document frame around major printable sections. */
  .hero,
  .diagramCard,
  .smMain>.card,
  .simLayout>.card:last-child,
  .specSheet{
    border:.25mm solid #a8b1b8!important;
    border-radius:2mm!important;
  }

  .hero,
  .diagramCard,
  .smMain>.card,
  .simLayout>.card:last-child{
    padding:5mm!important;
    margin:0 auto 5mm!important;
  }

  .specSheet{
    padding:6mm!important;
  }

  /* PACKET FORMAT --------------------------------------------------------- */
  .hero{
    break-inside:avoid;
    page-break-inside:avoid;
  }
  .summary{
    grid-template-columns:repeat(6,1fr)!important;
    gap:2.2mm!important;
    break-inside:avoid;
    page-break-inside:avoid;
  }
  .metric{
    background:#fff!important;
    border:.25mm solid #a8b1b8!important;
  }
  .diagramHead{
    background:#fff!important;
    border:0!important;
    padding:0 0 3mm!important;
    break-after:avoid;
    page-break-after:avoid;
  }
  .diagramScroll{
    display:block!important;
    overflow:visible!important;
    padding:0!important;
    margin:0!important;
    background:#fff!important;
  }
  .diagram{
    display:block!important;
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    overflow:visible!important;
  }
  .byteRow{
    break-inside:avoid!important;
    page-break-inside:avoid!important;
    margin-bottom:3mm!important;
  }
  .ruler,.bitGrid{background:#fff!important}
  .fieldSeg{
    -webkit-print-color-adjust:exact!important;
    print-color-adjust:exact!important;
  }

  /* STATE MACHINE --------------------------------------------------------- */
  .smCanvasWrap{
    display:flex!important;
    justify-content:center!important;
    align-items:flex-start!important;
    overflow:visible!important;
    padding:0!important;
    margin:0!important;
    background:#fff!important;
    min-height:0!important;
    break-inside:avoid!important;
    page-break-inside:avoid!important;
  }
  #smCanvas,
  #simCanvas{
    display:block!important;
    width:auto!important;
    max-width:100%!important;
    height:auto!important;
    max-height:156mm!important;
    min-width:0!important;
    margin:0 auto!important;
    background:#fff!important;
    border:0!important;
    break-inside:avoid!important;
    page-break-inside:avoid!important;
  }
  #smCanvas .smNodeRect,
  #simCanvas .smNodeRect{fill:#fff!important}
  #smCanvas .smNodeName,
  #simCanvas .smNodeName{fill:#000!important}
  #smCanvas .smNodeType,
  #simCanvas .smNodeType{fill:#333!important}
  #smCanvas .smParserField,
  #simCanvas .smParserField{fill:#333!important}
  #smCanvas .smEdge,
  #simCanvas .smEdge{stroke:#333!important;stroke-width:1px!important}
  #smCanvas .smEdge.hit,
  #simCanvas .smEdge.hit{display:none!important;stroke:transparent!important}
  #smCanvas .smEdge.special,
  #simCanvas .smEdge.special{stroke-width:1px!important;stroke-dasharray:4 3!important}
  #smCanvas .smEdgeLabel,
  #smCanvas .smEdgeGuard,
  #simCanvas .smEdgeLabel,
  #simCanvas .smEdgeGuard{
    fill:#000!important;
    stroke:#fff!important;
  }
  #smCanvas marker path,
  #simCanvas marker path{fill:#333!important}

  /* SIMULATION ------------------------------------------------------------ */
  .simLayout>.card:first-child{display:none!important}
  .simLayout>.card:last-child{
    width:100%!important;
    max-width:100%!important;
    margin:0 auto!important;
  }
  .simTrace{
    max-height:none!important;
    overflow:visible!important;
  }
  .traceItem{
    break-inside:avoid!important;
    page-break-inside:avoid!important;
  }

  /* SPECIFICATION --------------------------------------------------------- */
  .specSheet{
    border:.25mm solid #a8b1b8!important;
    background:#fff!important;
    color:#111!important;
  }
  .specSheet h1{
    margin-top:0!important;
    break-after:avoid!important;
    page-break-after:avoid!important;
  }
  .specSheet h2{
    break-after:avoid!important;
    page-break-after:avoid!important;
    margin-top:6mm!important;
  }
  .specSheet p{
    orphans:3;
    widows:3;
  }
  .specSheet table{
    width:100%!important;
    border-collapse:collapse!important;
    break-inside:auto!important;
    page-break-inside:auto!important;
  }
  .specSheet thead{
    display:table-header-group!important;
  }
  .specSheet tfoot{
    display:table-footer-group!important;
  }
  .specSheet tr{
    break-inside:avoid!important;
    page-break-inside:avoid!important;
  }
  .specSheet th{
    background:#eef1f3!important;
    color:#111!important;
    -webkit-print-color-adjust:exact!important;
    print-color-adjust:exact!important;
  }
  .specSheet th,
  .specSheet td{
    border:.2mm solid #8d989f!important;
  }
  .specCode{
    background:#fff!important;
    color:#111!important;
    border:.2mm solid #9ba5ab!important;
    white-space:pre-wrap!important;
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
    break-inside:auto!important;
    page-break-inside:auto!important;
  }

  /* Prevent decorative or hidden controls from reserving print space. */
  button,
  select,
  input,
  textarea{
    box-shadow:none!important;
  }
}
/* --- Final clean-print override: full page owned by Protocol Forge --- */
@media print{
  @page{
    size:A4 landscape;
    margin:0;
  }

  html,
  body{
    margin:0!important;
    padding:0!important;
    width:297mm!important;
    min-width:297mm!important;
    max-width:297mm!important;
    background:#fff!important;
    overflow:visible!important;
  }

  body{
    box-sizing:border-box!important;
    padding:15mm 16mm 13mm 16mm!important;
    color:#111!important;
  }

  /* Own page furniture — kept safely inside the physical page. */
  .printPageChrome{
    display:block!important;
    position:static!important;
  }

  .printCreated{
    display:block!important;
    position:fixed!important;
    top:7mm!important;
    left:10mm!important;
    right:auto!important;
    z-index:9999!important;
    margin:0!important;
    padding:0 0 0 3mm!important;
    border-left:.65mm solid #435d6d!important;
    color:#303840!important;
    font:600 7.5pt/1.2 Arial,Helvetica,sans-serif!important;
    letter-spacing:.015em!important;
    white-space:nowrap!important;
  }

  .printCreated strong{
    color:#111!important;
    font-weight:800!important;
  }

  .printFrame{
    display:block!important;
    position:fixed!important;
    top:5mm!important;
    left:7mm!important;
    right:7mm!important;
    bottom:6mm!important;
    z-index:9998!important;
    pointer-events:none!important;
    border:.32mm solid #667884!important;
    border-radius:2.2mm!important;
  }

  /* Everything printable is slightly reduced and centered inside our frame. */
  .forgeView.active{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    margin:0 auto!important;
    padding-top:5mm!important;
    zoom:.88;
    transform-origin:top center;
  }

  /* Avoid nested scaling surprises in the diagram canvases. */
  #smCanvas,
  #simCanvas{
    max-width:96%!important;
    max-height:145mm!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  .diagram{
    width:96%!important;
    max-width:96%!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  .specSheet{
    width:96%!important;
    max-width:96%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding:5mm!important;
  }

  .hero,
  .diagramCard,
  .smMain>.card,
  .simLayout>.card:last-child{
    width:96%!important;
    max-width:96%!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* Stronger page-break protection. */
  .hero,
  .summary,
  .diagramHead,
  .byteRow,
  .smCanvasWrap,
  #smCanvas,
  #simCanvas,
  .traceItem,
  .helpBox,
  .metric{
    break-inside:avoid!important;
    page-break-inside:avoid!important;
  }

  .specSheet h1,
  .specSheet h2,
  .specSheet h3{
    break-after:avoid!important;
    page-break-after:avoid!important;
  }

  .specSheet tr{
    break-inside:avoid!important;
    page-break-inside:avoid!important;
  }

  /* Make sure interactive/native UI never leaks into print. */
  .topbar,
  .forgeTabs,
  .sidebar,
  .smSidebar,
  .smToolbar,
  .toolbar,
  .statusbar,
  .seoFooter,
  #screenOnly,
  .viewHelpBtn,
  .modal,
  .workspaceRow{
    display:none!important;
  }
}
/* --- Print content refinement only: frame intentionally untouched --- */
@media print{
  /* Slightly smaller printable content, centered inside the existing v16 frame. */
  .forgeView.active{
    width:92%!important;
    max-width:92%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    zoom:.82!important;
    transform-origin:top center!important;
  }

  /* Remove web-style module/card outlines in print. */
  .card,
  .hero,
  .diagramCard,
  .smMain>.card,
  .simLayout>.card:last-child,
  .specSheet,
  .helpBox,
  .customItem,
  .smListItem,
  .smTransitionItem,
  .bitContext,
  .fieldDescription,
  .lockedNotice,
  .helpSection{
    border:none!important;
    box-shadow:none!important;
    outline:none!important;
  }

  /* Remove decorative separators from the web UI. */
  .sep{
    display:none!important;
  }

  .diagramHead,
  .cardTitle{
    border:none!important;
    box-shadow:none!important;
  }

  /* Metrics should read as clean document values, not web cards. */
  .metric{
    border:none!important;
    box-shadow:none!important;
    background:#fff!important;
    padding:1.8mm!important;
  }

  /* Keep only structural/document lines that are meaningful. */
  .ruler,
  .bitGrid,
  .bit,
  .byteTitle,
  .specSheet table,
  .specSheet th,
  .specSheet td{
    box-shadow:none!important;
  }

  /* Keep packet grid and specification table lines restrained. */
  .ruler,
  .bitGrid{
    border-color:#777!important;
  }

  .bit{
    border-color:#bbb!important;
  }

  .byteTitle{
    border-color:#888!important;
  }

  .specSheet th,
  .specSheet td{
    border-color:#a8afb4!important;
  }

  /* Reduce extra vertical padding so content stays well inside the frame. */
  .hero,
  .diagramCard,
  .smMain>.card,
  .simLayout>.card:last-child,
  .specSheet{
    padding:3mm!important;
    margin-bottom:3mm!important;
  }

  #smCanvas,
  #simCanvas{
    max-height:136mm!important;
  }
}
/* --- Portrait print experiment: frame remains untouched --- */
@media print{
  @page{
    size:A4 portrait;
    margin:0;
  }

  html,
  body{
    width:210mm!important;
    min-width:210mm!important;
    max-width:210mm!important;
  }

  body{
    box-sizing:border-box!important;
    padding:15mm 13mm 13mm 13mm!important;
  }

  /* Narrower content for portrait width. */
  .forgeView.active{
    width:90%!important;
    max-width:90%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    zoom:.72!important;
    transform-origin:top center!important;
  }

  /* Packet format: keep 32-bit rows intact but fit them into portrait width. */
  .diagram,
  .diagramScroll,
  .byteRow,
  .ruler,
  .bitGrid{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  /* State diagrams need stronger width reduction in portrait. */
  #smCanvas,
  #simCanvas{
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    max-height:205mm!important;
  }

  /* Specification benefits from portrait and can use nearly full width. */
  .specSheet{
    width:96%!important;
    max-width:96%!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* Reduce table type a little to prevent horizontal overflow. */
  .specSheet table{
    font-size:8.5px!important;
  }

  .specSheet th,
  .specSheet td{
    padding:4px 5px!important;
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
  }

  /* More vertical room means fewer forced breaks for larger blocks. */
  .hero,
  .diagramCard,
  .smMain>.card,
  .simLayout>.card:last-child{
    margin-bottom:4mm!important;
  }
}
/* --- Portrait pagination correction: repeat safe top/bottom space on every page --- */
@media print{
  @page{
    size:A4 portrait;
    margin:0;
  }

  /* Body itself should not provide the repeated page spacing. */
  body{
    padding:0!important;
  }

  /*
    The active view is the box that actually fragments across pages.
    Clone its padding on every fragment so page 2, 3, ... get the same
    safe top and bottom area as page 1.
  */
  .forgeView.active{
    box-sizing:border-box!important;
    width:90%!important;
    max-width:90%!important;
    margin:0 auto!important;

    padding-top:25mm!important;
    padding-bottom:20mm!important;
    padding-left:0!important;
    padding-right:0!important;

    -webkit-box-decoration-break:clone!important;
    box-decoration-break:clone!important;

    zoom:.72!important;
    transform-origin:top center!important;
  }

  /* Keep major blocks away from the bottom edge when a break is possible. */
  .hero,
  .diagramCard,
  .smMain>.card,
  .simLayout>.card:last-child,
  .specSheet{
    break-inside:auto!important;
    page-break-inside:auto!important;
    margin-bottom:5mm!important;
  }

  /* These atomic rows/items should never be split. */
  .byteRow,
  .traceItem,
  .specSheet tr,
  .metric{
    break-inside:avoid!important;
    page-break-inside:avoid!important;
  }

  /* A heading must travel with at least some following content. */
  .diagramHead,
  .specSheet h1,
  .specSheet h2,
  .specSheet h3{
    break-after:avoid-page!important;
    page-break-after:avoid!important;
  }

  /* Slightly more conservative diagram height for the printable fragment. */
  #smCanvas,
  #simCanvas{
    max-height:192mm!important;
  }
}
/* --- Portrait frame correction --- */
@media print{
  /* Symmetric frame, safely inside the physical A4 portrait sheet. */
  .printFrame{
    display:block!important;
    position:fixed!important;
    top:7mm!important;
    left:7mm!important;
    right:7mm!important;
    bottom:7mm!important;
    width:auto!important;
    height:auto!important;
    box-sizing:border-box!important;
    border:.32mm solid #667884!important;
    border-radius:2mm!important;
    z-index:9998!important;
    pointer-events:none!important;
  }

  /* Keep the credit aligned to the same frame geometry. */
  .printCreated{
    display:block!important;
    position:fixed!important;
    top:10mm!important;
    left:11mm!important;
    right:auto!important;
    margin:0!important;
    padding:0 0 0 3mm!important;
    border-left:.65mm solid #435d6d!important;
    z-index:9999!important;
  }
}
/* --- View-specific print orientation --- */
@media print{
  /* Always print one Protocol Forge view only. */
  .forgeView{display:none!important}
  .forgeView.active{display:block!important}

  /* Packet Format + Specification: A4 portrait */
  body.print-portrait{
    width:210mm!important;
    min-width:210mm!important;
    max-width:210mm!important;
  }
  body.print-portrait .forgeView.active{
    width:90%!important;
    max-width:90%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-top:25mm!important;
    padding-bottom:20mm!important;
    zoom:.72!important;
    transform-origin:top center!important;
  }

  /* State Machine + Simulation: A4 landscape */
  body.print-landscape{
    width:297mm!important;
    min-width:297mm!important;
    max-width:297mm!important;
  }
  body.print-landscape .forgeView.active{
    width:94%!important;
    max-width:94%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-top:18mm!important;
    padding-bottom:18mm!important;
    zoom:.84!important;
    transform-origin:top center!important;
  }

  body.print-landscape #smCanvas,
  body.print-landscape #simCanvas{
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    max-height:155mm!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  body.print-portrait .specSheet{
    width:96%!important;
    max-width:96%!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* Keep the existing frame and credit untouched. */
}

/* Joomla fullscreen integration */
.brandHomeLink{display:block;width:100%;text-decoration:none;color:inherit}
.brandHomeLink:focus-visible{outline:2px solid var(--cyan,#35d7ff);outline-offset:3px;border-radius:8px}
html,body{width:100%;min-height:100%}

/* --- Mobile portrait guard + release metadata --- */
.brandVersion{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:4px;
  color:#69879a;
  font-size:9px;
  line-height:1.2;
  letter-spacing:.035em;
  white-space:nowrap;
}
.brandVersion span+span:before,
.brandVersion a+span:before{
  content:"·";
  margin-right:7px;
  color:#466377;
}
.brandVersion a{
  color:#7ca9c2;
  text-decoration:none;
  font-weight:700;
}
.brandVersion a:hover{
  color:var(--cyan);
  text-decoration:underline;
}

.portraitBlocker{
  display:none;
  position:fixed;
  inset:0;
  z-index:100000;
  padding:22px;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 20% 0%,rgba(53,215,255,.13),transparent 24rem),
    radial-gradient(circle at 80% 5%,rgba(156,123,255,.13),transparent 26rem),
    linear-gradient(180deg,#071017,#09131d 48%,#071017);
}
.portraitBlocker:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.14;
  background-image:
    linear-gradient(rgba(92,160,198,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(92,160,198,.16) 1px,transparent 1px);
  background-size:26px 26px;
}
.portraitBlockerCard{
  position:relative;
  z-index:1;
  width:min(420px,100%);
  padding:24px 22px 22px;
  text-align:center;
  border:1px solid rgba(61,96,119,.62);
  border-radius:20px;
  background:linear-gradient(180deg,rgba(15,31,44,.96),rgba(8,20,30,.97));
  box-shadow:0 24px 80px rgba(0,0,0,.42);
}
.portraitHomeLink{
  display:block;
  width:min(300px,86%);
  margin:0 auto 20px;
  padding:8px 12px;
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(226,236,244,.92));
  border:1px solid rgba(255,255,255,.74);
  text-decoration:none;
}
.portraitLogo{
  display:block;
  width:100%;
  height:auto;
  max-height:45px;
  object-fit:contain;
}
.rotateDeviceIcon{
  position:relative;
  width:94px;
  height:74px;
  margin:2px auto 14px;
}
.rotatePhone{
  position:absolute;
  left:26px;
  top:12px;
  width:42px;
  height:68px;
  border:3px solid #dff6ff;
  border-radius:10px;
  transform:rotate(90deg);
  box-shadow:0 0 24px rgba(53,215,255,.13);
}
.rotatePhone:after{
  content:"";
  position:absolute;
  left:50%;
  bottom:5px;
  width:5px;
  height:5px;
  transform:translateX(-50%);
  border-radius:50%;
  background:#8fa7ba;
}
.rotateArrow{
  position:absolute;
  right:3px;
  top:-5px;
  color:var(--cyan);
  font-size:38px;
  line-height:1;
  font-weight:400;
}
.portraitEyebrow{
  margin-bottom:6px;
  color:var(--cyan);
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.portraitBlocker h1{
  margin:0 0 9px;
  color:#eef7ff;
  font-size:22px;
  line-height:1.15;
}
.portraitBlocker p{
  margin:0 auto;
  max-width:330px;
  color:#9eb4c5;
  font-size:13px;
  line-height:1.55;
}
.portraitVersion{
  margin-top:17px;
  color:#607f92;
  font-size:10px;
  letter-spacing:.04em;
}

@media screen and (max-width:900px) and (orientation:portrait){
  body{
    overflow:hidden!important;
  }
  .portraitBlocker{
    display:flex!important;
  }
  .forgeApplication{
    display:none!important;
  }
}

@media print{
  .portraitBlocker{
    display:none!important;
  }
  .forgeApplication{
    display:block!important;
  }
}

/* --- Mobile landscape refinement v2.0.6 --- */
@media screen and (orientation:landscape) and (max-width:980px){
  html,
  body,
  .forgeApplication,
  .forgeView,
  #packetView,
  #machineView,
  #simulationView,
  #specificationView{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  html,
  body{
    overflow-x:hidden!important;
    overscroll-behavior-x:none;
  }

  body{
    min-height:100dvh;
  }

  .forgeApplication{
    overflow-x:hidden!important;
  }

  /* Compact header: one row, no fixed 340/390 px brand width. */
  .topbar{
    position:relative!important;
    min-height:0!important;
    padding:
      6px
      max(8px,env(safe-area-inset-right))
      6px
      max(8px,env(safe-area-inset-left))!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:7px!important;
    overflow:hidden!important;
  }

  .brand{
    flex:0 0 auto!important;
    width:auto!important;
    max-width:24vw!important;
    min-width:0!important;
    gap:0!important;
  }

  .logoWrap{
    width:clamp(118px,21vw,170px)!important;
    min-width:0!important;
    max-width:none!important;
    padding:4px 7px!important;
    border-radius:9px!important;
  }

  .brandLogo{
    max-height:33px!important;
  }

  /* Metadata remains available in About; hiding it here saves scarce landscape height/width. */
  .brandMeta{
    display:none!important;
  }

  .toolbar{
    flex:1 1 auto!important;
    min-width:0!important;
    max-width:100%!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    justify-content:flex-end!important;
    gap:5px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    padding-bottom:1px;
  }

  .toolbar::-webkit-scrollbar,
  .forgeTabs::-webkit-scrollbar{
    display:none;
  }

  .topbar .toolbar button{
    flex:0 0 auto!important;
    min-height:34px!important;
    padding:6px 8px!important;
    border-radius:8px!important;
    font-size:11px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  /* Tabs are the only sticky chrome after the header scrolls away. */
  .forgeTabs{
    position:sticky!important;
    top:0!important;
    z-index:60!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:4px!important;
    padding:
      6px
      max(7px,env(safe-area-inset-right))
      6px
      max(7px,env(safe-area-inset-left))!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }

  .forgeTab{
    flex:1 1 0!important;
    min-width:88px!important;
    padding:7px 6px!important;
    font-size:11px!important;
    line-height:1.05!important;
    white-space:nowrap!important;
  }

  /* Packet Format: use landscape width instead of stacking into a very long phone page. */
  #packetView.forgeView.active{
    display:grid!important;
    grid-template-columns:minmax(205px,32vw) minmax(0,1fr)!important;
    gap:8px!important;
    padding:
      8px
      max(8px,env(safe-area-inset-right))
      10px
      max(8px,env(safe-area-inset-left))!important;
    align-items:start!important;
    overflow:visible!important;
  }

  #packetView .sidebar,
  #packetView .main{
    min-width:0!important;
    max-width:100%!important;
    width:auto!important;
  }

  #packetView .sidebar{
    order:0!important;
    gap:8px!important;
  }

  #packetView .main{
    order:1!important;
    gap:8px!important;
  }

  .card{
    max-width:100%!important;
  }

  .cardPad{
    padding:10px!important;
  }

  .cardTitle{
    margin-bottom:7px!important;
    font-size:11px!important;
  }

  label{
    margin:6px 0 3px!important;
    font-size:10px!important;
  }

  input,
  select,
  textarea{
    min-width:0!important;
    max-width:100%!important;
    padding:7px 8px!important;
  }

  /* Prevent iOS Safari from zooming the viewport when form controls receive focus. */
  input,
  select,
  textarea{
    font-size:16px!important;
  }

  button{
    touch-action:manipulation;
  }

  .form2{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
  }

  .form3{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
  }

  .customForm{
    grid-template-columns:minmax(0,1.3fr) minmax(58px,.65fr) minmax(68px,.75fr)!important;
    gap:5px!important;
  }

  .quickButtons{
    gap:5px!important;
  }

  .customList{
    max-height:300px!important;
  }

  .hero{
    padding:12px!important;
  }

  .heroTitle{
    font-size:20px!important;
  }

  .heroText{
    margin-top:4px!important;
    font-size:11px!important;
    line-height:1.4!important;
  }

  .summary{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
    margin-top:9px!important;
  }

  .metric{
    min-width:0!important;
    min-height:58px!important;
    padding:8px!important;
  }

  .metricValue{
    font-size:17px!important;
  }

  .diagramHead{
    padding:9px 10px!important;
  }

  .diagramScroll,
  .smCanvasWrap{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:auto!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }

  .diagramScroll{
    padding:8px!important;
  }

  /* Keep 32-bit geometry readable, but do not let it enlarge the page itself. */
  .diagram{
    width:max(780px,100%)!important;
    min-width:780px!important;
    max-width:none!important;
  }

  .byteRow{
    margin-bottom:9px!important;
  }

  .ruler{
    height:29px!important;
  }

  .bitGrid,
  .bit{
    min-height:60px!important;
  }

  .fieldSeg{
    height:60px!important;
  }

  .bitGrid{
    touch-action:pan-y;
  }

  .fieldSeg .fn{
    font-size:10px!important;
  }

  .legend{
    row-gap:4px!important;
  }

  .statusbar{
    padding:7px 9px!important;
    font-size:10px!important;
  }

  /* State Machine: keep controls beside the canvas in landscape. */
  .smLayout{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:minmax(205px,31vw) minmax(0,1fr)!important;
    gap:8px!important;
    padding:
      8px
      max(8px,env(safe-area-inset-right))
      10px
      max(8px,env(safe-area-inset-left))!important;
    align-items:start!important;
  }

  .smSidebar,
  .smMain{
    min-width:0!important;
    width:auto!important;
    max-width:100%!important;
  }

  .smSidebar,
  .smMain{
    gap:8px!important;
  }

  .smToolbar{
    padding:8px 9px!important;
    gap:5px!important;
  }

  .smToolbar button{
    padding:6px 8px!important;
    font-size:11px!important;
  }

  .smCanvasWrap{
    min-height:0!important;
    max-height:calc(100dvh - 118px)!important;
    padding:7px!important;
  }

  #smCanvas{
    width:840px!important;
    min-width:840px!important;
    height:490px!important;
    max-width:none!important;
  }

  #smCanvas .smStateNode{
    touch-action:none;
  }

  .smList{
    max-height:220px!important;
  }

  /* Simulation: use a compact input column beside the trace/canvas. */
  .simLayout{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:minmax(195px,30vw) minmax(0,1fr)!important;
    gap:8px!important;
    padding:
      8px
      max(8px,env(safe-area-inset-right))
      10px
      max(8px,env(safe-area-inset-left))!important;
    align-items:start!important;
  }

  .simLayout>.card{
    min-width:0!important;
    max-width:100%!important;
  }

  #simPacketValues{
    min-height:105px!important;
  }

  #simCanvas{
    display:block!important;
    width:840px!important;
    min-width:840px!important;
    height:490px!important;
    max-width:none!important;
  }

  .simTrace{
    max-height:230px!important;
  }

  .simCurrent{
    font-size:20px!important;
  }

  /* Specification must wrap text instead of widening the viewport. */
  .specWrap{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:
      8px
      max(8px,env(safe-area-inset-right))
      10px
      max(8px,env(safe-area-inset-left))!important;
    overflow:hidden!important;
  }

  .specWrap>.toolbar{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0 0 8px!important;
    justify-content:flex-start!important;
    overflow-x:auto!important;
  }

  .specSheet{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:13px!important;
    overflow:hidden!important;
  }

  .specSheet h1{
    font-size:21px!important;
  }

  .specSheet h2{
    margin:18px 0 7px!important;
    font-size:15px!important;
  }

  .specSheet table{
    width:100%!important;
    max-width:100%!important;
    table-layout:fixed!important;
  }

  .specSheet th,
  .specSheet td{
    min-width:0!important;
    padding:5px 6px!important;
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
  }

  .specCode{
    max-width:100%!important;
    white-space:pre-wrap!important;
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
  }

  /* Modals must fit short landscape screens without leaking beyond viewport. */
  .modal{
    padding:
      6px
      max(6px,env(safe-area-inset-right))
      6px
      max(6px,env(safe-area-inset-left))!important;
    align-items:stretch!important;
    overflow:hidden!important;
  }

  .modalBox,
  .helpModalBox{
    width:min(760px,100%)!important;
    max-width:100%!important;
    max-height:calc(100dvh - 12px)!important;
    margin:auto!important;
    padding:11px!important;
    overflow:auto!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }

  .modal h2,
  .helpModalHead h2{
    font-size:18px!important;
  }

  textarea.json{
    min-height:150px!important;
  }

  .smModalGrid,
  .bitEditorGrid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
  }

  .helpIntro,
  .helpSection{
    padding:9px 10px!important;
  }

  .helpContent{
    gap:8px!important;
  }

  .helpFlow{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:5px!important;
  }

  .toast{
    right:max(8px,env(safe-area-inset-right))!important;
    bottom:max(8px,env(safe-area-inset-bottom))!important;
    left:auto!important;
    max-width:min(380px,calc(100vw - 16px))!important;
  }

  .seoFooter{
    margin:0 8px 8px!important;
  }
}

/* Very narrow landscape phones: keep the same architecture but give work area priority. */
@media screen and (orientation:landscape) and (max-width:700px){
  #packetView.forgeView.active,
  .smLayout{
    grid-template-columns:minmax(190px,31vw) minmax(0,1fr)!important;
  }

  .simLayout{
    grid-template-columns:minmax(180px,29vw) minmax(0,1fr)!important;
  }

  .logoWrap{
    width:118px!important;
  }

  .topbar .toolbar button{
    padding-left:7px!important;
    padding-right:7px!important;
    font-size:10px!important;
  }

  .forgeTab{
    min-width:82px!important;
    font-size:10px!important;
  }

  .diagram{
    width:740px!important;
    min-width:740px!important;
  }

  #smCanvas,
  #simCanvas{
    width:780px!important;
    min-width:780px!important;
    height:455px!important;
  }
}

/* --- Zoxality Position Lock v2.0.7 --- */
.positionLockPanel{
  margin:9px 0 11px;
  padding:10px 12px;
  border:1px solid #31576c;
  border-radius:10px;
  background:linear-gradient(180deg,#0a1924,#08151e);
}
.positionLockPanel .checkrow{
  margin:0 0 5px;
}
.positionLockPanel .checkrow label{
  color:#dff6ff;
  font-weight:800;
}
.positionLockPanel.isLocked{
  border-color:#4b87a5;
  box-shadow:inset 3px 0 0 #35d7ff;
}
.positionLockPanel.standardLock{
  opacity:.72;
}
.positionLockTag{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 6px;
  border:1px solid #3d718b;
  border-radius:999px;
  color:#a9eaff;
  background:#081822;
  font-size:9px;
  font-weight:800;
  letter-spacing:.045em;
  text-transform:uppercase;
}
.fieldSeg.positionLocked{
  box-shadow:inset 0 0 0 1px rgba(53,215,255,.72),0 0 0 1px rgba(53,215,255,.12);
}
.fieldSeg.positionLocked .fn:after{
  content:" · LOCK";
  color:#e6fbff;
  font-size:8px;
  letter-spacing:.04em;
}
.layoutGapHint{
  color:#617f91;
  font-size:9px;
  letter-spacing:.03em;
}

/* --- Free-hole range validation v2.0.8 --- */
#createRangeInfo.rangeConflict{
  color:#ff9aad!important;
  border-color:rgba(255,111,137,.52)!important;
  background:rgba(97,19,37,.22)!important;
}

/* --- Collapsed payload visualization v2.0.9 --- */
.payloadFold{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 34px;
  align-items:stretch;
  gap:8px;
  margin:4px 0 13px;
  border:1px dashed #715d35;
  border-radius:12px;
  background:
    linear-gradient(180deg,rgba(53,43,20,.72),rgba(27,25,17,.82)),
    #111a20;
  overflow:hidden;
}
.payloadFoldRail{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#c89b45;
  font-size:25px;
  line-height:1;
  background:rgba(255,200,107,.06);
  border-right:1px solid rgba(255,200,107,.13);
}
.payloadFoldRail:last-child{
  border-right:none;
  border-left:1px solid rgba(255,200,107,.13);
}
.payloadFoldBody{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "title action"
    "meta action";
  gap:4px 10px;
  align-items:center;
  padding:10px 4px;
}
.payloadFoldTitle{
  grid-area:title;
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  color:#ffe2a9;
  font-weight:900;
  font-size:12px;
}
.payloadFoldBadge{
  display:inline-flex;
  padding:2px 6px;
  border:1px solid rgba(255,200,107,.38);
  border-radius:999px;
  color:#d7ae63;
  background:rgba(255,200,107,.07);
  font-size:8px;
  font-weight:850;
  letter-spacing:.07em;
}
.payloadFoldMeta{
  grid-area:meta;
  min-width:0;
  display:flex;
  gap:6px 11px;
  flex-wrap:wrap;
  color:#9b8c6e;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:9px;
}
.payloadFoldToggle{
  grid-area:action;
  align-self:center;
  white-space:nowrap;
  border-color:#84672f!important;
  color:#ffe2a9!important;
  background:#2c2416!important;
}
.payloadFoldToggle:hover{
  border-color:#c99b42!important;
  background:#3a2d18!important;
}
.payloadInlineCollapse{
  position:absolute;
  right:4px;
  bottom:4px;
  z-index:7;
  padding:2px 5px;
  border:1px solid rgba(75,53,15,.55);
  border-radius:6px;
  background:rgba(30,22,8,.76);
  color:#fff3d5;
  font-size:7px;
  line-height:1.1;
  cursor:pointer;
  text-shadow:none;
}
@media screen and (max-width:980px) and (orientation:landscape){
  .payloadFold{
    grid-template-columns:24px minmax(0,1fr) 24px;
    gap:5px;
  }
  .payloadFoldRail{
    font-size:20px;
  }
  .payloadFoldBody{
    padding:7px 3px;
    grid-template-columns:minmax(0,1fr) auto;
  }
  .payloadFoldTitle{
    font-size:10px;
  }
  .payloadFoldMeta{
    font-size:8px;
    gap:4px 7px;
  }
  .payloadFoldToggle{
    padding:5px 7px!important;
    font-size:9px!important;
  }
}
@media print{
  .payloadFold{
    break-inside:avoid!important;
    page-break-inside:avoid!important;
    border-color:#8b7a58!important;
    background:#fff!important;
  }
  .payloadFoldRail,
  .payloadFoldBody{
    background:#fff!important;
  }
  .payloadFoldTitle,
  .payloadFoldToggle{
    color:#332714!important;
  }
  .payloadFoldMeta{
    color:#6e6048!important;
  }
}

/* --- Absolute bit and byte reservations v2.0.10 --- */
.bitDefined{
  background:color-mix(in srgb,var(--bit-color,#55e0ab) 28%,#0c1923 72%);
}
.bitDefinitionOverlay{
  position:absolute;
  top:0;
  height:68px;
  z-index:8;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  border-left:1px solid rgba(255,255,255,.72);
  border-right:1px solid rgba(0,0,0,.38);
  background:color-mix(in srgb,var(--bit-color,#55e0ab) 82%,#fff 18%);
  color:#061016;
  font-size:7px;
  font-weight:950;
  line-height:1;
  text-align:center;
  text-shadow:0 1px 0 rgba(255,255,255,.38);
  overflow:hidden;
  cursor:pointer;
}
.bitDefinitionOverlay span{
  display:block;
  width:100%;
  padding:0 1px;
  overflow:hidden;
  text-overflow:clip;
  white-space:nowrap;
}
.bitDefinitionOverlay:hover{
  filter:brightness(1.14);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.9);
}
.byteDefinitionOverlay{
  position:absolute;
  left:0;
  bottom:0;
  height:15px;
  z-index:7;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  border:1px solid rgba(113,220,255,.72);
  border-bottom:none;
  background:rgba(6,30,42,.91);
  color:#bcefff;
  font-size:7px;
  font-weight:850;
  letter-spacing:.02em;
  overflow:hidden;
  cursor:pointer;
}
.byteDefinitionOverlay span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:0 3px;
}
.byteDefinitionOverlay:hover{
  background:#0b4054;
}
@media screen and (orientation:landscape) and (max-width:980px){
  .bitDefinitionOverlay{
    height:60px;
    font-size:6px;
  }
  .byteDefinitionOverlay{
    height:13px;
    font-size:6px;
  }
}
@media print{
  .bitDefinitionOverlay,
  .byteDefinitionOverlay{
    -webkit-print-color-adjust:exact!important;
    print-color-adjust:exact!important;
  }
}

/* --- Long-press INSERT v2.0.13 --- */
.insertModalBox{width:min(680px,100%)}
.insertLocation{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid #34566b;border-radius:11px;background:#0a1822;margin-bottom:10px}
.insertLocation strong{font-size:16px}
.insertGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:10px}
.insertImpact{margin-top:10px;padding:10px 12px;border:1px solid #315269;border-radius:10px;background:#08151e;color:#9db5c5;font-size:11px;line-height:1.5;white-space:pre-line}
.insertImpact.warning{border-color:#7b6030;background:#211a0d;color:#f2d29a}
.insertImpact.blocked{border-color:#75404b;background:#241116;color:#ffbdc8}
@media(max-width:560px){.insertGrid{grid-template-columns:1fr}#insertNameWrap{grid-column:auto!important}}


/* --- Ctrl multiselect bulk delete v2.0.14 --- */
.fieldSeg.multiSelected{
  outline:3px solid #ffdb70!important;
  outline-offset:-4px!important;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.76),
    0 0 0 2px rgba(255,219,112,.42)!important;
  filter:brightness(1.08);
  z-index:10!important;
}
.fieldSeg.multiSelected::after{
  content:"✓";
  position:absolute;
  top:3px;
  right:4px;
  display:grid;
  place-items:center;
  min-width:15px;
  height:15px;
  padding:0 2px;
  border-radius:999px;
  background:#1b1a10;
  border:1px solid #ffdb70;
  color:#ffebad;
  font-size:9px;
  font-weight:950;
  text-shadow:none;
}
.customItem.multiSelectedCustom{
  border-color:#d5aa44!important;
  box-shadow:
    inset 3px 0 0 #ffcf62,
    0 0 0 1px rgba(255,207,98,.26)!important;
  background:rgba(87,66,17,.22)!important;
}