/* ============================================================
   DLOUDYY 代码工坊 — Monochrome Code Studio
   ============================================================ */

.studio-body { overflow: hidden; height: 100dvh; display: flex; flex-direction: column; }

.studio-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px clamp(16px, 3vw, 36px);
  border-bottom: 1px solid var(--line);
  background: rgba(10,10,10,0.9);
  backdrop-filter: blur(14px);
}
.sandbox-badge {
  font-size: 9.5px; letter-spacing: 0.16em; color: var(--muted);
  border: 1px solid var(--line-strong); padding: 7px 12px;
  white-space: nowrap;
}
.studio-header .header-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }

/* ---------- 工具栏 ---------- */
.studio-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 12px clamp(16px, 3vw, 36px);
  border-bottom: 1px solid var(--line);
}
.lang-tabs { display: flex; gap: 0; border: 1px solid var(--line-strong); flex-wrap: wrap; }
.lang-tabs button {
  padding: 8px 16px; background: transparent; color: var(--muted);
  border: none; border-right: 1px solid var(--line);
  cursor: pointer; font-family: var(--font-sans); font-size: 12.5px; font-weight: 500;
  transition: background 0.3s, color 0.3s;
  display: flex; align-items: baseline; gap: 6px;
}
.lang-tabs button:last-child { border-right: none; }
.lang-tabs button em {
  font-style: normal; font-family: var(--font-mono); font-size: 8.5px; color: var(--faint);
}
.lang-tabs button.active { background: var(--ink); color: var(--bg); }
.lang-tabs button.active em { color: rgba(10,10,10,0.55); }
.lang-tabs button:hover:not(.active) { color: var(--ink); }

.tools { display: flex; gap: 10px; }
.tools button {
  padding: 9px 18px; cursor: pointer;
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; letter-spacing: 0.06em;
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink);
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.tools button:hover { border-color: var(--ink); }
.tools .t-run { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tools .t-run:hover { background: transparent; color: var(--ink); }

/* ---------- 主区 ---------- */
.studio-main {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--line);
}
.editor-pane, .output-pane {
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
}
.editor-pane { border-right: 1px solid var(--line); }

.pane-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-bottom: 1px solid var(--line);
  font-size: 9.5px; letter-spacing: 0.2em; color: var(--faint);
}
.pane-head b { color: var(--ink); font-weight: 500; }
.pane-head .hint { color: var(--faint); }

.editor-wrap { flex: 1; display: flex; min-height: 0; background: #0d0d0d; }
.gutter {
  padding: 14px 10px 14px 14px; text-align: right;
  font-size: 12px; line-height: 1.75; color: #4a4a46;
  user-select: none; overflow: hidden; min-width: 44px;
  border-right: 1px solid var(--line);
  white-space: pre;
}
#codeInput {
  flex: 1; padding: 14px; resize: none; border: none; outline: none;
  background: transparent; color: #e8e8e2;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.75;
  white-space: pre; overflow: auto;
  tab-size: 2;
}
#codeInput::placeholder { color: #3d3d3a; }
#codeInput::-webkit-scrollbar, .term-out::-webkit-scrollbar { width: 8px; height: 8px; }
#codeInput::-webkit-scrollbar-thumb, .term-out::-webkit-scrollbar-thumb { background: #2c2c2a; }

.output-body { flex: 1; min-height: 0; position: relative; background: #101010; }
#previewFrame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: none; background: #fff;
}
#previewFrame.hidden { display: none; }
.terminal {
  position: absolute; inset: 0; display: none;
  flex-direction: column; padding: 16px; overflow: auto;
}
.terminal.show { display: flex; }
.term-out { font-size: 12px; line-height: 2; color: #d8d8d2; white-space: pre-wrap; word-break: break-all; }
.term-out .t-prompt { color: var(--faint); }
.term-out .t-ok { color: var(--ink); }
.term-out .t-dim { color: var(--faint); }
.term-cursor {
  display: inline-block; width: 7px; height: 13px; background: #d8d8d2;
  vertical-align: -2px; animation: blink 1s steps(1) infinite;
}

.studio-note {
  padding: 10px clamp(16px, 3vw, 36px);
  font-size: 9.5px; letter-spacing: 0.08em; color: var(--faint); line-height: 1.9;
}

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .studio-body { overflow: auto; height: auto; }
  .studio-main { grid-template-columns: 1fr; }
  .editor-pane { border-right: none; border-bottom: 1px solid var(--line); }
  .editor-wrap { height: 320px; }
  .output-body { height: 340px; }
  .sandbox-badge { display: none; }
}