/* CSS Reset & Variables */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: 'Segoe UI', system-ui, sans-serif; line-height: 1.8; color: var(--text-color); background: var(--bg-color); transition: all 0.3s; }
:root { --primary-color: #333; --secondary-color: #555; --bg-color: #fff; --text-color: #333; --surface-color: #f4f4f4; --border-color: #ddd; }
.theme-1 { --primary-color: #1B4332; --secondary-color: #2D6A4F; --bg-color: #F8FAF8; --text-color: #1A1A1A; --surface-color: color-mix(in srgb, #F8FAF8 90%, #1A1A1A); --border-color: color-mix(in srgb, #1B4332 20%, #F8FAF8); }
.theme-2 { --primary-color: #780000; --secondary-color: #C1121F; --bg-color: #FCF8F8; --text-color: #111111; --surface-color: color-mix(in srgb, #FCF8F8 90%, #111111); --border-color: color-mix(in srgb, #780000 20%, #FCF8F8); }
.theme-3 { --primary-color: #03045E; --secondary-color: #0077B6; --bg-color: #F5F9FD; --text-color: #0B0C10; --surface-color: color-mix(in srgb, #F5F9FD 90%, #0B0C10); --border-color: color-mix(in srgb, #03045E 20%, #F5F9FD); }
.theme-4 { --primary-color: #E85D04; --secondary-color: #DC2F02; --bg-color: #FFF9F5; --text-color: #1C1C1C; --surface-color: color-mix(in srgb, #FFF9F5 90%, #1C1C1C); --border-color: color-mix(in srgb, #E85D04 20%, #FFF9F5); }
.theme-5 { --primary-color: #240046; --secondary-color: #3C096C; --bg-color: #F8F5FC; --text-color: #1A0B2E; --surface-color: color-mix(in srgb, #F8F5FC 90%, #1A0B2E); --border-color: color-mix(in srgb, #240046 20%, #F8F5FC); }
.theme-6 { --primary-color: #B8860B; --secondary-color: #DAA520; --bg-color: #121212; --text-color: #F5F5F5; --surface-color: color-mix(in srgb, #121212 90%, #F5F5F5); --border-color: color-mix(in srgb, #B8860B 20%, #121212); }
.theme-7 { --primary-color: #000000; --secondary-color: #50C878; --bg-color: #0A0A0A; --text-color: #E0E0E0; --surface-color: color-mix(in srgb, #0A0A0A 90%, #E0E0E0); --border-color: color-mix(in srgb, #000000 20%, #0A0A0A); }
.theme-8 { --primary-color: #4A4A4A; --secondary-color: #696969; --bg-color: #FDFDFD; --text-color: #2C2C2C; --surface-color: color-mix(in srgb, #FDFDFD 90%, #2C2C2C); --border-color: color-mix(in srgb, #4A4A4A 20%, #FDFDFD); }
.theme-9 { --primary-color: #002366; --secondary-color: #4169E1; --bg-color: #F4F7FB; --text-color: #151B26; --surface-color: color-mix(in srgb, #F4F7FB 90%, #151B26); --border-color: color-mix(in srgb, #002366 20%, #F4F7FB); }
.theme-10 { --primary-color: #1A1A1A; --secondary-color: #404040; --bg-color: #FFFFFF; --text-color: #0F0F0F; --surface-color: color-mix(in srgb, #FFFFFF 90%, #0F0F0F); --border-color: color-mix(in srgb, #1A1A1A 20%, #FFFFFF); }

body.dark-mode { --bg-color: #121212; --text-color: #e0e0e0; --surface-color: #1e1e1e; --border-color: #333; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.layout-grid { display: grid; grid-template-columns: 1fr 320px; gap: 40px; padding: 40px 0; }
@media (max-width: 900px) { .layout-grid { grid-template-columns: 1fr; } }
header { background: var(--surface-color); border-bottom: 3px solid var(--primary-color); padding: 15px 0; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
header .container { display: flex; justify-content: space-between; align-items: center; }
.brand { font-size: 1.6rem; font-weight: 800; color: var(--primary-color); text-decoration: none; letter-spacing: -0.5px; }
nav { display: flex; align-items: center; gap: 20px; }
nav ul { list-style: none; display: flex; gap: 20px; }
nav a { text-decoration: none; color: var(--text-color); font-weight: 600; font-size: 0.95rem; }
nav a:hover { color: var(--primary-color); }
#dm-toggle { background: var(--primary-color); color: var(--bg-color); border: none; padding: 8px 15px; border-radius: 20px; cursor: pointer; font-weight: bold; }
#progress-container { position: fixed; top: 0; left: 0; width: 100%; height: 5px; z-index: 1000; }
#progress-bar { height: 100%; background: var(--primary-color); width: 0%; transition: width 0.1s; }
.breadcrumb { padding: 20px 0 0; font-size: 0.9rem; color: var(--secondary-color); }
.breadcrumb a { color: var(--primary-color); text-decoration: none; font-weight: 500; }
article h1 { font-size: 2.6rem; margin-bottom: 25px; color: var(--primary-color); line-height: 1.3; font-weight: 800; }
article h2 { font-size: 1.8rem; margin: 45px 0 20px; color: var(--secondary-color); border-bottom: 2px solid var(--border-color); padding-bottom: 10px; font-weight: 700; }
article h3 { font-size: 1.4rem; margin: 30px 0 15px; color: var(--primary-color); font-weight: 600; }
article h4 { font-size: 1.2rem; margin: 20px 0 10px; font-weight: 600; }
article p { margin-bottom: 22px; font-size: 1.15rem; color: var(--text-color); text-align: justify; }
article img { width: 100%; height: auto; border-radius: 12px; margin: 25px 0; display: block; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
article ul, article ol { margin: 0 0 25px 25px; font-size: 1.15rem; }
article li { margin-bottom: 10px; }
.meta-info { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 35px; padding: 15px 20px; background: var(--surface-color); border-left: 5px solid var(--primary-color); border-radius: 6px; }
.meta-info span { font-size: 0.95rem; font-weight: 600; color: var(--text-color); }
.share-buttons { display: flex; gap: 12px; margin: 25px 0; }
.share-buttons button { padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer; background: var(--primary-color); color: var(--bg-color); font-weight: 700; font-size: 0.9rem; }
aside .widget { background: var(--surface-color); padding: 25px; border-radius: 12px; margin-bottom: 35px; border: 1px solid var(--border-color); }
.toc-wrapper { position: sticky; top: 100px; }
.toc-title { font-size: 1.3rem; margin-bottom: 15px; font-weight: 800; color: var(--primary-color); text-transform: uppercase; letter-spacing: 1px; }
#toc { list-style: none; font-size: 1rem; max-height: 60vh; overflow-y: auto; }
#toc li { margin-bottom: 12px; line-height: 1.4; }
#toc li.toc-h3 { margin-left: 20px; font-size: 0.95rem; opacity: 0.9; }
#toc a { text-decoration: none; color: var(--text-color); font-weight: 500; transition: color 0.2s; display: block; }
#toc a:hover { color: var(--primary-color); padding-left: 5px; }
.faq-section { margin-top: 60px; padding: 30px; background: var(--surface-color); border-radius: 12px; }
.faq-section h2 { border: none; margin-top: 0; }
.faq-item { margin-bottom: 15px; border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; }
.faq-question { width: 100%; text-align: left; padding: 18px 25px; font-size: 1.15rem; font-weight: 700; background: var(--bg-color); color: var(--primary-color); border: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.faq-question.active { background: var(--primary-color); color: var(--bg-color); }
.faq-question:after { content: '+'; font-size: 1.5rem; }
.faq-question.active:after { content: '-'; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; background: var(--surface-color); }
.faq-answer p { padding: 20px 25px; margin: 0; font-size: 1.05rem; }
.author-box { display: flex; gap: 25px; margin-top: 60px; padding: 35px; background: var(--surface-color); border-radius: 12px; align-items: center; border: 1px solid var(--border-color); }
.author-avatar { width: 90px; height: 90px; border-radius: 50%; background: var(--primary-color); display: flex; align-items: center; justify-content: center; color: var(--bg-color); font-weight: 800; font-size: 2rem; }
.author-info h4 { margin-bottom: 10px; color: var(--primary-color); font-size: 1.3rem; }
.author-info p { font-size: 1rem; margin: 0; }
.related-list { list-style: none; }
.related-list li { margin-bottom: 15px; border-bottom: 1px solid var(--border-color); padding-bottom: 12px; }
.related-list a { text-decoration: none; color: var(--text-color); font-weight: 600; line-height: 1.4; display: block; }
.related-list a:hover { color: var(--primary-color); }
.scroll-animate { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; }
.scroll-animate.visible { opacity: 1; transform: translateY(0); }
footer { background: var(--primary-color); color: var(--bg-color); text-align: center; padding: 40px 20px; margin-top: 60px; }
footer a { color: var(--bg-color); text-decoration: underline; font-weight: 600; }
#back-to-top { position: fixed; bottom: 40px; right: 40px; padding: 15px; width: 50px; height: 50px; background: var(--primary-color); color: var(--bg-color); border: none; border-radius: 50%; cursor: pointer; display: none; font-size: 1.5rem; box-shadow: 0 4px 15px rgba(0,0,0,0.3); z-index: 999; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition: opacity 0.3s; }
#back-to-top.show { opacity:1; pointer-events:auto; }
.internal-link { color: var(--primary-color); font-weight: bold; text-decoration: underline; text-underline-offset: 3px; }