/* viewhack — one stylesheet for the whole site. Phone-first; light and dark themes. */
:root {
  color-scheme: light dark;
  --bg: #f6f5f1;
  --panel: #ffffff;
  --ink: #16181d;
  --muted: #5b606b;
  --line: #d9d7cf;
  --accent: #0b6e4f;
  --accent-ink: #ffffff;
  --accent-soft: #e2f1ea;
  --warn-bg: #fff4e0;
  --warn-ink: #7a4300;
  --bad-bg: #fde8e8;
  --bad-ink: #8a1c1c;
  --odd: #f3f2ed;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111317;
    --panel: #181b21;
    --ink: #e7e8ea;
    --muted: #a0a5b0;
    --line: #2d313a;
    --accent: #3fcf9a;
    --accent-ink: #06140e;
    --accent-soft: #15302a;
    --warn-bg: #33270f;
    --warn-ink: #ffcf85;
    --bad-bg: #3a1717;
    --bad-ink: #ffb3b3;
    --odd: #1c2027;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 var(--sans); }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
code, pre, kbd { font-family: var(--mono); font-size: 0.9em; }
code { background: var(--odd); border: 1px solid var(--line); border-radius: 4px; padding: 0 0.25em; }
h1, h2, h3 { line-height: 1.25; }
h1 { font-size: clamp(1.6rem, 1.2rem + 2.2vw, 2.5rem); margin: 0.2rem 0 0.6rem; letter-spacing: -0.01em; }
h2 { font-size: 1.35rem; margin: 2.2rem 0 0.6rem; }
h3 { font-size: 1.08rem; margin: 1.4rem 0 0.5rem; }

.wrap { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
.prose { max-width: 46rem; }

/* header */
.top { border-bottom: 1px solid var(--line); background: var(--panel); }
.top .wrap { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding-top: 0.55rem; padding-bottom: 0.55rem; }
.brand { font: 700 1.15rem/1 var(--mono); color: var(--ink); text-decoration: none; letter-spacing: -0.02em; }
.brand b { color: var(--accent); font-weight: 700; }
.top nav { display: flex; gap: 0.25rem 1rem; flex-wrap: wrap; font-size: 0.95rem; }
.top nav a { color: var(--muted); text-decoration: none; padding: 0.2rem 0; }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px var(--accent); }

main.wrap { padding-top: 1.2rem; padding-bottom: 2rem; }
.lede { font-size: 1.08rem; color: var(--ink); margin: 0 0 1rem; max-width: 46rem; }
.private { display: inline-flex; gap: 0.4rem; align-items: center; font-size: 0.92rem; color: var(--accent); font-weight: 600; margin: 0 0 0.8rem; }
.private::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--accent); }

