body.sync-pending .app-shell { visibility: hidden; }
.storage-status { cursor: pointer; user-select: none; }
.storage-status[data-sync-state="syncing"] i { background: #d79b43; animation: syncPulse 1s ease-in-out infinite; }
.storage-status[data-sync-state="synced"] i { background: #6d9a78; }
.storage-status[data-sync-state="failed"] i { background: #c96557; }
.storage-status[data-sync-state="pending"] i { background: #d79b43; }
.account-button { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-intro, .merge-modal > p { color: var(--muted); font-size: 13px; line-height: 1.7; }
.auth-modal { width: min(430px, 100%); }
.auth-modal form { display: grid; gap: 13px; }
.auth-actions, .merge-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.auth-hint, .merge-summary { color: var(--muted); font-size: 11px; line-height: 1.65; }
.merge-summary { padding: 12px 13px; border: 1px solid var(--line); border-radius: 9px; background: #f8faf7; }
.conflict-actions { justify-content: flex-start; }
.conflict-actions .button-primary { margin-left: auto; }
@keyframes syncPulse { 50% { opacity: .38; transform: scale(.75); } }
@media (max-width:700px) {
  .app-bar-actions { gap: 5px; }
  .account-button { max-width: 84px; padding-inline: 8px; }
  .storage-status { display: inline-flex; max-width: 82px; overflow: hidden; gap: 4px; font-size: 10px; }
  .storage-status span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .auth-actions, .merge-actions { display: grid; grid-template-columns: 1fr; }
  .auth-actions .button, .merge-actions .button { width: 100%; min-height: 43px; }
  .conflict-actions .button-primary { margin-left: 0; }
}