notely/frontend/src/assets/styles/main.css

:root {
    --color-primary: #667eea;
    --color-primary-strong: #4f46a5;
    --color-text: #333333;
    --color-text-muted: #6c757d;
    --color-bg: #f8f9fa;
    --color-surface: #ffffff;
    --color-surface-muted: #f1f3f5;
    --color-border: #dee2e6;
    --color-info: #748ffc;
    --color-code-bg: #353943;
    --color-code-text: #f9fafb;
    --color-scroll-track: #f1f1f1;
    --color-scroll-thumb: #888888;
    --color-scroll-thumb-hover: #555555;

    --primary-color: var(--color-primary);
    --secondary-color: var(--color-primary-strong);
    --text-color: var(--color-text);
    --bg-color: var(--color-bg);
    --border-color: var(--color-border);
}

[data-bs-theme="dark"] {
    --color-text: #e2e8f0;
    --color-text-muted: #94a3b8;
    --color-bg: #1a1d23;
    --color-surface: #21252e;
    --color-surface-muted: #2d3748;
    --color-border: #3a3f4b;
    --color-info: #7aa2f7;
    --color-code-bg: #2d3748;
    --color-code-text: #e2e8f0;
    --color-scroll-track: #2d3748;
    --color-scroll-thumb: #4a5568;
    --color-scroll-thumb-hover: #718096;

    --text-color: var(--color-text);
    --bg-color: var(--color-bg);
    --border-color: var(--color-border);
}

[data-bs-theme="dark"] body {
    background-color: var(--color-bg);
    color: var(--color-text);
}

[data-bs-theme="dark"] .sidebar {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
}

[data-bs-theme="dark"] .toolbar {
    background-color: var(--color-surface);
    border-color: var(--color-border) !important;
}

[data-bs-theme="dark"] .main-content {
    background-color: var(--color-bg);
}

[data-bs-theme="dark"] .markdown-body table {
    background: var(--color-surface);
}

[data-bs-theme="dark"] .markdown-body th {
    background: var(--color-surface-muted);
}

[data-bs-theme="dark"] .markdown-body tr:nth-child(even) td {
    background: #232830;
}

[data-bs-theme="dark"] .markdown-body blockquote {
    background: #1e2430;
    color: #a0aec0;
}

[data-bs-theme="dark"] .markdown-body :not(pre) > code {
    background: var(--color-surface-muted);
    color: var(--color-text);
}

[data-bs-theme="dark"] .markdown-body pre code {
    background: transparent;
    color: inherit;
}

[data-bs-theme="dark"] .markdown-body pre {
    background: var(--color-code-bg);
    color: var(--color-code-text);
}

[data-bs-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--color-scroll-track);
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--color-scroll-thumb);
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--color-scroll-thumb-hover);
}

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

body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-color);
    background-color: var(--bg-color);
}

html,
body,
#app {
    height: 100%;
    width: 100%;
}

.markdown-body table {
    width: 100%;
    margin: 1rem 0;
    border-collapse: collapse;
    border-spacing: 0;
    background: var(--color-surface);
}

.markdown-body th,
.markdown-body td {
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--border-color);
    text-align: left;
    vertical-align: top;
}

.markdown-body th {
    font-weight: 600;
    background: #f3f6fb;
}

.markdown-body tr:nth-child(even) td {
    background: #fbfcfe;
}

.markdown-body table code {
    white-space: nowrap;
}

.markdown-body blockquote {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    border-left: 4px solid var(--color-info);
    background: #f8f9ff;
    color: #334155;
}

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

.markdown-body pre {
    margin: 1rem 0;
    padding: 1rem;
    border-radius: 0.75rem;
    background: var(--color-code-bg);
    color: var(--color-code-text);
    overflow-x: auto;
}

.markdown-body pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.markdown-body code {
    font-family: "Courier New", monospace;
    font-size: 0.95em;
    padding: 0.1rem 0.3rem;
    border-radius: 0.35rem;
    background: var(--color-surface-muted);
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-scroll-track);
}

::-webkit-scrollbar-thumb {
    background: var(--color-scroll-thumb);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-scroll-thumb-hover);
}