/* 「看代码」— 手机端代码/文档阅读器样式 */

:root {
  --bg: #ffffff;
  --fg: #1f2329;
  --fg-2: #646a73;
  --line: #e5e6eb;
  --accent: #3370ff;
  --accent-weak: #eaf1ff;
  --code-bg: #f7f8fa;
  --code-line: #eff0f1;
  --inline-code-bg: #f2f3f5;
  --bar-bg: rgba(255, 255, 255, .88);
  --fs: 16px;
}

html[data-theme="dark"] {
  --bg: #17181c;
  --fg: #e8eaed;
  --fg-2: #9aa0a8;
  --line: #2e3035;
  --accent: #5b8cff;
  --accent-weak: #222a3c;
  --code-bg: #1d1f24;
  --code-line: #26282e;
  --inline-code-bg: #26282e;
  --bar-bg: rgba(23, 24, 28, .88);
}

* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
}

/* ---------- 顶栏 ---------- */

#topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: calc(6px + env(safe-area-inset-top)) 10px 6px;
  background: var(--bar-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.tbtn {
  border: none;
  background: transparent;
  color: var(--fg);
  font-size: 15px;
  line-height: 1;
  padding: 8px 9px;
  border-radius: 8px;
  cursor: pointer;
}
.tbtn:active { background: var(--accent-weak); color: var(--accent); }

.t-title {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.t-acts { display: flex; gap: 2px; }
.t-acts .tbtn { font-size: 13px; font-weight: 600; }

/* ---------- 正文 ---------- */

#main { padding-bottom: 90px; }

.md {
  max-width: 760px;
  margin: 0 auto;
  padding: 14px 18px 0;
  font-size: var(--fs);
  line-height: 1.78;
  overflow-wrap: anywhere;
}

.md h1 {
  font-size: 1.45em;
  font-weight: 700;
  margin: 1.4em 0 .7em;
  padding-bottom: .35em;
  border-bottom: 1px solid var(--line);
  line-height: 1.4;
}
.md > h1:first-child { margin-top: .2em; }

.md h2 {
  font-size: 1.22em;
  font-weight: 700;
  margin: 1.6em 0 .7em;
  line-height: 1.45;
}
.md h2::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 1em;
  background: var(--accent);
  border-radius: 2px;
  margin-right: .45em;
  vertical-align: -.08em;
}

.md h3 { font-size: 1.08em; font-weight: 600; margin: 1.3em 0 .5em; }
.md h4 { font-size: 1em; font-weight: 600; color: var(--fg-2); margin: 1.2em 0 .4em; }

.md p { margin: .7em 0; }
.md ul, .md ol { margin: .6em 0; padding-left: 1.5em; }
.md li { margin: .28em 0; }
.md li > ul, .md li > ol { margin: .2em 0; }

.md a { color: var(--accent); text-decoration: none; }
.md a:active { opacity: .7; }

.md hr { border: none; border-top: 1px solid var(--line); margin: 1.8em 0; }

.md blockquote {
  margin: 1em 0;
  padding: .6em 1em;
  border-left: 3px solid var(--accent);
  background: var(--accent-weak);
  border-radius: 0 8px 8px 0;
  color: var(--fg-2);
}
.md blockquote p { margin: .3em 0; }

.md img { max-width: 100%; border-radius: 8px; }

/* 行内代码 */
.md :not(pre) > code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
  font-size: .88em;
  background: var(--inline-code-bg);
  padding: .15em .4em;
  border-radius: 5px;
  overflow-wrap: anywhere;
}

/* 表格：内容超宽时横向滚动（表格不参与折行） */
.tbl-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1em 0;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.md table { border-collapse: collapse; min-width: 100%; }
.md th, .md td {
  border: 1px solid var(--line);
  padding: .5em .8em;
  font-size: .92em;
  text-align: left;
  white-space: nowrap;
}
.md th { background: var(--code-bg); font-weight: 600; }

/* ---------- 代码块：核心（自动换行） ---------- */

.cb {
  margin: 1em 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--code-bg);
  overflow: hidden;
}

.cb-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--code-line);
}

