.cbk-14 {
  inline-size: 100%;
  width: 100%;
  display: block;
  --mono: ui-monospace, "JetBrains Mono", "Geist Mono", "SF Mono", Menlo, monospace;
  --sans: system-ui, "Inter", "Geist", -apple-system, "Segoe UI", sans-serif;
  --neon-1: #179bae;
  font-family: var(--sans);
  color: #1c2430;
}
.cbk-14 *,
.cbk-14 *::before,
.cbk-14 *::after { box-sizing: border-box; }

.cbk-14__stage {
  position: relative;
  display: grid;
  place-items: center;
}

.cbk-14__block {
  margin: 0 auto;
  inline-size: 100%;
  max-width: 832px;
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(23,155,174,.55),
    0 0 16px rgba(23,155,174,.22),
    0 0 46px rgba(23,155,174,.12);
}

.cbk-14__bar {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem 1rem;
  background: rgba(42,168,255,.05);
  border-block-end: 1px solid rgba(42,168,255,.18);
}
.cbk-14__bar--footer {
  border-block-end: none;
  border-block-start: 1px solid rgba(42,168,255,.18);
  justify-content: center;
}

.cbk-14__dot {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--neon-1);
  box-shadow: 0 0 6px rgba(23,155,174,.7);
}

.cbk-14__ping {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #179bae;
  color: #ffffff;
  font-size: .72rem;
  font-weight: 600;
}

.cbk-14__label {
  margin-inline-start: auto;
  color: #179bae;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .04em;
}

.cbk-14__employer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  margin: 8px 12px 0;
  padding: 4px 10px;
  background: #179bae;
  color: #ffffff;
  border-radius: 10px;
  font-size: .8rem;
  line-height: 1.6;
  text-align: center;
}
.cbk-14__employer strong { font-weight: 700; }

.cbk-14__pre {
  position: relative;
  margin: 0;
  padding: 10px 16px 12px;
  overflow-x: auto;
  scrollbar-width: thin;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre;
  tab-size: 2;
  font-variant-ligatures: none;
  background: #ffffff;
  color: #24292e;
  direction: ltr;
  text-align: left;
}
.cbk-14__pre code {
  font: inherit;
  direction: ltr;
  text-align: left;
}

/* ============ رنگ‌های سینتکس ============ */
.cbk-14 .tok-keyword  { color: #0000ff; }
.cbk-14 .tok-string   { color: #a31515; }
.cbk-14 .tok-function { color: #795e26; }
.cbk-14 .tok-variable { color: #001080; }
.cbk-14 .tok-number   { color: #098658; }
.cbk-14 .tok-punct    { color: #24292e; }
.cbk-14 .tok-op       { color: #24292e; }
.cbk-14 .tok-fn2      { color: #267f99; }
.cbk-14 .tok-comment  { color: #008000; font-style: italic; }

.cbk-14__final {
  display: block;
  width: fit-content;
  margin: .6rem auto 0;
  padding: 4px 10px;
  border-radius: 10px;
  background: #606470;
  color: #ffffff;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 500;
  font-size: .8rem;
  line-height: 1.6;
  text-align: center;
  direction: rtl;
}

.cbk-14__cursor {
  display: inline-block;
  inline-size: 9px;
  block-size: 1.05em;
  margin-inline-start: 2px;
  vertical-align: text-bottom;
  background: var(--neon-1);
  box-shadow: 0 0 8px rgba(23,155,174,.6);
  animation: cbk14-blink 1.2s steps(1,end) infinite;
}
@keyframes cbk14-blink {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.cbk-14__dots {
  display: flex;
  gap: .55rem;
  align-items: center;
  justify-content: center;
}
.cbk-14__dot-btn {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: #b0b0b0;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background .2s, box-shadow .2s, transform .2s;
}
.cbk-14__dot-btn:hover {
  background: #ff9800;
  transform: scale(1.2);
}
.cbk-14__dot-btn.is-active {
  background: #ff9800;
  box-shadow: 0 0 8px rgba(255,152,0,.75);
}

@media (prefers-reduced-motion: reduce) {
  .cbk-14__cursor { animation: none; opacity: 1; }
  .cbk-14__dot-btn { transition: none; }
  .cbk-14__dot-btn:hover { transform: none; }
}