/* ============================================
   Let's Vibe IDE Styles (VS Code-inspired)
   ============================================ */

.ide-page-shell {
  padding: 0;
  background: #0f1117;
}

.ide-workspace {
  --left-width: 440px;
  --file-width: 280px;
  --left-lecture-height: 300px;
  --left-lessons-height: 0px;
  --main-preview-height: 330px;
  --main-mobile-preview-width: 45%;
  --resizer-width: 3px;
  width: 100%;
  height: calc(100vh - var(--header-offset, 0px));
  min-height: 680px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.38rem;
  padding: 0.42rem;
  position: relative;
  background: #0f1117;
  color: #d8deeb;
  overflow: hidden;
}

.ide-app-topbar {
  min-height: 44px;
  border: 1px solid #2f3848;
  border-radius: 9px;
  background: #161b24;
  padding: 0.38rem 0.54rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.ide-app-topbar-left {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.ide-app-topbar-left strong {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: #ecf1fc;
  font-weight: 700;
}

.ide-app-topbar-right {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ide-app-topbar-right .ide-btn {
  min-height: 35px;
  padding: 0.3rem 0.7rem;
  font-size: 0.79rem;
}

.ide-btn {
  border: 1px solid #3f4a61;
  border-radius: 7px;
  background: #202838;
  color: #dce5f8;
  min-height: 30px;
  padding: 0.24rem 0.58rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.ide-btn:hover {
  border-color: #64789f;
  background: #263249;
}

.ide-btn.active {
  border-color: #5f9eff;
  background: #23406b;
  color: #edf5ff;
}

.ide-btn.small {
  min-height: 26px;
  padding: 0.14rem 0.48rem;
  font-size: 0.7rem;
}

.ide-btn.notice {
  min-width: 126px;
  justify-self: center;
}

.ide-connection-dot {
  border-radius: 999px;
  border: 1px solid #394356;
  background: #121821;
  color: #c6cfdf;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.18rem 0.4rem;
}

.ide-connection-dot.online {
  color: #b1f4c8;
  border-color: #3c7f53;
  background: #123121;
}

.ide-connection-dot.offline {
  color: #ffd59d;
  border-color: #85643f;
  background: #382d1f;
}

.ide-shell {
  min-height: 0;
  display: grid;
  grid-template-columns: var(--left-width) var(--resizer-width) var(--file-width) var(--resizer-width) minmax(0, 1fr);
  gap: 0.32rem;
}

.ide-workspace.is-popup-preview .ide-shell,
.ide-workspace.is-popup-lecture .ide-shell,
.ide-workspace.is-popup-chat .ide-shell {
  grid-template-columns: minmax(0, 1fr);
}

.ide-workspace.is-left-collapsed .ide-shell {
  grid-template-columns: 0 var(--resizer-width) var(--file-width) var(--resizer-width) minmax(0, 1fr);
}

.ide-workspace.is-file-collapsed .ide-shell {
  grid-template-columns: var(--left-width) var(--resizer-width) 0 var(--resizer-width) minmax(0, 1fr);
}

.ide-workspace.is-left-collapsed.is-file-collapsed .ide-shell {
  grid-template-columns: 0 var(--resizer-width) 0 var(--resizer-width) minmax(0, 1fr);
}

.ide-column {
  min-height: 0;
  display: grid;
  gap: 0.32rem;
  overflow: hidden;
}

.ide-column-left {
  grid-template-rows: var(--left-lecture-height) 6px auto 6px minmax(0, 1fr);
}

.ide-column-files {
  grid-template-rows: 1fr;
}

.ide-column-main {
  grid-template-rows: minmax(0, 0.54fr) minmax(0, 0.46fr);
}

.ide-workspace.is-preview-mobile:not(.is-main-preview):not(.is-main-editor) .ide-column-main {
  grid-template-columns: minmax(220px, var(--main-mobile-preview-width)) 6px minmax(220px, 1fr);
  grid-template-rows: 1fr;
}

.ide-workspace.is-preview-mobile:not(.is-main-preview):not(.is-main-editor) .ide-card-preview,
.ide-workspace.is-preview-mobile:not(.is-main-preview):not(.is-main-editor) .ide-card-editor {
  min-height: 0;
}

.ide-workspace.is-main-preview .ide-column-main {
  grid-template-rows: 1fr 0;
}

.ide-workspace.is-main-preview .ide-card-editor {
  display: none;
}

.ide-workspace.is-main-editor .ide-column-main {
  grid-template-rows: 0 1fr;
}

.ide-workspace.is-main-editor .ide-card-preview {
  display: none;
}

.ide-workspace.is-left-collapsed .ide-column-left,
.ide-workspace.is-file-collapsed .ide-column-files {
  opacity: 0;
  pointer-events: none;
}

.ide-workspace.is-popup-preview .ide-column-left,
.ide-workspace.is-popup-preview .ide-column-files,
.ide-workspace.is-popup-preview .ide-resizer {
  display: none !important;
}

.ide-workspace.is-popup-preview .ide-column-main {
  grid-template-rows: 1fr 0 0 !important;
}

.ide-workspace.is-popup-preview .ide-card-editor,
.ide-workspace.is-popup-preview .ide-main-v-resizer {
  display: none !important;
}

.ide-workspace.is-popup-lecture .ide-column-files,
.ide-workspace.is-popup-lecture .ide-column-main,
.ide-workspace.is-popup-lecture .ide-resizer {
  display: none !important;
}

.ide-workspace.is-popup-lecture .ide-column-left {
  grid-template-rows: 1fr !important;
}

.ide-workspace.is-popup-lecture .ide-card-lessons,
.ide-workspace.is-popup-lecture .ide-card-agent,
.ide-workspace.is-popup-lecture .ide-column-left > .ide-v-resizer {
  display: none !important;
}

.ide-workspace.is-popup-chat .ide-column-files,
.ide-workspace.is-popup-chat .ide-column-main,
.ide-workspace.is-popup-chat .ide-resizer {
  display: none !important;
}

.ide-workspace.is-popup-chat .ide-column-left {
  grid-template-rows: 1fr !important;
}

.ide-workspace.is-popup-chat .ide-card-lecture,
.ide-workspace.is-popup-chat .ide-card-lessons,
.ide-workspace.is-popup-chat .ide-column-left > .ide-v-resizer {
  display: none !important;
}

.ide-resizer {
  min-height: 0;
  position: relative;
  cursor: ew-resize;
  border-radius: 8px;
  background: transparent;
}

.ide-resizer::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1px;
  height: 56px;
  border-radius: 999px;
  background: #3a455a;
}

.ide-resizer:hover::before {
  background: #5e80b6;
}

.ide-v-resizer {
  min-height: 6px;
  cursor: ns-resize;
  position: relative;
}

.ide-v-resizer::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 1px;
  background: #344055;
}

.ide-v-resizer:hover::before {
  background: #5e80b6;
}

.ide-card {
  min-height: 0;
  border: 1px solid #2f394a;
  border-radius: 9px;
  background: #141a24;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.ide-card-head {
  min-height: 36px;
  border-bottom: 1px solid #2f394a;
  background: #1c2330;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  padding: 0.26rem 0.44rem;
}

.ide-card-head h2 {
  margin: 0;
  font-size: 0.88rem;
  color: #dbe4f7;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}

.ide-card-head-clickable {
  cursor: pointer;
}

.ide-card-head-clickable:hover {
  background: #20293a;
}

.ide-head-state {
  font-size: 0.67rem;
  color: #91a5cb;
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
}

.ide-card-head .head-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  flex-wrap: wrap;
}

.ide-card-files .ide-card-head {
  align-items: center;
  padding-top: 0.38rem;
  padding-bottom: 0.34rem;
}

.ide-card-files .ide-card-head .head-actions {
  margin-left: auto;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.22rem;
}

.ide-card-files .ide-card-head .head-actions .ide-btn {
  white-space: nowrap;
}

.ide-card-lessons {
  grid-template-rows: auto minmax(0, 1fr);
  height: var(--left-lessons-height);
}

.ide-workspace.is-lesson-collapsed .ide-card-lessons {
  grid-template-rows: auto;
  height: auto;
}

.ide-workspace.is-lesson-collapsed .ide-card-lessons .ide-lesson-list {
  display: none;
}

.ide-lecture-viewer {
  min-height: 0;
  background: #0f141d;
}

.ide-lecture-viewer iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.ide-lesson-list {
  overflow: auto;
  padding: 0.42rem;
  display: grid;
  align-content: start;
  gap: 0.3rem;
  background: #121923;
}

.ide-lesson-item {
  border: 1px solid #3a4457;
  border-radius: 8px;
  background: #1e2736;
  color: #dce4f7;
  padding: 0.42rem 0.52rem;
  text-align: left;
  font-size: 0.79rem;
  line-height: 1.4;
}

.ide-lesson-item.active {
  border-color: #609eff;
  background: #244066;
}

.ide-card-agent {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}

.ide-agent-feed {
  overflow: auto;
  padding: 0.45rem;
  display: grid;
  align-content: start;
  gap: 0.38rem;
  background: #101620;
}

.ide-agent-attachments {
  border-top: 1px solid #d8e4fb;
  border-bottom: 1px solid #d8e4fb;
  background: #f6faff;
  padding: 0.38rem 0.42rem;
  display: grid;
  gap: 0.34rem;
}

.ide-agent-attachments[hidden] {
  display: none !important;
}

.ide-attach-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.ide-attach-head strong {
  font-size: 0.72rem;
  color: #4a5f89;
}

.ide-attach-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.ide-attach-chip {
  border: 1px solid #c6d8fb;
  border-radius: 999px;
  background: #ecf3ff;
  color: #2f4675;
  min-height: 26px;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.14rem 0.5rem;
  font-size: 0.71rem;
  font-weight: 650;
}

.ide-attach-chip span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}

.ide-card-agent.is-drop-target {
  border-color: #89adf6;
  box-shadow: 0 0 0 2px rgba(86, 136, 229, 0.2);
}

.ide-chat-bubble {
  border: 1px solid #313b4d;
  border-radius: 9px;
  padding: 0.42rem 0.46rem;
  display: grid;
  gap: 0.18rem;
}

.ide-chat-bubble strong {
  font-size: 0.7rem;
  color: #a7bde9;
  font-weight: 700;
}

.ide-chat-bubble p {
  margin: 0;
  font-size: 0.79rem;
  line-height: 1.42;
  color: #dbe4f8;
  white-space: pre-wrap;
}

.ide-chat-bubble.user {
  border-color: #4b78bf;
  background: #1b2e4b;
}

.ide-agent-form {
  border-top: 1px solid #2f394a;
  background: #171e2a;
  padding: 0.42rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.32rem;
  align-items: end;
}

.ide-agent-form textarea {
  min-height: 50px;
  max-height: 120px;
  resize: vertical;
  border: 1px solid #3b475e;
  border-radius: 8px;
  background: #0f151f;
  color: #dce5f8;
  padding: 0.38rem 0.5rem;
  font-size: 0.79rem;
  line-height: 1.42;
}

.ide-send-btn {
  width: 34px;
  height: 34px;
  border: 1px solid #4a628b;
  border-radius: 8px;
  background: #2a446b;
  color: #e9f3ff;
  display: grid;
  place-items: center;
  padding: 0;
}

.ide-send-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ide-send-btn.is-loading {
  opacity: 0.56;
}

.ide-file-tree {
  overflow: auto;
  padding: 0.4rem;
  background: #121923;
  display: grid;
  align-content: start;
  gap: 0.14rem;
}

.ide-tree-node {
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #d4ddf5;
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.35rem;
  padding: 0.24rem 0.38rem;
  padding-left: calc(0.4rem + var(--depth) * 0.82rem);
  text-align: left;
  min-height: 26px;
}

.ide-tree-node.folder .ide-tree-text {
  color: #2d4d86;
  font-weight: 800;
}

.ide-tree-node.file .ide-tree-text {
  color: #33415f;
}

.ide-tree-node.is-tree-drop-target {
  border-color: #7ea8ff;
  background: #eaf2ff;
}

.ide-file-tree.is-tree-drop-active {
  box-shadow: inset 0 0 0 1px rgba(126, 168, 255, 0.45);
}

.ide-tree-node:hover {
  border-color: #394356;
  background: #1f2837;
}

.ide-tree-node.active {
  border-color: #5f9eff;
  background: #203f66;
}

.ide-tree-node.selected {
  box-shadow: inset 0 0 0 1px rgba(186, 210, 255, 0.16);
}

.ide-tree-icon {
  color: #88a3db;
  font-size: 0.74rem;
}

.ide-tree-text {
  font-size: 0.76rem;
  font-family: var(--font);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ide-energy-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid #f8c86d;
  border-radius: 999px;
  background: #fff7e5;
  color: #8a5a00;
  padding: 0.18rem 0.58rem;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.ide-empty {
  margin: 0;
  color: #9ba7bf;
  font-size: 0.77rem;
  line-height: 1.45;
}

.ide-preview-frame-wrap {
  min-height: 0;
  background: #0f151f;
  padding: 0.52rem;
  display: grid;
  place-items: center;
}

.ide-preview-frame-wrap iframe {
  width: 100%;
  height: 100%;
  border: 1px solid #2d384b;
  border-radius: 10px;
  background: #ffffff;
}

.ide-preview-frame-wrap.mobile iframe {
  width: min(330px, 100%);
  aspect-ratio: 9 / 19.5;
  height: auto;
  max-height: 100%;
  border-radius: 24px;
  border: 7px solid #080c12;
}

.ide-runtime-preview {
  width: 100%;
  height: 100%;
  border: 1px solid #2e384a;
  border-radius: 10px;
  background: #0c121c;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.ide-runtime-head {
  min-height: 34px;
  border-bottom: 1px solid #2e384a;
  background: #141c29;
  padding: 0.28rem 0.44rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

.ide-runtime-head strong {
  color: #d9e4fc;
  font-size: 0.76rem;
}

.ide-runtime-log {
  margin: 0;
  padding: 0.6rem;
  overflow: auto;
  color: #d6def3;
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

.ide-card-editor {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.ide-editor-meta {
  border-bottom: 1px solid #2f394a;
  background: #171d28;
  min-height: 31px;
  padding: 0.32rem 0.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.ide-editor-meta span {
  color: #a5b2ca;
  font-size: 0.72rem;
}

.ide-editor-meta strong {
  color: #dde6fa;
  font-weight: 600;
  margin-right: 0.2rem;
}

.ide-code-pane {
  min-height: 0;
  background: #0f141d;
}

.ide-editor-grid {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
}

.ide-line-numbers {
  border-right: 1px solid #253043;
  background: #111722;
  padding: 0.75rem 0.46rem;
  color: #6d7c98;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.86rem;
  line-height: 1.55;
  user-select: none;
  overflow: hidden;
}

.ide-line-numbers span {
  display: block;
  text-align: right;
  min-height: 1.55em;
}

.ide-line-numbers span.has-error {
  color: #ff8585;
}

.ide-code-stack {
  min-height: 0;
  position: relative;
}

.ide-highlight,
.ide-code-stack textarea {
  margin: 0;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0.75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.86rem;
  line-height: 1.55;
  white-space: pre;
  tab-size: 2;
}

.ide-highlight {
  pointer-events: none;
  overflow: hidden;
  color: #d4d4d4;
}

.ide-highlight code {
  display: block;
  min-height: 100%;
  white-space: pre;
}

.ide-code-stack textarea {
  background: transparent;
  color: transparent;
  -webkit-text-fill-color: transparent;
  caret-color: #dbe5f8;
  text-shadow: none;
  resize: none;
  overflow: auto;
}

.ide-code-stack textarea::selection {
  background: rgba(104, 155, 255, 0.25);
}

.ide-code-stack textarea:disabled {
  opacity: 0.7;
}

.code-line {
  display: block;
}

.code-line.has-error {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #ff6565;
}

.ide-terminal-pane {
  min-height: 0;
  background: #0f141d;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.ide-terminal-log {
  min-height: 0;
  overflow: auto;
  padding: 0.55rem;
  background: #0d1118;
  border-bottom: 1px solid #2f394a;
}

.ide-terminal-log p {
  margin: 0 0 0.32rem;
  white-space: pre-wrap;
  line-height: 1.42;
  font: 12px/1.42 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.ide-terminal-log .line-input {
  color: #9cc3ff;
}

.ide-terminal-log .line-system {
  color: #dbe5f8;
}

.ide-terminal-log .line-warn {
  color: #ffd59d;
}

.ide-terminal-log .line-error {
  color: #ff8e8e;
}

.ide-inline-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.34rem;
  padding: 0.45rem;
  background: #171e2a;
}

.ide-inline-form input {
  min-height: 34px;
  border: 1px solid #3a465d;
  border-radius: 8px;
  background: #0f151f;
  color: #e7efff;
  padding: 0.34rem 0.5rem;
}

.ide-inline-form button {
  min-height: 34px;
  border: 1px solid #4a628b;
  border-radius: 8px;
  background: #2a446b;
  color: #f1f6ff;
  padding: 0.34rem 0.62rem;
}

.ide-context-menu {
  position: absolute;
  z-index: 80;
  width: 172px;
  border: 1px solid #3d4960;
  border-radius: 8px;
  background: #182131;
  box-shadow: 0 14px 24px rgba(2, 5, 11, 0.45);
  overflow: hidden;
}

.ide-context-menu button {
  width: 100%;
  text-align: left;
  padding: 0.42rem 0.52rem;
  border: 0;
  border-bottom: 1px solid #2a3547;
  background: transparent;
  color: #e4ecff;
  font-size: 0.74rem;
}

.ide-context-menu button:last-child {
  border-bottom: 0;
}

.ide-context-menu button:hover {
  background: #24344f;
}

.ide-context-menu[hidden] {
  display: none !important;
}

.ide-dialog-overlay {
  position: absolute;
  inset: 0;
  z-index: 98;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.ide-dialog-overlay[hidden] {
  display: none !important;
}

.ide-dialog-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(11, 18, 30, 0.38);
}

.ide-dialog-card {
  position: relative;
  z-index: 1;
  width: min(560px, calc(100% - 1rem));
  border: 1px solid #d2e1ff;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 16px 36px rgba(50, 82, 136, 0.24);
  padding: 0.96rem;
  display: grid;
  gap: 0.62rem;
  overflow: hidden;
}

.ide-dialog-card h3 {
  margin: 0;
  color: #2f4b7f;
  font-size: 0.96rem;
}

.ide-dialog-card p {
  margin: 0;
  color: #55709e;
  font-size: 0.82rem;
}

.ide-dialog-card form[data-dialog-form] {
  min-width: 0;
  display: grid;
  gap: 0.56rem;
}

.ide-dialog-card input {
  min-height: 42px;
  border: 1px solid #c7d9ff;
  border-radius: 10px;
  background: #f9fbff;
  color: #2f4265;
  padding: 0.46rem 0.58rem;
  width: 100%;
  box-sizing: border-box;
  line-height: 1.35;
  font-size: 0.82rem;
}

.ide-dialog-card input:focus {
  outline: 2px solid #91b3f5;
  outline-offset: 1px;
}

.ide-dialog-error {
  color: #c33655 !important;
  font-weight: 700;
}

.ide-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
  margin-top: 0.04rem;
}

.ide-dialog-actions .ide-btn {
  min-width: 76px;
}

.ide-dialog-actions .ide-btn:hover {
  transform: none;
}

.ide-fullscreen-notice {
  position: absolute;
  inset: 0;
  background: rgba(7, 11, 18, 0.72);
  display: grid;
  place-items: center;
  z-index: 90;
  padding: 1rem;
}

.ide-fullscreen-notice[hidden] {
  display: none !important;
}

.ide-fullscreen-card {
  width: min(520px, calc(100% - 2rem));
  border: 1px solid #44536d;
  border-radius: 14px;
  background: #1d2737;
  padding: 1rem;
  display: grid;
  gap: 0.56rem;
  text-align: center;
}

.ide-fullscreen-card h3 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: #edf3ff;
}

.ide-fullscreen-card p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #c8d2e8;
}

.ide-code-pane[hidden],
.ide-terminal-pane[hidden] {
  display: none !important;
}

.token-comment {
  color: #6a9955;
}

.token-string {
  color: #ce9178;
}

.token-keyword {
  color: #c586c0;
}

.token-tag,
.token-selector {
  color: #569cd6;
}

.token-attr,
.token-prop {
  color: #9cdcfe;
}

.token-number {
  color: #b5cea8;
}

.token-constant,
.token-value {
  color: #4fc1ff;
}

.token-muted {
  color: #7f8ca4;
}

@media (max-width: 1320px) {
  .ide-workspace {
    --left-width: 390px;
    --file-width: 250px;
  }
}

@media (max-width: 1080px) {
  .ide-workspace {
    height: auto;
    min-height: calc(100vh - var(--header-offset, 0px));
  }

  .ide-shell,
  .ide-workspace.is-left-collapsed .ide-shell,
  .ide-workspace.is-file-collapsed .ide-shell,
  .ide-workspace.is-left-collapsed.is-file-collapsed .ide-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  .ide-resizer {
    display: none;
  }

  .ide-column-left,
  .ide-column-files,
  .ide-column-main {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .ide-column-main,
  .ide-workspace.is-main-preview .ide-column-main,
  .ide-workspace.is-main-editor .ide-column-main {
    grid-template-rows: minmax(260px, 0.48fr) minmax(260px, 0.52fr);
  }

  .ide-workspace.is-preview-mobile:not(.is-main-preview):not(.is-main-editor) .ide-column-main {
    grid-template-columns: minmax(220px, var(--main-mobile-preview-width, 46%)) 6px minmax(220px, 1fr);
    grid-template-rows: minmax(360px, 1fr);
  }

  .ide-workspace.is-main-preview .ide-card-editor,
  .ide-workspace.is-main-editor .ide-card-preview {
    display: grid;
  }
}

@media (max-width: 760px) {
  .ide-workspace {
    padding: 0.3rem;
    gap: 0.3rem;
  }

  .ide-app-topbar {
    flex-wrap: wrap;
  }

  .ide-app-topbar-right {
    width: 100%;
    justify-content: flex-end;
  }

  .ide-card-head {
    flex-wrap: wrap;
  }

  .ide-card-head .head-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .ide-btn.small {
    padding: 0.14rem 0.4rem;
  }

  .ide-editor-grid {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .ide-dialog-card {
    width: min(100%, calc(100% - 0.6rem));
    border-radius: 14px;
    padding: 0.72rem;
  }

  .ide-dialog-actions {
    justify-content: stretch;
  }

  .ide-dialog-actions .ide-btn {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* ============================================
   IDE Light Theme Refresh (Beginner-friendly)
   ============================================ */

.ide-page-shell {
  background:
    radial-gradient(circle at 8% 12%, rgba(130, 185, 255, 0.22), transparent 40%),
    radial-gradient(circle at 95% 90%, rgba(255, 183, 222, 0.2), transparent 38%),
    #f5f8ff;
}

.ide-workspace {
  --ide-bg: #f5f8ff;
  --ide-surface: #ffffff;
  --ide-surface-soft: #f0f5ff;
  --ide-surface-soft-2: #edf3ff;
  --ide-border: #dbe5fb;
  --ide-border-strong: #c3d5ff;
  --ide-text: #25314d;
  --ide-text-muted: #5e7097;
  --ide-accent: #5b8dff;
  --ide-accent-soft: #e7efff;
  --ide-accent-strong: #2c5fce;
  --ide-success-bg: #e8f9ef;
  --ide-success-text: #1f8b4f;
  --ide-warn-bg: #fff4dd;
  --ide-warn-text: #a36a00;
  background: transparent;
  color: var(--ide-text);
  font-family: var(--font);
}

.ide-app-topbar {
  border: 1px solid var(--ide-border);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 30px rgba(71, 100, 156, 0.1);
  min-height: 50px;
  padding: 0.45rem 0.68rem;
}

.ide-app-topbar-left strong {
  color: var(--ide-text);
  font-size: 0.86rem;
  letter-spacing: 0.03em;
}

.ide-btn {
  border: 1px solid var(--ide-border);
  border-radius: 999px;
  background: var(--ide-surface-soft);
  color: var(--ide-text);
  min-height: 33px;
  padding: 0.24rem 0.68rem;
  font-weight: 650;
}

.ide-btn:hover {
  border-color: var(--ide-border-strong);
  background: #e6efff;
}

.ide-btn.active {
  border-color: #99b8ff;
  background: #dbe9ff;
  color: var(--ide-accent-strong);
}

.ide-btn.small {
  min-height: 28px;
  padding: 0.14rem 0.6rem;
  font-size: 0.73rem;
}

.ide-connection-dot {
  border: 1px solid var(--ide-border);
  background: #f0f5ff;
  color: var(--ide-text-muted);
  padding: 0.2rem 0.48rem;
}

.ide-connection-dot.online {
  color: var(--ide-success-text);
  border-color: #b7e9c8;
  background: var(--ide-success-bg);
}

.ide-connection-dot.offline {
  color: var(--ide-warn-text);
  border-color: #f3d699;
  background: var(--ide-warn-bg);
}

.ide-resizer::before {
  width: 2px;
  height: 52px;
  background: #c4d6fc;
}

.ide-resizer:hover::before {
  background: #95b8ff;
}

.ide-v-resizer::before {
  height: 2px;
  border-radius: 999px;
  background: #c8d7f4;
}

.ide-v-resizer:hover::before {
  background: #95b8ff;
}

.ide-card {
  border: 1px solid var(--ide-border);
  border-radius: 20px;
  background: var(--ide-surface);
  box-shadow: 0 10px 28px rgba(58, 89, 145, 0.08);
}

.ide-card-head {
  min-height: 40px;
  border-bottom: 1px solid var(--ide-border);
  background: linear-gradient(180deg, #f8fbff 0%, #f2f7ff 100%);
  padding: 0.34rem 0.56rem;
}

.ide-card-head h2 {
  color: var(--ide-text);
  font-size: 0.95rem;
  font-weight: 700;
}

.ide-card-head-clickable:hover {
  background: #ebf3ff;
}

.ide-head-state {
  color: #6b7fa7;
  font-size: 0.72rem;
}

.ide-lecture-viewer,
.ide-lesson-list,
.ide-agent-feed,
.ide-file-tree,
.ide-preview-frame-wrap,
.ide-code-pane,
.ide-terminal-pane {
  background: #fbfdff;
}

.ide-lesson-item {
  border: 1px solid #dce7ff;
  border-radius: 14px;
  background: #f4f8ff;
  color: #2c3a59;
  font-weight: 560;
}

.ide-lesson-item.active {
  border-color: #9dbdff;
  background: #e6f0ff;
  color: #23498d;
}

.ide-chat-bubble {
  border: 1px solid #dbe7ff;
  border-radius: 16px;
  background: #f6f9ff;
}

.ide-chat-bubble strong {
  color: #4d6aa6;
  font-size: 0.74rem;
}

.ide-chat-bubble p {
  color: #2f3f61;
}

.ide-chat-bubble.user {
  border-color: #9cbcff;
  background: #e7f0ff;
}

.ide-agent-form {
  border-top: 1px solid var(--ide-border);
  background: #f5f9ff;
}

.ide-agent-form textarea {
  border: 1px solid #cfdefa;
  border-radius: 14px;
  background: #ffffff;
  color: var(--ide-text);
}

.ide-agent-form textarea::placeholder {
  color: #8da0c7;
}

.ide-send-btn {
  width: 36px;
  height: 36px;
  border: 1px solid #9cbcff;
  border-radius: 12px;
  background: #dce9ff;
  color: #315ea8;
}

.ide-file-tree {
  background: #f8fbff;
}

.ide-tree-node {
  border-radius: 12px;
  color: #2f405f;
}

.ide-tree-node:hover {
  border-color: #cfddf8;
  background: #edf4ff;
}

.ide-tree-node.active {
  border-color: #9dbdff;
  background: #e4efff;
  color: #23498d;
}

.ide-tree-node.selected {
  box-shadow: inset 0 0 0 1px rgba(110, 150, 230, 0.32);
}

.ide-tree-icon {
  color: #6e89bb;
}

.ide-empty {
  color: #6e7fa3;
}

.ide-preview-frame-wrap {
  background: #f7fbff;
  padding: 0.66rem;
}

.ide-preview-frame-wrap iframe {
  border: 1px solid #d4e2fd;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(74, 102, 150, 0.1);
}

.ide-preview-frame-wrap.mobile iframe {
  border-radius: 28px;
  border: 8px solid #f3f7ff;
}

.ide-runtime-preview {
  border: 1px solid var(--ide-border);
  border-radius: 16px;
  background: #f8fbff;
}

.ide-runtime-head {
  border-bottom: 1px solid var(--ide-border);
  background: #eef4ff;
}

.ide-runtime-head strong {
  color: #314772;
}

.ide-runtime-log {
  color: #324667;
  background: #f9fbff;
}

.ide-editor-meta {
  border-bottom: 1px solid var(--ide-border);
  background: #f2f7ff;
}

.ide-editor-meta span {
  color: #63779f;
}

.ide-editor-meta strong {
  color: #2f4368;
}

.ide-code-pane {
  background: #ffffff;
}

.ide-line-numbers {
  border-right: 1px solid #dce8ff;
  background: #f4f8ff;
  color: #90a2c6;
}

.ide-line-numbers span.has-error {
  color: #d95770;
}

.ide-highlight {
  color: #273a59;
}

.ide-code-stack textarea {
  caret-color: #284e98;
}

.ide-code-stack textarea::selection {
  background: rgba(91, 141, 255, 0.23);
}

.code-line.has-error {
  text-decoration-color: #df4f6e;
}

.ide-terminal-pane {
  background: #ffffff;
}

.ide-terminal-log {
  background: #f8fbff;
  border-bottom: 1px solid var(--ide-border);
}

.ide-terminal-log .line-input {
  color: #3f6ac4;
}

.ide-terminal-log .line-system {
  color: #324667;
}

.ide-terminal-log .line-warn {
  color: #b07408;
}

.ide-terminal-log .line-error {
  color: #c93755;
}

.ide-inline-form {
  background: #f3f8ff;
}

.ide-inline-form input {
  border: 1px solid #cfdefa;
  border-radius: 12px;
  background: #ffffff;
  color: var(--ide-text);
}

.ide-inline-form button {
  border: 1px solid #9cbcff;
  border-radius: 999px;
  background: #dce9ff;
  color: #315ea8;
  font-weight: 650;
}

.ide-context-menu {
  border: 1px solid #ccddff;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 18px 34px rgba(67, 97, 148, 0.16);
}

.ide-context-menu button {
  border-bottom: 1px solid #e9f0ff;
  color: #2f4264;
}

.ide-context-menu button:hover {
  background: #eff5ff;
}

.ide-fullscreen-notice {
  background: rgba(245, 248, 255, 0.82);
  backdrop-filter: blur(3px);
}

.ide-fullscreen-card {
  border: 1px solid #ccddff;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 24px 42px rgba(71, 100, 156, 0.16);
}

.ide-fullscreen-card h3 {
  color: #2f4267;
}

.ide-fullscreen-card p {
  color: #5f7298;
}

.token-comment {
  color: #6c7b92;
}

.token-string {
  color: #af5a7a;
}

.token-keyword {
  color: #6556d8;
}

.token-tag,
.token-selector {
  color: #2f7ad8;
}

.token-attr,
.token-prop {
  color: #2c8f92;
}

.token-number {
  color: #a56821;
}

.token-constant,
.token-value {
  color: #1e76a9;
}

.token-muted {
  color: #7f91b0;
}

/* ============================================
   IDE polish: emphasis, responsive text, motion
   ============================================ */

.ide-workspace {
  padding-inline: clamp(0.46rem, 0.4rem + 0.2vw, 0.62rem);
}

.ide-card {
  transition:
    transform 180ms ease,
    box-shadow 220ms ease,
    border-color 180ms ease,
    background-color 180ms ease;
  animation: ideCardIn 320ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.ide-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(58, 89, 145, 0.11);
}

.ide-btn,
.ide-send-btn,
.ide-tree-node,
.ide-lesson-item,
.ide-chat-bubble {
  transition:
    transform 160ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}

.ide-btn:hover,
.ide-send-btn:hover {
  transform: translateY(-1px);
}

.ide-send-btn:hover {
  box-shadow: 0 8px 16px rgba(83, 127, 212, 0.24);
}

.ide-card-head h2 {
  font-size: clamp(0.9rem, 0.84rem + 0.2vw, 1.02rem);
  letter-spacing: -0.01em;
  padding-left: 0.08rem;
}

.ide-card-lecture .ide-card-head h2 {
  color: #2f4f86;
}

.ide-card-preview .ide-card-head h2 {
  color: #2c62cf;
}

.ide-card-agent .ide-card-head h2 {
  color: #6d4fd4;
}

.ide-card-editor .ide-card-head h2 {
  color: #1a7c66;
}

.ide-card-files .ide-card-head h2 {
  color: #405280;
  font-size: 0.9rem;
  margin-top: 0.04rem;
}

.ide-btn {
  font-size: clamp(0.72rem, 0.68rem + 0.14vw, 0.82rem);
}

.ide-btn.small {
  font-size: clamp(0.7rem, 0.66rem + 0.12vw, 0.78rem);
}

.ide-tree-text,
.ide-lesson-item,
.ide-chat-bubble p,
.ide-editor-meta span {
  font-size: clamp(0.78rem, 0.74rem + 0.1vw, 0.84rem);
}

.ide-agent-feed,
.ide-lesson-list,
.ide-file-tree {
  padding-inline: 0.54rem;
}

.ide-chat-bubble p,
.ide-runtime-log,
.ide-terminal-log p,
.ide-empty {
  padding-left: 0.1rem;
}

.ide-editor-meta {
  padding-left: 0.62rem;
}

.ide-connection-dot.online {
  animation: ideStatusPulse 2.2s ease-in-out infinite;
}

@keyframes ideCardIn {
  from {
    opacity: 0;
    transform: translateY(7px) scale(0.996);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ideStatusPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(57, 178, 108, 0);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(57, 178, 108, 0.16);
  }
}

@media (max-width: 980px) {
  .ide-card-head h2 {
    font-size: clamp(0.88rem, 0.84rem + 0.18vw, 0.98rem);
  }

  .ide-btn {
    font-size: 0.75rem;
  }

  .ide-btn.small {
    font-size: 0.72rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ide-card,
  .ide-btn,
  .ide-send-btn,
  .ide-tree-node,
  .ide-lesson-item,
  .ide-chat-bubble,
  .ide-connection-dot.online {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* ============================================
   IDE Beginner UX + Dark Studio Panels
   ============================================ */

.ide-btn-help {
  border-color: #9bb8ff;
  background: linear-gradient(180deg, #eaf1ff 0%, #dce8ff 100%);
  color: #2f4c84;
  font-weight: 700;
}

.ide-btn-help:hover {
  border-color: #7fa3fb;
  background: linear-gradient(180deg, #dbe8ff 0%, #d0e1ff 100%);
}

.ide-card-preview,
.ide-card-editor {
  border-color: #293750;
  background: #111826;
  box-shadow: 0 12px 26px rgba(17, 28, 46, 0.36);
}

.ide-card-preview .ide-card-head,
.ide-card-editor .ide-card-head {
  border-bottom: 1px solid #2c3b55;
  background: linear-gradient(180deg, #1a2538 0%, #131c2b 100%);
}

.ide-card-preview .ide-card-head h2,
.ide-card-editor .ide-card-head h2 {
  color: #d7e5ff;
}

.ide-card-preview .head-actions .ide-btn,
.ide-card-editor .head-actions .ide-btn {
  border-color: #40537a;
  background: #22314b;
  color: #d9e7ff;
}

.ide-card-preview .head-actions .ide-btn:hover,
.ide-card-editor .head-actions .ide-btn:hover {
  border-color: #6585bf;
  background: #2b3f62;
}

.ide-card-preview .head-actions .ide-btn.active,
.ide-card-editor .head-actions .ide-btn.active {
  border-color: #6ea2ff;
  background: #28509c;
  color: #f3f8ff;
}

.ide-preview-frame-wrap {
  background: #0d1320;
}

.ide-preview-frame-wrap iframe {
  border: 1px solid #2d3d59;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(6, 10, 20, 0.42);
}

.ide-preview-frame-wrap.mobile iframe {
  border: 8px solid #121a2a;
}

.ide-runtime-preview {
  border-color: #2d3d59;
  background: #0d131f;
}

.ide-runtime-head {
  border-bottom: 1px solid #2d3d59;
  background: #151f31;
}

.ide-runtime-head strong {
  color: #d5e4ff;
}

.ide-runtime-log {
  color: #d2ddf3;
  background: #0f1625;
}

.ide-editor-meta {
  border-bottom: 1px solid #2d3d59;
  background: #141d2d;
}

.ide-editor-meta span {
  color: #9fb2d4;
}

.ide-editor-meta strong {
  color: #dbe8ff;
}

.ide-code-pane {
  background: #0f141d;
}

.ide-line-numbers {
  border-right: 1px solid #26344b;
  background: #111823;
  color: #7082a6;
}

.ide-line-numbers span.has-error {
  color: #ff8ea3;
}

.ide-highlight {
  color: #d4d4d4;
}

.ide-code-stack textarea {
  caret-color: #deebff;
}

.ide-code-stack textarea::selection {
  background: rgba(94, 151, 255, 0.34);
}

.code-line.has-error {
  text-decoration-color: #ff6b89;
}

.ide-terminal-pane {
  background: #0f141d;
}

.ide-terminal-log {
  background: #0d1118;
  border-bottom: 1px solid #2d3d59;
}

.ide-terminal-log .line-input {
  color: #a8c8ff;
}

.ide-terminal-log .line-system {
  color: #dbe6fb;
}

.ide-terminal-log .line-warn {
  color: #ffd59d;
}

.ide-terminal-log .line-error {
  color: #ff9fb1;
}

.ide-inline-form {
  background: #171f2e;
}

.ide-inline-form input {
  border: 1px solid #3b4c6b;
  border-radius: 12px;
  background: #101726;
  color: #e7efff;
}

.ide-inline-form button {
  border: 1px solid #5f84c5;
  background: #2c4d84;
  color: #edf4ff;
}

.ide-card-editor .token-comment {
  color: #6a9955;
}

.ide-card-editor .token-string {
  color: #ce9178;
}

.ide-card-editor .token-keyword {
  color: #c586c0;
}

.ide-card-editor .token-tag,
.ide-card-editor .token-selector {
  color: #569cd6;
}

.ide-card-editor .token-attr,
.ide-card-editor .token-prop {
  color: #9cdcfe;
}

.ide-card-editor .token-number {
  color: #b5cea8;
}

.ide-card-editor .token-constant,
.ide-card-editor .token-value {
  color: #4fc1ff;
}

.ide-card-editor .token-muted {
  color: #7f8ca4;
}

.ide-help-overlay {
  position: absolute;
  inset: 0;
  z-index: 96;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.ide-help-overlay[hidden] {
  display: none !important;
}

.ide-help-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(8, 12, 20, 0.46);
}

.ide-help-card {
  position: relative;
  z-index: 1;
  width: min(680px, calc(100% - 1rem));
  border: 1px solid #ceddfc;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 28px 48px rgba(55, 84, 132, 0.24);
  padding: 1rem;
  display: grid;
  gap: 0.82rem;
}

.ide-help-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.ide-help-head h3 {
  margin: 0;
  font-size: clamp(0.96rem, 0.9rem + 0.2vw, 1.08rem);
  color: #314970;
}

.ide-help-steps {
  margin: 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 0.5rem;
  color: #394f75;
}

.ide-help-steps li {
  font-size: clamp(0.82rem, 0.78rem + 0.12vw, 0.9rem);
  line-height: 1.52;
}

.ide-help-steps strong {
  color: #2450a6;
  margin-right: 0.2rem;
}

.ide-help-steps em {
  color: #3f65c3;
  font-style: normal;
  font-weight: 700;
}

.ide-help-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.ide-help-item {
  border: 1px solid #d7e5ff;
  border-radius: 14px;
  background: #f7fbff;
  padding: 0.56rem 0.62rem;
}

.ide-help-item h4 {
  margin: 0 0 0.2rem;
  color: #2e4f8d;
  font-size: 0.83rem;
}

.ide-help-item p {
  margin: 0;
  color: #4b628f;
  font-size: 0.78rem;
  line-height: 1.45;
}

.ide-help-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.46rem;
}

.ide-help-tip {
  margin: 0;
  border: 1px dashed #cfdefc;
  border-radius: 14px;
  background: #f4f8ff;
  color: #4e638e;
  padding: 0.56rem 0.66rem;
  font-size: 0.82rem;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .ide-help-card {
    padding: 0.86rem;
    border-radius: 20px;
  }

  .ide-help-grid {
    grid-template-columns: 1fr;
  }

  .ide-help-actions .ide-btn {
    width: 100%;
  }
}

/* ============================================
   Theme correction: keep white shell, dark work panes only
   ============================================ */

.ide-card-preview,
.ide-card-editor {
  border: 1px solid var(--ide-border);
  background: var(--ide-surface);
  box-shadow: 0 10px 28px rgba(58, 89, 145, 0.08);
}

.ide-card-preview .ide-card-head,
.ide-card-editor .ide-card-head {
  border-bottom: 1px solid var(--ide-border);
  background: linear-gradient(180deg, #f8fbff 0%, #f2f7ff 100%);
}

.ide-card-preview .ide-card-head h2,
.ide-card-editor .ide-card-head h2 {
  color: var(--ide-text);
}

.ide-card-preview .head-actions .ide-btn,
.ide-card-editor .head-actions .ide-btn {
  border-color: var(--ide-border);
  background: var(--ide-surface-soft);
  color: var(--ide-text);
}

.ide-card-preview .head-actions .ide-btn:hover,
.ide-card-editor .head-actions .ide-btn:hover {
  border-color: var(--ide-border-strong);
  background: #e6efff;
}

.ide-card-preview .head-actions .ide-btn.active,
.ide-card-editor .head-actions .ide-btn.active {
  border-color: #99b8ff;
  background: #dbe9ff;
  color: var(--ide-accent-strong);
}

/* ============================================
   Final correction: white panes + dark text only
   ============================================ */

.ide-preview-frame-wrap {
  background: #f7fbff;
}

.ide-preview-frame-wrap iframe {
  border: 1px solid #d4e2fd;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(74, 102, 150, 0.1);
}

.ide-preview-frame-wrap.mobile iframe {
  border: 8px solid #f3f7ff;
}

.ide-runtime-preview {
  border: 1px solid var(--ide-border);
  border-radius: 16px;
  background: #f8fbff;
}

.ide-runtime-head {
  border-bottom: 1px solid var(--ide-border);
  background: #eef4ff;
}

.ide-runtime-head strong {
  color: #314772;
}

.ide-runtime-log {
  color: #324667;
  background: #f9fbff;
}

.ide-editor-meta {
  border-bottom: 1px solid var(--ide-border);
  background: #f2f7ff;
}

.ide-editor-meta span {
  color: #63779f;
}

.ide-editor-meta strong {
  color: #2f4368;
}

.ide-code-pane {
  background: #ffffff;
}

.ide-line-numbers {
  border-right: 1px solid #dce8ff;
  background: #f4f8ff;
  color: #90a2c6;
}

.ide-line-numbers span.has-error {
  color: #d95770;
}

.ide-highlight {
  color: #273a59;
}

.ide-code-stack textarea {
  caret-color: #284e98;
}

.ide-code-stack textarea::selection {
  background: rgba(91, 141, 255, 0.23);
}

.code-line.has-error {
  text-decoration-color: #df4f6e;
}

.ide-terminal-pane {
  background: #ffffff;
}

.ide-terminal-log {
  background: #f8fbff;
  border-bottom: 1px solid var(--ide-border);
}

.ide-terminal-log .line-input {
  color: #3f6ac4;
}

.ide-terminal-log .line-system {
  color: #324667;
}

.ide-terminal-log .line-warn {
  color: #b07408;
}

.ide-terminal-log .line-error {
  color: #c93755;
}

.ide-inline-form {
  background: #f3f8ff;
}

.ide-inline-form input {
  border: 1px solid #cfdefa;
  border-radius: 12px;
  background: #ffffff;
  color: var(--ide-text);
}

.ide-inline-form button {
  border: 1px solid #9cbcff;
  background: #dce9ff;
  color: #315ea8;
}

.ide-card-editor .token-comment {
  color: #6c7b92;
}

.ide-card-editor .token-string {
  color: #af5a7a;
}

.ide-card-editor .token-keyword {
  color: #6556d8;
}

.ide-card-editor .token-tag,
.ide-card-editor .token-selector {
  color: #2f7ad8;
}

.ide-card-editor .token-attr,
.ide-card-editor .token-prop {
  color: #2c8f92;
}

.ide-card-editor .token-number {
  color: #a56821;
}

.ide-card-editor .token-constant,
.ide-card-editor .token-value {
  color: #1e76a9;
}

.ide-card-editor .token-muted {
  color: #7f91b0;
}

/* ============================================
   Agent model switch + typing animation + editor overlap fix
   ============================================ */

.ide-card-agent .ide-card-head {
  align-items: center;
}

.ide-card-agent .ide-card-head .head-actions {
  margin-left: auto;
  gap: 0.34rem;
  flex-wrap: wrap;
  position: relative;
  justify-content: flex-end;
}

.ide-model-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.ide-model-trigger {
  min-height: 30px !important;
  padding-inline: 0.64rem !important;
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
}

.ide-model-trigger [data-ai-model-current] {
  font-weight: 700;
  color: #34558f;
  white-space: nowrap;
}

.ide-model-caret {
  font-size: 0.72rem;
  color: #5370a5;
}

.ide-model-popup {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  min-width: 120px;
  border: 1px solid #cdddfb;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 10px 20px rgba(65, 96, 151, 0.2);
  padding: 0.24rem;
  display: grid;
  gap: 0.2rem;
}

.ide-model-popup[hidden] {
  display: none !important;
}

.ide-model-option {
  border: 1px solid #dbe6fb;
  border-radius: 10px;
  background: #f6faff;
  color: #335286;
  min-height: 30px;
  padding: 0.12rem 0.5rem;
  text-align: left;
  font-size: 0.74rem;
  font-weight: 700;
}

.ide-model-option:hover {
  background: #ebf3ff;
  border-color: #b8cdf8;
}

.ide-model-option.active {
  background: #dfeeff;
  border-color: #8fb3fb;
  color: #21488f;
}

.ide-chat-bubble.typing {
  background: #f4f8ff;
  border-style: dashed;
}

.ide-typing {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  min-height: 18px;
}

.ide-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #6f8fc9;
  animation: ideTypingDot 1.15s ease-in-out infinite;
}

.ide-typing-dot:nth-child(2) {
  animation-delay: 0.16s;
}

.ide-typing-dot:nth-child(3) {
  animation-delay: 0.32s;
}

@keyframes ideTypingDot {
  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.42;
  }
  40% {
    transform: translateY(-3px);
    opacity: 1;
  }
}

.ide-code-stack textarea[data-empty-state="true"] {
  display: none;
  pointer-events: none;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  caret-color: transparent;
}

body.ide-resizing iframe {
  pointer-events: none !important;
}

@media (max-width: 920px) {
  .ide-card-agent .ide-card-head {
    align-items: flex-start;
  }

  .ide-card-agent .ide-card-head .head-actions {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  .ide-model-popup {
    left: 0;
    right: auto;
  }

  .ide-card-files .ide-card-head .head-actions {
    flex-wrap: wrap;
  }
}

/* ============================================
   Main split resize (preview <-> editor/terminal)
   ============================================ */

.ide-column-main {
  grid-template-rows: var(--main-preview-height, 330px) 6px minmax(0, 1fr);
}

.ide-main-v-resizer {
  min-height: 6px;
}

.ide-workspace.is-main-preview .ide-column-main {
  grid-template-rows: 1fr 0 0;
}

.ide-workspace.is-main-preview .ide-main-v-resizer {
  display: none;
}

.ide-workspace.is-main-editor .ide-column-main {
  grid-template-rows: 0 0 1fr;
}

.ide-workspace.is-main-editor .ide-main-v-resizer {
  display: none;
}

.ide-workspace.is-preview-mobile:not(.is-main-preview):not(.is-main-editor) .ide-column-main {
  grid-template-columns: minmax(220px, var(--main-mobile-preview-width, 45%)) 6px minmax(220px, 1fr);
  grid-template-rows: 1fr;
}

.ide-workspace.is-preview-mobile:not(.is-main-preview):not(.is-main-editor) .ide-main-v-resizer {
  display: block;
  cursor: ew-resize;
}

.ide-workspace.is-preview-mobile:not(.is-main-preview):not(.is-main-editor) .ide-main-v-resizer::before {
  width: 1px;
  height: 56px;
  background: #c4d6fc;
}

@media (max-width: 1080px) {
  .ide-column-main,
  .ide-workspace.is-main-preview .ide-column-main,
  .ide-workspace.is-main-editor .ide-column-main {
    grid-template-rows: minmax(260px, 0.48fr) 6px minmax(260px, 0.52fr);
  }

  .ide-workspace.is-main-preview .ide-card-editor,
  .ide-workspace.is-main-editor .ide-card-preview {
    display: grid;
  }
}

/* ============================================
   Request patch: layout, help, chat sessions
   ============================================ */

.ide-workspace {
  --file-width: 320px;
  --main-preview-height: 560px;
  --main-mobile-preview-width: 56%;
}

.ide-card-agent {
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
}

.ide-card-files .ide-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.36rem;
  padding: 0.46rem 0.54rem 0.38rem;
}

.ide-card-files .ide-card-head h2 {
  margin-top: 0.08rem;
  white-space: nowrap;
  line-height: 1.15;
}

.ide-card-files .ide-card-head .head-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 0.3rem;
  overflow-x: auto;
  max-width: 100%;
  padding-bottom: 0.04rem;
}

.ide-card-files .ide-card-head .head-actions .ide-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  white-space: nowrap !important;
  word-break: keep-all;
}

.ide-tree-node {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.ide-tree-text {
  font-weight: 560;
}

.ide-tree-node.folder .ide-tree-text {
  color: #35558f;
  font-weight: 670;
}

.ide-tree-node.file .ide-tree-text {
  color: #344264;
  font-weight: 530;
}

.ide-tree-kind {
  border: 1px solid #d5e2fb;
  border-radius: 999px;
  background: #f2f7ff;
  color: #6078a8;
  padding: 0.08rem 0.36rem;
  font-size: 0.66rem;
  font-weight: 600;
  white-space: nowrap;
}

.ide-chat-session-strip {
  border-top: 1px solid var(--ide-border);
  border-bottom: 1px solid var(--ide-border);
  background: #f7fbff;
  padding: 0.32rem 0.42rem;
  display: flex;
  align-items: center;
  gap: 0.42rem;
  min-height: 44px;
}

.ide-chat-session-list-wrap {
  flex: 1;
  min-width: 0;
}

.ide-chat-session-list {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.3rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0;
}

.ide-chat-session-tab {
  border: 1px solid #cfdefc;
  border-radius: 999px;
  background: #eef4ff;
  color: #39588f;
  min-height: 28px;
  padding: 0.1rem 0.56rem;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  flex: 0 0 auto;
}

.ide-chat-session-tab.active {
  border-color: #95b6fb;
  background: #e0ecff;
  color: #224889;
}

.ide-chat-session-actions {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.28rem;
  flex: 0 0 auto;
}

.ide-chat-session-actions .ide-btn.small {
  min-height: 28px;
  font-size: 0.71rem;
  padding-inline: 0.52rem;
  white-space: nowrap;
}

.ide-typing-meta {
  margin-left: 0.24rem;
  font-size: 0.72rem;
  color: #627cae;
  font-weight: 600;
}

.ide-preview-frame-wrap.mobile {
  padding: 0.24rem;
}

.ide-preview-frame-wrap.mobile iframe {
  width: min(460px, 98%);
  max-height: 100%;
  aspect-ratio: 9 / 19;
}

.ide-workspace.is-preview-mobile:not(.is-main-preview):not(.is-main-editor) .ide-column-main {
  grid-template-columns: minmax(260px, var(--main-mobile-preview-width, 56%)) 6px minmax(240px, 1fr);
}

.ide-help-backdrop {
  background: rgba(12, 18, 31, 0.22);
  backdrop-filter: blur(5px);
}

.ide-help-overlay {
  padding: 0.7rem;
}

.ide-help-card {
  width: min(560px, calc(100% - 1rem));
}

.ide-help-zones {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ide-help-zone {
  position: absolute;
  border: 2px solid #8fb5ff;
  border-radius: 14px;
  background: rgba(226, 239, 255, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62);
  padding: 0.34rem 0.44rem;
  max-width: min(220px, 46vw);
  display: grid;
  gap: 0.06rem;
}

.ide-help-zone strong {
  color: #1f3f78;
  font-size: 0.78rem;
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

.ide-help-zone span {
  color: #365682;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
}

.ide-help-zone.is-lecture {
  left: 1.1%;
  top: 8.4%;
  width: 27.2%;
  min-height: 34%;
}

.ide-help-zone.is-agent {
  left: 1.1%;
  top: 50.2%;
  width: 27.2%;
  min-height: 41%;
}

.ide-help-zone.is-files {
  left: 30.2%;
  top: 8.4%;
  width: 18.6%;
  min-height: 82.4%;
}

.ide-help-zone.is-preview {
  left: 50.6%;
  top: 8.4%;
  width: 48%;
  min-height: 46%;
}

.ide-help-zone.is-editor {
  left: 50.6%;
  top: 56.4%;
  width: 48%;
  min-height: 34.4%;
}

@media (max-width: 980px) {
  .ide-card-files .ide-card-head {
    grid-template-columns: 1fr;
  }

  .ide-card-files .ide-card-head .head-actions {
    justify-content: flex-start;
    flex-wrap: nowrap;
  }

  .ide-help-zones {
    display: none;
  }

  .ide-chat-session-strip {
    gap: 0.3rem;
    padding-inline: 0.32rem;
  }

  .ide-chat-session-actions .ide-btn.small {
    padding-inline: 0.44rem;
  }
}

/* ============================================
   Section Help + Hover Tooltip + Header Spacing
   ============================================ */

.ide-card-files .ide-card-head,
.ide-card-preview .ide-card-head {
  padding-left: 0.62rem;
}

.ide-card-files .ide-card-head h2,
.ide-card-preview .ide-card-head h2 {
  padding-top: 0.08rem;
  padding-left: 0.14rem;
  min-width: 0;
  overflow: hidden;
}

.ide-title-row {
  display: inline-flex;
  align-items: center;
  gap: 0.24rem;
  min-width: 0;
  max-width: 100%;
}

.ide-title-row > span:last-child {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ide-section-help-btn {
  width: 14px;
  height: 14px;
  border: 1px solid #a9c3f6;
  border-radius: 999px;
  background: #edf4ff;
  color: #3c5f98;
  font-size: 0.56rem;
  font-weight: 800;
  line-height: 1;
  display: inline-grid;
  place-items: center;
  padding: 0;
  flex: 0 0 auto;
}

.ide-section-help-btn:hover {
  border-color: #7fa6ef;
  background: #e2edff;
}

.ide-section-help-btn.active {
  border-color: #5f8ee8;
  background: #d9e7ff;
  color: #214b97;
}

.ide-inline-help {
  margin: 0.34rem 0.5rem 0;
  border: 1px solid #d5e4fd;
  border-radius: 12px;
  background: #f6faff;
  padding: 0.42rem 0.5rem;
  display: grid;
  gap: 0.16rem;
}

.ide-inline-help[hidden] {
  display: none !important;
}

.ide-inline-help strong {
  font-size: 0.74rem;
  color: #315792;
  font-weight: 800;
}

.ide-inline-help p {
  margin: 0;
  font-size: 0.74rem;
  color: #4b638f;
  line-height: 1.45;
}

.ide-hover-tooltip {
  position: absolute;
  z-index: 120;
  max-width: min(260px, calc(100% - 16px));
  border: 1px solid #bfd4fd;
  border-radius: 10px;
  background: #ffffff;
  color: #2f4b7b;
  padding: 0.34rem 0.44rem;
  font-size: 0.71rem;
  font-weight: 700;
  line-height: 1.36;
  box-shadow: 0 10px 20px rgba(44, 72, 118, 0.18);
  pointer-events: none;
}

.ide-hover-tooltip[hidden] {
  display: none !important;
}

.ide-agent-form {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.ide-attach-chip.external .chip-type {
  border: 1px solid #c6d9fb;
  border-radius: 999px;
  background: #f2f7ff;
  color: #4f71ab;
  font-size: 0.64rem;
  font-weight: 800;
  padding: 0.02rem 0.28rem;
}

.ide-card-files .ide-card-head {
  grid-template-columns: minmax(118px, 1fr) auto;
  gap: 0.42rem;
}

/* ============================================
   Creative mode + import/export + header fix
   ============================================ */

.ide-workspace.is-creative-mode .ide-shell {
  grid-template-columns: var(--file-width) var(--resizer-width) minmax(0, 1fr);
}

.ide-workspace.is-creative-mode .ide-column-left,
.ide-workspace.is-creative-mode [data-resizer="left"] {
  display: none !important;
}

.ide-workspace.is-creative-mode .ide-column-files,
.ide-workspace.is-creative-mode .ide-column-main {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.ide-card-files .ide-card-head {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 0.3rem;
  column-gap: 0.42rem;
}

.ide-card-files .ide-card-head h2 {
  flex: 0 1 auto;
  max-width: 46%;
}

.ide-card-files .ide-card-head .head-actions {
  display: flex;
  flex: 1 1 260px;
  justify-content: flex-end;
  flex-wrap: wrap !important;
  overflow: visible !important;
  gap: 0.3rem;
}

.ide-card-files .ide-card-head .head-actions .ide-btn {
  min-width: 62px;
  line-height: 1.2;
  padding-inline: 0.52rem;
}

@media (max-width: 980px) {
  .ide-card-files .ide-card-head h2 {
    max-width: 100%;
  }

  .ide-card-files .ide-card-head .head-actions {
    justify-content: flex-start;
  }
}

.ide-export-overlay,
.ide-import-overlay {
  position: absolute;
  inset: 0;
  z-index: 98;
  display: grid;
  place-items: center;
  padding: 0.9rem;
}

.ide-export-overlay[hidden],
.ide-import-overlay[hidden] {
  display: none !important;
}

.ide-export-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(10, 16, 28, 0.38);
  backdrop-filter: blur(4px);
}

.ide-export-card {
  position: relative;
  z-index: 1;
  width: min(440px, calc(100% - 1rem));
  border: 1px solid #c8dafc;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 22px 38px rgba(42, 66, 110, 0.22);
  padding: 0.8rem;
  display: grid;
  gap: 0.7rem;
}

.ide-import-card {
  width: min(420px, calc(100% - 1rem));
}

.ide-export-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

.ide-export-head h3 {
  margin: 0;
  font-size: 0.96rem;
  color: #2f4e86;
}

.ide-export-body {
  display: grid;
  gap: 0.44rem;
}

.ide-export-option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid #d9e6ff;
  border-radius: 12px;
  background: #f7fbff;
  padding: 0.42rem 0.5rem;
  color: #355684;
  font-size: 0.79rem;
  font-weight: 650;
}

.ide-export-option input {
  margin: 0;
}

.ide-export-meta {
  margin: 0.1rem 0 0;
  color: #5a729b;
  font-size: 0.74rem;
  line-height: 1.45;
}

.ide-export-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.38rem;
}

.ide-import-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem;
}

.ide-import-project-list {
  display: grid;
  gap: 0.34rem;
  max-height: 220px;
  overflow: auto;
  padding-right: 0.1rem;
}

.ide-import-project-item {
  border: 1px solid #d6e4ff;
  border-radius: 12px;
  background: #f7fbff;
  color: #355584;
  text-align: left;
  padding: 0.42rem 0.5rem;
  display: grid;
  gap: 0.1rem;
}

.ide-import-project-item strong {
  font-size: 0.78rem;
}

.ide-import-project-item span {
  font-size: 0.7rem;
  color: #58749e;
}

.ide-import-project-item:hover {
  border-color: #9dbcf8;
  background: #eef5ff;
}

.ide-energy-badge.is-low {
  border-color: #f2bf56;
  background: #fff3d5;
  color: #855000;
}

.ide-energy-badge.is-critical,
.ide-energy-badge.is-empty {
  border-color: #f29a9a;
  background: #ffe8e8;
  color: #9e2f2f;
}

/* ============================================
   Request update: autosave, export checklist, creative mode, chat summary
   ============================================ */

.ide-app-topbar-right {
  gap: 0.52rem;
}

.ide-app-topbar-right .ide-btn {
  min-height: 31px;
  padding: 0.18rem 0.58rem;
  font-size: 0.73rem;
  letter-spacing: -0.01em;
}

.ide-app-topbar-left {
  gap: 0.62rem;
}

.ide-theme-toggle {
  min-height: 28px !important;
  padding-inline: 0.56rem !important;
}

.ide-btn-user-link {
  border-color: #b9a0f8 !important;
  background: linear-gradient(180deg, #f2ecff 0%, #e5d7ff 100%) !important;
  color: #5e3cab !important;
  box-shadow: 0 6px 12px rgba(126, 92, 196, 0.18);
  font-weight: 750;
}

.ide-btn-user-link:hover {
  border-color: #a78cee !important;
  background: linear-gradient(180deg, #ece3ff 0%, #dbcaff 100%) !important;
  box-shadow: 0 8px 15px rgba(126, 92, 196, 0.24);
}

.ide-autosave-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 28px;
  border: 1px solid #cfe0ff;
  border-radius: 11px;
  background: #f5f9ff;
  color: #41618d;
  padding: 0.16rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

.ide-autosave-badge::before {
  content: "✓";
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid #9bc7a9;
  background: #ebf8ef;
  color: #2d8b4b;
  display: inline-grid;
  place-items: center;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1;
  opacity: 1;
}

.ide-autosave-badge.is-saving::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 2px solid #86a9e7;
  border-top-color: transparent;
  background: transparent;
  color: transparent;
  animation: ideSpin 0.86s linear infinite;
}

.ide-autosave-badge.is-error {
  border-color: #f1b9c3;
  background: #fff0f4;
  color: #ab3f59;
}

.ide-autosave-badge.is-error::before {
  content: "!";
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid #e58a9b;
  background: #ffe5eb;
  color: #b63e57;
  opacity: 1;
  animation: none;
}

.ide-inline-help {
  display: none !important;
}

@keyframes ideSpin {
  to {
    transform: rotate(360deg);
  }
}

.ide-chat-message-attachments {
  display: grid;
  gap: 0.16rem;
  margin-top: 0.1rem;
}

.ide-chat-message-attachments > span {
  font-size: 0.68rem;
  color: #5d74a0;
  font-weight: 700;
}

.ide-chat-message-attach-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.22rem;
}

.ide-chat-message-attach-list em {
  font-style: normal;
  border: 1px solid #cfdefb;
  border-radius: 999px;
  background: #edf4ff;
  color: #3f5889;
  padding: 0.04rem 0.36rem;
  font-size: 0.66rem;
  font-weight: 700;
}

.ide-chat-summary {
  margin-top: 0.16rem;
  border: 1px solid #cddcfa;
  border-radius: 10px;
  background: #f6faff;
  padding: 0.28rem 0.36rem;
  display: grid;
  gap: 0.1rem;
}

.ide-chat-summary strong {
  font-size: 0.68rem;
  color: #36588f;
  font-weight: 800;
}

.ide-chat-summary p {
  margin: 0;
  white-space: pre-wrap;
  font-size: 0.72rem;
  color: #344a75;
  line-height: 1.38;
}

.ide-chat-elapsed {
  margin-top: 0.14rem !important;
  font-size: 0.69rem !important;
  color: #5f76a3 !important;
  font-weight: 700;
}

.ide-export-select-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.ide-export-checklist {
  border: 1px solid #d9e6ff;
  border-radius: 12px;
  background: #f8fbff;
  max-height: 220px;
  overflow: auto;
  padding: 0.3rem;
  display: grid;
  gap: 0.18rem;
}

.ide-export-checklist[hidden] {
  display: none !important;
}

.ide-export-item {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 0.34rem;
  border: 1px solid #e4eeff;
  border-radius: 10px;
  background: #ffffff;
  padding: 0.22rem 0.36rem;
  padding-left: calc(0.3rem + var(--depth) * 0.7rem);
}

.ide-export-item .kind {
  border: 1px solid #d6e4ff;
  border-radius: 999px;
  background: #f0f6ff;
  color: #5c76a8;
  padding: 0.02rem 0.3rem;
  font-size: 0.64rem;
  font-weight: 700;
}

.ide-export-item .path {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #334c7a;
  font-size: 0.73rem;
}

.ide-workspace.is-creative-mode .ide-shell {
  grid-template-columns: var(--left-width) var(--resizer-width) var(--file-width) var(--resizer-width) minmax(0, 1fr);
}

.ide-workspace.is-creative-mode .ide-column-left {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) !important;
}

.ide-workspace.is-creative-mode [data-resizer="left"] {
  display: block !important;
}

.ide-workspace.is-creative-mode .ide-card-lecture,
.ide-workspace.is-creative-mode .ide-card-lessons,
.ide-workspace.is-creative-mode .ide-column-left > .ide-v-resizer {
  display: none !important;
}

.ide-workspace.is-creative-mode .ide-card-agent {
  display: grid !important;
}

.ide-model-option {
  display: grid;
  gap: 0.06rem;
}

.ide-model-option .model-name {
  font-size: 0.73rem;
  font-weight: 760;
  color: inherit;
}

.ide-model-option .model-desc {
  font-size: 0.64rem;
  color: #5a729d;
  line-height: 1.32;
}

.ide-workspace.is-dark-mode {
  --ide-bg: #0d131d;
  --ide-surface: #151f2f;
  --ide-surface-soft: #1e2b40;
  --ide-surface-soft-2: #23324a;
  --ide-border: #2c3d58;
  --ide-border-strong: #3a567e;
  --ide-text: #d9e6ff;
  --ide-text-muted: #9eb2d4;
  --ide-accent: #6ea7ff;
  --ide-accent-soft: #263958;
  --ide-accent-strong: #8ab8ff;
}

.ide-workspace.is-dark-mode .ide-app-topbar {
  border-color: #2e3f59;
  background: rgba(17, 25, 39, 0.9);
  box-shadow: 0 12px 24px rgba(2, 8, 18, 0.42);
}

.ide-workspace.is-dark-mode .ide-app-topbar-left strong,
.ide-workspace.is-dark-mode .ide-card-head h2,
.ide-workspace.is-dark-mode .ide-tree-text,
.ide-workspace.is-dark-mode .ide-editor-meta strong {
  color: #e2ecff !important;
}

.ide-workspace.is-dark-mode .ide-card,
.ide-workspace.is-dark-mode .ide-preview-frame-wrap,
.ide-workspace.is-dark-mode .ide-terminal-pane,
.ide-workspace.is-dark-mode .ide-code-pane,
.ide-workspace.is-dark-mode .ide-file-tree,
.ide-workspace.is-dark-mode .ide-lesson-list,
.ide-workspace.is-dark-mode .ide-agent-feed {
  background: #111a29 !important;
  border-color: #2a3a54 !important;
}

.ide-workspace.is-dark-mode .ide-card-head {
  background: #172235 !important;
  border-bottom-color: #2b3d58 !important;
}

.ide-workspace.is-dark-mode .ide-chat-bubble {
  background: #182538;
  border-color: #304564;
}

.ide-workspace.is-dark-mode .ide-chat-bubble p,
.ide-workspace.is-dark-mode .ide-empty,
.ide-workspace.is-dark-mode .ide-editor-meta span,
.ide-workspace.is-dark-mode .ide-runtime-log,
.ide-workspace.is-dark-mode .ide-terminal-log .line-system {
  color: #c3d3ef !important;
}

.ide-workspace.is-dark-mode .ide-btn {
  border-color: #3a4e73;
  background: #22324b;
  color: #d8e6ff;
}

.ide-workspace.is-dark-mode .ide-btn:hover {
  border-color: #5a78ad;
  background: #2a3e5d;
}

.ide-workspace.is-dark-mode .ide-autosave-badge {
  border-color: #3b5076;
  background: #1b2a3f;
  color: #c5d9ff;
}

.ide-workspace.is-dark-mode .ide-autosave-badge::before {
  border-color: #69be83;
  background: #1b3a2a;
  color: #8be3a7;
}

.ide-workspace.is-dark-mode .ide-autosave-badge.is-saving::before {
  border-color: #8fb4ff;
  border-top-color: transparent;
  background: transparent;
}

.ide-workspace.is-dark-mode .ide-btn-user-link {
  border-color: #7d64bb !important;
  background: linear-gradient(180deg, #3a2f58 0%, #2f2748 100%) !important;
  color: #e6dcff !important;
  box-shadow: 0 6px 14px rgba(24, 13, 51, 0.44);
}

/* ============================================
   Final layout pass: header spacing + file header stability
   ============================================ */

.ide-app-topbar-right {
  display: inline-flex;
  align-items: center;
  gap: 0.62rem;
  flex-wrap: wrap;
}

.ide-app-topbar-right .ide-btn {
  min-height: 30px;
  padding: 0.16rem 0.58rem;
  font-size: 0.72rem;
}

.ide-theme-toggle {
  min-height: 30px !important;
}

.ide-card-files .ide-card-head,
.ide-card-preview .ide-card-head {
  padding-left: 0.72rem;
}

.ide-card-files .ide-card-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.44rem;
  row-gap: 0.28rem;
  padding: 0.52rem 0.64rem 0.4rem 0.72rem;
}

.ide-card-files .ide-card-head h2 {
  margin: 0;
  min-width: 0;
  max-width: none;
  padding: 0;
  line-height: 1.18;
}

.ide-card-files .ide-card-head .head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap !important;
  gap: 0.28rem;
  overflow: visible !important;
  max-width: 100%;
  width: auto;
}

.ide-card-files .ide-card-head .head-actions .ide-btn {
  min-width: 72px;
  padding: 0.18rem 0.56rem;
  line-height: 1.18;
  white-space: nowrap !important;
}

.ide-section-help-btn {
  width: 12px;
  height: 12px;
  font-size: 0.52rem;
}

.ide-hover-tooltip {
  border-radius: 999px;
  padding: 0.16rem 0.46rem;
  font-size: 0.67rem;
  font-weight: 700;
  box-shadow: 0 6px 14px rgba(44, 72, 118, 0.14);
}

.ide-model-popup {
  min-width: 188px;
}

.ide-model-option {
  padding: 0.2rem 0.52rem;
}

.ide-model-option .model-name {
  font-size: 0.72rem;
}

.ide-model-option .model-desc {
  margin-top: 0.04rem;
  font-size: 0.62rem;
  line-height: 1.28;
}

@media (max-width: 1200px) {
  .ide-card-files .ide-card-head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .ide-card-files .ide-card-head .head-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 820px) {
  .ide-app-topbar-right {
    gap: 0.42rem;
  }

  .ide-app-topbar-right .ide-btn {
    padding-inline: 0.52rem;
    font-size: 0.71rem;
  }
}

/* ============================================
   Final correction: header/button/file-title + dark mode cleanup
   ============================================ */

.ide-app-topbar-left {
  display: flex;
  align-items: center;
  gap: 0.56rem;
  flex-wrap: wrap;
}

.ide-app-topbar-right {
  display: inline-flex;
  align-items: center;
  gap: 0.58rem;
  flex-wrap: wrap;
}

.ide-app-topbar-right .ide-btn {
  min-height: 30px;
  padding: 0.16rem 0.58rem;
}

[data-action="toggle-dark-mode"] {
  min-width: 84px;
}

.ide-btn-help,
.ide-btn-help:hover {
  border-color: var(--ide-border);
  background: var(--ide-surface-soft);
  color: var(--ide-text);
  box-shadow: none;
}

.ide-btn-user-link {
  border-color: #8e74ea !important;
  background: linear-gradient(180deg, #9c82f2 0%, #8266df 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 16px rgba(80, 53, 158, 0.24);
}

.ide-btn-user-link:hover {
  border-color: #7b5ddf !important;
  background: linear-gradient(180deg, #9377ee 0%, #7558d6 100%) !important;
  box-shadow: 0 10px 18px rgba(70, 46, 138, 0.28);
}

.ide-card-files .ide-card-head {
  display: grid !important;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  align-items: stretch;
  gap: 0.36rem;
  padding: 0.5rem 0.64rem 0.4rem 0.72rem;
}

.ide-card-files .ide-card-head h2 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: none;
  overflow: hidden;
  padding: 0;
}

.ide-card-files .ide-card-head .head-actions {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.24rem;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding-bottom: 0.02rem;
}

.ide-card-files .ide-card-head .head-actions .ide-btn {
  min-width: 64px;
  min-height: 25px;
  padding: 0.1rem 0.48rem;
  font-size: 0.69rem;
  line-height: 1.18;
  white-space: nowrap;
  flex: 0 0 auto;
}

@media (max-width: 1120px) {
  .ide-card-files .ide-card-head .head-actions {
    justify-content: flex-start !important;
  }
}

.ide-workspace.is-dark-mode {
  --ide-bg: #1a1d24;
  --ide-surface: #242a33;
  --ide-surface-soft: #2d343f;
  --ide-surface-soft-2: #343d49;
  --ide-border: #3a4351;
  --ide-border-strong: #4a586b;
  --ide-text: #e4e9f2;
  --ide-text-muted: #b4bfce;
  --ide-accent: #86a9ff;
  --ide-accent-soft: #33415a;
  --ide-accent-strong: #aac3ff;
  background:
    radial-gradient(circle at 12% 8%, rgba(126, 150, 196, 0.16), transparent 46%),
    radial-gradient(circle at 86% 92%, rgba(83, 97, 122, 0.18), transparent 44%),
    #1a1d24;
  color: #e4e9f2;
}

.ide-workspace.is-dark-mode .ide-app-topbar {
  border-color: #404a59;
  background: #262d38;
  box-shadow: 0 10px 20px rgba(12, 15, 20, 0.36);
}

.ide-workspace.is-dark-mode .ide-app-topbar-left strong,
.ide-workspace.is-dark-mode .ide-card-head h2,
.ide-workspace.is-dark-mode .ide-tree-text,
.ide-workspace.is-dark-mode .ide-editor-meta strong {
  color: #ecf1fa !important;
}

.ide-workspace.is-dark-mode .ide-card,
.ide-workspace.is-dark-mode .ide-file-tree,
.ide-workspace.is-dark-mode .ide-lesson-list,
.ide-workspace.is-dark-mode .ide-agent-feed,
.ide-workspace.is-dark-mode .ide-preview-frame-wrap,
.ide-workspace.is-dark-mode .ide-code-pane,
.ide-workspace.is-dark-mode .ide-terminal-pane {
  background: #242a33 !important;
  border-color: #3a4351 !important;
  box-shadow: 0 8px 18px rgba(12, 15, 20, 0.26);
}

.ide-workspace.is-dark-mode .ide-card-head {
  background: #2d343f !important;
  border-bottom-color: #3f4958 !important;
}

.ide-workspace.is-dark-mode .ide-empty,
.ide-workspace.is-dark-mode .ide-editor-meta span,
.ide-workspace.is-dark-mode .ide-runtime-log,
.ide-workspace.is-dark-mode .ide-terminal-log .line-system,
.ide-workspace.is-dark-mode .ide-chat-bubble p {
  color: #c8d2e2 !important;
}

.ide-workspace.is-dark-mode .ide-chat-bubble {
  background: #2b3340;
  border-color: #445165;
}

.ide-workspace.is-dark-mode .ide-chat-bubble.user {
  background: #33455f;
  border-color: #58739b;
}

.ide-workspace.is-dark-mode .ide-btn {
  border-color: #4b576a;
  background: #353f4d;
  color: #e7edf7;
}

.ide-workspace.is-dark-mode .ide-btn:hover {
  border-color: #62748f;
  background: #3d4959;
}

.ide-workspace.is-dark-mode .ide-btn.active {
  border-color: #88a7df;
  background: #445774;
  color: #f1f6ff;
}

.ide-workspace.is-dark-mode .ide-connection-dot {
  border-color: #4a586d;
  background: #2f3744;
  color: #cfdae8;
}

.ide-workspace.is-dark-mode .ide-autosave-badge {
  border-color: #4a586d;
  background: #2f3744;
  color: #dde6f6;
}

.ide-workspace.is-dark-mode .ide-tree-node:hover {
  border-color: #576782;
  background: #313b49;
}

.ide-workspace.is-dark-mode .ide-tree-node.active {
  border-color: #86a9df;
  background: #3d4c62;
}

.ide-workspace.is-dark-mode .ide-runtime-preview {
  border-color: #3d4758;
  background: #262d39;
}

.ide-workspace.is-dark-mode .ide-runtime-head {
  border-bottom-color: #3f4958;
  background: #2f3744;
}

.ide-workspace.is-dark-mode .ide-terminal-log {
  background: #262d39;
  border-bottom-color: #3f4958;
}

.ide-workspace.is-dark-mode .ide-line-numbers {
  border-right-color: #3f4958;
  background: #2a313d;
  color: #8fa0b8;
}

.ide-workspace.is-dark-mode .ide-inline-form,
.ide-workspace.is-dark-mode .ide-agent-form {
  background: #2a313d;
  border-top-color: #3f4958;
}

.ide-workspace.is-dark-mode .ide-inline-form input,
.ide-workspace.is-dark-mode .ide-agent-form textarea {
  border-color: #4a586d;
  background: #20262f;
  color: #ebf0fa;
}

.ide-workspace.is-dark-mode .ide-editor-meta {
  border-bottom-color: #3f4958 !important;
  background: #2a313d !important;
}

.ide-workspace.is-dark-mode .ide-chat-session-strip {
  border-top-color: #3f4958 !important;
  border-bottom-color: #3f4958 !important;
  background: #2a313d !important;
}

.ide-workspace.is-dark-mode .ide-chat-session-tab {
  border-color: #4f5d72 !important;
  background: #313b49 !important;
  color: #d8e2f2 !important;
}

.ide-workspace.is-dark-mode .ide-chat-session-tab.active {
  border-color: #89a6da !important;
  background: #3f4f65 !important;
  color: #eff5ff !important;
}

.ide-workspace.is-dark-mode .ide-energy-badge {
  border-color: #8d7b4a !important;
  background: #3a3425 !important;
  color: #f0dba4 !important;
}

.ide-workspace.is-dark-mode .ide-preview-frame-wrap iframe {
  border-color: #404b5c !important;
  background: #1f2631 !important;
  box-shadow: 0 8px 18px rgba(8, 10, 14, 0.32) !important;
}

.ide-workspace.is-dark-mode .ide-runtime-log,
.ide-workspace.is-dark-mode .ide-terminal-log {
  background: #242c38 !important;
}

.ide-workspace.is-dark-mode .ide-resizer::before,
.ide-workspace.is-dark-mode .ide-main-v-resizer::before,
.ide-workspace.is-dark-mode .ide-v-resizer::before {
  background: #56647a !important;
}

.ide-workspace.is-dark-mode .ide-hover-tooltip,
.ide-workspace.is-dark-mode .ide-model-popup,
.ide-workspace.is-dark-mode .ide-context-menu {
  border-color: #4a586d !important;
  background: #2b3340 !important;
  color: #e6edf9 !important;
  box-shadow: 0 10px 18px rgba(10, 13, 18, 0.34) !important;
}

.ide-workspace.is-dark-mode .ide-context-menu button {
  color: #e6edf9 !important;
  border-bottom-color: #3f4958 !important;
  background: transparent !important;
}

.ide-workspace.is-dark-mode .ide-context-menu button:hover {
  background: #374152 !important;
}

.ide-workspace.is-dark-mode .ide-card-preview .head-actions .ide-btn,
.ide-workspace.is-dark-mode .ide-card-editor .head-actions .ide-btn,
.ide-workspace.is-dark-mode .ide-card-agent .head-actions .ide-btn,
.ide-workspace.is-dark-mode .ide-card-files .head-actions .ide-btn {
  border-color: #4b576a !important;
  background: #353f4d !important;
  color: #e7edf7 !important;
}

.ide-workspace.is-dark-mode .ide-card-preview .head-actions .ide-btn:hover,
.ide-workspace.is-dark-mode .ide-card-editor .head-actions .ide-btn:hover,
.ide-workspace.is-dark-mode .ide-card-agent .head-actions .ide-btn:hover,
.ide-workspace.is-dark-mode .ide-card-files .head-actions .ide-btn:hover {
  border-color: #62748f !important;
  background: #3d4959 !important;
}

.ide-workspace.is-dark-mode .ide-card-preview .head-actions .ide-btn.active,
.ide-workspace.is-dark-mode .ide-card-editor .head-actions .ide-btn.active,
.ide-workspace.is-dark-mode .ide-card-agent .head-actions .ide-btn.active,
.ide-workspace.is-dark-mode .ide-card-files .head-actions .ide-btn.active {
  border-color: #88a7df !important;
  background: #445774 !important;
  color: #f1f6ff !important;
}

.ide-workspace.is-dark-mode .ide-tree-kind {
  border-color: #4d5e78 !important;
  background: #313b49 !important;
  color: #d8e2f2 !important;
}

.ide-workspace.is-dark-mode .ide-model-trigger {
  border-color: #5a6a84 !important;
  background: #3a4558 !important;
  color: #ecf2ff !important;
}

.ide-workspace.is-dark-mode .ide-model-trigger [data-ai-model-current] {
  color: #ecf2ff !important;
}

.ide-workspace.is-dark-mode .ide-model-caret {
  color: #d3def5 !important;
}

.ide-workspace.is-dark-mode .ide-model-option {
  border-color: #4d5d77 !important;
  background: #323d4e !important;
  color: #e5edfb !important;
}

.ide-workspace.is-dark-mode .ide-model-option.active {
  border-color: #88a7df !important;
  background: #445774 !important;
  color: #f1f6ff !important;
}

.ide-workspace.is-dark-mode .ide-chat-bubble {
  background: #323d4e !important;
  border-color: #4f5f78 !important;
}

.ide-workspace.is-dark-mode .ide-chat-bubble.user {
  background: #425473 !important;
  border-color: #6787b8 !important;
}

.ide-workspace.is-dark-mode .ide-chat-bubble strong {
  color: #dbe7ff !important;
}

.ide-workspace.is-dark-mode .ide-chat-bubble p {
  color: #eef4ff !important;
}

.ide-workspace.is-dark-mode .ide-chat-message-attachments > span {
  color: #cfe0ff !important;
}

.ide-workspace.is-dark-mode .ide-chat-message-attach-list em {
  border-color: #5a6d8f !important;
  background: #3b4a61 !important;
  color: #e3ecff !important;
}

.ide-workspace.is-dark-mode .ide-chat-summary {
  border-color: #586a87 !important;
  background: #344154 !important;
}

.ide-workspace.is-dark-mode .ide-chat-summary strong {
  color: #d7e5ff !important;
}

.ide-workspace.is-dark-mode .ide-chat-summary p {
  color: #ecf3ff !important;
}

.ide-workspace.is-dark-mode .ide-chat-elapsed {
  color: #c2d3f3 !important;
}