:root {
  color-scheme: light;
  --ink: #14202c;
  --muted: #687581;
  --line: #dce3e8;
  --canvas: #f5f7f8;
  --surface: #ffffff;
  --navy: #063c59;
  --blue: #1260e8;
  --orange: #ed4b20;
  --green: #118c5b;
  --amber: #a96800;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100dvh; background: var(--canvas); color: var(--ink); font-family: "Geist", ui-sans-serif, system-ui, sans-serif; letter-spacing: 0; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
button:disabled { cursor: wait; opacity: .58; }
a { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(18, 96, 232, .16); outline-offset: 2px; }
svg { display: block; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.skip-link { position: fixed; top: -4rem; left: 1rem; z-index: 20; padding: .65rem .85rem; background: white; color: var(--navy); }
.skip-link:focus { top: 1rem; }

.km-topbar { position: sticky; top: 0; z-index: 8; border-bottom: 3px solid var(--blue); background: white; }
.km-topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; width: min(100% - 3rem, 1440px); min-height: 4.75rem; margin: 0 auto; }
.km-brand { display: inline-flex; align-items: center; gap: .85rem; text-decoration: none; }
.km-brand-lockup { display: flex; align-items: center; gap: .42rem; height: 3.1rem; overflow: hidden; }
.km-brand-lockup img:first-child { width: 7rem; height: 2.6rem; object-fit: cover; }
.km-brand-lockup img:last-child { width: 2.65rem; height: 2.65rem; object-fit: contain; }
.km-brand-lockup span { color: #8a949c; font-family: "Geist Mono", monospace; font-size: .8rem; }
.km-brand strong { color: var(--navy); font-size: .82rem; font-weight: 650; }
.km-topbar-actions { display: flex; align-items: center; gap: .55rem; }
.km-role { padding: .34rem .52rem; border: 1px solid #cce7dc; background: #eaf7f1; color: #087a52; font-size: .58rem; font-weight: 700; text-transform: uppercase; }
.km-icon-button { display: inline-grid; place-items: center; width: 2.35rem; height: 2.35rem; padding: 0; border: 1px solid var(--line); border-radius: .28rem; background: white; color: var(--navy); text-decoration: none; }
.km-icon-button:hover { background: var(--canvas); }
.km-icon-button:active, .km-primary:active, .km-secondary:active { transform: translateY(1px); }
.km-icon-button svg { width: 1.05rem; height: 1.05rem; stroke-width: 1.8; }

.km-layout { display: grid; grid-template-columns: 14.5rem minmax(0, 1fr); width: min(100%, 1600px); min-height: calc(100dvh - 4.75rem); margin: 0 auto; }
.km-sidebar { position: sticky; top: 4.75rem; align-self: start; min-height: calc(100dvh - 4.75rem); padding: 1.55rem 1rem; border-right: 1px solid var(--line); background: #eef2f4; }
.km-sidebar-title { padding: 0 .7rem 1.3rem; }
.km-sidebar-title span { display: block; color: var(--muted); font-size: .61rem; font-weight: 650; text-transform: uppercase; }
.km-sidebar-title strong { display: block; margin-top: .2rem; font-size: .83rem; }
.km-sidebar nav { display: grid; gap: .28rem; }
.km-sidebar nav a { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr) auto; align-items: center; gap: .65rem; min-height: 2.7rem; padding: .55rem .7rem; border-left: 3px solid transparent; color: #53616d; font-size: .73rem; font-weight: 600; text-decoration: none; transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease; }
.km-sidebar nav a:hover { background: rgba(255,255,255,.7); color: var(--navy); }
.km-sidebar nav a.active { border-left-color: var(--orange); background: white; color: var(--navy); }
.km-sidebar nav svg { width: 1.1rem; height: 1.1rem; stroke-width: 1.7; }
.km-nav-count { min-width: 1.25rem; padding: .12rem .3rem; background: #fff0eb; color: var(--orange); font-family: "Geist Mono", monospace; font-size: .57rem; text-align: center; }
.km-sidebar-note { display: flex; align-items: flex-start; gap: .55rem; margin: 2rem .7rem 0; padding-top: 1rem; border-top: 1px solid #cfd8de; color: var(--muted); font-size: .62rem; line-height: 1.5; }
.km-sidebar-note i { flex: 0 0 auto; width: .48rem; height: .48rem; margin-top: .24rem; border-radius: 50%; background: var(--green); }

.km-main { width: 100%; padding: 2rem clamp(1.25rem, 3vw, 3.25rem) 4rem; overflow: hidden; }
.km-view { max-width: 1180px; margin: 0 auto; }
.km-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.km-page-header > div > span, .km-section-header > div > span, .km-integration-form header span, .km-skill-editor header span, .km-dialog header span { color: var(--orange); font-size: .62rem; font-weight: 700; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: .65rem; font-size: clamp(1.65rem, 3vw, 2.35rem); line-height: 1.05; font-weight: 650; }
h2 { margin-bottom: 0; font-size: 1rem; font-weight: 650; }
.km-page-header p { max-width: 60ch; margin-bottom: 0; color: var(--muted); font-size: .75rem; line-height: 1.55; }
.km-primary, .km-secondary { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 2.55rem; padding: .58rem .82rem; border-radius: .28rem; font-size: .68rem; font-weight: 700; text-decoration: none; transition: transform 140ms ease, background-color 140ms ease; }
.km-primary { border: 1px solid var(--navy); background: var(--navy); color: white; }
.km-primary:hover { background: #04324a; }
.km-secondary { border: 1px solid var(--line); background: white; color: var(--navy); }
.km-secondary:hover { background: var(--canvas); }
.km-primary svg, .km-secondary svg { width: 1rem; height: 1rem; stroke-width: 1.8; }

.km-metrics { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr; margin-bottom: 1rem; border: 1px solid var(--line); background: white; }
.km-metrics > div { min-height: 6.2rem; padding: 1.1rem 1.25rem; border-right: 1px solid var(--line); }
.km-metrics > div:last-child { border-right: 0; }
.km-metrics span { display: block; color: var(--muted); font-size: .63rem; font-weight: 600; }
.km-metrics strong { display: block; margin-top: .55rem; color: var(--navy); font-family: "Geist Mono", monospace; font-size: 1.85rem; line-height: 1; }
.km-metrics > div:nth-child(2) strong { color: var(--green); }
.km-metrics > div:nth-child(3) strong { color: var(--amber); }

.km-library, .km-integrations { border: 1px solid var(--line); background: white; }
.km-section-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; min-height: 4.5rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--line); }
.km-filters { display: flex; align-items: center; gap: .5rem; }
.km-search { display: flex; align-items: center; gap: .45rem; min-width: min(27vw, 18rem); height: 2.4rem; padding: 0 .65rem; border: 1px solid var(--line); background: var(--canvas); }
.km-search svg { width: .95rem; height: .95rem; color: var(--muted); }
.km-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: .68rem; }
.km-filters select { height: 2.4rem; padding: 0 1.9rem 0 .65rem; border: 1px solid var(--line); border-radius: 0; background: white; color: var(--ink); font-size: .65rem; }
.km-table-head, .km-document-row { display: grid; grid-template-columns: minmax(16rem, 2fr) minmax(8rem, .75fr) 6.5rem 7.5rem 2.5rem; gap: 1rem; align-items: center; }
.km-table-head { min-height: 2.75rem; padding: .5rem 1.1rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .58rem; font-weight: 700; text-transform: uppercase; }
.km-document-row { min-height: 5.3rem; padding: .72rem 1.1rem; border-bottom: 1px solid var(--line); }
.km-document-row:last-child { border-bottom: 0; }
.km-document-row:hover { background: #fafcfd; }
.km-document-main { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); align-items: center; gap: .75rem; min-width: 0; }
.km-doc-icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; background: #eef3f6; color: var(--navy); }
.km-doc-icon svg { width: 1.2rem; height: 1.2rem; stroke-width: 1.7; }
.km-document-main strong, .km-document-main span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.km-document-main strong { font-size: .75rem; }
.km-document-main span, .km-document-row > span { margin-top: .2rem; color: var(--muted); font-size: .63rem; }
.km-tag-line { display: flex; gap: .3rem; margin-top: .35rem; overflow: hidden; }
.km-tag-line i { padding: .12rem .35rem; background: #eef4f7; color: #315168; font-size: .55rem; font-style: normal; white-space: nowrap; }
.km-status { display: inline-flex; align-items: center; gap: .35rem; width: max-content; padding: .22rem .42rem; border: 1px solid var(--line); color: var(--muted); font-size: .56rem; font-weight: 700; text-transform: uppercase; }
.km-status::before { content: ""; width: .42rem; height: .42rem; border-radius: 50%; background: #89959e; }
.km-status.approved { border-color: #cce7dc; background: #edf8f3; color: #087a52; }
.km-status.approved::before { background: var(--green); }
.km-status.review { border-color: #ead6b7; background: #fff8e9; color: #8a5700; }
.km-status.review::before { background: #c78108; }
.km-status.draft { background: #f2f4f5; color: #5e6a73; }
.km-row-action { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border: 1px solid var(--line); background: white; color: var(--navy); }
.km-row-action svg { width: .9rem; height: .9rem; }
.km-empty { display: grid; place-items: center; min-height: 14rem; padding: 2rem; text-align: center; }
.km-empty svg { width: 2rem; height: 2rem; margin-bottom: .8rem; color: #9aa5ad; }
.km-empty strong { font-size: .78rem; }
.km-empty span { display: block; max-width: 42ch; margin-top: .35rem; color: var(--muted); font-size: .66rem; line-height: 1.5; }

.km-form { display: grid; gap: 1rem; }
.km-form-band { padding: 1.25rem 1.5rem 1.5rem; border: 1px solid var(--line); background: white; }
.km-form-band > header { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: .7rem; margin-bottom: 1.35rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.km-form-band > header > span { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; background: var(--navy); color: white; font-family: "Geist Mono", monospace; font-size: .62rem; }
.km-form-band header h2 { margin-top: .1rem; }
.km-form-band header p { margin: .25rem 0 0; color: var(--muted); font-size: .65rem; }
.km-form-grid { display: grid; gap: 1rem; }
.km-form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.km-form-grid.three { grid-template-columns: 1.5fr .75fr .55fr; }
.km-form label, .km-skill-editor label, .km-integration-form label { display: grid; gap: .4rem; margin-top: 1rem; color: #52616d; font-size: .64rem; font-weight: 650; }
.km-form-grid label { margin-top: 0; }
.km-form input, .km-form select, .km-form textarea, .km-skill-editor input, .km-skill-editor select, .km-skill-editor textarea, .km-integration-form input, .km-integration-form select { width: 100%; min-width: 0; border: 1px solid #cfd8de; border-radius: .25rem; background: white; color: var(--ink); font-size: .72rem; }
.km-form input, .km-form select, .km-skill-editor input, .km-skill-editor select, .km-integration-form input, .km-integration-form select { height: 2.65rem; padding: 0 .72rem; }
.km-form textarea, .km-skill-editor textarea { padding: .7rem; resize: vertical; line-height: 1.5; }
.mono { font-family: "Geist Mono", monospace !important; font-size: .64rem !important; }
.km-file-drop { place-items: center; min-height: 9.5rem; margin: 0 0 1rem !important; padding: 1.25rem; border: 1px dashed #afbdc6; background: #f8fafb; text-align: center; cursor: pointer; }
.km-file-drop:hover { border-color: var(--blue); background: #f4f8ff; }
.km-file-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.km-file-drop svg { width: 1.7rem; height: 1.7rem; color: var(--navy); }
.km-file-drop strong { margin-top: .4rem; color: var(--navy); font-size: .73rem; }
.km-file-drop span { color: var(--muted); font-size: .62rem; font-weight: 400; }
.km-form-actions { display: flex; justify-content: flex-end; gap: .6rem; }
.km-message { margin: 0; padding: .7rem .8rem; border-left: 3px solid #c6382b; background: #fff2f0; color: #9a2d23; font-size: .66rem; }
.km-message[data-type="success"] { border-color: var(--green); background: #edf8f3; color: #087a52; }

.km-review-list { display: grid; border-top: 1px solid var(--line); }
.km-review-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center; min-height: 7rem; padding: 1rem 1.25rem; border: 1px solid var(--line); border-top: 0; background: white; }
.km-review-item span { color: var(--orange); font-size: .58rem; font-weight: 700; text-transform: uppercase; }
.km-review-item strong { display: block; margin-top: .35rem; font-size: .82rem; }
.km-review-item p { margin: .35rem 0 0; color: var(--muted); font-size: .66rem; line-height: 1.5; }
.km-review-actions { display: flex; gap: .45rem; }

.km-skill-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(22rem, .82fr); gap: 1rem; align-items: start; }
.km-skill-list { display: grid; border: 1px solid var(--line); background: white; }
.km-skill-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; min-height: 6.3rem; padding: 1rem 1.15rem; border-bottom: 1px solid var(--line); }
.km-skill-item:last-child { border-bottom: 0; }
.km-skill-item > div > span { color: var(--orange); font-family: "Geist Mono", monospace; font-size: .57rem; }
.km-skill-item strong { display: block; margin-top: .35rem; font-size: .78rem; }
.km-skill-item p { margin: .35rem 0 0; color: var(--muted); font-size: .66rem; line-height: 1.5; }
.km-skill-editor { display: grid; gap: .9rem; padding: 1.25rem; border: 1px solid var(--line); background: white; }
.km-skill-editor > header { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.km-skill-editor label { margin: 0; }

.km-endpoint, .km-token-reveal { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding: 1.1rem 1.25rem; border: 1px solid var(--line); background: white; }
.km-endpoint span, .km-token-reveal span { display: block; margin-bottom: .38rem; color: var(--muted); font-size: .61rem; font-weight: 650; }
.km-endpoint code, .km-token-reveal code { display: block; max-width: 68vw; overflow: hidden; color: var(--navy); font-family: "Geist Mono", monospace; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.km-integration-form { margin-bottom: 1rem; padding: 1.25rem; border: 1px solid var(--line); background: white; }
.km-integration-form header { margin-bottom: 1rem; }
.km-integration-form > .km-primary { margin-top: 1rem; }
.km-token-reveal { border-color: #bcd8ca; background: #eef8f3; }
.km-integration-row { display: grid; grid-template-columns: minmax(0, 1fr) 7rem 9rem auto; gap: 1rem; align-items: center; min-height: 4.5rem; padding: .75rem 1.1rem; border-bottom: 1px solid var(--line); }
.km-integration-row:last-child { border-bottom: 0; }
.km-integration-row strong, .km-integration-row span { display: block; }
.km-integration-row strong { font-size: .72rem; }
.km-integration-row span { margin-top: .2rem; color: var(--muted); font-size: .61rem; }
.km-danger { min-height: 2.1rem; padding: .4rem .58rem; border: 1px solid #e2c3bf; background: white; color: #a03629; font-size: .62rem; font-weight: 650; }

.km-dialog { width: min(46rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 1px solid var(--line); border-top: 4px solid var(--blue); border-radius: .35rem; background: white; box-shadow: 0 24px 70px rgba(20, 32, 44, .24); }
.km-dialog::backdrop { background: rgba(6, 38, 56, .45); }
.km-dialog > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.25rem; border-bottom: 1px solid var(--line); }
.km-dialog > div { padding: 1.25rem; }
.km-detail-meta { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 1.2rem; border: 1px solid var(--line); }
.km-detail-meta > div { padding: .75rem; border-right: 1px solid var(--line); }
.km-detail-meta > div:last-child { border-right: 0; }
.km-detail-meta span { display: block; color: var(--muted); font-size: .58rem; }
.km-detail-meta strong { display: block; margin-top: .3rem; font-size: .68rem; }
.km-detail-description { color: #4c5d69; font-size: .72rem; line-height: 1.6; white-space: pre-wrap; }
.km-content-preview { max-height: 18rem; margin-top: 1rem; padding: 1rem; overflow: auto; border-left: 3px solid var(--orange); background: #f6f8f9; color: #344957; font-size: .68rem; line-height: 1.65; white-space: pre-wrap; }
.km-detail-actions { display: flex; gap: .55rem; margin-top: 1rem; }

.km-loading { position: fixed; inset: 0; z-index: 12; display: grid; place-content: center; justify-items: center; gap: .8rem; background: white; color: var(--navy); }
.km-loading span { width: 8rem; height: .45rem; overflow: hidden; background: #e7ecef; }
.km-loading span::after { content: ""; display: block; width: 45%; height: 100%; background: var(--orange); animation: loading 1s ease-in-out infinite alternate; }
.km-loading strong { font-size: .68rem; }
@keyframes loading { from { transform: translateX(-15%); } to { transform: translateX(140%); } }

@media (max-width: 900px) {
  .km-layout { grid-template-columns: 1fr; }
  .km-sidebar { position: static; min-height: 0; padding: .6rem .75rem; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .km-sidebar-title, .km-sidebar-note { display: none; }
  .km-sidebar nav { display: flex; width: max-content; }
  .km-sidebar nav a { grid-template-columns: 1.1rem auto auto; min-width: max-content; border-left: 0; border-bottom: 3px solid transparent; }
  .km-sidebar nav a.active { border-bottom-color: var(--orange); }
  .km-main { padding-top: 1.35rem; }
  .km-table-head, .km-document-row { grid-template-columns: minmax(14rem, 1.7fr) minmax(7rem, .6fr) 6.5rem 2.5rem; }
  .km-table-head span:nth-child(4), .km-document-row > span:nth-child(4) { display: none; }
  .km-skill-layout { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
  .km-topbar-inner { width: calc(100% - 1rem); min-height: 4rem; }
  .km-brand-lockup img:first-child { width: 5.2rem; height: 2rem; }
  .km-brand-lockup img:last-child { width: 2rem; height: 2rem; }
  .km-brand strong, .km-role { display: none; }
  .km-main { padding: 1.1rem .65rem 3rem; }
  .km-page-header { align-items: flex-start; margin-bottom: 1.3rem; }
  .km-page-header p { font-size: .7rem; }
  .km-page-header > .km-primary { width: 2.55rem; min-width: 2.55rem; padding: 0; }
  .km-page-header > .km-primary:not(button) { font-size: 0; }
  .km-page-header > .km-primary svg { margin: auto; }
  .km-metrics { grid-template-columns: repeat(2, 1fr); }
  .km-metrics > div { min-height: 5.2rem; }
  .km-metrics > div:nth-child(2) { border-right: 0; }
  .km-metrics > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .km-section-header { align-items: flex-start; flex-direction: column; }
  .km-filters { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .km-search { grid-column: 1 / -1; min-width: 0; }
  .km-table-head { display: none; }
  .km-document-row { grid-template-columns: minmax(0, 1fr) auto; gap: .7rem; min-height: 6.2rem; padding: .85rem; }
  .km-document-row > span:nth-child(2), .km-document-row > span:nth-child(4) { display: none; }
  .km-document-row .km-status { grid-column: 1; margin-left: 3.35rem; }
  .km-document-row .km-row-action { grid-column: 2; grid-row: 1; }
  .km-form-band { padding: 1rem; }
  .km-form-grid.two, .km-form-grid.three { grid-template-columns: 1fr; }
  .km-review-item { grid-template-columns: 1fr; gap: .8rem; }
  .km-review-actions { justify-content: flex-end; }
  .km-endpoint, .km-token-reveal { align-items: flex-start; flex-direction: column; }
  .km-endpoint code, .km-token-reveal code { max-width: 82vw; }
  .km-integration-row { grid-template-columns: minmax(0, 1fr) auto; }
  .km-integration-row > span:nth-child(2), .km-integration-row > span:nth-child(3) { display: none; }
  .km-detail-meta { grid-template-columns: 1fr; }
  .km-detail-meta > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .km-detail-meta > div:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}