/* markdown.css - Complete Markdown Styling */

:root {
    --markdown-primary: #6a11cb;
    --markdown-primary-light: #8a2be2;
    --markdown-primary-dark: #5a0cb3;
    --markdown-secondary: #2575fc;
    --markdown-accent: #ff6b6b;
    --markdown-text: #1a1a2e;
    --markdown-text-secondary: #4a5568;
    --markdown-text-muted: #718096;
    --markdown-bg: #ffffff;
    --markdown-bg-secondary: #f7fafc;
    --markdown-border: #e2e8f0;
    --markdown-border-light: #edf2f7;
    --markdown-code-bg: #f5f5f5;
    --markdown-code-text: #d63384;
    --markdown-pre-bg: #282c34;
    --markdown-pre-text: #abb2bf;
    --markdown-blockquote-border: #6a11cb;
    --markdown-blockquote-bg: #f8fafc;
    --markdown-table-header-bg: #f7fafc;
    --markdown-table-border: #e2e8f0;
    --markdown-link-color: #6a11cb;
    --markdown-link-hover: #8a2be2;
    --markdown-heading-weight: 700;
    --markdown-radius: 8px;
    --markdown-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.markdown-body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: var(--markdown-text);
    background-color: var(--markdown-bg);
    max-width: 100%;
    word-wrap: break-word;
}

.markdown-body > *:first-child {
    margin-top: 0 !important;
}

.markdown-body > *:last-child {
    margin-bottom: 0 !important;
}

.markdown-body p,
.markdown-body blockquote,
.markdown-body ul,
.markdown-body ol,
.markdown-body dl,
.markdown-body table,
.markdown-body pre,
.markdown-body details {
    margin-top: 0;
    margin-bottom: 1rem;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: var(--markdown-heading-weight);
    line-height: 1.3;
    color: var(--markdown-text);
    scroll-margin-top: 80px;
}

.markdown-body h1 {
    font-size: 2.5rem;
    border-bottom: 2px solid var(--markdown-border);
    padding-bottom: 0.5rem;
}

.markdown-body h2 {
    font-size: 2rem;
    border-bottom: 1px solid var(--markdown-border);
    padding-bottom: 0.3rem;
}

.markdown-body h3 {
    font-size: 1.5rem;
}

.markdown-body h4 {
    font-size: 1.25rem;
}

.markdown-body h5 {
    font-size: 1.125rem;
}

.markdown-body h6 {
    font-size: 1rem;
    color: var(--markdown-text-muted);
}

.markdown-body a {
    color: var(--markdown-link-color);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.markdown-body a:hover {
    color: var(--markdown-link-hover);
    border-bottom-color: var(--markdown-link-hover);
}

.markdown-body strong {
    font-weight: 600;
    color: var(--markdown-text);
}

.markdown-body em {
    font-style: italic;
}

.markdown-body del {
    text-decoration: line-through;
}

.markdown-body code {
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    font-size: 0.875em;
    padding: 0.2em 0.4em;
    background-color: var(--markdown-code-bg);
    color: var(--markdown-code-text);
    border-radius: var(--markdown-radius);
    white-space: break-spaces;
    word-break: break-word;
}

.markdown-body pre {
    background-color: var(--markdown-pre-bg);
    border-radius: var(--markdown-radius);
    padding: 1rem;
    overflow-x: auto;
    line-height: 1.45;
}

.markdown-body pre code {
    background-color: transparent;
    color: var(--markdown-pre-text);
    padding: 0;
    font-size: 0.875em;
    white-space: pre;
    word-break: normal;
    word-wrap: normal;
    display: block;
    overflow-x: auto;
}

.markdown-body blockquote {
    margin: 0;
    padding: 0.75rem 1rem;
    background-color: var(--markdown-blockquote-bg);
    border-left: 4px solid var(--markdown-blockquote-border);
    color: var(--markdown-text-secondary);
}

.markdown-body blockquote > *:first-child {
    margin-top: 0;
}

.markdown-body blockquote > *:last-child {
    margin-bottom: 0;
}

.markdown-body ul,
.markdown-body ol {
    padding-left: 1.5rem;
}

.markdown-body ul {
    list-style-type: disc;
}

.markdown-body ol {
    list-style-type: decimal;
}

.markdown-body li {
    margin-bottom: 0.25rem;
}

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

.markdown-body li p {
    margin-bottom: 0.5rem;
}

.markdown-body table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    display: block;
    overflow-x: auto;
}

