:root{
--primary:#4B5563;
--primary-strong:#374151;
--bg:#F3F4F6;
--bg-soft:#E5E7EB;
--surface:#ffffff;
--control:#EEF0F4;
--hover:#E5E7EB;
--text:#111827;
--muted:#647084;
--border:#D1D5DB;
--shadow:rgba(15,23,42,.12);
--logo-filter:none;
--button-text:#FFFFFF;
color-scheme:light;
}

:root[data-theme="dark"]{
--primary:#A3AAB8;
--primary-strong:#D1D5DB;
--bg:#0B0D10;
--bg-soft:#15181D;
--surface:#15181D;
--control:#1E2229;
--hover:#1E2229;
--text:#F8FAFC;
--muted:#B8C0CC;
--border:#343A46;
--shadow:rgba(0,0,0,.4);
--logo-filter:invert(1) brightness(1.8);
--button-text:#0B0D10;
color-scheme:dark;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:Arial,sans-serif;
background:var(--bg);
color:var(--text);
line-height:1.6;
}

/* HEADER */

.topbar{
position:sticky;
top:0;
z-index:1000;


display:flex;
justify-content:space-between;
align-items:center;

padding:15px 24px;

background:var(--surface);
border-bottom:1px solid var(--border);

}

.topbar-brand{
display:flex;
align-items:center;
gap:12px;
}

.logo a{
display:flex;
align-items:center;
gap:12px;
text-decoration:none;
color:inherit;
}

.logo img{
display:block;
width:150px;
height:auto;
border-radius:4px;
filter:var(--logo-filter);
}

.logo-label{
padding-left:12px;
border-left:1px solid var(--border);
font-size:14px;
font-weight:600;
color:var(--muted);
white-space:nowrap;
}

.topbar-actions{
display:flex;
align-items:center;
gap:10px;
}

/* SEARCH */

.search-wrapper{
position:relative;
}

#searchInput{
width:280px;
padding:10px 14px;
border:1px solid var(--border);
border-radius:8px;
background:var(--surface);
color:var(--text);
}

#searchInput:focus,
.language-switcher:focus,
#themeToggle:focus-visible,
.menu-toggle:focus-visible{
outline:2px solid var(--primary);
outline-offset:2px;
}

#searchResults{
display:none;

position:absolute;
top:48px;
left:0;

width:100%;

background:var(--surface);

border:1px solid var(--border);
border-radius:10px;

overflow:hidden;

box-shadow:0 10px 30px var(--shadow);

z-index:10001;

}

#searchResults a{
display:block;
padding:12px 15px;
text-decoration:none;
color:var(--text);
}

#searchResults a:hover{
background:var(--hover);
}

#searchResults small{
display:block;
margin-top:4px;
color:var(--muted);
}

/* LANGUAGE */

.language-switcher{
padding:10px 12px;
border:1px solid var(--border);
border-radius:8px;
background:var(--surface);
color:var(--text);
}

/* THEME */

#themeToggle{
width:42px;
height:42px;

border:none;
border-radius:8px;

cursor:pointer;

background:var(--control);
color:var(--text);

}

/* HAMBURGER */

.menu-toggle{
display:none;

width:42px;
height:42px;

border:none;
border-radius:8px;

background:var(--control);
color:var(--text);

cursor:pointer;
font-size:22px;

}

/* LAYOUT */

.layout{
display:flex;
min-height:calc(100vh - 70px);
}

/* SIDEBAR */

.sidebar{
width:280px;
flex-shrink:0;

padding:24px;

background:var(--bg-soft);
border-right:1px solid var(--border);

position:sticky;
top:70px;

height:calc(100vh - 70px);
overflow-y:auto;

}

.sidebar ul{
list-style:none;
}

.sidebar h3{
margin-top:20px;
margin-bottom:10px;
}

.sidebar a{
display:block;
padding:8px 10px;
border-radius:8px;

text-decoration:none;
color:var(--text);

}

.sidebar a:hover{
background:var(--hover);
color:var(--primary-strong);
}

.sidebar a.active{
background:var(--hover);
color:var(--primary-strong);
font-weight:700;
}

.close-sidebar{
display:none;
}

/* CONTENT */

.content{
flex:1;
max-width:1000px;
padding:40px 50px;
}

.article-content{
line-height:1.8;
}

.article-content p{
margin-bottom:16px;
}

.article-content h2{
margin-top:30px;
margin-bottom:12px;
scroll-margin-top:95px;
}

.article-toc{
margin:20px 0 30px;
padding:18px 20px;
border:1px solid var(--border);
border-radius:12px;
background:var(--bg-soft);
}

.article-toc ol{
margin:10px 0 0 22px;
}

