/* Ported from docs/mockup/sarafi-desk.html (colours, chips, tables, layout). Fonts are local only. */
@font-face {
  font-family: "Vazirmatn";
  src: url("fonts/vazirmatn-subset.9ed0217e19bf.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --bg: #edf1f0;
  --surface: #ffffff;
  --sunk: #f5f7f6;
  --ink: #15201d;
  --muted: #5d6b66;
  --line: #d5ddda;
  --accent: #1b5e74;
  --accent-ink: #ffffff;
  --accent-soft: #e0edf1;
  --ok: #2b744a; --ok-soft: #e3f2e8;
  --warn: #8f5d00; --warn-soft: #fbefd6;
  --bad: #b3261e; --bad-soft: #fbe6e4;
  --idle: #5f6b76; --idle-soft: #eceff2;
  --font: "Vazirmatn", "Tahoma", sans-serif;
  --mono: ui-monospace, Consolas, monospace;
  --field-line: #8a9893;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1514; --surface: #172120; --sunk: #131b1a; --ink: #e4ebe8; --muted: #95a5a0; --line: #2a3633; --field-line: #5d6e69;
    --accent: #6fb7cc; --accent-ink: #0b1a1f; --accent-soft: #19323a;
    --ok: #6cc28f; --ok-soft: #173022; --warn: #e2b35a; --warn-soft: #33280f; --bad: #f08a80; --bad-soft: #3a1a17;
    --idle: #a3adb6; --idle-soft: #232b31;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1514; --surface: #172120; --sunk: #131b1a; --ink: #e4ebe8; --muted: #95a5a0; --line: #2a3633; --field-line: #5d6e69;
  --accent: #6fb7cc; --accent-ink: #0b1a1f; --accent-soft: #19323a;
  --ok: #6cc28f; --ok-soft: #173022; --warn: #e2b35a; --warn-soft: #33280f; --bad: #f08a80; --bad-soft: #3a1a17;
  --idle: #a3adb6; --idle-soft: #232b31;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 14.5px; line-height: 1.7; direction: rtl; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--surface); }
button, input, select, textarea { font: inherit; color: inherit; }
.wrap { max-width: 1180px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--surface); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; flex-direction: column; gap: 6px; padding-block: 10px; }
.brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.brand h1 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.brand .demo { font-size: 12px; color: var(--warn); background: var(--warn-soft); padding: 1px 8px; border-radius: 3px; margin-inline-start: 8px; font-weight: 500; }
.role { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.role select { border: 1px solid var(--line); background: var(--sunk); border-radius: 6px; padding: 4px 8px; color: var(--ink); }

main.wrap { padding-block: 20px 80px; display: flex; flex-direction: column; gap: 18px; }
h2 { margin: 0; font-size: 19px; font-weight: 800; text-wrap: balance; }
h3 { margin: 0; font-size: 15.5px; font-weight: 700; }
.sub { color: var(--muted); font-size: 13px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.section-head { position: relative; display: flex; align-items: baseline; gap: 6px 10px; flex-wrap: wrap; }
.section-head > form, .section-head > .btns, .section-head > .btn { margin-inline-start: auto; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 820px) { .grid2 { grid-template-columns: minmax(0, 1fr); } }

.list { display: flex; flex-direction: column; }
.row { display: grid; grid-template-columns: 4.2em minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 4px; border-top: 1px solid var(--line); cursor: pointer; text-align: start; background: none; border-inline: 0; border-bottom: 0; width: 100%; color: inherit; }
.row:first-child { border-top: 0; }
button.row:hover { background: var(--sunk); }
.row .id { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.row .main { min-width: 0; display: flex; flex-direction: column; }
.row .line1 { font-weight: 500; }
.row .line2 { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .btns.full { grid-column: 1 / -1; } /* D65: the delivery form with its serials box takes a line of its own */
.empty { color: var(--muted); font-size: 13px; padding: 8px 4px; }

.chip { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 10px; white-space: nowrap; font-weight: 500; }
.c-idle { background: var(--idle-soft); color: var(--idle); }
.c-acc { background: var(--accent-soft); color: var(--accent); }
.c-ok { background: var(--ok-soft); color: var(--ok); }
.c-warn { background: var(--warn-soft); color: var(--warn); }
.c-bad { background: var(--bad-soft); color: var(--bad); }

.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th, td { text-align: start; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { color: var(--muted); font-weight: 500; font-size: 12.5px; white-space: nowrap; }
td.num, th.num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.acc { font-family: var(--mono); direction: ltr; unicode-bidi: isolate; font-size: 12.5px; }

.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 12px; }
label.f { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--muted); min-width: 0; }
label.f input, label.f select, textarea, td input { border: 1px solid var(--line); background: var(--sunk); border-radius: 6px; padding: 6px 8px; color: var(--ink); font-size: 14px; min-width: 0; width: 100%; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.missing input, .missing select { border-color: var(--warn); background: var(--warn-soft); }
.words { font-size: 12.5px; color: var(--muted); }
.total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 8px 10px; background: var(--sunk); border-radius: 6px; }
.total b { font-size: 17px; }
.check { font-size: 12.5px; }
.check.ok { color: var(--ok); } .check.bad { color: var(--bad); } .check.warn { color: var(--warn); }

.tools { justify-content: flex-end; margin-bottom: 8px; }
.btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.btn { border: 1px solid var(--line); background: var(--surface); border-radius: 6px; padding: 6px 14px; cursor: pointer; font-weight: 500; }
.btn:hover:not(:disabled) { background: var(--sunk); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover:not(:disabled) { filter: brightness(1.08); background: var(--accent); }
.btn.good { border-color: var(--ok); color: var(--ok); }
.btn.danger { border-color: var(--bad); color: var(--bad); }
.btn.sm { padding: 2px 10px; font-size: 12.5px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.why { font-size: 12px; color: var(--muted); }
.link { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0; font-weight: 500; }

.dealhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.dealhead .big { font-size: 20px; font-weight: 800; }
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; font-size: 13.5px; margin: 0; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; }
.source { background: var(--sunk); border: 1px dashed var(--line); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.source .msg { white-space: pre-wrap; font-size: 14px; }
.source .who { font-size: 12px; color: var(--muted); }
.note { padding: 8px 12px; border-radius: 6px; font-size: 13px; }
.note.warn { background: var(--warn-soft); color: var(--warn); }
.note.bad { background: var(--bad-soft); color: var(--bad); }
.note.ok { background: var(--ok-soft); color: var(--ok); }
.note.info { background: var(--accent-soft); color: var(--accent); }
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.timeline li { display: grid; grid-template-columns: 3.4em minmax(0, 1fr); gap: 8px; }
.timeline .t { color: var(--muted); font-variant-numeric: tabular-nums; }
.timeline .p { color: var(--muted); }
textarea.wa { min-height: 150px; font-size: 13px; line-height: 1.8; resize: vertical; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.slot { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.slot.closed { opacity: .6; }
.bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--idle-soft); }
.bar i { display: block; height: 100%; }
.bar .b-ok { background: var(--ok); } .bar .b-warn { background: var(--warn); } .bar .b-idle { background: var(--idle); opacity: .55; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--muted); }
.legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-inline-end: 4px; vertical-align: middle; }
.lg-ok::before { background: var(--ok); } .lg-warn::before { background: var(--warn); } .lg-idle::before { background: var(--idle); opacity: .55; } .lg-free::before { background: var(--idle-soft); border: 1px solid var(--line); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; }
.stat .v { font-size: 21px; font-weight: 800; line-height: 1.4; }
.stat .l { font-size: 12.5px; color: var(--muted); }

.toast { position: fixed; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 8px 18px; border-radius: 8px; font-size: 13.5px; z-index: 20; max-width: calc(100% - 32px); }
details.guide summary { cursor: pointer; font-weight: 700; }
details.guide ol { margin: 8px 0 0; padding-inline-start: 1.4em; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.pillset { display: flex; gap: 6px; flex-wrap: wrap; }
.pillset button { border: 1px solid var(--line); background: var(--surface); border-radius: 14px; padding: 2px 12px; cursor: pointer; font-size: 13px; }
.pillset button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
@media (prefers-reduced-motion: no-preference) { .row, .btn { transition: background-color .12s; } }

/* web-port additions */
body { margin: 0; }
td.num, th.num, .money { font-variant-numeric: tabular-nums; }
.brand .who { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.brand .who b { color: var(--ink); font-weight: 500; }
a.row { text-decoration: none; }
a.row:hover { background: var(--sunk); }
a.link { text-decoration: none; }
form.inline { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0; }
form.inline input { border: 1px solid var(--line); background: var(--sunk); border-radius: 6px; padding: 3px 8px; min-width: 0; width: 12em; }
.msgs { display: flex; flex-direction: column; gap: 6px; }
.login { max-width: 360px; margin: 10vh auto; }
a.btn { text-decoration: none; color: var(--ink); }
a.btn.primary { color: var(--accent-ink); }
form.inline input[type="checkbox"] { width: auto; }
td > input { max-width: 10em; }
tfoot th, tfoot td { border-bottom: 0; }

@media print {
  .side, .noprint, form, .btns, .btn, .msgs { display: none !important; }
  .shell.has-side { display: block; }
  body { background: #fff; color: #000; font-size: 12px; }
  .top { position: static; border: 0; }
  .panel, .slot, .stat { border-color: #999; }
  .slot, .stat, tr { break-inside: avoid; }  /* panels may hold long tables: let them break, keep rows whole */
  .grid2 { grid-template-columns: minmax(0, 1fr); }
  a { color: inherit; text-decoration: none; }
  .scroll { overflow: visible; }
  .chip { background: none !important; border: 1px solid currentColor; padding: 0 4px; }
  /* the trial balance has 8 columns: landscape and tighter cells keep every column on the page */
  @page { size: A4 landscape; margin: 10mm; }
  /* S19: one-party documents (deal, statement) read top to bottom: portrait */
  @page doc { size: A4 portrait; margin: 12mm; }
  body.doc { page: doc; }
  table { font-size: 10.5px; }
  th, td { padding: 4px 5px; }
  th { white-space: normal; }
}

/* D54: the bug-report button and its popover, on every page (Bayaar Mini's button, our colours). */
.fb-fab {
  position: fixed; left: 12px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 50;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--surface); color: var(--accent); border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .14); transition: border-color .15s, transform .15s;
}
.fb-fab:hover { border-color: var(--accent); transform: translateY(-1px); }
.fb-fab:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.fb-pop {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto;
  margin: auto; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--ink); font-family: var(--font); direction: rtl;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}
.fb-pop::backdrop { background: rgba(10, 16, 15, .45); }
.fb-pop h2 { font-size: 1.05rem; margin: 0; }
.fb-pop .f { display: grid; gap: 4px; margin-top: 10px; }
.fb-pop textarea, .fb-pop input:not([type=file]), .fb-pop select { width: 100%; box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) { .fb-fab { transition: none; } .fb-fab:hover { transform: none; } }
@media print { .fb-fab, .fb-pop { display: none !important; } }

/* D56: onboarding checklist */
.welcome { border-inline-start: 4px solid var(--accent); }
.welcome-steps { margin: 6px 0; padding-inline-start: 1.4em; display: grid; gap: 6px; }

/* D57 + UX review 2026-11-12: section tooltips. The bubble hangs under the heading row (so it never
   leaves the viewport), is out of layout while hidden (no sideways scroll), and stays while the pointer
   is on it. Esc and tap-outside close it (app.js). */
.hint {
  display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; margin-inline-start: -2px;
  border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--muted);
  font: inherit; font-size: .75rem; font-weight: 700; line-height: 1; cursor: help; align-self: center;
}
.hint:hover, .hint.open, .hint:focus-visible { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.tip {
  display: none; position: absolute; top: 100%; inset-inline-start: 0; z-index: 40; margin-top: 4px;
  width: max-content; max-width: min(440px, 100%); padding: 8px 12px; border-radius: 8px;
  background: var(--ink); color: var(--surface); font-size: .84rem; font-weight: 400; line-height: 1.8;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
}
.tip::before { content: ""; position: absolute; inset-inline: 0; bottom: 100%; height: 16px; }
.hint:hover + .tip, .hint:focus-visible + .tip, .hint.open + .tip, .tip:hover { display: block; }
.hints-off .tip { display: none !important; }

/* UX review 2026-11-12 (docs/ux-review-2026-11-12.md) */
:root { accent-color: var(--accent); }
html { scroll-padding-top: 90px; scroll-padding-bottom: 72px; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
.btn { display: inline-block; }
label.f input, label.f select, textarea, td input, form.inline input, form.inline select { border-color: var(--field-line); }
.missing .why { color: var(--warn); font-weight: 700; }
tbody tr:hover td { background: var(--sunk); }
td.empty { text-align: center; padding: 18px 8px; }
.timeline li.empty { display: block; }
progress { accent-color: var(--accent); height: 8px; }
.skip { position: absolute; inset-inline-start: 8px; top: -60px; z-index: 60; background: var(--surface); padding: 6px 12px; border-radius: 6px; }
.skip:focus { top: 8px; }
.login h1 { margin: 0; font-size: 20px; font-weight: 800; }
.fb-pop input[type=file]::file-selector-button { font: inherit; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 6px; padding: 4px 12px; margin-inline-end: 8px; }
body.board .fb-fab { background: #161b22; border-color: #30363d; color: #9aa4af; }
@media (max-width: 600px) { .fb-fab { width: 40px; height: 40px; left: 8px; } }
.welcome { padding-block: 10px; gap: 6px; }
.welcome .welcome-steps { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; list-style: none; }
a.stat { display: block; color: inherit; text-decoration: none; } a.stat:hover { border-color: var(--accent); }
.brand .who .search input { width: 13em; padding: 4px 8px; font-size: 12.5px; } @media (max-width: 640px) { .brand .who { flex-wrap: wrap; } .brand .who .search input { width: 100%; } }

/* Backlog N: the grouped sidebar. A native popover, so the phone menu opens without JavaScript;
   from 900px it is a sticky column on the start (right) side. One-item groups are plain links. */
.side { box-sizing: border-box; padding: 10px 8px 24px; background: var(--surface); color: var(--ink); font-size: 14px; overflow-y: auto; }
.side details { border-bottom: 1px solid var(--line); padding-block: 2px; }
.side summary { cursor: pointer; padding: 8px 10px; font-weight: 700; border-radius: 6px; list-style-position: inside; }
.side summary:hover { background: var(--sunk); }
.side a { display: block; padding: 6px 12px; margin-inline-start: 10px; border-radius: 6px; color: var(--muted); text-decoration: none; border-inline-start: 3px solid transparent; }
.side a.solo { margin-inline-start: 0; padding: 8px 10px; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--line); border-radius: 0; }
.side a:hover { color: var(--ink); background: var(--sunk); }
.side a[aria-current="page"] { color: var(--ink); background: var(--accent-soft); border-inline-start-color: var(--accent); font-weight: 700; }
.side summary:focus-visible, .side a:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.side[popover] { margin: 0; inset: 0 0 0 auto; width: min(300px, 86vw); height: 100%; max-height: none; border: 0; border-inline-end: 1px solid var(--line); box-shadow: 0 0 40px rgba(0, 0, 0, .3); }
.side::backdrop { background: rgba(10, 16, 15, .45); }
@media screen and (min-width: 900px) {
  .menu-btn { display: none; }
  body:has(.has-side) .top .wrap { max-width: 1440px; }
  .shell.has-side { display: grid; grid-template-columns: 230px minmax(0, 1fr); max-width: 1440px; margin: 0 auto; }
  .shell.has-side > main { min-width: 0; width: 100%; }
  .side[popover] { display: block; position: sticky; inset: 60px auto auto; width: auto; height: auto; max-height: calc(100vh - 60px); border: 0; border-inline-end: 1px solid var(--line); box-shadow: none; align-self: start; background: transparent; }
}
@media print { .side { display: none !important; } }

/* D67 (backlog V): report charts, inline SVG from web/templatetags/charts.py. The viewBox stretches
   (preserveAspectRatio none), so strokes don't scale and dots are round-capped zero-length lines. */
.chart-box { margin: 4px 0 10px; }
svg.chart { display: block; width: 100%; overflow: visible; }
svg.chart.cols { height: 150px; }
svg.chart.steps { height: 220px; }
svg.chart.hbar { height: 22px; }
svg.chart.spark { height: 26px; margin-top: 6px; }
svg.chart line, svg.chart polyline { vector-effect: non-scaling-stroke; fill: none; }
svg.chart .axis { stroke: var(--line); stroke-width: 1; }
svg.chart .pos, .chart-legend .sw.pos { fill: var(--ok); background: var(--ok); }
svg.chart .neg, .chart-legend .sw.neg { fill: var(--bad); background: var(--bad); }
svg.chart .acc, .chart-legend .sw.acc { fill: var(--accent); background: var(--accent); }
svg.chart .idle, .chart-legend .sw.idle { fill: var(--idle); background: var(--idle); }
svg.chart .tick { fill: var(--ink); }
svg.chart .net { stroke: var(--ink); stroke-width: 2; }
svg.chart.spark .net { stroke: var(--accent); stroke-width: 1.5; }
svg.chart polyline.buy, svg.chart .buy.dot { stroke: var(--ok); stroke-width: 2; }
svg.chart polyline.sell, svg.chart .sell.dot { stroke: var(--accent); stroke-width: 2; }
svg.chart .dot { stroke-linecap: round; stroke-width: 7; }
svg.chart .ref.dot { stroke: var(--idle); stroke-width: 6; opacity: .75; }
svg.chart .jump.dot { stroke: var(--bad); stroke-width: 9; }
svg.chart rect:hover, svg.chart .dot:hover { opacity: .75; }
.chart-legend .sw.net { background: var(--ink); height: 3px; }
.chart-legend .sw.buy { background: var(--ok); } .chart-legend .sw.sell { background: var(--accent); }
.chart-legend .sw.ref { background: var(--idle); border-radius: 50%; } .chart-legend .sw.jump { background: var(--bad); border-radius: 50%; }
.chart-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--muted); }
.chart-legend .sw { display: inline-block; width: 12px; height: 10px; margin-inline-end: 5px; border-radius: 2px; vertical-align: middle; }
.hbars { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 4px 10px; align-items: center; margin: 6px 0 12px; }
.hbars .hb-l { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 14em; }
.stat.kpi .cmp { font-size: 12px; color: var(--muted); }
.stat.kpi .cmp .up { color: var(--ok); font-weight: 700; } .stat.kpi .cmp .down { color: var(--bad); font-weight: 700; }
@media print { svg.chart rect, .chart-legend .sw { print-color-adjust: exact; -webkit-print-color-adjust: exact; } }