body { margin: 0; font-family: Arial, sans-serif; }
#container { display: grid; grid-template-columns: 1fr 1fr 3fr; grid-template-rows: 1fr 2fr; height: 100vh; }
#input-pane { grid-column: 1; grid-row: 1 / 3; background: #f0f0f0; padding: 10px; border-right: 1px solid #ccc; overflow-y: auto; }
#file-pane { grid-column: 2; grid-row: 1; background: #e8e8e8; padding: 10px; border-bottom: 1px solid #ccc; overflow-y: auto; }
#editor-pane { grid-column: 2 / 4; grid-row: 2; background: white; padding: 10px; position: relative; }
#preview-pane { grid-column: 3; grid-row: 1 / 3; background: #f9f9f9; padding: 10px; overflow: hidden; }
#preview-iframe { width: 100%; height: 100%; border: none; }
textarea { width: 100%; height: 200px; }
button { margin: 5px 0; padding: 5px 10px; }
#explorer { font-family: monospace; font-size: 12px; }
.tree-node { cursor: pointer; padding: 2px; border: 1px solid #ddd; margin: 1px 0; }
.tree-node:hover { background: #ddd; }
.folder { color: blue; font-weight: bold; }
.file { color: black; }
.selected { background: #ccc !important; }
.tree ul { list-style: none; padding-left: 20px; margin: 0; display: none; }
.tree li { position: relative; }
.toggle { position: absolute; left: -15px; cursor: pointer; }
.breadcrumb { background: #fff; padding: 5px; border-bottom: 1px solid #ccc; font-size: 11px; }
.file-item { padding-left: 20px; }
#input-status { font-size: 12px; color: #666; margin-top: 5px; }
#editor-status { position: absolute; top: 10px; right: 10px; font-size: 12px; color: green; opacity: 0; transition: opacity 0.5s; }