:root {
--background: #f5f6f8;
--surface: #ffffff;
--surface-secondary: #f0f1f3;
--border: #d9dce1;
--text: #202124;
--text-secondary: #62666d;
--accent: #2563eb;
--accent-hover: #1d4ed8;
--danger: #c62828;
--code-background: #f1f3f5;
--quote-background: #f5f7fa;
--quote-border: #9ca3af;
--shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

html[data-theme="dark"] {
--background: #17181a;
--surface: #202124;
--surface-secondary: #2a2c30;
--border: #3a3d42;
--text: #e8eaed;
--text-secondary: #a7abb2;
--accent: #6ea8fe;
--accent-hover: #8ab4f8;
--danger: #ff6b6b;
--code-background: #292b2f;
--quote-background: #25272b;
--quote-border: #70757d;
--shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

* {
  box-sizing: border-box;
  }

html,
body {
margin: 0;
width: 100%;
height: 100%;
}

body {
font-family:
Inter,
"Segoe UI",
Arial,
sans-serif;


background: var(--background);
color: var(--text);
overflow: hidden;


}

button {
font: inherit;
}

.app {
display: flex;
flex-direction: column;
width: 100%;
height: 100vh;
}

/* --------------------------------------------------
TOP BAR
-------------------------------------------------- */

.topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;


height: 64px;
padding: 0 18px;

background: var(--surface);
border-bottom: 1px solid var(--border);
box-shadow: var(--shadow);


}

.brand {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}

.brand-mark {
display: flex;
align-items: center;
justify-content: center;


width: 34px;
height: 34px;

border-radius: 8px;

background: var(--accent);
color: white;

font-weight: 700;
font-size: 17px;


}

.brand-title {
font-size: 15px;
font-weight: 600;
}

.brand-subtitle {
margin-top: 2px;


color: var(--text-secondary);
font-size: 11px;


}

.toolbar {
display: flex;
align-items: center;
gap: 7px;
}

.toolbar-button,
.small-button {
border: 1px solid var(--border);
border-radius: 6px;


background: var(--surface);
color: var(--text);

cursor: pointer;

transition:
    background 0.15s,
    border-color 0.15s;


}

.toolbar-button {
padding: 7px 11px;
font-size: 12px;
}

.small-button {
padding: 5px 9px;
font-size: 11px;
}

.toolbar-button:hover,
.small-button:hover {
background: var(--surface-secondary);
}

.toolbar-button:focus-visible,
.small-button:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 1px;
}

.toolbar-button.danger:hover {
color: var(--danger);
border-color: var(--danger);
}

/* --------------------------------------------------
WORKSPACE
-------------------------------------------------- */

.workspace {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;


flex: 1;
min-height: 0;

background: var(--border);


}

.panel {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;


background: var(--surface);


}

.panel-header {
display: flex;
align-items: center;
justify-content: space-between;


height: 43px;
min-height: 43px;

padding: 0 13px;

border-bottom: 1px solid var(--border);
background: var(--surface);


}

.panel-title {
font-size: 12px;
font-weight: 600;
}

.panel-info {
margin-left: 8px;
color: var(--text-secondary);
font-size: 11px;
}

.panel-actions {
display: flex;
gap: 6px;
}

/* --------------------------------------------------
EDITOR
-------------------------------------------------- */

#markdownInput {
width: 100%;
height: 100%;


flex: 1;

padding: 20px;

border: 0;
outline: 0;

resize: none;

background: var(--surface);
color: var(--text);

font-family:
    "Cascadia Code",
    Consolas,
    "Courier New",
    monospace;

font-size: 14px;
line-height: 1.65;

tab-size: 4;


}

#markdownInput::placeholder {
color: var(--text-secondary);
}

.statusbar {
display: flex;
justify-content: space-between;


padding: 6px 12px;

border-top: 1px solid var(--border);

color: var(--text-secondary);
font-size: 10px;


}

