* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; font-family:"Segoe UI",sans-serif; background:#1e1e2e; color:#fff; overflow:hidden; }

/* 顶部功能区 */
#topBar {
  height:60px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 20px;
  background:linear-gradient(90deg,#9cb1d0,#4d0fff);
  border-bottom:1px solid #333;
}

#topBar .left, #topBar .center, #topBar .right {
  display:flex;
  align-items:center;
  gap:12px;
}

#topBar .logo { 
    height:50px; 
    width: 128px;
}

#topBar input {
  padding:6px 12px;
  border-radius:6px;
  border:none;
  width:200px;
  background:#f1f2f9;
  color:#000;
}

#topBar button {
  padding:6px 14px;
  border-radius:6px;
  border:none;
  cursor:pointer;
  background:#22c55e;
  color:#fff;
  font-weight:500;
  transition:0.2s;
}

#topBar button:hover { background:#16a34a; }

/* 主体布局 */
#container { display:flex; height:calc(100% - 60px); }

/* 左侧编辑器 */
#leftPanel { width:45%; display:flex; flex-direction:column; overflow:hidden; border-right:1px solid #333; }
.editor-block { flex:1; display:flex; flex-direction:column; border-bottom:1px solid #333; min-height:0; }
.editor-title { padding:8px 12px; background:#2a2c3d; font-weight:bold; font-size:14px; border-bottom:1px solid #333; flex-shrink:0; }
.CodeMirror { flex:1; min-height:0; font-size:14px; }

/* 右侧区域 */
#rightPanel { width:55%; display:flex; flex-direction:column; overflow:hidden; }

/* 右侧 iframe 工具栏 */
#iframeToolbar {
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 12px;
  background:#2a2c3d;
  border-bottom:1px solid #333;
  flex-shrink:0;
}

#iframeToolbar button {
  background:#3b82f6;
  border:none;
  color:#fff;
  padding:5px 12px;
  border-radius:5px;
  cursor:pointer;
  font-weight:500;
  transition:0.2s;
}

#iframeToolbar button:hover { background:#2563eb; }

.switch { position:relative; display:inline-block; width:40px; height:22px; }
.switch input { opacity:0; width:0; height:0; }
.slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:#555; border-radius:22px; transition:.3s; }
.slider:before { position:absolute; content:""; height:16px; width:16px; left:3px; bottom:3px; background:white; border-radius:50%; transition:.3s; }
input:checked + .slider { background-color:#22c55e; }
input:checked + .slider:before { transform:translateX(18px); }
#iframeToolbar .switch-label { font-size:13px; margin-left:6px; }

/* iframe 预览 */
#result { flex:2; background:#fff; overflow:auto; min-height:0; border-radius:4px; margin:6px 12px; }
#resultFrame { width:100%; height:100%; border:none; border-radius:4px; }

/* 控制台输出 */
#consoleOutput { flex:1; display:flex; flex-direction:column; background:#0f0f17; overflow:hidden; min-height:0; margin:0 12px 12px 12px; border-radius:4px; border:1px solid #333; }
.console-header { display:flex; justify-content:space-between; align-items:center; padding:6px 12px; background:#202030; border-bottom:1px solid #333; flex-shrink:0; border-radius:4px 4px 0 0; }
.console-title { font-weight:bold; color:#00b4db; font-size:14px; }
#clearConsoleBtn { background:#ef4444; border:none; color:white; padding:4px 10px; border-radius:4px; cursor:pointer; font-size:13px; }
#clearConsoleBtn:hover { background:#dc2626; }

#consoleText { flex:1; padding:10px; font-family:monospace; font-size:13px; overflow-y:auto; white-space:pre-wrap; background:#000; color:#00ff7f; border-radius:0 0 4px 4px; }