* { box-sizing: border-box; }
body { margin: 0; height: 100vh; display: flex; flex-direction: column; font-family: sans-serif; background: #fff; }

/* SLIM HEADER */
header { 
  background: #f8f9fa; 
  padding: 4px 12px; /* Reduced from 10px to 4px */
  display: flex; 
  justify-content: space-between; 
  align-items: center;
  border-bottom: 1px solid #ddd; 
}

header h1 { 
  margin: 0; 
  font-size: 0.95em; /* Smaller font */
  color: #333; 
}

header button { 
  background: #27ae60; 
  color: white; 
  border: none; 
  padding: 3px 10px; /* Slimmer buttons */
  cursor: pointer; 
  border-radius: 3px; 
  font-size: 0.8em; 
}

main { flex: 1; display: flex; overflow: hidden; }

.editor-wrapper { width: 50%; display: flex; position: relative; border-right: 1px solid #ddd; background: #fff; }

#lineNumbers {
  width: 35px;
  background: #fdfdfd;
  color: #bbb;
  text-align: right;
  padding: 10px 5px;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 14px;
  line-height: 21px; /* EXACT SYNC */
  user-select: none;
  overflow: hidden;
  border-right: 1px solid #eee;
}

.code-area { position: relative; flex: 1; }

#editor, #highlighting {
  margin: 0;
  padding: 10px;
  border: 0;
  width: 100%;
  height: 100%;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 14px;
  line-height: 21px; /* EXACT SYNC */
  tab-size: 2;
  position: absolute;
  top: 0;
  left: 0;
  white-space: pre; 
  overflow: auto;
}

#editor {
  z-index: 1;
  background: transparent;
  color: transparent; 
  caret-color: #333; 
  resize: none;
  outline: none;
}

#highlighting { z-index: 0; pointer-events: none; background: #fff; }
#highlighting code { padding: 0 !important; background: none !important; }

iframe { width: 50%; border: none; background: #fff; }

footer { 
  background: #f8f9fa; 
  text-align: center; 
  font-size: 10px; 
  padding: 2px; 
  border-top: 1px solid #ddd; 
  color: #999;
}