.ktb-card {
  --ktb-accent: #4fa7ff;
  --ktb-accent-rgb: 79, 167, 255;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  margin: 2rem 0;
  overflow: hidden;
  border: 1px solid #d8e1ec;
  border-radius: 18px;
  background: #fff;
  color: #202938;
  box-shadow: 0 14px 36px rgba(20, 38, 64, .08);
}

.ktb-card *,
.ktb-card *::before,
.ktb-card *::after { box-sizing: border-box; }

.ktb-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 22px 17px;
  border-bottom: 1px solid rgba(136, 157, 184, .22);
}

.ktb-card__header > div { min-width: 0; }
.ktb-card__title,
.ktb-card h3 { display: block; margin: 2px 0 0; font-size: clamp(1.12rem, 2.2vw, 1.42rem); font-weight: 800; line-height: 1.35; color: inherit; }
.ktb-eyebrow,
.ktb-diagnostic-label {
  display: block;
  color: var(--ktb-accent);
  font: 700 .68rem/1.4 "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  letter-spacing: .12em;
}

.ktb-icon {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(var(--ktb-accent-rgb), .38);
  border-radius: 12px;
  background: rgba(var(--ktb-accent-rgb), .1);
  color: var(--ktb-accent);
}

.ktb-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.ktb-diagram {
  background:
    linear-gradient(rgba(96, 131, 176, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96, 131, 176, .055) 1px, transparent 1px),
    radial-gradient(circle at 85% 0%, rgba(var(--ktb-accent-rgb), .14), transparent 34%),
    #0d1421;
  background-size: 28px 28px, 28px 28px, auto, auto;
  border-color: #263852;
  color: #eaf2fc;
  box-shadow: 0 18px 46px rgba(8, 19, 36, .24);
}

