/* V170 – final code/spoiler presentation.
   Code blocks are tuned closer to the provided reference screenshot. */
body.spectrahubForum .shBbCodeBox,
body.spectrahubAdmin .shBbCodeBox,
.shBbCodeBox{
  display:block!important;box-sizing:border-box!important;width:100%!important;max-width:100%!important;min-width:0!important;
  margin:14px 0!important;border:1px solid #57616a!important;border-left:2px solid #56d4c7!important;
  border-radius:2px!important;background:#3b3f45!important;overflow:hidden!important;box-shadow:none!important;
}
body.spectrahubForum .shBbCodeBox .shBbCodeHead,
body.spectrahubAdmin .shBbCodeBox .shBbCodeHead,
.shBbCodeBox .shBbCodeHead{
  position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;
  min-height:34px!important;margin:0!important;padding:6px 14px!important;box-sizing:border-box!important;
  border:0!important;border-bottom:1px solid #515861!important;background:#40454b!important;
  color:#5edccf!important;font:600 12.5px/1.4 inherit!important;letter-spacing:0!important;text-transform:none!important;
}
.shBbCodeBox .shBbCodeHead span{
  display:block!important;min-width:0!important;color:#5edccf!important;font:600 12.5px/1.4 inherit!important;
  letter-spacing:0!important;text-transform:none!important;text-align:center!important;
}
.shBbCodeBox .shBbCodeCopy{display:none!important}
.shBbCodeBox pre.bbcode-code{
  display:block!important;box-sizing:border-box!important;width:100%!important;max-width:100%!important;min-width:0!important;
  margin:0!important;padding:12px 14px!important;border:0!important;border-radius:0!important;background:#3b3f45!important;
  color:#f5f7fa!important;font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace!important;
  white-space:pre!important;overflow-x:auto!important;overflow-y:auto!important;overflow-wrap:normal!important;tab-size:4!important;
}
.shBbCodeBox pre.bbcode-code code{
  display:block!important;font:inherit!important;color:inherit!important;background:transparent!important;border:0!important;padding:0!important;white-space:inherit!important;
}

/* Source mode follows the same compact code card look. */
body:is(.spectrahubForum,.spectrahubAdmin) .shXfEditorShell.shXfSourceMode>.shXfSourceHeader{
  min-height:34px!important;padding:7px 14px!important;background:#40454b!important;color:#5edccf!important;
  border:1px solid #57616a!important;border-bottom:0!important;border-left:2px solid #56d4c7!important;
  border-radius:2px 2px 0 0!important;font-size:12.5px!important;font-weight:600!important;text-align:center!important;
}
body:is(.spectrahubForum,.spectrahubAdmin) .shXfEditorShell.shXfSourceMode>.shXfBbcodeArea{
  background:#3b3f45!important;color:#f5f7fa!important;border:1px solid #57616a!important;border-left:2px solid #56d4c7!important;
  border-radius:0 0 2px 2px!important;font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace!important;
}

