/* code.css */

/* ============================================================
   CODE TAB
   ============================================================ */
.editor-actions{display:flex;gap:4px;flex-wrap:wrap;padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.05);background:rgba(0,0,0,.1);flex-shrink:0}
.editor-actions button{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  color:var(--text-muted);font-size:9.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  padding:5px 10px;border-radius:var(--radius-pill);
  cursor:pointer;transition:all .15s;font-family:inherit;white-space:nowrap;
}
.editor-actions button:hover{color:var(--text-main);border-color:var(--neon-border);box-shadow:0 0 12px rgba(var(--neon-rgb),.25)}
.editor-actions .btn-clear{background:rgba(225,29,72,.15);border-color:rgba(225,29,72,.4);color:#fca5a5;margin-left:auto}
.editor-actions .btn-clear:hover{background:rgba(225,29,72,.3);border-color:#f87171;color:#fff}

.editor-wrap{flex:1;min-height:0;position:relative;background:rgba(255,255,255,.02);margin:8px;border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.06);overflow:hidden}
.editor-wrap:focus-within{border-color:var(--neon-border);box-shadow:0 0 0 2px rgba(var(--neon-rgb),.12)}
.editor-scroll{position:absolute;inset:0;overflow:auto;display:grid;scrollbar-width:thin;scrollbar-color:rgba(var(--neon-rgb),.3) transparent}
.editor-scroll::-webkit-scrollbar{width:6px}
.editor-scroll::-webkit-scrollbar-thumb{background:rgba(var(--neon-rgb),.3);border-radius:var(--radius-pill)}
.editor-scroll>*{grid-area:1/1;min-width:0}

.highlight-layer,textarea{
  font-family:var(--font-mono);font-size:var(--editor-fs);line-height:var(--editor-lh);
  padding:var(--editor-pad);white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word;
  letter-spacing:0;tab-size:2;font-variant-ligatures:none;border:0;margin:0;box-sizing:border-box;
  text-align:left;direction:ltr;
}
.highlight-layer{position:relative;pointer-events:none;color:#e2e8f0;z-index:1}
textarea{
  position:relative;display:block;width:100%;
  background:transparent;color:transparent;caret-color:#f8fafc;
  resize:none;outline:none;overflow:hidden;z-index:2;
  -webkit-appearance:none;appearance:none;
}
textarea::selection{background:rgba(var(--neon-rgb),.35);color:transparent}
textarea::placeholder{color:var(--text-muted);opacity:.5}
textarea:focus{outline:none}

.hl-bracket{color:#94a3b8}
.hl-tag{color:#60a5fa}
.hl-attr{color:#fbbf24}
.hl-quote{color:#64748b}
.hl-string{color:#86efac}
.hl-cmd{color:#c084fc;font-weight:700}
.hl-comment{color:#64748b;font-style:italic}
.hl-cdata{color:#cbd5e1}

.editor-status{margin:0 10px 10px;min-height:16px;font-size:11px;font-weight:500;letter-spacing:.02em;flex-shrink:0}
.editor-status.ok{color:#4ade80}
.editor-status.err{color:#f87171}