*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; height: 100%; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans SC', sans-serif; background: var(--bg); color: var(--text); line-height: var(--lh); transition: background .2s, color .2s; min-height: 100%; }

/* ---- theme presets ---- */
:root { --bg: #fff; --text: #1a1a2e; --text-dim: #666; --border: #e2e2e2; --toolbar-bg: #fafafa; --toolbar-border: #e2e2e2; --code-bg: #f4f4f8; --code-text: #2d2d3a; --link: #3451b2; --link-hover: #1a3a8a; --heading: #111; --h-border: #eee; --blockquote-border: #3451b2; --blockquote-bg: #f8f9ff; --table-border: #ddd; --table-stripe: #f7f7fb; --selection: rgba(52,81,178,.12); --dropzone-border: #bbb; --dropzone-bg: #fafafa; --toc-text: #555; --toc-hover: #3451b2; --toc-active: #3451b2; --toc-bg: #fafafa; --panel-bg: #fff; --panel-shadow: rgba(0,0,0,.12); --overlay-bg: rgba(0,0,0,.3); --btn-bg: #f0f0f0; --btn-hover: #e4e4e4; --btn-primary: #3451b2; --btn-primary-hover: #1a3a8a; --lh: 1.75; --content-width: 720px; --katex-color: inherit; --file-hover: #eef0ff; --file-active: #e0e4ff; }
[data-theme="dark"] { --bg: #0f0f23; --text: #d4d4e8; --text-dim: #8888aa; --border: #2a2a45; --toolbar-bg: #16162e; --toolbar-border: #2a2a45; --code-bg: #1a1a35; --code-text: #c4c4dd; --link: #7ba0f0; --link-hover: #9bb8ff; --heading: #eee; --h-border: #2a2a45; --blockquote-border: #7ba0f0; --blockquote-bg: #161630; --table-border: #2a2a45; --table-stripe: #161630; --selection: rgba(123,160,240,.2); --dropzone-border: #555; --dropzone-bg: #16162e; --toc-text: #8888aa; --toc-hover: #7ba0f0; --toc-active: #7ba0f0; --toc-bg: #16162e; --panel-bg: #16162e; --panel-shadow: rgba(0,0,0,.4); --overlay-bg: rgba(0,0,0,.55); --btn-bg: #2a2a45; --btn-hover: #35355a; --btn-primary: #7ba0f0; --btn-primary-hover: #9bb8ff; --file-hover: #1f1f42; --file-active: #282855; }
[data-theme="sepia"] { --bg: #faf0e6; --text: #3b3228; --text-dim: #8a7f72; --border: #d8cdbc; --toolbar-bg: #f2e6d5; --toolbar-border: #d8cdbc; --code-bg: #efe4d0; --code-text: #3b3228; --link: #7a4a2a; --link-hover: #5c3520; --heading: #2a2218; --h-border: #d8cdbc; --blockquote-border: #7a4a2a; --blockquote-bg: #f5ebdc; --table-border: #d8cdbc; --table-stripe: #f2e6d5; --selection: rgba(122,74,42,.15); --dropzone-border: #bbb; --dropzone-bg: #f5ebdc; --toc-text: #8a7f72; --toc-hover: #7a4a2a; --toc-active: #7a4a2a; --toc-bg: #f2e6d5; --panel-bg: #faf0e6; --panel-shadow: rgba(0,0,0,.1); --overlay-bg: rgba(0,0,0,.25); --btn-bg: #e4d7c2; --btn-hover: #d8cdbc; --btn-primary: #7a4a2a; --btn-primary-hover: #5c3520; --file-hover: #efe4d0; --file-active: #e8dcc6; }
[data-theme="nord"] { --bg: #eceff4; --text: #2e3440; --text-dim: #6c778f; --border: #d8dee9; --toolbar-bg: #e5e9f0; --toolbar-border: #d8dee9; --code-bg: #e5e9f0; --code-text: #2e3440; --link: #5e81ac; --link-hover: #4c7a9d; --heading: #2e3440; --h-border: #d8dee9; --blockquote-border: #5e81ac; --blockquote-bg: #e5e9f0; --table-border: #d8dee9; --table-stripe: #e5e9f0; --selection: rgba(94,129,172,.18); --dropzone-border: #b0b8c8; --dropzone-bg: #e5e9f0; --toc-text: #6c778f; --toc-hover: #5e81ac; --toc-active: #5e81ac; --toc-bg: #e5e9f0; --panel-bg: #eceff4; --panel-shadow: rgba(0,0,0,.08); --overlay-bg: rgba(0,0,0,.2); --btn-bg: #d8dee9; --btn-hover: #c8d0dd; --btn-primary: #5e81ac; --btn-primary-hover: #4c7a9d; --file-hover: #d8dee9; --file-active: #c8d0dd; }
[data-theme="gruvbox"] { --bg: #fbf1c7; --text: #3c3836; --text-dim: #928374; --border: #d5c4a1; --toolbar-bg: #f2e5bc; --toolbar-border: #d5c4a1; --code-bg: #efe0b0; --code-text: #3c3836; --link: #98971a; --link-hover: #7c7a14; --heading: #1d2021; --h-border: #d5c4a1; --blockquote-border: #98971a; --blockquote-bg: #f2e5bc; --table-border: #d5c4a1; --table-stripe: #f2e5bc; --selection: rgba(152,151,26,.15); --dropzone-border: #b0a088; --dropzone-bg: #f2e5bc; --toc-text: #928374; --toc-hover: #98971a; --toc-active: #98971a; --toc-bg: #f2e5bc; --panel-bg: #fbf1c7; --panel-shadow: rgba(0,0,0,.08); --overlay-bg: rgba(0,0,0,.2); --btn-bg: #d5c4a1; --btn-hover: #c6b38e; --btn-primary: #98971a; --btn-primary-hover: #7c7a14; --file-hover: #efe0b0; --file-active: #e6d6a0; }
[data-theme="monokai"] { --bg: #272822; --text: #f8f8f2; --text-dim: #888883; --border: #3e3d32; --toolbar-bg: #2a2b24; --toolbar-border: #3e3d32; --code-bg: #1e1f1c; --code-text: #f8f8f2; --link: #a6e22e; --link-hover: #c0f050; --heading: #f8f8f2; --h-border: #3e3d32; --blockquote-border: #a6e22e; --blockquote-bg: #2a2b24; --table-border: #3e3d32; --table-stripe: #2a2b24; --selection: rgba(166,226,46,.2); --dropzone-border: #555; --dropzone-bg: #2a2b24; --toc-text: #888883; --toc-hover: #a6e22e; --toc-active: #a6e22e; --toc-bg: #2a2b24; --panel-bg: #2a2b24; --panel-shadow: rgba(0,0,0,.5); --overlay-bg: rgba(0,0,0,.6); --btn-bg: #3e3d32; --btn-hover: #4e4d40; --btn-primary: #a6e22e; --btn-primary-hover: #c0f050; --file-hover: #33342d; --file-active: #3e3d32; }
[data-theme="solarized"] { --bg: #fdf6e3; --text: #586e75; --text-dim: #93a1a1; --border: #eee8d5; --toolbar-bg: #f5efdb; --toolbar-border: #eee8d5; --code-bg: #eee8d5; --code-text: #586e75; --link: #268bd2; --link-hover: #1a73b8; --heading: #073642; --h-border: #eee8d5; --blockquote-border: #268bd2; --blockquote-bg: #f5efdb; --table-border: #eee8d5; --table-stripe: #f5efdb; --selection: rgba(38,139,210,.14); --dropzone-border: #c0bfb0; --dropzone-bg: #f5efdb; --toc-text: #93a1a1; --toc-hover: #268bd2; --toc-active: #268bd2; --toc-bg: #f5efdb; --panel-bg: #fdf6e3; --panel-shadow: rgba(0,0,0,.08); --overlay-bg: rgba(0,0,0,.18); --btn-bg: #eee8d5; --btn-hover: #e0d9c0; --btn-primary: #268bd2; --btn-primary-hover: #1a73b8; --file-hover: #eee8d5; --file-active: #e0d9c0; }
[data-theme="solarized-dark"] { --bg: #002b36; --text: #839496; --text-dim: #657b83; --border: #073642; --toolbar-bg: #00262e; --toolbar-border: #073642; --code-bg: #00313d; --code-text: #839496; --link: #268bd2; --link-hover: #4a9fdf; --heading: #eee8d5; --h-border: #073642; --blockquote-border: #268bd2; --blockquote-bg: #00262e; --table-border: #073642; --table-stripe: #00262e; --selection: rgba(38,139,210,.2); --dropzone-border: #2a5058; --dropzone-bg: #00262e; --toc-text: #657b83; --toc-hover: #268bd2; --toc-active: #268bd2; --toc-bg: #00262e; --panel-bg: #00262e; --panel-shadow: rgba(0,0,0,.5); --overlay-bg: rgba(0,0,0,.55); --btn-bg: #073642; --btn-hover: #0a4b58; --btn-primary: #268bd2; --btn-primary-hover: #4a9fdf; --file-hover: #00313d; --file-active: #073642; }

#app { display: flex; flex-direction: column; min-height: 100vh; background: var(--bg); }
/* toolbar */
#toolbar { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 6px; padding: 0 12px; height: 48px; background: var(--toolbar-bg); border-bottom: 1px solid var(--toolbar-border); flex-shrink: 0; user-select: none; transition: top .25s ease; }
#toolbar.hide { top: -48px; }
.logo { font-weight: 700; font-size: 15px; color: var(--heading); white-space: nowrap; letter-spacing: -.02em; }
#fileName { flex: 1; font-size: 13px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0 6px; text-align: center; min-width: 0; background: transparent; }
.toolbar-group { display: flex; gap: 3px; }
#toolbar button, .btn { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; font-size: 12.5px; border: 1px solid var(--border); border-radius: 6px; background: var(--btn-bg); color: var(--text); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; font-family: inherit; line-height: 1.4; }
#toolbar button:hover, .btn:hover { background: var(--btn-hover); }
#toolbar button:active { transform: scale(.97); }
#toolbar button.active { background: var(--btn-primary); color: #fff; border-color: var(--btn-primary); }
#toolbar button { outline: none; }
.github-icon { display:inline-flex; align-items:center; color:var(--text-dim); text-decoration:none; transition:color .15s; }
.github-icon:hover { color:var(--text); }
#toolbar button::-moz-focus-inner { border: 0; }
/* main area */
#main { display: flex; flex: 1; min-height: 0; }
/* sidebar (file list + toc) */
#sidebar { width: 240px; flex-shrink: 0; display: none; flex-direction: column; border-right: 1px solid var(--border); background: var(--toc-bg); overflow: hidden; position: sticky; top: 48px; align-self: flex-start; min-height: 100vh; transition: top .25s ease; }
#sidebar.open { display: flex; }
#sidebar.full { top: 0; }
/* sidebar tabs */
.sidebar-tabs { display: flex; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.sidebar-tab { flex: 1; padding: 8px 4px; font-size: var(--sidebar-font-size, 12px); font-weight: 500; border: none; background: none; color: var(--text-dim); cursor: pointer; font-family: inherit; border-bottom: 2px solid transparent; transition: color .12s, border-color .12s; outline: none; }
.sidebar-tab:hover { color: var(--text); }
.sidebar-tab.active { color: var(--toc-active); border-bottom-color: var(--toc-active); }
/* sidebar panels */
.sidebar-panel { flex: 1; overflow-y: auto; display: none; }
.sidebar-panel.active { display: block; }
/* file tree */
.tree { padding: 4px 0; }
.tree-dir-header, .tree-file { display: flex; align-items: center; width: 100%; padding: 4px 8px 4px 0; font-size: var(--sidebar-font-size, 12.5px); color: var(--toc-text); cursor: pointer; border: none; background: none; text-align: left; font-family: inherit; overflow: hidden; transition: background .12s, color .12s; border-left: 2px solid transparent; }
.tree-dir-header, .tree-file { outline: none; }
.tree-dir-header:hover, .tree-file:hover { background: var(--file-hover); color: var(--toc-hover); }
.tree-file.active { color: var(--toc-active); border-left-color: var(--toc-active); font-weight: 500; background: var(--file-active); }
.tree-arrow { flex-shrink: 0; width: 20px; text-align: center; font-size: 13px; color: var(--text-dim); font-family: monospace; }
.tree-icon { flex-shrink: 0; width: 18px; text-align: center; margin-right: 2px; font-size: 11px; opacity: .3; }
.tree-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-children { overflow: hidden; }
/* toc */
#tocPanel { padding: 4px 0; }
#tocPanel a { display: block; padding: 3px 16px; color: var(--toc-text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-left: 2px solid transparent; transition: color .15s, border-color .15s; font-size: var(--sidebar-font-size, 13px); }
#tocPanel a:hover { color: var(--toc-hover); }
#tocPanel a.active { color: var(--toc-active); border-left-color: var(--toc-active); font-weight: 500; }
#tocPanel .toc-h2 { padding-left: 32px; font-size: calc(var(--sidebar-font-size, 13px) - 0.5px); }
#tocPanel .toc-h3 { padding-left: 48px; font-size: calc(var(--sidebar-font-size, 13px) - 1px); }
/* shortcut list */
.shortcut-list { display: flex; flex-direction: column; gap: 4px; }
.shortcut-row { display: flex; align-items: center; justify-content: space-between; padding: 3px 0; font-size: 13px; }
.shortcut-row .shortcut-btn { background: var(--btn-bg); border: 1px solid var(--border); border-radius: 4px; padding: 2px 10px; font-size: 12px; font-family: inherit; color: var(--text); cursor: pointer; min-width: 100px; text-align: center; transition: background .12s; outline: none; font-family: monospace; }
.shortcut-row .shortcut-btn:hover { background: var(--btn-hover); }
.shortcut-row .shortcut-btn.capturing { background: var(--btn-primary); color: #fff; border-color: var(--btn-primary); }
.shortcut-reset { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 11px; padding: 0 4px; text-decoration: underline; font-family: inherit; outline: none; }
.shortcut-reset:hover { color: var(--link); }
/* content */
#content { flex: 1; min-width: 0; padding: 40px 24px; display: flex; justify-content: center; }
#content-inner { max-width: var(--content-width); width: 100%; min-height: 200px; }
/* dropzone */
#dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px dashed var(--dropzone-border); border-radius: 12px; padding: 60px 40px; text-align: center; color: var(--text-dim); transition: border-color .2s, background .2s; cursor: default; margin-top: 40px; }
#dropzone.drag-over { border-color: var(--link); background: var(--blockquote-bg); }
#dropzone svg { width: 56px; height: 56px; margin-bottom: 16px; opacity: .4; color: var(--text-dim); }
#dropzone p { font-size: 15px; margin-bottom: 6px; color: var(--text); }
#dropzone .sub { font-size: 13px; color: var(--text-dim); }
/* mobile welcome */
.android #dropzone { display: none; }
.android-welcome { display: none; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; text-align: center; color: var(--text-dim); }
.android .android-welcome { display: flex; }
.android-welcome .logo-large { font-size: 28px; font-weight: 700; color: var(--heading); margin-bottom: 8px; }
.android-welcome .version { font-size: 12px; color: var(--text-dim); margin-bottom: 28px; }
.android-welcome .action-list { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 280px; }
.android-welcome .action-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--btn-bg); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: 13px; text-decoration: none; cursor: pointer; transition: background .15s; }
.android-welcome .action-item:active { background: var(--btn-hover); }
.android-welcome .action-item svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--link); }
.android-welcome .action-item .action-text { flex: 1; text-align: left; }
.android-welcome .action-item .action-text strong { display: block; font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.android-welcome .action-item .action-text span { font-size: 11px; color: var(--text-dim); }
.android-welcome .feature-list { margin-top: 24px; font-size: 12px; line-height: 1.8; color: var(--text-dim); max-width: 260px; }
.android-welcome .feature-list svg { width: 14px; height: 14px; vertical-align: middle; margin-right: 4px; color: var(--link); }
/* ---- Typography ---- */
#content-inner h1, #content-inner h2, #content-inner h3, #content-inner h4, #content-inner h5 { color: var(--heading); font-weight: 600; line-height: 1.35; margin-top: 1.8em; margin-bottom: .5em; }
#content-inner h1 { font-size: 1.85em; padding-bottom: .3em; border-bottom: 1px solid var(--h-border); margin-top: 0; }
#content-inner h2 { font-size: 1.45em; padding-bottom: .25em; border-bottom: 1px solid var(--h-border); }
#content-inner h3 { font-size: 1.2em; }
#content-inner h4 { font-size: 1.05em; }
#content-inner h5 { font-size: .95em; color: var(--text-dim); }
#content-inner p { margin: .75em 0; }
#content-inner a { color: var(--link); text-decoration: none; transition: color .15s; }
#content-inner a:hover { color: var(--link-hover); text-decoration: underline; }
#content-inner blockquote { margin: 1em 0; padding: 12px 16px; border-left: 4px solid var(--blockquote-border); background: var(--blockquote-bg); border-radius: 0 6px 6px 0; }
#content-inner blockquote p { margin: .4em 0; }
#content-inner ul, #content-inner ol { padding-left: 1.6em; margin: .6em 0; }
#content-inner li { margin: .25em 0; }
#content-inner li > p { margin: .3em 0; }
#content-inner hr { border: none; border-top: 1px solid var(--border); margin: 1.5em 0; }
#content-inner img { max-width: 100%; height: auto; border-radius: 6px; display: block; margin: 1em auto; }
#content-inner strong { font-weight: 600; }
#content-inner code { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: .875em; background: var(--code-bg); color: var(--code-text); padding: 2px 6px; border-radius: 4px; }
#content-inner pre { margin: 1em 0; border-radius: 8px; overflow-x: auto; background: var(--code-bg) !important; border: 1px solid var(--border); }
#content-inner pre code { display: block; padding: 16px 20px; font-size: .85em; line-height: 1.55; background: none !important; }
#content-inner table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: .93em; }
#content-inner th, #content-inner td { padding: 8px 14px; border: 1px solid var(--table-border); text-align: left; }
#content-inner th { background: var(--table-stripe); font-weight: 600; }
#content-inner tr:nth-child(even) { background: var(--table-stripe); }
#content-inner .katex { font-size: 1.05em; color: var(--katex-color); }
#content-inner .katex .accent-body { position: relative; transform: translateY(-0.05em); }
#content-inner .katex .accent-body .overlay { position: absolute; }
#content-inner .katex svg { fill: currentColor; }
#content-inner .katex-display { margin: .8em 0; overflow-x: auto; overflow-y: hidden; padding: 4px 0; }
.math-error { color: #c00; border-bottom: 1px dashed #c00; }
/* heading anchor */
.heading-anchor { opacity: 0; margin-left: -1.2em; padding-right: 4px; font-size: .85em; color: var(--link); text-decoration: none !important; transition: opacity .15s; float: left; }
#content-inner h1:hover .heading-anchor, #content-inner h2:hover .heading-anchor, #content-inner h3:hover .heading-anchor, #content-inner h4:hover .heading-anchor, #content-inner h5:hover .heading-anchor { opacity: .6; }
.heading-anchor:hover { opacity: 1 !important; }
/* Settings overlay */
.overlay { display: none; position: fixed; inset: 0; background: var(--overlay-bg); z-index: 100; justify-content: flex-end; align-items: stretch; }
.overlay.open { display: flex; }
.settings-panel { width: 340px; max-width: 92vw; background: var(--panel-bg); box-shadow: -4px 0 24px var(--panel-shadow); display: flex; flex-direction: column; overflow-y: auto; }
.settings-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.settings-header h2 { font-size: 16px; font-weight: 600; color: var(--heading); margin: 0; border: none; background: none; }
.settings-header button { background: none; border: none; font-size: 22px; color: var(--text-dim); cursor: pointer; padding: 2px 4px; line-height: 1; outline: none; }
.settings-header button:hover { color: var(--text); }
.settings-body { padding: 16px 20px 24px; flex: 1; }
.setting-group { margin-bottom: 18px; }
.setting-group label { display: block; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); margin-bottom: 6px; }
.setting-group .value { font-size: 12px; color: var(--text-dim); margin-left: 6px; font-weight: 400; text-transform: none; }
.setting-row { display: flex; gap: 5px; flex-wrap: wrap; }
.setting-row .opt-btn { padding: 5px 12px; font-size: 12.5px; border: 1px solid var(--border); border-radius: 6px; background: var(--btn-bg); color: var(--text); cursor: pointer; transition: all .12s; font-family: inherit; }
.setting-row .opt-btn:hover { background: var(--btn-hover); }
.setting-row .opt-btn.active { background: var(--btn-primary); color: #fff; border-color: var(--btn-primary); }
input[type="range"] { width: 100%; margin: 4px 0; accent-color: var(--btn-primary); cursor: pointer; }
/* custom color inputs */
.color-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--code-bg); }
.color-item { display: flex; align-items: center; gap: 6px; }
.color-item label { font-size: 11px; color: var(--text-dim); text-transform: none; letter-spacing: 0; margin: 0; flex: 1; }
.color-item input[type="color"] { width: 28px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: 4px; cursor: pointer; background: none; }
#urlOverlay { justify-content: center; align-items: center; }
.dialog { background: var(--panel-bg); border-radius: 12px; padding: 24px; width: 480px; max-width: 90vw; box-shadow: 0 8px 32px var(--panel-shadow); }
.dialog h3 { font-size: 16px; font-weight: 600; margin-bottom: 16px; color: var(--heading); border: none; background: none; }
.dialog input[type="url"] { width: 100%; padding: 10px 14px; font-size: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font-family: inherit; outline: none; }
.dialog input[type="url"]:focus { border-color: var(--link); box-shadow: 0 0 0 3px var(--selection); }
.dialog-actions { display: flex; gap: 8px; margin-top: 16px; justify-content: flex-end; }
.dialog-actions .btn-primary { background: var(--btn-primary); color: #fff; border-color: var(--btn-primary); }
.dialog-actions .btn-primary:hover { background: var(--btn-primary-hover); }
/* scrollbar */
#content::-webkit-scrollbar, .sidebar-section::-webkit-scrollbar, .settings-panel::-webkit-scrollbar { width: 8px; }
#content::-webkit-scrollbar-track, .sidebar-section::-webkit-scrollbar-track, .settings-panel::-webkit-scrollbar-track { background: transparent; }
#content::-webkit-scrollbar-thumb, .sidebar-section::-webkit-scrollbar-thumb, .settings-panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
#content::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }
/* loading */
#loading { display: none; position: fixed; bottom: 24px; right: 24px; background: var(--panel-bg); padding: 10px 18px; border-radius: 8px; box-shadow: 0 4px 16px var(--panel-shadow); font-size: 13px; color: var(--text); z-index: 50; border: 1px solid var(--border); }
#loading.show { display: flex; align-items: center; gap: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--link); border-radius: 50%; animation: spin .6s linear infinite; }
#sidebar-overlay { display: none; }
/* responsive */
@media (max-width: 768px) {
  #toolbar { padding: 0 6px; gap: 3px; }
  #toolbar button { padding: 5px 7px; font-size: 11.5px; }
  .logo { font-size: 13px; }
  #sidebar { position: fixed; top: 48px; bottom: 0; left: 0; z-index: 90; width: 260px; box-shadow: 4px 0 12px var(--panel-shadow); }
  #content { padding: 24px 16px; }
  #sidebar.open + #sidebar-overlay { display: block; }
}
@media (max-width: 480px) {
  #content { padding: 16px 12px; }
}
/* Android touch: larger hit targets, always-show toolbar, drawer sidebar */
.android #toolbar button, .android .btn { min-height: 44px; padding: 8px 12px; font-size: 13px; }
.android #sidebar { width: 280px; top: 0; z-index: 200; overflow-y: auto; transition: transform .25s ease; transform: translateX(-100%); }
.android #sidebar.open { transform: translateX(0); }
.android #sidebar-overlay { display: none; position: fixed; inset: 0; z-index: 199; background: var(--overlay-bg); }
.android #sidebar.open + #sidebar-overlay { display: block; }
.android #toolbar.hide { top: 0; }
.android #sidebar.full { top: 0; }
/* safe area (Android status bar) */
.android #toolbar { padding-top: calc(0px + env(safe-area-inset-top, 0px)); height: calc(48px + env(safe-area-inset-top, 0px)); }
.android #sidebar { padding-top: env(safe-area-inset-top, 0px); }
/* settings panel: avoid overlap with Android status bar */
.android .settings-panel { padding-top: env(safe-area-inset-top, 0px); }
/* mobile action sheet */
.mobile-sheet { display: none; }
.android .mobile-sheet { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 300; background: var(--panel-bg); border-top: 1px solid var(--border); box-shadow: 0 -4px 20px var(--panel-shadow); transform: translateY(100%); transition: transform .25s ease; touch-action: pan-x; }
.android .mobile-sheet.open { transform: translateY(0); }
.mobile-sheet-content { padding: 8px 0 max(8px, env(safe-area-inset-bottom, 0px)); }
.mobile-sheet-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 0 8px; }
.mobile-sheet-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 4px; background: none; border: none; color: var(--text); font-size: 11px; cursor: pointer; border-radius: 8px; min-height: 56px; }
.mobile-sheet-btn:active { background: var(--btn-bg); }
.mobile-sheet-handle { width: 36px; height: 4px; border-radius: 2px; background: var(--border); margin: 8px auto 0; }
.android #menuBtn { display: inline-flex; }
/* disable pinch-zoom on chrome elements */
#toolbar, #sidebar, .overlay, #sidebar-overlay, #dropzone { touch-action: pan-x pan-y; }
/* print */
@media print {
  #toolbar, #sidebar, .overlay, #loading, #dropzone { display: none !important; }
  #content { padding: 0; }
  #content-inner { max-width: none; }
  body { background: #fff !important; color: #000 !important; }
}
/* hljs overrides */
#content-inner pre code.hljs { background: inherit; }
#content-inner .mermaid { margin: 1em 0; overflow-x: auto; text-align: center; }