html, body { margin:0; padding:0; height:100%; width:100%; font-family:Consolas, monospace; background:white; color:black; overflow:hidden; }
body { display:flex; flex-direction:column; }

/* Top controls */
#top-controls { position:fixed; top:0; left:0; right:0; height:40px; background:#001f3f; display:flex; justify-content:space-between; align-items:center; padding:0 10px; z-index:1000; }
#top-controls button { font-size:12px; padding:4px 8px; background:#001f3f; color:#0ff; border:1px solid #0ff; border-radius:4px; cursor:pointer; }
#top-controls button:hover { background:#0ff; color:#000; }

/* Container */
#container { display:flex; flex-direction:column; height:calc(100vh - 40px); margin-top:40px; overflow:hidden; }

/* Preview area */
#top-preview { flex:1; border-bottom:2px solid #00ffff; display:flex; flex-direction:column; min-height:0; }
iframe#preview { flex-grow:1; border:none; width:100%; height:100%; max-height:100%; box-sizing:border-box; }

/* Bottom area */
#bottom-area { flex:1; display:flex; overflow:hidden; min-height:0; }
#editor-pane { flex:1; display:flex; flex-direction:column; }
#code-editor { flex:1; width:100%; border:none; font-size:14px; padding:8px; font-family:Consolas, monospace; background:#000; color:#0ff; resize:none; min-height:0; box-sizing:border-box; }

/* Tool buttons */
#tool-buttons { width:200px; background:#001f3f; color:#0ff; display:flex; flex-direction:column; padding:5px; gap:5px; overflow-y:auto; box-sizing:border-box; }
button { background:#001f3f; color:#0ff; border:1px solid #0ff; padding:5px; font-size:12px; border-radius:4px; cursor:pointer; }
button:hover { background:#0ff; color:#000; }

/* Zoom styles */
.zoomed-preview #container { height:calc(100vh - 40px); flex-direction:column; }
.zoomed-preview #top-preview { flex:1; display:flex; }
.zoomed-preview #bottom-area { display:none !important; }
.zoomed-editor #container { height:calc(100vh - 40px); flex-direction:column; }
.zoomed-editor #top-preview { flex:0; display:none; }
.zoomed-editor #bottom-area { flex:1; display:flex; }

/* Style panel */
#style-panel { display:flex; flex-direction:column; gap:5px; margin-top:5px; }
#style-panel label { font-size:12px; margin-bottom:2px; }
#style-panel input, #style-panel select { font-size:12px; }