/* ============================================================================
 * Kalnavi · shell — landing, spaces, sign-in gates, admin console
 * One family (Plus Jakarta Sans). Indigo night ground, violet + cyan voice, amber only for status.
 * The one bold element is the landing headline read as a Transformer: attention arcs between words.
 * ========================================================================== */
:root { --k-ink: #eef2ff; --k-dim: #a5b0d6; --k-faint: #6f7aa3; --k-bg: #0a0f1f; --k-panel: #111a33; --k-line: #26315a;
  --k-violet: #8b7bff; --k-cyan: #22d3ee; --k-amber: #f5b84a; --k-rose: #f472b6; }

.kx-ic { flex: none; }
.legacy-hide, #nav-l1, #nav-l2, #auth-chip, #role-ribbon, #login-root, #kg-role-chip { display: none !important; }

/* ---------------------------------------------------------- landing frame */
body[data-space="home"] .rail, body[data-space="home"] .topbar, body[data-space="home"] #kx-announce { display: none !important; }
body[data-space="home"] .app { display: block; }
body[data-space="home"] .main { max-width: none; padding: 0; margin: 0; }
#view-home { padding: 0 clamp(16px, 5vw, 72px) 40px; max-width: 1280px; margin: 0 auto; }

.kh-top { display: flex; align-items: center; gap: 24px; padding: 22px 0; }
.kh-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--k-ink); text-decoration: none; font-weight: 800; font-size: 20px; letter-spacing: -.3px; }
.kh-logo .mark { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--k-violet), #5b6cff 55%, var(--k-cyan)); }
.kh-logo .mark svg { width: 22px; height: 22px; }
.kh-links { display: flex; gap: 22px; margin-left: 12px; }
.kh-links a { color: var(--k-dim); text-decoration: none; font-weight: 600; font-size: 14.5px; }
.kh-links a:hover, .kh-links a:focus-visible { color: var(--k-ink); }
.kh-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.kh-lang { margin: 0; }

.kh-hero { position: relative; padding: clamp(48px, 9vw, 120px) 0 64px; }
.kh-hero-copy { position: relative; max-width: 980px; }
.kh-title { position: relative; z-index: 1; margin: 0; font-weight: 800; letter-spacing: -0.035em; line-height: 1.12;
  font-size: clamp(40px, 6.6vw, 88px); color: var(--k-ink); }
.kh-tok { display: inline-block; position: relative; padding: 0 .02em; border-radius: 10px; cursor: default; outline: none;
  transition: color .2s ease, background-color .2s ease;
  background: color-mix(in srgb, var(--k-cyan) calc(var(--att, 0) * 45%), transparent); }
.kh-tok.on { color: var(--k-violet); }
.kh-tok:focus-visible { box-shadow: 0 0 0 2px var(--k-violet); }
.kh-arcs { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 0; }
.kh-arcs path { fill: none; stroke: var(--k-violet); stroke-width: var(--w); opacity: var(--o); stroke-linecap: round;
  stroke-dasharray: 600; stroke-dashoffset: 600; animation: khDraw .9s cubic-bezier(.2,.7,.2,1) var(--d) forwards; }
.kh-arcs path:nth-child(3n) { stroke: var(--k-cyan); }
@keyframes khDraw { to { stroke-dashoffset: 0; } }
.kh-lede { max-width: 62ch; margin: 34px 0 0; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.65; color: var(--k-dim); }
.kh-hint { max-width: 62ch; margin: 14px 0 0; font-size: 13.5px; color: var(--k-faint); }
.kh-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.kh-cta .btn, .kh-right .btn { padding: 12px 20px; font-size: 14.5px; border-radius: 12px; text-decoration: none; }

/* three doors — deliberately unequal: different content, different weight */
.kh-doors { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 28px 0 8px; }
.kh-doors::before { content: ""; position: absolute; inset: -20px -40px; z-index: -1; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56' fill='none' stroke='%23b3a8ff' stroke-width='1.2'%3E%3Cellipse cx='28' cy='14' rx='7' ry='12'/%3E%3Cellipse cx='28' cy='42' rx='7' ry='12'/%3E%3Cellipse cx='14' cy='28' rx='12' ry='7'/%3E%3Cellipse cx='42' cy='28' rx='12' ry='7'/%3E%3Ccircle cx='28' cy='28' r='2'/%3E%3C/svg%3E");
  mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent); }
