body { font-family: sans-serif; margin: 0; background: #f9f9f9; color: #222; transition: background 0.3s, color 0.3s; }
body.dark { background: #1e1e1e; color: #eee; }

header { background: #333; color: #fff; padding: .5rem 1rem; display: flex; align-items: center; justify-content: space-between; }
header h1 { margin: 0; font-size: 1rem; }
.status { margin: 0 1rem; font-size: .85rem; color: #ffeb3b; }
body.dark .status { color: #fdd835; }

main { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; padding: 1rem; height: calc(100vh - 60px); box-sizing: border-box; }

textarea { flex: 1; padding: .5rem; font-family: monospace; font-size: .9rem; resize: none; transition: background 0.3s, color 0.3s; }
body.dark textarea { background: #2a2a2a; color: #eee; }

.panel { flex: 1; display: flex; flex-direction: column; border: 1px solid #ccc; border-radius: 4px; transition: background 0.3s, color 0.3s, border 0.3s; }
body.dark .panel { border-color: #555; }

.panel header { background: #eee; color: #222; padding: .4rem .6rem; font-weight: bold; border-bottom: 1px solid #ccc; transition: background 0.3s, color 0.3s; }
body.dark .panel header { background: #444; color: #eee; border-color: #555; }

.panel .content { flex: 1; padding: .5rem; overflow: auto; white-space: pre-wrap; background: #fff; transition: background 0.3s, color 0.3s; }
.toolbar { padding: .5rem; border-top: 1px solid #ccc; background: #f0f0f0; display: flex; gap: .5rem; align-items: center; transition: background 0.3s, border 0.3s; }
body.dark .toolbar { background: #2a2a2a; border-color: #555; }

.toolbar .spacer { flex: 1; }

button { padding: .4rem .8rem; cursor: pointer; border: none; border-radius: 4px; color: #fff; }
button.secondary { background: #777; }
button.secondary:hover { opacity: 0.9; }
#btnTranspile { background: orange; }
#btnBuild { background: steelblue; }
#btnRun { background: seagreen; }
#btnTheme { background: #666; }
#btnCopy { background: #555; color: yellow; }