/* ===== EDITOR CENTER ===== */
  #editor-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
  }
  #editor-wrap.drag-over #drop-hint { display: flex; }

  #editor-container {
    flex: 1;
    display: flex;
    overflow: hidden;
    position: relative;
  }

  #line-numbers {
    background: var(--gutter-bg);
    color: var(--line-num);
    text-align: right;
    padding: 0 8px 0 6px;
    border-right: 1px solid var(--border);
    overflow: hidden;
    user-select: none;
    min-width: 54px;
    font-size: calc(var(--editor-font-size) - 1px);
    line-height: var(--editor-line-height);
    display: block;
  }
  .ln-row {
    height: var(--editor-line-height);
    line-height: var(--editor-line-height);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
  }
  .ln-row.ln-cur .ln-num { color: var(--yellow); font-weight: 600; }
  .ln-row.ln-rel .ln-num { color: var(--line-num); }
  .ln-num { display: inline-block; }

  /* Change signs, drawn against the left edge of the gutter. */
  .sign {
    position: absolute;
    left: 0;
    width: 3px;
    height: var(--editor-line-height);
    display: block;
  }
  .ln-row { position: relative; }
  .sign-add { background: var(--green); }
  .sign-mod { background: var(--yellow); }

  #editor-scroll {
    flex: 1;
    overflow: auto;
    position: relative;
    cursor: text;
  }
  #editor-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
  #editor-scroll::-webkit-scrollbar-track { background: var(--scrollbar-track); }
  #editor-scroll::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 5px; border: 2px solid var(--scrollbar-track); }
  #editor-scroll::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }
  #editor-scroll::-webkit-scrollbar-corner { background: var(--scrollbar-track); }

  #editor-canvas {
    position: relative;
    min-height: 100%;
    white-space: pre;
    font-size: var(--editor-font-size);
    line-height: var(--editor-line-height);
    padding: 0 16px;
    outline: none;
    color: var(--tk-var);
  }
  #editor-canvas.wrap-on,
  #editor-canvas.wrap-on .line-content { white-space: pre-wrap; word-break: break-word; }

  .editor-line {
    position: relative;
    min-height: var(--editor-line-height);
    line-height: var(--editor-line-height);
    display: flex;
    align-items: flex-start;
  }
  .editor-line.current-line {
    background: var(--cur-line);
    box-shadow: inset 2px 0 0 var(--accent);
  }

  .line-content {
    position: relative;
    white-space: pre;
    min-width: 4px;
    flex: 1;
  }

  /* ===== SYNTAX TOKENS ===== */
  .tk-kw    { color: var(--tk-kw); }
  .tk-str   { color: var(--tk-str); }
  .tk-num   { color: var(--tk-num); }
  .tk-com   { color: var(--tk-com); font-style: italic; }
  .tk-fn    { color: var(--tk-fn); }
  .tk-type  { color: var(--tk-type); }
  .tk-op    { color: var(--tk-op); }
  .tk-punc  { color: var(--tk-punc); }
  .tk-var   { color: var(--tk-var); }
  .tk-tag   { color: var(--tk-tag); }
  .tk-attr  { color: var(--tk-attr); }
  .tk-prop  { color: var(--tk-prop); }
  .tk-const { color: var(--tk-const); }
  .tk-meta  { color: var(--tk-meta); }
  .tk-head  { color: var(--tk-head); font-weight: 700; }
  .tk-link  { color: var(--tk-link); text-decoration: underline; }

  /* ===== EDITOR STATE OVERLAYS ===== */
  .char-cursor {
    background: var(--text) !important;
    color: var(--bg-normal) !important;
    border-radius: 1px;
  }
  .insert-cursor {
    background: transparent !important;
    color: inherit !important;
    box-shadow: inset 2px 0 0 var(--green);
    animation: blink 1.05s step-end infinite;
  }
  .replace-cursor {
    background: var(--red) !important;
    color: var(--bg-normal) !important;
    border-radius: 1px;
  }
  .char-selected { background: var(--sel-bg) !important; color: var(--text-bright) !important; }
  .char-search { background: color-mix(in srgb, var(--yellow) 28%, transparent) !important; color: var(--yellow) !important; }
  .char-search-cur { background: var(--yellow) !important; color: var(--bg-normal) !important; border-radius: 1px; }
  .char-bracket {
    box-shadow: inset 0 -2px 0 var(--cyan);
    color: var(--cyan) !important;
    font-weight: 700;
  }
  .cur-col { background: color-mix(in srgb, var(--sel-bg) 30%, transparent); }
  .ws-err  { background: color-mix(in srgb, var(--red) 32%, transparent) !important; border-radius: 1px; }

  /* listchars */
  .list-ch  { color: var(--tk-com); font-style: normal; opacity: 0.55; }
  .list-eol { color: var(--tk-com); opacity: 0.4; }

  @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

  .flash-green { animation: flashGreen 0.4s ease; }
  .flash-red   { animation: flashRed 0.3s ease; }
  @keyframes flashGreen {
    0%   { background: color-mix(in srgb, var(--green) 30%, transparent); color: var(--green); }
    100% { background: transparent; color: inherit; }
  }
  @keyframes flashRed {
    0%   { background: color-mix(in srgb, var(--red) 30%, transparent); color: var(--red); }
    100% { background: transparent; color: inherit; }
  }

  /* ===== KEYSTROKE HUD ===== */
  #keylog {
    position: absolute;
    right: 108px;
    bottom: 12px;
    z-index: 40;
    display: none;
    flex-direction: column;
    gap: 3px;
    align-items: flex-end;
    pointer-events: none;
    background: color-mix(in srgb, var(--gutter-bg) 88%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 8px 10px;
    box-shadow: var(--shadow-md);
    min-width: 190px;
  }
  #keylog[style*="display: none"] { display: none !important; }
  .kl-title {
    font-size: 9px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--text-dim);
    align-self: flex-start;
    margin-bottom: 2px;
  }
  .kl-row { display: flex; align-items: center; gap: 6px; width: 100%; }
  .kl-key {
    background: var(--bg-normal);
    border: 1px solid var(--border-light);
    border-bottom-width: 2px;
    border-radius: var(--radius-sm);
    padding: 1px 6px;
    font-family: var(--font);
    font-size: 11px;
    color: var(--text-bright);
    min-width: 26px;
    text-align: center;
  }
  .kl-key.kl-insert  { border-color: var(--green); color: var(--green); }
  .kl-key.kl-visual  { border-color: var(--magenta); color: var(--magenta); }
  .kl-key.kl-command { border-color: var(--orange); color: var(--orange); }
  .kl-count  { font-size: 10px; color: var(--yellow); }
  .kl-meaning { font-size: 10px; color: var(--text-dim); margin-left: auto; }
  .kl-fresh .kl-key { border-color: var(--accent); color: var(--accent); }

  /* ===== DROP TARGET ===== */
  #drop-hint {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--bg-normal) 82%, transparent);
    border: 2px dashed var(--accent);
    z-index: 60;
    pointer-events: none;
  }
  .drop-inner { text-align: center; }
  .drop-icon { font-size: 40px; color: var(--accent); line-height: 1; }
  .drop-text { margin-top: 10px; font-size: 13px; color: var(--text-bright); letter-spacing: 0.4px; }

  @media (max-width: 768px) {
    #editor-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
    #line-numbers { min-width: 40px; padding: 0 6px 0 4px; }
    #keylog { display: none !important; }
  }