body { font-family: system-ui, sans-serif; margin: 2rem; background: #0b0f14; color: #e8eef5; }
header { margin-bottom: 2rem; }
h1 { margin: 0; font-size: 1.75rem; }
.sub { color: #8b98a5; margin-top: 0.35rem; }
section { margin-bottom: 2.5rem; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { border: 1px solid #243041; padding: 0.45rem 0.5rem; text-align: left; }
th { background: #121922; color: #9fb0c3; }
tr:nth-child(even) { background: #101820; }
.mono { font-size: 0.75rem; word-break: break-all; }
.wp-cell { font-size: 0.8rem; line-height: 1.35; word-break: break-word; }
.wp-cell a { color: #7ec8ff; }
.hint { color: #8b98a5; font-size: 0.85rem; }
#chat-log { min-height: 120px; max-height: 320px; overflow-y: auto; background: #101820; border: 1px solid #243041; padding: 0.75rem; margin-bottom: 0.5rem; }
.msg { margin: 0.35rem 0; white-space: pre-wrap; }
.msg.user { color: #7ec8ff; }
.msg.bot { color: #c7f0c2; }
#chat-form { display: flex; gap: 0.5rem; }
#chat-input { flex: 1; padding: 0.5rem; background: #121922; border: 1px solid #243041; color: #e8eef5; }
button { padding: 0.5rem 1rem; background: #2d6cdf; color: #fff; border: none; cursor: pointer; border-radius: 4px; }
button:hover { background: #4586f0; }

.kg-section { border: 1px solid #243041; border-radius: 8px; padding: 1rem 1.25rem; background: #0e141c; }
.kg-toolbar { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; margin: 0.75rem 0; }
.kg-field { display: inline-flex; align-items: center; gap: 0.35rem; }
.kg-muted { color: #8b98a5; font-size: 0.85rem; }
.kg-hover { min-height: 1.25rem; font-size: 0.85rem; color: #b8c5d6; margin: 0.25rem 0 0.5rem; }
.kg-split { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.kg-canvases { flex: 2; min-width: 280px; }
.kg-canvas { position: relative; width: 100%; height: 500px; border: 1px solid #243041; border-radius: 6px; background: #080c11; }
/* Kapsule root injects a wrapper div — keep it filling the host so WebGL/canvas get a non-zero size */
.kg-canvas > div { width: 100%; height: 100%; min-height: 498px; }
.kg-panel { flex: 1; min-width: 240px; max-width: 420px; border: 1px solid #243041; border-radius: 6px; padding: 0.75rem 1rem; background: #101820; font-size: 0.88rem; line-height: 1.45; }
.kg-panel h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.kg-panel-body strong { color: #cfe4ff; }
.kg-excerpt { margin-top: 0.5rem; color: #c5d2e0; white-space: pre-wrap; max-height: 200px; overflow-y: auto; }
.kg-llm { margin-top: 0.75rem; padding-top: 0.5rem; border-top: 1px solid #243041; color: #d8f0dc; }
.kg-err { margin-top: 0.5rem; color: #f8a8a8; font-size: 0.85rem; }