/* 全局 */
* {
	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;
}

/* 主容器 */
main#container {
  display: flex;
  height: calc(100% - 55px);
}

/* 左侧编辑器 */
#leftPanel {
  width: 50%;
  height: 100%;
  overflow: hidden;
  padding: 15px;
  background: #1b1b2f;
  display: flex;
  flex-direction: column;
}
.editor-block {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.editor-title {
  font-weight: bold;
  margin-bottom: 5px;
  font-size: 14px;
  color: #fff;
  font-weight: bold;
  flex-shrink: 0;
}

.CodeMirror {
  flex: 1;
  border-radius: 8px;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.4);
  height: auto;
}

/* 右侧面板 */
#rightPanel {
  width: 50%;
  display: flex;
  flex-direction: column;
  padding: 10px;
  background: #111122;
}

/* 工具栏 */
#toolbar {
  display: flex;
  align-items: center;
  padding: 5px;
  background: #222233;
  border-radius: 8px;
  margin-bottom: 10px;
}
#toolbar button {
  padding: 6px 12px;
  margin-right: 10px;
  border-radius: 6px;
  border: none;
  background: #4a90e2;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s;
}
#toolbar button:hover { background: #357ab8; }
.switch { position: relative; display: inline-block; width: 42px; height: 22px; margin-right:5px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top:0; left:0; right:0; bottom:0; background-color:#777; transition:.4s; border-radius: 12px; }
.slider:before { position: absolute; content:""; height:18px; width:18px; left:2px; bottom:2px; background-color:white; transition:.4s; border-radius:50%; }
input:checked + .slider { background-color:#4a90e2; }
input:checked + .slider:before { transform: translateX(20px); }
.switch-label { color: #aaa; font-size: 13px; }

/* 海龟图区域 */
#turtleArea {
  flex: 1;
  margin-bottom: 10px;
  border-radius: 10px;
  /*background: radial-gradient(circle at 50% 50%, #222244, #111122);*/
  background:
  radial-gradient(ellipse at top, #F5F5F5, transparent),
  radial-gradient(ellipse at bottom, #C0C0C0, transparent);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
}
/*
#turtleCanvas {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: transparent;
}
*/

#turtleCanvas {
  width: 100%;
  height: 400px;
}

/* 控制台 */
#consoleOutput {
  flex: 1;
  background: #1a1a2a;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
    /* 或者对 #consoleText 根据你布局的情况选择 */
  height: 150px;       /* 固定或最大高度 */
  overflow-y: auto;    /* 垂直方向自动滚动 */
  /* 可选：overflow-x: hidden; 如果不希望横向滚动 */
}
.console-header {
  display: flex;
  justify-content: space-between;
  padding: 6px 10px;
  background: #222233;
  border-bottom: 1px solid #444;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.console-header button {
  background: #e24a4a;
  color: #fff;
  padding: 3px 10px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: 0.2s;
}
.console-header button:hover { background: #b83b3b; }
.console-title { font-weight: bold; color: #a0a0ff; font-size: 14px; }
#consoleText {
  flex: 1;
  padding: 10px;
  overflow: auto;
  font-family: monospace;
  color: #0f0;
  background: transparent;
}
.console-line.log { color: #50fa7b; }      /* 普通输出 */
.console-line.error { color: #ff5555; }   /* 错误输出 */
.console-line.info { color: #8be9fd; }    /* 信息提示 */