.ktb-tone-violet { --ktb-accent: #a995ff; --ktb-accent-rgb: 169, 149, 255; }
.ktb-tone-coral { --ktb-accent: #ff8f86; --ktb-accent-rgb: 255, 143, 134; }

.ktb-mermaid {
  display: grid;
  min-height: 220px;
  padding: 24px;
  place-items: center;
  overflow-x: auto;
}
.ktb-mermaid > pre {
  width: 100%;
  margin: 0;
  padding: 16px;
  overflow: auto;
  border: 1px solid #29405f;
  border-radius: 10px;
  background: #080d15;
  color: #d3deeb;
  font: 500 .78rem/1.7 "JetBrains Mono", Consolas, monospace;
  white-space: pre;
}
.ktb-mermaid svg { display: block; width: 100%; max-width: 960px; height: auto; margin: auto; }
.ktb-diagram figcaption { padding: 12px 22px 16px; border-top: 1px solid rgba(136, 157, 184, .18); color: #9fb0c6; font-size: .82rem; text-align: center; }
.ktb-mermaid-error { margin: 0 0 12px; color: #ffaaa3; font-weight: 700; }
.ktb-mermaid-error + pre { width: 100%; margin: 0; padding: 16px; overflow: auto; border-radius: 10px; background: #080d15; color: #d3deeb; }

.ktb-environment {
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--ktb-accent-rgb), .1), transparent 32%),
    #f9fbfe;
}
.ktb-status-testing { --ktb-accent: #d59413; --ktb-accent-rgb: 213, 148, 19; }
.ktb-status-reference { --ktb-accent: #796dce; --ktb-accent-rgb: 121, 109, 206; }
.ktb-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  padding: 7px 10px;
  border: 1px solid rgba(var(--ktb-accent-rgb), .25);
  border-radius: 999px;
  background: rgba(var(--ktb-accent-rgb), .08);
  color: #34445a;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}
.ktb-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--ktb-accent); box-shadow: 0 0 0 4px rgba(var(--ktb-accent-rgb), .13); }
.ktb-spec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; padding: 1px; background: #dfe7f0; }
.ktb-spec { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 12px; padding: 15px 20px; background: #fff; }
.ktb-spec-grid > .ktb-spec:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ktb-spec span { color: #708096; font: 700 .69rem/1.4 "JetBrains Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
.ktb-spec strong { min-width: 0; overflow-wrap: anywhere; color: #172234; font: 700 .88rem/1.5 "JetBrains Mono", monospace; text-align: right; }
.ktb-note { margin: 0; padding: 15px 20px 16px 46px; background: rgba(var(--ktb-accent-rgb), .055); color: #526176; font-size: .84rem; }
.ktb-note::before { position: absolute; margin-left: -25px; color: var(--ktb-accent); content: "●"; font-size: .62rem; }

.ktb-command { border-color: #253650; background: #0b111b; color: #dbe7f5; box-shadow: 0 18px 44px rgba(6, 16, 30, .25); }
.ktb-terminal-bar { display: flex; min-height: 50px; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #26354a; background: #141e2c; }
.ktb-terminal-dots { display: inline-flex; gap: 6px; }
.ktb-terminal-dots i { width: 9px; height: 9px; border-radius: 50%; background: #ff6e69; }
.ktb-terminal-dots i:nth-child(2) { background: #f5c451; }
.ktb-terminal-dots i:nth-child(3) { background: #55c987; }
.ktb-terminal-bar strong { min-width: 0; overflow: hidden; color: #eff6ff; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.ktb-shell { margin-left: auto; color: #71839b; font: 700 .67rem/1 "JetBrains Mono", monospace; text-transform: uppercase; }
.ktb-copy { padding: 7px 9px; border: 1px solid #344863; border-radius: 7px; background: transparent; color: #8bbfff; cursor: pointer; font: 700 .66rem/1 "JetBrains Mono", monospace; letter-spacing: .08em; transition: .2s ease; }
.ktb-copy:hover, .ktb-copy:focus-visible, .ktb-copy.is-copied { border-color: #5fe1ad; background: rgba(95, 225, 173, .09); color: #75e7ba; outline: none; }
.ktb-copy:focus-visible { box-shadow: 0 0 0 3px rgba(95, 225, 173, .24); }
.ktb-copy.is-error { border-color: #ff8585; color: #ff9b9b; }
.ktb-terminal-body { padding: 20px; overflow-x: auto; }
.ktb-command-line { display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start; }
.ktb-command-line > span { color: #5fe1ad; font: 700 .86rem/1.75 "JetBrains Mono", monospace; }
.ktb-command pre { max-width: none; margin: 0; padding: 0; overflow: visible; border: 0; background: transparent; color: #e7eef8; font: 500 .83rem/1.75 "JetBrains Mono", Consolas, monospace; white-space: pre; }
.ktb-command code { display: block; color: inherit; font: inherit; }
.ktb-command .ktb-output { margin-top: 17px; padding-top: 15px; border-top: 1px dashed #2c3d53; color: #8ea0b8; }

.ktb-command .hljs-comment,
.ktb-command .hljs-quote { color: #66798f; font-style: italic; }
.ktb-command .hljs-keyword,
.ktb-command .hljs-selector-tag,
.ktb-command .hljs-literal,
.ktb-command .hljs-name { color: #ff7b9c; }
.ktb-command .hljs-string,
.ktb-command .hljs-regexp,
.ktb-command .hljs-addition,
.ktb-command .hljs-attribute { color: #8bd5a8; }
.ktb-command .hljs-number,
.ktb-command .hljs-symbol,
.ktb-command .hljs-bullet { color: #d5a6ff; }
.ktb-command .hljs-title,
.ktb-command .hljs-section,
.ktb-command .hljs-built_in,
.ktb-command .hljs-type { color: #72b7ff; }
.ktb-command .hljs-variable,
.ktb-command .hljs-template-variable,
.ktb-command .hljs-params { color: #f0c674; }
.ktb-command .hljs-meta,
.ktb-command .hljs-meta .hljs-keyword { color: #76d4e8; }
.ktb-command .hljs-deletion { color: #ff8585; }
.ktb-command .hljs-emphasis { font-style: italic; }
.ktb-command .hljs-strong { font-weight: 800; }

.ktb-code { border-color: #d7e2ef; background: #f8fbff; }
.ktb-code__bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 13px 15px;
  border-bottom: 1px solid #dce6f1;
  background:
    linear-gradient(135deg, rgba(var(--ktb-accent-rgb), .1), transparent 46%),
    #fff;
}
.ktb-code__bar > div { min-width: 0; }
.ktb-code__bar strong { display: block; overflow: hidden; color: #172234; font-size: .95rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.ktb-code__icon { width: 38px; height: 38px; border-radius: 11px; }
.ktb-code__filename {
  max-width: min(36vw, 260px);
  overflow: hidden;
  padding: 6px 9px;
  border: 1px solid #d7e2ef;
  border-radius: 8px;
  background: #f4f8fc;
  color: #53657c;
  font: 700 .68rem/1.2 "JetBrains Mono", Consolas, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ktb-code__body {
  max-width: none;
  margin: 0;
  padding: 20px;
  overflow-x: auto;
  border: 0;
  background: #0b111b;
  color: #e7eef8;
  font: 500 .84rem/1.8 "JetBrains Mono", Consolas, monospace;
  white-space: pre;
}
.ktb-code__body code { display: block; color: inherit; font: inherit; }
.ktb-code .hljs-comment,
.ktb-code .hljs-quote { color: #7d8fa6; font-style: italic; }
.ktb-code .hljs-keyword,
.ktb-code .hljs-selector-tag,
.ktb-code .hljs-literal,
.ktb-code .hljs-name { color: #ff7b9c; }
.ktb-code .hljs-string,
.ktb-code .hljs-regexp,
.ktb-code .hljs-addition,
.ktb-code .hljs-attribute { color: #8bd5a8; }
.ktb-code .hljs-number,
.ktb-code .hljs-symbol,
.ktb-code .hljs-bullet { color: #d5a6ff; }
.ktb-code .hljs-title,
.ktb-code .hljs-section,
.ktb-code .hljs-built_in,
.ktb-code .hljs-type { color: #72b7ff; }
.ktb-code .hljs-variable,
.ktb-code .hljs-template-variable,
.ktb-code .hljs-params { color: #f0c674; }
.ktb-code .hljs-meta,
.ktb-code .hljs-meta .hljs-keyword { color: #76d4e8; }
.ktb-code .hljs-deletion { color: #ff8585; }
.ktb-code .hljs-emphasis { font-style: italic; }
.ktb-code .hljs-strong { font-weight: 800; }

.ktb-callout { background: #f8fbff; }
.ktb-callout-info { --ktb-accent: #268bd9; --ktb-accent-rgb: 38, 139, 217; }
.ktb-callout-success { --ktb-accent: #1c8b5f; --ktb-accent-rgb: 28, 139, 95; background: #f7fdf9; }
.ktb-callout-warning { --ktb-accent: #c88605; --ktb-accent-rgb: 200, 134, 5; background: #fffdf8; }
.ktb-callout-danger { --ktb-accent: #c24141; --ktb-accent-rgb: 194, 65, 65; background: #fffafa; }
.ktb-callout::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--ktb-accent);
  content: "";
}
.ktb-callout__body {
  margin: 0;
  padding: 18px 22px 21px;
  color: #273447;
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.85;
}

/* Keep standard Gutenberg code blocks readable when mixed with KTB blocks. */
.entry-content .wp-block-code {
  margin: 1.5rem 0;
  padding: 18px 20px;
  overflow-x: auto;
  border: 1px solid #293b53;
  border-radius: 12px;
  background: #0b111b;
  color: #dbe7f5;
}
.entry-content .wp-block-code code {
  display: block;
  padding: 0;
  background: transparent;
  color: inherit;
  font: 500 .83rem/1.75 "JetBrains Mono", Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ktb-troubleshoot { --ktb-accent: #9a6400; --ktb-accent-rgb: 154, 100, 0; background: #fffdf8; }
.ktb-severity-info { --ktb-accent: #176fae; --ktb-accent-rgb: 23, 111, 174; background: #f9fcff; }
.ktb-severity-critical { --ktb-accent: #b63131; --ktb-accent-rgb: 182, 49, 49; background: #fffafa; }
.ktb-troubleshoot::before { position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--ktb-accent); content: ""; }
.ktb-diagnostic-grid { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #d7dee8; }
.ktb-diagnostic-grid > div { min-width: 0; padding: 22px 24px; background: rgba(255, 255, 255, .42); }
.ktb-diagnostic-grid > div + div { border-left: 1px solid #d7dee8; }
.ktb-diagnostic-label {
  color: #273447;
  font: 800 .9rem/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .02em;
}
.ktb-diagnostic-label small,
.ktb-resolution strong small {
  margin-left: 8px;
  color: var(--ktb-accent);
  font: 800 .62rem/1.4 "JetBrains Mono", Consolas, monospace;
  letter-spacing: .12em;
}
.ktb-diagnostic-grid p, .ktb-resolution p {
  margin: 9px 0 0;
  color: #273447;
  font-size: .96rem;
  font-weight: 500;
  line-height: 1.8;
}
.ktb-checks { padding: 22px 24px 24px; }
.ktb-checks ul {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  list-style: none;
}
.ktb-checks li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(var(--ktb-accent-rgb), .16);
  border-radius: 9px;
  background: rgba(255, 255, 255, .62);
  color: #273447;
  font-size: .94rem;
  font-weight: 600;
  line-height: 1.65;
}
.ktb-checks li::before {
  display: grid;
  width: 22px;
  height: 22px;
  margin-top: .08em;
  place-items: center;
  border: 1px solid rgba(var(--ktb-accent-rgb), .48);
  border-radius: 6px;
  background: rgba(var(--ktb-accent-rgb), .08);
  color: var(--ktb-accent);
  content: "✓";
  font-size: .76rem;
  font-weight: 900;
  line-height: 1;
}
.ktb-resolution { margin: 0 18px 18px; padding: 18px 19px; border: 1px solid rgba(var(--ktb-accent-rgb), .32); border-radius: 11px; background: rgba(var(--ktb-accent-rgb), .09); }
.ktb-resolution strong { color: #273447; font: 800 .9rem/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: .02em; }

.ktb-summary { background: #f8fbff; }
.ktb-summary::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--ktb-accent);
  content: "";
}
.ktb-summary__body { padding: 22px 24px 24px; }
.ktb-summary__lead {
  margin: 0 0 18px;
  color: #273447;
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.8;
}
.ktb-summary__points {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(var(--ktb-accent-rgb), .18);
  list-style: none;
}
.ktb-summary__points li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid rgba(var(--ktb-accent-rgb), .18);
}
.ktb-summary__points span {
  display: grid;
  width: 21px;
  height: 21px;
  margin-top: .2em;
  place-items: center;
  border: 1px solid rgba(var(--ktb-accent-rgb), .34);
  border-radius: 7px;
  background: #fff;
  color: var(--ktb-accent);
  font: 900 .72rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.ktb-summary__points strong {
  color: #172234;
  font-size: .96rem;
  line-height: 1.75;
}
.ktb-summary__takeaway {
  margin: 18px 0 0;
  padding: 15px 17px;
  border-left: 3px solid var(--ktb-accent);
  border-radius: 0 12px 12px 0;
  background: #fff;
  color: #253044;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.8;
}
.ktb-summary__takeaway span {
  display: block;
  margin-bottom: 5px;
  color: var(--ktb-accent);
  font: 900 .64rem/1.4 "JetBrains Mono", Consolas, monospace;
  letter-spacing: .13em;
}

.ktb-steps { background: #f8fbff; }
.ktb-steps__body { padding: 22px 24px 24px; }
.ktb-steps__intro {
  margin: 0 0 18px;
  color: #405168;
  font-size: .96rem;
  font-weight: 600;
  line-height: 1.8;
}
.ktb-steps__list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.ktb-steps__list li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin: 0;
  padding: 16px;
  border: 1px solid rgba(var(--ktb-accent-rgb), .18);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(31, 49, 75, .045);
}
.ktb-steps__list li > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(var(--ktb-accent-rgb), .3);
  border-radius: 12px;
  background: rgba(var(--ktb-accent-rgb), .08);
  color: var(--ktb-accent);
  font: 900 .78rem/1 "JetBrains Mono", Consolas, monospace;
}
.ktb-steps__list strong {
  display: block;
  color: #172234;
  font-size: 1rem;
  line-height: 1.45;
}
.ktb-steps__list p {
  margin: 6px 0 0;
  color: #4a5b71;
  font-size: .94rem;
  font-weight: 500;
  line-height: 1.75;
}

@media (max-width: 640px) {
  .ktb-card { margin: 1.5rem 0; border-radius: 14px; }
  .ktb-card__header { align-items: flex-start; padding: 16px; }
  .ktb-icon { flex-basis: 38px; width: 38px; height: 38px; }
  .ktb-status { padding: 6px 8px; font-size: .64rem; }
  .ktb-spec-grid, .ktb-diagnostic-grid { grid-template-columns: 1fr; }
  .ktb-spec { padding: 13px 16px; }
  .ktb-diagnostic-grid > div { padding: 16px; }
  .ktb-diagnostic-grid > div + div { border-top: 1px solid #e3e8ef; border-left: 0; }
  .ktb-mermaid { min-height: 180px; padding: 16px 10px; }
  .ktb-diagram figcaption { padding-inline: 16px; }
  .ktb-terminal-bar { gap: 9px; }
  .ktb-terminal-body { padding: 16px 14px; }
  .ktb-shell { display: none; }
  .ktb-command pre { font-size: .76rem; }
  .ktb-code__bar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ktb-code__filename { display: none; }
  .ktb-code__body { padding: 16px 14px; font-size: .76rem; }
  .ktb-callout__body { padding: 16px; font-size: .92rem; }
  .ktb-summary__body { padding: 16px; }
  .ktb-summary__points li { grid-template-columns: 24px minmax(0, 1fr); }
  .ktb-steps__body { padding: 16px; }
  .ktb-steps__list li { grid-template-columns: 36px minmax(0, 1fr); padding: 14px; }
  .ktb-steps__list li > span { width: 36px; height: 36px; border-radius: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .ktb-copy { transition: none; }
}

@media print {
  .ktb-card { break-inside: avoid; box-shadow: none; }
  .ktb-copy { display: none; }
}