.markdown-body thead {
    background-color: var(--markdown-table-header-bg);
}

.markdown-body th,
.markdown-body td {
    padding: 0.75rem;
    border: 1px solid var(--markdown-table-border);
    text-align: left;
}

.markdown-body th {
    font-weight: 600;
    background-color: var(--markdown-table-header-bg);
}

.markdown-body tr:nth-child(even) {
    background-color: var(--markdown-bg-secondary);
}

.markdown-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--markdown-radius);
}

.markdown-body hr {
    height: 2px;
    background: linear-gradient(90deg, var(--markdown-border), transparent);
    border: none;
    margin: 2rem 0;
}

.markdown-body .task-list-item {
    list-style-type: none;
}

.markdown-body .task-list-item input {
    margin-right: 0.5rem;
}

.markdown-body details {
    padding: 0.75rem;
    border: 1px solid var(--markdown-border);
    border-radius: var(--markdown-radius);
}

.markdown-body summary {
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.markdown-body summary:hover {
    color: var(--markdown-primary);
}

.markdown-body .footnote {
    font-size: 0.875em;
    vertical-align: super;
    line-height: none;
}

.markdown-body .footnotes {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--markdown-border);
    font-size: 0.875em;
}

.markdown-body .footnotes ol {
    padding-left: 1.5rem;
}

.markdown-body .footnotes li {
    margin-bottom: 0.5rem;
}

.markdown-body .footnote-ref {
    color: var(--markdown-primary);
}

.markdown-body .footnote-backref {
    color: var(--markdown-text-muted);
    text-decoration: none;
    margin-left: 0.25rem;
}

.markdown-body .footnote-backref:hover {
    color: var(--markdown-primary);
}

.markdown-body abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
}

.markdown-body kbd {
    display: inline-block;
    padding: 0.2rem 0.4rem;
    font-family: monospace;
    font-size: 0.85em;
    color: var(--markdown-text);
    background-color: var(--markdown-bg-secondary);
    border: 1px solid var(--markdown-border);
    border-radius: 3px;
    box-shadow: inset 0 -1px 0 var(--markdown-border);
}

.markdown-body mark {
    background-color: #fef08a;
    color: #1a1a2e;
    padding: 0.1rem 0.2rem;
    border-radius: 3px;
}

.markdown-body .highlight {
    background: linear-gradient(120deg, rgba(106, 17, 203, 0.1) 0%, rgba(37, 117, 252, 0.1) 100%);
    padding: 0.1rem 0.2rem;
    border-radius: 3px;
}

.markdown-body .admonition {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    border-left-width: 4px;
    border-left-style: solid;
    border-radius: var(--markdown-radius);
    background-color: var(--markdown-bg-secondary);
}

.markdown-body .admonition.note {
    border-left-color: #4299e1;
}

.markdown-body .admonition.warning {
    border-left-color: #ed8936;
}

.markdown-body .admonition.danger {
    border-left-color: #f56565;
}

.markdown-body .admonition.tip {
    border-left-color: #48bb78;
}

.markdown-body .admonition-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.markdown-body .admonition.note .admonition-title {
    color: #4299e1;
}

.markdown-body .admonition.warning .admonition-title {
    color: #ed8936;
}

.markdown-body .admonition.danger .admonition-title {
    color: #f56565;
}

.markdown-body .admonition.tip .admonition-title {
    color: #48bb78;
}

.markdown-body .admonition > *:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .markdown-body {
        font-size: 15px;
    }
    
    .markdown-body h1 {
        font-size: 2rem;
    }
    
    .markdown-body h2 {
        font-size: 1.5rem;
    }
    
    .markdown-body h3 {
        font-size: 1.25rem;
    }
    
    .markdown-body pre {
        font-size: 0.8rem;
    }
}

@media print {
    .markdown-body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
        background: #fff;
    }
    
    .markdown-body h1,
    .markdown-body h2,
    .markdown-body h3 {
        page-break-after: avoid;
        color: #000;
    }
    
    .markdown-body pre,
    .markdown-body blockquote {
        page-break-inside: avoid;
    }
    
    .markdown-body a {
        color: #000;
        text-decoration: underline;
    }
    
    .markdown-body a[href]:after {
        content: " (" attr(href) ")";
        font-size: 90%;
    }
    
    .markdown-body a[href^="#"]:after {
        content: "";
    }
}