html, body { margin: 0; padding: 0; height: 100%; }
:root {
  --viewer-bg:           #c0c0c0;
  --viewer-bg-light:     #dfdfdf;
  --viewer-bg-white:     #ffffff;
  --viewer-text:         #000000;
  --viewer-text-dim:     #404040;
  --viewer-accent:       #000080;
  --viewer-border-light: #ffffff;
  --viewer-border-dark:  #808080;
}
.md-viewer {
  position: absolute;
  inset: 0;
  padding: 16px 20px;
  font-family: 'Segoe UI', sans-serif;
  background: var(--viewer-bg);
  color: var(--viewer-text);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.md-viewer::-webkit-scrollbar { width: 17px; }
.md-viewer::-webkit-scrollbar-track { background: var(--viewer-bg-light); }
.md-viewer::-webkit-scrollbar-thumb {
  background: var(--viewer-bg);
  border: 2px solid;
  border-color: var(--viewer-border-light) var(--viewer-border-dark) var(--viewer-border-dark) var(--viewer-border-light);
}
.md-filename {
  font-size: 11px;
  color: var(--viewer-text-dim);
  margin-bottom: 12px;
  font-family: monospace;
  padding: 3px 6px;
  background: var(--viewer-bg-white);
  border: 2px solid;
  border-color: var(--viewer-border-dark) var(--viewer-border-light) var(--viewer-border-light) var(--viewer-border-dark);
  display: inline-block;
}
.md-h1 { font-size: 18px; font-weight: 700; color: var(--viewer-accent); margin-bottom: 2px; }
.md-meta { font-size: 11px; color: var(--viewer-text-dim); margin-bottom: 14px; }
.md-divider {
  height: 2px;
  border: none;
  border-top: 1px solid var(--viewer-border-dark);
  border-bottom: 1px solid var(--viewer-border-light);
  margin-bottom: 14px;
}
.md-h2 {
  font-size: 11px;
  font-weight: 700;
  color: var(--viewer-text);
  margin: 14px 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: 'Segoe UI', sans-serif;
}
.md-p { font-size: 12px; color: var(--viewer-text); line-height: 1.7; margin-bottom: 8px; }
.md-ul { list-style: none; margin: 0 0 8px 0; padding-left: 18px; font-size: 12px; color: var(--viewer-text); line-height: 1.5; }
.md-ul li { margin-bottom: 12px; padding-left: 1em; text-indent: -1em; }
.md-ul li::before { content: '\25B8 '; color: var(--viewer-accent); padding-right: 5px; }
.md-ul li:last-child { margin-bottom: 0; }
.md-tag {
  display: inline-block;
  background: var(--viewer-bg);
  border: 2px solid;
  border-color: var(--viewer-border-light) var(--viewer-border-dark) var(--viewer-border-dark) var(--viewer-border-light);
  color: var(--viewer-text);
  font-size: 10px;
  padding: 2px 6px;
  margin: 2px 3px 2px 0;
}

/* The global `.winbox .wb-body p, li` rule (Press Start 2P + scaleY + inline-block)
   leaks into the viewer on the desktop shell, changing the body/list font and
   breaking the list flow. Keep the viewer body in its own clean font. */
.md-viewer .md-p,
.md-viewer .md-ul li {
  font-family: 'Segoe UI', sans-serif !important;
  transform: none !important;
  display: block !important;
  color: var(--viewer-text) !important;
}
.md-viewer .md-p { font-size: 12px !important; line-height: 1.7 !important; }
.md-viewer .md-ul li {
  font-size: 12px !important;
  line-height: 1.5 !important;
  margin-bottom: 12px !important;
  padding-left: 1em !important;
  text-indent: -1em !important;
}