:root {
  --bg: #121212;
  --surface: #1c1c1c;
  --surface-active: #2a2a2a;
  --text: #e6e6e6;
  --text-subtle: #999;
  --accent: #7F2CCB;
  --accent-hover: #f5a524;

  --img-bg-opacity: 0;

  /* Code Fonts Color */
  --code-background: #1e1e1e;
  --code-line-numbers: #888;
  --code-color-comment: #616161;

  --code-color-class: #FFCB6B;
  --code-color-struct: #FFCB6B;
  --code-color-text: #e6e6e6;
  --code-namespace: #E6E6E6;
  --code-color-macro: #d091fa;
  --code-color-string: #C3E88D;
  --code-color-int: #F78C6C;
  --code-color-keyword: #C792EA;
  --code-color-var: #F2F3F4;
  --code-color-local-var: #F57644;
  --code-color-func: #82AAFF;
  --code-color-blue: #89DDFF;
}

html[data-theme="light"] {
  --bg: #fdfdfd;
  --surface: #f0f0f0;
  --surface-active: #e0e0e0;
  --text: #111;
  --text-subtle: #666;
  --accent: #7F2CCB;
  --accent-hover: #b84700;

  --img-bg-opacity: 1;

  --code-background: #fafafa;
  --code-line-numbers: #e0e0e0;
  --code-color-comment: #6a737d;

  --code-color-class: #007ACC;
  --code-color-struct: #007ACC;
  --code-color-text: #2d2d2d;
  --code-namespace: #2d2d2d;
  --code-color-macro: #795E26;
  --code-color-string: #A31515;
  --code-color-int: #098658;
  --code-color-keyword: #0000FF;
  --code-color-var: #001080;
  --code-color-local-var: #267F99;
  --code-color-func: #795E26;
  --code-color-blue: #0366d6;
}

html[data-theme="retro"] {
  --bg: #0f1a20;
  --surface: #1e2a30;
  --surface-active: #2a363c;
  --text: #d5d9d9;
  --text-subtle: #999;
  --accent: #ff66cc;
  --accent-hover: #ffcc00;

  --img-bg-opacity: 0;

  --code-background: #0d0d0d;
  --code-line-numbers: #262626;
  --code-color-comment: #888888;

  --code-color-class: #00ffcc;
  --code-color-struct: #00ffcc;
  --code-color-text: #e6e6e6;
  --code-namespace: #ff66ff;
  --code-color-macro: #ffcc00;
  --code-color-string: #00ff00;
  --code-color-int: #ff4444;
  --code-color-keyword: #ff66ff;
  --code-color-var: #ffffff;
  --code-color-local-var: #ff9933;
  --code-color-func: #66ccff;
  --code-color-blue: #33ccff;
}

html[data-theme="solarized"] {
  --code-background: #fdf6e3;   /* base3 */
  --code-line-numbers: #eee8d5; /* base2 */
  --code-color-comment: #93a1a1;

  --code-color-class: #268bd2;  /* blue */
  --code-color-struct: #268bd2;
  --code-color-text: #657b83;   /* base00 */
  --code-namespace: #586e75;    /* base01 */
  --code-color-macro: #b58900;  /* yellow */
  --code-color-string: #2aa198; /* cyan */
  --code-color-int: #d33682;    /* magenta */
  --code-color-keyword: #859900;/* green */
  --code-color-var: #073642;    /* base02 */
  --code-color-local-var: #cb4b16; /* orange */
  --code-color-func: #6c71c4;   /* violet */
  --code-color-blue: #268bd2;
}

html[data-theme="dracula"] {
  --code-background: #282a36;
  --code-line-numbers: #3a3c4e;
  --code-color-comment: #6272a4;

  --code-color-class: #ffb86c;
  --code-color-struct: #ffb86c;
  --code-color-text: #f8f8f2;
  --code-namespace: #f8f8f2;
  --code-color-macro: #50fa7b;
  --code-color-string: #f1fa8c;
  --code-color-int: #bd93f9;
  --code-color-keyword: #ff79c6;
  --code-color-var: #f8f8f2;
  --code-color-local-var: #ff5555;
  --code-color-func: #8be9fd;
  --code-color-blue: #6272a4;
}

html[data-theme="nier"] {
  --code-background: #F4EFDF;
  --code-line-numbers: #D8CFB6;
  --code-comment: #7D7569;

  --code-class: #3B5E8C;
  --code-struct: #3B5E8C;
  --code-text: #2A2A28;
  --code-namespace: #2A2A28;
  --code-macro: #7C5A2E;
  --code-string: #A03D2F;
  --code-int: #2F6B3C;
  --code-keyword: #283891;
  --code-var: #31366A;
  --code-local-var: #476D74;
  --code-func: #7C5A2E;
  --code-blue: #325C80;

  --font-family: 'JetBrains Mono', monospace;
}


/* .content { padding: 1rem; max-width: 900px; margin: auto; } */
.code-example { margin: 1rem 0; }
.code-panel {
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  border-left: 5px solid var(--accent);
}

.code-header {
  display: flex;
  align-items: center;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
}
.code-header:hover { background: var(--surface-active); }
.code-title { margin-left: 0.5rem; font-weight: 500; color: var(--text); }
.code-icon { width: 16px; height: 16px; transition: transform 0.3s ease; fill: var(--text); }
.code-icon.rotate { transform: rotate(45deg); }

.code-block {
  display: flex;
  flex-direction: row;
  max-height: 0;
  overflow: hidden;          /* hide all overflow */
  padding: 0;
  opacity: 0;
  transition: max-height 0.5s ease, opacity 0.5s ease, padding 0.5s ease;
  background: var(--code-background);
  color: var(--code-color-blue);
  font-family: 'JetBrains Mono', monospace;
}

.code-block.show {
  padding: 0.5rem 0;
  opacity: 1;
  max-height: 2000px;
}

.code-lines {
  list-style: none;
  padding: 0.5rem 1rem;
  margin: 0;
  counter-reset: line;
}

.code-lines li {
  display: flex;
  counter-increment: line;
  line-height: 1.4;
}

.code-lines li::before {
  content: counter(line);
  display: inline-block;
  width: 0.5rem;
  margin-right: 1.5rem;
  text-align: right;
  color: var(--code-line-numbers);
}

.code-line {
  flex: 1;
  white-space: pre;
}

.code-content {
  flex: 1;
  overflow-x: auto;          /* only horizontal scroll */
  overflow-y: hidden;        /* prevent vertical scroll */
  transition: max-height 0.5s ease;
}

.code-content pre {
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9rem;
  line-height: 1.4; /* match number line height */
}

.code-content pre .code-line {
  display: block;
  height: 1.4em; /* force exact line height */
}

/* Syntax colors */
.code-class { color: var(--code-color-class); }
.code-struct { color: var(--code-color-struct); text-decoration: underline; text-decoration-color: var(--code-color-struct); }
.code-text, .code-namespace { color: var(--code-color-text); }
.code-macro { color: var(--code-color-macro); }
.code-string { color: var(--code-color-string); }
.code-int { color: var(--code-color-int); }
.code-keyword { color: var(--code-color-keyword); font-weight: 500; }
.code-var { color: var(--code-color-var); }
.code-local-var { color: var(--code-color-local-var); }
.code-func { color: var(--code-color-func); }
.code-blue { color: var(--code-color-blue); }
/* .code-namespace { color: #89DDFF; } */
.code-comment { color: var(--code-color-comment); }
.code-warning { text-decoration: underline wavy #FFD700; text-decoration-thickness: 1px; }
.code-error { text-decoration: underline wavy #FF5370; text-decoration-thickness: 1px; }