.sync-progress {
  margin: 0 0 15px;
  padding: 14px;
  background: #eaf4ff;
  border: 1px solid #a9d2ff;
  border-radius: 14px;
  color: var(--blue2);
}

.sync-progress > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.sync-progress small {
  display: block;
  margin-top: 7px;
  color: #49647f;
}

.sync-track,
.record-progress {
  height: 8px;
  background: #cfe5fb;
  border-radius: 99px;
  overflow: hidden;
}

.sync-track {
  margin-top: 10px;
}

.sync-track span,
.record-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--blue), #32a0ff);
  border-radius: inherit;
  transition: width .25s ease;
}

.record-progress {
  height: 5px;
  margin: 0 14px 10px;
}

.record-card.is-synced .record-badge {
  color: #047857;
  background: #d1fae5;
}

.record-card.is-syncing .record-badge {
  color: #075da8;
  background: #dbeafe;
  white-space: nowrap;
}

.drive-link{display:block;margin:0 0 14px;padding:12px 14px;border-radius:12px;background:#eaf5ff;color:#075f96;font-weight:800;text-align:center;text-decoration:none}
.resend-button,.retry-button{width:calc(100% - 28px);margin:0 14px 14px;padding:10px;border:1px solid #b8d9ed;border-radius:10px;background:#f4faff;color:#075f96;font:inherit;font-size:12px;font-weight:800}
.retry-button{font-size:14px;min-height:44px}.retry-button:disabled{opacity:.65;cursor:wait}
.record-detail,.record-error{margin:0 16px 12px;font-size:14px;line-height:1.45;color:#49647f}
.record-error{color:#8a2519;background:#fff0ed;padding:10px;border-radius:8px;overflow-wrap:anywhere}
.record-card.has-error .record-badge{color:#8a2519;background:#ffebe7}
.record-badge{flex-shrink:0;max-width:45%}
.record-drive-link{display:block;margin:0 14px 14px;padding:12px;border-radius:10px;background:#e8f8ef;color:#075e43;text-align:center;font-size:14px;font-weight:800;text-decoration:none}
#recordsSyncMessage{margin:0 0 14px}.notice.sync-error{border-color:#e4a699}.notice.sync-error strong{color:#8a2519}
.app-version{color:#d2e0ec;font-size:14px;margin-top:22px}
.sync-progress:after{content:'';display:block;width:20px;height:20px;margin-top:12px;border:3px solid #bad7ee;border-top-color:#086db1;border-radius:50%;animation:sync-spin 1s linear infinite}
@keyframes sync-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.sync-progress:after{animation:none}}