html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #1e1e1e;
  font-family: system-ui, sans-serif;
}

/* ---------- TOOLBAR ---------- */

#toolbar {
  height: 40px;
  background: #111;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 12px;
  border-bottom: 1px solid #333;
}

.toolbar-left {
  color: #f5c542;
  font-weight: 600;
}

.toolbar-left span {
  color: #ffd966;
}

.toolbar-center {
  display: flex;
  gap: 10px;
}

.toolbar-center button {
  background: #2a2a2a;
  color: #fff;
  border: 1px solid #444;
  padding: 4px 10px;
  cursor: pointer;
  border-radius: 4px;
}

.toolbar-center button:hover {
  background: #3a3a3a;
}

.toolbar-right {
  text-align: right;
  color: #4caf50;
  font-size: 12px;
}

/* ---------- IDE LAYOUT ---------- */

#ide {
  height: calc(100% - 40px);
  display: grid;
  grid-template-columns: 65% 6px 35%;
}

#editor-container {
  min-width: 0;
}

#preview-frame {
  width: 100%;
  height: 100%;
  border: none;
  background: white;
}

/* ---------- SPLITTER ---------- */

#splitter {
  background: #333;
  cursor: col-resize;
}

#splitter:hover {
  background: #555;
}

.sep {
  width: 1px;
  height: 18px;
  background: #444;
  margin: 0 6px;
}