/* Audikung Finance Knowledge Map — open graph, curriculum first. */
.knowledge-page {
  width: calc(100% - clamp(24px, 4vw, 72px));
  max-width: none;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 112px 0 64px;
  color: var(--text);
}

.km-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, .88fr);
  align-items: end;
  gap: clamp(2rem, 5vw, 6rem);
  padding: 2.2rem 0 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.km-hero-copy { max-width: 720px; }
.km-kicker {
  margin: 0;
  color: var(--gold-light);
  font: 700 .69rem/1 var(--font-head);
  letter-spacing: .28em;
}
.km-hero h1 {
  margin: .7rem 0 .6rem;
  color: #f5f4f0;
  font: 800 clamp(2.55rem, 5vw, 5rem)/1.02 var(--font-head);
  letter-spacing: -.045em;
  text-wrap: balance;
}
.km-hero h1 em { color: var(--gold-light); font-style: normal; }
.km-lead {
  max-width: 610px;
  margin: 0;
  color: #b7c0d2;
  font-size: clamp(.98rem, 1.2vw, 1.13rem);
  line-height: 1.7;
  text-wrap: pretty;
}
.km-search-actions { display: grid; grid-template-columns: minmax(240px, 1fr) auto; gap: .75rem; }
.km-search {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 52px;
  border: 1px solid rgba(160, 185, 222, .28);
  border-radius: 12px;
  padding: 0 1rem;
  background: rgba(7, 15, 30, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.km-search:focus-within {
  border-color: rgba(229, 197, 134, .72);
  background: rgba(9, 18, 35, .95);
  box-shadow: 0 0 0 3px rgba(229, 197, 134, .08);
}
.km-search > span:first-child { color: #e8edf6; font: 400 1.65rem/1 var(--font-body); transform: rotate(-18deg); }
.km-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #f4f6fa;
  font: 500 .92rem var(--font-body);
}
.km-search input::placeholder { color: #77839a; }
.km-guide-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 52px;
  border: 1px solid #f0cf80;
  border-radius: 12px;
  padding: .7rem 1rem;
  background: linear-gradient(110deg, #f1c65c, #dca844);
  color: #171207;
  font: 800 .9rem var(--font-head);
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 9px 28px rgba(205, 155, 50, .16);
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.km-guide-button > span {
  display: grid;
  place-items: center;
  width: 25px;
  aspect-ratio: 1;
  border: 1px solid rgba(23, 18, 7, .32);
  border-radius: 50%;
  font-size: .65rem;
}
.km-guide-button:hover, .km-guide-button:focus-visible { outline: 0; transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 13px 32px rgba(205, 155, 50, .24); }
.km-guide-button:active { transform: translateY(0) scale(.98); }
.km-guide-button.is-active { background: #111b2d; color: #f1cf78; }

.km-map-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 0 1rem;
}
.km-map-toolbar > div:first-child { display: grid; gap: .18rem; flex: none; }
.km-map-toolbar strong { color: #edf0f6; font: 700 .91rem var(--font-head); }
.km-map-toolbar > div:first-child span { color: #79869d; font-size: .75rem; }
.km-filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .45rem; }
.km-filter {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: .35rem .62rem;
  background: transparent;
  color: #8f9bb0;
  font: 600 .74rem var(--font-body);
  cursor: pointer;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.km-filter i { width: 7px; height: 7px; border-radius: 50%; background: var(--filter-color, #9ca6b8); box-shadow: 0 0 10px color-mix(in srgb, var(--filter-color, #9ca6b8) 50%, transparent); }
.km-filter:hover, .km-filter:focus-visible { outline: 0; color: #f3f5f8; background: rgba(255, 255, 255, .045); }
.km-filter.is-active { border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .07); color: #f5f6f9; }

.km-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 390px); gap: 1.2rem; align-items: start; }
.km-graph-shell {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, .08);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background:
    radial-gradient(circle at 15% 24%, rgba(70, 132, 198, .09), transparent 20rem),
    radial-gradient(circle at 67% 24%, rgba(229, 183, 79, .07), transparent 21rem),
    linear-gradient(180deg, rgba(7, 13, 26, .38), rgba(3, 7, 18, .05));
}
.km-graph-scroll { overflow: hidden; }
.km-graph-stage {
  position: relative;
  min-width: 880px;
  height: clamp(1250px, 138dvh, 1620px);
  outline: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
  overscroll-behavior: contain;
  background-image:
    radial-gradient(circle, rgba(137, 166, 211, .28) 0 1px, transparent 1.5px),
    radial-gradient(ellipse at 50% 50%, transparent 0 31%, rgba(106, 137, 184, .08) 31.15% 31.3%, transparent 31.5%),
    radial-gradient(ellipse at 50% 50%, transparent 0 48%, rgba(106, 137, 184, .055) 48.15% 48.3%, transparent 48.5%);
  background-size: 94px 88px, 680px 570px, 940px 690px;
  /* knowledge-map.js applyMapPan() moves this grid with the camera. */
  background-position: 0 0, 45% 42%, 45% 42%;
}
.km-graph-stage.is-map-dragging { cursor: grabbing; }
.km-graph-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(3, 7, 18, .5) 94%);
}
.km-edges, .km-node-layer { position: absolute; inset: 0; width: 100%; height: 100%; transform: translate3d(0, 0, 0) scale(1); transform-origin: 0 0; }
.km-graph-stage.is-map-moving .km-edges, .km-graph-stage.is-map-moving .km-node-layer { will-change: transform; }
/* While the camera moves, hold the idle breathing/flow loops so each frame only moves two layers. */
.km-graph-stage.is-map-moving .km-node-orbit, .km-graph-stage.is-map-moving .km-edge { animation-play-state: paused; }
.km-zoom { position: absolute; top: .75rem; right: .75rem; z-index: 6; display: flex; align-items: center; gap: .15rem; padding: .25rem; border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; background: rgba(6, 11, 24, .82); backdrop-filter: blur(8px); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.km-zoom button { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 9px; background: transparent; color: #eef1f7; font: 700 1.05rem/1 var(--font-head, 'Outfit', 'Mitr', sans-serif); cursor: pointer; transition: background .15s, color .15s; }
.km-zoom button:hover, .km-zoom button:focus-visible { outline: 0; background: rgba(229, 197, 134, .16); color: #f5d98d; }
.km-zoom-level { min-width: 3.1rem; color: #cfd6e4; font: 600 .78rem/1 var(--font-head, 'Outfit', 'Mitr', sans-serif); text-align: center; font-variant-numeric: tabular-nums; }
.km-collapse-all { position: absolute; top: .75rem; left: .75rem; z-index: 6; display: flex; gap: .2rem; padding: .25rem; border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; background: rgba(6, 11, 24, .82); backdrop-filter: blur(8px); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.km-collapse-all button { display: inline-flex; align-items: center; gap: .35rem; min-height: 34px; padding: 0 .7rem; border: 0; border-radius: 9px; background: transparent; color: #eef1f7; font: 600 .82rem/1 var(--font-head, 'Outfit', 'Mitr', sans-serif); cursor: pointer; transition: background .15s, color .15s; }
.km-collapse-all button span { color: #e5c586; font-size: .8rem; }
.km-collapse-all button:hover, .km-collapse-all button:focus-visible { outline: 0; background: rgba(229, 197, 134, .16); color: #f5d98d; }
.km-collapse-all button:focus-visible { box-shadow: 0 0 0 2px #f5d98d; }
.km-collapse-toggle { position: absolute; z-index: 4; display: inline-flex; align-items: center; justify-content: center; gap: .2rem; min-width: 26px; height: 24px; padding: 0 .45rem; white-space: nowrap; border: 1px solid color-mix(in srgb, var(--node-color) 70%, white 10%); border-radius: 999px; background: #0a1426; color: #f1e3c0; font: 700 .74rem/1 var(--font-head, 'Outfit', 'Mitr', sans-serif); transform: translate(var(--tx, 14px), var(--ty, -40px)); cursor: pointer; pointer-events: auto; transition: background .18s ease, color .18s ease, transform .18s cubic-bezier(.25, 1, .5, 1); }
.km-collapse-toggle span { font-size: .78rem; line-height: 1; }
.km-collapse-toggle b { font-weight: 700; font-variant-numeric: tabular-nums; }
.km-collapse-toggle.is-collapsed { background: color-mix(in srgb, var(--node-color) 30%, #0a1426 70%); color: #fff; }
.km-collapse-toggle:hover { background: color-mix(in srgb, var(--node-color) 38%, #0a1426 62%); color: #fff; transform: translate(var(--tx, 14px), var(--ty, -40px)) scale(1.08); }
.km-collapse-toggle:focus-visible { outline: 0; box-shadow: 0 0 0 2px #fff, 0 0 0 5px color-mix(in srgb, var(--node-color) 45%, transparent); }
.km-graph-node.is-revealed { animation: km-node-reveal .32s cubic-bezier(.25, 1, .5, 1); }
@keyframes km-node-reveal { from { opacity: 0; transform: translate(-50%, -50%) scale(.82); } }
@media (prefers-reduced-motion: reduce) { .km-graph-node.is-revealed { animation: none; } .km-collapse-toggle { transition: none; } }
.km-edges { z-index: 1; overflow: visible; }
.km-node-layer { z-index: 2; pointer-events: none; }
.km-edge {
  fill: none;
  stroke: rgba(127, 154, 195, .36);
  stroke-width: 1.05;
  vector-effect: non-scaling-stroke;
  transition: opacity .2s ease, stroke .2s ease, stroke-width .2s ease;
}
.km-edge-prerequisite { stroke: rgba(151, 178, 215, .55); stroke-width: 1.25; }
.km-edge-guide { stroke: rgba(231, 183, 79, .56); stroke-width: 1.45; }
.km-edge-prerequisite, .km-edge-guide:not(.is-active) { stroke-dasharray: 3 7; animation: km-edge-flow 9s linear infinite; }
.km-edge-guide.is-active { stroke: #efc457; stroke-width: 2.6; filter: drop-shadow(0 0 5px rgba(239, 196, 87, .58)); stroke-dasharray: 5 4; animation: km-route 2s linear infinite; }
.km-edge.is-related-focus { opacity: 1 !important; stroke: #dce8f9; stroke-width: 2; }
.km-edge.is-filtered { opacity: .055; }
#km-arrow path { fill: #8ba8cf; }
@keyframes km-route { to { stroke-dashoffset: -18; } }
@keyframes km-edge-flow { to { stroke-dashoffset: -40; } }

.km-graph-node {
  --node-orbit-size: 36px;
  --node-core-size: 14px;
  position: absolute;
  display: grid;
  justify-items: center;
  gap: .28rem;
  width: 148px;
  border: 0;
  padding: 0;
  background: transparent;
  color: #edf2fa;
  font-family: var(--font-body);
  text-align: center;
  transform: translate(-50%, -50%);
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  will-change: left, top, transform;
  transition: opacity .2s ease, filter .2s ease, transform .2s ease;
}
.km-graph-node:hover, .km-graph-node:focus-visible { outline: 0; z-index: 5; transform: translate(-50%, -50%) scale(1.08); }
.km-graph-node:focus-visible .km-node-orbit { box-shadow: 0 0 0 3px rgba(255, 255, 255, .92), 0 0 0 7px color-mix(in srgb, var(--node-color) 28%, transparent), 0 0 24px color-mix(in srgb, var(--node-color) 48%, transparent); }
.km-graph-node.is-dragging { z-index: 8; cursor: grabbing; transition: none; }
.km-graph-node.is-dragging .km-node-orbit { animation: none; transform: scale(1.12); }
.km-graph-node.is-tethered .km-node-orbit { animation: km-tether-pulse .8s ease-in-out infinite alternate; }
.km-graph-node.is-settling .km-node-orbit { animation: km-node-settle .48s cubic-bezier(.34, 1.56, .64, 1) both; }
.km-graph-node.is-filtered { opacity: .1; filter: saturate(.2); pointer-events: none; }
.km-graph-node.is-relationship-muted:not(.is-selected) { opacity: .18; }
.km-node-orbit {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--node-orbit-size);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--node-color) 88%, white 12%);
  border-radius: 50%;
  background: color-mix(in srgb, var(--node-color) 11%, #07101f 89%);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--node-color) 9%, transparent), 0 0 21px color-mix(in srgb, var(--node-color) 28%, transparent);
  animation: km-node-breathe 4.8s ease-in-out infinite;
  animation-delay: var(--motion-delay, 0s);
}
.km-node-orbit::before {
  content: '';
  position: absolute;
  inset: -9px;
  border: 1px solid color-mix(in srgb, var(--node-color) 16%, transparent);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.78);
  transition: opacity .22s ease, transform .22s ease;
}
.km-graph-node:hover .km-node-orbit::before, .km-graph-node:focus-visible .km-node-orbit::before, .km-graph-node.is-selected .km-node-orbit::before { opacity: 1; transform: scale(1); }
.km-node-core {
  width: var(--node-core-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--node-color);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, .72), 0 0 10px var(--node-color);
}
.km-graph-node.is-weight-2 { --node-orbit-size: 43px; --node-core-size: 16px; z-index: 2; }
.km-graph-node.is-weight-3 { --node-orbit-size: 52px; --node-core-size: 19px; z-index: 3; }
.km-graph-node.is-category { --node-orbit-size: 58px; --node-core-size: 21px; }
.km-graph-node.is-category .km-node-orbit { border-width: 2px; }
.km-graph-node.is-weight-2 .km-node-title { font-size: .87rem; }
.km-graph-node.is-weight-3 .km-node-title { color: #f5f7fb; font-size: .92rem; font-weight: 700; }
.km-graph-node.is-category .km-node-title { color: #fff; font: 750 .98rem/1.2 var(--font-head); }
.km-node-title {
  display: block;
  max-width: 148px;
  color: #e3e9f3;
  font: 650 .84rem/1.25 var(--font-body);
  text-wrap: balance;
  text-shadow: 0 2px 8px #030712;
}
.km-difficulty-dots { --difficulty-color: #e9bf5b; display: inline-flex; align-items: center; gap: 3px; }
.km-difficulty-dots.is-level-1 { --difficulty-color: #63d5a1; }
.km-difficulty-dots.is-level-2 { --difficulty-color: #e9bf5b; }
.km-difficulty-dots.is-level-3 { --difficulty-color: #ef7777; }
.km-difficulty-dots i { display: block; width: 6px; height: 6px; border: 1px solid #67758c; border-radius: 50%; background: #09101d; }
.km-difficulty-dots i.is-on { border-color: var(--difficulty-color); background: var(--difficulty-color); box-shadow: 0 0 7px color-mix(in srgb, var(--difficulty-color) 42%, transparent); }
.km-graph-node.is-selected .km-node-orbit, .km-graph-node.is-guide .km-node-orbit {
  border-color: #f3cf74;
  box-shadow: 0 0 0 7px rgba(238, 190, 78, .1), 0 0 30px rgba(238, 190, 78, .42);
}
.km-graph-node.is-selected .km-node-core, .km-graph-node.is-guide .km-node-core { background: #f3c85f; box-shadow: inset 0 1px 2px #fff1bf, 0 0 14px #e9b846; }
.km-graph-node.is-selected .km-node-title { color: #fff4d8; }
.km-graph-node.is-draft::after { content: 'DRAFT'; border: 1px solid rgba(241, 198, 92, .45); border-radius: 4px; padding: .08rem .25rem; background: #111309; color: #f1c65c; font: 700 .5rem var(--font-head); letter-spacing: .08em; }
@keyframes km-node-breathe {
  0%, 100% { transform: translateY(0) scale(1); filter: brightness(.96); }
  50% { transform: translateY(-3px) scale(1.035); filter: brightness(1.08); }
}
@keyframes km-tether-pulse {
  from { transform: scale(1); filter: brightness(1); }
  to { transform: scale(1.09); filter: brightness(1.16); }
}
@keyframes km-node-settle {
  0% { transform: scale(1.08); }
  55% { transform: scale(.96); }
  100% { transform: scale(1); }
}

.km-legend {
  position: absolute;
  z-index: 4;
  left: 1rem;
  bottom: 1rem;
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 0;
  border: 1px solid rgba(136, 161, 197, .2);
  border-radius: 11px;
  background: rgba(4, 10, 21, .82);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
.km-legend > div { display: grid; align-content: center; gap: .35rem; min-width: 130px; padding: .68rem .8rem; }
.km-legend > div + div { border-left: 1px solid rgba(255, 255, 255, .08); }
.km-legend b { color: #dce3ee; font: 700 .65rem var(--font-head); }
.km-legend span { display: inline-flex; align-items: center; gap: .38rem; color: #8e9aaf; font-size: .62rem; }
.km-legend-categories i { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--legend-color); }
.km-legend-size i { display: block; flex: 0 0 auto; width: 8px; height: 8px; border: 1px solid #8ca4c5; border-radius: 50%; background: rgba(140, 164, 197, .16); }
.km-legend-size i + i { width: 13px; height: 13px; margin-left: -2px; border-color: #d8b75d; background: rgba(216, 183, 93, .16); box-shadow: 0 0 8px rgba(216, 183, 93, .22); }
.km-legend-line i { width: 30px; height: 1px; background: #6f83a0; }
.km-legend-line.is-arrow i { position: relative; background: #d6b45c; }
.km-legend-line.is-arrow i::after { content: ''; position: absolute; right: 0; top: -3px; border-width: 3.5px 0 3.5px 5px; border-style: solid; border-color: transparent transparent transparent #d6b45c; }
.km-mobile-pan { display: none; pointer-events: none; }

.km-inspector {
  position: sticky;
  top: 88px;
  max-height: calc(100dvh - 104px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(229, 197, 134, .32) transparent;
  min-height: 520px;
  border: 1px solid rgba(145, 170, 205, .22);
  border-radius: 14px;
  padding: 1.35rem 1.4rem 1.25rem;
  background:
    linear-gradient(155deg, rgba(15, 26, 45, .94), rgba(6, 13, 27, .97)),
    radial-gradient(circle at 90% 4%, rgba(229, 183, 79, .15), transparent 10rem);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 18px 48px rgba(0, 0, 0, .18);
}
.km-inspector-head { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.km-inspector-category { display: inline-flex; align-items: center; gap: .45rem; color: #dce3ee; font: 700 .7rem var(--font-head); }
.km-inspector-category i { width: 8px; height: 8px; border-radius: 50%; background: var(--category-color); box-shadow: 0 0 10px color-mix(in srgb, var(--category-color) 55%, transparent); }
.km-map-status { color: #7f8ca2; font-size: .61rem; white-space: nowrap; }
.km-map-status.ok { color: #7ad7b2; }
.km-map-status.error { color: #ff9b9b; }
.km-inspector-path { margin: 1.35rem 0 .4rem; color: #738097; font-size: .65rem; line-height: 1.5; }
.km-inspector h2 { margin: 0; color: #f5f4ef; font: 800 clamp(1.65rem, 2.25vw, 2.25rem)/1.18 var(--font-head); letter-spacing: -.025em; }
.km-inspector h2:focus { outline: 0; }
.km-inspector-summary { margin: .65rem 0 1.2rem; color: #b1bccd; font-size: .9rem; line-height: 1.66; text-wrap: pretty; }
.km-lesson-preview {
  margin: 0 0 1rem;
  border: 1px solid rgba(229, 197, 134, .2);
  border-radius: 12px;
  padding: 1rem;
  background: linear-gradient(145deg, rgba(229, 197, 134, .09), rgba(121, 189, 242, .025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}
.km-lesson-preview > p { display: flex; align-items: center; gap: .45rem; margin: 0 0 .55rem; color: #e8c873; font: 700 .64rem var(--font-head); letter-spacing: .08em; }
.km-lesson-preview > p span { width: 18px; height: 1px; background: #d5ae51; box-shadow: 0 0 8px rgba(213, 174, 81, .4); }
.km-lesson-preview > div { color: #e0e5ed; font-size: .81rem; line-height: 1.72; text-wrap: pretty; }
.km-lesson-preview ul { display: grid; gap: .42rem; margin: .72rem 0 0; padding: .72rem 0 0; border-top: 1px solid rgba(255, 255, 255, .07); list-style: none; }
.km-lesson-preview li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .45rem; color: #aab5c5; font-size: .72rem; line-height: 1.5; }
.km-lesson-preview li i { display: grid; place-items: center; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; background: rgba(229, 197, 134, .11); color: #e5c586; font: 700 .55rem var(--font-body); }
.km-prerequisites { padding: .9rem 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.km-prerequisites h3 { margin: 0 0 .65rem; color: #e8edf5; font: 700 .76rem var(--font-head); }
.km-prerequisites button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .55rem;
  width: 100%;
  min-height: 35px;
  border: 0;
  padding: .28rem 0;
  background: transparent;
  color: #aeb9ca;
  font: 500 .78rem var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: color .18s ease, transform .18s ease;
}
.km-prerequisites button span { width: 8px; height: 8px; border-radius: 50%; background: var(--prerequisite-color); }
.km-prerequisites button i { color: #64738b; font-style: normal; }
.km-prerequisites button:hover, .km-prerequisites button:focus-visible { outline: 0; color: #fff; transform: translateX(3px); }
.km-no-prerequisite { display: flex; align-items: center; gap: .65rem; margin: .85rem 0; border: 0; border-radius: 10px; padding: .7rem .78rem; background: rgba(121, 189, 242, .055); color: #b8c4d4; }
.km-no-prerequisite > i { display: grid; flex: 0 0 auto; place-items: center; width: 25px; height: 25px; border: 1px solid rgba(121, 189, 242, .28); border-radius: 50%; background: rgba(121, 189, 242, .08); color: #8cc9f6; font: 700 .7rem var(--font-body); }
.km-no-prerequisite span { display: grid; gap: .06rem; }
.km-no-prerequisite strong { color: #dbe6f2; font: 650 .75rem var(--font-head); }
.km-no-prerequisite small { color: #7f8da2; font-size: .65rem; }
.km-level { --level-color: #e9bf5b; margin-top: .85rem; border: 1px solid color-mix(in srgb, var(--level-color) 24%, transparent); border-radius: 11px; padding: .78rem .85rem; background: color-mix(in srgb, var(--level-color) 6%, transparent); }
.km-level.is-level-1 { --level-color: #63d5a1; }
.km-level.is-level-2 { --level-color: #e9bf5b; }
.km-level.is-level-3 { --level-color: #ef7777; }
.km-level-heading { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.km-level-heading > span { color: #a6b1c0; font: 650 .68rem var(--font-head); }
.km-level-heading strong { display: inline-flex; align-items: center; gap: .4rem; border-radius: 6px; padding: .24rem .48rem; background: color-mix(in srgb, var(--level-color) 12%, transparent); color: var(--level-color); font: 750 .71rem var(--font-head); }
.km-level-heading strong i { width: 7px; height: 7px; border-radius: 50%; background: var(--level-color); box-shadow: 0 0 8px color-mix(in srgb, var(--level-color) 48%, transparent); }
.km-level p { margin: .48rem 0 0; color: #7f8da2; font-size: .68rem; line-height: 1.5; }
.km-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .75rem; }
.km-tags small { margin-right: .15rem; color: #65738a; font-size: .61rem; }
.km-tags span { border: 1px solid rgba(255, 255, 255, .09); border-radius: 6px; padding: .22rem .42rem; background: rgba(255, 255, 255, .025); color: #8996aa; font-size: .62rem; }
.km-open {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 48px;
  margin-top: 1rem;
  border: 1px solid #f0cf80;
  border-radius: 9px;
  padding: .65rem .85rem;
  background: linear-gradient(110deg, #efc65d, #dba642);
  color: #171207;
  font: 800 .86rem var(--font-head);
  text-decoration: none;
  transition: transform .18s ease, filter .18s ease;
}
.km-open i { font-style: normal; font-size: 1.1rem; }
.km-open:hover, .km-open:focus-visible { outline: 0; transform: translateY(-2px); filter: brightness(1.06); }
.km-content-status { display: flex; align-items: center; gap: .65rem; margin: .9rem 0 0; border: 0; border-radius: 10px; padding: .7rem .78rem; background: rgba(213, 174, 81, .055); color: #b9c1ce; }
.km-content-status > i { display: grid; flex: 0 0 auto; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: rgba(213, 174, 81, .11); color: #d7b760; font: 700 .75rem var(--font-body); }
.km-content-status span { display: grid; gap: .04rem; font-size: .72rem; line-height: 1.4; }
.km-content-status small { color: #76839a; font-size: .63rem; }
.km-graph-note { margin: .75rem 0 0; color: #67748a; font-size: .7rem; text-align: right; }

.km-video-zone {
  --video-violet: #a78bfa;
  --video-violet-bright: #c4b5fd;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.15rem;
  margin-top: 1.2rem;
  border: 1px solid rgba(167, 139, 250, .38);
  border-radius: 14px;
  padding: 1.15rem 1.25rem;
  background:
    radial-gradient(circle at 7% 30%, rgba(167, 139, 250, .25), transparent 14rem),
    radial-gradient(circle at 84% 120%, rgba(97, 75, 180, .16), transparent 22rem),
    linear-gradient(108deg, rgba(30, 24, 55, .96), rgba(10, 13, 31, .98));
  box-shadow: inset 0 1px 0 rgba(222, 211, 255, .08), 0 20px 48px rgba(10, 6, 30, .18);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.km-video-zone:hover { transform: translateY(-2px); border-color: rgba(196, 181, 253, .62); box-shadow: inset 0 1px 0 rgba(232, 225, 255, .11), 0 24px 56px rgba(24, 12, 65, .28); }
.km-video-icon { display: grid; place-items: center; width: 60px; aspect-ratio: 1; border: 1px solid rgba(196, 181, 253, .54); border-radius: 16px; background: linear-gradient(145deg, rgba(167, 139, 250, .24), rgba(92, 68, 161, .16)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 28px rgba(139, 92, 246, .18); animation: km-video-float 3.8s ease-in-out infinite; }
.km-video-icon span { display: grid; place-items: center; font-size: 1.75rem; filter: drop-shadow(0 5px 10px rgba(4, 2, 14, .35)); }
.km-video-copy > p { display: flex; align-items: center; gap: .4rem; margin: 0 0 .24rem; color: var(--video-violet-bright); font: 700 .59rem var(--font-head); letter-spacing: .18em; }
.km-video-copy > p span { color: #8b5cf6; font-size: .5rem; text-shadow: 0 0 10px #a78bfa; }
.km-video-copy h2 { margin: 0; color: #f5f2ff; font: 750 clamp(1rem, 1.5vw, 1.28rem)/1.25 var(--font-head); text-wrap: balance; }
.km-video-copy > span { display: block; margin-top: .3rem; color: #aaa2c2; font-size: .76rem; line-height: 1.55; }
.km-video-zone > a { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 44px; border: 1px solid rgba(196, 181, 253, .72); border-radius: 9px; padding: .6rem .9rem; background: rgba(139, 92, 246, .1); color: #ddd6fe; font: 750 .8rem var(--font-head); text-decoration: none; white-space: nowrap; transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease; }
.km-video-zone > a i { font-style: normal; }
.km-video-zone > a:hover, .km-video-zone > a:focus-visible { outline: 0; transform: translateY(-2px); background: #a78bfa; color: #151022; box-shadow: 0 10px 24px rgba(139, 92, 246, .24); }
@keyframes km-video-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-4px) rotate(2deg); }
}

.km-owner-tools { margin-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .08); padding-top: .85rem; }
.km-owner-label { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .5rem; }
.km-owner-label span { color: #919db0; font: 650 .64rem var(--font-head); }
.km-owner-label small { color: #59667a; font-size: .58rem; }
.km-owner-toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.km-owner-tool { display: flex; align-items: center; justify-content: center; gap: .42rem; min-height: 42px; border: 1px solid rgba(137, 155, 183, .22); border-radius: 9px; padding: .5rem .65rem; background: rgba(255, 255, 255, .025); color: #9ba8ba; font: 700 .7rem var(--font-head); cursor: pointer; transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease; }
.km-owner-tool i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: rgba(255, 255, 255, .045); color: currentColor; font: 700 .78rem var(--font-body); }
.km-owner-tool.is-primary { border-color: rgba(229, 197, 134, .36); background: rgba(229, 197, 134, .075); color: #ecd18c; }
.km-owner-tool:hover, .km-owner-tool:focus-visible { outline: 0; transform: translateY(-1px); border-color: rgba(229, 197, 134, .62); color: #f5e2ad; }
.km-quick-add, .km-editor-panel { margin-top: .65rem; border: 1px solid rgba(229, 197, 134, .16); border-radius: 9px; padding: .8rem; background: rgba(3, 8, 18, .58); }
.km-quick-add label { display: block; margin-bottom: .48rem; color: #dce3ee; font: 700 .74rem var(--font-head); }
.km-quick-add > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem; }
.km-quick-add input { min-width: 0; border: 1px solid rgba(255, 255, 255, .13); border-radius: 7px; padding: .56rem .62rem; background: #050b17; color: var(--text); font: 500 .8rem var(--font-body); }
.km-quick-add button { border: 1px solid #e5c586; border-radius: 7px; padding: .5rem .72rem; background: #e5c586; color: #171207; font: 800 .72rem var(--font-head); cursor: pointer; }
.km-quick-add input:focus, .km-field input:focus, .km-field select:focus, .km-field textarea:focus { outline: 2px solid rgba(229, 197, 134, .7); outline-offset: 2px; }
.km-quick-add small { display: block; margin-top: .48rem; color: #76839a; font-size: .65rem; line-height: 1.45; }
.km-editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; padding-bottom: .65rem; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.km-editor-heading small { color: #d2b464; font: 700 .55rem var(--font-head); letter-spacing: .14em; }
.km-editor-heading h3 { margin: .14rem 0 0; color: #f0f2f7; font: 750 .94rem var(--font-head); }
.km-editor-heading button { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 7px; background: transparent; color: #8e9aaf; font-size: 1rem; cursor: pointer; }
.km-editor-heading button:hover, .km-editor-heading button:focus-visible { outline: 0; border-color: rgba(229, 197, 134, .45); color: #efd490; }
.km-field { display: grid; gap: .28rem; margin: .7rem 0; }
.km-field label, .km-order-tools > span { color: #8995a9; font: 600 .72rem var(--font-body); }
.km-field input, .km-field select, .km-field textarea { width: 100%; border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px; padding: .56rem .65rem; background: #050b17; color: var(--text); font: 400 .84rem var(--font-body); }
.km-field textarea { min-height: 88px; resize: vertical; }
.km-actions, .km-order-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1rem; }
.km-order-tools { padding: .8rem 0; border-top: 1px solid rgba(255, 255, 255, .07); }
.km-order-tools > span { width: 100%; }
.km-action { border: 1px solid rgba(201, 168, 76, .42); border-radius: 8px; padding: .5rem .7rem; background: rgba(201, 168, 76, .1); color: var(--gold-light); font: 700 .76rem var(--font-head); cursor: pointer; }
.km-action.ghost { border-color: var(--border); background: transparent; color: var(--text-muted); }
.km-action:disabled { cursor: not-allowed; opacity: .38; }
.km-action.danger { border-color: rgba(255, 107, 107, .45); color: #ffaaaa; background: rgba(255, 107, 107, .08); }
.km-editor-status { min-height: 1.1rem; margin-top: .7rem; color: #8995a9; font-size: .74rem; }
.km-editor-status.error { color: #ff9b9b; }
.km-editor-status.ok { color: #8adfbf; }

/* ── Emoji nodes + category hubs + richer inspector (2026-09-29) ── */
.km-node-core {
  display: grid;
  place-items: center;
  width: auto;
  background: none;
  box-shadow: none;
  font-size: calc(var(--node-orbit-size) * .46);
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55));
}
.km-graph-node.is-selected .km-node-core, .km-graph-node.is-guide .km-node-core { background: none; box-shadow: none; }
.km-node-orbit { background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--node-color) 26%, #0a1426), color-mix(in srgb, var(--node-color) 8%, #060d1a) 72%); }

.km-graph-node.is-hub { --node-orbit-size: 92px; width: 200px; z-index: 4; gap: .4rem; }
.km-graph-node.is-hub .km-node-orbit {
  border: 2.5px solid var(--node-color);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--node-color) 14%, transparent), 0 0 0 16px color-mix(in srgb, var(--node-color) 6%, transparent), 0 0 46px color-mix(in srgb, var(--node-color) 45%, transparent);
}
.km-graph-node.is-hub .km-node-orbit::before { inset: -22px; border-style: dashed; border-color: color-mix(in srgb, var(--node-color) 40%, transparent); opacity: .7; transform: none; animation: km-hub-spin 26s linear infinite; }
.km-graph-node.is-hub .km-node-title {
  max-width: 200px;
  color: var(--node-color);
  font: 800 1.32rem/1.15 var(--font-head);
  letter-spacing: -.01em;
  text-shadow: 0 0 18px color-mix(in srgb, var(--node-color) 45%, transparent), 0 2px 10px #030712;
}
.km-hub-kicker {
  order: -1;
  border: 1px solid color-mix(in srgb, var(--node-color) 55%, transparent);
  border-radius: 999px;
  padding: .14rem .6rem;
  background: color-mix(in srgb, var(--node-color) 16%, #050b17);
  color: color-mix(in srgb, var(--node-color) 70%, white);
  font: 750 .62rem var(--font-head);
  letter-spacing: .12em;
}
.km-hub-glow {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 340px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--node-color) 13%, transparent), transparent 66%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.km-graph-node.is-hub.is-selected .km-node-orbit { border-color: #f3cf74; }
.km-graph-node.is-hub.is-selected .km-node-title { color: #fff4d8; }
@keyframes km-hub-spin { to { transform: rotate(360deg); } }

.km-filter i { display: inline-grid; place-items: center; width: auto; height: auto; background: none; box-shadow: none; font-style: normal; font-size: .9rem; line-height: 1; }
.km-filter.is-active { border-color: color-mix(in srgb, var(--filter-color, #e7b74f) 55%, transparent); background: color-mix(in srgb, var(--filter-color, #e7b74f) 14%, transparent); }
.km-legend-categories i { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--legend-color); background: color-mix(in srgb, var(--legend-color) 16%, transparent); font-style: normal; font-size: .72rem; }

.km-inspector { border-top: 3px solid var(--category-color); padding-top: 1.2rem; }
.km-inspector::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 150px;
  border-radius: 14px 14px 0 0;
  background: radial-gradient(ellipse at 20% 0%, color-mix(in srgb, var(--category-color) 20%, transparent), transparent 70%);
  pointer-events: none;
}
.km-inspector > * { position: relative; }
.km-inspector-category {
  border: 1px solid color-mix(in srgb, var(--category-color) 45%, transparent);
  border-radius: 999px;
  padding: .3rem .7rem .3rem .5rem;
  background: color-mix(in srgb, var(--category-color) 14%, transparent);
  color: color-mix(in srgb, var(--category-color) 65%, white);
  font-size: .76rem;
}
.km-inspector-category i { display: inline; width: auto; height: auto; background: none; box-shadow: none; font-style: normal; font-size: .9rem; }
.km-map-status { font-size: .68rem; }
.km-inspector-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .9rem; margin: 1.15rem 0 .2rem; }
.km-inspector-icon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border: 1.5px solid color-mix(in srgb, var(--category-color) 60%, transparent);
  border-radius: 16px;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--category-color) 30%, #0b1628), color-mix(in srgb, var(--category-color) 8%, #060d1a));
  box-shadow: 0 0 24px color-mix(in srgb, var(--category-color) 30%, transparent);
  font-size: 1.9rem;
  line-height: 1;
}
.km-inspector.is-hub .km-inspector-icon { width: 70px; height: 70px; font-size: 2.2rem; }
.km-inspector-path { margin: 0 0 .25rem; font-size: .72rem; }
.km-inspector h2 { font-size: clamp(1.55rem, 2.1vw, 2.1rem); }
.km-inspector.is-hub h2 { color: color-mix(in srgb, var(--category-color) 70%, white); }
.km-inspector-summary { font-size: .95rem; margin-top: .8rem; }
.km-lesson-preview { border-color: color-mix(in srgb, var(--category-color) 30%, transparent); background: linear-gradient(145deg, color-mix(in srgb, var(--category-color) 10%, transparent), rgba(255, 255, 255, .015)); }
.km-lesson-preview > p { font-size: .74rem; letter-spacing: .04em; color: color-mix(in srgb, var(--category-color) 60%, white); }
.km-lesson-preview > p span { width: auto; height: auto; background: none; box-shadow: none; font-size: .95rem; letter-spacing: 0; }
.km-lesson-preview > div { font-size: .88rem; }
.km-lesson-preview li { font-size: .8rem; }
.km-lesson-preview li i { background: color-mix(in srgb, var(--category-color) 18%, transparent); color: color-mix(in srgb, var(--category-color) 60%, white); }
.km-prerequisites h3 { display: flex; align-items: center; gap: .4rem; font-size: .86rem; }
.km-prerequisites button {
  min-height: 44px;
  margin-bottom: .4rem;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 10px;
  padding: .4rem .7rem .4rem .45rem;
  background: rgba(255, 255, 255, .025);
  font-size: .86rem;
}
.km-prerequisites button span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--prerequisite-color) 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--prerequisite-color) 45%, transparent);
  font-size: .95rem;
}
.km-prerequisites button:hover, .km-prerequisites button:focus-visible { border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .05); }
.km-no-prerequisite > i { border: 0; background: none; font-size: 1.1rem; }
.km-no-prerequisite strong { font-size: .84rem; }
.km-no-prerequisite small { font-size: .72rem; }
.km-level-heading > span { font-size: .78rem; }
.km-level-heading strong { font-size: .78rem; }
.km-level-heading strong i { width: auto; height: auto; background: none; box-shadow: none; font-style: normal; }
.km-level p { font-size: .76rem; }
.km-tags small { font-size: .7rem; }
.km-tags span { font-size: .72rem; padding: .26rem .5rem; }
.km-content-status > i { background: none; font-size: 1rem; }
.km-content-status span { font-size: .8rem; }
.km-content-status small { font-size: .7rem; }
.km-open { font-size: .92rem; }

@media (min-width: 1600px) {
  .km-workspace { grid-template-columns: minmax(0, 1fr) minmax(380px, 420px); gap: 1.5rem; }
  .km-graph-node { width: 166px; }
  .km-node-title { max-width: 166px; font-size: .94rem; }
  .km-graph-node.is-weight-2 .km-node-title { font-size: .97rem; }
  .km-graph-node.is-weight-3 .km-node-title { font-size: 1.02rem; }
  .km-graph-node.is-category .km-node-title { font-size: 1.08rem; }
  .km-graph-node { --node-orbit-size: 42px; --node-core-size: 15px; }
  .km-graph-node.is-weight-2 { --node-orbit-size: 49px; --node-core-size: 18px; }
  .km-graph-node.is-weight-3 { --node-orbit-size: 59px; --node-core-size: 21px; }
  .km-graph-node.is-category { --node-orbit-size: 66px; --node-core-size: 24px; }
  .km-graph-node.is-hub { --node-orbit-size: 104px; width: 220px; }
  .km-graph-node.is-hub .km-node-title { max-width: 220px; font-size: 1.5rem; }
}
@media (max-width: 1250px) {
  .km-hero { grid-template-columns: 1fr; gap: 1.5rem; }
  .km-search-actions { max-width: 760px; }
  .km-workspace { grid-template-columns: minmax(0, 1fr) 310px; }
}
@media (max-width: 980px) {
  .knowledge-page { width: min(100% - 32px, 920px); }
  .km-map-toolbar { align-items: flex-start; flex-direction: column; }
  .km-filters { justify-content: flex-start; }
  .km-workspace { grid-template-columns: 1fr; }
  .km-inspector { position: relative; max-height: none; min-height: 0; overflow: visible; }
  .km-graph-stage { min-width: 100%; height: 1200px; }
  .km-graph-node { width: 136px; }
  .km-node-title { max-width: 136px; font-size: .8rem; }
  .km-graph-node.is-weight-2 .km-node-title { font-size: .84rem; }
  .km-graph-node.is-weight-3 .km-node-title { font-size: .88rem; }
  .km-graph-node.is-category .km-node-title { font-size: .92rem; }
  .km-graph-node.is-hub { --node-orbit-size: 78px; width: 170px; }
  .km-graph-node.is-hub .km-node-title { max-width: 170px; font-size: 1.12rem; }
  .km-hub-glow { width: 260px; }
}
@media (max-width: 680px) {
  .knowledge-page { width: min(100% - 24px, 640px); padding-top: 84px; padding-bottom: 40px; }
  .km-hero { padding: 1.2rem 0 1.5rem; }
  .km-hero h1 { font-size: clamp(2.4rem, 14vw, 3.65rem); }
  .km-search-actions { grid-template-columns: 1fr; }
  .km-guide-button { width: 100%; }
  .km-map-toolbar { padding-top: 1rem; }
  .km-filters { flex-wrap: nowrap; width: calc(100vw - 24px); padding: 0 12px 4px; margin-left: -12px; overflow-x: auto; scrollbar-width: none; }
  .km-filters::-webkit-scrollbar { display: none; }
  .km-filter { flex: none; }
  .km-graph-scroll { overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; scrollbar-color: rgba(229, 197, 134, .4) transparent; cursor: grab; }
  .km-graph-stage { min-width: 900px; height: 1200px; }
  .km-legend { grid-template-columns: repeat(3, auto); }
  .km-legend > div { min-width: 120px; }
  .km-mobile-pan { display: block; position: sticky; left: .75rem; width: max-content; margin: 0; padding: .3rem .5rem; border-radius: 5px; background: rgba(4, 10, 21, .72); color: #8995a9; font-size: .62rem; }
  .km-inspector { padding: 1.2rem; }
  .km-owner-toolbar { grid-template-columns: 1fr; }
  .km-quick-add > div { grid-template-columns: 1fr; }
  .km-video-zone { grid-template-columns: auto 1fr; padding: 1rem; }
  .km-video-zone > a { grid-column: 1 / -1; width: 100%; }
  .km-graph-note { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .km-edge, .km-node-orbit, .km-video-icon, .km-graph-node.is-hub .km-node-orbit::before { animation: none !important; }
  .km-graph-node, .km-node-orbit::before, .km-guide-button, .km-open, .km-prerequisites button, .km-video-zone, .km-video-zone > a { transition: none; }
}

/* Read-lesson CTA: primary action, sits right under the preview (2026-09-29) */
.km-open { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8rem; min-height: 64px; margin: .2rem 0 1.1rem; border-radius: 12px; padding: .75rem 1rem; box-shadow: 0 10px 26px rgba(233, 184, 70, .28), inset 0 1px 0 rgba(255, 255, 255, .45); position: relative; overflow: hidden; }
.km-open::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%); transform: translateX(-120%); animation: km-open-shine 3.6s ease-in-out 1.2s infinite; pointer-events: none; }
.km-open-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: rgba(23, 18, 7, .14); font-size: 1.4rem; }
.km-open-text { display: grid; gap: .1rem; text-align: left; }
.km-open-text b { font: 800 1.02rem var(--font-head); color: #171207; }
.km-open-text small { font: 600 .72rem var(--font-body); color: rgba(23, 18, 7, .72); }
.km-open > i { font-style: normal; font-size: 1.35rem; transition: transform .18s ease; }
.km-open:hover > i, .km-open:focus-visible > i { transform: translateX(4px); }
@keyframes km-open-shine { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .km-open::after { animation: none; display: none; } }

/* ── ⚡ AI Lesson Queue (2026-10-15) ────────────────────────────── */
.km-queue-zone { margin-top: .75rem; }
.km-queue-toolbar { display: flex; }
.km-queue-trigger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(229, 197, 134, .38);
  border-radius: 10px;
  padding: .55rem .85rem;
  background: linear-gradient(135deg, rgba(229, 197, 134, .12), rgba(201, 168, 76, .05));
  color: #f7e6b5;
  font: 750 .82rem var(--font-head);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.km-queue-trigger-btn:hover, .km-queue-trigger-btn:focus-visible {
  outline: 0;
  transform: translateY(-1px);
  border-color: rgba(229, 197, 134, .75);
  background: linear-gradient(135deg, rgba(229, 197, 134, .2), rgba(201, 168, 76, .1));
  box-shadow: 0 4px 16px rgba(229, 197, 134, .15);
}
.km-queue-trigger-btn.is-queued {
  border-color: rgba(138, 223, 191, .45);
  background: rgba(138, 223, 191, .08);
  color: #abedd0;
}
.km-queue-trigger-btn i { font-style: normal; font-size: 1rem; }

.km-queue-form {
  margin-top: .65rem;
  border: 1px solid rgba(229, 197, 134, .28);
  border-radius: 10px;
  padding: .9rem;
  background: rgba(4, 9, 20, .85);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
}
.km-queue-form-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .8rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.km-queue-form-head small { color: #e5c586; font: 750 .62rem var(--font-head); letter-spacing: .12em; }
.km-queue-form-head h4 { margin: .2rem 0 0; color: #f5f4f0; font: 700 .92rem var(--font-head); }
.km-queue-form-head button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 6px;
  background: transparent;
  color: #8995a9;
  font-size: .9rem;
  cursor: pointer;
}
.km-queue-form-head button:hover { border-color: rgba(229, 197, 134, .5); color: #fff; }

.km-action.is-queue-submit {
  border-color: #e5c586;
  background: linear-gradient(110deg, #f1c65c, #dca844);
  color: #171207;
  font: 800 .82rem var(--font-head);
  box-shadow: 0 4px 14px rgba(205, 155, 50, .25);
}
.km-action.is-queue-submit:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* Toolbar nav button */
.km-queue-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  min-height: 34px;
  border: 1px solid rgba(229, 197, 134, .32);
  border-radius: 8px;
  padding: .35rem .65rem;
  background: rgba(229, 197, 134, .08);
  color: #edd596;
  font: 750 .75rem var(--font-head);
  cursor: pointer;
  transition: background .18s, border-color .18s, transform .18s;
}
.km-queue-nav-btn:hover, .km-queue-nav-btn:focus-visible {
  outline: 0;
  border-color: rgba(229, 197, 134, .7);
  background: rgba(229, 197, 134, .18);
  color: #fff;
  transform: translateY(-1px);
}
.km-queue-nav-btn.has-items { border-color: rgba(229, 197, 134, .65); background: rgba(229, 197, 134, .15); }
.km-queue-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e5c586;
  color: #171207;
  font: 800 .66rem var(--font-head);
  line-height: 1;
}

/* Slide-out Queue Drawer */
.km-queue-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2500;
  background: rgba(3, 7, 18, .75);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.km-queue-backdrop.is-open { opacity: 1; pointer-events: auto; }

.km-queue-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2600;
  width: min(100%, 480px);
  background: #070e1c;
  border-left: 1px solid rgba(229, 197, 134, .25);
  box-shadow: -12px 0 38px rgba(0, 0, 0, .6);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.16, 1, .3, 1);
}
.km-queue-drawer.is-open { transform: translateX(0); }

.km-queue-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 1.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: rgba(3, 8, 18, .9);
}
.km-queue-drawer-head h3 {
  margin: 0;
  color: #f7e6b5;
  font: 800 1.15rem var(--font-head);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.km-queue-drawer-head p { margin: .2rem 0 0; color: #8995a9; font-size: .78rem; }
.km-queue-drawer-close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  background: transparent;
  color: #cfd6e4;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all .18s;
}
.km-queue-drawer-close:hover { border-color: rgba(229, 197, 134, .5); color: #fff; }

.km-queue-drawer-tabs {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .75rem 1.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  background: rgba(5, 11, 24, .6);
}
.km-queue-tab-btn {
  border: 1px solid transparent;
  border-radius: 7px;
  padding: .32rem .65rem;
  background: transparent;
  color: #8c99af;
  font: 650 .75rem var(--font-body);
  cursor: pointer;
  transition: all .15s;
}
.km-queue-tab-btn:hover { color: #f0f2f7; background: rgba(255, 255, 255, .04); }
.km-queue-tab-btn.is-active {
  border-color: rgba(229, 197, 134, .3);
  background: rgba(229, 197, 134, .1);
  color: #f5df9e;
}
.km-queue-custom-add-toggle {
  margin-left: auto;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 7px;
  padding: .32rem .65rem;
  background: rgba(255, 255, 255, .04);
  color: #cfd6e4;
  font: 700 .75rem var(--font-head);
  cursor: pointer;
}
.km-queue-custom-add-toggle:hover { border-color: rgba(229, 197, 134, .5); color: #f5df9e; }

.km-queue-custom-form {
  padding: 1rem 1.4rem;
  background: rgba(3, 7, 16, .7);
  border-bottom: 1px solid rgba(229, 197, 134, .2);
}

.km-queue-list {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
.km-queue-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  color: #79869d;
  font-size: .88rem;
  line-height: 1.6;
}
.km-queue-empty i { display: block; font-size: 2.2rem; margin-bottom: .6rem; }

.km-queue-card {
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 11px;
  padding: .95rem 1.1rem;
  background: rgba(12, 22, 42, .6);
  display: flex;
  flex-direction: column;
  gap: .55rem;
  transition: border-color .18s;
}
.km-queue-card:hover { border-color: rgba(229, 197, 134, .28); }
.km-queue-card.is-completed { opacity: .65; border-style: dashed; }

.km-queue-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .6rem;
}
.km-queue-card-title {
  margin: 0;
  color: #f5f4f0;
  font: 750 .94rem var(--font-head);
  line-height: 1.35;
}
.km-queue-card-meta {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
}
.km-queue-card-tag {
  display: inline-block;
  padding: .15rem .45rem;
  border-radius: 5px;
  background: rgba(255, 255, 255, .06);
  color: #9bb0ce;
  font: 600 .68rem var(--font-body);
}
.km-queue-card-status {
  display: inline-block;
  padding: .15rem .45rem;
  border-radius: 5px;
  font: 700 .68rem var(--font-head);
}
.km-queue-card-status.pending { background: rgba(229, 197, 134, .14); color: #f5df9e; }
.km-queue-card-status.completed { background: rgba(138, 223, 191, .15); color: #8adfbf; }

.km-queue-card-notes {
  margin: 0;
  color: #b7c2d4;
  font-size: .84rem;
  line-height: 1.6;
  white-space: pre-wrap;
  background: rgba(0, 0, 0, .25);
  padding: .6rem .75rem;
  border-radius: 7px;
  border-left: 2px solid rgba(229, 197, 134, .4);
}

.km-queue-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: .4rem;
  border-top: 1px solid rgba(255, 255, 255, .06);
  color: #69788f;
  font-size: .72rem;
}
.km-queue-card-actions {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.km-queue-card-btn {
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 6px;
  padding: .28rem .55rem;
  background: transparent;
  color: #9cb0cc;
  font: 600 .72rem var(--font-body);
  cursor: pointer;
  transition: all .15s;
}
.km-queue-card-btn:hover { border-color: rgba(229, 197, 134, .4); color: #fff; }
.km-queue-card-btn.danger:hover { border-color: rgba(255, 107, 107, .5); color: #ff9b9b; }

.km-queue-edit-form {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  padding: .3rem 0;
}
.km-queue-edit-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .3rem;
}
.km-queue-edit-actions .is-cancel {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .15);
  color: #adbcd4;
  border-radius: 7px;
  padding: .4rem .8rem;
  cursor: pointer;
  font: 600 .78rem var(--font-body);
  transition: all .15s;
}
.km-queue-edit-actions .is-cancel:hover {
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

.km-queue-drawer-foot {
  padding: 1.1rem 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: rgba(3, 8, 18, .9);
  color: #8c9cb3;
  font-size: .76rem;
  line-height: 1.55;
}
.km-queue-drawer-foot code {
  color: #f5df9e;
  background: rgba(229, 197, 134, .1);
  padding: .15rem .35rem;
  border-radius: 4px;
  font-family: monospace;
}


/* 2026-10-16 light mode: the interactive map keeps its night look (glow labels, orbit discs are designed for dark), like charts in Design.md §11 */
html[data-ak-light][data-theme=light] .km-graph-shell{color-scheme:dark;background-color:#0b1630;--bg:#030712;--bg-card:rgba(255,255,255,.04);--text:#f0f0f5;--text-muted:#a3a3b8;--border:rgba(255,255,255,.1);--gold:#c9a84c;--gold-light:#E5C586;--green:#4DD2A0;--red:#f0857a;--blue:#6aa9e8;--purple:#b98cff;--orange:#FF8C42;color:#f0f0f5}

/* 2026-10-16 the legend sat on top of the bottom row of nodes (E17-E19); it now sits under the map, inside the same frame */
.km-graph-shell > .km-legend { position: relative; left: auto; bottom: auto; margin: 12px 16px 16px; width: max-content; max-width: calc(100% - 32px); }


/* ── Reading order (ลำดับการอ่าน), 2026-10-17 ─────────────────────────────
   A satin strip with a gold-foil edge (Design.md §16.2) that holds a trail of numbered stars.
   It is fixed to the bottom of the screen while the map/list is on screen and slides away when it is not.
   (Not position:sticky: the shell gives <body> overflow-y:auto while <html> scrolls, so sticky never engages.) */
.km-guide-status { grid-column: 1 / -1; margin: 0; color: #cfe9d9; font: 600 .9rem/1.45 var(--font-body); }
.km-guide-status:empty { display: none; }
.km-route {
  position: fixed;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 40;
  width: min(1120px, calc(100% - 32px));
  max-height: calc(100dvh - 96px);
  overflow-y: auto;
  transform: translateX(-50%);
  transition: transform .38s cubic-bezier(.16, 1, .3, 1), opacity .25s ease;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "head head" "trail trail" "now actions" "status status";
  gap: .7rem 1rem;
  margin-top: .4rem;
  padding: 1rem 1.15rem;
  border-radius: 16px;
  color: #f3eee2;
  background: linear-gradient(155deg, #34405f, #1d2640);
  --km-route-foil: linear-gradient(135deg, #f2e1b4, #a8853f 32%, #f6e6bd 55%, #8f6d2e 80%, #e9d3a0);
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .9), 0 -6px 30px -18px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.km-route.is-entering { animation: km-route-in .42s cubic-bezier(.16, 1, .3, 1) both; }
/* Gold-foil hairline drawn as a masked ring, so the strip's own fill stays a plain satin gradient. */
.km-route::before { content: ""; position: absolute; inset: 0; z-index: -1; padding: 1.5px; border-radius: inherit; background: var(--km-route-foil); pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.km-route { isolation: isolate; }
@keyframes km-route-in { from { opacity: 0; transform: translate(-50%, 14px); } }
.km-route.is-offstage { opacity: 0; pointer-events: none; transform: translate(-50%, calc(100% + 24px)); }
.km-workspace.has-route { padding-bottom: var(--km-route-space, 220px); }
.km-route-head { grid-area: head; display: flex; align-items: center; gap: .75rem 1rem; flex-wrap: wrap; }
.km-route-head h2 { display: flex; align-items: baseline; gap: .5rem; margin: 0; color: #f5e3b3; font: 600 1.15rem/1.3 var(--font-head, 'Mitr', sans-serif); }
.km-route-head h2 > span { font-size: 1.05rem; }
.km-route-head h2 small { color: #c9d2e3; font: 500 .9rem/1.3 var(--font-body); }
.km-route-count { margin: 0 0 0 auto; color: #dfe5f0; font: 600 .92rem/1.4 var(--font-body); }
.km-route-count b { color: #f5d98d; font-size: 1.05rem; }
.km-route-done { color: #8fe0b5; }
.km-route-close { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; background: rgba(7, 12, 26, .35); color: #e8edf6; font: 700 .95rem/1 var(--font-body); cursor: pointer; transition: background .15s, border-color .15s; }
.km-route-close:hover, .km-route-close:focus-visible { outline: 0; border-color: #f0cf80; background: rgba(229, 197, 134, .18); }
/* The trail: numbered stars joined by a thin line; it scrolls sideways when the route is long. */
.km-route-trail { grid-area: trail; position: relative; display: flex; gap: .55rem; margin: 0; padding: .35rem .2rem .45rem; list-style: none; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.km-route-trail::-webkit-scrollbar { display: none; }
.km-route-trail li { position: relative; flex: 0 0 auto; display: grid; place-items: center; }
.km-route-trail li + li::before { content: ""; position: absolute; top: 50%; right: 100%; width: .55rem; height: 2px; background: rgba(214, 223, 238, .32); transform: translateY(-50%); }
.km-route-star { display: grid; place-items: center; width: 34px; height: 34px; border: 1.5px dashed rgba(201, 210, 227, .55); border-radius: 50%; background: rgba(8, 14, 30, .55); color: #c9d2e3; font: 700 .86rem/1 var(--font-head, 'Outfit', sans-serif); cursor: pointer; transition: transform .18s cubic-bezier(.16, 1, .3, 1), background .18s, border-color .18s; }
.km-route-star:hover, .km-route-star:focus-visible { outline: 0; transform: translateY(-2px); border-color: #f0cf80; color: #f5e3b3; }
.km-route-star.is-read { border-style: solid; border-color: #5fcf98; background: rgba(77, 210, 160, .18); color: #a5f0c8; }
.km-route-star.is-current { width: 40px; height: 40px; border: 0; background-color: #f1c65c; background-image: radial-gradient(circle at 35% 30%, #fff3c7, #f1c65c 55%, #c9962f); color: #1c1405; font-size: .95rem; box-shadow: 0 0 0 4px rgba(241, 198, 92, .2), 0 0 18px rgba(241, 198, 92, .55); }
.km-route-now { grid-area: now; display: flex; align-items: center; gap: .65rem; min-width: 0; }
.km-route-icon { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; background: rgba(8, 14, 30, .5); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--category-color) 55%, transparent); font-size: 1.25rem; }
.km-route-now strong { min-width: 0; color: #fbf6ea; font: 600 1.18rem/1.35 var(--font-head, 'Mitr', sans-serif); overflow-wrap: anywhere; }
.km-route-actions { grid-area: actions; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .5rem; }
.km-route-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 42px; padding: .55rem .95rem; border-radius: 999px; font: 700 .9rem/1.2 var(--font-head, 'Mitr', sans-serif); text-decoration: none; cursor: pointer; transition: transform .16s cubic-bezier(.16, 1, .3, 1), filter .16s, background .16s, border-color .16s; }
.km-route-btn:active:not([disabled]) { transform: scale(.97); }
.km-route-btn[disabled] { color: #7f8aa0; border-color: rgba(255, 255, 255, .12); background: transparent; cursor: not-allowed; }
.km-route-btn.is-primary { border: 1px solid #f0cf80; background: linear-gradient(110deg, #f1c65c, #dca844); color: #171207; box-shadow: 0 8px 22px -10px rgba(241, 198, 92, .7); }
.km-route-btn.is-primary:hover, .km-route-btn.is-primary:focus-visible { outline: 0; filter: brightness(1.07); transform: translateY(-1px); }
.km-route-btn.is-secondary, .km-route-btn.is-open, .km-route-btn.is-mark { border: 1px solid rgba(226, 232, 242, .3); background: rgba(8, 14, 30, .42); color: #eef1f7; }
.km-route-btn.is-secondary:hover:not([disabled]), .km-route-btn.is-open:hover, .km-route-btn.is-mark:hover, .km-route-btn.is-secondary:focus-visible, .km-route-btn.is-open:focus-visible, .km-route-btn.is-mark:focus-visible { outline: 0; border-color: #f0cf80; color: #f5e3b3; }
.km-route-btn.is-mark.is-on { border-color: #5fcf98; background: rgba(77, 210, 160, .16); color: #a5f0c8; }
.km-route-soon { display: inline-flex; align-items: center; gap: .35rem; color: #c9d2e3; font: 500 .88rem/1.4 var(--font-body); }
.km-route-status { grid-area: status; margin: 0; color: #dfe5f0; font: 500 .9rem/1.45 var(--font-body); }
.km-route-status:empty { display: none; }
.km-route-undo { margin-left: .4rem; padding: .15rem .65rem; border: 1px solid #f0cf80; border-radius: 999px; background: transparent; color: #f5d98d; font: 700 .85rem/1.4 var(--font-body); cursor: pointer; }
.km-route-undo:hover, .km-route-undo:focus-visible { outline: 0; background: rgba(229, 197, 134, .18); }
.km-inspector.is-route-flash { animation: km-route-flash 1.1s cubic-bezier(.16, 1, .3, 1) 1; }
@keyframes km-route-flash { 0% { box-shadow: 0 0 0 3px rgba(241, 198, 92, .85); } 100% { box-shadow: 0 0 0 3px rgba(241, 198, 92, 0); } }
/* Arriving at a step: the node gives one soft pulse so the eye finds it after the scroll. */
.km-graph-node.is-route-arrive .km-node-orbit { animation: km-route-arrive .9s cubic-bezier(.16, 1, .3, 1) 1; }
@keyframes km-route-arrive { 0% { box-shadow: 0 0 0 0 rgba(241, 198, 92, .75); } 100% { box-shadow: 0 0 0 26px rgba(241, 198, 92, 0); } }
.km-graph-node.is-read:not(.is-selected) .km-node-title::after { content: " ✓"; color: #8fe0b5; }
@media (max-width: 760px) {
  .km-route { width: calc(100% - 20px); bottom: max(10px, env(safe-area-inset-bottom)); grid-template-columns: 1fr; grid-template-areas: "head" "trail" "now" "actions" "status"; padding: .7rem .75rem .75rem; gap: .45rem; }
  .km-route-head { gap: .15rem .6rem; padding-right: 2.5rem; }
  .km-route-head h2 { font-size: 1.02rem; }
  .km-route-count { margin-left: 0; font-size: .86rem; }
  .km-route-close { position: absolute; top: .55rem; right: .55rem; width: 34px; height: 34px; }
  .km-route-trail { gap: .45rem; padding: .2rem .1rem .25rem; }
  .km-route-trail li + li::before { width: .45rem; }
  .km-route-star { width: 32px; height: 32px; font-size: .8rem; }
  .km-route-star.is-current { width: 36px; height: 36px; }
  .km-route-icon { width: 34px; height: 34px; font-size: 1.05rem; }
  .km-route-now strong { font-size: 1.04rem; }
  .km-route-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
  .km-route-btn { min-height: 40px; padding: .45rem .6rem; font-size: .86rem; }
  .km-route-soon { grid-column: 1 / -1; font-size: .84rem; }
}
html[data-ak-light][data-theme=light] .km-route {
  color: #2b2212;
  background: linear-gradient(155deg, #fffdf8, #f4f1ea);
  --km-route-foil: linear-gradient(135deg, #c9a251, #7d5a1c 32%, #d9b86a 55%, #6d4c14 80%, #c49a48);
  box-shadow: 0 26px 50px -32px rgba(64, 48, 20, .45), inset 0 1px 0 #fff;
}
html[data-ak-light][data-theme=light] .km-route-head h2 { color: #6d4c14; }
html[data-ak-light][data-theme=light] .km-route-head h2 small, html[data-ak-light][data-theme=light] .km-route-count, html[data-ak-light][data-theme=light] .km-route-status, html[data-ak-light][data-theme=light] .km-route-soon { color: #4a4232; }
html[data-ak-light][data-theme=light] .km-route-count b { color: #8a5b0a; }
html[data-ak-light][data-theme=light] .km-route-done { color: #17663f; }
html[data-ak-light][data-theme=light] .km-route-now strong { color: #1d1608; }
html[data-ak-light][data-theme=light] .km-route-icon { background: #fff; }
html[data-ak-light][data-theme=light] .km-route-close { border-color: #b9a77d; background: #fff; color: #3d321b; }
html[data-ak-light][data-theme=light] .km-route-trail li + li::before { background: #c9b98f; }
html[data-ak-light][data-theme=light] .km-route-star { border-color: #a99a78; background: #fff; color: #4a4232; }
html[data-ak-light][data-theme=light] .km-route-star.is-read { border-color: #23935a; background: #e3f6ea; color: #17663f; }
html[data-ak-light][data-theme=light] .km-route-star.is-current { color: #1c1405; }
html[data-ak-light][data-theme=light] .km-route-btn.is-secondary, html[data-ak-light][data-theme=light] .km-route-btn.is-open, html[data-ak-light][data-theme=light] .km-route-btn.is-mark { border-color: #b9a77d; background: #fff; color: #2b2212; }
html[data-ak-light][data-theme=light] .km-route-btn.is-mark.is-on { border-color: #23935a; background: #e3f6ea; color: #17663f; }
html[data-ak-light][data-theme=light] .km-route-btn[disabled] { color: #8b8270; background: transparent; }
html[data-ak-light][data-theme=light] .km-route-undo { border-color: #8a5b0a; color: #6d4c14; }
html[data-ak-light][data-theme=light] .km-guide-status { color: #17663f; }
@media (prefers-reduced-motion: reduce) {
  .km-route, .km-route.is-entering, .km-graph-node.is-route-arrive .km-node-orbit, .km-inspector.is-route-flash { animation: none; }
  .km-route, .km-route-star, .km-route-btn { transition: none; }
  .km-route-trail { scroll-behavior: auto; }
}
body.paused .km-route, body.paused .km-graph-node.is-route-arrive .km-node-orbit { animation: none; }
/* Disabled after the role colours so it wins; keyboard focus is a real ring in both themes (not only a colour change). */
.km-route .km-route-btn[disabled] { color: #8a94a8; border-color: rgba(255, 255, 255, .12); background: transparent; box-shadow: none; filter: none; cursor: not-allowed; }
.km-route :is(.km-route-btn, .km-route-star, .km-route-close, .km-route-undo):focus-visible { outline: 2px solid #f5d98d !important; outline-offset: 3px; }
html[data-ak-light][data-theme=light] .km-route :is(.km-route-btn, .km-route-star, .km-route-close, .km-route-undo):focus-visible { outline-color: #7a4f06 !important; }
html[data-ak-light][data-theme=light] .km-route .km-route-btn[disabled] { color: #8b8270; border-color: #d8ccb0; background: transparent; }
@media (max-width: 760px) {
  .km-route-trail { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 26px), transparent); }
}

/* ── Page look to the web skill, 2026-10-17 (Audi: "พื้นหลังเป็นสีดำ … 8bit 16bit … ไกด์จะกดเขาตรงไหน") ── */
/* Hero: the 16-bit studying mascot bobs beside the title. */
.kl-library-head { align-items: center; gap: 14px 18px; }
.kl-hero-sprite { flex: none; width: 72px; height: 72px; image-rendering: pixelated; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .28)); animation: km-px-bob 1.6s steps(2) infinite; }
.knowledge-page .kl-library-head h1 { font-size: clamp(2rem, 3.4vw, 2.6rem); line-height: 1.25; }
@keyframes km-px-bob { 50% { transform: translateY(-3px); } }
/* Reading-order entry: one satin card with a pixel compass and the gold start button. */
.knowledge-page .km-search-actions { grid-template-columns: 1fr; gap: .8rem; }
.km-route-entry {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .85rem 1rem;
  padding: .85rem 1rem; border-radius: 16px; isolation: isolate;
  background: linear-gradient(155deg, #34405f, #1d2640);
  box-shadow: 0 24px 48px -30px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.km-route-entry::before { content: ""; position: absolute; inset: 0; z-index: -1; padding: 1.5px; border-radius: inherit; background: linear-gradient(135deg, #f2e1b4, #a8853f 32%, #f6e6bd 55%, #8f6d2e 80%, #e9d3a0); pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.km-px { width: 48px; height: 48px; image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .3)); animation: km-px-bob 1.3s steps(2) infinite; }
.km-route-entry-copy { display: grid; gap: .1rem; min-width: 0; }
.km-route-entry-copy b { color: #f5e3b3; font: 600 1.15rem/1.35 var(--font-head, 'Mitr', sans-serif); }
.km-route-entry-copy small { color: #dfe5f0; font: 500 .9rem/1.45 var(--font-body); }
.km-route-entry .km-guide-button { min-height: 46px; }
.km-route-entry .km-guide-button.is-active { background: rgba(8, 14, 30, .45); color: #f5e3b3; border-color: rgba(240, 207, 128, .55); }
/* Category reading order buttons (list group header + map side panel). */
.kl-group-route, .km-inspector-route { display: inline-flex; align-items: center; gap: .4rem; margin-top: .65rem; padding: .45rem .8rem; border: 1px solid color-mix(in srgb, #f0cf80 70%, transparent); border-radius: 999px; background: rgba(241, 198, 92, .1); color: #f5d98d; font: 700 .86rem/1.3 var(--font-head, 'Mitr', sans-serif); cursor: pointer; transition: background .16s, transform .16s cubic-bezier(.16, 1, .3, 1); }
.kl-group-route small, .km-inspector-route small { color: #dfe5f0; font: 500 .8rem/1.3 var(--font-body); }
.kl-group-route:hover, .km-inspector-route:hover { background: rgba(241, 198, 92, .2); transform: translateY(-1px); }
.kl-group-route:focus-visible, .km-inspector-route:focus-visible { outline: 2px solid #f5d98d; outline-offset: 3px; }
.km-inspector-route { margin: .2rem 0 .9rem; }
/* Domain switcher: no black band (it never stuck anyway); each domain is a satin chip on the sky, the one you are in has a gold outline. */
.knowledge-page .kl-domains { position: static; gap: .5rem; padding: .6rem 0; border: 0; background: transparent; }
.knowledge-page .kl-domains button { padding: .5rem .95rem; border: 1px solid rgba(214, 223, 238, .18); border-radius: 999px; background: linear-gradient(155deg, rgba(52, 64, 95, .85), rgba(29, 38, 64, .85)); color: #dfe5f0; }
.knowledge-page .kl-domains button:hover { color: #fff; border-color: rgba(240, 207, 128, .55); background: linear-gradient(155deg, #3c4a6e, #222c4a); }
.knowledge-page .kl-domains button[aria-pressed=true] { color: #f5e3b3; border: 1.5px solid #f0cf80; background: linear-gradient(155deg, #3a4668, #222b48); box-shadow: 0 0 0 3px rgba(241, 198, 92, .14); }
@media (max-width: 760px) {
  .kl-hero-sprite { width: 56px; height: 56px; }
  .knowledge-page .kl-library-head { display: flex; }
  .km-route-entry { grid-template-columns: auto minmax(0, 1fr); padding: .75rem .85rem; }
  .km-route-entry .km-guide-button { grid-column: 1 / -1; width: 100%; }
  .km-px { width: 40px; height: 40px; }
  .knowledge-page .kl-domains { display: flex; flex-wrap: wrap; }
  .knowledge-page .kl-domains button { padding: .45rem .75rem; }
}
html[data-ak-light][data-theme=light] .km-route-entry { background: linear-gradient(155deg, #fffdf8, #f4f1ea); box-shadow: 0 22px 44px -30px rgba(64, 48, 20, .45), inset 0 1px 0 #fff; }
html[data-ak-light][data-theme=light] .km-route-entry::before { background: linear-gradient(135deg, #c9a251, #7d5a1c 32%, #d9b86a 55%, #6d4c14 80%, #c49a48); }
html[data-ak-light][data-theme=light] .km-route-entry-copy b { color: #6d4c14; }
html[data-ak-light][data-theme=light] .km-route-entry-copy small { color: #4a4232; }
html[data-ak-light][data-theme=light] .km-route-entry .km-route-done { color: #17663f; }
html[data-ak-light][data-theme=light] .km-route-entry .km-guide-button.is-active { background: #fff; color: #6d4c14; border-color: #b9a77d; }
html[data-ak-light][data-theme=light] :is(.kl-group-route, .km-inspector-route) { border-color: #b08a3e; background: #fff7e3; color: #6d4c14; }
html[data-ak-light][data-theme=light] :is(.kl-group-route, .km-inspector-route) small { color: #4a4232; }
html[data-ak-light][data-theme=light] .knowledge-page .kl-domains button { border-color: #c9d3e2; background: #fff; color: #33405a; }
html[data-ak-light][data-theme=light] .knowledge-page .kl-domains button[aria-pressed=true] { border-color: #b08a3e; background: #fff7e3; color: #6d4c14; box-shadow: 0 0 0 3px rgba(176, 138, 62, .16); }
@media (prefers-reduced-motion: reduce) { .kl-hero-sprite, .km-px { animation: none; } }
html[data-motion=paused] :is(.kl-hero-sprite, .km-px), body.paused :is(.kl-hero-sprite, .km-px) { animation: none; }
/* Keep the title and the count readable at 320–390px: title never breaks, the subtitle drops below. */
.knowledge-page .kl-library-head { flex-wrap: wrap; }
.knowledge-page .kl-library-head h1 { white-space: nowrap; line-height: 1.3; }
.km-route-done, .kl-group-route small, .km-inspector-route small { white-space: nowrap; }
@media (max-width: 760px) { .knowledge-page .kl-library-head > p { flex-basis: 100%; } }
.knowledge-page .km-hero .km-search-actions { grid-template-columns: 1fr; }
.km-route-entry-copy .km-route-next { color: #c9d2e3; font-size: .84rem; }
html[data-ak-light][data-theme=light] .km-route-entry-copy .km-route-next { color: #5a5240; }

/* ── Course mode (คอร์ส), 2026-10-17 — Audi: "ควรมีแบบเป็นเหมือน course … หน้า รายการบทเรียน ควรทำดีขึ้นกว่านี้" ──
   Course cards with progress on the sky, then ONE deep-dive glass panel holding the chapters as hairline rows. */
.kl-topic-list .kl-search-results { display: none; }
.kl-topic-list.is-searching .kc, .kl-topic-list.is-guided .kc { display: none; }
.kl-topic-list.is-searching .kl-search-results, .kl-topic-list.is-guided .kl-search-results { display: block; }
/* In course view the course cards replace the category chips, and the map's step-through card lives with the map. */
.knowledge-page.kl-view-list .km-map-toolbar > .km-filters { display: none; }
.kl-view-list .km-route-entry:not(.is-active) { display: none; }
.kl-view-switch button > span { margin-right: .15rem; }

.kc { display: grid; gap: 1rem; padding: .4rem 0 2rem; }
.kc-top { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; }
.kc-top h2 { margin: 0; color: #f5f4f0; font: 600 clamp(1.5rem, 2.4vw, 1.9rem)/1.3 var(--font-head, 'Mitr', sans-serif); }
.kc-sort { margin: 0; color: #b9c3d6; font: 500 .9rem/1.45 var(--font-body); }
.kc-filters { display: flex; flex-wrap: wrap; gap: .45rem; }
.kc-filter { display: inline-flex; align-items: center; gap: .35rem; min-height: 36px; padding: .35rem .85rem; border: 1px solid rgba(214, 223, 238, .22); border-radius: 999px; background: rgba(20, 30, 54, .7); color: #dfe5f0; font: 600 .86rem/1.3 var(--font-head, 'Mitr', sans-serif); cursor: pointer; }
.kc-filter small { color: #aab4c6; font: 600 .8rem/1 var(--font-body); }
.kc-filter.is-active { border-color: #f0cf80; color: #f5e3b3; background: rgba(241, 198, 92, .12); }
.kc-filter:focus-visible { outline: 2px solid #f5d98d; outline-offset: 3px; }

.kc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .75rem; }
.kc-card { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon title" "icon meta" "bar bar" "done done"; align-items: center; gap: .3rem .7rem; padding: .9rem 1rem; text-align: left; border: 1px solid rgba(214, 223, 238, .16); border-radius: 14px; background: linear-gradient(155deg, #2f3b5a, #1c2540); color: #eef1f7; cursor: pointer; box-shadow: 0 18px 36px -28px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .1); transition: transform .18s cubic-bezier(.16, 1, .3, 1), border-color .18s, box-shadow .18s; }
.kc-card:hover { transform: translateY(-2px); border-color: rgba(240, 207, 128, .5); }
.kc-card:focus-visible { outline: 2px solid #f5d98d; outline-offset: 3px; }
.kc-card.is-selected { border: 1.5px solid #f0cf80; box-shadow: 0 0 0 3px rgba(241, 198, 92, .16), 0 18px 36px -24px rgba(0, 0, 0, .9); background: linear-gradient(155deg, #3a4668, #222b48); }
.kc-card-icon { grid-area: icon; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--course) 20%, #101830); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--course) 55%, transparent); font-size: 1.35rem; }
.kc-card-title { grid-area: title; font: 600 1.02rem/1.35 var(--font-head, 'Mitr', sans-serif); color: #fbf6ea; }
.kc-card-meta { grid-area: meta; color: #c9d2e3; font: 500 .84rem/1.4 var(--font-body); }
.kc-st { font-weight: 700; color: #aab4c6; }
.kc-card.is-doing .kc-st, .kc-st.is-doing { color: #f5d98d; }
.kc-card.is-done .kc-st, .kc-st.is-done { color: #8fe0b5; }
.kc-bar { grid-area: bar; display: block; height: 6px; margin-top: .35rem; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.kc-bar > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5fcf98, #8fe0b5); transition: width .5s cubic-bezier(.16, 1, .3, 1); }
.kc-card-done { grid-area: done; color: #a5f0c8; font: 600 .82rem/1.4 var(--font-body); white-space: nowrap; }
.kc-card.is-new .kc-card-done { color: #aab4c6; }

.kc-panel { position: relative; overflow: hidden; margin-top: .4rem; padding: 1.25rem 1.35rem 1rem; border: 1px solid rgba(255, 255, 255, .13); border-radius: 20px; background: linear-gradient(145deg, rgba(28, 39, 64, .96), rgba(10, 15, 30, .99)); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .95); }
.kc-panel::before { content: ""; position: absolute; top: -90px; right: -90px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(229, 197, 134, .16), transparent 70%); pointer-events: none; }
.kc-head { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8rem 1.1rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.kc-head-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: color-mix(in srgb, var(--course) 22%, #101830); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--course) 60%, transparent); font-size: 1.7rem; }
.kc-head-copy h3 { margin: 0; color: #f5e3b3; font: 600 1.45rem/1.3 var(--font-head, 'Mitr', sans-serif); }
.kc-head-copy p { margin: .15rem 0 .35rem; color: #dfe5f0; font: 500 .92rem/1.45 var(--font-body); }
.kc-done { color: #8fe0b5; }
.kc-head .kc-bar { max-width: 360px; }
.kc-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.kc-continue { display: inline-flex; align-items: center; gap: .45rem; min-height: 46px; padding: .6rem 1.15rem; border: 1px solid #f0cf80; border-radius: 999px; background: linear-gradient(110deg, #f1c65c, #dca844); color: #171207; font: 800 .95rem/1.2 var(--font-head, 'Mitr', sans-serif); text-decoration: none; box-shadow: 0 10px 26px -12px rgba(241, 198, 92, .75); transition: transform .16s, filter .16s; }
.kc-continue:hover { transform: translateY(-1px); filter: brightness(1.06); }
.kc-on-map { display: inline-flex; align-items: center; gap: .4rem; min-height: 46px; padding: .55rem 1rem; border: 1px solid rgba(226, 232, 242, .3); border-radius: 999px; background: rgba(8, 14, 30, .42); color: #eef1f7; font: 700 .9rem/1.2 var(--font-head, 'Mitr', sans-serif); cursor: pointer; }
.kc-on-map:hover { border-color: #f0cf80; color: #f5e3b3; }
.kc-continue:focus-visible, .kc-on-map:focus-visible { outline: 2px solid #f5d98d; outline-offset: 3px; }

.kc-chapters { margin: 0; padding: 0; list-style: none; }
.kc-ch { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .9rem; padding: .95rem .4rem; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.kc-ch:last-child { border-bottom: 0; }
.kc-ch.is-next { margin: 0 -.6rem; padding-left: 1rem; padding-right: 1rem; border-radius: 14px; background: linear-gradient(100deg, rgba(241, 198, 92, .13), rgba(241, 198, 92, .03)); box-shadow: inset 0 0 0 1px rgba(240, 207, 128, .35); border-bottom-color: transparent; }
.kc-check { display: grid; place-items: center; width: 38px; height: 38px; margin-top: .15rem; border: 1.5px dashed rgba(201, 210, 227, .5); border-radius: 50%; background: rgba(8, 14, 30, .5); color: #c9d2e3; font: 700 .9rem/1 var(--font-head, 'Outfit', sans-serif); cursor: pointer; transition: transform .16s cubic-bezier(.16, 1, .3, 1), background .16s, border-color .16s; }
.kc-check:hover { border-color: #8fe0b5; color: #a5f0c8; }
.kc-check:active { transform: scale(.94); }
.kc-check:focus-visible { outline: 2px solid #f5d98d; outline-offset: 3px; }
.kc-ch.is-read .kc-check { border: 1.5px solid #5fcf98; background: rgba(77, 210, 160, .2); color: #a5f0c8; }
.kc-ch.is-next .kc-check { border: 0; background: radial-gradient(circle at 35% 30%, #fff3c7, #f1c65c 55%, #c9962f); background-color: #f1c65c; color: #1c1405; box-shadow: 0 0 14px rgba(241, 198, 92, .5); }
.kc-ch-body { display: grid; gap: .2rem; min-width: 0; color: inherit; text-decoration: none; }
.kc-ch-body > summary { display: grid; gap: .2rem; list-style: none; cursor: pointer; }
.kc-ch-body > summary::-webkit-details-marker { display: none; }
.kc-ch-meta { color: #aab4c6; font: 500 .82rem/1.45 var(--font-body); }
.kc-ch-meta b { color: #f5d98d; }
.kc-ch-title { color: #fbf6ea; font: 600 1.08rem/1.45 var(--font-head, 'Mitr', sans-serif); }
.kc-ch.is-read .kc-ch-title { color: #dfe5f0; }
.kc-ch-sum { color: #c3ccdc; font: 400 .95rem/1.6 var(--font-body); }
.kc-ch-go { justify-self: start; margin-top: .2rem; color: #f5d98d; font: 700 .86rem/1.4 var(--font-head, 'Mitr', sans-serif); }
a.kc-ch-body:hover .kc-ch-title, .kc-ch-body > summary:hover .kc-ch-title { color: #f5e3b3; }
a.kc-ch-body:focus-visible, .kc-ch-body > summary:focus-visible { outline: 2px solid #f5d98d; outline-offset: 4px; border-radius: 8px; }
.kc-ch-body[open] .kc-ch-go { visibility: hidden; }
.kc-ch .kl-inline-preview { margin-top: .6rem; }
.kc-status { margin: .6rem 0 0; color: #dfe5f0; font: 500 .9rem/1.45 var(--font-body); }
.kc-status:empty { display: none; }

@media (max-width: 760px) {
  .kc-cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(230px, 78%); overflow-x: auto; scroll-snap-type: x mandatory; padding: .2rem .1rem .5rem; scrollbar-width: none; }
  .kc-cards::-webkit-scrollbar { display: none; }
  .kc-card { scroll-snap-align: start; }
  .kc-panel { padding: 1rem .9rem .8rem; border-radius: 16px; }
  .kc-head { grid-template-columns: auto minmax(0, 1fr); }
  .kc-head-icon { width: 46px; height: 46px; font-size: 1.4rem; }
  .kc-head-copy h3 { font-size: 1.2rem; }
  .kc-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; }
  .kc-continue, .kc-on-map { justify-content: center; }
  .kc-ch { gap: .7rem; padding: .85rem .2rem; }
  .kc-ch.is-next { margin: 0 -.4rem; padding-left: .6rem; padding-right: .6rem; }
  .kc-check { width: 34px; height: 34px; }
}

html[data-ak-light][data-theme=light] .kc-top h2 { color: #1d2b44; }
html[data-ak-light][data-theme=light] .kc-sort { color: #4b5870; }
html[data-ak-light][data-theme=light] .kc-filter { border-color: #c9d3e2; background: #fff; color: #33405a; }
html[data-ak-light][data-theme=light] .kc-filter small { color: #5a667c; }
html[data-ak-light][data-theme=light] .kc-filter.is-active { border-color: #b08a3e; background: #fff7e3; color: #6d4c14; }
html[data-ak-light][data-theme=light] .kc-card { border-color: #c9d3e2; background: #fff; color: #1d2b44; box-shadow: 0 14px 30px -24px rgba(30, 50, 90, .45); }
html[data-ak-light][data-theme=light] .kc-card.is-selected { border-color: #b08a3e; background: #fffaf0; box-shadow: 0 0 0 3px rgba(176, 138, 62, .18); }
html[data-ak-light][data-theme=light] .kc-card-icon, html[data-ak-light][data-theme=light] .kc-head-icon { background: color-mix(in srgb, var(--course) 18%, #fff); }
html[data-ak-light][data-theme=light] .kc-card-title { color: #1d2b44; }
html[data-ak-light][data-theme=light] .kc-card-meta, html[data-ak-light][data-theme=light] .kc-st { color: #4b5870; }
html[data-ak-light][data-theme=light] .kc-card.is-doing .kc-st, html[data-ak-light][data-theme=light] .kc-st.is-doing { color: #8a5b0a; }
html[data-ak-light][data-theme=light] .kc-card.is-done .kc-st, html[data-ak-light][data-theme=light] .kc-st.is-done, html[data-ak-light][data-theme=light] .kc-card-done, html[data-ak-light][data-theme=light] .kc-done { color: #17663f; }
html[data-ak-light][data-theme=light] .kc-card.is-new .kc-card-done { color: #5a667c; }
html[data-ak-light][data-theme=light] .kc-bar { background: #e3e8f0; }
html[data-ak-light][data-theme=light] .kc-panel { border-color: #c9d3e2; background: #fff; box-shadow: 0 24px 50px -36px rgba(30, 50, 90, .45); }
html[data-ak-light][data-theme=light] .kc-head { border-bottom-color: #e3e8f0; }
html[data-ak-light][data-theme=light] .kc-head-copy h3 { color: #6d4c14; }
html[data-ak-light][data-theme=light] .kc-head-copy p, html[data-ak-light][data-theme=light] .kc-status { color: #33405a; }
html[data-ak-light][data-theme=light] .kc-on-map { border-color: #b9a77d; background: #fff; color: #2b2212; }
html[data-ak-light][data-theme=light] .kc-ch { border-bottom-color: #e8ecf2; }
html[data-ak-light][data-theme=light] .kc-ch.is-next { background: #fff7e3; box-shadow: inset 0 0 0 1px #e2c98f; }
html[data-ak-light][data-theme=light] .kc-check { border-color: #a99a78; background: #fff; color: #4a4232; }
html[data-ak-light][data-theme=light] .kc-ch.is-read .kc-check { border-color: #23935a; background: #e3f6ea; color: #17663f; }
html[data-ak-light][data-theme=light] .kc-ch-meta { color: #5a667c; }
html[data-ak-light][data-theme=light] .kc-ch-meta b, html[data-ak-light][data-theme=light] .kc-ch-go { color: #8a5b0a; }
html[data-ak-light][data-theme=light] .kc-ch-title { color: #1d2b44; }
html[data-ak-light][data-theme=light] .kc-ch.is-read .kc-ch-title { color: #33405a; }
html[data-ak-light][data-theme=light] .kc-ch-sum { color: #4b5870; }
html[data-ak-light][data-theme=light] :is(.kc-filter, .kc-card, .kc-continue, .kc-on-map, .kc-check):focus-visible { outline-color: #7a4f06; }
@media (prefers-reduced-motion: reduce) { .kc-card, .kc-check, .kc-bar > i, .kc-continue { transition: none; } }
.kl-view-list .km-workspace { max-width: 1280px; }
.kc-top h2 { display: flex; align-items: center; gap: .6rem; }
.kc-px { width: 44px; height: 44px; }
@media (max-width: 760px) { .kc-px { width: 36px; height: 36px; } }
html[data-ak-light][data-theme=light] .kc-ch.is-next .kc-check { border: 0; background: radial-gradient(circle at 35% 30%, #fff3c7, #f1c65c 55%, #c9962f); background-color: #f1c65c; color: #1c1405; }
.kc-card-title { line-height: 1.45; }
/* Light theme boxes: white card, #a9b8cc border and a 4px bottom edge (skill PREFLIGHT 4) so they never blend into the pale sky. */
html[data-ak-light][data-theme=light] .kc-card, html[data-ak-light][data-theme=light] .kc-panel { border: 1px solid #a9b8cc; border-bottom-width: 4px; }
html[data-ak-light][data-theme=light] .kc-card.is-selected { border-color: #b08a3e; border-bottom-width: 4px; }
html[data-ak-light][data-theme=light] .kc-ch.is-next { box-shadow: inset 0 0 0 1.5px #c99a3a; }
html[data-ak-light][data-theme=light] .kc-ch.is-next { border: 1.5px solid #c99a3a; box-shadow: none; background: #fff3d6; }
/* Course mode review fixes: visible "อ่านจบ" pill per chapter, hint line, phone scroller fade. */
.kc-ch { grid-template-columns: auto minmax(0, 1fr) auto; }
.kc-check { cursor: default; }
.kc-check:hover { border-color: rgba(201, 210, 227, .5); color: #c9d2e3; }
.kc-ch.is-read .kc-check:hover { border-color: #5fcf98; color: #a5f0c8; }
.kc-mark { display: inline-flex; align-items: center; gap: .35rem; align-self: center; min-height: 38px; padding: .4rem .85rem; border: 1px solid rgba(226, 232, 242, .3); border-radius: 999px; background: rgba(8, 14, 30, .45); color: #eef1f7; font: 700 .86rem/1.2 var(--font-head, 'Mitr', sans-serif); white-space: nowrap; cursor: pointer; transition: border-color .16s, background .16s, transform .16s; }
.kc-mark:hover { border-color: #8fe0b5; color: #a5f0c8; }
.kc-mark:active { transform: scale(.96); }
.kc-mark.is-on { border-color: #5fcf98; background: rgba(77, 210, 160, .18); color: #a5f0c8; }
.kc-mark:focus-visible { outline: 2px solid #f5d98d; outline-offset: 3px; }
.kc-hint { margin: .8rem 0 .2rem; color: #c9d2e3; font: 500 .9rem/1.5 var(--font-body); }
@media (max-width: 760px) {
  .kc-ch { grid-template-columns: auto minmax(0, 1fr); }
  .kc-mark { grid-column: 2; justify-self: start; }
  .kc-cards { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 36px), transparent); }
}
html[data-ak-light][data-theme=light] .kc-mark { border-color: #b9a77d; background: #fff; color: #2b2212; }
html[data-ak-light][data-theme=light] .kc-mark.is-on { border-color: #23935a; background: #e3f6ea; color: #17663f; }
html[data-ak-light][data-theme=light] .kc-mark:focus-visible { outline-color: #7a4f06; }
html[data-ak-light][data-theme=light] .kc-hint { color: #4b5870; }

/* ── Diary paper boxes, 2026-10-17 (Audi: "ไม่เอา luxury blue … ลองเป็นสีกระดาษเหมือนไดอารี่ที่ทำ พวกกล่อง",
   reference journal.html .jr-leaf / .jr-spread). Every box on the learning page is a diary page on the night sky:
   cream paper, dark brown ink, stacked-page edge, gold chip for "selected". The map itself stays the dark star chart. */
.knowledge-page, .kr-done {
  --pp-paper: radial-gradient(140% 90% at 50% 0%, #fffaf0, #f6eedb 70%, #efe4cb);
  --pp-flat: #f6eedb;
  --pp-ink: #2a2118;
  --pp-ink2: #5a4a36;
  --pp-ink3: #6e5c44;
  --pp-line: rgba(42, 33, 24, .14);
  --pp-accent: #7a3a17;
  --pp-chip: linear-gradient(90deg, rgba(201, 162, 79, .3), rgba(201, 162, 79, .1));
  --pp-ring: #b08a3a;
  --pp-green: #1d6a43;
  --pp-amber: #7a5208;
  --pp-stack: 0 0 0 1px rgba(60, 40, 20, .35), 3px 4px 0 -1px #e3d8bf, 6px 7px 0 -2px #cdbf9f, 9px 10px 0 -3px #b9a984;
  --pp-soft: 0 0 0 1px rgba(60, 40, 20, .28), 3px 4px 0 -1px #e3d8bf, 6px 7px 0 -2px #cdbf9f;
}

/* Domain chips: small paper tabs; the domain you are in wears the gold chip. */
html:not([data-theme=light]) .knowledge-page .kl-domains button { border: 0; background: var(--pp-paper), var(--pp-flat); color: var(--pp-ink); box-shadow: 0 0 0 1px rgba(60, 40, 20, .3), 2px 3px 0 -1px #cdbf9f; }
html:not([data-theme=light]) .knowledge-page .kl-domains button:hover { color: var(--pp-ink); background: #fffaf0; box-shadow: 0 0 0 1.5px var(--pp-ring), 2px 3px 0 -1px #cdbf9f; }
html:not([data-theme=light]) .knowledge-page .kl-domains button[aria-pressed=true] { color: var(--pp-ink); border: 0; background: var(--pp-chip), #fff7e6; box-shadow: inset 0 0 0 1.5px var(--pp-ring), 2px 3px 0 -1px #cdbf9f; }

/* Reading-order entry card and the floating step strip. */
html:not([data-theme=light]) .km-route-entry, html:not([data-theme=light]) .km-route { background: var(--pp-paper), var(--pp-flat); color: var(--pp-ink); box-shadow: var(--pp-stack); }
html:not([data-theme=light]) .km-route-entry::before, html:not([data-theme=light]) .km-route::before { display: none; }
html:not([data-theme=light]) .km-route-entry-copy b, html:not([data-theme=light]) .km-route-head h2 { color: var(--pp-ink); }
html:not([data-theme=light]) .km-route-entry-copy small, html:not([data-theme=light]) .km-route-head h2 small, html:not([data-theme=light]) .km-route-count, html:not([data-theme=light]) .km-route-status, html:not([data-theme=light]) .km-route-soon, html:not([data-theme=light]) .km-route-entry-copy .km-route-next { color: var(--pp-ink2); }
html:not([data-theme=light]) .km-route-count b { color: var(--pp-amber); }
html:not([data-theme=light]) .km-route-entry .km-route-done, html:not([data-theme=light]) .km-route-done { color: var(--pp-green); }
html:not([data-theme=light]) .km-route-now strong { color: var(--pp-ink); }
html:not([data-theme=light]) .km-route-icon { background: #fffaf0; box-shadow: inset 0 0 0 1px var(--pp-line); }
html:not([data-theme=light]) .km-route-close { border-color: rgba(42, 33, 24, .3); background: #fffaf0; color: var(--pp-ink); }
html:not([data-theme=light]) .km-route-trail li + li::before { background: rgba(42, 33, 24, .25); }
html:not([data-theme=light]) .km-route-star { border-color: rgba(42, 33, 24, .38); background: #fffaf0; color: var(--pp-ink2); }
html:not([data-theme=light]) .km-route-star.is-read { border-color: var(--pp-green); background: #e3f1e6; color: var(--pp-green); }
html:not([data-theme=light]) .km-route-btn.is-secondary, html:not([data-theme=light]) .km-route-btn.is-open, html:not([data-theme=light]) .km-route-btn.is-mark, html:not([data-theme=light]) .km-route-entry .km-guide-button.is-active { border-color: rgba(42, 33, 24, .32); background: #fffaf0; color: var(--pp-ink); }
html:not([data-theme=light]) .km-route-btn.is-secondary:hover:not([disabled]), html:not([data-theme=light]) .km-route-btn.is-open:hover, html:not([data-theme=light]) .km-route-btn.is-mark:hover { border-color: var(--pp-ring); color: var(--pp-accent); }
html:not([data-theme=light]) .km-route-btn.is-mark.is-on { border-color: var(--pp-green); background: #e3f1e6; color: var(--pp-green); }
html:not([data-theme=light]) .km-route .km-route-btn[disabled] { color: #8c7c66; border-color: rgba(42, 33, 24, .16); background: transparent; }
html:not([data-theme=light]) .km-route-undo { border-color: var(--pp-ring); color: var(--pp-accent); }
html:not([data-theme=light]) .km-route :is(.km-route-btn, .km-route-star, .km-route-close, .km-route-undo):focus-visible { outline-color: #7a4f06 !important; }

/* Course mode: course cards are paper slips; the chapter list is one diary page. */
html:not([data-theme=light]) .kc-filter { border-color: rgba(60, 40, 20, .3); background: var(--pp-paper), var(--pp-flat); color: var(--pp-ink); }
html:not([data-theme=light]) .kc-filter small { color: var(--pp-ink2); }
html:not([data-theme=light]) .kc-filter.is-active { border-color: var(--pp-ring); background: var(--pp-chip), #fff7e6; color: var(--pp-ink); }
html:not([data-theme=light]) .kc-card { border: 0; background: var(--pp-paper), var(--pp-flat); color: var(--pp-ink); box-shadow: var(--pp-soft); }
html:not([data-theme=light]) .kc-card:hover { border: 0; box-shadow: 0 0 0 1.5px var(--pp-ring), 3px 4px 0 -1px #e3d8bf, 6px 7px 0 -2px #cdbf9f; }
html:not([data-theme=light]) .kc-card.is-selected { border: 0; background: var(--pp-chip), radial-gradient(140% 90% at 50% 0%, #fffaf0, #f6eedb 70%, #efe4cb); box-shadow: inset 0 0 0 1.5px var(--pp-ring), 3px 4px 0 -1px #e3d8bf, 6px 7px 0 -2px #cdbf9f; }
html:not([data-theme=light]) .kc-card-icon, html:not([data-theme=light]) .kc-head-icon { background: color-mix(in srgb, var(--course) 16%, #fffaf0); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--course) 45%, rgba(42, 33, 24, .3)); }
html:not([data-theme=light]) .kc-card-title { color: var(--pp-ink); }
html:not([data-theme=light]) .kc-card-meta, html:not([data-theme=light]) .kc-st { color: var(--pp-ink2); }
html:not([data-theme=light]) .kc-card.is-doing .kc-st, html:not([data-theme=light]) .kc-st.is-doing { color: var(--pp-amber); }
html:not([data-theme=light]) .kc-card.is-done .kc-st, html:not([data-theme=light]) .kc-st.is-done, html:not([data-theme=light]) .kc-card-done, html:not([data-theme=light]) .kc-done { color: var(--pp-green); }
html:not([data-theme=light]) .kc-card.is-new .kc-card-done { color: var(--pp-ink3); }
html:not([data-theme=light]) .kc-bar { background: rgba(42, 33, 24, .12); }
html:not([data-theme=light]) .kc-bar > i { background: linear-gradient(90deg, #2f8a5a, #4fae7b); }
html:not([data-theme=light]) .kc-panel { border: 0; border-radius: 6px; background: var(--pp-paper), var(--pp-flat); color: var(--pp-ink); box-shadow: var(--pp-stack), 0 40px 70px -40px rgba(0, 0, 0, .9); }
html:not([data-theme=light]) .kc-panel::before { display: none; }
html:not([data-theme=light]) .kc-head { border-bottom-color: var(--pp-line); }
html:not([data-theme=light]) .kc-head-copy h3 { color: var(--pp-ink); }
html:not([data-theme=light]) .kc-head-copy p, html:not([data-theme=light]) .kc-hint, html:not([data-theme=light]) .kc-status { color: var(--pp-ink2); }
html:not([data-theme=light]) .kc-on-map { border-color: rgba(42, 33, 24, .32); background: #fffaf0; color: var(--pp-ink); }
html:not([data-theme=light]) .kc-on-map:hover { border-color: var(--pp-ring); color: var(--pp-accent); }
html:not([data-theme=light]) .kc-ch { border-bottom-color: var(--pp-line); }
html:not([data-theme=light]) .kc-ch.is-next { background: var(--pp-chip); box-shadow: inset 0 0 0 1.5px var(--pp-ring); }
html:not([data-theme=light]) .kc-check { border-color: rgba(42, 33, 24, .38); background: #fffaf0; color: var(--pp-ink2); }
html:not([data-theme=light]) .kc-ch.is-read .kc-check { border-color: var(--pp-green); background: #e3f1e6; color: var(--pp-green); }
html:not([data-theme=light]) .kc-ch-meta { color: var(--pp-ink3); }
html:not([data-theme=light]) .kc-ch-meta b, html:not([data-theme=light]) .kc-ch-go { color: var(--pp-accent); }
html:not([data-theme=light]) .kc-ch-title, html:not([data-theme=light]) a.kc-ch-body:hover .kc-ch-title, html:not([data-theme=light]) .kc-ch-body > summary:hover .kc-ch-title { color: var(--pp-ink); }
html:not([data-theme=light]) .kc-ch.is-read .kc-ch-title { color: #4a3d2c; }
html:not([data-theme=light]) .kc-ch-sum { color: var(--pp-ink2); }
html:not([data-theme=light]) .kc-mark { border-color: rgba(42, 33, 24, .32); background: #fffaf0; color: var(--pp-ink); }
html:not([data-theme=light]) .kc-mark:hover { border-color: var(--pp-green); color: var(--pp-green); }
html:not([data-theme=light]) .kc-mark.is-on { border-color: var(--pp-green); background: #e3f1e6; color: var(--pp-green); }
html:not([data-theme=light]) .kc .km-route-undo { border-color: var(--pp-ring); color: var(--pp-accent); }
html:not([data-theme=light]) .kc-ch .kl-inline-preview { color: var(--pp-ink2); }
html:not([data-theme=light]) .kc :is(.kc-filter, .kc-card, .kc-on-map, .kc-mark):focus-visible, html:not([data-theme=light]) .kc a.kc-ch-body:focus-visible, html:not([data-theme=light]) .kc .kc-ch-body > summary:focus-visible { outline-color: #7a4f06; }

/* Map side panel: the selected topic as a diary page. */
html:not([data-theme=light]) .knowledge-page .km-inspector { border: 0; border-radius: 6px; background: var(--pp-paper), var(--pp-flat); color: var(--pp-ink); box-shadow: var(--pp-stack); scrollbar-color: rgba(122, 58, 23, .35) transparent; }
html:not([data-theme=light]) .knowledge-page .km-inspector::before { opacity: .0; }
html:not([data-theme=light]) .knowledge-page .km-inspector-category { color: var(--pp-ink); }
html:not([data-theme=light]) .knowledge-page .km-map-status { color: var(--pp-ink3); }
html:not([data-theme=light]) .knowledge-page .km-map-status.ok { color: var(--pp-green); }
html:not([data-theme=light]) .knowledge-page .km-inspector-path { color: var(--pp-ink3); }
html:not([data-theme=light]) .knowledge-page .km-inspector h2 { color: var(--pp-ink); }
html:not([data-theme=light]) .knowledge-page .km-inspector-summary { color: var(--pp-ink2); }
html:not([data-theme=light]) .knowledge-page .km-lesson-preview { border-color: var(--pp-line); background: rgba(255, 250, 240, .7); box-shadow: none; }
html:not([data-theme=light]) .knowledge-page .km-lesson-preview > p { color: var(--pp-amber); }
html:not([data-theme=light]) .knowledge-page .km-lesson-preview > div { color: var(--pp-ink); }
html:not([data-theme=light]) .knowledge-page .km-lesson-preview ul { border-top-color: var(--pp-line); }
html:not([data-theme=light]) .knowledge-page .km-lesson-preview li { color: var(--pp-ink2); }
html:not([data-theme=light]) .knowledge-page .km-lesson-preview li i { background: rgba(176, 138, 58, .18); color: var(--pp-amber); }
html:not([data-theme=light]) .knowledge-page .km-prerequisites h3 { color: var(--pp-ink); }
html:not([data-theme=light]) .knowledge-page .km-prerequisites button { border-color: var(--pp-line); background: #fffaf0; color: var(--pp-ink); }
html:not([data-theme=light]) .knowledge-page .km-prerequisites button i { color: var(--pp-ink3); }
html:not([data-theme=light]) .knowledge-page .km-prerequisites button:hover, html:not([data-theme=light]) .knowledge-page .km-prerequisites button:focus-visible { color: var(--pp-accent); }
html:not([data-theme=light]) .knowledge-page .km-no-prerequisite, html:not([data-theme=light]) .knowledge-page .km-content-status { background: rgba(255, 250, 240, .7); color: var(--pp-ink2); box-shadow: inset 0 0 0 1px var(--pp-line); }
html:not([data-theme=light]) .knowledge-page .km-no-prerequisite strong { color: var(--pp-ink); }
html:not([data-theme=light]) .knowledge-page .km-no-prerequisite small, html:not([data-theme=light]) .knowledge-page .km-content-status small { color: var(--pp-ink3); }
html:not([data-theme=light]) .knowledge-page .km-no-prerequisite > i { background: #e3f1e6; border-color: rgba(29, 106, 67, .35); color: var(--pp-green); }
html:not([data-theme=light]) .knowledge-page .km-content-status > i { background: rgba(176, 138, 58, .18); color: var(--pp-amber); }
html:not([data-theme=light]) .knowledge-page .km-level { --level-color: #8a5b0a; background: rgba(255, 250, 240, .7); border-color: var(--pp-line); }
html:not([data-theme=light]) .knowledge-page .km-level-heading > span { color: var(--pp-ink2); }
html:not([data-theme=light]) .knowledge-page .km-level p { color: var(--pp-ink3); }
html:not([data-theme=light]) .knowledge-page .km-tags small { color: var(--pp-ink3); }
html:not([data-theme=light]) .knowledge-page .km-tags span { border-color: var(--pp-line); background: #fffaf0; color: var(--pp-ink2); }
html:not([data-theme=light]) .knowledge-page .km-inspector-route { border-color: var(--pp-ring); background: var(--pp-chip), #fff7e6; color: var(--pp-accent); }
html:not([data-theme=light]) .knowledge-page .km-inspector-route small { color: var(--pp-ink2); }
html:not([data-theme=light]) .knowledge-page .kl-child-menu h3 { color: var(--pp-ink); }
html:not([data-theme=light]) .knowledge-page .kl-child-menu button { border-color: var(--pp-line); background: #fffaf0; color: var(--pp-ink); }

/* Search box and the course/map switch join the paper set. */
html:not([data-theme=light]) .knowledge-page .km-search { border: 0; background: var(--pp-paper), var(--pp-flat); box-shadow: 0 0 0 1px rgba(60, 40, 20, .3), 2px 3px 0 -1px #cdbf9f; }
html:not([data-theme=light]) .knowledge-page .km-search > span:first-child { color: var(--pp-ink2); }
html:not([data-theme=light]) .knowledge-page .km-search input { color: var(--pp-ink); }
html:not([data-theme=light]) .knowledge-page .km-search:focus-within { box-shadow: 0 0 0 2px var(--pp-ring), 2px 3px 0 -1px #cdbf9f; }
html:not([data-theme=light]) .knowledge-page .kl-view-switch { border: 0; background: var(--pp-paper), var(--pp-flat); box-shadow: 0 0 0 1px rgba(60, 40, 20, .3), 2px 3px 0 -1px #cdbf9f; }
html:not([data-theme=light]) .knowledge-page .kl-view-switch button { color: var(--pp-ink2); }
html:not([data-theme=light]) .knowledge-page .kl-view-switch button[aria-pressed=true] { color: var(--pp-ink); background: var(--pp-chip), #fff7e6; box-shadow: inset 0 0 0 1.5px var(--pp-ring); }
html:not([data-theme=light]) .knowledge-page .km-lesson-preview, html:not([data-theme=light]) .knowledge-page .km-level, html:not([data-theme=light]) .knowledge-page .km-no-prerequisite, html:not([data-theme=light]) .knowledge-page .km-content-status { border: 1px solid #b9a984; background: #fffaf0; box-shadow: none; }
html:not([data-theme=light]) .knowledge-page .km-search .ak-sr-only { color: var(--pp-ink); }

/* Topic filter chips (map view) and the video-library banner join the paper set; the map legend stays on the dark chart. */
html:not([data-theme=light]) .knowledge-page .km-filter { color: var(--pp-ink2); background: var(--pp-paper), var(--pp-flat); border-color: rgba(60, 40, 20, .25); }
html:not([data-theme=light]) .knowledge-page .km-filter.is-active, html:not([data-theme=light]) .knowledge-page .km-filter[aria-pressed=true] { color: var(--pp-ink); background: var(--pp-chip), #fff7e6; border-color: var(--pp-ring); }
html:not([data-theme=light]) .knowledge-page .km-filter:hover { color: var(--pp-accent); }
html:not([data-theme=light]) .knowledge-page .km-video-zone { border: 0; background: var(--pp-paper), var(--pp-flat); box-shadow: var(--pp-stack); }
html:not([data-theme=light]) .knowledge-page .km-video-zone:hover { border: 0; box-shadow: 0 0 0 1.5px var(--pp-ring), 3px 4px 0 -1px #e3d8bf, 6px 7px 0 -2px #cdbf9f; }
html:not([data-theme=light]) .knowledge-page .km-video-zone :is(h2, h3, strong, b) { color: var(--pp-ink); }
html:not([data-theme=light]) .knowledge-page .km-video-zone :is(p, small, span:not(.km-video-icon span)) { color: var(--pp-ink2); }
html:not([data-theme=light]) .knowledge-page .km-search input::placeholder { color: #6e5c44; }
html:not([data-theme=light]) .knowledge-page .km-video-zone > a { border: 1px solid var(--pp-ring); background: #fffaf0; color: var(--pp-ink); box-shadow: none; }
html:not([data-theme=light]) .knowledge-page .km-video-zone > a :is(span, i) { color: inherit; }
html:not([data-theme=light]) .knowledge-page .km-video-zone > a:hover, html:not([data-theme=light]) .knowledge-page .km-video-zone > a:focus-visible { background: var(--pp-chip), #fff7e6; color: var(--pp-ink); border-color: var(--pp-ring); }
html:not([data-theme=light]) .knowledge-page .km-video-zone > a:focus-visible { outline: 2px solid #7a4f06; outline-offset: 3px; }

/* 12d: emoji sit bare, no box behind them on any page (Audi 2026-10-18: "จำไว้ใช้กับทุกหน้าด้วย ไม่มีกล่องหลัง emoji") */
.kc-card-icon{background:none!important;border-color:transparent!important;box-shadow:none!important;outline:0;font-size:28px!important;line-height:1}
.kc-head-icon{background:none!important;border-color:transparent!important;box-shadow:none!important;outline:0;font-size:34px!important;line-height:1}
.km-video-icon{background:none!important;border-color:transparent!important;box-shadow:none!important;outline:0;font-size:34px!important;line-height:1}