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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #f5f5f5;
    color: #333;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

.header {
    text-align: center;
    margin-bottom: 30px;
}

.header h1 {
    color: #2c3e50;
    font-size: 2.5rem;
    font-weight: 300;
}

.editor-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    height: calc(100vh - 150px);
}

.editor-panel, .preview-panel {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.editor-panel h3, .preview-panel h3 {
    margin-bottom: 15px;
    color: #34495e;
    font-weight: 500;
}

.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.toggle-btn {
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 200ms ease;
    box-shadow: 0 2px 4px rgba(52, 152, 219, 0.2);
}

.toggle-btn:hover {
    background-color: #2980b9;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
}

.toggle-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(52, 152, 219, 0.2);
}

#markdown-input {
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 14px;
    line-height: 1.6;
    resize: none;
    outline: none;
    background-color: #fafafa;
}

#markdown-input:focus {
    border-color: #3498db;
    background-color: white;
}

#html-output, #raw-html-output {
    flex: 1;
    overflow-y: auto;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 15px;
    background-color: white;
    line-height: 1.6;
}

#raw-html-output {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.875rem;
    white-space: pre-wrap;
    word-wrap: break-word;
    background-color: #f8f9fa;
    color: #333;
    border-left: 4px solid #3498db;
}

/* Markdown preview styles */
#html-output h1, #html-output h2, #html-output h3, #html-output h4, #html-output h5, #html-output h6 {
    margin-top: 24px;
    margin-bottom: 16px;
    font-weight: 600;
    line-height: 1.25;
}

#html-output h1 { font-size: 2em; border-bottom: 1px solid #eaecef; padding-bottom: 0.3em; }
#html-output h2 { font-size: 1.5em; border-bottom: 1px solid #eaecef; padding-bottom: 0.3em; }
#html-output h3 { font-size: 1.25em; }

#html-output p {
    margin-bottom: 16px;
}

#html-output code {
    background-color: #f6f8fa;
    border-radius: 3px;
    font-size: 85%;
    margin: 0;
    padding: 0.2em 0.4em;
}

#html-output pre {
    background-color: #f6f8fa;
    border-radius: 6px;
    font-size: 0.875rem;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    line-height: 1.4;
    overflow: auto;
    padding: 16px;
}

#html-output pre code {
    background-color: transparent;
    border: 0;
    display: inline;
    line-height: inherit;
    margin: 0;
    max-width: auto;
    overflow: visible;
    padding: 0;
}

#html-output blockquote {
    border-left: 0.25em solid #dfe2e5;
    color: #6a737d;
    padding: 0 1em;
    margin-bottom: 16px;
}

#html-output table {
    border-collapse: collapse;
    margin-bottom: 16px;
    width: 100%;
}

#html-output table th, #html-output table td {
    border: 1px solid #dfe2e5;
    padding: 6px 13px;
}

#html-output table th {
    background-color: #f6f8fa;
    font-weight: 600;
}

#html-output ul, #html-output ol {
    margin-bottom: 16px;
    padding-left: 2em;
}

#html-output li {
    margin-bottom: 0.25em;
}

/* Task list styles */
#html-output .task-list-item {
    list-style-type: none;
    margin-left: -1.5em;
}

#html-output .task-list-item input {
    margin-right: 0.5em;
}

/* Pymdown extensions styles */
#html-output .critic {
    font-family: inherit;
}

#html-output .critic.comment {
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 3px;
    padding: 2px 4px;
}

#html-output .critic.addition {
    background-color: #d4edda;
    text-decoration: none;
}

#html-output .critic.deletion {
    background-color: #f8d7da;
    text-decoration: line-through;
}


#html-output .keys kbd {
    background-color: #fafbfc;
    border: 1px solid #c6cbd1;
    border-bottom-color: #959da5;
    border-radius: 3px;
    box-shadow: inset 0 -1px 0 #959da5;
    color: #444d56;
    display: inline-block;
    font-family: monospace;
    font-size: 11px;
    line-height: 10px;
    padding: 3px 5px;
    vertical-align: middle;
}

/* Mermaid diagram styles */
.mermaid {
    text-align: center;
    margin: 16px 0;
}

/* Tab styles for pymdownx.tabbed */
.tabbed-set {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin: 1em 0;
    border-radius: 0.1rem;
}

.tabbed-set > input {
    display: none;
}

.tabbed-set label {
    width: auto;
    padding: 0.9375em 1.25em 0.78125em;
    font-weight: 700;
    font-size: 0.84em;
    white-space: nowrap;
    border-bottom: 0.15rem solid transparent;
    border-top-left-radius: 0.1rem;
    border-top-right-radius: 0.1rem;
    cursor: pointer;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    background-color: rgba(0, 0, 0, 0.05);
    color: #666;
}

.tabbed-set .tabbed-content {
    width: 100%;
    display: none;
    box-shadow: 0 -.05rem #ddd;
    opacity: 0;
    transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.tabbed-set input {
    position: absolute;
    opacity: 0;
}

.tabbed-set input:checked:nth-child(n+1) + label {
    color: #3498db;
    border-color: #3498db;
    background-color: white;
    transform: translateY(-1px);
}

@media screen {
    .tabbed-set input:nth-child(n+1):checked + label + .tabbed-content {
        order: 99;
        display: block;
        opacity: 1;
    }
}

@media print {
    .tabbed-content {
        display: contents;
    }
}

/* Admonition styles */
.admonition {
    margin: 1.5625em 0;
    padding: 0 0.75rem;
    overflow: hidden;
    page-break-inside: avoid;
    border-left: 0.25rem solid #448aff;
    border-radius: 0.125rem;
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.05), 0 0 0.0625rem rgba(0,0,0,0.1);
}

