/* === RESET & BASE === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:'Nunito',sans-serif;background:#F5F3FF;color:#1E1B4B;overflow-x:hidden}

/* === SIDEBAR === */
#sidebar{
    position:fixed;top:0;left:0;width:280px;height:100vh;
    background:#312E81;display:flex;flex-direction:column;
    overflow-y:auto;z-index:50;
    transition:transform .25s ease;
    box-shadow:4px 0 24px rgba(49,46,129,.18);
}
.sb-header{padding:1.75rem 1.5rem 1.25rem;display:flex;align-items:center;gap:.875rem;border-bottom:1px solid rgba(255,255,255,.1)}
.sb-icon{flex-shrink:0;width:38px;height:38px;color:#A78BFA}
.sb-brand{display:flex;flex-direction:column;gap:3px}
.sb-title{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.3rem;color:#F5F3FF;line-height:1.1}
.sb-mission{font-family:'Nunito',sans-serif;font-weight:600;font-size:.75rem;color:#A78BFA}
.sb-theme{font-family:'Nunito',sans-serif;font-weight:400;font-size:.68rem;color:#7C3AED;opacity:.8}
.sb-divider{height:1px;background:rgba(255,255,255,.1);margin:.75rem 0}
.sb-nav-label{
    padding:.25rem 1.5rem .5rem;
    font-family:'Nunito',sans-serif;font-weight:700;
    font-size:.68rem;color:#8B5CF6;letter-spacing:.1em;text-transform:uppercase
}
.sb-nav{display:flex;flex-direction:column;gap:4px;padding:0 .75rem}
.nav-item{
    display:flex;align-items:center;gap:.75rem;
    padding:.7rem .875rem;border-radius:12px;
    font-family:'Nunito',sans-serif;font-weight:600;font-size:.9rem;
    color:#C4B5FD;text-decoration:none;
    border-left:3px solid transparent;
    transition:background .2s,color .2s,border-color .2s,box-shadow .2s;
    cursor:pointer;
}
.nav-item svg{flex-shrink:0;width:17px;height:17px;opacity:.75}
.nav-item:hover{background:rgba(255,255,255,.1);color:#F5F3FF;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.nav-item:focus-visible{outline:2px solid #A78BFA;outline-offset:2px}
.nav-item.active{
    background:rgba(249,115,22,.2);color:#FFF;
    border-left-color:#F97316;
    box-shadow:0 2px 12px rgba(249,115,22,.2),inset 0 1px 0 rgba(255,255,255,.1)
}
.nav-item.active svg{opacity:1;color:#FBB96A}
.sb-footer{margin-top:auto;padding:1.25rem 1.5rem;border-top:1px solid rgba(255,255,255,.1)}
.sb-footer-label{display:block;font-family:'Nunito',sans-serif;font-weight:700;font-size:.75rem;color:#8B5CF6;letter-spacing:.02em}
.sb-footer-sub{display:block;font-size:.68rem;color:#6D28D9;opacity:.8;margin-top:3px}

/* === MAIN CONTENT === */
#main{margin-left:280px;min-height:100vh;background:#F5F3FF}
.content-wrap{
    max-width:880px;margin:0 auto;padding:2.5rem 2.5rem 5rem;
}

/* === SKELETON LOADER === */
#skeleton{display:block}
.sk-line{
    height:16px;background:#DDD6FE;border-radius:8px;margin-bottom:14px;
    animation:sk-pulse 1.4s ease-in-out infinite;
}
.sk-h1{height:38px;width:70%;margin-bottom:20px;border-radius:10px}
.sk-h3{height:22px;width:45%;margin-bottom:18px;border-radius:8px}
.sk-short{width:55%}
@keyframes sk-pulse{0%,100%{opacity:1}50%{opacity:.4}}
@media(prefers-reduced-motion:reduce){.sk-line{animation:none;opacity:.55}}

/* === MOBILE TOP BAR === */
.mobile-bar{
    display:none;position:fixed;top:0;left:0;right:0;height:58px;
    background:#312E81;align-items:center;justify-content:space-between;
    padding:0 1.25rem;z-index:40;
    box-shadow:0 2px 12px rgba(49,46,129,.25)
}
.mobile-bar-title{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.15rem;color:#F5F3FF}
.hamburger{background:none;border:none;color:#C4B5FD;cursor:pointer;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
.hamburger:hover{background:rgba(255,255,255,.12);color:#fff}
.hamburger:focus-visible{outline:2px solid #A78BFA;outline-offset:2px}

/* === MOBILE OVERLAY === */
#sb-overlay{
    display:none;position:fixed;inset:0;background:rgba(30,27,75,.5);
    z-index:45;opacity:0;transition:opacity .25s ease
}
#sb-overlay.visible{display:block;opacity:1}

/* === RESPONSIVE === */
@media(max-width:767px){
    #sidebar{transform:translateX(-280px)}
    #sidebar.open{transform:translateX(0)}
    #main{margin-left:0;padding-top:58px}
    .mobile-bar{display:flex}
    .content-wrap{padding:1.75rem 1.1rem 4rem}
}

/* === CONTENT CARD === */
.md-card{
    background:#fff;border-radius:20px;
    padding:2.5rem 2.75rem 3rem;
    box-shadow:0 4px 24px rgba(79,70,229,.08),0 1px 6px rgba(79,70,229,.05);
    border:1px solid rgba(167,139,250,.15)
}
@media(max-width:767px){.md-card{padding:1.5rem 1.25rem 2rem;border-radius:16px}}

/* === MARKDOWN BODY === */
.md-body{display:none;line-height:1.8;font-size:1.0625rem;color:#1E1B4B;word-break:break-word}

/* --- Headings --- */
.md-body h1{
    font-family:'Fredoka',sans-serif;font-weight:700;
    font-size:2.35rem;color:#1E1B4B;line-height:1.2;
    margin-bottom:.75rem
}
.md-body h2{
    font-family:'Fredoka',sans-serif;font-weight:600;
    font-size:1.55rem;color:#1E1B4B;line-height:1.25;
    margin-top:2.5rem;margin-bottom:.875rem;
    border-left:4px solid #F97316;padding-left:.875rem;
    background:linear-gradient(to right,#FFF7ED 0%,transparent 65%);
    padding-top:.4rem;padding-bottom:.4rem;border-radius:0 10px 10px 0
}
.md-body h3{
    font-family:'Fredoka',sans-serif;font-weight:600;
    font-size:1.2rem;color:#312E81;line-height:1.3;
    margin-top:2rem;margin-bottom:.5rem
}
.md-body h4{
    font-family:'Nunito',sans-serif;font-weight:700;
    font-size:1rem;color:#4C1D95;
    margin-top:1.5rem;margin-bottom:.4rem
}
.md-body h5,.md-body h6{
    font-family:'Nunito',sans-serif;font-weight:600;
    font-size:.9rem;color:#6D28D9;
    margin-top:1.25rem;margin-bottom:.35rem
}

/* --- Paragraphs & HR --- */
.md-body p{margin-bottom:1rem}
.md-body hr{border:none;border-top:2px dashed #DDD6FE;margin:2rem 0}

/* --- Lists --- */
.md-body ul,.md-body ol{padding-left:1.5rem;margin-bottom:1rem}
.md-body li{margin-bottom:.35rem;line-height:1.75}
.md-body li p{margin-bottom:.25rem}

/* --- Task list checkboxes --- */
.md-body .task-list-item{list-style:none;margin-left:-1.5rem;padding-left:1.85rem;position:relative}
.md-body .task-list-item input[type="checkbox"]{
    position:absolute;left:0;top:.32rem;
    appearance:none;-webkit-appearance:none;
    width:17px;height:17px;border:2.5px solid #C4B5FD;
    border-radius:5px;cursor:default;
    background:#F5F3FF;transition:background .2s,border-color .2s;
    box-shadow:inset 0 1px 3px rgba(79,70,229,.08)
}
.md-body .task-list-item input[type="checkbox"]:checked{
    background:#F97316;border-color:#F97316;
    box-shadow:0 2px 6px rgba(249,115,22,.3)
}
.md-body .task-list-item input[type="checkbox"]:checked::after{
    content:'';display:block;width:9px;height:5px;
    border-left:2px solid #fff;border-bottom:2px solid #fff;
    transform:rotate(-45deg);margin:2px auto 0
}

/* --- Blockquotes --- */
.md-body blockquote{
    border-left:4px solid #F97316;background:#FFF7ED;
    padding:.9rem 1.25rem;margin:1.25rem 0;border-radius:0 12px 12px 0;
    color:#92400E;box-shadow:0 2px 8px rgba(249,115,22,.08)
}
.md-body blockquote p{margin:0;font-size:.9375rem}
.md-body blockquote strong{color:#78350F}

/* --- Tables --- */
.table-wrap{
    overflow-x:auto;margin:1.25rem 0;border-radius:14px;
    border:1px solid #DDD6FE;
    box-shadow:0 4px 16px rgba(79,70,229,.08),0 1px 4px rgba(79,70,229,.05)
}
.md-body table{width:100%;border-collapse:collapse;font-size:.9rem}
.md-body thead tr{background:#4F46E5}
.md-body thead th{
    color:#F5F3FF;font-family:'Nunito',sans-serif;
    font-weight:700;font-size:.85rem;letter-spacing:.03em;
    padding:.75rem 1rem;text-align:left;white-space:nowrap
}
.md-body thead th:first-child{border-radius:13px 0 0 0}
.md-body thead th:last-child{border-radius:0 13px 0 0}
.md-body tbody tr:nth-child(odd){background:#fff}
.md-body tbody tr:nth-child(even){background:#F5F3FF}
.md-body tbody tr:hover{background:#EDE9FE}
.md-body td{padding:.65rem 1rem;border-top:1px solid #EDE9FE;vertical-align:top;line-height:1.6}
.md-body td:first-child{font-weight:600;color:#312E81}
.md-body td:last-child{font-family:'JetBrains Mono',monospace;font-size:.85rem}
.md-body td strong{color:#1E1B4B}

/* --- Code blocks --- */
.md-body pre{
    background:#0D0B18;border-radius:14px;padding:1.1rem 1.4rem;
    margin:1.25rem 0;overflow-x:auto;
    border:1px solid rgba(167,139,250,.15);
    box-shadow:0 4px 20px rgba(13,11,24,.35)
}
.md-body pre code,
.md-body pre code.hljs{
    font-family:'JetBrains Mono',monospace;font-size:.84rem;
    line-height:1.7;background:transparent !important;
    padding:0;color:#E2DCFF;border-radius:0;border:none
}

/* --- Inline code --- */
.md-body code{
    font-family:'JetBrains Mono',monospace;font-size:.84em;
    background:#EDE9FE;color:#5B21B6;padding:2px 7px;border-radius:6px;
    border:1px solid #DDD6FE
}
.md-body pre code{background:transparent !important;color:inherit;padding:0;font-size:.84rem;border:none}

/* --- Links --- */
.md-body a{color:#4F46E5;text-decoration:none;border-bottom:1px solid #C4B5FD;transition:border-color .2s,color .2s}
.md-body a:hover{color:#7C3AED;border-bottom-color:#7C3AED}
.md-body a:focus-visible{outline:2px solid #A78BFA;outline-offset:2px;border-radius:3px}

/* --- Strong / em --- */
.md-body strong{font-weight:700;color:#1E1B4B}
.md-body em{font-style:italic;color:#4C1D95}

/* === PAGE FOOTER === */
.page-footer{
    margin-top:1.5rem;text-align:center;
    padding:.75rem 0 .25rem;
}
.page-footer a{
    font-family:'Nunito',sans-serif;font-size:.82rem;font-weight:600;
    color:#8B5CF6;text-decoration:none;
    border-bottom:1px solid #DDD6FE;
    transition:color .2s,border-color .2s;
}
.page-footer a:hover{color:#4F46E5;border-bottom-color:#A78BFA}
.page-footer a:focus-visible{outline:2px solid #A78BFA;outline-offset:2px;border-radius:3px}

/* === COLLAPSIBLE SIDEBAR (desktop) === */
/* Starts collapsed to an icon rail (html.sb-min, set inline in nrc_sidebar())
   so page content gets the width; the ‹/› button toggles it. Mobile keeps the
   hamburger overlay — these rules only apply from 768px up. */
.sb-toggle{
    position:fixed;top:14px;left:calc(280px - 14px);z-index:60;
    width:28px;height:28px;border-radius:50%;
    background:#7C3AED;color:#fff;border:2px solid #F5F3FF;cursor:pointer;
    font:700 15px/1 'Nunito',sans-serif;display:flex;align-items:center;justify-content:center;
    box-shadow:0 2px 8px rgba(49,46,129,.35);transition:left .2s ease,background .2s;
}
.sb-toggle:hover{background:#6D28D9}
.sb-toggle:focus-visible{outline:2px solid #A78BFA;outline-offset:2px}
@media(max-width:767px){.sb-toggle{display:none}}
@media print{.sb-toggle{display:none}}
@media(min-width:768px){
    #sidebar{transition:transform .25s ease,width .2s ease}
    #main{transition:margin-left .2s ease}
    html.sb-min .sb-toggle{left:calc(68px - 14px)}
    html.sb-min #sidebar{width:68px;overflow-x:hidden}
    html.sb-min #main{margin-left:68px}
    html.sb-min .sb-brand,
    html.sb-min .sb-nav-label,
    html.sb-min .sb-footer{display:none}
    html.sb-min .sb-header{justify-content:center;padding:1.25rem .5rem}
    html.sb-min .sb-nav{padding:0 .6rem}
    html.sb-min .nav-item{justify-content:center;padding:.7rem .5rem;gap:0;font-size:0}
    html.sb-min .nav-item svg{width:20px;height:20px}
}

/* === ACCESSIBILITY & POLISH === */
@media(prefers-reduced-motion:reduce){
    #sidebar,#sb-overlay,.nav-item,.hamburger,.sb-toggle{transition:none}
    .md-body{animation:none}
}
:focus-visible{outline:2px solid #A78BFA;outline-offset:2px}
#sidebar::-webkit-scrollbar{width:4px}
#sidebar::-webkit-scrollbar-track{background:transparent}
#sidebar::-webkit-scrollbar-thumb{background:#4C1D95;border-radius:2px}
.md-body{animation:fade-in .3s ease}
@keyframes fade-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.md-body blockquote+blockquote{margin-top:-.5rem}
::selection{background:#DDD6FE;color:#1E1B4B}