.offline-tools {
  --offline-ink: #d7f0ef;
  --offline-line: #a8dfdb42;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--offline-line);
  color: var(--offline-ink);
  font-size: 13px;
  line-height: 1.6;
  text-align: left;
}
.offline-tools [hidden] { display: none !important; }
.offline-tools p { margin: 0 0 6px; font-size: inherit; line-height: inherit; }
.offline-tools .offline-state { color: inherit; font-weight: 650; }
.offline-tools .offline-detail { opacity: .84; }
.offline-tools .offline-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.offline-tools .offline-actions a,
.offline-tools .offline-actions button {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid var(--offline-line);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.offline-tools details { margin-top: 6px; font-size: 12px; opacity: .8; }
.offline-tools summary { cursor: pointer; }
.offline-tools details p { margin-top: 6px; }
.offline-tools[data-offline-state="error"] .offline-state { color: #ffe1ab; }
.toolbar .offline-tools[data-offline-state="error"] .offline-state { color: #875010; }
.toolbar .offline-tools { --offline-ink: #173749; --offline-line: #c0d6dd; width: 100%; margin-top: 0; }
.toolbar .offline-tools .offline-actions a,
.toolbar .offline-tools .offline-actions button { color: #116d82; background: #fff; }
@media print { .offline-tools { display: none !important; } }