.kh-door { display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: 22px; text-decoration: none; color: var(--k-ink);
  background: var(--k-panel); border: 1px solid var(--k-line); transition: border-color .2s ease, transform .2s ease; }
.kh-door:hover, .kh-door:focus-visible { border-color: var(--tone); transform: translateY(-2px); outline: none; }
.kh-edu { --tone: var(--k-cyan); } .kh-biz { --tone: var(--k-violet); } .kh-chat { --tone: var(--k-rose); }
.kh-door-head { display: flex; align-items: center; gap: 12px; color: var(--tone); }
.kh-door h2 { margin: 0; font-size: 26px; letter-spacing: -.5px; color: var(--k-ink); }
.kh-door p { margin: 0; color: var(--k-dim); line-height: 1.55; }
.kh-door ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.kh-door li { position: relative; padding-left: 18px; line-height: 1.5; font-size: 14.5px; }
.kh-door li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 2px; background: var(--tone); }
.kh-door-go { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--tone); }
.kh-mini-chat { display: grid; gap: 8px; margin-top: 4px; }
.kh-mini-chat span { padding: 10px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; }
.kh-mini-chat span:first-child { justify-self: end; background: linear-gradient(135deg, #5b6cff, var(--k-violet)); color: #fff; border-bottom-right-radius: 4px; }
.kh-mini-chat span:last-child { background: #0b1226; border: 1px solid var(--k-line); color: var(--k-dim); border-bottom-left-radius: 4px; }

.kh-how { padding: 72px 0 24px; }
.kh-how h2, .kh-agents h2 { margin: 0 0 24px; font-size: 28px; letter-spacing: -.6px; }
.kh-how ol { margin: 0; padding: 0; list-style: none; counter-reset: k; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.kh-how li { counter-increment: k; display: grid; gap: 8px; padding-top: 18px; border-top: 2px solid var(--k-line); }
.kh-how li::before { content: counter(k); font-weight: 800; font-size: 34px; color: var(--k-violet); line-height: 1; }
.kh-how b { font-size: 17px; } .kh-how span { color: var(--k-dim); line-height: 1.55; }
.kh-agents { padding: 56px 0 16px; }
.kh-agent-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.kh-agent { display: grid; justify-items: start; gap: 6px; padding: 14px; border-radius: 16px; text-decoration: none; color: var(--k-ink);
  border: 1px solid var(--k-line); background: #0d1428; }
.kh-agent:hover, .kh-agent:focus-visible { border-color: var(--k-violet); outline: none; }
.kh-agent-av { width: 42px; height: 42px; border-radius: 12px; overflow: hidden; display: block; }
.kh-agent-av svg { width: 100%; height: 100%; }
.kh-agent small { color: var(--k-dim); font-size: 12px; line-height: 1.35; }
.kh-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 64px; padding-top: 22px;
  border-top: 1px solid var(--k-line); color: var(--k-faint); font-size: 13px; }

/* ---------------------------------------------------------- space nav */
#kx-nav .kx-space { display: flex; align-items: center; gap: 8px; margin: 0 4px 10px; padding: 10px 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--tone) 14%, transparent); border: 1px solid color-mix(in srgb, var(--tone) 40%, transparent);
  color: var(--k-ink); font-weight: 700; }
#kx-nav .kx-space .kx-ic { color: var(--tone); }
.kx-switch { margin-left: auto; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--k-line); background: transparent;
  color: var(--k-dim); font: 600 12px var(--font-body); cursor: pointer; }
.kx-switch:hover { color: var(--k-ink); border-color: var(--k-violet); }
#kx-nav button[data-kx-view] { display: flex; align-items: center; gap: 10px; width: 100%; }
#kx-nav button[data-kx-view] .kx-ic { color: var(--k-faint); }
#kx-nav button[data-kx-view].active .kx-ic, #kx-nav button[data-kx-view]:hover .kx-ic { color: var(--k-violet); }
.kx-lock { margin-left: auto; color: var(--k-faint); display: inline-flex; }

/* ---------------------------------------------------------- account chip */
.kx-account { position: relative; display: flex; align-items: center; }
.kx-me { display: flex; align-items: center; gap: 10px; padding: 5px 12px 5px 5px; border-radius: 14px; border: 1px solid var(--k-line);
  background: var(--k-panel); color: var(--k-ink); cursor: pointer; text-align: left; }
.kx-av { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 13px;
  background: linear-gradient(135deg, var(--k-violet), var(--k-cyan)); color: #0a0f1f; }
.kx-me-meta b { display: block; font-size: 13px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kx-me-meta small { color: var(--k-dim); font-size: 11.5px; }
.kx-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; min-width: 230px; padding: 6px; border-radius: 14px;
  background: #121b38; border: 1px solid var(--k-line); box-shadow: 0 20px 50px -20px rgba(0,0,0,.8); }
.kx-menu-email { padding: 8px 10px; color: var(--k-faint); font-size: 12px; border-bottom: 1px solid var(--k-line); margin-bottom: 4px; }
.kx-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px;
  background: transparent; color: var(--k-ink); font: 500 13.5px var(--font-body); cursor: pointer; text-align: left; }
.kx-menu button:hover { background: rgba(139,123,255,.14); }

/* ---------------------------------------------------------- announcements */
#kx-announce { display: grid; gap: 8px; margin: 0 0 12px; }
.kx-ann { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; font-size: 14px;
  background: rgba(34,211,238,.10); border: 1px solid rgba(34,211,238,.35); }
.kx-ann.success { background: rgba(52,211,153,.10); border-color: rgba(52,211,153,.35); }
.kx-ann.warning { background: rgba(245,184,74,.12); border-color: rgba(245,184,74,.4); }
.kx-ann button { margin-left: auto; border: 0; background: transparent; color: var(--k-dim); font-size: 20px; line-height: 1; cursor: pointer; }

/* ---------------------------------------------------------- gate */
.kx-gate { display: grid; grid-template-columns: 1.05fr 1fr; gap: 0; max-width: 1040px; margin: 24px auto; border-radius: 24px; overflow: hidden;
  border: 1px solid var(--k-line); background: var(--k-panel); }
.kx-gate-side { padding: clamp(24px, 4vw, 48px); background: radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--tone) 22%, transparent), transparent 65%), #0d1530; }
.kx-gate-badge { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: var(--tone);
  border: 1px solid color-mix(in srgb, var(--tone) 50%, transparent); background: color-mix(in srgb, var(--tone) 12%, transparent); }
.kx-gate h1 { margin: 18px 0 10px; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.6px; line-height: 1.15; }
.kx-gate-side p { margin: 0; color: var(--k-dim); line-height: 1.6; max-width: 46ch; }
.kx-gate-side ul { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.kx-gate-side li { display: flex; align-items: center; gap: 10px; } .kx-gate-side li .kx-ic { color: var(--tone); }
.kx-gate-form { display: grid; gap: 14px; align-content: start; padding: clamp(24px, 4vw, 48px); }
.kx-tabs { display: inline-flex; padding: 4px; border-radius: 12px; background: #0a1022; border: 1px solid var(--k-line); justify-self: start; }
.kx-tabs button { padding: 8px 16px; border: 0; border-radius: 9px; background: transparent; color: var(--k-dim); font: 600 13.5px var(--font-body); cursor: pointer; }
.kx-tabs button.on { background: var(--k-violet); color: #fff; }
.kx-gate-form label, .kx-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--k-dim); }
.kx-gate-form input, .kx-form input, .kx-form select, .kx-form textarea, .kx-toolbar input, .kx-toolbar select {
  padding: 11px 13px; border-radius: 11px; border: 1px solid var(--k-line); background: #0a1022; color: var(--k-ink); font: 15px var(--font-body); }
.kx-gate-form input:focus-visible, .kx-form :is(input, select, textarea):focus-visible { outline: 2px solid var(--k-violet); outline-offset: 1px; border-color: transparent; }
.kx-gate-form small { font-weight: 400; color: var(--k-faint); }
.kx-check { display: flex !important; align-items: flex-start; gap: 10px; font-weight: 500 !important; line-height: 1.45; }
.kx-check input { margin-top: 3px; }
.kx-err { margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(251,113,133,.12); border: 1px solid rgba(251,113,133,.4); color: #fecdd3; font-size: 13.5px; }
.kx-submit { padding: 12px; font-size: 15px; }
.kx-fine { margin: 0; color: var(--k-faint); font-size: 12.5px; }

/* ---------------------------------------------------------- space homes */
.kx-hero { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px; justify-content: space-between; padding: clamp(24px, 4vw, 44px);
  border-radius: 24px; border: 1px solid var(--k-line);
  background: radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--tone) 20%, transparent), transparent 60%), var(--k-panel); }
.kx-hero > div:first-child { max-width: 640px; }
.kx-hero h1 { margin: 0 0 10px; font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -1px; line-height: 1.08; }
.kx-hero p { margin: 0; color: var(--k-dim); line-height: 1.6; }
.kx-level { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.kx-level span { color: var(--k-faint); font-size: 13px; margin-right: 4px; }
.kx-level button { padding: 7px 13px; border-radius: 10px; border: 1px solid var(--k-line); background: transparent; color: var(--k-dim); font: 600 13px var(--font-body); cursor: pointer; }
.kx-level button.on { background: var(--tone); border-color: transparent; color: #0a0f1f; }
.kx-free { margin-top: 16px !important; font-size: 14px; }
.kx-link { border: 0; background: none; color: var(--tone); font: 700 14px var(--font-body); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 0; }
.kx-prog { display: grid; gap: 4px; min-width: 200px; }
.kx-prog b { font-size: 34px; letter-spacing: -1px; } .kx-prog span { color: var(--k-dim); font-size: 13px; }
.kx-prog i { display: block; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--tone) var(--p), #0a1022 var(--p)); border: 1px solid var(--k-line); }
.kx-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 18px; }
.kx-tile { position: relative; display: grid; gap: 8px; justify-items: start; padding: 20px; border-radius: 18px; text-align: left; cursor: pointer;
  border: 1px solid var(--k-line); background: #0d1428; color: var(--k-ink); }
.kx-tile .kx-ic { color: var(--k-violet); }
.kx-tile b { font-size: 16px; } .kx-tile span { color: var(--k-dim); font-size: 13.5px; line-height: 1.5; }
.kx-tile em { position: absolute; top: 16px; right: 16px; display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-size: 11.5px; color: var(--k-faint); }
.kx-tile:hover, .kx-tile:focus-visible { border-color: var(--k-violet); outline: none; }

/* ---------------------------------------------------------- admin */
body[data-space="admin"] .topbar { border-bottom-color: rgba(245,184,74,.35); }
.kx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 18px 0; }
.kx-stats div { padding: 18px; border-radius: 16px; background: var(--k-panel); border: 1px solid var(--k-line); }
.kx-stats b { display: block; font-size: 32px; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.kx-stats span { color: var(--k-dim); font-size: 13px; }
.kx-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin-bottom: 14px; align-items: start; }
.kx-card { padding: 20px; border-radius: 18px; border: 1px solid var(--k-line); background: var(--k-panel); }
.kx-card h3 { margin: 0 0 14px; font-size: 16px; }
.kx-spark { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: end; gap: 4px; height: 120px; }
.kx-spark i { display: block; height: max(4px, var(--h)); border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--k-violet), #5b6cff); }
.kx-spark-x { display: flex; justify-content: space-between; color: var(--k-faint); font-size: 12px; margin-top: 6px; }
.kx-dl { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; margin: 0; }
.kx-dl dt { color: var(--k-dim); } .kx-dl dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.kx-feed { margin: 0; padding: 0; list-style: none; display: grid; }
.kx-feed li { display: grid; grid-template-columns: 110px 190px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--k-line); font-size: 13.5px; }
.kx-feed span { color: var(--k-faint); font-variant-numeric: tabular-nums; } .kx-feed em { color: var(--k-dim); font-style: normal; }
.kx-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; } .kx-toolbar input { flex: 1; min-width: 220px; }
.kx-table-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid var(--k-line); }
.kx-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.kx-table th { text-align: left; padding: 12px 14px; color: var(--k-dim); font-weight: 600; background: #0d1530; border-bottom: 1px solid var(--k-line); white-space: nowrap; }
.kx-table td { padding: 12px 14px; border-bottom: 1px solid var(--k-line); vertical-align: middle; }
.kx-table td small { display: block; color: var(--k-faint); }
.kx-table tr.kx-blocked td { opacity: .55; }
.kx-table select { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--k-line); background: #0a1022; color: var(--k-ink); }
.kx-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.kx-actions button, .kx-list button { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--k-line); background: transparent; color: var(--k-ink); font: 600 12.5px var(--font-body); cursor: pointer; }
.kx-actions button:hover, .kx-list button:hover { border-color: var(--k-violet); }
button.danger { color: #fda4af !important; } button.danger:hover { border-color: #fb7185 !important; }
.kx-pill { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.kx-pill.education { background: rgba(34,211,238,.14); color: #a5f3fc; } .kx-pill.business { background: rgba(139,123,255,.18); color: #c4b5fd; }
.kx-form { display: grid; gap: 12px; }
.kx-opt { display: flex !important; align-items: center; gap: 10px; } .kx-opt input[name] + input, .kx-opt input:not([type=radio]) { flex: 1; }
.kx-row { display: flex; flex-wrap: wrap; gap: 10px; }
.kx-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.kx-list li { display: grid; grid-template-columns: 110px 1fr auto; gap: 4px 12px; align-items: center; padding: 12px; border-radius: 12px; background: #0d1428; border: 1px solid var(--k-line); }
.kx-list li small { grid-column: 2; color: var(--k-faint); } .kx-list li button { grid-row: 1 / span 2; grid-column: 3; }
.kx-mods { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 16px; }
.kx-mod { display: grid !important; grid-template-columns: auto 1fr; align-items: center; gap: 6px 10px; padding: 14px; border-radius: 12px; border: 1px solid var(--k-line); background: #0d1428; }
.kx-mod span { grid-column: 2; font-weight: 500; font-size: 12.5px; color: var(--k-faint); }
.kx-mods-stat { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 18px 0; }
.kx-mods-stat div { display: grid; gap: 6px; padding: 14px; border-radius: 14px; border: 1px solid var(--k-line); background: var(--k-panel); }
.kx-mods-stat i { display: block; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--k-cyan) var(--p), #0a1022 var(--p)); }
.kx-mods-stat span { color: var(--k-dim); font-size: 12.5px; }
.kx-cm { padding: 24px; border-radius: 18px; border: 1px solid var(--k-line); background: var(--k-panel); max-width: 76ch; line-height: 1.7; margin: 18px 0; }

/* academy additions */
.ac-ic { display: inline-grid; place-items: center; color: var(--c, var(--k-violet)); }
.ac-h1 { display: flex; align-items: center; gap: 12px; }
.ac-card.is-locked { opacity: .72; } .ac-card.is-locked .ac-go { color: var(--k-faint); }

.kh-price { color: inherit; opacity: .85; text-decoration: none; font-weight: 600; font-size: .92rem; white-space: nowrap; }
.kh-price:hover { opacity: 1; text-decoration: underline; }
@media (max-width: 980px) {
  .kh-doors { grid-template-columns: 1fr; }
  .kh-how ol { grid-template-columns: 1fr; }
  .kx-gate { grid-template-columns: 1fr; }
  .kx-feed li { grid-template-columns: 1fr; gap: 2px; }
}
@media (max-width: 640px) {
  .kh-links { display: none; }
  .kh-top { gap: 12px; }
  .kh-right .btn { padding: 10px 14px; }
  .kx-list li { grid-template-columns: 1fr; } .kx-list li small, .kx-list li button { grid-column: 1; grid-row: auto; justify-self: start; }
  .kx-me-meta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kh-arcs path { animation: none; stroke-dashoffset: 0; }
  .kh-door, .kh-tok { transition: none; }
}

/* notifications belong to Business (and the admin) */
body[data-space="education"] #bell, body[data-space="chat"] #bell { display: none; }

.kx-sen-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0; }
.kx-sen-head .btn { margin-left: auto; }
.kx-sen-h { padding: 3px 10px; border-radius: 999px; background: #14532d; color: #bbf7d0; }
.kx-sen-h.perlu-perhatian { background: #78350f; color: #fde68a; }
.kx-sen-h.kritis { background: #7f1d1d; color: #fecaca; }
.kx-sen-sum { padding: 10px 12px; border-radius: 12px; background: rgba(139, 123, 255, .1); border: 1px solid rgba(139, 123, 255, .35); }
.kx-sen-pre { max-height: 260px; overflow: auto; font: 12px ui-monospace, Consolas, monospace; }
.kx-sen-list, .kx-sen-fix { display: grid; gap: 8px; padding-left: 0; list-style: none; }
.kx-sen-fix { list-style: decimal; padding-left: 1.2em; }
.kx-sen-list li { display: flex; gap: 10px; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .06); }
.kx-sen-list li > i { flex: none; width: 8px; border-radius: 4px; }
.kx-sen-list li > div { display: grid; gap: 3px; }
.kx-sen-list small { opacity: .75; word-break: break-word; }
.kx-sen-list em { color: #86efac; font-style: normal; font-size: 13px; }
.kx-sen-list span { color: #c7d2fe; font-size: 13px; }

.kh-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.kg-legal-static { padding: 14px 16px 22px; text-align: center; font-size: 12.5px; color: #8e99c4; }
.kg-legal-static a { color: #a99dff; }

/* Kalnavi Code (Admin → Sentinel) ------------------------------------------------------------------------ */
.kx-code { display: grid; gap: 12px; margin: 0 0 22px; padding: 20px; border-radius: 16px; border: 1px solid #3a3a8a; background: linear-gradient(160deg, rgba(139, 123, 255, .1), rgba(34, 211, 238, .04)); }
.kx-code-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; } .kx-code-h b { font-size: 18px; }
.kx-code textarea { width: 100%; resize: vertical; min-height: 96px; padding: 12px 14px; border-radius: 12px; border: 1px solid #2a3563; background: #0a1022; color: #eef2ff; font: 14.5px/1.55 var(--font-body); }
.kx-code textarea:focus-visible { outline: 2px solid #8b7bff; border-color: transparent; }
.kx-code-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: 13.5px; color: #c8cfec; }
.kx-code-bar label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; } .kx-code-bar input { accent-color: #8b7bff; }
.kx-code-bar .btn { margin-left: auto; }
.kx-code-log { max-height: 280px; overflow: auto; margin: 0; padding: 10px 12px 10px 30px; border-radius: 12px; background: #070b18; border: 1px solid #1d2748; font-size: 13px; line-height: 1.5; }
.kx-code-log li { margin: 3px 0; color: #a5b0d6; } .kx-code-log li.th { color: #c4b5fd; font-style: italic; }
.kx-code-log li.tl b { color: #eef2ff; font-weight: 600; } .kx-code-log code { color: #67e8f9; font-size: 12px; margin: 0 6px; }
.kx-code-log li.tl span { color: #7d88b3; }
.kx-code-res { padding: 14px; border-radius: 12px; border: 1px solid #2a3563; } .kx-code-res.ok { border-color: #34d399; } .kx-code-res.bad { border-color: #f87171; }
.kx-code-res p { margin: 6px 0 0; color: #c8cfec; } .kx-code-res a { color: #7dd3fc; }
.kx-code-diff { max-height: 420px; overflow: auto; margin: 8px 0 0; padding: 12px; border-radius: 10px; background: #070b18; font: 12.5px/1.5 var(--font-mono); white-space: pre; }
.kx-code-diff .a { color: #86efac; } .kx-code-diff .d { color: #fca5a5; } .kx-code-diff .h { color: #93c5fd; }
.kx-code-jobs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kx-code-jobs li { padding: 12px 14px; border-radius: 12px; border: 1px solid #222c52; background: #0f1630; }
.kx-code-jobs li b { display: block; margin: 6px 0 2px; } .kx-code-jobs li p { margin: 0; color: #a5b0d6; font-size: 13.5px; }
.kx-code-jobs small { color: #7d88b3; }
.kx-code-b { padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #1e2a5a; color: #c8cfec; }
.kx-code-b.ok { background: rgba(52, 211, 153, .15); color: #6ee7b7; } .kx-code-b.wait { background: rgba(251, 191, 36, .15); color: #fcd34d; } .kx-code-b.off { color: #94a3b8; }
.kx-code-sev { font-size: 12px; font-weight: 700; } .kx-code-sev.critical { color: #f87171; } .kx-code-sev.high { color: #fb923c; } .kx-code-sev.medium { color: #fbbf24; } .kx-code-sev.low { color: #94a3b8; }
.kx-code-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; } .kx-code-acts a { color: #7dd3fc; margin-right: 6px; }

/* ============================================================================
 * landing v2: ask first. The attention headline stays the one bold element; everything else is quiet.
 * ========================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kh-narrow { display: none; }
.kh-lede { max-width: 46ch; margin-top: 26px; }
.kh-ask { display: flex; align-items: center; gap: 8px; max-width: 640px; margin-top: 26px; padding: 7px 7px 7px 20px; border-radius: 18px;
  background: #0f1730; border: 1px solid #2f3a6b; box-shadow: 0 18px 50px -30px rgba(139, 123, 255, .8); transition: border-color .2s ease; }
.kh-ask:focus-within { border-color: var(--k-violet); }
.kh-ask input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--k-ink); font: 500 17px/1.4 var(--font-body); padding: 10px 0; }
.kh-ask input::placeholder { color: #7d88b3; }
.kh-ask button { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 13px; cursor: pointer; color: #fff;
  background: linear-gradient(135deg, var(--k-violet), #5b6cff); }
.kh-ask button:focus-visible { outline: 2px solid var(--k-cyan); outline-offset: 2px; }
.kh-chips { display: flex; flex-wrap: wrap; gap: 8px; max-width: 760px; margin-top: 14px; }
.kh-chips button { padding: 8px 14px; border-radius: 999px; border: 1px solid #2a3563; background: transparent; color: #c8cfec; cursor: pointer;
  font: 600 13.5px var(--font-body); transition: border-color .15s ease, color .15s ease; }
.kh-chips button:hover, .kh-chips button:focus-visible { border-color: var(--k-violet); color: #fff; outline: none; }
.kh-hint { margin-top: 18px; }
.kh-door ul { gap: 8px; }
.kh-how li::before { font-size: 28px; }
body[data-space="home"] .kg-legal-static { display: none; }

@media (max-width: 720px) {
  #view-home { padding: 0 16px 28px; }
  .kh-top { gap: 10px; padding: 14px 0; }
  .kh-links { display: none; }
  .kh-logo { font-size: 18px; } .kh-logo .mark { width: 30px; height: 30px; }
  .kh-right { gap: 8px; }
  .kh-wide { display: none; } .kh-narrow { display: inline; }
  .kh-try { padding: 9px 16px !important; }
  .kh-hero { padding: 34px 0 26px; }
  .kh-title { font-size: clamp(34px, 10.5vw, 46px); line-height: 1.12; letter-spacing: -.03em; }
  .kh-lede { margin-top: 18px; font-size: 16px; }
  .kh-ask { margin-top: 20px; padding-left: 16px; border-radius: 16px; }
  .kh-ask input { font-size: 16px; }
  .kh-chips { flex-wrap: nowrap; overflow-x: auto; margin: 12px 0 0; padding: 0 0 4px; scrollbar-width: none; scroll-snap-type: x proximity; }
  .kh-chips::-webkit-scrollbar { display: none; }
  .kh-chips button { flex: none; scroll-snap-align: start; }
  .kh-hint { font-size: 12.5px; }
  /* the three spaces become a swipeable row */
  .kh-doors { display: flex; gap: 12px; overflow-x: auto; margin: 0; padding: 12px 0 6px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .kh-doors::-webkit-scrollbar { display: none; }
  .kh-door { flex: 0 0 82%; scroll-snap-align: start; padding: 20px; border-radius: 20px; gap: 10px; }
  .kh-door h2 { font-size: 22px; }
  .kh-door li { font-size: 14px; }
  .kh-mini-chat span:last-child { display: none; }
  .kh-how { display: none; }
  .kh-agents { padding: 34px 0 6px; }
  .kh-how h2, .kh-agents h2 { font-size: 21px; margin-bottom: 14px; }
  .kh-agent-row { display: flex; gap: 10px; overflow-x: auto; margin: 0; padding: 0 0 6px; scrollbar-width: none; }
  .kh-agent-row::-webkit-scrollbar { display: none; }
  .kh-agent { flex: 0 0 132px; }
  .kh-foot { flex-direction: column; gap: 6px; padding-top: 24px; font-size: 12.5px; }
}


/* landing v4 (laptop): the headline + a live mini chat with real Kalnavi answers (replaces the ask box there) */
.kh-live { display: none; }
@media (min-width: 1100px) {
  /* one column: headline → lede → the live chat, centred and roomy */
  .kh-hero { display: block; padding-top: clamp(40px, 7vw, 96px); }
  .kh-hero-copy { max-width: 1040px; margin: 0 auto; text-align: center; }
  .kh-title { font-size: clamp(54px, 5.6vw, 88px); line-height: 1.06; letter-spacing: -.035em; text-wrap: balance; max-width: 15ch; margin: 0 auto; }
  .kh-lede { margin: 26px auto 0; max-width: 46ch; text-align: center; }
  .kh-hint { margin: 12px auto 0; max-width: 60ch; text-align: center; }
  .kh-hero .kh-ask, .kh-hero .kh-chips { display: none; }
  .kh-live { display: grid; grid-template-rows: auto auto minmax(180px, 1fr) auto auto; gap: 12px; width: min(820px, 100%); height: 480px;
    margin: 40px auto 0; padding: 20px;
    border-radius: 22px; border: 1px solid #26315a; background: linear-gradient(170deg, #111a3a, #0b1127 70%);
    box-shadow: 0 40px 80px -48px rgba(91, 108, 255, .55); }
  .kh-live-bar { display: flex; align-items: center; gap: 8px; color: #e8ecfb; font-size: 14px; }
  .kh-live-bar small { margin-left: auto; color: #7d88b3; font-size: 12px; }
  .kh-live-dot { width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(135deg, #8b7bff, #5b6cff 55%, #22d3ee); }
  .kh-live-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
  .kh-live-tabs button { padding: 7px 12px; border-radius: 999px; border: 1px solid #2a3563; background: transparent; color: #c8cfec;
    font: 600 13px var(--font-body); cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
  .kh-live-tabs button:hover, .kh-live-tabs button:focus-visible { border-color: #8b7bff; color: #fff; outline: none; }
  .kh-live-tabs button.on { border-color: #8b7bff; background: rgba(139, 123, 255, .16); color: #fff; }
  .kh-live-log { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 2px; scrollbar-width: thin; scrollbar-color: #2a3563 transparent; }
  .kh-live-log p { margin: 0; max-width: 92%; padding: 10px 14px; font-size: 14.5px; line-height: 1.6; }
  .kh-live-user { align-self: flex-end; border-radius: 16px 16px 4px 16px; background: #1b2550; color: #f2f5ff; }
  .kh-live-ai { align-self: flex-start; border-radius: 16px 16px 16px 4px; background: #0a1022; border: 1px solid #1f2a55; color: #dfe5ff; }
  .kh-live-ai.typing { display: inline-flex; gap: 5px; padding: 14px; }
  .kh-live-ai.typing i { width: 7px; height: 7px; border-radius: 50%; background: #8b7bff; animation: khDot 1s infinite ease-in-out; }
  .kh-live-ai.typing i:nth-child(2) { animation-delay: .15s; } .kh-live-ai.typing i:nth-child(3) { animation-delay: .3s; }
  @keyframes khDot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
  .kh-live-form { display: flex; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 14px; border: 1px solid #2f3a6b; background: #0f1730; }
  .kh-live-form:focus-within { border-color: #8b7bff; }
  .kh-live-form input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: #eef2ff; font: 500 15px var(--font-body); }
  .kh-live-form button { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 11px; color: #fff; cursor: pointer;
    background: linear-gradient(135deg, #8b7bff, #5b6cff); }
  .kh-live-more { justify-self: start; color: #a99dff; font-size: 13.5px; font-weight: 600; text-decoration: none; }
  .kh-live-more:hover { text-decoration: underline; }
}
@media (min-width: 1100px) and (prefers-reduced-motion: reduce) { .kh-live-ai.typing i { animation: none; } }
@media (min-width: 1100px) and (prefers-reduced-motion: no-preference) {
  .kh-live { animation: khRise .7s .2s cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes khRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* the attention highlight stays a gentle glow, not a box (laptop and phone) */
.kh-tok { background: color-mix(in srgb, var(--k-cyan) calc(var(--att, 0) * 18%), transparent); padding: 0 .04em; border-radius: 12px; }
.kh-tok.on { color: #b3a8ff; }
@media (max-width: 720px) { .kh-title { text-wrap: balance; } }

/* the live chat grows with the conversation instead of starting as an empty box */
@media (min-width: 1100px) {
  .kh-hero { padding-top: clamp(28px, 5vw, 72px); }
  .kh-live { height: auto; grid-template-rows: auto; margin-top: 32px; }
  .kh-live-log { min-height: 64px; max-height: 340px; }
}