/* =====================================================================
   Cyber Resilience Act - readable presentation
   Reader stylesheet. Re-skins the official EUR-Lex `oj-*` classes.
   The legal HTML in <main> is untouched; this layer only styles it.
   Design tokens are locally scoped so the iframe stays visually aligned
   with the host site's Cyber Sentinel neon theme without inheriting any
   parent variables (the reader is embedded in a `sandbox` iframe).
   ===================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* UI type matches the site's display/body stack; falls back gracefully
     because the iframe cannot access the parent's next/font faces. */
  --font-ui: "Rajdhani", "Exo 2", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Charter", "Iowan Old Style", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Light mode — aligned with site's [data-theme="light"] tokens. */
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --fg: #0f172a;
  --fg-soft: #1e293b;
  --muted: #475569;
  --faint: #64748b;
  --accent: #059669;
  --accent-soft: rgba(5, 150, 105, 0.10);
  --accent-fg: #ffffff;
  --border: rgba(15, 23, 42, 0.12);
  --border-strong: rgba(15, 23, 42, 0.22);
  --mark: rgba(5, 150, 105, 0.18);
  --mark-current: #10b981;
  --shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px rgba(15, 23, 42, .08);
  --topbar-bg: rgba(248, 250, 252, 0.85);
  --topbar-h: 56px;
  --sidebar-w: 312px;
  --maxw: 80ch;
  --radius: 10px;
}

/* Dark mode — aligned with site's default Cyber Sentinel palette. */
[data-theme="dark"] {
  --bg: #0a0e1a;
  --surface: #0d1225;
  --surface-2: #111830;
  --fg: #e8edf5;
  --fg-soft: #c8d1e0;
  --muted: #6b7fa3;
  --faint: #3d4f6f;
  --accent: #00ffc8;
  --accent-soft: rgba(0, 255, 200, 0.12);
  --accent-fg: #060a14;
  --border: rgba(0, 255, 200, 0.10);
  --border-strong: rgba(0, 255, 200, 0.28);
  --mark: rgba(0, 255, 200, 0.20);
  --mark-current: #00ffc8;
  --shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 12px 34px rgba(0, 0, 0, .55), 0 0 24px rgba(0, 255, 200, 0.08);
  --topbar-bg: rgba(6, 10, 20, 0.82);
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }
/* scroll-behavior 必须为 auto：本页在沙箱 iframe（sandbox="allow-scripts"）中运行，
   smooth 滚动动画会被提前取消导致锚点跳转不生效（TOC/深链/搜索定位全部失灵） */
html { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Scrollbars picked up from the site's neon aesthetic. */
[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg); }
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(107, 127, 163, 0.35); border-radius: 4px;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(0, 255, 200, 0.4); }

/* ---------- Language modes ---------- */
.zh-block { display: none; }
body[data-lang="en"] .zh-block { display: none !important; }

body[data-lang="zh"] [data-zh-id].has-zh-block { display: none !important; }
body[data-lang="zh"] .zh-block { display: block; }

body[data-lang="bi"] .zh-block {
  display: block; margin-top: 0.4em; margin-bottom: 0.8em;
  padding-left: 1em; border-left: 3px solid var(--accent-soft);
  color: var(--fg-soft); font-style: normal;
}
body[data-lang="bi"] .zh-block.oj-ti-art,
body[data-lang="bi"] .zh-block.oj-ti-section-1,
body[data-lang="bi"] .zh-block.oj-ti-section-2,
body[data-lang="bi"] .zh-block.oj-ti-grseq-1,
body[data-lang="bi"] .zh-block.oj-doc-ti {
  margin-top: 0; margin-bottom: 0; padding-left: 0; border-left: none;
  color: var(--muted);
}
body[data-lang="bi"] .eli-main-title .zh-block { color: var(--muted); }

/* TOC language toggling */
.toc-en { display: inline; }
.toc-zh { display: none; }
body[data-lang="zh"] .toc-en { display: none; }
body[data-lang="zh"] .toc-zh { display: inline; }
body[data-lang="bi"] .toc-zh { display: inline; margin-left: 0.4em; opacity: .7; }

