html, body {
  height: 100%;
  margin: 0;
  overflow: hidden; /* ❗ disables page scrolling */
  font-family: monospace;
  background:#0f1117;
  color:#e6edf3;
}

/* BODY LAYOUT */
body {
  display: flex;
  flex-direction: column;
}

/* TOP BAR */
#topbar {
  height: 50px;
  background:#161b22;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 15px;
  border-bottom:1px solid #30363d;
}

.logo {
  font-weight:bold;
  color:#58a6ff;
}

button {
  background:#238636;
  border:none;
  color:white;
  padding:6px 14px;
  border-radius:6px;
  cursor:pointer;
}

button:hover {
  background:#2ea043;
}

/* MAIN AREA */
#main {
  display:flex;
  height: calc(100vh - 50px); /* account for topbar */
  overflow: hidden;
}

/* EDITOR SIDE */
#editorContainer {
  width: 65%;
  display: flex;
  background:#0d1117;
  border-right:1px solid #30363d;
  overflow: hidden;
}

/* LINE NUMBERS */
#lineNumbers {
  background:#161b22;
  padding:10px 8px;
  text-align:right;
  color:#6e7681;
  user-select:none;

  font-size:14px;
  line-height:1.4;
  min-width:40px;

  overflow: hidden;
}

#lineNumbers div {
  height: calc(1em * 1.4);
}

/* EDITOR */
#editor {
  flex:1;
  padding:10px;
  border:none;
  outline:none;
  resize:none;
  background:#0d1117;
  color:#e6edf3;

  font-size:14px;
  line-height:1.4;

  white-space:pre;
  overflow:auto;
}

/* OUTPUT SIDE */
#right {
  width: 35%;
  display:flex;
  flex-direction:column;
  overflow: hidden;
}

#outputHeader {
  padding:10px;
  background:#161b22;
  border-bottom:1px solid #30363d;
}

#output {
  flex:1;
  padding:10px;
  color:#3fb950;
  white-space:pre-wrap;
  font-size:14px;

  overflow:auto;
}

/* ========================= */
/* CUSTOM SCROLLBARS */
/* ========================= */

/* Editor scrollbar */
#editor::-webkit-scrollbar {
  width: 10px;
}

#editor::-webkit-scrollbar-track {
  background: #0d1117;
}

#editor::-webkit-scrollbar-thumb {
  background: #30363d;
  border-radius: 6px;
}

#editor::-webkit-scrollbar-thumb:hover {
  background: #484f58;
}

/* Output scrollbar */
#output::-webkit-scrollbar {
  width: 10px;
}

#output::-webkit-scrollbar-track {
  background: #0d1117;
}

#output::-webkit-scrollbar-thumb {
  background: #30363d;
  border-radius: 6px;
}

#output::-webkit-scrollbar-thumb:hover {
  background: #484f58;
}