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

body.slide-layout { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f0f2f5; color: #333; line-height: 1.7; padding: 0; }

.menu-bar { background-color: #243342; padding: 10px 20px; display: flex; flex-wrap: wrap; gap: 8px; position: sticky; top: 0; z-index: 1000; }

.menu-bar a { color: #ecf0f1; text-decoration: none; padding: 6px 14px; font-size: 0.9em; transition: background-color 0.3s; }

.menu-bar a:hover { background-color: #e74c3c; }

.menu-bar a.active { background-color: #e74c3c; font-weight: bold; }

.slide { max-width: 1100px; margin: 30px auto; background: #f9f9f9; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); overflow: hidden; }

.header { background-color: #364d63; color: white; padding: 14px 24px; display: flex; align-items: center; gap: 16px; }

.slide-number { background-color: #e74c3c; padding: 4px 14px; font-weight: bold; font-size: 0.95em; white-space: nowrap; }

.slide-title { font-size: 1.15em; font-weight: 600; border-bottom: 2px solid #e74c3c; padding-bottom: 4px; }

.slide-layout .content { display: flex; flex-wrap: wrap; padding: 24px; gap: 24px; }

.text { flex: 3; min-width: 300px; max-width: 100%; }

.illustration { flex: 2; min-width: 250px; display: flex; align-items: center; justify-content: center; }

.illustration img { max-width: 100%; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }

h3 { color: #2c3e50; margin-bottom: 12px; font-size: 1.15em; }

p { margin-bottom: 10px; text-align: justify; }

ul, ol { margin: 10px 0 10px 20px; }

li { margin-bottom: 6px; }

pre.cli { background-color: #1e1e1e; color: #d4d4d4; padding: 16px; overflow-x: auto; font-family: 'Courier New', Courier, monospace; font-size: 0.92em; line-height: 1.6; margin: 12px 0; border-left: 5px solid #e74c3c; }

.cmd { color: #569cd6; }
.def { color: #dcdcaa; }
.str { color: #ce9178; }
.comment { color: #6a9955; font-style: italic; }
.num { color: #b5cea8; }
.attr { color: #9cdcfe; }

.important-box { background-color: #fff3cd; border-left: 5px solid #ffc107; padding: 15px; margin: 12px 0; }

table { width: 100%; border-collapse: collapse; margin: 12px 0; }

table th, table td { border: 1px solid #ddd; padding: 8px 12px; text-align: left; }

table th { background-color: #2c3e50; color: white; }

table tr:nth-child(even) { background-color: #f2f2f2; }

.slide_ext { background-color: #eef5fa; padding: 24px 24px; padding-right: 20%; border-top: 2px solid #2c3e50; display: none; }

.slide_ext p { margin-bottom: 8px; font-size: 0.95em; }

.slide_ext.hidden { display: block; }

.slide_ext.show { display: block; }

.slide_ext.slim { padding: 16px 24px; }

.subtitle-slide { font-size: 1.05em; color: #e74c3c; margin-bottom: 12px; font-weight: 500; }

.keyword { color: #c586c0; }
.built { color: #dcdcaa; }
.callout { background-color: #fff3cd; border-left: 5px solid #ffc107; padding: 15px; margin: 12px 0; }

@media (max-width: 768px) { .slide-layout .content { flex-direction: column; } .illustration { order: -1; } }

.btn-toggle { margin-left: auto; background: #e74c3c; color: #fff; border: none; padding: 6px 14px; cursor: pointer; font-size: 0.9em; }

.important-box.narrow-box { max-width: 1100px; margin: -20px auto 20px; }

td.pink-bg { background: #E3C7C7; }
td.lightyellow-bg { background: #E3E3C7; }
td.lightblue-bg { background: #C7C7E3; }
td.lightgreen-bg { background: #C7E3C7; }
td.gray-bg { background: #C7C7C7; }

b.text-green { color: green; }
b.text-orange { color: orange; }
b.text-red { color: red; }

body.sidebar-layout { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 0; background-color: #f4f7f6; color: #333; display: flex; min-height: 100vh; }

body.main-layout { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 0; background-color: #f4f7f6; color: #333; display: flex; min-height: 100vh; }

.sidebar { width: 400px; background-color: #1a1a2e; color: white; padding: 20px; box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; position: fixed; height: 100vh; overflow-y: auto; top: 0; left: 0; }

.main-layout .sidebar { padding: 25px 20px; }

.sidebar h1 { font-size: 20px; margin-bottom: 10px; text-align: center; border-bottom: 1px solid #0f3460; padding-bottom: 15px; color: #e94560; }

.sidebar .subtitle { font-size: 12px; text-align: center; color: #888; margin-bottom: 25px; }

.main-layout .sidebar .subtitle { margin-bottom: 20px; }

.sidebar .subtitle.c-accent { color: #e94560; }

.sidebar .subtitle.c-accent-mt { margin-top: 20px; color: #e94560; }

.menu { list-style-type: none; padding: 0; margin: 0; }

.menu li { margin-bottom: 8px; }

.main-layout .menu li { margin-bottom: 6px; }

.menu a { display: block; padding: 12px 15px; color: #ecf0f1; text-decoration: none; background-color: #0f3460; transition: background-color 0.3s; font-size: 0.9em; }

.main-layout .menu a { padding: 10px 14px; font-size: 0.85em; }

.menu a:hover { background-color: #e94560; }

.menu .num { font-weight: bold; color: #e94560; margin-right: 6px; }

.menu a:hover .num { color: #fff; }

.menu .active { background-color: #e94560; font-weight: bold; }

.menu.mb-20 { margin-bottom: 20px; }

.sidebar .section-title { font-size: 13px; text-align: left; color: #e94560; margin-top: 18px; margin-bottom: 8px; font-weight: bold; border-bottom: 1px solid #0f3460; padding-bottom: 4px; }

.dropdown { position: relative; display: block; }

.dropdown > a { display: block; padding: 10px 14px; color: #ecf0f1; text-decoration: none; background-color: #0f3460; transition: background-color 0.3s; font-size: 0.85em; cursor: pointer; }

.dropdown > a:hover, .dropdown:hover > a { background-color: #e94560; }

.dropdown-content { display: none; position: relative; background-color: #16213e; min-width: 100%; z-index: 1; }

.dropdown:hover .dropdown-content { display: block; }

.dropdown-content a { display: block; padding: 8px 14px 8px 24px; color: #b0bec5; text-decoration: none; font-size: 0.8em; transition: background-color 0.3s, color 0.3s; }

.dropdown-content a:hover { background-color: #0f3460; color: #ecf0f1; }

.sidebar-layout .content { flex: 1; padding: 40px; min-height: 100vh; }

.sidebar-layout .content { margin-left: 400px; }

body.ndx-layout .content { margin-left: 300px; }

body.index-layout .content { margin-left: 400px; display: flex; flex-direction: column; align-items: center; justify-content: center; }

.main-layout .content { flex: 1; padding: 40px; margin-left: 400px; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }

.footer { margin-top: auto; text-align: center; padding-top: 20px; font-size: 0.85em; color: #7f8c8d; border-top: 1px solid #0f3460; padding-bottom: 20px; margin-bottom: 25px; }

.footer a { color: #7f8c8d; text-decoration: none; }

.index-box { background-color: white; padding: 30px 40px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); max-width: 1000px; width: 100%; margin: 0 auto; }

.index-box h2 { color: #1a1a2e; margin-bottom: 8px; }

.index-box h3 { color: #0f3460; margin-top: 0; margin-bottom: 24px; font-weight: normal; border-bottom: 2px solid #e94560; padding-bottom: 10px; }

.index-box p.desc { color: #555; margin-bottom: 24px; line-height: 1.6; }

.toc { background: #f0f4f8; padding: 16px 20px; margin-bottom: 28px; border-left: 4px solid #0f3460; }

.toc h4 { color: #0f3460; margin-bottom: 10px; }

.toc a { color: #0f3460; text-decoration: none; font-size: 0.92em; line-height: 1.8; }

.toc a:hover { text-decoration: underline; color: #e94560; }

.letter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; margin-bottom: 24px; }

.letter-card { background: #f0f4f8; border-left: 4px solid #0f3460; text-align: center; padding: 6px 0; cursor: pointer; font-weight: 700; font-size: 1.05em; color: #0f3460; transition: all 0.2s; user-select: none; }

.letter-card:hover { background: #e94560; color: #fff; border-left-color: #1a1a2e; }

.letter-card.active { background: #e94560; color: #fff; border-left-color: #1a1a2e; }

.cat { margin-bottom: 36px; }

.cat h4 { color: #1a1a2e; font-size: 1.15em; background: #f0f4f8; padding: 10px 14px; border-left: 5px solid #e94560; margin-bottom: 14px; }

.cat h4 a.toc-link { color: inherit; text-decoration: none; }

.entry { padding: 12px 14px; border-bottom: 1px solid #eef1f0; }

.entry:last-child { border-bottom: none; }

.entry .term-link { color: #1a1a2e; text-decoration: none; font-weight: 600; display: block; padding: 2px 0; transition: color 0.15s; }

.entry .term-link:hover { color: #e94560; text-decoration: underline; }

.scroll-top { position: fixed; bottom: 30px; right: 30px; background: #e94560; color: white; border: none; padding: 10px 16px; cursor: pointer; font-size: 1.2em; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }

.scroll-top:hover { background: #c73a52; }

.search-box { background-color: white; padding: 30px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); max-width: 900px; width: 100%; margin: 0 auto; }

.search-box h2 { color: #1a1a2e; margin-bottom: 8px; }

.search-box h3 { color: #0f3460; margin-top: 0; margin-bottom: 20px; font-weight: normal; border-bottom: 2px solid #e94560; padding-bottom: 10px; }

.search-form { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; align-items: center; }

.search-form input[type="text"] { flex: 1; min-width: 200px; padding: 12px 16px; border: 2px solid #ddd; font-size: 1em; outline: none; transition: border-color 0.3s; }

.search-form input[type="text"]:focus { border-color: #e94560; }

.search-form .options { display: flex; gap: 16px; align-items: center; }

.search-form .options label { font-size: 0.9em; color: #555; cursor: pointer; display: flex; align-items: center; gap: 4px; }

.search-form .options input[type="radio"] { accent-color: #e94560; }

.search-form button { padding: 12px 28px; background-color: #e94560; color: white; border: none; font-size: 1em; cursor: pointer; transition: background-color 0.3s; }

.search-form button:hover { background-color: #c73a52; }

.stats { font-size: 0.9em; color: #888; margin-bottom: 16px; }

.result { background: #f0f4f8; border-left: 4px solid #0f3460; padding: 14px 16px; margin-bottom: 12px; }

.result.found { border-left-color: #e94560; }

.result .r-part { font-weight: bold; color: #0f3460; font-size: 0.85em; }

.result .r-title { font-size: 1.05em; font-weight: 600; color: #1a1a2e; margin: 4px 0; }

.result .r-snippet { font-size: 0.92em; color: #555; line-height: 1.5; }

.result .r-link { display: inline-block; margin-top: 6px; font-size: 0.85em; color: #e94560; text-decoration: none; }

.result .r-link:hover { text-decoration: underline; }

.result mark { background-color: #ffdd57; padding: 1px 3px; }

.no-results { text-align: center; padding: 40px; color: #888; font-style: italic; }

.loading-msg { text-align: center; color: #888; }

.img-wide { width: 700px; }

.welcome-box { background-color: white; padding: 40px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); max-width: 800px; width: 100%; }

.welcome-box h2 { color: #1a1a2e; margin-bottom: 8px; }

.welcome-box h3 { color: #0f3460; margin-top: 0; margin-bottom: 20px; font-weight: normal; border-bottom: 2px solid #e94560; padding-bottom: 10px; }

.welcome-box p { font-size: 16px; line-height: 1.8; color: #555; margin-bottom: 14px; }

@media (max-width: 800px) {
    .sidebar { width: 100%; position: relative; height: auto; }
    .sidebar-layout .content { margin-left: 0; padding: 20px; }
    .index-box { padding: 20px; }
}

@media (max-width: 768px) {
    .sidebar { width: 100%; position: relative; height: auto; }
    .sidebar-layout .content { margin-left: 0; padding: 20px; }
    .main-layout .content { margin-left: 0; padding: 20px; }
    .search-form { flex-direction: column; align-items: stretch; }
}