:root{
  --sidebar-w: 260px;
}
html,body{height:100%;}
body{background:#f8f9fc;}
#app{
  min-height:100%;
  display:flex;
}
#sidebar{
  width:var(--sidebar-w);
  background:#111827;
  color:#fff;
}
#sidebar a{color:#e9efff; text-decoration:none;}
#sidebar a:hover{color:#fff; text-decoration:none;}
.sidebar-heading{
  font-size:.75rem;
  text-transform:uppercase;
  opacity:.9;
  padding: .75rem 1rem;
  letter-spacing:.08em;
}
.nav-section a{
  display:block;
  padding:.55rem 1rem;
  border-left:3px solid transparent;
}
.nav-section a.active{
  background:rgba(255,255,255,.12);
  border-left-color:#fff;
  color:#fff;
}
#content{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
}
.topbar{
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.card{
  border:0;
  box-shadow:0 0.15rem 1.75rem 0 rgba(58,59,69,.15);
  border-radius: .75rem;
}
.badge-soft{
  background: rgba(17,24,39,.08);
  color:#111827;
}
.progress{height:.6rem; border-radius:999px;}
.progress-bar{border-radius:999px;}
.kbd{
  padding:.12rem .35rem;
  border-radius:.35rem;
  border:1px solid rgba(0,0,0,.2);
  background:#fff;
  font-size:.85em;
}
.reader-wrap{
  background:#fff;
  border-radius:.75rem;
  box-shadow:0 0.15rem 1.75rem 0 rgba(58,59,69,.15);
  overflow:hidden;
}
.reader-toolbar{
  display:flex;
  gap:.5rem;
  align-items:center;
  padding:.75rem;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.reader-canvas-wrap{
  padding:1rem;
  overflow:auto;
  max-height: calc(100vh - 220px);
}
canvas{max-width:100%; height:auto;}
.small-help{color:#858796; font-size:.9rem;}
.question{
  padding: .9rem;
  border: 1px solid rgba(0,0,0,.07);
  border-radius:.75rem;
  background:#fff;
}