.cb-lang {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.cb-meta { flex: 1; font-size: 12px; color: var(--fg-2); }
.cb-acts { display: flex; gap: 6px; }

.cbt {
  font-size: 12px;
  line-height: 1;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
  white-space: nowrap;
}
.cbt:active { background: var(--accent-weak); color: var(--accent); border-color: var(--accent); }
.cbt.on { background: var(--accent-weak); color: var(--accent); border-color: var(--accent); }

.cb-body {
  margin: 0;
  padding: 10px 12px;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
  font-size: .86em;
  line-height: 1.6;
  -webkit-overflow-scrolling: touch;
}

.cb-body code {
  display: block;
  white-space: pre-wrap;        /* 关键：超长行自动折行 */
  overflow-wrap: anywhere;      /* 关键：无空格长串（URL/变量名）也能断 */
}

/* 每个源码行一个块级 span：
   首行从 0 开始，折行续行缩进 1.15em，视觉上与上一行区分 */
.cb .cl {
  display: block;
  padding-left: 1.15em;
  text-indent: -1.15em;
}

/* 行号（长代码默认开启） */
.cb.show-ln code { counter-reset: ln; }
.cb.show-ln .cl {
  padding-left: 3.1em;
  text-indent: -3.1em;
  counter-increment: ln;
}
.cb.show-ln .cl::before {
  content: counter(ln);
  display: inline-block;
  width: 2.2em;
  margin-right: .9em;
  text-align: right;
  color: var(--fg-2);
  opacity: .55;
}

/* 适宽模式：不折行，JS 自动缩小字号直到放得下 */
.cb[data-mode="fit"] .cb-body { overflow-x: hidden; }
.cb[data-mode="fit"] .cb-body code { white-space: pre; }

/* 超大文件：整块渲染，不做逐行处理 */
.cb .cl-raw {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------- 语法高亮（浅色） ---------- */

.hljs-comment, .hljs-quote { color: #9aa0a6; font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-doctag, .hljs-formula { color: #a626a4; }
.hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute, .hljs-meta .hljs-string { color: #50a14f; }
.hljs-number, .hljs-symbol, .hljs-bullet, .hljs-link, .hljs-selector-attr { color: #986801; }
.hljs-title, .hljs-section, .hljs-name, .hljs-selector-id, .hljs-selector-class { color: #4078f2; }
.hljs-built_in, .hljs-class .hljs-title, .hljs-type { color: #0184bc; }
.hljs-attr, .hljs-variable, .hljs-template-variable, .hljs-params { color: #c18401; }
.hljs-tag { color: #e45649; }
.hljs-deletion { color: #e45649; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }

html[data-theme="dark"] .hljs-comment, html[data-theme="dark"] .hljs-quote { color: #7f848e; }
html[data-theme="dark"] .hljs-keyword, html[data-theme="dark"] .hljs-selector-tag,
html[data-theme="dark"] .hljs-literal, html[data-theme="dark"] .hljs-doctag { color: #c678dd; }
html[data-theme="dark"] .hljs-string, html[data-theme="dark"] .hljs-regexp,
html[data-theme="dark"] .hljs-addition { color: #98c379; }
html[data-theme="dark"] .hljs-number, html[data-theme="dark"] .hljs-symbol,
html[data-theme="dark"] .hljs-bullet, html[data-theme="dark"] .hljs-link { color: #d19a66; }
html[data-theme="dark"] .hljs-title, html[data-theme="dark"] .hljs-section,
html[data-theme="dark"] .hljs-name { color: #61afef; }
html[data-theme="dark"] .hljs-built_in, html[data-theme="dark"] .hljs-type { color: #56b6c2; }
html[data-theme="dark"] .hljs-attr, html[data-theme="dark"] .hljs-variable,
html[data-theme="dark"] .hljs-template-variable, html[data-theme="dark"] .hljs-params { color: #d19a66; }
html[data-theme="dark"] .hljs-tag, html[data-theme="dark"] .hljs-deletion { color: #e06c75; }

/* ---------- 抽屉（目录 / 大纲） ---------- */

#backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(0, 0, 0, .38);
}
#backdrop.show { display: block; }

#drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 31;
  width: min(84vw, 340px);
  background: var(--bg);
  border-left: 1px solid var(--line);
  transform: translateX(105%);
  transition: transform .22s ease;
  display: flex;
  flex-direction: column;
}
#drawer.open { transform: none; }

.dw-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(12px + env(safe-area-inset-top)) 12px 10px 16px;
  font-weight: 700;
  font-size: 17px;
  border-bottom: 1px solid var(--line);
}

.dw-body {
  flex: 1;
  overflow-y: auto;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}

.dw-sec {
  font-size: 12px;
  color: var(--fg-2);
  letter-spacing: .06em;
  padding: 16px 16px 6px;
}

.dw-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 10px 16px;
  color: var(--fg);
  font-size: 15px;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.dw-item.act { color: var(--accent); background: var(--accent-weak); font-weight: 600; }
.dw-item:active { opacity: .75; }
.dw-btn { color: var(--accent); font-weight: 600; }

.paste-row { display: flex; align-items: center; }
.paste-row .dw-item { flex: 1; min-width: 0; }
.paste-del { border: none; background: transparent; color: var(--fg-2); font-size: 14px; padding: 10px 14px; cursor: pointer; }
.paste-del:active { color: #e5484d; }

.ol-item {
  display: block;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  padding: 6px 16px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-2);
  cursor: pointer;
  overflow-wrap: anywhere;
}
.ol-item.act { color: var(--accent); font-weight: 600; }
.ol-l1 { font-weight: 600; color: var(--fg); }
.ol-l2 { padding-left: 30px; }
.ol-l3 { padding-left: 42px; }
.ol-l4 { padding-left: 54px; }

/* ---------- 粘贴弹层 ---------- */

.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, .42);
  align-items: flex-end;
  justify-content: center;
}
.modal.show { display: flex; }

.modal-card {
  width: 100%;
  max-width: 640px;
  background: var(--bg);
  border-radius: 16px 16px 0 0;
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
@media (min-width: 640px) {
  .modal { align-items: center; }
  .modal-card { border-radius: 16px; }
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 10px;
}

#pasteText {
  width: 100%;
  height: 38vh;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: var(--code-bg);
  color: var(--fg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre;
  overflow-wrap: normal;
  overflow: auto;
}

.modal-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cbt.primary { background: var(--accent); border-color: var(--accent); color: #fff; padding: 8px 14px; font-size: 13px; }
.cbt.primary:active { opacity: .85; background: var(--accent); color: #fff; }

.file-btn { position: relative; overflow: hidden; display: inline-block; }
.file-btn input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* ---------- 其他 ---------- */

.loading { color: var(--fg-2); text-align: center; padding: 64px 0; }

.err-card {
  margin: 40px 4px;
  padding: 20px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--fg-2);
  font-size: 14px;
  line-height: 1.8;
}

#toast {
  position: fixed;
  left: 50%;
  bottom: calc(48px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 50;
  background: rgba(31, 35, 41, .92);
  color: #fff;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 14px;
  max-width: 82vw;
  text-align: center;
}
html[data-theme="dark"] #toast { background: rgba(80, 84, 92, .95); }
#toast[hidden] { display: none; }