.article-toc a{
color:var(--primary-strong);
text-decoration:none;
}

.article-toc a:hover{
text-decoration:underline;
}

.table-wrapper{
overflow-x:auto;
margin:20px 0 28px;
}

.article-content table{
width:100%;
border-collapse:collapse;
background:var(--bg);
}

.article-content th,
.article-content td{
padding:12px 14px;
border:1px solid var(--border);
text-align:left;
vertical-align:top;
}

.article-content th{
background:var(--bg-soft);
font-weight:700;
}

.article-content code{
font-family:Consolas,monospace;
font-size:.9em;
color:var(--primary-strong);
}

/* HERO */

.hero{
margin-bottom:40px;
}

.hero h1{
font-size:42px;
}

/* CARDS */

.quick-links{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:16px;
margin:30px 0;
}

.card{
display:block;

padding:20px;

border:1px solid var(--border);
border-radius:12px;

text-decoration:none;
color:inherit;

transition:.2s;
background:var(--surface);

}

.card:hover{
transform:translateY(-2px);
box-shadow:0 10px 25px var(--shadow);
border-color:var(--primary);
}

/* BREADCRUMB */

.breadcrumb{
display:flex;
align-items:center;
gap:8px;

font-size:14px;
color:var(--muted);

margin-bottom:15px;

}

.breadcrumb a{
text-decoration:none;
color:var(--primary-strong);
}

/* ARTICLE NAVIGATION */

.article-navigation{
display:flex;
justify-content:space-between;

gap:20px;

margin-top:50px;
padding-top:30px;

border-top:1px solid var(--border);

}

.article-navigation a{
text-decoration:none;

padding:12px 16px;

border:1px solid var(--border);
border-radius:10px;

color:var(--primary);

}

.article-navigation a:hover{
background:var(--hover);
border-color:var(--primary);
}

/* FOOTER */

.footer{
margin-top:40px;
border-top:1px solid var(--border);
padding:20px;
}

.footer-content{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
}

.footer-brand{
display:flex;
align-items:center;
gap:8px;
white-space:nowrap;
}

.footer-brand img{
display:block;
width:102px;
height:auto;
}

.kolibri-link{
display:block;
border-radius:4px;
}

.kolibri-link:focus-visible{
outline:2px solid var(--primary);
outline-offset:3px;
}

.footer-links{
display:flex;
justify-content:center;
gap:16px;
padding:0 20px 20px;
}

.footer-links a{
color:var(--primary-strong);
text-decoration:none;
}

.footer-links a:hover{
text-decoration:underline;
}

.popular-articles{
margin:12px 0 0 20px;
}

.error-page{
text-align:center;
padding-top:80px;
}

.error-code{
font-size:72px;
font-weight:800;
line-height:1;
color:var(--primary);
}

.error-home{
display:inline-block;
margin-top:24px;
padding:10px 16px;
border-radius:8px;
background:var(--primary);
color:var(--button-text);
text-decoration:none;
}

/* OVERLAY */

.sidebar-overlay{
position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,.45);

z-index:99998;

opacity:0;
visibility:hidden;

transition:.3s;

}

.sidebar-overlay.active{
opacity:1;
visibility:visible;
}

/* MOBILE */

@media (max-width:768px){

.menu-toggle{
    display:block;
}

.topbar{
    display:block;
    padding:15px;
}

.topbar-brand{
    margin-bottom:12px;
}

.logo a{
    gap:8px;
}

.logo img{
    width:122px;
}

.logo-label{
    padding-left:8px;
    font-size:12px;
}

.topbar-actions{
    display:flex;
    align-items:center;
    gap:8px;
}

#searchInput{
    width:100%;
}

.search-wrapper{
    flex:1;
}

.language-switcher{
    width:110px;
}

.layout{
    display:block;
}

.close-sidebar{
    display:block;

    width:40px;
    height:40px;

    border:none;
    border-radius:8px;

    background:var(--control);
    color:var(--text);

    cursor:pointer;

    font-size:20px;

    margin-bottom:20px;
}

.sidebar{
    position:fixed;

    left:-300px;
    top:0;

    width:280px;
    height:100vh;

    background:var(--surface);

    z-index:99999;

    overflow-y:auto;

    box-shadow:0 0 20px var(--shadow);

    transition:left .3s ease;
}

.sidebar.active{
    left:0;
}

.content{
    width:100%;
    max-width:100%;
    padding:20px;
}

.hero h1{
    font-size:30px;
}

.footer-content{
    flex-direction:column;
    gap:10px;
    text-align:center;
}

.footer-brand{
    justify-content:center;
}

.article-navigation{
    flex-direction:column;
}


}