.offline-status {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 9px 12px;
  border: 1px solid #bdd0e4;
  border-radius: 999px;
  background: #fff;
  color: #14243a;
  box-shadow: 0 8px 28px rgba(15, 29, 48, .22);
  font: 700 13px/1.2 Arial, sans-serif;
}
.offline-status[hidden] { display: none; }
.offline-status.is-offline { background: #fff4df; border-color: #e7a72c; color: #663e00; }
.offline-status.is-syncing { background: #eaf3ff; border-color: #3076d8; }
.offline-status.is-error { background: #fff0f1; border-color: #df3344; color: #8d1421; }
.offline-status-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #17a45b; }
.offline-status.is-offline .offline-status-dot { background: #e18b00; }
.offline-status.is-syncing .offline-status-dot { background: #1768db; }
.offline-status.is-error .offline-status-dot { background: #d91f35; }
.offline-status button {
  border: 0;
  border-radius: 999px;
  padding: 6px 10px;
  background: #1768db;
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.offline-status-actions { display: flex; align-items: center; gap: 6px; }
.offline-status .offline-prepare { background: #102c4d; }
.offline-status .offline-sync { background: #1768db; }
.offline-status button:disabled { opacity: .55; cursor: wait; }
.offline-conflict-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(5, 17, 33, .66);
}
.offline-conflict-dialog {
  width: min(720px, 100%);
  max-height: min(760px, 92vh);
  overflow: auto;
  border-radius: 20px;
  background: #fff;
  color: #10243f;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .34);
  font-family: Arial, sans-serif;
}
.offline-conflict-dialog > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; background: #102c4d; color: #fff; }
.offline-conflict-dialog header small { color: #7fe0ad; font-weight: 800; letter-spacing: .12em; }
.offline-conflict-dialog header h2 { margin: 5px 0 0; font-size: 23px; }
.offline-conflict-dialog header > button { border: 0; background: transparent; color: #fff; font-size: 32px; cursor: pointer; }
.offline-conflict-intro { margin: 0; padding: 18px 24px; background: #f2f6fb; font-weight: 700; }
.offline-conflict-list { display: grid; gap: 12px; padding: 18px 24px 24px; }
.offline-conflict-list article { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; padding: 16px; border: 1px solid #ced9e6; border-radius: 14px; }
.offline-conflict-list article strong, .offline-conflict-list article span { display: block; }
.offline-conflict-list article span { margin-top: 3px; color: #607089; font-size: 13px; }
.offline-conflict-list article p { margin: 9px 0 0; line-height: 1.4; }
.offline-conflict-list article em { display: block; margin-top: 10px; color: #1c579d; font-style: normal; font-weight: 800; }
.offline-conflict-actions { display: grid; gap: 8px; min-width: 190px; }
.offline-conflict-actions button { border: 0; border-radius: 10px; padding: 10px 13px; font-weight: 800; cursor: pointer; }
.offline-conflict-actions .use-server { background: #e8eef6; color: #10243f; }
.offline-conflict-actions .use-device { background: #1768db; color: #fff; }
.offline-conflict-list article.is-working { opacity: .62; }
@media (max-width: 640px) {
  .dashboard-topbar { align-items: flex-start; gap: 8px; }
  .dashboard-topbar-right { flex-wrap: wrap; justify-content: flex-end; }
  .offline-status { width: 100%; justify-content: center; flex-wrap: wrap; border-radius: 12px; order: 2; }
  .offline-status-text { min-width: 0; white-space: normal; }
  .offline-status-actions { width: 100%; justify-content: center; }
  .offline-conflict-overlay { padding: 10px; }
  .offline-conflict-dialog > header, .offline-conflict-list { padding-left: 16px; padding-right: 16px; }
  .offline-conflict-list article { grid-template-columns: 1fr; }
  .offline-conflict-actions { grid-template-columns: 1fr 1fr; min-width: 0; }
}