/* Rouge syntax highlighting - Refined dark theme matching the design system */
.highlight {
  background-color: #1e293b; /* slate-800 */
  border-radius: 0 0 0.75rem 0.75rem; /* rounded-b-xl */
  padding: 1.25rem;
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.7;
}

.highlight code {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  color: #e2e8f0; /* slate-200 */
}

/* Comments - subtle and muted */
.highlight .c,
.highlight .c1,
.highlight .cm,
.highlight .cs {
  color: #64748b; /* slate-500 */
  font-style: italic;
}

/* Keywords - soft coral */
.highlight .k,
.highlight .kc,
.highlight .kd,
.highlight .kn,
.highlight .kp,
.highlight .kr,
.highlight .kt {
  color: #f472b6; /* pink-400 */
}

/* Strings - soft green */
.highlight .s,
.highlight .s1,
.highlight .s2,
.highlight .sb,
.highlight .sc,
.highlight .sd,
.highlight .se,
.highlight .sh,
.highlight .sr,
.highlight .sx {
  color: #86efac; /* green-300 */
}

/* Numbers - sky blue */
.highlight .m,
.highlight .mi,
.highlight .mf,
.highlight .mh,
.highlight .mo,
.highlight .il {
  color: #7dd3fc; /* sky-300 */
}

/* Names/Identifiers - default text */
.highlight .n,
.highlight .nb,
.highlight .ni,
.highlight .nl,
.highlight .nn,
.highlight .nx,
.highlight .py {
  color: #e2e8f0; /* slate-200 */
}

/* Variables */
.highlight .nv,
.highlight .vc,
.highlight .vg,
.highlight .vi,
.highlight .vm {
  color: #fcd34d; /* amber-300 */
}

/* Functions/Methods - lavender */
.highlight .nf,
.highlight .fm {
  color: #c4b5fd; /* violet-300 */
}

/* Classes/Types - amber */
.highlight .nc,
.highlight .no {
  color: #fcd34d; /* amber-300 */
}

/* Operators and punctuation */
.highlight .o,
.highlight .p,
.highlight .ow {
  color: #94a3b8; /* slate-400 */
}

/* Symbols - teal */
.highlight .ss {
  color: #5eead4; /* teal-300 */
}

/* Instance/Class variables */
.highlight .vi,
.highlight .vc {
  color: #fcd34d; /* amber-300 */
}

/* ERB/Template tags */
.highlight .cp,
.highlight .cpf {
  color: #f472b6; /* pink-400 */
}

/* Attributes */
.highlight .na {
  color: #7dd3fc; /* sky-300 */
}

/* Tags (HTML/XML) */
.highlight .nt {
  color: #f472b6; /* pink-400 */
}

/* Entities */
.highlight .ni {
  color: #fcd34d; /* amber-300 */
}

/* Regex */
.highlight .sr {
  color: #86efac; /* green-300 */
}

/* Errors */
.highlight .err {
  color: #fb7185; /* rose-400 */
  background-color: transparent;
}

/* Generic styles */
.highlight .gd {
  color: #fb7185; /* rose-400 - deleted */
}

.highlight .gi {
  color: #86efac; /* green-300 - inserted */
}

.highlight .gh {
  color: #7dd3fc; /* sky-300 - heading */
  font-weight: 600;
}

.highlight .gu {
  color: #c4b5fd; /* violet-300 - subheading */
}

/* Blurred placeholder for non-paying users */
.highlight-placeholder {
  background-color: #1e293b; /* slate-800 */
  border-radius: 0 0 0.75rem 0.75rem;
  padding: 1.25rem;
  overflow: hidden;
  position: relative;
}

.highlight-placeholder code {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  color: #64748b; /* slate-500 */
  filter: blur(4px);
  user-select: none;
  font-size: 0.875rem;
  line-height: 1.7;
}

.highlight-placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(30, 41, 59, 0.8) 100%);
  pointer-events: none;
}