/* MD Reader v3 — 白 / 灰简洁主题，界面字体统一使用微软雅黑 */
:root{
  color-scheme:light;
  --bg:#ffffff;
  --fg:#24292f;
  --muted:#6b7280;
  --border:#d9dee3;
  --surface:#f5f6f7;
  --surface-2:#eceef0;
  --accent:#3f454d;
  --mark:#e4e7ea;
  --mark-current:#c4c9cf;
  --shadow:0 1px 3px rgba(20,24,28,.07);
}
body.dark{
  color-scheme:dark;
  --bg:#16181b;
  --fg:#e6e8ea;
  --muted:#9aa1a8;
  --border:#33383e;
  --surface:#1e2125;
  --surface-2:#272b30;
  --accent:#d3d7dc;
  --mark:#4a5058;
  --mark-current:#6b737c;
  --shadow:0 1px 3px rgba(0,0,0,.3);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.7 "Microsoft YaHei","微软雅黑",sans-serif}

header{position:fixed;top:0;left:0;right:0;z-index:10;height:54px;padding:8px 12px;border-bottom:1px solid var(--border);background:var(--bg);display:flex;gap:6px;align-items:center;white-space:nowrap}
.app-name{font-weight:700;letter-spacing:.02em}
.doc-name{color:var(--muted);font-size:13px;max-width:180px;overflow:hidden;text-overflow:ellipsis}
.spacer{flex:1}
button,.btn,#search{font:inherit;font-size:13px;border:1px solid var(--border);background:var(--bg);color:var(--fg);padding:5px 9px;border-radius:7px}
button:hover,.btn:hover{background:var(--surface)}
button:focus-visible,.btn:focus-within,#search:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.btn,button{cursor:pointer}
.btn input{display:none}
#search{width:158px}
#search::placeholder{color:var(--muted)}
.hits{font-size:12px;color:var(--muted);min-width:42px;text-align:center;font-variant-numeric:tabular-nums}

#toc{position:fixed;left:0;top:54px;bottom:0;width:220px;padding:18px 14px;overflow:auto;border-right:1px solid var(--border);background:var(--bg);z-index:3}
.toc-title{display:block;font-size:12px;letter-spacing:.08em;color:var(--muted);margin-bottom:10px}
#tocnav a{display:block;color:var(--muted);text-decoration:none;padding:3px 8px;font-size:13px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:2px solid transparent}
#tocnav a:hover{color:var(--fg);background:var(--surface)}
#tocnav a.active{color:var(--fg);font-weight:600;background:var(--surface);border-left-color:var(--accent)}
#tocnav .lv2{padding-left:18px}
#tocnav .lv3{padding-left:30px}

.split{position:absolute;top:54px;left:220px;right:0;bottom:0;display:grid;grid-template-columns:1fr 1fr}
.edit{display:grid;grid-template-columns:52px 1fr;border-right:1px solid var(--border);overflow:hidden;min-width:0}
#lines{padding:24px 8px;text-align:right;color:var(--muted);background:var(--surface);font:13px/1.7 Consolas,"Courier New",monospace;overflow:hidden;user-select:none;white-space:pre}
textarea{width:100%;height:100%;resize:none;border:0;outline:0;padding:24px 16px;background:var(--bg);color:var(--fg);font:13px/1.7 Consolas,"Courier New",monospace;white-space:pre;overflow:auto;tab-size:2}

.preview{padding:28px 34px;overflow:auto;min-width:0}
.preview h1,.preview h2,.preview h3,.preview h4,.preview h5,.preview h6{line-height:1.35;margin:1.3em 0 .55em;scroll-margin-top:72px}
.preview h1,.preview h2,.preview h3{border-bottom:1px solid var(--border);padding-bottom:.3em}
.preview h1{font-size:1.9em}
.preview h2{font-size:1.45em}
.preview h3{font-size:1.2em}
.preview h4{font-size:1.05em}
.preview p{margin:.7em 0}
.preview a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--border);text-underline-offset:3px}
.preview a:hover{text-decoration-color:var(--accent)}
.preview img{max-width:100%;border:1px solid var(--border);border-radius:8px}
.preview hr{border:0;border-top:1px solid var(--border);margin:2em 0}
.preview ul,.preview ol{padding-left:1.6em;margin:.7em 0}
.preview li{margin:.25em 0}
.preview li > ul,.preview li > ol{margin:.25em 0 .35em .2em}
.preview li p{margin:.25em 0}
.preview li.task{list-style:none;margin-left:-1.5em}
.task-box{display:inline-block;width:1.2em;color:var(--accent);font-weight:700}
.preview code{background:var(--surface);border-radius:4px;padding:.12em .4em;font-family:Consolas,"Courier New",monospace;font-size:.9em}
.preview blockquote{border-left:3px solid var(--border);margin:1em 0;padding:.4em 1em;color:var(--muted);background:var(--surface);border-radius:0 6px 6px 0}
.preview blockquote blockquote{border-left-color:var(--muted);margin:.6em 0 .6em .2em;background:var(--surface-2)}
.preview blockquote > :first-child{margin-top:0}
.preview blockquote > :last-child{margin-bottom:0}
.preview table{border-collapse:collapse;width:100%;margin:1.1em 0;font-size:14px}
.preview th,.preview td{border:1px solid var(--border);padding:8px 10px;text-align:left;vertical-align:top}
.preview th{background:var(--surface);font-weight:600}
.preview th.ta-left,.preview td.ta-left{text-align:left}
.preview th.ta-center,.preview td.ta-center{text-align:center}
.preview th.ta-right,.preview td.ta-right{text-align:right}
.unsafe{color:var(--muted);text-decoration:line-through;cursor:help}