.admonition > :last-child {
    margin-bottom: 0.75rem;
}

.admonition-title {
    position: relative;
    margin: 0 -0.75rem 0.5rem;
    padding: 0.5rem 0.75rem 0.5rem 2.5rem;
    font-weight: 700;
    background-color: rgba(68, 138, 255, 0.1);
    border-bottom: 0.0625rem solid rgba(68, 138, 255, 0.2);
}

.admonition-title::before {
    position: absolute;
    left: 0.75rem;
    width: 1.25rem;
    height: 1.25rem;
    background-color: #448aff;
    mask-repeat: no-repeat;
    mask-size: contain;
    content: "";
}

/* Note admonition */
.admonition.note {
    border-color: #448aff;
}

.admonition.note > .admonition-title {
    background-color: rgba(68, 138, 255, 0.1);
    border-color: rgba(68, 138, 255, 0.2);
}

.admonition.note > .admonition-title::before {
    background-color: #448aff;
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2Z'/%3E%3C/svg%3E");
}

/* Warning admonition */
.admonition.warning {
    border-color: #ff9100;
}

.admonition.warning > .admonition-title {
    background-color: rgba(255, 145, 0, 0.1);
    border-color: rgba(255, 145, 0, 0.2);
}

.admonition.warning > .admonition-title::before {
    background-color: #ff9100;
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 14h-2V9h2m0 9h-2v-2h2M1 21h22L12 2 1 21Z'/%3E%3C/svg%3E");
}

/* Danger/Error admonition */
.admonition.danger {
    border-color: #ff5252;
}

.admonition.danger > .admonition-title {
    background-color: rgba(255, 82, 82, 0.1);
    border-color: rgba(255, 82, 82, 0.2);
}

.admonition.danger > .admonition-title::before {
    background-color: #ff5252;
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 15h2v2h-2v-2m0-8h2v6h-2V7m.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3E%3C/svg%3E");
}

/* Success admonition */
.admonition.success {
    border-color: #00c853;
}

.admonition.success > .admonition-title {
    background-color: rgba(0, 200, 83, 0.1);
    border-color: rgba(0, 200, 83, 0.2);
}

.admonition.success > .admonition-title::before {
    background-color: #00c853;
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 7 9 19l-5.5-5.5 1.41-1.41L9 16.17 19.59 5.59 21 7Z'/%3E%3C/svg%3E");
}

/* Info admonition */
.admonition.info {
    border-color: #00b0ff;
}

.admonition.info > .admonition-title {
    background-color: rgba(0, 176, 255, 0.1);
    border-color: rgba(0, 176, 255, 0.2);
}

.admonition.info > .admonition-title::before {
    background-color: #00b0ff;
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2Z'/%3E%3C/svg%3E");
}

/* Tip admonition */
.admonition.tip {
    border-color: #00bcd4;
}

.admonition.tip > .admonition-title {
    background-color: rgba(0, 188, 212, 0.1);
    border-color: rgba(0, 188, 212, 0.2);
}

.admonition.tip > .admonition-title::before {
    background-color: #00bcd4;
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7z'/%3E%3C/svg%3E");
}


/* Code block styling with table-style line numbers */
#html-output .highlight {
    position: relative;
    margin-bottom: 16px;
    border-radius: 6px;
    overflow: hidden;
}

#html-output .highlighttable {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    background-color: #f6f8fa;
}

#html-output .highlighttable tr {
    display: table-row;
}

#html-output .highlighttable td {
    padding: 0;
    vertical-align: top;
}

/* Line numbers column */
#html-output .highlighttable .linenos {
    width: 1%;
    background-color: #f6f8fa;
    border-right: 1px solid #d1d9e0;
    user-select: none;
}

#html-output .highlighttable .linenos .linenodiv {
    padding: 16px 12px 16px 16px;
}

#html-output .highlighttable .linenos .linenodiv pre {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    font-size: 0.875rem;
    line-height: 1.4;
    color: #6e7681;
    text-align: right;
}

#html-output .highlighttable .linenos .normal {
    color: #6e7681;
}

/* Code block title/filename */
#html-output .highlighttable .filename {
    background-color: #2c3e50;
    color: white;
    padding: 6px 16px;
    font-weight: 600;
    font-size: 0.8rem;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    border-bottom: 1px solid #34495e;
    position: relative;
    text-align: left;
}

#html-output .highlighttable .filename .filename {
    color: #ecf0f1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}


/* Copy button */
#html-output .highlighttable .filename .copy-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: white;
    padding: 4px 8px;
    font-size: 11px;
    cursor: pointer;
    transition: all 200ms ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

#html-output .highlighttable .filename .copy-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

#html-output .highlighttable .filename .copy-btn::before {
    content: "";
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Code column */
#html-output .highlighttable .code {
    width: 99%;
}

#html-output .highlighttable .code > div {
    overflow-x: auto;
}

#html-output .highlighttable .code pre {
    margin: 0;
    padding: 16px;
    background-color: white;
    border: none;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    font-size: 0.875rem;
    line-height: 1.4;
}

#html-output .highlighttable .code code {
    background: transparent;
    padding: 0;
    border: none;
}



@media (max-width: 768px) {
    .editor-container {
        grid-template-columns: 1fr;
        height: auto;
    }
    
    .editor-panel, .preview-panel {
        height: 400px;
    }
}