/* ---------- Progress bar ---------- */
.progress-bar {
  position: fixed; top: 0; left: 0; z-index: 60;
  height: 3px; width: 0;
  background: linear-gradient(90deg, var(--accent), #0088ff);
  transition: width .08s linear;
}
[data-theme="dark"] .progress-bar {
  box-shadow: 0 0 12px rgba(0, 255, 200, 0.45);
}

/* ---------- Topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px;
  background: var(--topbar-bg);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar-title { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.topbar-title .t-title {
  font-family: var(--font-ui);
  font-weight: 700; font-size: 15px; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--fg);
}
[data-theme="dark"] .topbar-title .t-title { color: var(--accent); text-shadow: 0 0 12px rgba(0, 255, 200, 0.35); }
.topbar-title .t-sub {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--muted);
  letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}

.search-wrap { margin-left: auto; position: relative; display: flex; align-items: center; gap: 6px; }
#searchInput {
  width: 220px; max-width: 38vw;
  height: 34px; padding: 0 12px;
  font: inherit; font-size: 13.5px;
  color: var(--fg); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 8px;
  outline: none; transition: border-color .15s, box-shadow .15s, width .2s;
}
#searchInput::placeholder { color: var(--faint); }
#searchInput:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search-nav { display: flex; align-items: center; gap: 2px; }
.search-nav[hidden] { display: none; }
.search-count {
  font-size: 12px; color: var(--muted); padding: 0 6px;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; min-width: 34px; padding: 0 8px;
  font-size: 15px; color: var(--fg-soft);
  background: transparent; border: 1px solid transparent; border-radius: 8px;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.icon-btn:hover {
  background: var(--accent-soft); color: var(--accent); border-color: var(--border-strong);
}
[data-theme="dark"] .icon-btn:hover { box-shadow: 0 0 12px rgba(0, 255, 200, 0.15); }
.menu-btn { display: none; }

.lang-switch {
  display: flex; align-items: center; gap: 2px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 2px; margin-left: 8px;
}
.lang-btn {
  border: none; background: transparent; color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  padding: 5px 9px; border-radius: 6px;
  cursor: pointer; transition: background .15s, color .15s, box-shadow .15s;
}
.lang-btn:hover { color: var(--fg); }
.lang-btn.active {
  background: var(--surface); color: var(--accent);
  box-shadow: 0 0 0 1px var(--border-strong);
}
[data-theme="dark"] .lang-btn.active {
  background: var(--accent-soft); color: var(--accent);
  box-shadow: 0 0 0 1px var(--border-strong), 0 0 10px rgba(0, 255, 200, 0.18);
}

/* ---------- Layout ---------- */
.layout { display: flex; align-items: flex-start; }
.sidebar {
  position: sticky; top: var(--topbar-h);
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto; overflow-x: hidden;
  padding: 18px 10px 60px;
  background: var(--surface);
  border-right: 1px solid var(--border);
}
.content {
  flex: 1 1 auto; min-width: 0;
  padding: 40px 32px 120px;
}
.content > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }

