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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: #ffffff;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#main-container {
    display: flex;
    width: 100%;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.left-panel-container {
    display: flex;
    position: relative;
}

#left-panel {
    width: 280px;
    background: #f6f8fa;
    border-right: 1px solid #d0d7de;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
    height: 100%;
}

.resize-handle {
    width: 4px;
    background: #d0d7de;
    cursor: col-resize;
    flex-shrink: 0;
}

.resize-handle:hover {
    background: #0969da;
}

.panel-toggle {
    display: flex;
    border-bottom: 1px solid #d0d7de;
    background: #ffffff;
    flex-shrink: 0;
}

.toggle-btn {
    flex: 1;
    padding: 12px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #57606a;
}

.toggle-btn.active {
    color: #0969da;
    border-bottom: 2px solid #0969da;
}

.panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.panel-content.hidden {
    display: none;
}

#debug {
    flex-shrink: 0;
    background: #f6f8fa;
    padding: 8px;
    margin: 8px;
    font-size: 10px;
    font-family: monospace;
    border-radius: 4px;
    color: #57606a;
    max-height: 150px;
    overflow-y: auto;
    border-top: 1px solid #d0d7de;
}

/* File Tree */
.file-item {
    display: block;
    padding: 8px 12px;
    margin: 4px 0;
    background: #ffffff;
    color: #24292f;
    border-radius: 6px;
    cursor: pointer;
}

.file-item:hover {
    background: #eaeef2;
}

.file-item.active {
    background: #0969da;
    color: #ffffff;
}

.file-item::before {
    content: "📄 ";
}

.folder-item {
    display: block;
    padding: 8px 12px;
    margin: 4px 0;
    background: #eaeef2;
    color: #24292f;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
}

.folder-item::before {
    content: "📁 ";
}

.folder-children {
    padding-left: 20px;
}

.folder.collapsed > .folder-children {
    display: none;
}

/* TOC */
.toc {
    list-style: none;
    padding-left: 0;
}

.toc a {
    display: block;
    padding: 6px 12px;
    color: #57606a;
    text-decoration: none;
    border-radius: 6px;
    font-size: 13px;
}

.toc a:hover {
    background: #eaeef2;
    color: #24292f;
}

.toc .toc-h1 a {
    padding-left: 8px;
    font-weight: 600;
}

.toc .toc-h2 a {
    padding-left: 20px;
}

.toc .toc-h3 a {
    padding-left: 36px;
}

/* Content */
#content-area {
    flex: 1;
    overflow-y: auto;
    padding: 40px;
}

.markdown-body {
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Headings */
.markdown-body h1 {
    font-size: 2em;
    border-bottom: 1px solid #d0d7de;
    padding-bottom: 0.3em;
    margin: 1.5em 0 0.5em 0;
}

.markdown-body h1:first-child {
    margin-top: 0;
}

.markdown-body h2 {
    font-size: 1.5em;
    margin: 1.2em 0 0.5em 0;
    padding: 8px 0;
    scroll-margin-top: 20px;
}

.markdown-body h3 {
    font-size: 1.25em;
    margin: 1em 0 0.4em 0;
    scroll-margin-top: 20px;
}

/* Paragraphs */
.markdown-body p {
    margin: 0 0 1.2em 0;
    line-height: 1.6;
}

.markdown-body p:last-child {
    margin-bottom: 0;
}

/* LISTS - FIXED: Equal spacing for all levels */
.markdown-body ul,
.markdown-body ol {
    margin: 0.5em 0 !important;
    padding-left: 1.5em !important;
}

.markdown-body li {
    margin: 0.25em 0 !important;
    padding: 0 !important;
    line-height: 1.6;
}

/* Nested lists - same spacing, just indentation */
.markdown-body ul ul,
.markdown-body ol ol,
.markdown-body ul ol,
.markdown-body ol ul {
    margin: 0 !important;
    padding-left: 1.5em !important;
}

/* Consistent spacing around nested lists */
.markdown-body li > ul,
.markdown-body li > ol {
    margin-top: 0.25em !important;
    margin-bottom: 0.25em !important;
}

/* Blockquotes */
.markdown-body blockquote {
    border-left: 4px solid #d0d7de;
    padding-left: 16px;
    margin: 1em 0;
    color: #57606a;
}

.markdown-body blockquote p {
    margin: 0.5em 0;
}

/* Tables */
.markdown-body table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 1.2em 0;
}

.markdown-body th,
.markdown-body td {
    padding: 8px 12px;
    border: 1px solid #d0d7de;
}

