/* Kalnavi Code (web). (c) 2026 Muhammad Abrar Rayhan. */
#view-kcode { min-height: 100vh; background: #070b19; color: #e8ecfb; }
.kd { max-width: 1040px; margin: 0 auto; padding: 22px 20px 40px; display: grid; gap: 16px; }
.kd-top h1 { margin: 6px 0 4px; font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -.02em; }
.kd-top p { margin: 0; color: #a5b0d6; max-width: 70ch; }
.kd-back { color: #a99dff; font-weight: 600; font-size: 14px; text-decoration: none; }
.kd-back:hover { text-decoration: underline; }
.kd-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.kd-tabs button { padding: 8px 14px; border-radius: 10px; border: 1px solid #26315a; background: transparent; color: #c8cfec; font: 600 14px inherit; font-family: inherit; cursor: pointer; }
.kd-tabs button.on { border-color: #8b7bff; background: rgba(139, 123, 255, .16); color: #fff; }
.kd-body { display: grid; gap: 12px; }
.kd-body[hidden] { display: none; }
.kd-body h2 { margin: 6px 0 0; font-size: 19px; }
.kd-body p { margin: 0; color: #c8cfec; }
.kd-proj { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
#kd-name { color: #a5b0d6; font-family: ui-monospace, Consolas, monospace; font-size: 13.5px; }
.kd-auto { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: #a5b0d6; font-size: 13.5px; }
.kd-log { display: grid; gap: 8px; min-height: 160px; max-height: 58vh; overflow-y: auto; padding: 14px; border: 1px solid #1f2a55; border-radius: 16px; background: #0a1022; }
.kd-log:empty::before { content: "Buka folder proyek, lalu tulis tugasnya. Langkah, diff, dan hasil tes muncul di sini."; color: #6f7aa3; font-size: 14px; }
.kd-item { font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.kd-user { justify-self: end; max-width: 85%; padding: 8px 12px; border-radius: 12px 12px 4px 12px; background: #1b2550; }
.kd-say { color: #dfe5ff; }
.kd-step { color: #8e99c4; font-size: 13px; font-family: ui-monospace, Consolas, monospace; }
.kd-tool { color: #a99dff; }
.kd-note { color: #a99dff; font-size: 13.5px; }
.kd-err { color: #f07a72; font-size: 13.5px; }
.kd-ask-q { color: #f5b84a; }
.kd-done { padding: 10px 12px; border-radius: 12px; background: linear-gradient(90deg, rgba(139, 123, 255, .22), rgba(34, 211, 238, .12)); }
.kd-done p { margin: 4px 0 0; color: #dfe5ff; }
.kd-file { font: 600 13px ui-monospace, Consolas, monospace; color: #c8cfec; margin-bottom: 4px; }
.kd-diff, .kd-out, .kd-cmdbox { margin: 0; padding: 10px 12px; border-radius: 10px; background: #050816; font: 12.5px/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; overflow-x: auto; max-height: 320px; overflow-y: auto; }
.kd-diff .kd-add { color: #3fd8ad; } .kd-diff .kd-del { color: #f07a72; } .kd-diff .kd-ctx { color: #6f7aa3; }
.kd-cmd { font: 600 13px ui-monospace, Consolas, monospace; color: #f5b84a; }
.kd-out { color: #c8cfec; }
.kd-ask { display: flex; gap: 8px; margin-top: 8px; }
.kd-ask small { color: #8e99c4; }
.kd-form { display: grid; gap: 8px; }
.kd-form textarea { width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid #2f3a6b; background: #0f1730; color: #eef2ff; font: 15px/1.5 inherit; font-family: inherit; resize: vertical; }
.kd-form textarea:focus-visible { outline: 2px solid #8b7bff; border-color: transparent; }
.kd-actions { display: flex; justify-content: flex-end; gap: 8px; }
.kd-fine, .kd-warn { font-size: 13px; color: #8e99c4 !important; }
.kd-warn { color: #f5b84a !important; }
.kd-feat { margin: 0; padding-left: 1.2em; color: #c8cfec; line-height: 1.8; }
.kd-feat b { color: #fff; }
@media (max-width: 640px) { .kd-auto { margin-left: 0; } .kd-log { max-height: 50vh; } }

/* the site's own header/section styles must not reach this page */
#view-kcode header.kd-top { display: block; position: static; height: auto; padding: 0; background: none; border: 0; box-shadow: none; }
#view-kcode section.kd-body { background: none; border: 0; box-shadow: none; padding: 0; margin: 0; border-radius: 0; color: inherit; }
#view-kcode .kd-tabs button { width: auto; }

.kd-planbox { padding: 10px 12px; border: 1px solid #26315a; border-radius: 12px; }
.kd-plan { margin: 6px 0 0; padding-left: 1.4em; color: #8e99c4; }
.kd-plan li.ok { color: #6f7aa3; text-decoration: line-through; }
.kd-plan li.now { color: #fff; font-weight: 600; }