@charset "utf-8";

.code-block { position: relative; background: rgb(30, 30, 30); border-radius: 12px; margin: 20px 0px; overflow: hidden; max-width: 100%; width: 100%; box-sizing: border-box; }

.code-block > pre, .code-block > code { display: block; margin: 0px; padding: 20px; overflow-x: auto; max-width: 100%; box-sizing: border-box; white-space: pre; font-family: Consolas, Monaco, "Courier New", monospace; font-size: 14px; line-height: 1.6; color: rgb(212, 212, 212); }

.code-header { background: rgb(45, 45, 45); padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgb(61, 61, 61); }

.code-language { color: rgb(133, 133, 133); font-size: 0.85em; font-weight: 500; text-transform: uppercase; }

.copy-button { background: rgb(14, 99, 156); color: white; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 0.85em; transition: 0.3s; display: flex; align-items: center; gap: 5px; }

.copy-button:hover { background: rgb(17, 119, 187); transform: translateY(-1px); }

.copy-button:active { transform: translateY(0px); }

.copy-button.copied { background: rgb(22, 130, 93); }

.copy-icon { width: 14px; height: 14px; }

.code-content { padding: 20px; overflow-x: auto; max-width: 100%; box-sizing: border-box; }

.code-content pre { margin: 0px; font-family: Consolas, Monaco, "Courier New", monospace; font-size: 14px; line-height: 1.6; color: rgb(212, 212, 212); max-width: 100%; }

.code-content code { font-family: Consolas, Monaco, "Courier New", monospace; font-size: 14px; color: rgb(212, 212, 212); }

.code-with-lines { display: table; width: 100%; }

.code-line { display: table-row; }

.line-number { display: table-cell; text-align: right; padding-right: 15px; color: rgb(133, 133, 133); user-select: none; min-width: 40px; border-right: 1px solid rgb(61, 61, 61); }

.line-content { display: table-cell; padding-left: 15px; white-space: pre; }

.keyword { color: rgb(86, 156, 214); font-weight: 500; }

.string { color: rgb(206, 145, 120); }

.comment { color: rgb(106, 153, 85); font-style: italic; }

.function { color: rgb(220, 220, 170); }

.number { color: rgb(181, 206, 168); }

.operator { color: rgb(212, 212, 212); }

.variable { color: rgb(156, 220, 254); }

.class-name { color: rgb(78, 201, 176); }

.code-content::-webkit-scrollbar { height: 8px; }

.code-content::-webkit-scrollbar-track { background: rgb(30, 30, 30); }

.code-content::-webkit-scrollbar-thumb { background: rgb(66, 66, 66); border-radius: 4px; }

.code-content::-webkit-scrollbar-thumb:hover { background: rgb(78, 78, 78); }

@media (max-width: 768px) {
  .code-content pre { font-size: 12px; }
  .code-content { padding: 15px; }
}