/** OVERALL STYLE **/

* { box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    background: #ffffff;
    color: #111111;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    position: relative;
    font-size: 1rem;
    line-height: 1.6;
}

a { color: #1d4ed8; text-decoration: none; }
a:hover { text-decoration: underline; color: #1e40af; }
a:visited { color: #4f46e5; }

.theme-colors {
    background: #111111;
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
.theme-colors a { color: orange; text-decoration: none; }
.theme-colors a:hover { text-decoration: underline; }

.header {
    padding: 0.5rem 1.25rem;
    line-height: 1.4;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    gap: 1rem;
    overflow: hidden;
}

.branding { font-size: 1rem; white-space: nowrap; flex-shrink: 0; }
.branding b { color: orange; font-size: 1.1rem; }

.breadcrumb-nav { font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.breadcrumb-part { white-space: nowrap; font-size: 0.875rem; }

@media (max-width: 600px) {
    .header { padding: 0.5rem 0.75rem; gap: 0.5rem; }
    .branding { font-size: 0.85rem; }
    .main { padding: 0.75rem 0.75rem 5rem 0.75rem; }
}

.footer {
    padding: 0.75rem 1.25rem;
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.main {
    padding: 1rem 1.25rem 5rem 1.25rem;
    max-width: 50rem;
}

.filter-container {
    position: sticky;
    top: 0;
    z-index: 90;
    background: #ffffff;
    padding: 0.5rem 0;
    margin: 0 0 1rem 0;
}
.filter-input {
    width: 100%;
    max-width: 30rem;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    box-sizing: border-box;
}
.filter-input:focus { outline: 2px solid #1d4ed8; border-color: #1d4ed8; }
.filter-hidden { display: none !important; }

.bookmark-bar { display: flex; gap: 0.5rem; margin-top: 0.5rem; position: relative; }
.bookmark-btn {
    padding: 0.35rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #f9fafb;
    cursor: pointer;
}
.bookmark-btn:hover { background: #e5e7eb; }
.bookmark-drop {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.25rem;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 18rem;
    max-width: 30rem;
    max-height: 20rem;
    overflow-y: auto;
    z-index: 95;
}
.bookmark-row {
    display: flex;
    align-items: center;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid #f3f4f6;
}
.bookmark-row:last-child { border-bottom: none; }
.bookmark-row a { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bookmark-del {
    padding: 0 0.4rem;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #999;
    font-size: 1rem;
}
.bookmark-del:hover { color: #dc2626; }
.bookmark-empty { padding: 0.6rem; color: #666; font-size: 0.875rem; }

h1 { font-size: 1.4rem; font-weight: 700; margin: 0 0 1rem 0; color: #111; }
h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: #666; margin: 1.2rem 0 0.2rem; }

/** FOLDERS **/

.folder-icon { height: 20px; width: 20px; margin-right: 5px; }
li { line-height: 1.5; list-style-image: none; }
.li-folder { list-style-image: url('icons/folder.svg'); }
.li-folder.li-folder-open { list-style-image: url('icons/folder-open.svg'); }
.hidden { display: none; }
.selected { background: #dbeafe; border-radius: 3px; padding: 0 3px; }

/** INDENTATION **/

.indent-1 { white-space: pre; tab-size: 2; }
.indent-2 { white-space: pre; tab-size: 4; }
.indent-3 { white-space: pre; tab-size: 6; }
.indent-4 { white-space: pre; tab-size: 8; }
.indent-5 { white-space: pre; tab-size: 10; }
.indent-6 { white-space: pre; tab-size: 12; }
.indent-7 { white-space: pre; tab-size: 14; }
.indent-8 { white-space: pre; tab-size: 16; }
.indent-9 { white-space: pre; tab-size: 18; }
.indent-right-align { white-space: pre; tab-size: 100; }

/** HIGHLIGHTED REGIONS **/

.oxe-image { position: relative; display: inline-block; max-width: none; }
.oxe-image .big-img { max-width: none !important; width: initial !important; }
.oxe-region { position: absolute; display: block; background: rgba(25,122,250,.3); }

/** TABLES **/

table { border-collapse: collapse; }
td, th { border: 1px solid #d1d5db; padding: .4rem .6rem; }
th { background: #f3f4f6; font-weight: 600; }
tr:nth-child(even) td { background: #f9fafb; }

/** IMAGES **/

.big-img { max-width: 50rem; }
@media only screen and (hover: none) { html .big-img { max-width: 100%; } }

/** MANUAL CONTENT **/

.clsEmphBOLD { font-weight: bold; }
.NOTE { font-style: italic; }
.NOTE_label { font-weight: bold; }
.ICON { height: 1em; }
.imageHolder { margin-top: 1em; }
.imageCaption { font-size: 1.5em; color: #444; }
.imageHolder img { display: block; max-width: 50rem; }
.svgImageHolder { page-break-before: always; page-break-after: always; }
.clsArticleSvg { width: 80rem; }
@media only screen and (max-width: 75rem) { .imageHolder img.clsArticleSvg { width: 50rem; } }
@media only screen and (hover: none) {
    html .imageHolder img.clsArticleSvg { width: 100%; }
    html .imageHolder img { max-width: 100%; }
}

.other-warning { padding: 1rem; margin: 1rem 0; border-radius: 4px; border-left: 4px solid; }
.other-variant { background: #eff6ff; border-color: #3b82f6; }
.other-car { background: #fff7ed; border-color: orange; }
.other-announcement { background: #fefce8; border-color: #eab308; }

/** ABOUT PAGE **/

.about-body { padding: 2rem 5vw; background: #fff; color: #111; }
.about-h1 { font-size: 4rem; font-weight: 700; color: #111; margin-bottom: 1rem; }
.about-h1 a { color: #111; text-decoration: none; }
.about-content { line-height: 1.6; min-width: 6rem; max-width: 100%; width: 30rem; font-size: 1.2em; margin-bottom: 1.5rem; }