.offline-sync-page{display:grid;gap:16px}
.offline-sync-page[hidden]{display:none!important}
.offline-sync-intro{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.offline-sync-status-card{display:grid;gap:16px}
.offline-sync-status-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.offline-sync-status-heading>div{display:grid;gap:4px}
.offline-sync-state,.offline-sync-connection{display:inline-flex;align-items:center;width:max-content;max-width:100%;border:1px solid var(--border,#cbd5e1);border-radius:999px;padding:5px 10px;font-size:12px;font-weight:800;letter-spacing:.02em;background:var(--surface-soft,#f8fafc)}
.offline-sync-status-heading strong{font-size:20px;color:var(--text,#172033)}
.offline-sync-status-heading small{color:var(--muted,#64748b)}
.offline-sync-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.offline-sync-summary-grid>div{display:grid;gap:4px;border:1px solid var(--border,#cbd5e1);border-radius:14px;padding:14px;background:var(--surface,#fff)}
.offline-sync-summary-grid span{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted,#64748b)}
.offline-sync-summary-grid strong{font-size:28px;line-height:1;color:var(--text,#172033)}
.offline-sync-summary-grid small{color:var(--muted,#64748b);line-height:1.35}
.offline-sync-list{display:grid;gap:10px}
.offline-sync-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;border:1px solid var(--border,#cbd5e1);border-radius:14px;padding:13px 14px;background:var(--surface,#fff)}
.offline-sync-row-main{min-width:0;display:grid;gap:4px}
.offline-sync-row-main>div{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.offline-sync-row-title{font-weight:850;color:var(--text,#172033)}
.offline-sync-row-meta,.offline-sync-row-error{font-size:12px;color:var(--muted,#64748b)}
.offline-sync-row-error{color:var(--danger,#b91c1c);font-weight:700}
.offline-sync-kind{display:inline-flex;border:1px solid var(--border,#cbd5e1);border-radius:999px;padding:3px 7px;font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.05em;background:var(--surface-soft,#f8fafc)}
.offline-sync-photo-preview{width:54px;height:54px;object-fit:cover;border-radius:10px;border:1px solid var(--border,#cbd5e1);background:var(--surface-soft,#f8fafc);flex:0 0 auto}
.offline-sync-row-copy{display:flex;gap:10px;align-items:center;min-width:0}
.offline-sync-row-actions{display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end}
.offline-sync-row-actions button{white-space:nowrap}
.offline-sync-help-card{display:grid;gap:5px}
.offline-sync-help-card p{margin:0;color:var(--muted,#64748b);line-height:1.55}
[data-offline-sync-badge]{min-width:18px;height:18px;padding:0 5px;border-radius:999px;align-items:center;justify-content:center;font-size:10px;font-style:normal;font-weight:900}
[data-offline-sync-badge]:not([hidden]){display:inline-flex}

@media(max-width:760px){
  .offline-sync-intro,.offline-sync-status-heading{display:grid;grid-template-columns:1fr}
  .offline-sync-intro .page-heading-actions{width:100%}
  .offline-sync-intro .page-heading-actions button{width:100%}
  .offline-sync-summary-grid{grid-template-columns:1fr}
  .offline-sync-row{grid-template-columns:1fr}
  .offline-sync-row-actions{justify-content:stretch}
  .offline-sync-row-actions button{flex:1 1 auto}
}