/* ============================================================
   BIYAPOINT — editor-style code blocks (see assets/js/code-editor.js)
   A dark theme close to what developers already read all day.
   ============================================================ */
.ce {
  --ce-bg: #0D1117;
  --ce-bar: #161B22;
  --ce-line: #21262D;
  --ce-text: #D6DEEB;
  --ce-gutter: #4B5563;
  background: var(--ce-bg);
  border: 1px solid #1F2630;
  border-radius: 10px;
  overflow: hidden;
  font-family: var(--mono);
  min-width: 0;
}
.ce + .ce { margin-top: 12px; }
.ce-bar {
  display: flex; align-items: center; gap: 12px;
  height: 38px; padding: 0 8px 0 12px;
  background: var(--ce-bar); border-bottom: 1px solid var(--ce-line);
}
.ce-dots { display: inline-flex; gap: 6px; flex-shrink: 0; }
.ce-dots i { width: 10px; height: 10px; border-radius: 50%; background: #2D333B; }
.ce-file, .ce-title { font-size: 12px; color: #8B949E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ce-sp { flex: 1; }
.ce-tabs { display: flex; gap: 2px; align-self: stretch; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ce-tabs::-webkit-scrollbar { display: none; }
.ce-tabs button {
  border: none; background: none; cursor: pointer; white-space: nowrap;
  font: 500 12px var(--font); color: #8B949E; padding: 0 10px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.ce-tabs button:hover { color: #E6EDF3; }
.ce-tabs button.on { color: #E6EDF3; border-bottom-color: #E3B341; }
.ce-status {
  font: 600 11px var(--mono); padding: 2px 7px; border-radius: 4px;
  color: #8B949E; background: #21262D; flex-shrink: 0;
}
.ce-status.ok { color: #56D364; background: rgba(46, 160, 67, .15); }
.ce-status.err { color: #F85149; background: rgba(248, 81, 73, .15); }
.ce-copy {
  flex-shrink: 0;
  border: 1px solid #30363D; background: transparent; color: #8B949E;
  font: 500 11.5px var(--font); padding: 3px 9px; border-radius: 6px; cursor: pointer;
}
.ce-copy:hover { color: #E6EDF3; border-color: #484F58; }
.ce-copy.done { color: #56D364; border-color: rgba(86, 211, 100, .4); }
.ce-body { position: relative; }
.ce-pane { display: flex; max-height: 520px; overflow: auto; }
.ce-pane[hidden] { display: none; }
.ce-gutter {
  flex-shrink: 0; padding: 14px 10px 14px 14px; text-align: right; user-select: none;
  color: var(--ce-gutter); font-size: 12.5px; line-height: 1.7; white-space: pre;
  border-right: 1px solid var(--ce-line); position: sticky; left: 0; background: var(--ce-bg);
}
.ce-code {
  flex: 1; margin: 0; padding: 14px 16px; min-width: 0;
  color: var(--ce-text); font-size: 12.5px; line-height: 1.7; white-space: pre; tab-size: 2;
  background: none; border: none;
}
.ce-code code { font: inherit; color: inherit; background: none; padding: 0; }
.ce-pane::-webkit-scrollbar { height: 8px; width: 8px; }
.ce-pane::-webkit-scrollbar-thumb { background: #30363D; border-radius: 4px; }
.ce-pane::-webkit-scrollbar-corner { background: transparent; }

/* Token colours */
.tk-kw    { color: #FF7B72; }
.tk-str   { color: #A5D6FF; }
.tk-key   { color: #7EE787; }
.tk-num   { color: #F2CC60; }
.tk-bool  { color: #FF7B72; }
.tk-com   { color: #6E7681; font-style: italic; }
.tk-fn    { color: #D2A8FF; }
.tk-prop  { color: #79C0FF; }
.tk-var   { color: #FFA657; }
.tk-const { color: #79C0FF; }
.tk-flag  { color: #FFA657; }
.tk-cmd   { color: #D2A8FF; }
.tk-punc  { color: #8B949E; }