@import url("sync.css");

.aspire-offline-indicator {
  position: fixed;
  bottom: 12px;
  left: 12px;
  z-index: 12000;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  background: var(--card, #fff);
  color: var(--muted, #555);
  border: 1px solid var(--border, #ccc);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  pointer-events: none;
}

.aspire-offline-indicator.hidden {
  display: none;
}

.aspire-pwa-update {
  position: fixed;
  bottom: 12px;
  right: 12px;
  z-index: 12001;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  background: var(--card, #fff);
  color: var(--text, #222);
  border: 1px solid var(--border, #ccc);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.aspire-pwa-update.hidden {
  display: none;
}

.aspire-characters-offline-note {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  background: color-mix(in srgb, var(--accent, #c8102e) 12%, transparent);
  color: var(--text, #222);
}