/* ============================================================
   code.css — 独立代码编辑器页（全屏）
   复用 extras.css 的编辑器样式（ed-chrome / ed-wrap / tk-* 等）
   ============================================================ */

/* ---------- 应用容器：更宽、更沉浸 ---------- */
.code-app {
  max-width: 1560px;
  margin: 0 auto;
  padding: 22px 28px 28px;
  min-height: calc(100vh - 140px);
}

/* ---------- 语言 chips ---------- */
.code-lang-chips { justify-content: center; margin-bottom: 18px; }

/* ---------- 选题面板 ---------- */
#cePicker { margin-bottom: 30px; }

/* ============================================================
   全屏编辑器视图
   ============================================================ */
.ce-topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 2px 14px;
}
.ce-title {
  font-family: var(--font-display, 'Noto Serif SC', serif);
  font-size: 21px;
  font-weight: 700;
  color: var(--text, #2A2620);
}
.ce-badges { display: flex; align-items: center; gap: 8px; }
#ceDesc {
  cursor: pointer;
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: border-color 0.18s ease, color 0.18s ease;
}
#ceDesc:hover { border-color: var(--accent-glow, rgba(193,138,74,0.4)); color: var(--accent-deep, #9C6A33); }
.ce-actions { margin-left: auto; display: flex; gap: 10px; }
.ce-actions .btn { padding: 8px 16px; font-size: 13.5px; }

/* ---------- 对照检查结果条 ---------- */
.ce-check-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  margin-bottom: 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid transparent;
  animation: viewIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ce-check-bar.ccb-ok {
  background: rgba(122, 168, 96, 0.10);
  border-color: rgba(122, 168, 96, 0.4);
  color: #5c8443;
}
.ce-check-bar.ccb-diff {
  background: rgba(194, 74, 63, 0.08);
  border-color: rgba(194, 74, 63, 0.35);
  color: #b05448;
}
.ccb-icon { font-size: 16px; }
.ccb-close {
  margin-left: auto;
  border: none;
  background: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  padding: 2px 6px;
  border-radius: 6px;
}
.ccb-close:hover { opacity: 1; background: rgba(0,0,0,0.05); }

/* ---------- 编辑器：占满视口剩余空间 ---------- */
.ce-full {
  height: calc(100vh - 232px);
  min-height: 560px;
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
  border-radius: 16px;
  box-shadow: 0 18px 52px rgba(42, 38, 32, 0.14), 0 4px 14px rgba(42, 38, 32, 0.08);
}
.ce-full .ed-body {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow: hidden;
}
.ce-full .ed-wrap {
  height: 100%;
  min-height: 0;
  overflow: auto;
}

/* 字号与呼吸感：全屏页比打字页内嵌编辑器更大一号 */
.ce-full .ed-highlight,
.ce-full .ed-input {
  font-size: 15px;
  line-height: 1.9;
  padding: 0 20px;
}
.ce-full .ed-gutter {
  width: 64px;
  padding-right: 14px;
  font-size: 13px;
}
.ce-full .ed-chrome {
  padding: 12px 18px;
}
.ce-full .ed-tab {
  font-size: 13px;
  padding: 4px 14px;
}

/* hidden 属性保护（display:flex 等会覆盖 hidden） */
.ce-check-bar[hidden] { display: none; }
#ceRefModal[hidden] { display: none; }

/* ============================================================
   参考答案模态
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(42, 38, 32, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: ccbFade 0.25s ease both;
}
@keyframes ccbFade { from { opacity: 0; } to { opacity: 1; } }
.modal-panel {
  background: var(--card, #FFFCF5);
  border: 1px solid var(--border, rgba(74,56,32,0.09));
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(42, 38, 32, 0.28);
  animation: viewIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.modal-close {
  border: none;
  background: none;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted, #8E8472);
  padding: 4px 10px;
  border-radius: 8px;
}
.modal-close:hover { color: var(--text, #2A2620); background: rgba(0,0,0,0.05); }
.ce-ref-panel {
  width: min(760px, 92vw);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 0;
}
.modal-header h3 {
  font-family: var(--font-display, 'Noto Serif SC', serif);
  font-size: 20px;
  color: var(--text, #2A2620);
}
.ce-ref-body { padding: 14px 22px 22px; overflow: auto; }
.ce-ref-desc {
  font-size: 13.5px;
  color: var(--text-muted, #8E8472);
  line-height: 1.7;
  margin: 0 0 12px;
}
.ce-ref-code { max-height: 62vh; overflow: auto; cursor: default; }

/* ---------- 移动端 ---------- */
@media (max-width: 640px) {
  .code-app { padding: 16px 12px 24px; }
  .ce-topbar { gap: 8px; }
  .ce-title { font-size: 17px; }
  .ce-actions { margin-left: 0; width: 100%; }
  .ce-actions .btn { flex: 1; padding: 8px 10px; }
  #ceDesc { display: none; }
  .ce-full { height: calc(100vh - 290px); min-height: 340px; }
  .ce-full .ed-highlight, .ce-full .ed-input { font-size: 13px; padding: 0 12px; }
  .ce-full .ed-gutter { width: 44px; padding-right: 8px; font-size: 11px; }
}