.markdown-body thead tr {
    background-color: #f6f8fa;
}

.markdown-body tbody tr:nth-child(even) {
    background-color: #f6f8fa;
}

/* Code */
.markdown-body code {
    background: #f6f8fa;
    padding: 0.2em 0.4em;
    border-radius: 6px;
    font-family: monospace;
    font-size: 0.9em;
}

.markdown-body pre {
    background: #f6f8fa;
    padding: 16px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 1.2em 0;
}

.markdown-body pre code {
    background: none;
    padding: 0;
}

/* Links */
.markdown-body a {
    color: #0969da;
    text-decoration: none;
}

.markdown-body a:hover {
    text-decoration: underline;
}

/* Horizontal Rule */
.markdown-body hr {
    margin: 1.5em 0;
    border: 0;
    border-top: 1px solid #d0d7de;
}

/* Images */
.markdown-body img {
    max-width: 100%;
    margin: 0.5em 0;
}

/* Line breaks - preserve spacing for sortable lines */
.markdown-body br {
    display: inline;
    line-height: normal;
}

/* ============================================ */
/* MOBILE LAYOUT (768px and below)              */
/* ============================================ */

.mobile-layout {
    flex-direction: column !important;
}

.mobile-layout .left-panel-container {
    flex-shrink: 0 !important;
    border-bottom: 1px solid #d0d7de;
}

.mobile-layout #left-panel {
    width: 100% !important;
    height: auto !important;
    min-height: 200px !important;
    max-height: 40vh !important;
    border-right: none !important;
}

.mobile-layout .resize-handle {
    display: none !important;
}

.mobile-layout #content-area {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 16px !important;
    min-height: 0 !important;
}

.mobile-layout .file-item,
.mobile-layout .folder-item,
.mobile-layout .toggle-btn {
    padding: 10px 12px !important;
    font-size: 16px !important;
}

.mobile-layout .toc a {
    padding: 8px 12px !important;
    font-size: 14px !important;
}

.mobile-layout .markdown-body {
    font-size: 14px !important;
}

.mobile-layout .markdown-body h1 {
    font-size: 1.5em !important;
    margin: 1em 0 0.4em 0 !important;
}

.mobile-layout .markdown-body h2 {
    font-size: 1.3em !important;
    margin: 0.8em 0 0.4em 0 !important;
}

.mobile-layout .markdown-body p {
    margin-bottom: 1em !important;
}

/* Mobile list spacing - matches desktop exactly */
.mobile-layout .markdown-body ul,
.mobile-layout .markdown-body ol {
    margin: 0.5em 0 !important;
    padding-left: 1.5em !important;
}

.mobile-layout .markdown-body li {
    margin: 0.25em 0 !important;
}

.mobile-layout .markdown-body ul ul,
.mobile-layout .markdown-body ol ol {
    padding-left: 1.5em !important;
}

/* Debug panel always visible in mobile */
.mobile-layout ~ #debug,
body > #debug {
    display: block !important;
    flex-shrink: 0 !important;
    max-height: 80px !important;
    font-size: 9px !important;
    margin: 4px !important;
}

/* NUCLEAR OPTION - Force all list items to have equal spacing */
.markdown-body li,
.markdown-body li > * {
    margin-top: 0.25em !important;
    margin-bottom: 0.25em !important;
}

.markdown-body ul,
.markdown-body ol,
.markdown-body li > ul,
.markdown-body li > ol {
    margin-top: 0.25em !important;
    margin-bottom: 0.25em !important;
}

/* Reset any conflicting styles */
.markdown-body ul, .markdown-body ol, .markdown-body li {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Tables - Ensure borders and proper display */
.markdown-body table {
    display: table !important;
    border-collapse: collapse !important;
    width: 100% !important;
    margin: 1.2em 0 !important;
    overflow-x: auto !important;
}

.markdown-body th,
.markdown-body td {
    border: 1px solid #d0d7de !important;
    padding: 8px 12px !important;
    text-align: left !important;
}

.markdown-body thead tr {
    background-color: #f6f8fa !important;
    border-bottom: 2px solid #d0d7de !important;
}

.markdown-body tbody tr:nth-child(even) {
    background-color: #f6f8fa !important;
}

/* Math rendering - ensure formulas are readable */
.markdown-body .katex {
    font-size: 1.1em;
}

.markdown-body .katex-display {
    margin: 1em 0;
    overflow-x: auto;
    overflow-y: hidden;
}