/* --------------------------------------------------
PREVIEW
-------------------------------------------------- */

#preview {
flex: 1;
overflow: auto;


padding: 28px 34px;

line-height: 1.65;


}

/* --------------------------------------------------
MARKDOWN TYPOGRAPHY
-------------------------------------------------- */

.markdown-body {
font-size: 15px;
}

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

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
margin-top: 1.5em;
margin-bottom: 0.6em;


line-height: 1.25;


}

.markdown-body h1 {
padding-bottom: 0.3em;


border-bottom: 1px solid var(--border);

font-size: 2em;


}

.markdown-body h2 {
padding-bottom: 0.25em;


border-bottom: 1px solid var(--border);

font-size: 1.55em;


}

.markdown-body h3 {
font-size: 1.3em;
}

.markdown-body h4 {
font-size: 1.1em;
}

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

.markdown-body a {
color: var(--accent);
text-decoration: none;
}

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

.markdown-body strong {
font-weight: 700;
}

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

.markdown-body del {
opacity: 0.7;
}

.markdown-body ul,
.markdown-body ol {
margin-top: 0;
margin-bottom: 1em;
padding-left: 2em;
}

.markdown-body li {
margin: 0.25em 0;
}

.markdown-body li > ul,
.markdown-body li > ol {
margin-bottom: 0;
}

/* --------------------------------------------------
CHECKBOXES
-------------------------------------------------- */

.markdown-body input[type="checkbox"] {
width: 15px;
height: 15px;


margin-right: 7px;

vertical-align: -2px;

accent-color: var(--accent);


}

/* --------------------------------------------------
BLOCKQUOTES
-------------------------------------------------- */

.markdown-body blockquote {
margin: 1em 0;
padding: 10px 16px;


border-left: 4px solid var(--quote-border);

background: var(--quote-background);

color: var(--text-secondary);


}

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

/* --------------------------------------------------
CODE
-------------------------------------------------- */

.markdown-body code {
padding: 2px 5px;


border-radius: 4px;

background: var(--code-background);

font-family:
    "Cascadia Code",
    Consolas,
    monospace;

font-size: 0.9em;


}

.markdown-body pre {
overflow-x: auto;


margin: 1em 0;
padding: 15px;

border: 1px solid var(--border);
border-radius: 7px;

background: var(--code-background);


}

.markdown-body pre code {
padding: 0;


background: transparent;

font-size: 13px;
line-height: 1.55;


}

/* --------------------------------------------------
TABLES
-------------------------------------------------- */

.markdown-body table {
width: 100%;


margin: 1em 0;

border-collapse: collapse;

display: block;
overflow-x: auto;


}

.markdown-body th,
.markdown-body td {
padding: 7px 10px;


border: 1px solid var(--border);

text-align: left;


}

.markdown-body th {
background: var(--surface-secondary);
font-weight: 600;
}

/* --------------------------------------------------
IMAGES
-------------------------------------------------- */

.markdown-body img {
max-width: 100%;
height: auto;


border-radius: 6px;


}

/* --------------------------------------------------
HORIZONTAL RULE
-------------------------------------------------- */

.markdown-body hr {
margin: 2em 0;


border: 0;
border-top: 1px solid var(--border);


}

/* --------------------------------------------------
LINKS / BUTTON-LIKE ELEMENTS
-------------------------------------------------- */

.markdown-body a[href^="http"]::after {
content: " ↗";
font-size: 0.8em;
}

/* --------------------------------------------------
MOBILE
-------------------------------------------------- */

@media (max-width: 800px) {


body {
    overflow: auto;
}

.app {
    height: auto;
    min-height: 100vh;
}

.topbar {
    height: auto;
    min-height: 64px;
    padding: 10px 12px;

    flex-wrap: wrap;
}

.toolbar {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
}

.workspace {
    grid-template-columns: 1fr;
    height: auto;
}

.panel {
    min-height: 500px;
}

#preview {
    padding: 22px;
}


}