:root {
        --font-mono: 'SF Mono', 'Menlo', 'Consolas', ui-monospace, monospace;
        --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

        --bg: #1e1f22;
        --bg-editor: #1a1b1e;
        --bg-toolbar: #26272b;
        --bg-panel: #212226;
        --bg-card: #26272b;
        --border: #34353a;
        --text: #d7d8dc;
        --text-dim: #6d6f77;
        --text-faint: #4b4d54;
        --accent: #5ba7f7;
        --accent-soft: #5ba7f733;
        --danger: #e56a6a;
        --shadow: rgba(0,0,0,0.35);

        --tok-heading: #e3c17a;
        --tok-bold: #f0f1f4;
        --tok-italic: #d7d8dc;
        --tok-code-fg: #7ec9a3;
        --tok-code-bg: #2a2b30;
        --tok-quote: #9aa0ac;
        --tok-link: #5ba7f7;
        --tok-math: #c99ef0;
        --tok-mark: #5c5e66;
        --tok-hr: #4b4d54;
        --tok-table: #d29b6c;
    }

    html.light {
        --bg: #f5f5f4;
        --bg-editor: #ffffff;
        --bg-toolbar: #eeeeec;
        --bg-panel: #fbfbfa;
        --bg-card: #ffffff;
        --border: #dcdcda;
        --text: #26272a;
        --text-dim: #8a8c92;
        --text-faint: #b4b5ba;
        --accent: #1f6feb;
        --accent-soft: #1f6feb22;
        --danger: #c9433f;
        --shadow: rgba(0,0,0,0.12);

        --tok-heading: #9a6b12;
        --tok-bold: #101113;
        --tok-italic: #26272a;
        --tok-code-fg: #157553;
        --tok-code-bg: #eef2ef;
        --tok-quote: #6b6e76;
        --tok-link: #1f6feb;
        --tok-math: #8438b8;
        --tok-mark: #b4b5ba;
        --tok-hr: #cfcfcd;
        --tok-table: #a05a1f;
    }

    * { box-sizing: border-box; }

    html, body {
        margin: 0;
        height: 100%;
        font-family: var(--font-ui);
        background: var(--bg);
        color: var(--text);
    }

    body { display: flex; flex-direction: column; overflow: hidden; }

    button { font-family: var(--font-ui); }

    /* ================= shared toolbar bits ================= */

    .tb-btn {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 6px 10px;
        font-size: 12.5px;
        color: var(--text);
        background: transparent;
        border: 1px solid transparent;
        border-radius: 6px;
        cursor: pointer;
        white-space: nowrap;
    }
    .tb-btn:hover { background: var(--accent-soft); border-color: var(--border); }
    .tb-btn:active { transform: translateY(1px); }
    .tb-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
    .tb-btn.primary { background: var(--accent); color: #0d1117; font-weight: 600; }
    .tb-btn.primary:hover { filter: brightness(1.08); background: var(--accent); }
    .tb-btn.danger:hover { background: color-mix(in srgb, var(--danger) 15%, transparent); border-color: var(--danger); color: var(--danger); }

    .switch-label {
        display: flex; align-items: center; gap: 6px;
        font-size: 12px; color: var(--text-dim); cursor: pointer;
        padding: 4px 6px; border-radius: 6px; white-space: nowrap;
    }
    .switch-label:hover { color: var(--text); }
    .switch { position: relative; width: 30px; height: 17px; flex-shrink: 0; }
    .switch input { opacity: 0; width: 0; height: 0; }
    .switch .track { position: absolute; inset: 0; background: var(--text-faint); border-radius: 20px; transition: background .15s; }
    .switch .track::before { content: ""; position: absolute; width: 13px; height: 13px; left: 2px; top: 2px; background: var(--bg-editor); border-radius: 50%; transition: transform .15s; }
    .switch input:checked + .track { background: var(--accent); }
    .switch input:checked + .track::before { transform: translateX(13px); }

    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }

    #file-input { display: none; }

    /* ================= gallery screen ================= */

    #gallery-screen { display: flex; flex-direction: column; height: 100%; }

    #gallery-bar {
        display: flex; align-items: center; justify-content: space-between;
        padding: 12px 20px; background: var(--bg-toolbar); border-bottom: 1px solid var(--border);
        flex-shrink: 0; gap: 12px; flex-wrap: wrap;
    }
    .brand { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; }
    .brand svg { width: 20px; height: 20px; color: var(--accent); }
    .gallery-actions { display: flex; align-items: center; gap: 8px; }

    #gallery-body { flex: 1; overflow-y: auto; padding: 28px 32px 60px; }

    #gallery-empty {
        color: var(--text-faint); font-size: 13.5px; text-align: center;
        margin-top: 80px;
    }

    #gallery-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
        gap: 20px;
        max-width: 1100px;
        margin: 0 auto;
    }

    .doc-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        overflow: hidden;
        cursor: pointer;
        transition: transform .12s, box-shadow .12s, border-color .12s;
        position: relative;
    }
    .doc-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px var(--shadow); border-color: var(--accent); }

    .doc-thumb {
        height: 100px;
        padding: 12px 14px;
        font: 10.5px/1.5 var(--font-mono);
        color: var(--text-dim);
        background: var(--bg-panel);
        overflow: hidden;
        white-space: pre-wrap;
        border-bottom: 1px solid var(--border);
        position: relative;
    }
    .doc-thumb .ext-badge {
        position: absolute; bottom: 8px; right: 10px;
        font-family: var(--font-ui); font-size: 9.5px; font-weight: 700;
        letter-spacing: 0.03em; text-transform: uppercase;
        background: var(--accent); color: #0d1117;
        padding: 2px 6px; border-radius: 4px;
    }
    .doc-meta { padding: 10px 12px 12px; }
    .doc-name { font-size: 13px; font-weight: 600; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .doc-time { font-size: 11px; color: var(--text-faint); }

    .doc-menu-btn {
        position: absolute; top: 6px; right: 6px;
        width: 24px; height: 24px; border-radius: 6px;
        border: none; background: color-mix(in srgb, var(--bg-toolbar) 80%, transparent);
        color: var(--text); display: flex; align-items: center; justify-content: center;
        cursor: pointer; font-size: 15px; line-height: 1;
        opacity: 0; transition: opacity .1s;
    }
    .doc-card:hover .doc-menu-btn { opacity: 1; }

    .new-card {
        border: 1.5px dashed var(--border);
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 6px; color: var(--text-dim); min-height: 174px; background: transparent;
    }
    .new-card:hover { border-color: var(--accent); color: var(--accent); }
    .new-card svg { width: 26px; height: 26px; }

    #card-menu {
        position: fixed; z-index: 50;
        background: var(--bg-toolbar); border: 1px solid var(--border);
        border-radius: 8px; box-shadow: 0 8px 24px var(--shadow);
        padding: 4px; display: none; min-width: 140px;
    }
    #card-menu button {
        display: block; width: 100%; text-align: left; padding: 7px 10px;
        font-size: 12.5px; background: none; border: none; color: var(--text);
        border-radius: 5px; cursor: pointer;
    }
    #card-menu button:hover { background: var(--accent-soft); }
    #card-menu button.danger:hover { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }

    /* ================= new-file modal ================= */
    #modal-overlay {
        display: none; position: fixed; inset: 0; z-index: 100;
        background: rgba(0,0,0,.5);
        align-items: center; justify-content: center;
    }
    #modal-overlay.open { display: flex; }
    #new-file-modal {
        background: var(--bg-card); border: 1px solid var(--border);
        border-radius: 12px; padding: 20px; width: 340px; max-width: 90vw;
        box-shadow: 0 16px 40px var(--shadow);
    }
    #new-file-modal h3 { margin: 0 0 12px; font-size: 15px; }
    #new-file-name {
        width: 100%; box-sizing: border-box; background: var(--bg-panel);
        border: 1px solid var(--border); color: var(--text); border-radius: 7px;
        padding: 8px 10px; font-size: 13.5px; font-family: var(--font-mono); outline: none;
    }
    #new-file-name:focus { border-color: var(--accent); }
    .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
    .modal-note {
        margin: 14px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--text-faint);
        border-top: 1px solid var(--border); padding-top: 10px;
    }
    .modal-note code { font-family: var(--font-mono); background: var(--bg-panel); padding: 1px 4px; border-radius: 3px; }

    /* ================= editor screen ================= */

    #editor-screen { display: flex; flex-direction: column; height: 100%; }

    #toolbar {
        display: flex; align-items: center; gap: 6px; padding: 7px 10px;
        background: var(--bg-toolbar); border-bottom: 1px solid var(--border);
        flex-wrap: wrap; flex-shrink: 0; user-select: none;
    }
    .tb-group { display: flex; align-items: center; gap: 4px; padding: 0 8px; border-right: 1px solid var(--border); }
    .tb-group:last-child { border-right: none; }

    .seg { display: flex; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 7px; padding: 2px; }
    .seg button { border: none; background: transparent; color: var(--text-dim); font-size: 12px; padding: 5px 10px; border-radius: 5px; cursor: pointer; }
    .seg button.active { background: var(--accent); color: #0d1117; font-weight: 600; }

    #filename-wrap { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 140px; justify-content: center; }
    #filename {
        background: transparent; border: 1px solid transparent; color: var(--text);
        font-size: 12.5px; text-align: center; padding: 5px 8px; border-radius: 6px;
        min-width: 80px; max-width: 260px; font-family: var(--font-ui);
    }
    #filename:hover, #filename:focus { border-color: var(--border); background: var(--bg-panel); outline: none; }
    #save-status { font-size: 11px; color: var(--text-faint); min-width: 46px; }

    #stats { font-size: 11px; color: var(--text-faint); white-space: nowrap; padding: 0 4px; }

    #main { flex: 1; display: flex; min-height: 0; background: var(--bg-editor); }
    .pane { flex: 1; min-width: 0; position: relative; overflow: hidden; }
    #editor-pane { display: flex; flex-direction: column; }
    #preview-pane { display: none; }
    #main.split #editor-pane { border-right: 1px solid var(--border); }
    #main.split #preview-pane { display: block; }
    #main.preview-only #editor-pane { display: none; }
    #main.preview-only #preview-pane { display: block; }
    #main.edit-only #preview-pane { display: none; }

    /* ---------- Find & Replace bar ---------- */
    #find-bar {
        display: none; align-items: center; gap: 6px; flex-wrap: wrap;
        padding: 7px 10px; background: var(--bg-toolbar); border-bottom: 1px solid var(--border);
        flex-shrink: 0;
    }
    #find-bar.open { display: flex; }
    #find-bar input[type="text"], #find-input, #replace-input {
        background: var(--bg-panel); border: 1px solid var(--border); color: var(--text);
        border-radius: 6px; padding: 5px 8px; font-size: 12.5px; font-family: var(--font-ui);
        width: 150px; outline: none;
    }
    #find-input:focus, #replace-input:focus { border-color: var(--accent); }
    .find-opt {
        display: flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--text-dim);
        cursor: pointer; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px;
        font-family: var(--font-mono); user-select: none;
    }
    .find-opt input { margin: 0; }
    #find-count { font-size: 11.5px; color: var(--text-faint); min-width: 40px; text-align: center; }
    .find-icon-btn {
        width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--border);
        background: var(--bg-panel); color: var(--text); cursor: pointer; font-size: 13px;
        display: flex; align-items: center; justify-content: center;
    }
    .find-icon-btn:hover { background: var(--accent-soft); }

    /* ---------- gutter (line numbers) ---------- */
    .editor-inner { position: relative; flex: 1; min-width: 0; }

    #gutter {
        display: none;
        position: absolute; top: 0; bottom: 0; left: 0; width: 48px;
        overflow: hidden; background: var(--bg-editor); border-right: 1px solid var(--border);
        padding: 18px 8px 18px 0; box-sizing: border-box;
        font: 15px/1.65 var(--font-mono); white-space: pre;
        color: var(--text-faint); text-align: right; user-select: none; z-index: 1;
    }
    .editor-inner.with-gutter #gutter { display: block; }
    .editor-inner.with-gutter #editor { padding-left: 66px; }

    #editor {
        position: absolute; inset: 0; margin: 0; padding: 18px 22px;
        font: 15px/1.65 var(--font-mono);
        white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word;
        overflow-y: auto; box-sizing: border-box;
        color: var(--text); caret-color: var(--accent); outline: none;
    }
    #editor:empty::before {
        content: attr(data-placeholder);
        color: var(--text-faint);
        pointer-events: none;
    }
    #editor::selection, #editor *::selection { background: var(--accent-soft); }

    .md-mark { color: var(--tok-mark); }
    .md-h { font-weight: 700; color: var(--tok-heading); }
    .md-h1 { font-size: 1.55em; } .md-h2 { font-size: 1.35em; } .md-h3 { font-size: 1.18em; }
    .md-h4 { font-size: 1.08em; } .md-h5 { font-size: 1em; } .md-h6 { font-size: .92em; color: var(--tok-quote); }
    .md-bold { font-weight: 700; color: var(--tok-bold); }
    .md-italic { font-style: italic; color: var(--tok-italic); }
    .md-strike { text-decoration: line-through; color: var(--text-dim); }
    .md-code { color: var(--tok-code-fg); background: var(--tok-code-bg); border-radius: 3px; padding: 0 2px; }
    .md-code-block { display: inline-block; width: 100%; background: var(--tok-code-bg); padding: 2px 4px; border-radius: 4px; color: var(--text); }
    .md-quote { color: var(--tok-quote); font-style: italic; }
    .md-link-text { color: var(--tok-link); text-decoration: underline; text-decoration-color: var(--accent-soft); }
    .md-link-url { color: var(--text-dim); }
    .md-math { color: var(--tok-math); background: color-mix(in srgb, var(--tok-math) 12%, transparent); border-radius: 3px; }
    .md-hr { color: var(--tok-hr); }
    .md-table-row { color: var(--tok-table); }

    #preview {
        position: absolute; inset: 0; overflow-y: auto; padding: 22px 32px;
        background: var(--bg-panel); line-height: 1.65;
    }
    #preview h1, #preview h2, #preview h3, #preview h4 { font-weight: 700; line-height: 1.3; }
    #preview h1 { font-size: 2em; border-bottom: 1px solid var(--border); padding-bottom: .25em; margin-top: 0; }
    #preview h2 { font-size: 1.5em; border-bottom: 1px solid var(--border); padding-bottom: .2em; }
    #preview h3 { font-size: 1.25em; }
    #preview p { margin: .7em 0; }
    #preview a { color: var(--accent); }
    #preview code { font-family: var(--font-mono); background: var(--tok-code-bg); color: var(--tok-code-fg); padding: .15em .4em; border-radius: 4px; font-size: .9em; }
    #preview pre { background: var(--tok-code-bg); padding: 14px 16px; border-radius: 8px; overflow-x: auto; margin: 0; }
    #preview pre code { background: none; padding: 0; color: var(--text); }
    .code-block-wrap { margin: 1em 0; }
    .code-block-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: 0 2px 5px; user-select: none;
    }
    .code-lang-label {
        font-size: 10.5px; font-family: var(--font-ui); color: var(--text-faint);
        text-transform: uppercase; letter-spacing: .05em;
    }
    .mini-seg {
        display: flex; background: var(--bg-panel); border: 1px solid var(--border);
        border-radius: 6px; padding: 2px;
    }
    .mini-seg button {
        border: none; background: transparent; color: var(--text-dim);
        font-size: 10.5px; font-family: var(--font-ui); padding: 3px 9px;
        border-radius: 4px; cursor: pointer;
    }
    .mini-seg button.active { background: var(--accent); color: #0d1117; font-weight: 600; }
    .mini-preview-container {
        border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
        background: var(--bg-card);
    }
    .mini-preview-iframe { width: 100%; height: 240px; border: none; display: block; background: #fff; }
    .mini-mermaid { padding: 16px; overflow: auto; text-align: center; }
    .mini-mermaid svg { max-width: 100%; height: auto; }
    .mini-preview-error { color: var(--danger); padding: 14px 16px; font-size: 13px; margin: 0; }
    .mini-markdown-body { padding: 14px 18px; }
    .mini-markdown-body h1, .mini-markdown-body h2, .mini-markdown-body h3 { margin: .6em 0 .3em; }
    .mini-markdown-body p { margin: .5em 0; }
    .latex-preview-body.mini { padding: 14px 18px; max-width: none; }
    #preview blockquote { border-left: 3px solid var(--accent); margin: .8em 0; padding: .2em 1em; color: var(--text-dim); }
    #preview table { border-collapse: collapse; margin: 1em 0; width: auto; }
    #preview th, #preview td { border: 1px solid var(--border); padding: 6px 12px; text-align: left; }
    #preview th { background: var(--bg-toolbar); }
    #preview img { max-width: min(360px, 100%); max-height: 320px; width: auto; height: auto; border-radius: 6px; display: block; }
    #preview pre.hljs { background: var(--tok-code-bg); }
    #preview code.hljs { background: none; }
    #preview hr { border: none; border-top: 1px solid var(--border); margin: 1.5em 0; }
    #preview ul, #preview ol { padding-left: 1.6em; }
    #preview .katex-display { overflow-x: auto; overflow-y: hidden; padding: 4px 0; }

    @media (max-width: 720px) {
        .tb-group { border-right: none; padding: 0 4px; }
        #filename-wrap { order: -1; width: 100%; }
        #stats { display: none; }
    }

/* ================= LaTeX preview (rendered via local lib/latex.global.js) ================= */
.latex-preview-body { padding: 24px 32px; max-width: 720px; margin: 0 auto; line-height: 1.6; }
.latex-preview-body h1, .latex-preview-body h2, .latex-preview-body h3 { font-weight: 700; line-height: 1.3; margin: 0.9em 0 0.4em; }
.latex-preview-body h1 { font-size: 1.8em; }
.latex-preview-body h2 { font-size: 1.4em; }
.latex-preview-body h3 { font-size: 1.15em; }
.latex-preview-body p { margin: 0.7em 0; }
.latex-preview-body .bf { font-weight: 700; }
.latex-preview-body .it, .latex-preview-body em { font-style: italic; }
.latex-preview-body .sc { font-variant: small-caps; }
.latex-preview-body .tt { font-family: var(--font-mono); }
.latex-preview-body ul.list, .latex-preview-body ol.list { padding-left: 1.4em; margin: 0.6em 0; }
.latex-preview-body ul.list li, .latex-preview-body ol.list li { list-style: none; position: relative; margin: 0.2em 0; }
.latex-preview-body .itemlabel { display: inline-block; min-width: 1.2em; color: var(--text-dim); }
.latex-preview-body p.continue { margin-top: 0; }
.latex-preview-body a { color: var(--accent); }