/* ---------- TOC ---------- */
.toc { font-family: var(--font-ui); font-size: 13.5px; }
.toc .toc-label {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); padding: 4px 12px 8px; font-weight: 600;
}
.toc > a {
  display: block; padding: 5px 12px; border-radius: 6px;
  color: var(--muted); line-height: 1.35;
}
.toc > a:hover { background: var(--surface-2); color: var(--fg); text-decoration: none; }
.toc details { margin: 0; }
.toc summary {
  list-style: none; cursor: pointer;
  padding: 5px 12px; border-radius: 6px;
  color: var(--fg-soft); font-weight: 600; font-size: 13px;
  display: flex; align-items: baseline; gap: 6px;
  user-select: none;
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary::before {
  content: "▸"; font-size: 10px; color: var(--faint);
  transition: transform .15s; display: inline-block;
}
.toc details[open] > summary::before { transform: rotate(90deg); color: var(--accent); }
.toc summary:hover { background: var(--surface-2); }
.toc summary .sum-sub { color: var(--muted); font-weight: 400; font-size: 12px; }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li > a {
  display: block; padding: 4px 12px 4px 26px;
  color: var(--muted); border-left: 2px solid transparent;
  line-height: 1.35; border-radius: 0 6px 6px 0;
  transition: color .15s, background .15s, border-left-color .15s;
}
.toc li > a:hover { color: var(--fg); background: var(--surface-2); text-decoration: none; }
.toc li > a.active {
  color: var(--accent); background: var(--accent-soft);
  border-left-color: var(--accent); font-weight: 600;
}
[data-theme="dark"] .toc li > a.active { text-shadow: 0 0 8px rgba(0, 255, 200, 0.35); }
.toc .toc-art-num {
  color: var(--faint); font-family: var(--font-mono);
  font-variant-numeric: tabular-nums; margin-right: 4px;
}
.toc li > a.active .toc-art-num { color: var(--accent); }
.toc .toc-group { margin-bottom: 4px; }
.toc-backtop {
  display: block; margin: 10px 12px 0; padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--border); border-radius: 8px; text-align: center;
  transition: color .15s, border-color .15s, background .15s, box-shadow .15s;
}
.toc-backtop:hover {
  background: var(--accent-soft); color: var(--accent);
  border-color: var(--border-strong); text-decoration: none;
}

/* ---------- Reading column: source banner (OJ header) ---------- */
.content table:has(.oj-hd-ti),
.content table:has(.oj-hd-uniq) {
  display: flex; width: 100%; border: none; margin: 0;
  background: var(--surface-2); border: 1px solid var(--border);
}
.content table:has(.oj-hd-ti) { border-radius: var(--radius) var(--radius) 0 0; border-bottom: none; }
.content table:has(.oj-hd-uniq) { border-radius: 0 0 var(--radius) var(--radius); border-top: 1px solid var(--border); }
.content table:has(.oj-hd-ti) > tbody,
.content table:has(.oj-hd-uniq) > tbody { display: flex; width: 100%; }
.content table:has(.oj-hd-ti) > tbody > tr,
.content table:has(.oj-hd-uniq) > tbody > tr { display: flex; width: 100%; align-items: center; gap: 12px; padding: 8px 14px; }
.content table:has(.oj-hd-ti) td,
.content table:has(.oj-hd-uniq) td { display: block; border: none; padding: 0; }
.content table:has(.oj-hd-ti) td:empty,
.content table:has(.oj-hd-uniq) td:empty { display: none; }
.content table:has(.oj-hd-ti) td:nth-child(2),
.content table:has(.oj-hd-uniq) td:nth-child(2) { flex: 1 1 auto; }
.content table:has(.oj-hd-ti) td:last-child,
.content table:has(.oj-hd-uniq) td:last-child { text-align: right; }
.content table:has(.oj-hd-ti) img { height: 28px; width: auto; display: block; filter: none; }
[data-theme="dark"] .content table:has(.oj-hd-ti) img { filter: brightness(1.05) saturate(1.1); }
.oj-hd-ti { font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: var(--muted); margin: 0; }
.oj-hd-lg, .oj-hd-coll {
  font-family: var(--font-mono);
  font-size: 10.5px; color: var(--faint); margin: 0;
  letter-spacing: .08em; text-transform: uppercase;
}
.oj-hd-uniq {
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 600; color: var(--accent); margin: 0;
  letter-spacing: .04em;
}
.oj-hd-date { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin: 0; }
.content > hr.oj-separator:first-of-type { display: none; }

