body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  margin: 20px;
  background: #f2f3f5;
}

h1 { 
  text-align: center; 
  color: #333; 
  margin-bottom: 15px; 
}

#toolbar {
  margin-bottom:10px;
  padding:8px;
  background:#fff;
  border:1px solid #ccc;
  border-radius:6px;
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  overflow-x:auto;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

#toolbar button {
  border:none;
  background:#e8e8e8;
  padding:8px 12px;
  cursor:pointer;
  border-radius:4px;
  font-weight:bold;
  transition:0.2s;
}

#toolbar button:hover { background:#d0d0d0; }
#toolbar button.active { background:#0078d7; color:#fff; }

#toolbar input[type=color], #toolbar select {
  padding:5px;
  border-radius:4px;
  border:1px solid #ccc;
  cursor:pointer;
}

#editor {
  width: 100%;
  max-width: 100%;
  min-height: 400px;
  max-height: 100%;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 15px;
  background: #fff;
  overflow: auto;
  color: #000;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: all 0.2s;
  position: relative;
  margin: 0 auto; /* keeps it rigid in page */
}

#editor:empty:before {
  content: attr(data-placeholder);
  color:#999;
  pointer-events:none;
}

.resizer {
  width:10px;
  height:10px;
  background:#888;
  position:absolute;
  z-index:10;
}

.resizer.top-left { top:-5px; left:-5px; cursor:nwse-resize; }
.resizer.top-right { top:-5px; right:-5px; cursor:nesw-resize; }
.resizer.bottom-left { bottom:-5px; left:-5px; cursor:nesw-resize; }
.resizer.bottom-right { bottom:-5px; right:-5px; cursor:nwse-resize; }
.resizer.top { top:-5px; left:50%; transform:translateX(-50%); cursor:ns-resize; }
.resizer.bottom { bottom:-5px; left:50%; transform:translateX(-50%); cursor:ns-resize; }
.resizer.left { left:-5px; top:50%; transform:translateY(-50%); cursor:ew-resize; }
.resizer.right { right:-5px; top:50%; transform:translateY(-50%); cursor:ew-resize; }

@media(max-width:600px){
  #toolbar button,#toolbar select,#toolbar input[type=color]{padding:6px 8px;font-size:14px;}
  #editor{min-height:200px;font-size:14px;}
}