/* Compact IDE controls: borderless problem navigation plus a NeetCode-style draggable console header. */

/* Match the reference header: section selector is plain inline content, not a button block. */
body.hdlforge-ide-active .ide-page .ide-topbar-problems{
  height:38px!important;
  min-height:38px!important;
  padding:0 6px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
body.hdlforge-ide-active .ide-page .ide-topbar-problems:hover,
body.hdlforge-ide-active .ide-page .ide-topbar-problems.active{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#eef4fb!important;
}

body.hdlforge-ide-active .ide-page .ide-problem-navigation{
  height:38px!important;
  padding:0!important;
  gap:12px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

body.hdlforge-ide-active .ide-page .ide-problem-navigation button:first-child,
body.hdlforge-ide-active .ide-page .ide-problem-navigation button:last-child{
  width:38px!important;
  min-width:38px!important;
  height:38px!important;
  min-height:38px!important;
  box-sizing:border-box!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#9aa8ba!important;
  font-size:0!important;
  line-height:0!important;
}

body.hdlforge-ide-active .ide-page .ide-problem-navigation button:first-child::after,
body.hdlforge-ide-active .ide-page .ide-problem-navigation button:last-child::after{
  display:block!important;
  width:38px!important;
  height:38px!important;
  line-height:36px!important;
  text-align:center!important;
  font-size:25px!important;
  font-weight:700!important;
  font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
}

body.hdlforge-ide-active .ide-page .ide-problem-navigation button:first-child:hover:not(:disabled),
body.hdlforge-ide-active .ide-page .ide-problem-navigation button:last-child:hover:not(:disabled){
  background:transparent!important;
  color:#eef4fb!important;
}

body.hdlforge-ide-active .ide-page .ide-problem-navigation button:disabled{
  background:transparent!important;
  opacity:.32!important;
}

/* Keep pass/fail feedback in the console. The React run button remains mounted for logic only. */
body.hdlforge-ide-active .ide-page .ide-actions .solve-status,
body.hdlforge-ide-active .ide-page .ide-actions .primary{
  display:none!important;
}
body.hdlforge-ide-active .ide-page .ide-actions{
  width:0!important;
  height:0!important;
  margin-left:auto!important;
}

/* Console-bound play control positioned by console-panel-resize.js. */
.ide-console-run-proxy{
  position:fixed;
  z-index:90;
  width:30px;
  min-width:30px;
  height:30px;
  min-height:30px;
  box-sizing:border-box;
  padding:0;
  display:grid;
  place-items:center;
  border:0;
  border-radius:6px;
  background:transparent;
  box-shadow:none;
  cursor:pointer;
}
.ide-console-run-proxy::after{
  content:"";
  width:0;
  height:0;
  margin-left:3px;
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
  border-left:16px solid #22c55e;
  filter:drop-shadow(0 2px 5px rgba(34,197,94,.28));
  transition:transform .14s ease,filter .14s ease;
}
.ide-console-run-proxy:hover:not(:disabled){background:rgba(34,197,94,.08)}
.ide-console-run-proxy:hover:not(:disabled)::after{
  transform:scale(1.07);
  filter:drop-shadow(0 3px 6px rgba(34,197,94,.36));
}
.ide-console-run-proxy:disabled{opacity:.45;cursor:wait}

/* The top edge of the console is draggable. */
body.hdlforge-ide-active .ide-page .ide-bottom::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:9px;
  z-index:10;
  cursor:row-resize;
}
body.ide-console-resizing,
body.ide-console-resizing *{
  cursor:row-resize!important;
  user-select:none!important;
}

/* NeetCode-like console header: collapse chevron first, then Console. */
body.hdlforge-ide-active .ide-page .bottom-tabs>button{order:3}
body.hdlforge-ide-active .ide-page .bottom-tabs>button:first-child{
  order:2;
  gap:0!important;
}
body.hdlforge-ide-active .ide-page .bottom-tabs>button:first-child>svg{
  display:none!important;
}
body.hdlforge-ide-active .ide-page .bottom-tabs .bottom-collapse{
  order:1;
  width:26px!important;
  min-width:26px!important;
  height:28px!important;
  margin:0 2px 0 0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  gap:0!important;
  border:0!important;
  border-radius:5px!important;
  background:transparent!important;
  color:#8c9bad!important;
  font-size:0!important;
  box-shadow:none!important;
}
body.hdlforge-ide-active .ide-page .bottom-tabs .bottom-collapse:hover{
  background:rgba(148,163,184,.08)!important;
  color:#eef4fb!important;
}
body.hdlforge-ide-active .ide-page .bottom-tabs .bottom-collapse svg{
  display:block!important;
  width:15px!important;
  height:15px!important;
}

/* Reclaim unused header height so the Problem and Editor cards start higher. */
body.hdlforge-ide-active .ide-page{
  padding-top:4px!important;
}
body.hdlforge-ide-active .ide-page .ide-topbar{
  height:42px!important;
  min-height:42px!important;
  flex-basis:42px!important;
  margin-bottom:2px!important;
  padding-top:0!important;
  padding-bottom:0!important;
}

/* Larger, NeetCode-like interface typography. */
body.hdlforge-ide-active .ide-page .problem-tabs button{
  font-size:12px!important;
  font-weight:750!important;
}
body.hdlforge-ide-active .ide-page .problem-section h2,
body.hdlforge-ide-active .ide-page .content-card h2{
  font-size:12px!important;
}
body.hdlforge-ide-active .ide-page .problem-section p,
body.hdlforge-ide-active .ide-page .content-card p,
body.hdlforge-ide-active .ide-page .problem-section ul{
  font-size:14.5px!important;
  line-height:1.7!important;
}
body.hdlforge-ide-active .ide-page .examples span{
  font-size:10px!important;
}
body.hdlforge-ide-active .ide-page .examples pre,
body.hdlforge-ide-active .ide-page .solution-code{
  font-size:12.5px!important;
}
body.hdlforge-ide-active .ide-page .file-tab{
  font-size:12.5px!important;
}
body.hdlforge-ide-active .ide-page .editor-language select{
  font-size:11.5px!important;
}
body.hdlforge-ide-active .ide-page .editor-toolbar{
  font-size:10.5px!important;
}
body.hdlforge-ide-active .ide-page .bottom-tabs button{
  font-size:12.5px!important;
  font-weight:750!important;
}
body.hdlforge-ide-active .ide-page .console,
body.hdlforge-ide-active .ide-page .testbench-info,
body.hdlforge-ide-active .ide-page .console-empty{
  font-size:12.5px!important;
}

@media(max-width:720px){
  .ide-console-run-proxy{
    width:28px;
    min-width:28px;
    height:28px;
    min-height:28px;
  }
  .ide-console-run-proxy::after{
    border-top-width:8px;
    border-bottom-width:8px;
    border-left-width:14px;
  }
  body.hdlforge-ide-active .ide-page .ide-topbar{
    height:46px!important;
    min-height:46px!important;
    flex-basis:46px!important;
    margin-bottom:2px!important;
  }
}

/* Final approved mockup alignment. */
body.hdlforge-ide-active .ide-page .ide-brand strong{
  font-size:20px!important;
}
body.hdlforge-ide-active .ide-page .ide-topbar-problems{
  gap:10px!important;
  padding-left:5px!important;
  padding-right:5px!important;
}
body.hdlforge-ide-active .ide-page .ide-topbar-problems-label{
  font-size:17px!important;
  font-weight:800!important;
  letter-spacing:-.015em!important;
}
body.hdlforge-ide-active .ide-page .ide-topbar-problems-count{
  font-size:11px!important;
}
body.hdlforge-ide-active .ide-page .ide-topbar-problems-icon{
  width:17px!important;
  height:14px!important;
  flex:0 0 17px!important;
  display:block!important;
  font-size:0!important;
  color:transparent!important;
  background:
    linear-gradient(#54d6ff,#54d6ff) 0 0/17px 2px no-repeat,
    linear-gradient(#54d6ff,#54d6ff) 0 6px/17px 2px no-repeat,
    linear-gradient(#54d6ff,#54d6ff) 0 12px/17px 2px no-repeat!important;
}

/* Surface the real account control in the otherwise hidden IDE nav. */
body.hdlforge-ide-active>.app>.nav{
  display:block!important;
  position:fixed!important;
  inset:0 0 auto 0!important;
  width:100%!important;
  height:0!important;
  min-height:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  pointer-events:none!important;
  z-index:150!important;
}
body.hdlforge-ide-active>.app>.nav>.nav-inner{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  height:0!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
}
body.hdlforge-ide-active>.app>.nav>.nav-inner>*:not(.profile){
  display:none!important;
}
body.hdlforge-ide-active>.app>.nav .profile{
  position:fixed!important;
  top:8px!important;
  right:16px!important;
  z-index:151!important;
  height:32px!important;
  min-height:32px!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  margin:0!important;
  padding:0 4px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#9aa7b7!important;
  font-size:13px!important;
  font-weight:700!important;
  pointer-events:auto!important;
}
body.hdlforge-ide-active>.app>.nav .profile:hover{
  background:transparent!important;
  color:#eef4fb!important;
}

/* Active controls use a simple underline rather than a filled button block. */
body.hdlforge-ide-active .ide-page .problem-tabs button{
  font-size:14px!important;
  font-weight:780!important;
}
body.hdlforge-ide-active .ide-page .problem-tabs button:hover{
  background:transparent!important;
  color:#d9e2ec!important;
}
body.hdlforge-ide-active .ide-page .problem-tabs button.active{
  color:#fff!important;
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:inset 0 -2px 0 #31977f!important;
}
body.hdlforge-ide-active .ide-page .bottom-tabs button.active{
  background:transparent!important;
  border-bottom-color:#31977f!important;
}

/* Match the larger statement typography from the approved mockup. */
body.hdlforge-ide-active .ide-page .problem-heading h1{
  font-size:27px!important;
  line-height:1.15!important;
  font-weight:850!important;
  letter-spacing:-.03em!important;
}
body.hdlforge-ide-active .ide-page .problem-category{
  margin-top:14px!important;
  font-size:13px!important;
  letter-spacing:.04em!important;
}
body.hdlforge-ide-active .ide-page .problem-section h2,
body.hdlforge-ide-active .ide-page .content-card h2{
  font-size:14px!important;
  font-weight:850!important;
}
body.hdlforge-ide-active .ide-page .problem-section p,
body.hdlforge-ide-active .ide-page .content-card p{
  font-size:17px!important;
  line-height:1.62!important;
}
body.hdlforge-ide-active .ide-page .problem-section ul{
  font-size:16px!important;
  line-height:1.7!important;
}
body.hdlforge-ide-active .ide-page .examples span{
  font-size:13px!important;
}
body.hdlforge-ide-active .ide-page .examples pre,
body.hdlforge-ide-active .ide-page .solution-code{
  font-size:14px!important;
}

/* Replace solution.sv with a functional, borderless language selector integrated into the file bar. */
body.hdlforge-ide-active .ide-page .file-tabs:has(.editor-language) .file-tab{
  display:none!important;
}
body.hdlforge-ide-active .ide-page .file-tabs:has(.editor-language){
  align-items:center!important;
}
body.hdlforge-ide-active .ide-page .file-tabs:has(.editor-language) .editor-language{
  position:relative!important;
  order:1!important;
  height:100%!important;
  display:flex!important;
  align-items:center!important;
  margin-left:0!important;
  padding:0 0 0 18px!important;
  box-shadow:inset 0 -2px 0 #31977f!important;
}
body.hdlforge-ide-active .ide-page .file-tabs:has(.editor-language) .editor-language::before{
  content:"</>";
  margin-right:9px;
  color:#67d5ff;
  font:700 14px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:-.08em;
}
body.hdlforge-ide-active .ide-page .file-tabs:has(.editor-language) .editor-language::after{
  content:"⌄";
  position:absolute;
  right:4px;
  top:50%;
  transform:translateY(-53%);
  color:#7f8b9a;
  font-size:15px;
  line-height:1;
  pointer-events:none;
}
body.hdlforge-ide-active .ide-page .file-tabs:has(.editor-language) .editor-language select{
  appearance:none!important;
  -webkit-appearance:none!important;
  height:100%!important;
  min-height:100%!important;
  padding:0 25px 0 0!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#eef4fb!important;
  font-size:15px!important;
  font-weight:750!important;
  cursor:pointer!important;
}
body.hdlforge-ide-active .ide-page .file-tabs:has(.editor-language) .icon-btn{
  order:2!important;
  margin-left:auto!important;
  margin-right:10px!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
body.hdlforge-ide-active .ide-page .file-tabs:has(.editor-language) .icon-btn:hover{
  background:rgba(255,255,255,.035)!important;
  color:#eef4fb!important;
}
body.hdlforge-ide-active .ide-page .file-tab.active{
  background:transparent!important;
  border-right:0!important;
  box-shadow:inset 0 -2px 0 #31977f!important;
}
body.hdlforge-ide-active .ide-page .editor-toolbar{
  font-size:12px!important;
}
body.hdlforge-ide-active .ide-page .bottom-tabs button,
body.hdlforge-ide-active .ide-page .console,
body.hdlforge-ide-active .ide-page .testbench-info,
body.hdlforge-ide-active .ide-page .console-empty{
  font-size:14px!important;
}

/* Round the play glyph itself and mute it; keep the button container invisible. */
.ide-console-run-proxy{
  width:34px!important;
  min-width:34px!important;
  height:34px!important;
  min-height:34px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.ide-console-run-proxy::after{
  content:""!important;
  width:25px!important;
  height:25px!important;
  margin-left:2px!important;
  border:0!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M18 12 Q18 8 22 10 L50 28 Q55 32 50 36 L22 54 Q18 56 18 52 Z' fill='%235f9d72'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:contain!important;
  filter:drop-shadow(0 1px 3px rgba(70,125,86,.16))!important;
  opacity:.9!important;
  transition:transform .14s ease,filter .14s ease,opacity .14s ease!important;
}
.ide-console-run-proxy:hover:not(:disabled){
  background:transparent!important;
}
.ide-console-run-proxy:hover:not(:disabled)::after{
  transform:scale(1.06)!important;
  filter:drop-shadow(0 2px 4px rgba(70,125,86,.24))!important;
  opacity:1!important;
}

@media(max-width:720px){
  body.hdlforge-ide-active>.app>.nav .profile{
    top:10px!important;
    right:10px!important;
    width:32px!important;
    padding:0!important;
    justify-content:center!important;
  }
  body.hdlforge-ide-active>.app>.nav .profile span{
    display:none!important;
  }
}