/* 脚注 */
.fn-ref{font-size:.78em;line-height:0;vertical-align:super}
.fn-ref a{color:var(--fg);text-decoration:none;font-weight:700;padding:0 1px}
.fn-ref a:hover{text-decoration:underline}
.footnotes{margin-top:2.4em;font-size:.9em;color:var(--muted)}
.footnotes hr{margin:1.4em 0 1em}
.footnotes ol{padding-left:1.6em}
.footnotes li{margin:.6em 0}
.footnotes li > :first-child{margin-top:0}
.footnotes li > :last-child{margin-bottom:0}
.footnotes p{margin:.3em 0}
.footnotes a{color:var(--fg)}
.fn-back{text-decoration:none;margin-left:.35em;font-size:.95em}
.fn-back:hover{text-decoration:underline}

/* 原生 HTML 块（经消毒后放行） */
.preview .note{background:var(--surface);border-left:3px solid var(--border);padding:.5em 1em;margin:1em 0;border-radius:0 6px 6px 0}
.preview .note p{margin:.3em 0}
.preview kbd{border:1px solid var(--border);border-bottom-width:2px;border-radius:4px;padding:.05em .4em;background:var(--surface);font-family:Consolas,"Courier New",monospace;font-size:.88em}
.preview td br,.preview th br{line-height:1.9}

.code-wrap{position:relative;margin:1.2em 0}
.code-lang{position:absolute;top:9px;right:14px;z-index:1;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);pointer-events:none}
.preview pre{counter-reset:line;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:30px 0 12px;margin:0;overflow:auto;font:13px/1.7 Consolas,"Courier New",monospace}
.preview pre code{display:block;padding:0;background:none;border-radius:0;font:inherit}
.code-line{display:block;padding:0 16px 0 58px;position:relative;white-space:pre}
.code-line::before{counter-increment:line;content:counter(line);position:absolute;left:0;width:40px;padding-right:10px;text-align:right;color:var(--muted);border-right:1px solid var(--border)}
/* 灰度高亮：不使用彩色，仅靠字重 / 明度 / 斜体区分 */
.kw{color:var(--fg);font-weight:700}
.str{color:var(--muted)}
.com{color:var(--muted);font-style:italic}
.num{color:var(--fg);font-weight:700}
mark{background:var(--mark);color:inherit;border-radius:2px;padding:0 1px}
mark.current{background:var(--mark-current);outline:1px solid var(--accent);font-weight:700}

.read .edit{display:none}
.read .split{display:block}
.read .preview{max-width:1100px;margin:0 auto;height:100%;padding:32px 40px}

#drop{display:none;position:fixed;inset:70px;z-index:99;border:2px dashed var(--accent);border-radius:16px;background:rgba(255,255,255,.94);align-items:center;justify-content:center;font-size:20px;color:var(--fg)}
body.dark #drop{background:rgba(22,24,27,.94)}
body.drag #drop{display:flex}
#toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,8px);z-index:120;background:var(--accent);color:var(--bg);padding:8px 18px;border-radius:8px;font-size:13px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:80vw;text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:900px){
  #toc{display:none}
  .split{left:0}
  header #search,header #prev,header #next,.hits{display:none}
}
@media(max-width:650px){
  header{overflow-x:auto;overflow-y:hidden}
  .doc-name{display:none}
  .split{grid-template-columns:1fr;grid-template-rows:45vh calc(55vh - 54px)}
  .edit{height:45vh;border-right:0;border-bottom:1px solid var(--border)}
  .preview{height:calc(55vh - 54px);padding:20px}
  .read .split{display:block}
  .read .preview{height:100%}
}

@media print{
  header,#toc,.edit,#drop,#toast{display:none!important}
  html,body{background:#fff!important;color:#000!important}
  .split,.read .split{position:static;display:block;left:auto;top:auto;right:auto;bottom:auto}
  .preview,.read .preview{overflow:visible!important;padding:0!important;margin:0!important;max-width:none!important;height:auto!important;color:#000!important;background:#fff!important}
  /* 暗色主题打印时强制反色，否则代码块 / 表格会变成深底深字不可读 */
  .preview pre,.preview code,.preview blockquote,.preview th{background:#fff!important;color:#000!important;border-color:#c9c9c9!important}
  .preview a{color:#000!important;text-decoration:none}
  .footnotes,.footnotes a,.fn-ref a,.preview .note,.preview kbd{background:#fff!important;color:#000!important;border-color:#c9c9c9!important}
  .fn-back,.fn-ref a{text-decoration:none!important}
  .preview table,.preview img,.code-wrap,.preview pre,.footnotes li{break-inside:avoid}
  mark,mark.current{background:transparent!important;color:#000!important;outline:0!important;font-weight:inherit!important}
  .code-lang{color:#666!important}
  @page{margin:18mm}
}