.cloud-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid #d8e0ec;
  border-radius: 6px;
  background: #fff;
  color: #24405f;
  font: inherit;
  cursor: pointer;
}

.cloud-status-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #94a3b8;
}

.cloud-status[data-state="synced"] .cloud-status-dot { background: #16a34a; }
.cloud-status[data-state="syncing"] .cloud-status-dot { background: #2563eb; }
.cloud-status[data-state="offline"] .cloud-status-dot { background: #d97706; }
.cloud-status[data-state="error"],
.cloud-status[data-state="conflict"] { color: #b42318; border-color: #fecaca; }
.cloud-status[data-state="error"] .cloud-status-dot,
.cloud-status[data-state="conflict"] .cloud-status-dot { background: #dc2626; }

.cloud-panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(240px, .75fr);
  gap: 14px;
}

.cloud-account-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.cloud-account-line p { margin: 4px 0 0; }

.cloud-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.cloud-dialog {
  width: min(460px, calc(100vw - 28px));
  padding: 0;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
}

.cloud-dialog::backdrop { background: rgba(15, 23, 42, .46); }
.cloud-dialog-body { padding: 20px; }
.cloud-dialog-body h3 { margin: 0 0 6px; }
.cloud-dialog-body .form-grid { margin-top: 14px; }
.cloud-dialog-message { min-height: 22px; color: #b42318; margin: 8px 0 0; }

.cloud-conflict {
  border-color: #fecaca;
  background: #fff8f7;
}

@media (max-width: 760px) {
  .cloud-panel-grid { grid-template-columns: 1fr; }
  .cloud-status-label { display: none; }
  .cloud-status { width: 34px; justify-content: center; padding: 6px; }
}