/* drop zone */
.drop { display: block; position: relative; border: 2px dashed var(--line); border-radius: 14px; background: var(--panel);
  padding: 1.6rem 1rem; text-align: center; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.drop:hover, .drop:focus-within, .drop.over { border-color: var(--accent); background: var(--accent-soft); }
.drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.drop .big { display: block; font-size: 1.2rem; font-weight: 700; }
.drop .btnlike { display: inline-block; margin: 0.7rem 0 0.4rem; background: var(--accent); color: var(--accent-ink); font-weight: 700;
  padding: 0.6rem 1.2rem; border-radius: 9px; }
.drop .small { display: block; font-size: 0.9rem; color: var(--muted); }
.drop .hex { display: block; font: 0.8rem/1.4 var(--mono); color: var(--muted); margin-top: 0.6rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* output */
#vh-out { margin-top: 1.2rem; }
.filecard { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 10px; padding: 0.8rem 1rem; }
.filecard p { margin: 0.25rem 0; }
.filecard .fname { overflow-wrap: anywhere; }
.filecard .ftype { font-size: 1.1rem; }
.filecard .cannot { font-weight: 700; color: var(--bad-ink); }
.meta { color: var(--muted); font-size: 0.9rem; margin: 0.3rem 0; overflow-wrap: anywhere; }
.note { background: var(--warn-bg); color: var(--warn-ink); border-radius: 8px; padding: 0.45rem 0.7rem; font-size: 0.95rem; }
.warn { background: var(--warn-bg); color: var(--warn-ink); border-radius: 8px; padding: 0.55rem 0.8rem; }
.viewer { margin-top: 1rem; }
.status { font-weight: 600; margin: 0.4rem 0; font-variant-numeric: tabular-nums; }
.status[data-state="error"] { background: var(--bad-bg); color: var(--bad-ink); padding: 0.55rem 0.8rem; border-radius: 8px; font-weight: 500; }
.controls { display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; align-items: center; margin: 0.5rem 0; font-size: 0.95rem; }
select, textarea, .btn { font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 7px; padding: 0.35rem 0.5rem; }
.btn { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; padding: 0.45rem 1rem; cursor: pointer; }
textarea { width: 100%; font-family: var(--mono); font-size: 0.92rem; }

/* sqlite */
.tlist { list-style: none; padding: 0; margin: 0.4rem 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.tlist button { font: inherit; font-size: 0.95rem; display: inline-flex; gap: 0.5rem; align-items: baseline; background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 0.35rem 0.7rem; cursor: pointer; }
.tlist button[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.tname { font-family: var(--mono); font-weight: 600; }
.tcount, .tkind { color: var(--muted); font-size: 0.85rem; }
pre.schema { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 0.7rem 0.8rem; overflow-x: auto; font-size: 0.85rem; line-height: 1.5; white-space: pre; }

/* parquet tables */
.tscroll { overflow-x: auto; }
.schema-t { border-collapse: collapse; font-size: 0.9rem; background: var(--panel); }
.schema-t th, .schema-t td { text-align: left; padding: 0.3rem 0.6rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.schema-t th { font-weight: 600; color: var(--muted); }
.schema-t td:first-child { font-family: var(--mono); }
.schema-t .num, .schema-t th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* virtual grid */
.grid { max-height: min(62vh, 560px); overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); position: relative; outline: none; }
.grid:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.grid-inner { position: relative; min-width: 100%; }
.grid-head { position: sticky; top: 0; z-index: 2; display: flex; height: 30px; background: var(--odd); border-bottom: 1px solid var(--line); }
.grid-body { position: absolute; top: 0; left: 0; will-change: transform; }
.gr { display: flex; height: 30px; }
.gr.odd { background: var(--odd); }
.gc { flex: none; height: 30px; line-height: 30px; padding: 0 0.55rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font: 0.85rem/30px var(--mono); border-right: 1px solid var(--line); cursor: default; }
.gc.num { text-align: right; font-variant-numeric: tabular-nums; }
.gc.nul { color: var(--muted); font-style: italic; }
.gc.wait { color: var(--muted); }
.gn { position: sticky; left: 0; z-index: 1; background: var(--odd); color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.gh { display: flex; gap: 0.4rem; align-items: center; font: 600 0.85rem/30px var(--sans); background: transparent; color: var(--ink); border: 0;
  border-right: 1px solid var(--line); text-align: left; cursor: pointer; }
div.gh { cursor: default; }
.gh-name { overflow: hidden; text-overflow: ellipsis; }
.gh-type { font: 0.7rem/1 var(--mono); color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0.15rem 0.25rem; white-space: nowrap; }
.gh-type.t-number { color: var(--accent); border-color: var(--accent); }
.gh-type.t-date { color: #7c4dce; border-color: #7c4dce; }
@media (prefers-color-scheme: dark) { .gh-type.t-date { color: #c3a6ff; border-color: #c3a6ff; } }
.grid-detail { font-size: 0.88rem; color: var(--muted); margin: 0.35rem 0 0; overflow-wrap: anywhere; white-space: pre-wrap; max-height: 9rem; overflow-y: auto; }
.grid-detail.bad { color: var(--bad-ink); }

/* psd */
.pixwrap { max-width: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; display: inline-block; line-height: 0;
  background: repeating-conic-gradient(var(--odd) 0 25%, var(--panel) 0 50%) 0 0 / 16px 16px; }
canvas.pixels { display: block; max-width: 100%; height: auto; }
.ltree { list-style: none; margin: 0.3rem 0; padding: 0; }
.ltree .ltree { padding-left: 1.1rem; border-left: 2px solid var(--line); margin-left: 0.5rem; }
.ltree li { margin: 0.2rem 0; }
.lbtn { font: inherit; font-size: 0.93rem; display: flex; flex-wrap: wrap; gap: 0.15rem 0.6rem; align-items: baseline; width: 100%; text-align: left;
  background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 0.35rem 0.6rem; cursor: pointer; }
.lbtn[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.lbtn[data-group="true"] .lname { font-weight: 700; }
.lname { overflow-wrap: anywhere; min-width: 0; }
.lvis { font: 600 0.72rem/1.4 var(--mono); border: 1px solid var(--accent); color: var(--accent); border-radius: 4px; padding: 0 0.3rem; }
.is-hidden > .lbtn .lvis { border-color: var(--muted); color: var(--muted); }
.is-hidden > .lbtn .lname { color: var(--muted); text-decoration: line-through; }
.lop { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 0.85rem; }
.lkind { color: var(--muted); font-size: 0.8rem; }
.psd-layer { margin-top: 0.8rem; }

/* fonts */
dl.fmeta { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0.4rem 0; }
dl.fmeta dt { margin-top: 0.5rem; color: var(--muted); font-weight: 600; font-size: 0.88rem; }
dl.fmeta dd { overflow-wrap: anywhere; white-space: pre-line; }
@media (min-width: 720px) { dl.fmeta { grid-template-columns: 16rem minmax(0, 1fr); gap: 0.35rem 1rem; align-items: baseline; } dl.fmeta dt, dl.fmeta dd { margin: 0; } }
.fcov { padding-left: 1.1rem; font-size: 0.93rem; columns: 20rem; column-gap: 1.5rem; }
.fcov li { break-inside: avoid; }
.gglyphs { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 4px; margin: 0.4rem 0; }
.gcell { display: flex; flex-direction: column; align-items: center; background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: 6px; padding: 2px 0 1px; cursor: pointer; font: inherit; min-width: 0; }
.gcell:hover, .gcell:focus-visible { border-color: var(--accent); }
.glabel { font: 0.62rem/1.3 var(--mono); color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gdetail canvas { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
#vh-sample { width: 100%; font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 7px; padding: 0.45rem 0.6rem; }
.fpreview { margin: 0.5rem 0; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 0.3rem 0.8rem; }
.fline { display: flex; gap: 0.8rem; align-items: baseline; padding: 0.35rem 0; border-bottom: 1px solid var(--line); }
.fline:last-child { border-bottom: 0; }
.fsize { flex: none; width: 3.2rem; font: 0.75rem/1 var(--mono); color: var(--muted); }
.ftext { min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }

/* 3d */
.m3d { display: grid; gap: 0.6rem 1.4rem; grid-template-columns: minmax(0, 1fr); margin-top: 0.4rem; }
.m3d-stage { position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: 72vh; border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: radial-gradient(circle at 50% 30%, var(--panel), var(--odd)); }
.m3d-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.m3d-canvas:active { cursor: grabbing; }
.m3d-view .controls { margin: 0.2rem 0; }
.m3d-view .meta { margin: 0.35rem 0; }
.m3d-h { margin: 0 0 0.2rem; font-size: 1.15rem; }
dl.fmeta.m3d-facts { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 0; }
dl.m3d-facts dt { margin: 0.55rem 0 0; }
dl.m3d-facts dd { margin: 0; white-space: normal; font-variant-numeric: tabular-nums; }
dl.m3d-facts dd .sub { display: block; color: var(--muted); font-size: 0.85rem; line-height: 1.45; margin-top: 0.1rem; }
#vh-volume[data-volume=""], #vh-closed[data-closed="false"] { color: var(--warn-ink); }
.btn2 { font: inherit; font-weight: 600; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 7px; padding: 0.45rem 1rem; cursor: pointer; }
.btn2:hover, .btn:hover { filter: brightness(1.05); }
.m3d-res h3 { font-size: 1rem; margin: 1rem 0 0.3rem; }
.m3d-res p, .m3d-res li { font-size: 0.93rem; overflow-wrap: anywhere; }
.m3d-res ul { padding-left: 1.1rem; margin: 0.3rem 0; }
@media (min-width: 900px) {
  .m3d { grid-template-columns: minmax(0, 1.7fr) minmax(16rem, 1fr); align-items: start; }
}

/* content */
.cards { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: 0.6rem 0; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 0.9rem 1rem; }
.card h3 { margin: 0 0 0.3rem; }
.card p { margin: 0.3rem 0; font-size: 0.95rem; }
.formats { columns: 16rem; column-gap: 1.5rem; padding-left: 1.1rem; font-size: 0.95rem; }
.formats li { break-inside: avoid; margin: 0.15rem 0; }
dl.facts dt { font-weight: 700; margin-top: 0.7rem; }
dl.facts dd { margin: 0.15rem 0 0 0; }
.limits li { margin: 0.3rem 0; }

footer { border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9rem; padding: 1.2rem 0 2rem; }
footer p { margin: 0.3rem 0; }
footer a { color: var(--muted); }

@media (min-width: 720px) {
  .drop { padding: 2.4rem 1.5rem; }
  main.wrap { padding-top: 2rem; }
}
/* e-mail viewer */
.pastebox { margin: 0.8rem 0 0; display: grid; gap: 0.45rem; }
.pastebox label { font-size: 0.95rem; }
.pastebox .btn { justify-self: start; }
.eml-subject { margin: 0.6rem 0 0.2rem; overflow-wrap: anywhere; }
.eml-sum .sub, .hop-dl .sub, .verdicts .sub { color: var(--muted); font-size: 0.88rem; }
.eml-flag { display: block; color: var(--warn-ink); background: var(--warn-bg); border-radius: 6px; padding: 0.1rem 0.45rem; margin-top: 0.2rem; font-size: 0.9rem; }
.eml-body h3, .eml-att h3, .eml-path h3, .eml-auth h3 { margin: 1.4rem 0 0.4rem; }
.eml-frame { display: block; width: 100%; height: min(70vh, 760px); min-height: 320px; border: 1px solid var(--line); border-radius: 8px; background: #fff; resize: vertical; }
.eml-text { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 0.7rem 0.8rem; font-size: 0.9rem; max-height: 75vh; overflow: auto; margin: 0.4rem 0; }
.btn2[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.eml-links, .eml-raw { margin: 0.7rem 0; }
.eml-links summary, .eml-raw summary { cursor: pointer; font-weight: 600; }
.eml-linklist { padding-left: 1.2rem; font-size: 0.9rem; }
.eml-linklist li { overflow-wrap: anywhere; margin: 0.25rem 0; }
.eml-linklist li.odd { color: var(--warn-ink); background: var(--warn-bg); border-radius: 6px; padding: 0.1rem 0.4rem; }
.eml-attlist { list-style: none; padding: 0; margin: 0.4rem 0; display: grid; gap: 0.4rem; }
.eml-attlist li { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 0.5rem 0.75rem; overflow-wrap: anywhere; }
.att-dl { font-weight: 600; margin-right: 0.6rem; }
.att-meta { color: var(--muted); font-size: 0.88rem; display: inline-block; }
.hops { list-style: none; padding: 0; margin: 0.4rem 0; display: grid; gap: 0.5rem; }
.hop { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 8px; padding: 0.5rem 0.75rem; }
.hop-top { display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; align-items: baseline; }
.hop-delay { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.92rem; }
.hop-dl { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 0.1rem 0.6rem; margin: 0.35rem 0 0; font-size: 0.9rem; }
.hop-dl dt { color: var(--muted); font-weight: 600; }
.hop-dl dd { margin: 0; overflow-wrap: anywhere; }
.authbox { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 0.5rem 0.75rem; margin: 0.5rem 0; }
.auth-by { margin: 0.2rem 0 0.4rem; font-size: 0.92rem; }
.verdicts { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; font-size: 0.9rem; }
.verdicts li { overflow-wrap: anywhere; }
.verdicts code { margin-left: 0.4rem; }
.verdict { display: inline-block; font-weight: 700; border-radius: 6px; padding: 0 0.45rem; }
.v-ok { background: var(--accent-soft); color: var(--accent); }
.v-bad { background: var(--bad-bg); color: var(--bad-ink); }
.v-meh { background: var(--warn-bg); color: var(--warn-ink); }

/* epub */
.epub-meta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 0.8rem 1rem; margin-top: 0.6rem; }
.epub-cover { width: 7.5rem; max-width: 30%; height: auto; border-radius: 4px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); flex: none; }
.epub-info { flex: 1 1 15rem; min-width: 0; }
.epub-title { margin: 0 0 0.3rem; overflow-wrap: anywhere; }
.epub-desc { color: var(--muted); font-size: 0.95rem; overflow-wrap: anywhere; }
#vh-epub-drm { margin-top: 0.8rem; }
#vh-epub-drm p { margin: 0.3rem 0; overflow-wrap: anywhere; }
.epub-reader { margin-top: 1rem; }
.epub-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.8rem; }
@media (min-width: 960px) {
  .epub-layout { grid-template-columns: 17rem minmax(0, 1fr); align-items: start; }
  .epub-tocbox { position: sticky; top: 0.5rem; max-height: calc(100vh - 1rem); overflow: auto; }
}
.epub-tocbox { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 0.5rem 0.8rem; min-width: 0; }
.epub-tocbox summary { cursor: pointer; font-weight: 700; }
.epub-toc ol { list-style: none; margin: 0.2rem 0; padding-left: 0; }
.epub-toc ol ol { padding-left: 0.9rem; border-left: 1px solid var(--line); margin-left: 0.3rem; }
.toc-go { font: inherit; font-size: 0.93rem; line-height: 1.35; text-align: left; background: none; border: 0; color: var(--accent); padding: 0.35rem 0.3rem; cursor: pointer; width: 100%; border-radius: 5px; overflow-wrap: anywhere; }
.toc-go:hover { background: var(--accent-soft); }
.toc-go[aria-current="true"] { font-weight: 700; color: var(--ink); background: var(--accent-soft); }
.toc-head { display: block; font-weight: 600; font-size: 0.93rem; padding: 0.35rem 0.3rem; }
.epub-pane { min-width: 0; }
.epub-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.epub-nav { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.epub-pos, .epub-size { font-size: 0.92rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.epub-textsize { display: flex; gap: 0.4rem; align-items: center; }
.epub-frame { display: block; width: 100%; height: min(78vh, 900px); min-height: 380px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
@media (prefers-color-scheme: dark) { .epub-frame { background: #16181d; } }
.epub-nav-bottom { justify-content: space-between; margin-top: 0.5rem; }
.btn2:disabled { opacity: 0.45; cursor: default; }

/* heic */
.heic-photo { margin: 0.8rem 0 1.6rem; }
.heic-photo + .heic-photo { border-top: 1px solid var(--line); padding-top: 1rem; }
.heic-h { font-size: 1.05rem; margin: 0 0 0.5rem; overflow-wrap: anywhere; }
.heic-fig { display: block; width: fit-content; max-width: 100%; cursor: zoom-in; }
.heic-fig[data-full="true"] { overflow: auto; max-height: 85vh; cursor: zoom-out; }
.heic-fig[data-full="true"] canvas.pixels { max-width: none; }
.heic-fig:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.heic-save { margin-top: 0.7rem; }
.heic-q { display: inline-flex; align-items: center; gap: 0.4rem; }
.heic-q input { width: 7.5rem; }
.heic-q output { min-width: 3.2em; font-variant-numeric: tabular-nums; }
.heic-cannot { border: 1px solid var(--line); border-radius: 8px; padding: 0.4rem 0.9rem; background: var(--panel); }
/* Outlook .msg viewer */
.msg-nested { border-left: 3px solid var(--accent); padding: 0.1rem 0 0.2rem 0.8rem; margin-top: 0.5rem; }
.eml-attlist li .sub { color: var(--muted); font-size: 0.88rem; }
.msg-transport > h3 { margin: 1.6rem 0 0.3rem; }
/* spreadsheet viewer (.xlsx, .xls, .ods) */
.xl-summary { font-weight: 600; margin: 0.2rem 0 0.4rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.xl-tabs { display: flex; gap: 0.35rem; overflow-x: auto; padding: 0.3rem 0 0.2rem; margin: 0.3rem 0 0.4rem; border-bottom: 2px solid var(--line); scrollbar-width: thin; }
.xl-tab { flex: none; font: inherit; font-size: 0.93rem; display: inline-flex; gap: 0.45rem; align-items: baseline; max-width: 16rem; background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; padding: 0.35rem 0.75rem; cursor: pointer; margin-bottom: -2px; }
.xl-tab[aria-selected="true"] { border-color: var(--accent); box-shadow: inset 0 3px var(--accent); background: var(--accent-soft); }
.xl-tab[data-hidden="1"] .xl-tname, .xl-tab[data-hidden="2"] .xl-tname { font-style: italic; color: var(--muted); }
.xl-tname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.xl-badge { font: 600 0.7rem/1.4 var(--mono); border: 1px solid var(--muted); color: var(--muted); border-radius: 4px; padding: 0 0.3rem; white-space: nowrap; }
.gc.fx { box-shadow: inset 3px 0 0 var(--accent); }
.gc.err { color: var(--bad-ink); }
.gc.lnk { text-decoration: underline dotted; }
.gc.mg { outline: 1px dashed var(--accent); outline-offset: -2px; font-weight: 600; }
.gc.mc, .xl-mg-key { background: repeating-linear-gradient(135deg, transparent 0 5px, var(--accent-soft) 5px 9px); }
.xl-mg-key { display: inline-block; width: 1.4em; height: 0.9em; vertical-align: -0.1em; margin-right: 0.4rem; border: 1px dashed var(--accent); }
.grid-detail .xl-formula { color: var(--ink); }
.xl-tools { margin-top: 0.6rem; }

/* Word / ODT viewer */
.dx-jump { margin: 0.6rem 0; }
.dx-remote-box { margin: 0.6rem 0; font-size: 0.95rem; overflow-wrap: anywhere; }
.dx-remote-box ul { margin: 0.4rem 0 0; }
.dx-doc { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 0.9rem 1rem 1.1rem; max-width: 50rem; margin: 0.6rem 0 1rem; overflow-wrap: anywhere; line-height: 1.55; }
@media (min-width: 720px) { .dx-doc { padding: 1.4rem 2rem 1.6rem; } }
.dx-doc .dx-p { margin: 0 0 0.65em; white-space: pre-wrap; tab-size: 4; }
.dx-doc .dx-empty { margin: 0 0 0.3em; }
.dx-doc .dx-h { margin: 1.1em 0 0.45em; white-space: pre-wrap; }
.dx-doc .dx-h:first-child { margin-top: 0; }
.dx-doc h3.dx-h { font-size: 1.4rem; }
.dx-doc h3.dx-title { font-size: 1.7rem; }
.dx-doc h4.dx-h { font-size: 1.18rem; }
.dx-doc h5.dx-h { font-size: 1.05rem; }
.dx-doc h6.dx-h { font-size: 0.98rem; }
.dx-list { list-style: none; padding-left: 0.2rem; margin: 0 0 0.65em; }
.dx-list li { margin: 0.15em 0; padding-left: 1.6em; text-indent: -1.6em; white-space: pre-wrap; }
.dx-marker { display: inline-block; min-width: 1.3em; text-indent: 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.dx-tscroll { overflow-x: auto; margin: 0.4rem 0 0.9rem; max-width: 100%; }
.dx-tscroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dx-table { border-collapse: collapse; font-size: 0.93rem; }
.dx-table td { border: 1px solid var(--line); padding: 0.3rem 0.5rem; vertical-align: top; min-width: 3.5rem; overflow-wrap: normal; }
.dx-table td .dx-p { margin: 0 0 0.25em; }
.dx-table td .dx-p:last-child { margin-bottom: 0; }
.dx-pic { display: inline-block; max-width: 100%; vertical-align: top; margin: 0.2rem 0; text-indent: 0; }
.dx-img { display: block; max-width: 100%; height: auto; min-width: 2rem; border-radius: 3px; background: #fff; image-rendering: auto; }
.dx-save { display: inline-block; font-size: 0.82rem; margin-top: 0.15rem; }
.dx-nopic, .dx-remote, .dx-missing { display: inline-block; font-size: 0.88rem; border-radius: 6px; padding: 0.05rem 0.45rem; margin: 0.1rem 0; white-space: normal; }
.dx-nopic, .dx-missing { background: var(--odd); color: var(--muted); border: 1px dashed var(--line); }
.dx-remote { background: var(--warn-bg); color: var(--warn-ink); }
.dx-box { display: block; border: 1px solid var(--line); border-radius: 6px; padding: 0.4rem 0.6rem; margin: 0.3rem 0; background: var(--odd); }
.dx-bp { display: block; white-space: pre-wrap; }
.dx-eq { font-family: var(--mono); font-size: 0.92em; }
.dx-doc ins, .dx-list2 ins, .dx-ins { color: var(--accent); text-decoration: underline; text-decoration-thickness: 2px; }
.dx-doc del, .dx-list2 del, .dx-del { color: var(--bad-ink); text-decoration: line-through; }
.dx-doc mark.dx-anchor { background: #fff0a8; color: inherit; border-radius: 2px; }
@media (prefers-color-scheme: dark) { .dx-doc mark.dx-anchor { background: #4a4214; } }
.dx-cref, .dx-noteref { font-size: 0.72em; }
.dx-cref a, .dx-noteref a { text-decoration: none; }
.dx-link { color: var(--accent); text-decoration: underline; }
.dx-nolink { cursor: help; }
.dx-sec { margin: 1.2rem 0; }
.dx-sec h3 { margin: 0 0 0.4rem; }
.dx-list2 { padding-left: 1.4rem; margin: 0.3rem 0; }
.dx-list2 li { margin: 0.45rem 0; overflow-wrap: anywhere; }
.dx-who { font-weight: 700; }
.dx-ctext, .dx-on, .dx-by { display: block; }
.dx-badge { display: inline-block; font-size: 0.8rem; font-weight: 700; border-radius: 5px; padding: 0 0.4rem; }
.dx-badge.dx-ins { background: var(--accent-soft); color: var(--accent); text-decoration: none; }
.dx-badge.dx-del { background: var(--bad-bg); color: var(--bad-ink); text-decoration: none; }
.dx-notes { padding-left: 1.4rem; font-size: 0.93rem; }
.dx-nlabel { color: var(--muted); }
.dx-pics { list-style: none; padding: 0; margin: 0.4rem 0; display: grid; gap: 0.5rem; }
.dx-pics li { display: flex; gap: 0.75rem; align-items: flex-start; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 0.5rem 0.7rem; overflow-wrap: anywhere; }
.dx-thumb { width: 4.5rem; height: 4.5rem; object-fit: contain; flex: none; background: #fff; border: 1px solid var(--line); border-radius: 4px; }
.dx-nothumb { width: 4.5rem; height: 4.5rem; flex: none; display: flex; align-items: center; justify-content: center; font: 600 0.8rem/1 var(--mono); color: var(--muted); border: 1px dashed var(--line); border-radius: 4px; }
.dx-pinfo { min-width: 0; }
.dx-alt { display: block; font-size: 0.9rem; }