/* ---------- Document main title ---------- */
.eli-main-title {
  text-align: center; margin: 32px 0 8px; padding-bottom: 26px;
  border-bottom: 1px solid var(--border);
}
.eli-main-title .oj-doc-ti:first-child {
  font-family: var(--font-ui);
  font-size: 24px; font-weight: 700; letter-spacing: -.005em;
  color: var(--fg); margin: 0 0 12px; line-height: 1.22;
}
[data-theme="dark"] .eli-main-title .oj-doc-ti:first-child {
  background: linear-gradient(135deg, var(--accent), #0088ff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.eli-main-title .oj-doc-ti { font-family: var(--font-ui); font-size: 14.5px; color: var(--fg-soft); margin: 4px 0; line-height: 1.45; }
.eli-main-title .oj-doc-ti:last-child { font-size: 12.5px; color: var(--muted); font-style: italic; }

/* ---------- Headings: chapters / articles ---------- */
.oj-ti-section-1 {
  font-family: var(--font-ui);
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  margin: 48px 0 2px; padding-top: 18px; border-top: 2px solid var(--accent);
  scroll-margin-top: calc(var(--topbar-h) + 16px); position: relative;
}
[data-theme="dark"] .oj-ti-section-1 { text-shadow: 0 0 12px rgba(0, 255, 200, 0.30); }
.oj-ti-section-2 {
  font-family: var(--font-ui);
  font-size: 22px; font-weight: 700; letter-spacing: -.005em;
  color: var(--fg); margin: 0 0 20px; line-height: 1.28;
}
.oj-ti-grseq-1 { /* annex part titles */
  font-family: var(--font-ui);
  font-size: 17px; font-weight: 700; color: var(--fg);
  margin: 32px 0 10px; padding-top: 14px; border-top: 1px solid var(--border);
  scroll-margin-top: calc(var(--topbar-h) + 16px); position: relative;
}

.eli-subdivision[id^="art_"] > .oj-ti-art,
.eli-subdivision > p.oj-ti-art {
  font-family: var(--font-ui);
  font-size: 16.5px; font-weight: 700; color: var(--fg);
  margin: 28px 0 2px; scroll-margin-top: calc(var(--topbar-h) + 16px);
  position: relative;
}
.oj-sti-art {
  font-family: var(--font-ui);
  font-size: 13px; font-weight: 500; font-style: normal;
  color: var(--muted); margin: 0 0 14px; letter-spacing: .01em;
  text-transform: none;
}
/* link-copy affordance injected by JS */
.anchor-link {
  position: absolute; left: -26px; top: 4px;
  opacity: 0; transition: opacity .15s, color .15s;
  font-size: 14px; color: var(--faint); padding: 2px 4px;
}
.anchor-link:hover { color: var(--accent); text-decoration: none; }
.oj-ti-art:hover .anchor-link, .oj-ti-section-1:hover .anchor-link, .oj-ti-grseq-1:hover .anchor-link { opacity: 1; }

/* ---------- Body text ---------- */
.oj-normal {
  font-family: var(--font-body); font-size: 16.5px; line-height: 1.78;
  color: var(--fg); margin: 0 0 12px; text-align: justify; hyphens: auto;
}
.oj-bold { font-weight: 700; }
.oj-italic { font-style: italic; }
.oj-enumeration-spacing { letter-spacing: .02em; }
.normal { font-family: var(--font-body); font-size: 16.5px; line-height: 1.78; margin: 0 0 12px; }

/* ---------- Layout tables -> clean indented lists (HTML untouched) ---------- */
.content table:not(.oj-table):not(:has(.oj-hd-ti)):not(:has(.oj-hd-uniq)) {
  display: block; width: 100%; margin: 0 0 10px; border: none; background: transparent;
}
.content table:not(.oj-table):not(:has(.oj-hd-ti)):not(:has(.oj-hd-uniq)) > colgroup,
.content table:not(.oj-table):not(:has(.oj-hd-ti)):not(:has(.oj-hd-uniq)) > col { display: none; }
.content table:not(.oj-table):not(:has(.oj-hd-ti)):not(:has(.oj-hd-uniq)) > tbody { display: block; }
.content table:not(.oj-table):not(:has(.oj-hd-ti)):not(:has(.oj-hd-uniq)) > tbody > tr {
  display: flex; align-items: baseline; gap: .6em;
  padding-left: 2.4em; text-indent: -2.4em; margin: 0;
}
.content table:not(.oj-table):not(:has(.oj-hd-ti)):not(:has(.oj-hd-uniq)) > tbody > tr > td {
  display: block; border: none; padding: 0; vertical-align: baseline; background: transparent;
}
.content table:not(.oj-table):not(:has(.oj-hd-ti)):not(:has(.oj-hd-uniq)) > tbody > tr > td:first-child {
  min-width: 2.2em; text-indent: 0;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.content table:not(.oj-table):not(:has(.oj-hd-ti)):not(:has(.oj-hd-uniq)) > tbody > tr > td:last-child { flex: 1 1 auto; text-indent: 0; }
.content table:not(.oj-table):not(:has(.oj-hd-ti)):not(:has(.oj-hd-uniq)) p {
  margin: 0 0 4px; font-family: var(--font-body); font-size: 16.5px; line-height: 1.78; color: var(--fg);
}

/* nested enumeration inside a cell */
.oj-normal table, .oj-normal td { font-size: 16.5px; }

/* ---------- Real data tables ---------- */
table.oj-table {
  width: 100%; margin: 16px 0 20px; border-collapse: collapse;
  font-family: var(--font-ui); font-size: 13.5px; line-height: 1.55;
  display: block; overflow-x: auto; white-space: nowrap;
  background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
}
table.oj-table tbody { display: table; width: 100%; }
table.oj-table td, table.oj-table th {
  border: 1px solid var(--border); padding: 9px 13px; vertical-align: top;
  text-align: left; white-space: normal; color: var(--fg);
}
table.oj-table th { color: var(--accent); font-weight: 600; letter-spacing: .02em; background: var(--surface-2); }
table.oj-table tr:nth-child(even) td { background: var(--surface-2); }
table.oj-table p { margin: 0; font-size: 13.5px; color: var(--fg); }
.oj-tbl-txt { font-family: var(--font-ui); font-size: 13.5px; color: var(--fg); }

/* ---------- Footnotes ---------- */
hr.oj-note { border: none; border-top: 1px solid var(--border); margin: 40px 0 12px; }
.oj-note {
  font-family: var(--font-body); font-size: 12.5px; line-height: 1.6; color: var(--muted);
  margin: 0 0 6px; padding-left: 1.6em; text-indent: -1.6em;
}
.oj-note a, .oj-note .oj-super { color: var(--accent); }
.oj-super, .oj-note-tag { font-size: .72em; vertical-align: super; line-height: 0; }
.oj-note-tag { color: var(--accent); font-weight: 600; }

/* footnote anchor in body */
a[id^="ntc"] { color: var(--accent); cursor: pointer; }
a[id^="ntc"]:hover { text-decoration: none; }
a[id^="ntc"] .oj-note-tag { font-size: .7em; }

/* ---------- Signatory / final ---------- */
.oj-signatory { font-family: var(--font-body); font-size: 15.5px; margin: 20px 0 8px; line-height: 1.65; color: var(--fg-soft); }
.oj-signatory p { margin: 2px 0; }
.oj-final { font-family: var(--font-body); font-size: 15.5px; margin: 24px 0 8px; line-height: 1.65; color: var(--fg-soft); }
.oj-doc-end, hr.oj-doc-end { border: none; border-top: 2px solid var(--border-strong); margin: 44px 0 18px; }
.oj-doc-sep { border: none; border-top: 1px dashed var(--border); margin: 30px 0; }
hr.oj-separator { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
.eli-container { max-width: none; }

/* anchor targets: keep clear of the sticky topbar on fragment jumps */
#tit_1, #pbl_1,
div[id^="cpt_"]:not([id*="."]),
div.eli-subdivision[id^="art_"],
div.eli-container[id^="anx_"],
.oj-ti-art, .oj-ti-section-1, .oj-ti-grseq-1 {
  scroll-margin-top: calc(var(--topbar-h) + 16px);
}

/* annex wrapper heading */
.eli-subdivision[id^="anx_"] { margin-top: 32px; }

/* ---------- Search highlight ---------- */
mark { background: var(--mark); color: inherit; padding: 0 2px; border-radius: 2px; }
mark.current { background: var(--mark-current); color: #0a0e1a; box-shadow: 0 0 0 2px var(--mark-current); }
[data-theme="dark"] mark.current { color: #060a14; box-shadow: 0 0 0 2px var(--mark-current), 0 0 12px rgba(0, 255, 200, 0.55); }

/* ---------- Footnote popover ---------- */
.popover {
  position: fixed; z-index: 70; max-width: 360px;
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 12px 14px;
  font-family: var(--font-body); font-size: 13px; line-height: 1.6;
}
.popover .pv-num { font-family: var(--font-mono); font-weight: 700; color: var(--accent); margin-right: 4px; }
.popover .pv-close {
  position: absolute; top: 6px; right: 8px; cursor: pointer;
  color: var(--faint); font-size: 14px; border: none; background: none;
}
.popover .pv-close:hover { color: var(--accent); }
.popover .pv-source { display: block; margin-top: 8px; font-size: 11px; color: var(--faint); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 80; background: var(--fg); color: var(--bg);
  padding: 9px 16px; border-radius: 8px; font-size: 13px;
  font-family: var(--font-mono); letter-spacing: .04em;
  box-shadow: var(--shadow); opacity: 0; transition: opacity .2s, transform .2s;
  pointer-events: none;
}
[data-theme="dark"] .toast {
  background: var(--surface); color: var(--accent);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow), 0 0 22px rgba(0, 255, 200, 0.20);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .menu-btn { display: inline-flex; }
  .sidebar {
    position: fixed; top: var(--topbar-h); left: 0; z-index: 45;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: var(--shadow);
  }
  .sidebar.open { transform: translateX(0); }
  .scrim { position: fixed; inset: var(--topbar-h) 0 0 0; background: rgba(0, 0, 0, .5); z-index: 44; }
  .content { padding: 24px 18px 100px; }
  .topbar-title .t-sub { display: none; }
  #searchInput { width: 150px; }
}
@media (max-width: 560px) {
  .search-wrap { margin-left: auto; }
  #searchInput { width: 120px; max-width: 42vw; }
  .oj-normal, .content table:not(.oj-table) p, .normal { font-size: 15.5px; }
  .eli-main-title .oj-doc-ti:first-child { font-size: 20px; }
  .oj-ti-section-2 { font-size: 19px; }
  .content { padding: 20px 14px 96px; }
}

/* ---------- Print ---------- */
@media print {
  .topbar, .sidebar, .progress-bar, .toast, .popover, .scrim, .anchor-link,
  .search-nav, #searchInput { display: none !important; }
  .layout { display: block; }
  .content { padding: 0; max-width: none; }
  .content > * { max-width: none; }
  body { background: #fff !important; color: #000 !important; font-size: 11pt; }
  .oj-normal, .normal, .content table:not(.oj-table) p { font-size: 11pt; color: #000 !important; }
  .eli-main-title { page-break-after: avoid; }
  .eli-main-title .oj-doc-ti:first-child {
    background: none !important; -webkit-text-fill-color: #000 !important; color: #000 !important;
  }
  .oj-ti-section-1, .oj-ti-section-2, .oj-ti-art, .oj-sti-art, .oj-ti-grseq-1 { page-break-after: avoid; color: #000 !important; text-shadow: none !important; }
  .eli-subdivision, .oj-note { break-inside: avoid-page; }
  a { color: #000 !important; text-decoration: none; }
  .oj-ti-section-1 { color: #000 !important; border-top-color: #000; }
  details > * { display: block !important; }
  mark { background: transparent !important; color: #000 !important; box-shadow: none !important; }
  .content table:has(.oj-hd-ti), .content table:has(.oj-hd-uniq) { background: transparent; border-color: #ccc; }
  .oj-hd-uniq, .oj-note-tag, .oj-super { color: #000 !important; }
  .content table:not(.oj-table):not(:has(.oj-hd-ti)):not(:has(.oj-hd-uniq)) > tbody > tr > td:first-child { color: #000 !important; }
}