/* Site-wide navigation (assets/site-nav.js): top bar, mobile tab bar, side menu, breadcrumbs, lesson end. */
.kcs-top{position:sticky;top:0;z-index:50;background:rgba(6,8,24,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--kc-line,#2b2d6e);box-shadow:0 8px 24px #0006}
.kcs-top-in{max-width:1340px;margin:0 auto;display:flex;align-items:center;gap:28px;padding:8px 20px}
.kcs-logo{display:flex;align-items:center;flex:none}
.kcs-logo img{height:44px;width:auto;display:block}
.kcs-nav{display:flex;gap:4px;flex-wrap:wrap}
.kcs-nav a{padding:8px 14px;border-radius:10px;color:#a9add6;text-decoration:none;font-weight:500;font-size:1rem;line-height:1.4;transition:background .15s,color .15s}
.kcs-nav a:hover{color:#eef0ff;background:#13163d}
.kcs-nav a[aria-current="page"]{color:#fff;background:#241d5c;box-shadow:inset 0 -2px 0 var(--kc-violet,#a78bfa)}
.kcs-tabs{display:none}

/* Breadcrumbs (course lessons, lab; day1/exams render their own .crumbs) */
.kcs-crumbs{font-size:.92rem;color:#a9add6;margin:0 0 14px}
.kcs-crumbs a{color:#c4b5fd;text-decoration:none}
.kcs-crumbs a:hover{text-decoration:underline}

/* Layout with a side menu */
.kcs-shell{max-width:1340px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:280px minmax(0,1fr);gap:26px;align-items:start}
.kcs-shell>main.wrap{max-width:none;margin:28px 0;padding:0;min-width:0}
.kcs-side{--c:#a78bfa;position:sticky;top:76px;margin-top:28px;max-height:calc(100vh - 100px);display:flex;flex-direction:column;background:#0d0f2e;border:1px solid #2b2d6e;border-radius:18px;overflow:hidden}
.kcs-side-toggle{display:none}
.kcs-side-body{overflow:auto;overscroll-behavior:contain}
.kcs-side-head{padding:16px 16px 12px;border-bottom:1px solid #2b2d6e;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 22%,#0d0f2e),#0d0f2e);position:sticky;top:0;z-index:1}
.kcs-side-head a,.kcs-side-head span{display:block;color:#eef0ff;text-decoration:none}
.kcs-side-head b{display:block;font-size:1.02rem;line-height:1.35}
.kcs-side-head small{color:#a9add6;font-size:.82rem}
.kcs-side-head a:hover b{color:#c4b5fd}
.kcs-bar{height:5px;border-radius:5px;background:#22255a;margin-top:10px;overflow:hidden}
.kcs-bar i{display:block;height:100%;background:var(--c);border-radius:5px}
.kcs-side ol{list-style:none;margin:0;padding:8px}
.kcs-side li a{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:11px;color:#d4d6f2;text-decoration:none;font-size:.93rem;line-height:1.4}
.kcs-side li a:hover{background:#171a47;color:#fff}
.kcs-side li a[aria-current="page"]{background:color-mix(in srgb,var(--c) 22%,#13163d);color:#fff;box-shadow:inset -3px 0 0 var(--c)}
.kcs-mark{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:.75rem;font-weight:700;background:#1c1f4f;color:#a9add6;margin-top:1px}
.kcs-side li a.done .kcs-mark{background:#1d7a4a;color:#fff}
.kcs-side li a[aria-current="page"] .kcs-mark{background:var(--c);color:#04101f}
.kcs-side-text{display:flex;flex-direction:column;min-width:0}
.kcs-side-text small{color:#8b8fbf;font-size:.76rem}
.kcs-side-group{padding:10px 10px 4px;color:#8b8fbf;font-size:.78rem;font-weight:700;letter-spacing:.02em}

/* End of a course lesson: done button and prev/next */
.kcs-lesson-end{margin-top:28px;padding-top:22px;border-top:1px solid #2b2d6e;display:grid;gap:14px}
.kcs-done-btn{justify-self:start;font:inherit;font-weight:700;cursor:pointer;border-radius:12px;padding:11px 22px;border:1.5px solid #3ddc84;background:transparent;color:#5ff5b0}
.kcs-done-btn:hover{background:#0f2e22}
.kcs-done-btn.on{background:#1d7a4a;border-color:#1d7a4a;color:#fff}
.kcs-ghost{justify-self:start;color:#c4b5fd;text-decoration:none;font-size:.95rem}
.kcs-ghost:hover{text-decoration:underline}
.kcs-prevnext{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kcs-prevnext a{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:14px;background:#141640;border:1px solid #4c3fa0;color:#eef0ff;text-decoration:none}
.kcs-prevnext a:hover{border-color:#a78bfa}
.kcs-prevnext a.next{text-align:left}
.kcs-prevnext small{color:#c4b5fd;font-size:.82rem}
.kcs-prevnext span{font-weight:600;line-height:1.4}

@media (max-width:999px){
  .kcs-shell{grid-template-columns:1fr;gap:0;padding:0 12px}
  .kcs-shell>main.wrap{margin:14px 0 16px}
  .kcs-side{position:sticky;top:58px;z-index:20;margin-top:12px;max-height:none;border-radius:14px;box-shadow:0 10px 24px #0007}
  .kcs-side-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;font:inherit;color:#eef0ff;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 22%,#0d0f2e),#0d0f2e);border:0;padding:10px 14px;cursor:pointer;text-align:right}
  .kcs-side-toggle b{display:block;font-size:.95rem;line-height:1.3}
  .kcs-side-toggle small{color:#a9add6;font-size:.78rem}
  .kcs-chev{transition:transform .2s}
  .kcs-side.open .kcs-chev{transform:rotate(180deg)}
  .kcs-side-body{display:none;max-height:60vh;border-top:1px solid #2b2d6e}
  .kcs-side.open .kcs-side-body{display:block}
  .kcs-side-head{display:none}
}
@media (max-width:760px){
  .kcs-nav{display:none}
  .kcs-top-in{justify-content:center;padding:6px 12px}
  .kcs-logo img{height:36px}
  body.kcs{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .kcs-tabs{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:60;background:rgba(6,8,24,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid #2b2d6e;padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .kcs-tabs a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 2px;color:#9396c4;text-decoration:none;font-size:.7rem;line-height:1.2;border-radius:10px}
  .kcs-tabs svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .kcs-tabs a[aria-current="page"]{color:#c4b5fd}
  .kcs-side{top:52px}
  .kcs-prevnext{grid-template-columns:1fr}
  .kcs-prevnext a.next{text-align:right}
}

/* Search button and dialog */
.kcs-top-in{position:relative}
.kcs-search-btn{margin-inline-start:auto;display:flex;align-items:center;gap:8px;min-width:250px;font:inherit;font-size:.9rem;color:#8b8fbf;background:#171a47;border:1px solid #34367a;border-radius:12px;padding:7px 12px;cursor:pointer;text-align:right}
.kcs-search-btn:hover{border-color:#a78bfa;color:#d4d6f2}
.kcs-search-btn svg,.kcs-search-bar svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.kcs-search-btn kbd{margin-inline-start:auto;font:inherit;font-size:.72rem;border:1px solid #3d3f88;border-radius:6px;padding:0 6px;line-height:1.5}
.kcs-search{position:fixed;inset:0;z-index:100;background:rgba(2,6,14,.72);backdrop-filter:blur(3px);display:flex;justify-content:center;align-items:flex-start;padding:9vh 16px 16px}
.kcs-search[hidden]{display:none}
body.kcs-search-open{overflow:hidden}
.kcs-search-panel{width:100%;max-width:660px;max-height:78vh;display:flex;flex-direction:column;background:#0d0f2e;border:1px solid #34367a;border-radius:18px;box-shadow:0 30px 80px #000c;overflow:hidden}
.kcs-search-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid #2b2d6e;color:#8b8fbf}
.kcs-search-bar input{flex:1;min-width:0;font:inherit;font-size:1.08rem;color:#eef0ff!important;background:transparent!important;border:0!important;outline:0!important;box-shadow:none!important;padding:4px 0}
.kcs-search-bar input::-webkit-search-cancel-button{display:none}
.kcs-search-close{font:inherit;font-size:.75rem;color:#a9add6;background:#171a47;border:1px solid #3d3f88;border-radius:6px;padding:1px 8px;cursor:pointer}
.kcs-results{list-style:none;margin:0;padding:8px;overflow:auto;overscroll-behavior:contain}
.kcs-results a{display:flex;gap:12px;align-items:center;padding:9px 12px;border-radius:12px;color:#d4d6f2;text-decoration:none}
.kcs-results [aria-selected="true"] a,.kcs-results a:hover{background:#241d5c;color:#fff}
.kcs-kind{flex:none;min-width:72px;text-align:center;font-size:.72rem;font-weight:700;color:#c4b5fd;background:#171a47;border:1px solid #34367a;border-radius:20px;padding:1px 8px}
.kcs-rt{display:flex;flex-direction:column;min-width:0;line-height:1.4}
.kcs-rt b{font-weight:600}
.kcs-rt small{color:#8b8fbf;font-size:.8rem}
.kcs-results mark{background:#a78bfa33;color:inherit;border-radius:3px}
.kcs-empty{padding:16px 12px;color:#a9add6;font-size:.92rem}
.kcs-hint{padding:4px 12px 8px;font-size:.82rem}

/* Reading progress */
.kcs-read{position:absolute;bottom:-1px;inset-inline:0;height:3px;background:transparent}
.kcs-read i{display:block;height:100%;width:0;background:linear-gradient(90deg,#5ff5b0,#22d3ee,#a78bfa,#e879f9);border-radius:0 3px 3px 0}

/* Chapters of the current lesson in the side menu */
.kcs-side .kcs-toc{list-style:none;margin:2px 0 6px;padding:0 44px 0 0}
.kcs-side .kcs-toc a{display:block;padding:4px 10px;margin:1px 0;border-radius:8px 0 0 8px;color:#a9add6;font-size:.84rem;line-height:1.35;text-decoration:none;border-inline-start:2px solid #2b2d6e}
.kcs-side .kcs-toc a:hover{color:#fff;background:#171a47}
.kcs-side .kcs-toc a.on{color:#fff;border-inline-start-color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}
.chapter{scroll-margin-top:80px}

/* Lesson / coding tabs */
.kcs-lesson-tabs{display:flex;gap:6px;margin:6px 0 18px;padding:5px;background:#090b24;border:1px solid #2b2d6e;border-radius:14px;width:max-content;max-width:100%;scroll-margin-top:80px}
.kcs-lesson-tabs button{font:inherit;font-size:.95rem;font-weight:600;color:#a9add6;background:transparent;border:0;border-radius:10px;padding:8px 18px;cursor:pointer}
.kcs-lesson-tabs button:hover{color:#fff}
.kcs-lesson-tabs button[aria-selected="true"]{background:#241d5c;color:#fff;box-shadow:inset 0 -2px 0 #a78bfa}
.kcs-hide{display:none!important}

@media (max-width:999px){
  .kcs-search-btn{min-width:0}
  .kcs-search-btn span,.kcs-search-btn kbd{display:none}
}
@media (max-width:760px){
  .kcs-search-btn{position:absolute;left:12px;top:50%;transform:translateY(-50%);padding:8px}
  .kcs-search{padding:0}
  .kcs-search-panel{max-width:none;max-height:100%;height:100%;border-radius:0;border:0}
  .kcs-kind{min-width:0}
  .kcs-lesson-tabs{width:100%}
  .chapter,.kcs-lesson-tabs{scroll-margin-top:130px}
  .kcs-lesson-tabs button{flex:1;padding:8px 6px}
}

/* Install as an app (assets/pwa.js) */
.kcs-install-btn{flex:none;display:flex;align-items:center;gap:6px;font:inherit;font-size:.88rem;font-weight:600;color:#d4d6f2;background:transparent;border:1px solid #34367a;border-radius:12px;padding:7px 12px;cursor:pointer}
.kcs-install-btn:hover{border-color:#a78bfa;color:#fff}
.kcs-install-btn svg,.kcs-install-how svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kcs-install-how svg{display:inline-block;width:16px;height:16px;vertical-align:-3px}
.kcs-install-how{position:fixed;inset:0;z-index:110;background:rgba(2,6,14,.72);display:flex;align-items:flex-end;justify-content:center;padding:16px}
.kcs-install-how>div{max-width:420px;width:100%;background:#13163d;border:1px solid #2b2d6e;border-radius:18px;padding:18px 20px;color:#d4d6f2;margin-bottom:70px}
.kcs-install-how b{color:#eef0ff;font-size:1.05rem}
.kcs-install-how ol{margin:10px 0 14px;padding-inline-start:20px}
.kcs-install-how button{font:inherit;font-weight:700;background:#a78bfa;color:#160b3a;border:0;border-radius:10px;padding:8px 18px;cursor:pointer}
.kcs-offline{position:fixed;inset-inline:0;bottom:0;z-index:90;text-align:center;font-size:.88rem;background:#3b1d6e;color:#f1e9ff;padding:6px 12px}
.kcs-offline[hidden]{display:none}
@media (max-width:999px){
  .kcs-install-btn span{display:none}
  .kcs-install-btn{padding:8px}
}
@media (max-width:760px){
  .kcs-install-btn{position:absolute;left:56px;top:50%;transform:translateY(-50%)}
  .kcs-offline{bottom:calc(64px + env(safe-area-inset-bottom))}
}