#blog-editor-app {
  max-width: 900px;
  margin: 20px auto;
  font-family: Arial, sans-serif;
}
#outlineInput {
  width: 100%;
  height: 120px;
  margin-bottom: 10px;
}
.section {
  display: none;
}
.section.active {
  display: block;
  border: 1px solid #ccc;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}
.section h3 {
  margin-top: 0;
}
textarea {
  width: 100%;
  height: 100px;
  margin-bottom: 10px;
}
.drafts {
  display: flex;
  gap: 10px;
}
.drafts textarea {
  flex: 1;
  height: 150px;
}
.timer {
  margin-top: 10px;
}
.timer-bar {
  width: 100%;
  height: 8px;
  background: #ddd;
  border-radius: 4px;
  overflow: hidden;
  margin: 5px 0;
}
.timer-progress {
  height: 100%;
  width: 100%;
  background: green;
  transition: width 1s linear, background 0.5s ease;
}
.pagination {
  text-align: center;
  margin: 20px 0;
}
.completion {
  margin-top: 20px;
}
.completion-bar {
  width: 100%;
  height: 12px;
  background: #ddd;
  border-radius: 6px;
  overflow: hidden;
}
#completionProgress {
  height: 100%;
  width: 0%;
  background: red;
  transition: width 0.5s ease, background 0.5s ease;
}