:root{
  --coderio-shell-sidebar-width:264px;
  --coderio-shell-sidebar-bg:#0b1220;
  --coderio-shell-sidebar-text:#c8d4e3;
  --coderio-shell-sidebar-muted:#7f90a5;
  --coderio-shell-border:rgba(255,255,255,.08);
}
.coderio-bs-shell{
  min-height:100vh;
}
.coderio-bs-sidebar{
  background:var(--coderio-shell-sidebar-bg);
  color:var(--coderio-shell-sidebar-text);
  border-right:1px solid var(--coderio-shell-border);
}
.coderio-bs-brand{
  color:#fff;
  text-decoration:none;
}
.coderio-bs-brand:hover{
  color:#fff;
}
.coderio-bs-brand small{
  color:var(--coderio-shell-sidebar-muted);
}
.coderio-bs-nav a{
  color:var(--coderio-shell-sidebar-text);
  text-decoration:none;
}
.coderio-bs-sidebar-footer{
  border-top-color:var(--coderio-shell-border);
}
.coderio-bs-topbar{
  background:color-mix(in srgb,var(--bs-body-bg) 94%,transparent);
  border-bottom:1px solid var(--bs-border-color);
  backdrop-filter:blur(12px);
}
.coderio-bs-content{
  min-width:0;
}

/* Compact desktop sidebar rail */
:root{
  --coderio-shell-sidebar-collapsed-width:64px;
}
.coderio-bs-shell{
  transition:grid-template-columns .18s ease;
}
.coderio-bs-sidebar{
  transition:padding .18s ease;
}
.coderio-sidebar-toggle{
  position:absolute;
  top:23px;
  right:-15px;
  z-index:35;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:#162033;
  color:#fff;
  box-shadow:0 .3rem .9rem rgba(0,0,0,.2);
  cursor:pointer;
  font:800 1.25rem/1 var(--bs-font-sans-serif,system-ui,sans-serif);
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.coderio-sidebar-toggle:hover,
.coderio-sidebar-toggle:focus-visible{
  background:#24324b;
  border-color:rgba(255,255,255,.3);
  outline:none;
}
.coderio-sidebar-toggle:focus-visible{
  box-shadow:0 0 0 3px rgba(99,115,255,.35);
}
@media(min-width:921px){
.coderio-bs-shell.coderio-sidebar-collapsed{
  grid-template-columns:var(--coderio-shell-sidebar-collapsed-width) minmax(0,1fr)!important;
}
.coderio-sidebar-collapsed .coderio-bs-sidebar{
  padding-left:8px!important;
  padding-right:8px!important;
}
.coderio-sidebar-collapsed .coderio-bs-brand{
  justify-content:center;
  gap:0!important;
  padding-left:0!important;
  padding-right:0!important;
}
.coderio-sidebar-collapsed .coderio-bs-brand>span:not(:first-child){
  display:none!important;
}
.coderio-sidebar-collapsed .coderio-bs-sidebar [class*="nav-label"]{
  display:none!important;
}
.coderio-sidebar-collapsed .coderio-bs-nav a{
  justify-content:center!important;
  gap:0!important;
  padding-left:4px!important;
  padding-right:4px!important;
  font-size:0!important;
}
.coderio-sidebar-collapsed .coderio-bs-nav a>span:first-child{
  flex:0 0 auto;
  margin:0!important;
  font-size:.68rem!important;
}
.coderio-sidebar-collapsed .coderio-bs-sidebar-footer{
  padding-top:12px!important;
}
.coderio-sidebar-collapsed .coderio-bs-sidebar-footer>:not(form){
  display:none!important;
}
.coderio-sidebar-collapsed .coderio-bs-sidebar-footer form{
  margin:0!important;
}
.coderio-sidebar-collapsed .coderio-bs-sidebar-footer .btn{
  width:100%!important;
  min-width:0!important;
  padding-left:4px!important;
  padding-right:4px!important;
  font-size:0!important;
}
.coderio-sidebar-collapsed .coderio-bs-sidebar-footer .btn::before{
  content:"↪";
  font-size:1.05rem;
  line-height:1;
}
.coderio-sidebar-collapsed .coderio-sidebar-toggle{
  transform:rotate(180deg);
}
}

.coderio-bs-migration-note{
  margin:0 0 18px;
  border-left:4px solid var(--bs-primary);
}
@media(max-width:920px){
  .coderio-sidebar-toggle{
    display:none!important;
  }
  .coderio-bs-shell{
    grid-template-columns:1fr!important;
  }
  .coderio-bs-sidebar{
    position:static!important;
    height:auto!important;
  }
  .coderio-bs-sidebar-footer{
    margin-top:14px;
  }
}
@media(max-width:680px){
  .coderio-bs-topbar{
    align-items:flex-start;
    padding:10px 12px;
  }
}

/* BS15 — keyboard and screen-reader accessibility hardening */
.coderio-bs-skip-link{
  position:fixed;
  top:10px;
  left:10px;
  z-index:1100;
  transform:translateY(-180%);
  padding:.55rem .8rem;
  border:2px solid var(--bs-primary);
  border-radius:.5rem;
  background:var(--bs-body-bg);
  color:var(--bs-body-color);
  font-weight:700;
  text-decoration:none;
  box-shadow:0 .35rem 1rem rgba(0,0,0,.2);
}
.coderio-bs-skip-link:focus,
.coderio-bs-skip-link:focus-visible{
  transform:none;
  outline:3px solid rgba(var(--bs-primary-rgb),.35);
  outline-offset:2px;
}
.coderio-bs-content{
  scroll-margin-top:1rem;
}

/* 2026-09-25 — unified fluid panel geometry.
   The application shell owns viewport width; feature modules may size
   their own cards/forms, but must not cap the whole page. */
:root{
  --coderio-shell-content-x:clamp(18px,2vw,32px);
}
.coderio-bs-content{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
}
.coderio-bs-content>.bs3-content,
.coderio-bs-content>.bs4-content,
.coderio-bs-content>.bs5-content,
.coderio-bs-content>.bs6-content{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:24px var(--coderio-shell-content-x) 50px!important;
}
.coderio-bs-content>footer{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0 var(--coderio-shell-content-x) 30px!important;
}
@media(max-width:680px){
  :root{--coderio-shell-content-x:12px}
}