.wrpf-doc {
  box-sizing: border-box; position: fixed; inset: 0; margin: auto; padding: 0;
  width: min(1280px, calc(100vw - 48px)); height: min(900px, calc(100dvh - 48px));
  max-width: none; max-height: none; border: 0; border-top: 3px solid #ed3024;
  color: #202124; background: #fff; box-shadow: 0 24px 100px #0008;
  font: 16px/1.45 Arial, sans-serif; overflow: hidden;
}
.wrpf-doc[open] { display: flex; flex-direction: column; }
.wrpf-doc::backdrop { background: rgb(10 12 16 / 78%); }
.wrpf-doc *, .wrpf-doc *::before, .wrpf-doc *::after { box-sizing: border-box; }
.wrpf-doc [hidden] { display: none !important; }
.wrpf-doc button, .wrpf-doc input { font: inherit; letter-spacing: normal; text-transform: none; }
.wrpf-doc button {
  display: inline-flex; justify-content: center; align-items: center; gap: 8px;
  min-width: 40px; min-height: 40px; margin: 0; padding: 8px 12px;
  color: #24262a; background: #fff; border: 1px solid #d5d7db; border-radius: 4px;
  cursor: pointer; line-height: 1.3; box-shadow: none;
}
.wrpf-doc button:hover { color: #b32018; border-color: #ed3024; background: #fff5f4; }
.wrpf-doc button:disabled { opacity: .4; cursor: default; }
.wrpf-doc :focus-visible { outline: 3px solid #d82d23; outline-offset: 2px; }
.wrpf-doc__header { --doc-control-size: 44px; display: flex; align-items: center; gap: 12px; padding: 12px 20px; color: #fff; background: #1b1d21; flex: 0 0 auto; }
.wrpf-doc__actions { display: flex; align-items: center; flex: 0 0 auto; margin-left: auto; }
.wrpf-doc .wrpf-doc__header button {
  flex: 0 0 var(--doc-control-size); width: var(--doc-control-size); height: var(--doc-control-size);
  min-width: var(--doc-control-size); min-height: var(--doc-control-size); max-height: var(--doc-control-size);
  margin: 0; padding: 0; appearance: none; color: #fff; background: #24262b;
  border: 1px solid #55585f; border-radius: 4px; line-height: 1;
}
.wrpf-doc .wrpf-doc__header button:hover:not(:disabled) { color: #fff; background: #36383e; border-color: #92959c; }
.wrpf-doc__header button svg, .wrpf-doc__return svg { display: block; flex: 0 0 20px; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.wrpf-doc .wrpf-doc__return { display: none; }
.wrpf-doc__body { display: flex; flex: 1; min-height: 0; }
.wrpf-doc__sidebar { flex: 0 0 300px; min-width: 0; padding: 16px; background: #fafafa; overflow: auto; border-right: 1px solid #ddd; }
.wrpf-doc [data-doc-folder-title] { margin: 12px 0; font: 600 14px/1.5 Arial, sans-serif; text-transform: none; letter-spacing: normal; color: #303237; overflow-wrap: anywhere; }
.wrpf-doc .wrpf-doc__file { display: flex; flex-direction: column; align-items: flex-start; width: 100%; margin: 0 0 8px; padding: 12px; text-align: left; }
.wrpf-doc .wrpf-doc__file[aria-current] { color: #24262a; border-color: #ed3024; background: #fff7f6; box-shadow: none; }
@media (hover: hover) {
  .wrpf-doc .wrpf-doc__file:hover:not([aria-current]) { color: #24262a; background: #f4f4f5; border-color: #aeb1b7; }
}
@media (hover: none) {
  .wrpf-doc .wrpf-doc__file:hover:not([aria-current]) { color: #24262a; background: #fff; border-color: #d5d7db; }
}
.wrpf-doc__type { color: #b02a23; font-size: 10px; font-weight: 700; letter-spacing: .8px; }
.wrpf-doc__filename { font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.wrpf-doc__empty { margin: 16px 0; color: #43464d; font: 14px/1.5 Arial, sans-serif; }
.wrpf-doc__file small { color: #6b6e74; font-size: 11px; }
.wrpf-doc__preview { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; background: #e9eaed; }
.wrpf-doc__toolbar { display: flex; align-items: center; flex: 1; min-width: 0; flex-wrap: wrap; gap: 8px 24px; font-size: 13px; font-variant-numeric: tabular-nums; }
.wrpf-doc__page-controls, .wrpf-doc__zoom-controls { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.wrpf-doc__toolbar label { display: flex; align-items: center; gap: 8px; margin: 0; color: inherit; font-weight: 400; }
.wrpf-doc .wrpf-doc__toolbar input { width: 52px; height: var(--doc-control-size); min-height: var(--doc-control-size); padding: 4px; margin: 0; text-align: center; font-size: 16px; line-height: 1; background: #24262b; color: #fff; caret-color: #fff; border: 1px solid #55585f; border-radius: 4px; appearance: textfield; -moz-appearance: textfield; }
.wrpf-doc__toolbar input::-webkit-inner-spin-button, .wrpf-doc__toolbar input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.wrpf-doc [data-doc-zoom] { min-width: 42px; text-align: center; }
.wrpf-doc__status { padding: 28px; text-align: center; color: #43464d; }
.wrpf-doc__status p { margin: 0 0 16px; font: 16px/1.6 Arial, sans-serif; }
.wrpf-doc__status.is-loading::after { content: ''; display: block; width: 120px; height: 3px; margin: 0 auto; background: #d82d23; transform-origin: left; animation: wrpf-doc-loading 1.2s ease-in-out infinite alternate; }
@keyframes wrpf-doc-loading { from { transform: scaleX(.2); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .wrpf-doc__status.is-loading::after { animation: none; } }
.wrpf-doc__status a { display: inline-block; margin: 8px 12px; color: #a42119; text-decoration: underline; }
.wrpf-doc__status a.wrpf-doc__loading-link { max-width: 100%; min-height: 40px; margin: 0 0 16px; padding: 10px 16px; border: 1px solid #d5d7db; border-radius: 4px; background: #fff; color: #a42119; font: 600 14px/1.4 Arial, sans-serif; text-decoration: none; white-space: normal; }
.wrpf-doc__status a.wrpf-doc__loading-link:hover { border-color: #a42119; background: #fff5f4; text-decoration: underline; }
.wrpf-doc__viewport { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; overflow-anchor: none; padding: 20px; }
.wrpf-doc__paper { width: max-content; min-width: 100%; text-align: center; }
.wrpf-doc__paper--image { width: 100%; }
.wrpf-doc__paper--pdf { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.wrpf-doc__original { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding: 10px 16px; background: #fafafa; border-bottom: 1px solid #d5d7db; font: 13px/1.5 Arial, sans-serif; color: #55585f; }
.wrpf-doc__original a { flex: 0 0 auto; display: inline-block; padding: 6px 10px; border: 1px solid #d5d7db; border-radius: 4px; color: #a42119; background: #fff; text-decoration: none; font-weight: 600; }
.wrpf-doc__original a:hover { border-color: #a42119; text-decoration: underline; }
.wrpf-doc__paper--office { width: 100%; min-width: 100%; text-align: left; }
.wrpf-doc__word { max-width: 1000px; margin: 0 auto; padding: 28px; color: #202124; background: #fff; box-shadow: 0 2px 12px #0002; font: 16px/1.65 Arial, sans-serif; overflow-wrap: anywhere; }
.wrpf-doc__word p { margin: 0 0 1em; font: inherit; color: inherit; }
.wrpf-doc__word h1, .wrpf-doc__word h2, .wrpf-doc__word h3, .wrpf-doc__word h4, .wrpf-doc__word h5, .wrpf-doc__word h6 { margin: 1.2em 0 .6em; font-family: inherit; line-height: 1.3; color: inherit; letter-spacing: normal; text-transform: none; }
.wrpf-doc__word h1 { font-size: 1.7em; } .wrpf-doc__word h2 { font-size: 1.4em; } .wrpf-doc__word h3 { font-size: 1.2em; }
.wrpf-doc__word ul, .wrpf-doc__word ol { margin: 0 0 1em; padding-left: 1.8em; }
.wrpf-doc__word table { width: 100%; border-collapse: collapse; margin: 1em 0; font: inherit; }
.wrpf-doc__word td, .wrpf-doc__word th { padding: 8px; border: 1px solid #d5d7db; vertical-align: top; }
.wrpf-doc__word img { max-width: 100%; height: auto; }
.wrpf-doc__word-frame { display: block; width: 100%; min-height: 150px; border: 0; background: #fff; box-shadow: 0 2px 12px #0002; }
.wrpf-doc__workbook { width: max-content; min-width: 100%; max-width: none; }
.wrpf-doc__office-caption { position: sticky; left: 0; width: fit-content; max-width: calc(100vw - 100px); margin: 0 0 12px; color: #55585f; font: 12px/1.5 Arial, sans-serif; }
.wrpf-doc .wrpf-doc__sheet { width: auto; table-layout: fixed; border-collapse: collapse; margin: 0; color: #000; background: #fff; font: 11pt/1.15 Calibri, Arial, sans-serif; }
.wrpf-doc .wrpf-doc__sheet td { min-width: 0; padding: 1px 2px; border: 1px solid #e5e7eb; vertical-align: bottom; white-space: pre; overflow-wrap: normal; line-height: 1.15; box-sizing: border-box; }
.wrpf-doc__cell-content { overflow: hidden; line-height: inherit; white-space: inherit; }
.wrpf-doc__cell-content--rotated { display: flex; align-items: center; justify-content: center; }
.wrpf-doc__sheet-tools { position: sticky; left: 0; top: 0; z-index: 2; display: flex; align-items: center; gap: 6px; width: fit-content; max-width: calc(100vw - 80px); flex-wrap: wrap; padding: 6px; margin-bottom: 8px; background: #fafafa; border: 1px solid #d5d7db; border-radius: 4px; }
.wrpf-doc__sheet-tools button { min-width: 32px; min-height: 30px; padding: 4px 9px; font: 13px/1.4 Arial, sans-serif; }
.wrpf-doc__sheet-tools span { min-width: 40px; text-align: center; font: 12px/1.4 Arial, sans-serif; }
.wrpf-doc__sheet-tools button[aria-pressed="true"] { color: #b32018; border-color: #b32018; }
.wrpf-doc__sheet .wrpf-doc__number { text-align: right; font-variant-numeric: tabular-nums; }
.wrpf-doc__sheets { position: sticky; left: 0; bottom: 0; display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; width: fit-content; max-width: calc(100vw - 100px); margin-top: 12px; padding: 8px; background: #fafafa; border: 1px solid #d5d7db; border-radius: 4px; }
.wrpf-doc__sheets button { flex: 0 0 auto; font-size: 13px; }
.wrpf-doc__sheets button[aria-pressed="true"] { border-color: #b32018; background: #fff5f4; color: #b32018; }
.wrpf-doc__page { position: relative; flex: 0 0 auto; padding: 0; margin: 0; border: 0; background: #fff; box-shadow: 0 2px 12px #0002; overflow: hidden; }
.wrpf-doc__page-placeholder { display: block; padding: 28px 12px; color: #767980; font-size: 13px; }
.wrpf-doc__paper canvas { display: block; max-width: none; margin: 0 auto; background: #fff; box-shadow: 0 2px 12px #0002; }
.wrpf-doc__page canvas { box-shadow: none; }
.wrpf-doc__paper img { display: block; max-width: min(100%, 1600px); height: auto; margin: auto; }
.wrpf-doc__sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 700px) {
  .wrpf-doc { width: 100vw; height: 100dvh; }
  .wrpf-doc__header { --doc-control-size: 40px; align-items: flex-start; padding: 8px; gap: 8px; }
  .wrpf-doc__body { flex-direction: column; }
  .wrpf-doc__sidebar { flex: 1; min-height: 0; border-right: 0; padding: 8px 12px; }
  .wrpf-doc--reading .wrpf-doc__sidebar { display: none; }
  .wrpf-doc--folder .wrpf-doc__preview { display: none; }
  .wrpf-doc .wrpf-doc__return { display: flex; flex: 0 0 auto; justify-content: flex-start; width: 100%; min-height: 40px; margin: 0; padding: 8px 12px; border: 0; border-bottom: 1px solid #d5d7db; border-radius: 0; background: #fafafa; color: #303237; font-size: 13px; }
  .wrpf-doc .wrpf-doc__return:hover { color: #303237; background: #f0f0f2; }
  .wrpf-doc [data-doc-files] { display: flex; flex-direction: column; gap: 8px; }
  .wrpf-doc .wrpf-doc__file { flex: 0 0 auto; min-width: 0; width: 100%; margin: 0; }
  .wrpf-doc__filename { display: block; max-width: 100%; }
  .wrpf-doc__toolbar { gap: 8px 12px; font-size: 13px; }
  .wrpf-doc__page-controls, .wrpf-doc__zoom-controls { gap: 4px; }
  .wrpf-doc__toolbar label { gap: 4px; }
  .wrpf-doc__page-caption { display: none; }
  .wrpf-doc .wrpf-doc__toolbar input { width: var(--doc-control-size); }
  .wrpf-doc__status { padding: 20px 16px; }
  .wrpf-doc__viewport { padding: 12px; }
  .wrpf-doc__word { padding: 16px; font-size: 15px; }
  .wrpf-doc__original { padding: 8px 12px; font-size: 12px; }
  .wrpf-doc__office-caption, .wrpf-doc__sheets { max-width: calc(100vw - 24px); }
}