:root{
  /* Core */
  --bg:#141823; /* was #0f1115 */
  --fg: #e6e6e6;
  --border: #2a2f3a;
  --accent: #5aa9ff;

  --muted: #a7b0be;
  --panel: rgba(255,255,255,0.035);
  --panel2: #141820;

  --font: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --radius: 14px;
  --shadow: 0 12px 30px rgba(0,0,0,0.35);

  /* Buttons */
  --btnFg: rgba(245,248,255,0.92);
  --btnBg: rgba(255,255,255,0.06);
  --btnBgHover: rgba(255,255,255,0.10);

  --primaryBg: rgba(90,169,255,0.14);
  --primaryBgHover: rgba(90,169,255,0.20);
  --primaryBorder: rgba(90,169,255,0.55);
  --primaryGlow: rgba(90,169,255,0.10);

  --dangerBg: rgba(255,90,90,0.10);
  --dangerBgHover: rgba(255,90,90,0.16);
  --dangerBorder: rgba(255,90,90,0.45);

  --focus: rgba(147,197,253,0.45);
}

/* Base */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body{
  background:
    radial-gradient(900px 500px at 50% 0%,
      rgba(90,169,255,0.28),
      rgba(0,0,0,0) 60%),
    radial-gradient(900px 700px at 20% 20%,
      rgba(255,255,255,0.06),
      rgba(0,0,0,0) 55%),
    var(--bg);
}


a { color: var(--accent); }
p { color: var(--muted); }

/* Form elements (global defaults; app.css may override per-layout) */
input[type="text"],
input[type="number"],
input[type="file"],
textarea{
  font-family: var(--font);
}

input[type="text"],
input[type="number"]{
  background: rgba(0,0,0,0.22);
  color: var(--fg);
  border: 1px solid var(--border);
}

input::placeholder{
  color: rgba(167,176,190,0.65);
}

input:focus{
  border-color: rgba(90,169,255,0.65);
  box-shadow: 0 0 0 4px rgba(90,169,255,0.18);
  outline: none;
}

/* Buttons: keep gentle but readable */
button{
  background: var(--btnBg);
  color: var(--btnFg);
  border: 1px solid var(--border);
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  font: 500 13px/1 var(--font);
  letter-spacing: 0.2px;
  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 80ms ease;
}

button:hover{
  background: var(--btnBgHover);
  border-color: rgba(255,255,255,0.18);
}

button:active{
  transform: translateY(0.5px);
}

button:disabled{
  opacity: 0.45;
  cursor: not-allowed;
}

button:focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Code editor overlay (your highlighting system) */
.codeEditor{
  position: relative;
  flex: 1;
  background: #0b0d12;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--border);
}

.codeBack{
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 12px;
  overflow: auto;
  white-space: pre;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;
  color: #cbd5e1;
}

.codeBack code{ display:block; }

.codeEditor textarea{
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 12px;
  resize: none;
  border: 0;
  outline: none;
  background: transparent;

  /* invisible text but caret visible (your highlight overlay) */
  color: transparent;
  caret-color: var(--fg);

  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;

  overflow: auto;
  white-space: pre;
}

/* Syntax colors */
.t-section { color: #93c5fd; }
.t-key     { color: #a7f3d0; }
.t-eq      { color: #94a3b8; }
.t-value   { color: #fde68a; }
.t-num     { color: #fca5a5; }
.t-comment { color: #64748b; font-style: italic; }
.t-bad     { background: rgba(239,68,68,0.15); }