body, html {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  font-family: 'Segoe UI', sans-serif;
}
.container {
    display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid #b0b0b0;
  background: #ffffff;
}

/* Toolbar */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 12px;
  background: #e0e0e0;
  border-bottom: 1px solid #b0b0b0;
}
.toolbar button, .toolbar select {
  padding: 6px 12px;
  border: 1px solid #d0d0d0;
  border-radius: 50px;
  background: #ffffff;
  cursor: pointer;
  font-size: 13px;
}
.toolbar button:hover, .toolbar select:hover {
  background: #e8e8e8;
  border-color: #a0a0a0;
}
.toolbar button.active {
  background-color: #2563eb;
  color: #fff;
}
body.dark-mode .toolbar button.active {
  background-color: #60a5fa;
  color: #000;
}

/* Editor Area */
.editor-wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 80px);
}

/* Title Bar */
#titleBar {
  background: #f5f5f5;
  padding: 6px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #b0b0b0;
  font-weight: 600;
}
#docTitle { margin:0; color:#1f1f1f; }
#saveStatus { color:#1f1f1f; font-size:12px; font-weight:400; }

/* Editor */
#editor {
  flex: 1;
  padding:16px;
  outline:none;
  overflow:auto;
  background:#ffffff;
  color:#000;
  font-size:14px;
  width:100%;
  box-sizing:border-box;
  border:1px solid #b0b0b0;
  border-radius:4px;
}

/* Status Bar */
.statusbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:6px 12px;
  background:#e0e0e0;
  border-top:1px solid #b0b0b0;
  font-size:12px;
  color:#1f1f1f;
}
#toggleDarkMode { margin-left:auto; padding:4px 10px; font-size:12px; border-radius:50px; border:1px solid #b0b0b0; cursor:pointer; transition: background 0.2s, border 0.2s; }
#toggleDarkMode:hover { background:#dcdcdc; }

/* Dark mode */
body.dark-mode { background:#1f2937; color:#f9fafb; }
body.dark-mode .container { background:#374151; border-color:#4b5563; }
body.dark-mode #editor { background:#1f2937; color:#f9fafb; }
body.dark-mode #titleBar { background:#4b5563; color:#f9fafb; border-color:#6b7280; }
body.dark-mode .statusbar { background:#4b5563; color:#f9fafb; border-color:#6b7280; }