/* Clean spoiler panel that can safely contain code blocks, quotes and other blocks. */
body.spectrahubForum .shBbSpoiler,
body.spectrahubAdmin .shBbSpoiler,
.shBbSpoiler{
  display:block!important;box-sizing:border-box!important;position:relative!important;width:100%!important;min-width:0!important;
  margin:14px 0!important;padding:0!important;border:1px solid #56616b!important;border-radius:10px!important;
  background:#2f353c!important;overflow:hidden!important;box-shadow:none!important;
}
body.spectrahubForum .shBbSpoiler>.shBbSpoilerButton,
body.spectrahubAdmin .shBbSpoiler>.shBbSpoilerButton,
.shBbSpoiler>.shBbSpoilerButton{
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;box-sizing:border-box!important;
  width:100%!important;min-height:42px!important;margin:0!important;padding:11px 14px!important;
  border:0!important;border-bottom:1px solid #4c5660!important;border-radius:0!important;background:#394048!important;
  color:#eaf2f8!important;font-family:inherit!important;font-size:14px!important;font-weight:800!important;line-height:1.35!important;
  text-shadow:none!important;list-style:none!important;cursor:pointer!important;user-select:none!important;overflow-wrap:anywhere!important;
  box-shadow:none!important;
}
.shBbSpoiler>.shBbSpoilerButton::-webkit-details-marker{display:none!important}
.shBbSpoiler>.shBbSpoilerButton::marker{content:''}
.shBbSpoiler>.shBbSpoilerButton:hover{background:#404851!important}
.shBbSpoiler>.shBbSpoilerButton:focus-visible{outline:2px solid #9bd0ff!important;outline-offset:-2px!important}
.shBbSpoilerChevron{display:inline-block!important;flex:none!important;font:900 14px/1 sans-serif!important;color:#74c9f6!important;transition:transform .15s ease!important}
.shBbSpoiler[open]>.shBbSpoilerButton .shBbSpoilerChevron{transform:rotate(180deg)!important}
.shBbSpoiler>.shBbSpoilerContent{
  display:block!important;box-sizing:border-box!important;max-width:100%!important;min-width:0!important;
  margin:0!important;padding:14px!important;border:0!important;background:#2f353c!important;
  color:inherit!important;font-size:inherit!important;font-family:inherit!important;line-height:1.7!important;overflow-wrap:anywhere!important;
}
.shBbSpoiler:not([open])>.shBbSpoilerContent{display:none!important}
.shBbSpoiler>.shBbSpoilerContent>:first-child{margin-top:0!important}
.shBbSpoiler>.shBbSpoilerContent>:last-child{margin-bottom:0!important}
/* Inside spoiler the outer frame belongs to the spoiler itself, so the nested code box
   must not draw a second full rectangle. Keep only the code look, not the extra box. */
.shBbSpoiler>.shBbSpoilerContent .shBbCodeBox{
  margin:0!important;border:0!important;border-left:2px solid #56d4c7!important;border-radius:0!important;
  background:#3b3f45!important;box-shadow:none!important;
}
.shBbSpoiler>.shBbSpoilerContent .shBbCodeBox .shBbCodeHead{
  border-top:0!important;border-right:0!important;border-left:0!important;border-bottom:1px solid #515861!important;
}
.shBbSpoiler>.shBbSpoilerContent .shBbCodeBox pre.bbcode-code{
  border:0!important;border-radius:0!important;
}
.shBbSpoiler>.shBbSpoilerContent>:not(:first-child){margin-top:12px!important}

/* In-editor spoiler preview matches the rendered look and can contain code blocks. */
body:is(.spectrahubForum,.spectrahubAdmin) .shXfEditorShell :is(.fr-element,.shXfVisualHost) details.shEditorSpoiler{
  display:block!important;box-sizing:border-box!important;margin:12px 0!important;border:1px solid #56616b!important;
  border-radius:10px!important;background:#2f353c!important;overflow:hidden!important;
}
body:is(.spectrahubForum,.spectrahubAdmin) .shXfEditorShell :is(.fr-element,.shXfVisualHost) details.shEditorSpoiler>summary{
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;
  width:100%!important;padding:11px 14px!important;border:0!important;border-bottom:1px solid #4c5660!important;border-radius:0!important;
  background:#394048!important;color:#eaf2f8!important;font-family:inherit!important;font-size:14px!important;font-weight:800!important;line-height:1.35!important;
  cursor:pointer!important;list-style:none!important;
}
body:is(.spectrahubForum,.spectrahubAdmin) .shXfEditorShell :is(.fr-element,.shXfVisualHost) details.shEditorSpoiler>summary::-webkit-details-marker{display:none!important}
body:is(.spectrahubForum,.spectrahubAdmin) .shXfEditorShell :is(.fr-element,.shXfVisualHost) details.shEditorSpoiler>.shEditorSpoilerBody{
  min-height:32px!important;margin:0!important;padding:14px!important;border:0!important;background:#2f353c!important;
  color:inherit!important;overflow-wrap:anywhere!important;
}
body:is(.spectrahubForum,.spectrahubAdmin) .shXfEditorShell :is(.fr-element,.shXfVisualHost) details.shEditorSpoiler:not([open])>.shEditorSpoilerBody{display:none!important}
body:is(.spectrahubForum,.spectrahubAdmin) .shXfEditorShell :is(.fr-element,.shXfVisualHost) pre.shBbCodeBlock{
  display:block!important;box-sizing:border-box!important;width:100%!important;max-width:100%!important;margin:0!important;padding:12px 14px!important;
  border:1px solid #57616a!important;border-left:2px solid #56d4c7!important;border-radius:2px!important;background:#3b3f45!important;color:#f5f7fa!important;
  font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace!important;white-space:pre!important;overflow:auto!important;
}
/* Same rule for the visual editor: spoiler already frames the content, so the nested code
   preview must not render a second full outline. */
body:is(.spectrahubForum,.spectrahubAdmin) .shXfEditorShell :is(.fr-element,.shXfVisualHost) details.shEditorSpoiler .shBbCodeBlock{
  border:0!important;border-left:2px solid #56d4c7!important;border-radius:0!important;box-shadow:none!important;
}
body:is(.spectrahubForum,.spectrahubAdmin) .shXfEditorShell :is(.fr-element,.shXfVisualHost) pre.shBbCodeBlock code{
  display:block!important;background:transparent!important;color:inherit!important;font:inherit!important;padding:0!important;
}

/* Admin ban cards can contain the same compact editor without blowing up the card. */
body.spectrahubAdmin .shAdminBanReasonField .shXfEditorShell{width:100%!important;max-width:100%!important;margin-top:7px!important}
body.spectrahubAdmin .shAdminBanReasonField .shXfVisualHost,
body.spectrahubAdmin .shAdminBanReasonField .shXfBbcodeArea{min-height:118px!important}
body.spectrahubAdmin .shAdminBanReasonField>span{display:block!important}

@media(max-width:600px){
  .shBbCodeBox pre.bbcode-code{padding:11px 12px!important;font-size:12.5px!important}
  .shBbSpoiler>.shBbSpoilerButton{padding:10px 12px!important}
  .shBbSpoiler>.shBbSpoilerContent{padding:12px!important}
}